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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Combobox.cjs","names":["createVarsResolver","getFontSize","getSize","rem","useProps","useCombobox","useStyles","ComboboxProvider","Popover","classes","ComboboxTarget","ComboboxDropdown","ComboboxOptions","ComboboxOption","ComboboxSearch","ComboboxEmpty","ComboboxChevron","ComboboxFooter","ComboboxHeader","ComboboxEventsTarget","ComboboxDropdownTarget","ComboboxGroup","ComboboxClearButton","ComboboxHiddenInput"],"sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import {\n  createVarsResolver,\n  ExtendComponent,\n  Factory,\n  getFontSize,\n  getSize,\n  MantineSize,\n  MantineThemeComponent,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { __PopoverProps, Popover } from '../Popover';\nimport { ComboboxProvider } from './Combobox.context';\nimport { ComboboxChevron, ComboboxChevronProps } from './ComboboxChevron/ComboboxChevron';\nimport {\n  ComboboxClearButton,\n  ComboboxClearButtonProps,\n} from './ComboboxClearButton/ComboboxClearButton';\nimport { ComboboxDropdown, ComboboxDropdownProps } from './ComboboxDropdown/ComboboxDropdown';\nimport {\n  ComboboxDropdownTarget,\n  ComboboxDropdownTargetProps,\n} from './ComboboxDropdownTarget/ComboboxDropdownTarget';\nimport { ComboboxEmpty, ComboboxEmptyProps } from './ComboboxEmpty/ComboboxEmpty';\nimport {\n  ComboboxEventsTarget,\n  ComboboxEventsTargetProps,\n} from './ComboboxEventsTarget/ComboboxEventsTarget';\nimport { ComboboxFooter, ComboboxFooterProps } from './ComboboxFooter/ComboboxFooter';\nimport { ComboboxGroup, ComboboxGroupProps } from './ComboboxGroup/ComboboxGroup';\nimport { ComboboxHeader, ComboboxHeaderProps } from './ComboboxHeader/ComboboxHeader';\nimport {\n  ComboboxHiddenInput,\n  ComboboxHiddenInputProps,\n} from './ComboboxHiddenInput/ComboboxHiddenInput';\nimport { ComboboxOption, ComboboxOptionProps } from './ComboboxOption/ComboboxOption';\nimport { ComboboxOptions, ComboboxOptionsProps } from './ComboboxOptions/ComboboxOptions';\nimport { ComboboxSearch, ComboboxSearchProps } from './ComboboxSearch/ComboboxSearch';\nimport { ComboboxTarget, ComboboxTargetProps } from './ComboboxTarget/ComboboxTarget';\nimport { ComboboxStore, useCombobox } from './use-combobox/use-combobox';\nimport classes from './Combobox.module.css';\n\nexport type ComboboxStylesNames =\n  | 'options'\n  | 'dropdown'\n  | 'option'\n  | 'search'\n  | 'empty'\n  | 'footer'\n  | 'header'\n  | 'group'\n  | 'groupLabel';\n\nexport type ComboboxCSSVariables = {\n  options: '--combobox-option-fz' | '--combobox-option-padding';\n  dropdown: '--combobox-padding' | '--combobox-option-fz' | '--combobox-option-padding';\n};\n\nexport interface ComboboxProps extends __PopoverProps, StylesApiProps<ComboboxFactory> {\n  __staticSelector?: string;\n\n  /** Combobox content */\n  children?: React.ReactNode;\n\n  /** Combobox store, can be used to control combobox state */\n  store?: ComboboxStore;\n\n  /** Called when item is selected with the `Enter` key or by clicking it */\n  onOptionSubmit?: (value: string, optionProps: ComboboxOptionProps) => void;\n\n  /** Controls items `font-size` and `padding` @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** Controls `padding` of the dropdown @default 4 */\n  dropdownPadding?: React.CSSProperties['padding'];\n\n  /** Determines whether selection should be reset when option is hovered @default false */\n  resetSelectionOnOptionHover?: boolean;\n\n  /** Determines whether the `Combobox` value can be changed */\n  readOnly?: boolean;\n}\n\nexport type ComboboxFactory = Factory<{\n  props: ComboboxProps;\n  ref: HTMLDivElement;\n  stylesNames: ComboboxStylesNames;\n  vars: ComboboxCSSVariables;\n  staticComponents: {\n    Target: typeof ComboboxTarget;\n    Dropdown: typeof ComboboxDropdown;\n    Options: typeof ComboboxOptions;\n    Option: typeof ComboboxOption;\n    Search: typeof ComboboxSearch;\n    Empty: typeof ComboboxEmpty;\n    Chevron: typeof ComboboxChevron;\n    Footer: typeof ComboboxFooter;\n    Header: typeof ComboboxHeader;\n    EventsTarget: typeof ComboboxEventsTarget;\n    DropdownTarget: typeof ComboboxDropdownTarget;\n    Group: typeof ComboboxGroup;\n    ClearButton: typeof ComboboxClearButton;\n    HiddenInput: typeof ComboboxHiddenInput;\n  };\n}>;\n\nconst defaultProps = {\n  keepMounted: true,\n  withinPortal: true,\n  resetSelectionOnOptionHover: false,\n  width: 'target',\n  transitionProps: { transition: 'fade', duration: 0 },\n  size: 'sm',\n} satisfies Partial<ComboboxProps>;\n\nconst varsResolver = createVarsResolver<ComboboxFactory>((_, { size, dropdownPadding }) => ({\n  options: {\n    '--combobox-option-fz': getFontSize(size),\n    '--combobox-option-padding': getSize(size, 'combobox-option-padding'),\n  },\n\n  dropdown: {\n    '--combobox-padding': dropdownPadding === undefined ? undefined : rem(dropdownPadding),\n    '--combobox-option-fz': getFontSize(size),\n    '--combobox-option-padding': getSize(size, 'combobox-option-padding'),\n  },\n}));\n\nexport const Combobox = (_props: ComboboxProps) => {\n  const props = useProps('Combobox', defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    children,\n    store: controlledStore,\n    vars,\n    onOptionSubmit,\n    onClose,\n    size,\n    dropdownPadding,\n    resetSelectionOnOptionHover,\n    __staticSelector,\n    readOnly,\n    attributes,\n    ...others\n  } = props;\n\n  const uncontrolledStore = useCombobox();\n  const store = controlledStore || uncontrolledStore;\n\n  const getStyles = useStyles<ComboboxFactory>({\n    name: __staticSelector || 'Combobox',\n    classes,\n    props,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const onDropdownClose = () => {\n    onClose?.();\n    store.closeDropdown();\n  };\n\n  return (\n    <ComboboxProvider\n      value={{\n        getStyles,\n        store,\n        onOptionSubmit,\n        size,\n        resetSelectionOnOptionHover,\n        readOnly,\n      }}\n    >\n      <Popover\n        opened={store.dropdownOpened}\n        preventPositionChangeWhenVisible={false}\n        {...others}\n        onChange={(_opened) => !_opened && onDropdownClose()}\n        withRoles={false}\n        unstyled={unstyled}\n      >\n        {children}\n      </Popover>\n    </ComboboxProvider>\n  );\n};\n\nconst extendCombobox = (c: ExtendComponent<ComboboxFactory>): MantineThemeComponent => c;\n\nCombobox.extend = extendCombobox;\nCombobox.classes = classes;\nCombobox.varsResolver = varsResolver;\nCombobox.displayName = '@mantine/core/Combobox';\nCombobox.Target = ComboboxTarget;\nCombobox.Dropdown = ComboboxDropdown;\nCombobox.Options = ComboboxOptions;\nCombobox.Option = ComboboxOption;\nCombobox.Search = ComboboxSearch;\nCombobox.Empty = ComboboxEmpty;\nCombobox.Chevron = ComboboxChevron;\nCombobox.Footer = ComboboxFooter;\nCombobox.Header = ComboboxHeader;\nCombobox.EventsTarget = ComboboxEventsTarget;\nCombobox.DropdownTarget = ComboboxDropdownTarget;\nCombobox.Group = ComboboxGroup;\nCombobox.ClearButton = ComboboxClearButton;\nCombobox.HiddenInput = ComboboxHiddenInput;\n\nexport namespace Combobox {\n  export type Props = ComboboxProps;\n  export type StylesNames = ComboboxStylesNames;\n  export type Factory = ComboboxFactory;\n\n  export namespace Dropdown {\n    export type Props = ComboboxDropdownProps;\n  }\n\n  export namespace Options {\n    export type Props = ComboboxOptionsProps;\n  }\n\n  export namespace Option {\n    export type Props = ComboboxOptionProps;\n  }\n\n  export namespace Target {\n    export type Props = ComboboxTargetProps;\n  }\n\n  export namespace Chevron {\n    export type Props = ComboboxChevronProps;\n  }\n\n  export namespace Empty {\n    export type Props = ComboboxEmptyProps;\n  }\n\n  export namespace Search {\n    export type Props = ComboboxSearchProps;\n  }\n\n  export namespace Footer {\n    export type Props = ComboboxFooterProps;\n  }\n\n  export namespace Header {\n    export type Props = ComboboxHeaderProps;\n  }\n\n  export namespace DropdownTarget {\n    export type Props = ComboboxDropdownTargetProps;\n  }\n\n  export namespace EventsTarget {\n    export type Props = ComboboxEventsTargetProps;\n  }\n\n  export namespace Group {\n    export type Props = ComboboxGroupProps;\n  }\n\n  export namespace ClearButton {\n    export type Props = ComboboxClearButtonProps;\n  }\n\n  export namespace HiddenInput {\n    export type Props = ComboboxHiddenInputProps;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA4GA,MAAM,eAAe;CACnB,aAAa;CACb,cAAc;CACd,6BAA6B;CAC7B,OAAO;CACP,iBAAiB;EAAE,YAAY;EAAQ,UAAU;EAAG;CACpD,MAAM;CACP;AAED,MAAM,eAAeA,6BAAAA,oBAAqC,GAAG,EAAE,MAAM,uBAAuB;CAC1F,SAAS;EACP,wBAAwBC,iBAAAA,YAAY,KAAK;EACzC,6BAA6BC,iBAAAA,QAAQ,MAAM,0BAA0B;EACtE;CAED,UAAU;EACR,sBAAsB,oBAAoB,KAAA,IAAY,KAAA,IAAYC,YAAAA,IAAI,gBAAgB;EACtF,wBAAwBF,iBAAAA,YAAY,KAAK;EACzC,6BAA6BC,iBAAAA,QAAQ,MAAM,0BAA0B;EACtE;CACF,EAAE;AAEH,MAAa,YAAY,WAA0B;CACjD,MAAM,QAAQE,kBAAAA,SAAS,YAAY,cAAc,OAAO;CACxD,MAAM,EACJ,YACA,QACA,UACA,UACA,OAAO,iBACP,MACA,gBACA,SACA,MACA,iBACA,6BACA,kBACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,oBAAoBC,qBAAAA,aAAa;CACvC,MAAM,QAAQ,mBAAmB;CAEjC,MAAM,YAAYC,mBAAAA,UAA2B;EAC3C,MAAM,oBAAoB;EAC1B,SAAA,wBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,wBAAwB;AAC5B,aAAW;AACX,QAAM,eAAe;;AAGvB,QACE,iBAAA,GAAA,kBAAA,KAACC,yBAAAA,kBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACD;YAED,iBAAA,GAAA,kBAAA,KAACC,gBAAAA,SAAD;GACE,QAAQ,MAAM;GACd,kCAAkC;GAClC,GAAI;GACJ,WAAW,YAAY,CAAC,WAAW,iBAAiB;GACpD,WAAW;GACD;GAET;GACO,CAAA;EACO,CAAA;;AAIvB,MAAM,kBAAkB,MAA+D;AAEvF,SAAS,SAAS;AAClB,SAAS,UAAUC,wBAAAA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,SAASC,uBAAAA;AAClB,SAAS,WAAWC,yBAAAA;AACpB,SAAS,UAAUC,wBAAAA;AACnB,SAAS,SAASC,uBAAAA;AAClB,SAAS,SAASC,uBAAAA;AAClB,SAAS,QAAQC,sBAAAA;AACjB,SAAS,UAAUC,wBAAAA;AACnB,SAAS,SAASC,uBAAAA;AAClB,SAAS,SAASC,uBAAAA;AAClB,SAAS,eAAeC,6BAAAA;AACxB,SAAS,iBAAiBC,+BAAAA;AAC1B,SAAS,QAAQC,sBAAAA;AACjB,SAAS,cAAcC,4BAAAA;AACvB,SAAS,cAAcC,4BAAAA"}