@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
92 lines (91 loc) • 4.55 kB
JavaScript
"use client";
const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
const require_ScrollArea = require("../../ScrollArea/ScrollArea.cjs");
const require_Combobox_module = require("../Combobox.module.cjs");
const require_Combobox = require("../Combobox.cjs");
const require_CheckIcon = require("../../Checkbox/CheckIcon.cjs");
const require_is_options_group = require("./is-options-group.cjs");
const require_default_options_filter = require("./default-options-filter.cjs");
const require_is_empty_combobox_data = require("./is-empty-combobox-data.cjs");
const require_validate_options = require("./validate-options.cjs");
let clsx = require("clsx");
clsx = require_runtime.__toESM(clsx);
let react_jsx_runtime = require("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 (!require_is_options_group.isOptionsGroup(data)) {
const checked = isValueChecked(value, data.value);
const check = withCheckIcon && (checked ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CheckIcon.CheckIcon, { className: require_Combobox_module.default.optionsDropdownCheckIcon }) : withAlignedLabels ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: require_Combobox_module.default.optionsDropdownCheckPlaceholder }) : null);
const defaultContent = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
checkIconPosition === "left" && check,
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: data.label }),
checkIconPosition === "right" && check
] });
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.Option, {
value: data.value,
disabled: data.disabled,
className: (0, clsx.default)({ [require_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__ */ (0, react_jsx_runtime.jsx)(Option, {
data: item,
value,
unstyled,
withCheckIcon,
withAlignedLabels,
checkIconPosition,
renderOption
}, `${item.value}`));
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.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 }) {
require_validate_options.validateOptions(data);
const filteredData = typeof search === "string" ? (filter || require_default_options_filter.defaultOptionsFilter)({
options: data,
search: filterOptions ? search : "",
limit: limit ?? Infinity
}) : data;
const isEmpty = require_is_empty_combobox_data.isEmptyComboboxData(filteredData);
const options = filteredData.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Option, {
data: item,
withCheckIcon,
withAlignedLabels,
value,
checkIconPosition,
unstyled,
renderOption
}, require_is_options_group.isOptionsGroup(item) ? item.group : `${item.value}`));
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.Dropdown, {
hidden: hidden || hiddenWhenEmpty && isEmpty,
"data-composed": true,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Combobox.Combobox.Options, {
labelledBy: labelId,
"aria-label": ariaLabel,
children: [withScrollArea ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScrollArea.ScrollArea.Autosize, {
mah: maxDropdownHeight ?? 220,
type: "scroll",
scrollbarSize: "var(--combobox-padding)",
offsetScrollbars: "y",
...scrollAreaProps,
children: options
}) : options, isEmpty && nothingFoundMessage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.Empty, { children: nothingFoundMessage })]
})
});
}
//#endregion
exports.OptionsDropdown = OptionsDropdown;
//# sourceMappingURL=OptionsDropdown.cjs.map