UNPKG

@mantine/core

Version:

React components library focused on usability, accessibility and developer experience

mantine.dev

mantinedev/mantine

1 lines • 8.56 kB
1
{"version":3,"file":"Chip.cjs","names":["createVarsResolver","getFontSize","getSize","getRadius","factory","useProps","useStyles","ChipGroupContext","extractStyleProps","Box","CheckIcon","classes","ChipGroup"],"sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import { use } from 'react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n DataAttributes,\n ElementProps,\n extractStyleProps,\n factory,\n Factory,\n getFontSize,\n getRadius,\n getSize,\n MantineColor,\n MantineRadius,\n MantineSize,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { CheckIcon } from '../Checkbox';\nimport { ChipGroup, ChipGroupContext } from './ChipGroup/ChipGroup';\nimport classes from './Chip.module.css';\n\nexport type ChipStylesNames = 'root' | 'input' | 'iconWrapper' | 'checkIcon' | 'label';\nexport type ChipVariant = 'outline' | 'filled' | 'light';\nexport type ChipCssVariables = {\n root:\n | '--chip-fz'\n | '--chip-size'\n | '--chip-icon-size'\n | '--chip-padding'\n | '--chip-checked-padding'\n | '--chip-radius'\n | '--chip-bg'\n | '--chip-hover'\n | '--chip-color'\n | '--chip-bd'\n | '--chip-spacing';\n};\n\nexport interface ChipProps\n extends BoxProps, StylesApiProps<ChipFactory>, ElementProps<'input', 'size' | 'onChange'> {\n /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default 'xl' */\n radius?: MantineRadius;\n\n /** Controls various properties related to the component size @default 'sm' */\n size?: MantineSize;\n\n /** Chip input type @default 'checkbox' */\n type?: 'radio' | 'checkbox';\n\n /** `label` element associated with the input */\n children: React.ReactNode;\n\n /** Controlled checked state */\n checked?: boolean;\n\n /** Uncontrolled checked state initial value */\n defaultChecked?: boolean;\n\n /** Calls when checked state changes */\n onChange?: (checked: boolean) => void;\n\n /** Key of `theme.colors` or any valid CSS color. @default theme.primaryColor */\n color?: MantineColor;\n\n /** Unique input id, generated randomly if not provided */\n id?: string;\n\n /** Props passed down to the root element */\n wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n /** Any element or component to replace the default icon */\n icon?: React.ReactNode;\n\n /** Assigns ref of the root element */\n rootRef?: React.Ref<HTMLDivElement>;\n\n /** If set, adjusts text color based on the chip background color for `filled` variant */\n autoContrast?: boolean;\n}\n\nexport type ChipFactory = Factory<{\n props: ChipProps;\n ref: HTMLInputElement;\n stylesNames: ChipStylesNames;\n vars: ChipCssVariables;\n variant: ChipVariant;\n staticComponents: {\n Group: typeof ChipGroup;\n };\n}>;\n\nconst defaultProps = {\n type: 'checkbox',\n} satisfies Partial<ChipProps>;\n\nconst varsResolver = createVarsResolver<ChipFactory>(\n (theme, { size, radius, variant, color, autoContrast }) => {\n const colors = theme.variantColorResolver({\n color: color || theme.primaryColor,\n theme,\n variant: variant || 'filled',\n autoContrast,\n });\n\n return {\n root: {\n '--chip-fz': getFontSize(size),\n '--chip-size': getSize(size, 'chip-size'),\n '--chip-radius': radius === undefined ? undefined : getRadius(radius),\n '--chip-checked-padding': getSize(size, 'chip-checked-padding'),\n '--chip-padding': getSize(size, 'chip-padding'),\n '--chip-icon-size': getSize(size, 'chip-icon-size'),\n '--chip-bg': color || variant ? colors.background : undefined,\n '--chip-hover': color || variant ? colors.hover : undefined,\n '--chip-color': color || variant ? colors.color : undefined,\n '--chip-bd': color || variant ? colors.border : undefined,\n '--chip-spacing': getSize(size, 'chip-spacing'),\n },\n };\n }\n);\n\nexport const Chip = factory<ChipFactory>((_props) => {\n const props = useProps('Chip', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n id,\n checked,\n defaultChecked,\n onChange,\n value,\n wrapperProps,\n type,\n disabled,\n children,\n size,\n variant,\n icon,\n rootRef,\n autoContrast,\n mod,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<ChipFactory>({\n name: 'Chip',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const ctx = use(ChipGroupContext);\n const uuid = useId(id);\n const { styleProps, rest } = extractStyleProps(others);\n\n const [_value, setValue] = useUncontrolled({\n value: checked,\n defaultValue: defaultChecked,\n finalValue: false,\n onChange,\n });\n\n const contextProps = ctx\n ? {\n checked: ctx.isChipSelected(value as string),\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n ctx.onChange(event);\n onChange?.(event.currentTarget.checked);\n },\n type: ctx.multiple ? 'checkbox' : 'radio',\n }\n : {};\n\n const _checked = contextProps.checked || _value;\n\n return (\n <Box\n size={size}\n variant={variant}\n ref={rootRef}\n mod={mod}\n {...getStyles('root')}\n {...styleProps}\n {...wrapperProps}\n >\n <input\n type={type}\n {...getStyles('input')}\n checked={_checked}\n onChange={(event) => setValue(event.currentTarget.checked)}\n id={uuid}\n disabled={disabled}\n value={value}\n {...contextProps}\n {...rest}\n />\n\n <Box\n component=\"label\"\n htmlFor={uuid}\n mod={{ checked: _checked, disabled }}\n {...getStyles('label', { variant: variant || 'filled' })}\n >\n {_checked && icon !== null && icon !== false && (\n <span {...getStyles('iconWrapper')}>\n {icon === undefined ? <CheckIcon {...getStyles('checkIcon')} /> : icon}\n </span>\n )}\n <span>{children}</span>\n </Box>\n </Box>\n );\n});\n\nChip.classes = classes;\nChip.varsResolver = varsResolver;\nChip.displayName = '@mantine/core/Chip';\nChip.Group = ChipGroup;\n"],"mappings":";;;;;;;;;;;;;;;;AA+FA,MAAM,eAAe,EACnB,MAAM,YACP;AAED,MAAM,eAAeA,6BAAAA,oBAClB,OAAO,EAAE,MAAM,QAAQ,SAAS,OAAO,mBAAmB;CACzD,MAAM,SAAS,MAAM,qBAAqB;EACxC,OAAO,SAAS,MAAM;EACtB;EACA,SAAS,WAAW;EACpB;EACD,CAAC;AAEF,QAAO,EACL,MAAM;EACJ,aAAaC,iBAAAA,YAAY,KAAK;EAC9B,eAAeC,iBAAAA,QAAQ,MAAM,YAAY;EACzC,iBAAiB,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,OAAO;EACrE,0BAA0BD,iBAAAA,QAAQ,MAAM,uBAAuB;EAC/D,kBAAkBA,iBAAAA,QAAQ,MAAM,eAAe;EAC/C,oBAAoBA,iBAAAA,QAAQ,MAAM,iBAAiB;EACnD,aAAa,SAAS,UAAU,OAAO,aAAa,KAAA;EACpD,gBAAgB,SAAS,UAAU,OAAO,QAAQ,KAAA;EAClD,gBAAgB,SAAS,UAAU,OAAO,QAAQ,KAAA;EAClD,aAAa,SAAS,UAAU,OAAO,SAAS,KAAA;EAChD,kBAAkBA,iBAAAA,QAAQ,MAAM,eAAe;EAChD,EACF;EAEJ;AAED,MAAa,OAAOE,gBAAAA,SAAsB,WAAW;CACnD,MAAM,QAAQC,kBAAAA,SAAS,QAAQ,cAAc,OAAO;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,IACA,SACA,gBACA,UACA,OACA,cACA,MACA,UACA,UACA,MACA,SACA,MACA,SACA,cACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAuB;EACvC,MAAM;EACN,SAAA,oBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,OAAA,GAAA,MAAA,KAAUC,kBAAAA,iBAAiB;CACjC,MAAM,QAAA,GAAA,eAAA,OAAa,GAAG;CACtB,MAAM,EAAE,YAAY,SAASC,4BAAAA,kBAAkB,OAAO;CAEtD,MAAM,CAAC,QAAQ,aAAA,GAAA,eAAA,iBAA4B;EACzC,OAAO;EACP,cAAc;EACd,YAAY;EACZ;EACD,CAAC;CAEF,MAAM,eAAe,MACjB;EACE,SAAS,IAAI,eAAe,MAAgB;EAC5C,WAAW,UAA+C;AACxD,OAAI,SAAS,MAAM;AACnB,cAAW,MAAM,cAAc,QAAQ;;EAEzC,MAAM,IAAI,WAAW,aAAa;EACnC,GACD,EAAE;CAEN,MAAM,WAAW,aAAa,WAAW;AAEzC,QACE,iBAAA,GAAA,kBAAA,MAACC,YAAAA,KAAD;EACQ;EACG;EACT,KAAK;EACA;EACL,GAAI,UAAU,OAAO;EACrB,GAAI;EACJ,GAAI;YAPN,CASE,iBAAA,GAAA,kBAAA,KAAC,SAAD;GACQ;GACN,GAAI,UAAU,QAAQ;GACtB,SAAS;GACT,WAAW,UAAU,SAAS,MAAM,cAAc,QAAQ;GAC1D,IAAI;GACM;GACH;GACP,GAAI;GACJ,GAAI;GACJ,CAAA,EAEF,iBAAA,GAAA,kBAAA,MAACA,YAAAA,KAAD;GACE,WAAU;GACV,SAAS;GACT,KAAK;IAAE,SAAS;IAAU;IAAU;GACpC,GAAI,UAAU,SAAS,EAAE,SAAS,WAAW,UAAU,CAAC;aAJ1D,CAMG,YAAY,SAAS,QAAQ,SAAS,SACrC,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,GAAI,UAAU,cAAc;cAC/B,SAAS,KAAA,IAAY,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,WAAD,EAAW,GAAI,UAAU,YAAY,EAAI,CAAA,GAAG;IAC7D,CAAA,EAET,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAO,UAAgB,CAAA,CACnB;KACF;;EAER;AAEF,KAAK,UAAUC,oBAAAA;AACf,KAAK,eAAe;AACpB,KAAK,cAAc;AACnB,KAAK,QAAQC,kBAAAA"}