@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
1 lines • 5.95 kB
Source Map (JSON)
{"version":3,"file":"Pill.cjs","names":["createVarsResolver","getSize","getRadius","factory","useProps","PillGroupContext","PillsInputContext","useStyles","Box","CloseButton","classes","PillGroup"],"sources":["../../../src/components/Pill/Pill.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getRadius,\n getSize,\n MantineRadius,\n MantineSize,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { CloseButton, CloseButtonProps } from '../CloseButton';\nimport { PillsInputContext } from '../PillsInput/PillsInput.context';\nimport { PillGroup, PillGroupContext } from './PillGroup/PillGroup';\nimport classes from './Pill.module.css';\n\nexport type PillStylesNames = 'root' | 'label' | 'remove';\nexport type PillVariant = 'default' | 'contrast';\nexport type PillCssVariables = {\n root: '--pill-fz' | '--pill-radius' | '--pill-height';\n};\n\nexport interface PillProps extends BoxProps, StylesApiProps<PillFactory>, ElementProps<'div'> {\n /** Controls pill `font-size` and `padding` @default 'sm' */\n size?: MantineSize;\n\n /** Controls visibility of the remove button @default false */\n withRemoveButton?: boolean;\n\n /** Called when the remove button is clicked */\n onRemove?: () => void;\n\n /** Props passed down to the remove button */\n removeButtonProps?: CloseButtonProps & React.ComponentProps<'button'>;\n\n /** Key of `theme.radius` or any valid CSS value to set border-radius. Numbers are converted to rem. @default 'xl' */\n radius?: MantineRadius;\n\n /** Adds disabled attribute, applies disabled styles */\n disabled?: boolean;\n}\n\nexport type PillFactory = Factory<{\n props: PillProps;\n ref: HTMLDivElement;\n stylesNames: PillStylesNames;\n vars: PillCssVariables;\n variant: PillVariant;\n ctx: { size: MantineSize | (string & {}) | undefined };\n staticComponents: {\n Group: typeof PillGroup;\n };\n}>;\n\nconst defaultProps = {\n variant: 'default',\n} satisfies Partial<PillProps>;\n\nconst varsResolver = createVarsResolver<PillFactory>((_, { radius }, { size }) => ({\n root: {\n '--pill-fz': getSize(size, 'pill-fz'),\n '--pill-height': getSize(size, 'pill-height'),\n '--pill-radius': radius === undefined ? undefined : getRadius(radius),\n },\n}));\n\nexport const Pill = factory<PillFactory>((_props) => {\n const props = useProps('Pill', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n variant,\n children,\n withRemoveButton,\n onRemove,\n removeButtonProps,\n radius,\n size,\n disabled,\n mod,\n attributes,\n ...others\n } = props;\n\n const ctx = use(PillGroupContext);\n const pillsInputCtx = use(PillsInputContext);\n const _size = size || ctx?.size || undefined;\n const _variant = pillsInputCtx?.variant === 'filled' ? 'contrast' : variant || 'default';\n\n const getStyles = useStyles<PillFactory>({\n name: 'Pill',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n stylesCtx: { size: _size },\n });\n\n return (\n <Box\n component=\"span\"\n variant={_variant}\n size={_size}\n {...getStyles('root', { variant: _variant })}\n mod={[\n { 'with-remove': withRemoveButton && !disabled, disabled: disabled || ctx?.disabled },\n mod,\n ]}\n {...others}\n >\n <span {...getStyles('label')}>{children}</span>\n {withRemoveButton && (\n <CloseButton\n variant=\"transparent\"\n radius={radius}\n tabIndex={-1}\n aria-hidden\n unstyled={unstyled}\n {...removeButtonProps}\n {...getStyles('remove', {\n className: removeButtonProps?.className,\n style: removeButtonProps?.style,\n })}\n onMouseDown={(event) => {\n event.preventDefault();\n event.stopPropagation();\n removeButtonProps?.onMouseDown?.(event);\n }}\n onClick={(event) => {\n event.stopPropagation();\n onRemove?.();\n removeButtonProps?.onClick?.(event);\n }}\n />\n )}\n </Box>\n );\n});\n\nPill.classes = classes;\nPill.varsResolver = varsResolver;\nPill.displayName = '@mantine/core/Pill';\nPill.Group = PillGroup;\n"],"mappings":";;;;;;;;;;;;;;;AA2DA,MAAM,eAAe,EACnB,SAAS,WACV;AAED,MAAM,eAAeA,6BAAAA,oBAAiC,GAAG,EAAE,UAAU,EAAE,YAAY,EACjF,MAAM;CACJ,aAAaC,iBAAAA,QAAQ,MAAM,UAAU;CACrC,iBAAiBA,iBAAAA,QAAQ,MAAM,cAAc;CAC7C,iBAAiB,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,OAAO;CACtE,EACF,EAAE;AAEH,MAAa,OAAOC,gBAAAA,SAAsB,WAAW;CACnD,MAAM,QAAQC,kBAAAA,SAAS,QAAQ,cAAc,OAAO;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,SACA,UACA,kBACA,UACA,mBACA,QACA,MACA,UACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,OAAA,GAAA,MAAA,KAAUC,kBAAAA,iBAAiB;CACjC,MAAM,iBAAA,GAAA,MAAA,KAAoBC,2BAAAA,kBAAkB;CAC5C,MAAM,QAAQ,QAAQ,KAAK,QAAQ,KAAA;CACnC,MAAM,WAAW,eAAe,YAAY,WAAW,aAAa,WAAW;CAE/E,MAAM,YAAYC,mBAAAA,UAAuB;EACvC,MAAM;EACN,SAAA,oBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,WAAW,EAAE,MAAM,OAAO;EAC3B,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,MAACC,YAAAA,KAAD;EACE,WAAU;EACV,SAAS;EACT,MAAM;EACN,GAAI,UAAU,QAAQ,EAAE,SAAS,UAAU,CAAC;EAC5C,KAAK,CACH;GAAE,eAAe,oBAAoB,CAAC;GAAU,UAAU,YAAY,KAAK;GAAU,EACrF,IACD;EACD,GAAI;YATN,CAWE,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,GAAI,UAAU,QAAQ;GAAG;GAAgB,CAAA,EAC9C,oBACC,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD;GACE,SAAQ;GACA;GACR,UAAU;GACV,eAAA;GACU;GACV,GAAI;GACJ,GAAI,UAAU,UAAU;IACtB,WAAW,mBAAmB;IAC9B,OAAO,mBAAmB;IAC3B,CAAC;GACF,cAAc,UAAU;AACtB,UAAM,gBAAgB;AACtB,UAAM,iBAAiB;AACvB,uBAAmB,cAAc,MAAM;;GAEzC,UAAU,UAAU;AAClB,UAAM,iBAAiB;AACvB,gBAAY;AACZ,uBAAmB,UAAU,MAAM;;GAErC,CAAA,CAEA;;EAER;AAEF,KAAK,UAAUC,oBAAAA;AACf,KAAK,eAAe;AACpB,KAAK,cAAc;AACnB,KAAK,QAAQC,kBAAAA"}