@mantine/core/cjs/components/Pill/Pill.cjs.map

React components library focused on usability, accessibility and developer experience

{"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 {\n  PillGroup,\n  PillGroupContext,\n  type PillGroupProps,\n  type PillGroupStylesNames,\n  type PillGroupCssVariables,\n  type PillGroupFactory,\n} from './PillGroup/PillGroup';\nimport classes from './Pill.module.css';\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\nexport namespace Pill {\n  export type Props = PillProps;\n  export type StylesNames = PillStylesNames;\n  export type CssVariables = PillCssVariables;\n  export type Factory = PillFactory;\n  export type Variant = PillVariant;\n\n  export namespace Group {\n    export type Props = PillGroupProps;\n    export type StylesNames = PillGroupStylesNames;\n    export type CssVariables = PillGroupCssVariables;\n    export type Factory = PillGroupFactory;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAiEA,MAAM,eAAe,EACnB,SAAS,UACX;AAEA,MAAM,eAAeA,6BAAAA,oBAAiC,GAAG,EAAE,UAAU,EAAE,YAAY,EACjF,MAAM;CACJ,aAAaC,iBAAAA,QAAQ,MAAM,SAAS;CACpC,iBAAiBA,iBAAAA,QAAQ,MAAM,aAAa;CAC5C,iBAAiB,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,MAAM;AACtE,EACF,EAAE;AAEF,MAAa,OAAOC,gBAAAA,SAAsB,WAAW;CACnD,MAAM,QAAQC,kBAAAA,SAAS,QAAQ,cAAc,MAAM;CACnD,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,gBAAgB;CAChC,MAAM,iBAAA,GAAA,MAAA,KAAoBC,2BAAAA,iBAAiB;CAC3C,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,MAAM;CAC3B,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,MAACC,YAAAA,KAAD;EACE,WAAU;EACV,SAAS;EACT,MAAM;EACN,GAAI,UAAU,QAAQ,EAAE,SAAS,SAAS,CAAC;EAC3C,KAAK,CACH;GAAE,eAAe,oBAAoB,CAAC;GAAU,UAAU,YAAY,KAAK;EAAS,GACpF,GACF;EACA,GAAI;YATN,CAWE,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,GAAI,UAAU,OAAO;GAAI;EAAe,CAAA,GAC7C,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;GAC5B,CAAC;GACD,cAAc,UAAU;IACtB,MAAM,eAAe;IACrB,MAAM,gBAAgB;IACtB,mBAAmB,cAAc,KAAK;GACxC;GACA,UAAU,UAAU;IAClB,MAAM,gBAAgB;IACtB,WAAW;IACX,mBAAmB,UAAU,KAAK;GACpC;EACD,CAAA,CAEA;;AAET,CAAC;AAED,KAAK,UAAUC,oBAAAA;AACf,KAAK,eAAe;AACpB,KAAK,cAAc;AACnB,KAAK,QAAQC,kBAAAA"}