@mantine/core/cjs/components/ComboboxPopover/ComboboxPopover.cjs

React components library focused on usability, accessibility and developer experience

"use client";
const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");
const require_use_resolved_styles_api = require("../../core/styles-api/use-resolved-styles-api/use-resolved-styles-api.cjs");
const require_factory = require("../../core/factory/factory.cjs");
const require_ScrollArea = require("../ScrollArea/ScrollArea.cjs");
const require_get_parsed_combobox_data = require("../Combobox/get-parsed-combobox-data/get-parsed-combobox-data.cjs");
const require_get_options_lockup = require("../Combobox/get-options-lockup/get-options-lockup.cjs");
const require_Combobox_module = require("../Combobox/Combobox.module.cjs");
const require_use_combobox = require("../Combobox/use-combobox/use-combobox.cjs");
const require_Combobox = require("../Combobox/Combobox.cjs");
const require_CheckIcon = require("../Checkbox/CheckIcon.cjs");
const require_is_options_group = require("../Combobox/OptionsDropdown/is-options-group.cjs");
const require_default_options_filter = require("../Combobox/OptionsDropdown/default-options-filter.cjs");
const require_is_empty_combobox_data = require("../Combobox/OptionsDropdown/is-empty-combobox-data.cjs");
const require_OptionsDropdown = require("../Combobox/OptionsDropdown/OptionsDropdown.cjs");
const require_ComboboxPopoverTarget = require("./ComboboxPopoverTarget.cjs");
let react = require("react");
let _mantine_hooks = require("@mantine/hooks");
let clsx = require("clsx");
clsx = require_runtime.__toESM(clsx);
let react_jsx_runtime = require("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 (require_is_options_group.isOptionsGroup(data)) {
		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
		});
	}
	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
	});
}
function SearchableDropdown({ data, filter, search, limit, nothingFoundMessage, withScrollArea = true, maxDropdownHeight, value, checkIconPosition, withCheckIcon = false, withAlignedLabels = false, unstyled, renderOption, scrollAreaProps, onSearchChange }) {
	const filteredData = (filter || require_default_options_filter.defaultOptionsFilter)({
		options: data,
		search,
		limit: limit ?? Infinity
	});
	const isEmpty = require_is_empty_combobox_data.isEmptyComboboxData(filteredData);
	const options = filteredData.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Option, {
		data: item,
		withCheckIcon,
		withAlignedLabels,
		value,
		checkIconPosition,
		unstyled,
		renderOption
	}, require_is_options_group.isOptionsGroup(item) ? `group-${typeof item.group === "string" ? item.group : index}` : `${item.value}`));
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Combobox.Combobox.Dropdown, {
		"data-composed": true,
		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.Search, {
			value: search,
			onChange: onSearchChange,
			placeholder: "Search..."
		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Combobox.Combobox.Options, { 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 })] })]
	});
}
const defaultProps = {
	withCheckIcon: true,
	allowDeselect: true,
	checkIconPosition: "left",
	hiddenInputValuesDivider: ","
};
const ComboboxPopover = require_factory.genericFactory((_props) => {
	const props = require_use_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 = (0, react.useMemo)(() => require_get_parsed_combobox_data.getParsedComboboxData(data), [data]);
	const optionsLockup = (0, react.useMemo)(() => require_get_options_lockup.getOptionsLockup(parsedData), [parsedData]);
	const [_value, setValue] = (0, _mantine_hooks.useUncontrolled)({
		value,
		defaultValue,
		finalValue: multiple ? [] : null,
		onChange
	});
	const [_searchValue, setSearchValue] = (0, _mantine_hooks.useUncontrolled)({
		value: searchValue,
		defaultValue: defaultSearchValue,
		finalValue: "",
		onChange: onSearchChange
	});
	const combobox = require_use_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 } = require_use_resolved_styles_api.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Combobox.Combobox, {
		store: combobox,
		__staticSelector: "ComboboxPopover",
		classNames: resolvedClassNames,
		styles: resolvedStyles,
		unstyled,
		attributes,
		onOptionSubmit: handleOptionSubmit,
		...comboboxProps,
		...others,
		children: [children, searchable ? /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(require_OptionsDropdown.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__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.HiddenInput, {
		name,
		value: _value,
		form,
		valuesDivider: hiddenInputValuesDivider,
		...hiddenInputProps
	})] });
});
ComboboxPopover.classes = require_Combobox.Combobox.classes;
ComboboxPopover.displayName = "@mantine/core/ComboboxPopover";
ComboboxPopover.Target = require_ComboboxPopoverTarget.ComboboxPopoverTarget;
//#endregion
exports.ComboboxPopover = ComboboxPopover;

//# sourceMappingURL=ComboboxPopover.cjs.map