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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"OptionsDropdown.cjs","names":["isOptionsGroup","CheckIcon","classes","Combobox","defaultOptionsFilter","isEmptyComboboxData","ScrollArea"],"sources":["../../../../src/components/Combobox/OptionsDropdown/OptionsDropdown.tsx"],"sourcesContent":["import cx from 'clsx';\nimport { Primitive } from '../../../core';\nimport { CheckIcon } from '../../Checkbox';\nimport { ScrollArea, ScrollAreaProps } from '../../ScrollArea/ScrollArea';\nimport { Combobox } from '../Combobox';\nimport { ComboboxItem, ComboboxLikeRenderOptionInput, ComboboxParsedItem } from '../Combobox.types';\nimport { defaultOptionsFilter, FilterOptionsInput } from './default-options-filter';\nimport { isEmptyComboboxData } from './is-empty-combobox-data';\nimport { isOptionsGroup } from './is-options-group';\nimport { validateOptions } from './validate-options';\nimport classes from '../Combobox.module.css';\n\nexport type OptionsFilter<Value extends Primitive = string> = (\n  input: FilterOptionsInput<Value>\n) => ComboboxParsedItem<Value>[];\n\nexport interface OptionsGroup {\n  group: string;\n  items: ComboboxItem<Primitive>[];\n}\n\nexport type OptionsData = (ComboboxItem<Primitive> | OptionsGroup)[];\n\ninterface OptionProps {\n  data: ComboboxItem<Primitive> | OptionsGroup;\n  withCheckIcon?: boolean;\n  withAlignedLabels?: boolean;\n  value?: Primitive | Primitive[] | null;\n  checkIconPosition?: 'left' | 'right';\n  unstyled: boolean | undefined;\n  renderOption?: (input: ComboboxLikeRenderOptionInput<any>) => React.ReactNode;\n}\n\nfunction isValueChecked(value: Primitive | Primitive[] | undefined | null, optionValue: Primitive) {\n  return Array.isArray(value) ? value.includes(optionValue) : value === optionValue;\n}\n\nfunction Option({\n  data,\n  withCheckIcon,\n  withAlignedLabels,\n  value,\n  checkIconPosition,\n  unstyled,\n  renderOption,\n}: OptionProps) {\n  if (!isOptionsGroup(data)) {\n    const checked = isValueChecked(value, data.value);\n    const check =\n      withCheckIcon &&\n      (checked ? (\n        <CheckIcon className={classes.optionsDropdownCheckIcon} />\n      ) : withAlignedLabels ? (\n        <div className={classes.optionsDropdownCheckPlaceholder} />\n      ) : null);\n\n    const defaultContent = (\n      <>\n        {checkIconPosition === 'left' && check}\n        <span>{data.label}</span>\n        {checkIconPosition === 'right' && check}\n      </>\n    );\n\n    return (\n      <Combobox.Option\n        value={data.value}\n        disabled={data.disabled}\n        className={cx({ [classes.optionsDropdownOption]: !unstyled })}\n        data-reverse={checkIconPosition === 'right' || undefined}\n        data-checked={checked || undefined}\n        aria-selected={checked}\n        active={checked}\n      >\n        {typeof renderOption === 'function'\n          ? renderOption({ option: data, checked })\n          : defaultContent}\n      </Combobox.Option>\n    );\n  }\n\n  const options = data.items.map((item) => (\n    <Option\n      data={item}\n      value={value}\n      key={`${item.value}`}\n      unstyled={unstyled}\n      withCheckIcon={withCheckIcon}\n      withAlignedLabels={withAlignedLabels}\n      checkIconPosition={checkIconPosition}\n      renderOption={renderOption}\n    />\n  ));\n\n  return <Combobox.Group label={data.group}>{options}</Combobox.Group>;\n}\n\nexport interface OptionsDropdownProps {\n  data: OptionsData;\n  filter: OptionsFilter<Primitive> | undefined;\n  search: string | undefined;\n  limit: number | undefined;\n  withScrollArea: boolean | undefined;\n  maxDropdownHeight: number | string | undefined;\n  hidden?: boolean;\n  hiddenWhenEmpty?: boolean;\n  filterOptions?: boolean;\n  withCheckIcon?: boolean;\n  withAlignedLabels?: boolean;\n  value?: Primitive | Primitive[] | null;\n  checkIconPosition?: 'left' | 'right';\n  nothingFoundMessage?: React.ReactNode;\n  unstyled: boolean | undefined;\n  labelId: string | undefined;\n  'aria-label': string | undefined;\n  renderOption?: (input: ComboboxLikeRenderOptionInput<any>) => React.ReactNode;\n  scrollAreaProps: ScrollAreaProps | undefined;\n}\n\nexport function OptionsDropdown({\n  data,\n  hidden,\n  hiddenWhenEmpty,\n  filter,\n  search,\n  limit,\n  maxDropdownHeight,\n  withScrollArea = true,\n  filterOptions = true,\n  withCheckIcon = false,\n  withAlignedLabels = false,\n  value,\n  checkIconPosition,\n  nothingFoundMessage,\n  unstyled,\n  labelId,\n  renderOption,\n  scrollAreaProps,\n  'aria-label': ariaLabel,\n}: OptionsDropdownProps) {\n  validateOptions(data);\n\n  const shouldFilter = typeof search === 'string';\n  const filteredData = shouldFilter\n    ? (filter || defaultOptionsFilter)({\n        options: data,\n        search: filterOptions ? search : '',\n        limit: limit ?? Infinity,\n      })\n    : data;\n  const isEmpty = isEmptyComboboxData(filteredData);\n\n  const options = filteredData.map((item) => (\n    <Option\n      data={item}\n      key={isOptionsGroup(item) ? item.group : `${item.value}`}\n      withCheckIcon={withCheckIcon}\n      withAlignedLabels={withAlignedLabels}\n      value={value}\n      checkIconPosition={checkIconPosition}\n      unstyled={unstyled}\n      renderOption={renderOption}\n    />\n  ));\n\n  return (\n    <Combobox.Dropdown hidden={hidden || (hiddenWhenEmpty && isEmpty)} data-composed>\n      <Combobox.Options labelledBy={labelId} aria-label={ariaLabel}>\n        {withScrollArea ? (\n          <ScrollArea.Autosize\n            mah={maxDropdownHeight ?? 220}\n            type=\"scroll\"\n            scrollbarSize=\"var(--combobox-padding)\"\n            offsetScrollbars=\"y\"\n            {...scrollAreaProps}\n          >\n            {options}\n          </ScrollArea.Autosize>\n        ) : (\n          options\n        )}\n        {isEmpty && nothingFoundMessage && <Combobox.Empty>{nothingFoundMessage}</Combobox.Empty>}\n      </Combobox.Options>\n    </Combobox.Dropdown>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAiCA,SAAS,eAAe,OAAmD,aAAwB;AACjG,QAAO,MAAM,QAAQ,MAAM,GAAG,MAAM,SAAS,YAAY,GAAG,UAAU;;AAGxE,SAAS,OAAO,EACd,MACA,eACA,mBACA,OACA,mBACA,UACA,gBACc;AACd,KAAI,CAACA,yBAAAA,eAAe,KAAK,EAAE;EACzB,MAAM,UAAU,eAAe,OAAO,KAAK,MAAM;EACjD,MAAM,QACJ,kBACC,UACC,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,WAAD,EAAW,WAAWC,wBAAAA,QAAQ,0BAA4B,CAAA,GACxD,oBACF,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAWA,wBAAAA,QAAQ,iCAAmC,CAAA,GACzD;EAEN,MAAM,iBACJ,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA;GACG,sBAAsB,UAAU;GACjC,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UAAO,KAAK,OAAa,CAAA;GACxB,sBAAsB,WAAW;GACjC,EAAA,CAAA;AAGL,SACE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,SAAS,QAAV;GACE,OAAO,KAAK;GACZ,UAAU,KAAK;GACf,YAAA,GAAA,KAAA,SAAc,GAAGD,wBAAAA,QAAQ,wBAAwB,CAAC,UAAU,CAAC;GAC7D,gBAAc,sBAAsB,WAAW,KAAA;GAC/C,gBAAc,WAAW,KAAA;GACzB,iBAAe;GACf,QAAQ;aAEP,OAAO,iBAAiB,aACrB,aAAa;IAAE,QAAQ;IAAM;IAAS,CAAC,GACvC;GACY,CAAA;;CAItB,MAAM,UAAU,KAAK,MAAM,KAAK,SAC9B,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,MAAM;EACC;EAEG;EACK;EACI;EACA;EACL;EACd,EANK,GAAG,KAAK,QAMb,CACF;AAEF,QAAO,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,SAAS,OAAV;EAAgB,OAAO,KAAK;YAAQ;EAAyB,CAAA;;AAyBtE,SAAgB,gBAAgB,EAC9B,MACA,QACA,iBACA,QACA,QACA,OACA,mBACA,iBAAiB,MACjB,gBAAgB,MAChB,gBAAgB,OAChB,oBAAoB,OACpB,OACA,mBACA,qBACA,UACA,SACA,cACA,iBACA,cAAc,aACS;AACvB,0BAAA,gBAAgB,KAAK;CAGrB,MAAM,eADe,OAAO,WAAW,YAElC,UAAUC,+BAAAA,sBAAsB;EAC/B,SAAS;EACT,QAAQ,gBAAgB,SAAS;EACjC,OAAO,SAAS;EACjB,CAAC,GACF;CACJ,MAAM,UAAUC,+BAAAA,oBAAoB,aAAa;CAEjD,MAAM,UAAU,aAAa,KAAK,SAChC,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,MAAM;EAES;EACI;EACZ;EACY;EACT;EACI;EACd,EAPKL,yBAAAA,eAAe,KAAK,GAAG,KAAK,QAAQ,GAAG,KAAK,QAOjD,CACF;AAEF,QACE,iBAAA,GAAA,kBAAA,KAACG,iBAAAA,SAAS,UAAV;EAAmB,QAAQ,UAAW,mBAAmB;EAAU,iBAAA;YACjE,iBAAA,GAAA,kBAAA,MAACA,iBAAAA,SAAS,SAAV;GAAkB,YAAY;GAAS,cAAY;aAAnD,CACG,iBACC,iBAAA,GAAA,kBAAA,KAACG,mBAAAA,WAAW,UAAZ;IACE,KAAK,qBAAqB;IAC1B,MAAK;IACL,eAAc;IACd,kBAAiB;IACjB,GAAI;cAEH;IACmB,CAAA,GAEtB,SAED,WAAW,uBAAuB,iBAAA,GAAA,kBAAA,KAACH,iBAAAA,SAAS,OAAV,EAAA,UAAiB,qBAAqC,CAAA,CACxE;;EACD,CAAA"}