@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
90 lines (89 loc) • 3.75 kB
JavaScript
"use client";
import { ScrollArea } from "../../ScrollArea/ScrollArea.mjs";
import Combobox_module_default from "../Combobox.module.mjs";
import { Combobox } from "../Combobox.mjs";
import { CheckIcon } from "../../Checkbox/CheckIcon.mjs";
import { isOptionsGroup } from "./is-options-group.mjs";
import { defaultOptionsFilter } from "./default-options-filter.mjs";
import { isEmptyComboboxData } from "./is-empty-combobox-data.mjs";
import { validateOptions } from "./validate-options.mjs";
import cx from "clsx";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/Combobox/OptionsDropdown/OptionsDropdown.tsx
function isValueChecked(value, optionValue) {
return Array.isArray(value) ? value.includes(optionValue) : value === optionValue;
}
function Option({ data, withCheckIcon, withAlignedLabels, value, checkIconPosition, unstyled, renderOption }) {
if (!isOptionsGroup(data)) {
const checked = isValueChecked(value, data.value);
const check = withCheckIcon && (checked ? /* @__PURE__ */ jsx(CheckIcon, { className: Combobox_module_default.optionsDropdownCheckIcon }) : withAlignedLabels ? /* @__PURE__ */ jsx("div", { className: Combobox_module_default.optionsDropdownCheckPlaceholder }) : null);
const defaultContent = /* @__PURE__ */ jsxs(Fragment, { children: [
checkIconPosition === "left" && check,
/* @__PURE__ */ jsx("span", { children: data.label }),
checkIconPosition === "right" && check
] });
return /* @__PURE__ */ jsx(Combobox.Option, {
value: data.value,
disabled: data.disabled,
className: cx({ [Combobox_module_default.optionsDropdownOption]: !unstyled }),
"data-reverse": checkIconPosition === "right" || void 0,
"data-checked": checked || void 0,
"aria-selected": checked,
active: checked,
children: typeof renderOption === "function" ? renderOption({
option: data,
checked
}) : defaultContent
});
}
const options = data.items.map((item) => /* @__PURE__ */ jsx(Option, {
data: item,
value,
unstyled,
withCheckIcon,
withAlignedLabels,
checkIconPosition,
renderOption
}, `${item.value}`));
return /* @__PURE__ */ jsx(Combobox.Group, {
label: data.group,
children: options
});
}
function OptionsDropdown({ data, hidden, hiddenWhenEmpty, filter, search, limit, maxDropdownHeight, withScrollArea = true, filterOptions = true, withCheckIcon = false, withAlignedLabels = false, value, checkIconPosition, nothingFoundMessage, unstyled, labelId, renderOption, scrollAreaProps, "aria-label": ariaLabel }) {
validateOptions(data);
const filteredData = typeof search === "string" ? (filter || defaultOptionsFilter)({
options: data,
search: filterOptions ? search : "",
limit: limit ?? Infinity
}) : data;
const isEmpty = isEmptyComboboxData(filteredData);
const options = filteredData.map((item) => /* @__PURE__ */ jsx(Option, {
data: item,
withCheckIcon,
withAlignedLabels,
value,
checkIconPosition,
unstyled,
renderOption
}, isOptionsGroup(item) ? item.group : `${item.value}`));
return /* @__PURE__ */ jsx(Combobox.Dropdown, {
hidden: hidden || hiddenWhenEmpty && isEmpty,
"data-composed": true,
children: /* @__PURE__ */ jsxs(Combobox.Options, {
labelledBy: labelId,
"aria-label": ariaLabel,
children: [withScrollArea ? /* @__PURE__ */ jsx(ScrollArea.Autosize, {
mah: maxDropdownHeight ?? 220,
type: "scroll",
scrollbarSize: "var(--combobox-padding)",
offsetScrollbars: "y",
...scrollAreaProps,
children: options
}) : options, isEmpty && nothingFoundMessage && /* @__PURE__ */ jsx(Combobox.Empty, { children: nothingFoundMessage })]
})
});
}
//#endregion
export { OptionsDropdown };
//# sourceMappingURL=OptionsDropdown.mjs.map