@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
1 lines • 6.11 kB
Source Map (JSON)
{"version":3,"file":"CheckboxGroup.cjs","names":["genericFactory","useProps","Input","InputsGroupFieldset"],"sources":["../../../../src/components/Checkbox/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport { useUncontrolled } from '@mantine/hooks';\nimport {\n DataAttributes,\n Factory,\n genericFactory,\n MantineSize,\n Primitive,\n useProps,\n} from '../../../core';\nimport { InputsGroupFieldset } from '../../../utils/InputsGroupFieldset';\nimport { Input, InputWrapperProps, InputWrapperStylesNames } from '../../Input';\n\nexport interface CheckboxGroupContextValue<Value extends Primitive = string> {\n value: Value[];\n onChange: (event: React.ChangeEvent<HTMLInputElement> | string) => void;\n size: MantineSize | (string & {}) | undefined;\n isDisabled?: (value: Value) => boolean;\n}\n\nexport const CheckboxGroupContext = createContext<CheckboxGroupContextValue | null>(null);\n\nexport type CheckboxGroupStylesNames = InputWrapperStylesNames;\n\nexport interface CheckboxGroupProps<Value extends Primitive = string> extends Omit<\n InputWrapperProps,\n 'onChange' | 'value' | 'defaultValue'\n> {\n /** `Checkbox` components and any other elements */\n children: React.ReactNode;\n\n /** Controlled component value */\n value?: Value[];\n\n /** Default value for uncontrolled component */\n defaultValue?: Value[];\n\n /** Called with an array of selected checkboxes values when value changes */\n onChange?: (value: Value[]) => void;\n\n /** Props passed down to the root element (`Input.Wrapper` component) */\n wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n /** Controls size of the `Input.Wrapper` @default 'sm' */\n size?: MantineSize | (string & {});\n\n /** If set, value cannot be changed */\n readOnly?: boolean;\n\n /** `name` attribute of the hidden input for uncontrolled forms */\n name?: string;\n\n /** Props passed down to the hidden input for uncontrolled forms */\n hiddenInputProps?: React.ComponentProps<'input'> & DataAttributes;\n\n /** Separator for values in the hidden input for uncontrolled forms @default ',' */\n hiddenInputValuesSeparator?: string;\n\n /** Maximum number of checkboxes that can be selected. When the limit is reached, unselected checkboxes will be disabled */\n\n maxSelectedValues?: number;\n\n /** Sets `disabled` attribute, prevents interactions */\n disabled?: boolean;\n}\n\nexport type CheckboxGroupFactory = Factory<{\n props: CheckboxGroupProps;\n ref: HTMLDivElement;\n stylesNames: CheckboxGroupStylesNames;\n signature: <Value extends Primitive = string>(\n props: CheckboxGroupProps<Value>\n ) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n hiddenInputValuesSeparator: ',',\n} satisfies Partial<CheckboxGroupProps>;\n\nexport const CheckboxGroup = genericFactory<CheckboxGroupFactory>(((\n props: CheckboxGroupProps<string>\n) => {\n const {\n value,\n defaultValue,\n onChange,\n size,\n wrapperProps,\n children,\n readOnly,\n name,\n hiddenInputValuesSeparator,\n hiddenInputProps,\n maxSelectedValues,\n disabled,\n ...others\n } = useProps('CheckboxGroup', defaultProps, props);\n\n const [_value, setValue] = useUncontrolled({\n value,\n defaultValue,\n finalValue: [],\n onChange,\n });\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement> | string) => {\n const itemValue = typeof event === 'string' ? event : event.currentTarget.value;\n\n if (readOnly) {\n return;\n }\n\n const isCurrentlySelected = _value.includes(itemValue);\n\n if (!isCurrentlySelected && maxSelectedValues && _value.length >= maxSelectedValues) {\n return;\n }\n\n setValue(\n isCurrentlySelected ? _value.filter((item) => item !== itemValue) : [..._value, itemValue]\n );\n };\n\n const isDisabled = (checkboxValue: string) => {\n if (disabled) {\n return true;\n }\n\n if (!maxSelectedValues) {\n return false;\n }\n\n const isCurrentlySelected = _value.includes(checkboxValue);\n const hasReachedLimit = _value.length >= maxSelectedValues;\n return !isCurrentlySelected && hasReachedLimit;\n };\n\n const hiddenInputValue = _value.join(hiddenInputValuesSeparator);\n\n return (\n <CheckboxGroupContext value={{ value: _value, onChange: handleChange, size, isDisabled }}>\n <Input.Wrapper\n size={size}\n {...wrapperProps}\n {...others}\n labelElement=\"div\"\n __staticSelector=\"CheckboxGroup\"\n >\n <InputsGroupFieldset role=\"group\">{children}</InputsGroupFieldset>\n <input type=\"hidden\" name={name} value={hiddenInputValue} {...hiddenInputProps} />\n </Input.Wrapper>\n </CheckboxGroupContext>\n );\n}) as any);\n\nCheckboxGroup.classes = Input.Wrapper.classes;\nCheckboxGroup.displayName = '@mantine/core/CheckboxGroup';\n"],"mappings":";;;;;;;;;;AAoBA,MAAa,wBAAA,GAAA,MAAA,eAAuE,IAAI;AAuDxF,MAAM,eAAe,EACnB,4BAA4B,IAC9B;AAEA,MAAa,gBAAgBA,gBAAAA,iBAC3B,UACG;CACH,MAAM,EACJ,OACA,cACA,UACA,MACA,cACA,UACA,UACA,MACA,4BACA,kBACA,mBACA,UACA,GAAG,WACDC,kBAAAA,SAAS,iBAAiB,cAAc,KAAK;CAEjD,MAAM,CAAC,QAAQ,aAAA,GAAA,eAAA,iBAA4B;EACzC;EACA;EACA,YAAY,CAAC;EACb;CACF,CAAC;CAED,MAAM,gBAAgB,UAAwD;EAC5E,MAAM,YAAY,OAAO,UAAU,WAAW,QAAQ,MAAM,cAAc;EAE1E,IAAI,UACF;EAGF,MAAM,sBAAsB,OAAO,SAAS,SAAS;EAErD,IAAI,CAAC,uBAAuB,qBAAqB,OAAO,UAAU,mBAChE;EAGF,SACE,sBAAsB,OAAO,QAAQ,SAAS,SAAS,SAAS,IAAI,CAAC,GAAG,QAAQ,SAAS,CAC3F;CACF;CAEA,MAAM,cAAc,kBAA0B;EAC5C,IAAI,UACF,OAAO;EAGT,IAAI,CAAC,mBACH,OAAO;EAGT,MAAM,sBAAsB,OAAO,SAAS,aAAa;EACzD,MAAM,kBAAkB,OAAO,UAAU;EACzC,OAAO,CAAC,uBAAuB;CACjC;CAEA,MAAM,mBAAmB,OAAO,KAAK,0BAA0B;CAE/D,OACE,iBAAA,GAAA,kBAAA,KAAC,sBAAD;EAAsB,OAAO;GAAE,OAAO;GAAQ,UAAU;GAAc;GAAM;EAAW;YACrF,iBAAA,GAAA,kBAAA,MAACC,cAAAA,MAAM,SAAP;GACQ;GACN,GAAI;GACJ,GAAI;GACJ,cAAa;GACb,kBAAiB;aALnB,CAOE,iBAAA,GAAA,kBAAA,KAACC,4BAAAA,qBAAD;IAAqB,MAAK;IAAS;GAA8B,CAAA,GACjE,iBAAA,GAAA,kBAAA,KAAC,SAAD;IAAO,MAAK;IAAe;IAAM,OAAO;IAAkB,GAAI;GAAmB,CAAA,CACpE;;CACK,CAAA;AAE1B,EAAS;AAET,cAAc,UAAUD,cAAAA,MAAM,QAAQ;AACtC,cAAc,cAAc"}