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

React components library focused on usability, accessibility and developer experience

'use client';
'use strict';

var React = require('react');
var cx = require('clsx');
require('../../Checkbox/Checkbox.cjs');
require('../../Checkbox/CheckboxGroup/CheckboxGroup.cjs');
var CheckIcon = require('../../Checkbox/CheckIcon.cjs');
var ScrollArea = require('../../ScrollArea/ScrollArea.cjs');
var Combobox = require('../Combobox.cjs');
var defaultOptionsFilter = require('./default-options-filter.cjs');
var isEmptyComboboxData = require('./is-empty-combobox-data.cjs');
var isOptionsGroup = require('./is-options-group.cjs');
var validateOptions = require('./validate-options.cjs');
var Combobox_module = require('../Combobox.module.css.cjs');

function isValueChecked(value, optionValue) {
  return Array.isArray(value) ? value.includes(optionValue) : value === optionValue;
}
function Option({ data, withCheckIcon, value, checkIconPosition, unstyled }) {
  if (!isOptionsGroup.isOptionsGroup(data)) {
    const check = withCheckIcon && isValueChecked(value, data.value) && /* @__PURE__ */ React.createElement(CheckIcon.CheckIcon, { className: Combobox_module.optionsDropdownCheckIcon });
    return /* @__PURE__ */ React.createElement(
      Combobox.Combobox.Option,
      {
        value: data.value,
        disabled: data.disabled,
        className: cx({ [Combobox_module.optionsDropdownOption]: !unstyled }),
        "data-reverse": checkIconPosition === "right" || void 0,
        "data-checked": isValueChecked(value, data.value) || void 0,
        "aria-selected": isValueChecked(value, data.value)
      },
      checkIconPosition === "left" && check,
      /* @__PURE__ */ React.createElement("span", null, data.label),
      checkIconPosition === "right" && check
    );
  }
  const options = data.items.map((item) => /* @__PURE__ */ React.createElement(
    Option,
    {
      data: item,
      value,
      key: item.value,
      unstyled,
      withCheckIcon,
      checkIconPosition
    }
  ));
  return /* @__PURE__ */ React.createElement(Combobox.Combobox.Group, { label: data.group }, options);
}
function OptionsDropdown({
  data,
  hidden,
  hiddenWhenEmpty,
  filter,
  search,
  limit,
  maxDropdownHeight,
  withScrollArea = true,
  filterOptions = true,
  withCheckIcon = false,
  value,
  checkIconPosition,
  nothingFoundMessage,
  unstyled,
  labelId
}) {
  validateOptions.validateOptions(data);
  const shouldFilter = typeof search === "string";
  const filteredData = shouldFilter ? (filter || defaultOptionsFilter.defaultOptionsFilter)({
    options: data,
    search: filterOptions ? search : "",
    limit: limit ?? Infinity
  }) : data;
  const isEmpty = isEmptyComboboxData.isEmptyComboboxData(filteredData);
  const options = filteredData.map((item) => /* @__PURE__ */ React.createElement(
    Option,
    {
      data: item,
      key: isOptionsGroup.isOptionsGroup(item) ? item.group : item.value,
      withCheckIcon,
      value,
      checkIconPosition,
      unstyled
    }
  ));
  return /* @__PURE__ */ React.createElement(Combobox.Combobox.Dropdown, { hidden: hidden || hiddenWhenEmpty && isEmpty }, /* @__PURE__ */ React.createElement(Combobox.Combobox.Options, { labelledBy: labelId }, withScrollArea ? /* @__PURE__ */ React.createElement(
    ScrollArea.ScrollArea.Autosize,
    {
      mah: maxDropdownHeight ?? 220,
      type: "scroll",
      scrollbarSize: "var(--_combobox-padding)",
      offsetScrollbars: "y",
      className: Combobox_module.optionsDropdownScrollArea
    },
    options
  ) : options, isEmpty && nothingFoundMessage && /* @__PURE__ */ React.createElement(Combobox.Combobox.Empty, null, nothingFoundMessage)));
}

exports.OptionsDropdown = OptionsDropdown;
//# sourceMappingURL=OptionsDropdown.cjs.map