@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
216 lines (215 loc) • 8.35 kB
JavaScript
"use client";
import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
import { useResolvedStylesApi } from "../../core/styles-api/use-resolved-styles-api/use-resolved-styles-api.mjs";
import { genericFactory } from "../../core/factory/factory.mjs";
import { ScrollArea } from "../ScrollArea/ScrollArea.mjs";
import { getParsedComboboxData } from "../Combobox/get-parsed-combobox-data/get-parsed-combobox-data.mjs";
import { getOptionsLockup } from "../Combobox/get-options-lockup/get-options-lockup.mjs";
import Combobox_module_default from "../Combobox/Combobox.module.mjs";
import { useCombobox } from "../Combobox/use-combobox/use-combobox.mjs";
import { Combobox } from "../Combobox/Combobox.mjs";
import { CheckIcon } from "../Checkbox/CheckIcon.mjs";
import { isOptionsGroup } from "../Combobox/OptionsDropdown/is-options-group.mjs";
import { defaultOptionsFilter } from "../Combobox/OptionsDropdown/default-options-filter.mjs";
import { isEmptyComboboxData } from "../Combobox/OptionsDropdown/is-empty-combobox-data.mjs";
import { OptionsDropdown } from "../Combobox/OptionsDropdown/OptionsDropdown.mjs";
import { ComboboxPopoverTarget } from "./ComboboxPopoverTarget.mjs";
import { useMemo } from "react";
import { useUncontrolled } from "@mantine/hooks";
import cx from "clsx";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/ComboboxPopover/ComboboxPopover.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 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
});
}
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$1, { 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
});
}
function SearchableDropdown({ data, filter, search, limit, nothingFoundMessage, withScrollArea = true, maxDropdownHeight, value, checkIconPosition, withCheckIcon = false, withAlignedLabels = false, unstyled, renderOption, scrollAreaProps, onSearchChange }) {
const filteredData = (filter || defaultOptionsFilter)({
options: data,
search,
limit: limit ?? Infinity
});
const isEmpty = isEmptyComboboxData(filteredData);
const options = filteredData.map((item, index) => /* @__PURE__ */ jsx(Option, {
data: item,
withCheckIcon,
withAlignedLabels,
value,
checkIconPosition,
unstyled,
renderOption
}, isOptionsGroup(item) ? `group-${typeof item.group === "string" ? item.group : index}` : `${item.value}`));
return /* @__PURE__ */ jsxs(Combobox.Dropdown, {
"data-composed": true,
children: [/* @__PURE__ */ jsx(Combobox.Search, {
value: search,
onChange: onSearchChange,
placeholder: "Search..."
}), /* @__PURE__ */ jsxs(Combobox.Options, { 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 })] })]
});
}
const defaultProps = {
withCheckIcon: true,
allowDeselect: true,
checkIconPosition: "left",
hiddenInputValuesDivider: ","
};
const ComboboxPopover = genericFactory((_props) => {
const props = useProps("ComboboxPopover", defaultProps, _props);
const { classNames, styles, unstyled, vars, children, multiple, value, defaultValue, onChange, data, dropdownOpened, defaultDropdownOpened, onDropdownOpen, onDropdownClose, onOptionSubmit, comboboxProps, filter, limit, withScrollArea, maxDropdownHeight, selectFirstOptionOnDropdownOpen, withCheckIcon, withAlignedLabels, checkIconPosition, nothingFoundMessage, searchable, searchValue, defaultSearchValue, onSearchChange, allowDeselect, renderOption, scrollAreaProps, hiddenInputProps, name, form, hiddenInputValuesDivider, attributes, ...others } = props;
const parsedData = useMemo(() => getParsedComboboxData(data), [data]);
const optionsLockup = useMemo(() => getOptionsLockup(parsedData), [parsedData]);
const [_value, setValue] = useUncontrolled({
value,
defaultValue,
finalValue: multiple ? [] : null,
onChange
});
const [_searchValue, setSearchValue] = useUncontrolled({
value: searchValue,
defaultValue: defaultSearchValue,
finalValue: "",
onChange: onSearchChange
});
const combobox = useCombobox({
opened: dropdownOpened,
defaultOpened: defaultDropdownOpened,
onDropdownOpen: () => {
onDropdownOpen?.();
if (searchable) combobox.focusSearchInput();
if (selectFirstOptionOnDropdownOpen) combobox.selectFirstOption();
},
onDropdownClose: () => {
onDropdownClose?.();
combobox.resetSelectedOption();
if (searchable) combobox.focusTarget();
}
});
const handleSearchChange = (val) => {
setSearchValue(val);
combobox.resetSelectedOption();
};
const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
props,
styles,
classNames
});
const handleOptionSubmit = (val) => {
onOptionSubmit?.(val);
const option = optionsLockup[val];
if (multiple) {
const currentValue = Array.isArray(_value) ? _value : [];
if (currentValue.includes(option.value)) setValue(currentValue.filter((v) => v !== option.value));
else setValue([...currentValue, option.value]);
combobox.updateSelectedOptionIndex("selected");
} else {
setValue(allowDeselect && `${option.value}` === `${_value}` ? null : option.value);
combobox.closeDropdown();
}
if (searchable) handleSearchChange("");
};
return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Combobox, {
store: combobox,
__staticSelector: "ComboboxPopover",
classNames: resolvedClassNames,
styles: resolvedStyles,
unstyled,
attributes,
onOptionSubmit: handleOptionSubmit,
...comboboxProps,
...others,
children: [children, searchable ? /* @__PURE__ */ jsx(SearchableDropdown, {
data: parsedData,
filter,
search: _searchValue,
limit,
nothingFoundMessage,
withScrollArea,
maxDropdownHeight,
value: _value,
checkIconPosition,
withCheckIcon,
withAlignedLabels,
unstyled,
renderOption,
scrollAreaProps,
onSearchChange: (event) => {
handleSearchChange(event.currentTarget.value);
}
}) : /* @__PURE__ */ jsx(OptionsDropdown, {
data: parsedData,
filter,
search: void 0,
limit,
hiddenWhenEmpty: !nothingFoundMessage,
withScrollArea,
maxDropdownHeight,
filterOptions: false,
value: _value,
checkIconPosition,
withCheckIcon,
withAlignedLabels,
nothingFoundMessage,
unstyled,
renderOption,
scrollAreaProps,
labelId: void 0,
"aria-label": void 0
})]
}), /* @__PURE__ */ jsx(Combobox.HiddenInput, {
name,
value: _value,
form,
valuesDivider: hiddenInputValuesDivider,
...hiddenInputProps
})] });
});
ComboboxPopover.classes = Combobox.classes;
ComboboxPopover.displayName = "@mantine/core/ComboboxPopover";
ComboboxPopover.Target = ComboboxPopoverTarget;
//#endregion
export { ComboboxPopover };
//# sourceMappingURL=ComboboxPopover.mjs.map