@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
1 lines • 6.02 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 { DataAttributes, Factory, genericFactory, MantineSize, useProps } from '../../../core';\nimport { InputsGroupFieldset } from '../../../utils/InputsGroupFieldset';\nimport { Input, InputWrapperProps, InputWrapperStylesNames } from '../../Input';\n\nexport interface CheckboxGroupContextValue<Value extends string = 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 string = string> extends Omit<\n InputWrapperProps,\n 'onChange'\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 string = string>(props: CheckboxGroupProps<Value>) => 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":";;;;;;;;;;AAaA,MAAa,wBAAA,GAAA,MAAA,eAAuE,KAAK;AAqDzF,MAAM,eAAe,EACnB,4BAA4B,KAC7B;AAED,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,MAAM;CAElD,MAAM,CAAC,QAAQ,aAAA,GAAA,eAAA,iBAA4B;EACzC;EACA;EACA,YAAY,EAAE;EACd;EACD,CAAC;CAEF,MAAM,gBAAgB,UAAwD;EAC5E,MAAM,YAAY,OAAO,UAAU,WAAW,QAAQ,MAAM,cAAc;AAE1E,MAAI,SACF;EAGF,MAAM,sBAAsB,OAAO,SAAS,UAAU;AAEtD,MAAI,CAAC,uBAAuB,qBAAqB,OAAO,UAAU,kBAChE;AAGF,WACE,sBAAsB,OAAO,QAAQ,SAAS,SAAS,UAAU,GAAG,CAAC,GAAG,QAAQ,UAAU,CAC3F;;CAGH,MAAM,cAAc,kBAA0B;AAC5C,MAAI,SACF,QAAO;AAGT,MAAI,CAAC,kBACH,QAAO;EAGT,MAAM,sBAAsB,OAAO,SAAS,cAAc;EAC1D,MAAM,kBAAkB,OAAO,UAAU;AACzC,SAAO,CAAC,uBAAuB;;CAGjC,MAAM,mBAAmB,OAAO,KAAK,2BAA2B;AAEhE,QACE,iBAAA,GAAA,kBAAA,KAAC,sBAAD;EAAsB,OAAO;GAAE,OAAO;GAAQ,UAAU;GAAc;GAAM;GAAY;YACtF,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;IAA+B,CAAA,EAClE,iBAAA,GAAA,kBAAA,KAAC,SAAD;IAAO,MAAK;IAAe;IAAM,OAAO;IAAkB,GAAI;IAAoB,CAAA,CACpE;;EACK,CAAA;GAEjB;AAEV,cAAc,UAAUD,cAAAA,MAAM,QAAQ;AACtC,cAAc,cAAc"}