@mantine/core/cjs/components/MultiSelect/MultiSelect.cjs

React components library focused on usability, accessibility and developer experience

"use client";
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_use_styles = require("../../core/styles-api/use-styles/use-styles.cjs");
const require_extract_style_props = require("../../core/Box/style-props/extract-style-props/extract-style-props.cjs");
const require_factory = require("../../core/factory/factory.cjs");
const require_InputBase = require("../InputBase/InputBase.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_use_combobox = require("../Combobox/use-combobox/use-combobox.cjs");
const require_Combobox = require("../Combobox/Combobox.cjs");
const require_OptionsDropdown = require("../Combobox/OptionsDropdown/OptionsDropdown.cjs");
const require_Pill = require("../Pill/Pill.cjs");
const require_PillsInput = require("../PillsInput/PillsInput.cjs");
const require_filter_picked_values = require("./filter-picked-values.cjs");
let react = require("react");
let _mantine_hooks = require("@mantine/hooks");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/components/MultiSelect/MultiSelect.tsx
const clearSectionOffset = {
	xs: 41,
	sm: 50,
	md: 60,
	lg: 72,
	xl: 89
};
const defaultProps = {
	maxValues: Infinity,
	withCheckIcon: true,
	checkIconPosition: "left",
	hiddenInputValuesDivider: ",",
	clearSearchOnChange: true,
	openOnFocus: true,
	size: "sm"
};
const MultiSelect = require_factory.genericFactory((_props) => {
	const props = require_use_props.useProps("MultiSelect", defaultProps, _props);
	const { classNames, className, style, styles, unstyled, vars, size, value, defaultValue, onChange, onKeyDown, variant, data, dropdownOpened, defaultDropdownOpened, onDropdownOpen, onDropdownClose, selectFirstOptionOnChange, selectFirstOptionOnDropdownOpen, onOptionSubmit, comboboxProps, filter, limit, withScrollArea, maxDropdownHeight, searchValue, defaultSearchValue, onSearchChange, readOnly, disabled, onFocus, onBlur, radius, rightSection, rightSectionWidth, rightSectionPointerEvents, rightSectionProps, leftSection, leftSectionWidth, leftSectionPointerEvents, leftSectionProps, inputContainer, inputWrapperOrder, withAsterisk, labelProps, descriptionProps, errorProps, wrapperProps, description, label, error, maxValues, searchable, nothingFoundMessage, withCheckIcon, withAlignedLabels, checkIconPosition, hidePickedOptions, withErrorStyles, name, form, id, clearable, clearSectionMode, clearButtonProps, hiddenInputProps, placeholder, hiddenInputValuesDivider, required, mod, renderOption, renderPill, onRemove, onClear, onMaxValues, scrollAreaProps, chevronColor, attributes, clearSearchOnChange, openOnFocus, ...others } = props;
	const _id = (0, _mantine_hooks.useId)(id);
	const parsedData = require_get_parsed_combobox_data.getParsedComboboxData(data);
	const optionsLockup = require_get_options_lockup.getOptionsLockup(parsedData);
	const retainedSelectedOptions = (0, react.useRef)({});
	const combobox = require_use_combobox.useCombobox({
		opened: dropdownOpened,
		defaultOpened: defaultDropdownOpened,
		onDropdownOpen: () => {
			onDropdownOpen?.();
			if (selectFirstOptionOnDropdownOpen) combobox.selectFirstOption();
		},
		onDropdownClose: () => {
			onDropdownClose?.();
			combobox.resetSelectedOption();
		}
	});
	const { styleProps, rest: { type, autoComplete, ...rest } } = require_extract_style_props.extractStyleProps(others);
	const [_value, setValue] = (0, _mantine_hooks.useUncontrolled)({
		value,
		defaultValue,
		finalValue: [],
		onChange
	});
	const [_searchValue, setSearchValue] = (0, _mantine_hooks.useUncontrolled)({
		value: searchValue,
		defaultValue: defaultSearchValue,
		finalValue: "",
		onChange: onSearchChange
	});
	const handleSearchChange = (value) => {
		setSearchValue(value);
		combobox.resetSelectedOption();
	};
	const getStyles = require_use_styles.useStyles({
		name: "MultiSelect",
		classes: {},
		props,
		classNames,
		styles,
		unstyled,
		attributes
	});
	const { resolvedClassNames, resolvedStyles } = require_use_resolved_styles_api.useResolvedStylesApi({
		props,
		styles,
		classNames
	});
	const handleInputKeydown = (event) => {
		onKeyDown?.(event);
		if (event.key === " " && !searchable) {
			event.preventDefault();
			combobox.toggleDropdown();
		}
		if (event.key === "Backspace" && _searchValue.length === 0 && _value.length > 0) {
			onRemove?.(_value[_value.length - 1]);
			setValue(_value.slice(0, _value.length - 1));
		}
	};
	const values = _value.map((item, index) => {
		const optionData = optionsLockup[`${item}`] || retainedSelectedOptions.current[`${item}`];
		if (renderPill) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: renderPill({
			option: optionData,
			value: item,
			onRemove: () => {
				setValue(_value.filter((i) => item !== i));
				onRemove?.(item);
			},
			disabled
		}) }, `${item}-${index}`);
		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Pill.Pill, {
			withRemoveButton: !readOnly && !optionsLockup[`${item}`]?.disabled,
			onRemove: () => {
				setValue(_value.filter((i) => item !== i));
				onRemove?.(item);
			},
			unstyled,
			disabled,
			...getStyles("pill"),
			children: optionData?.label || item
		}, `${item}-${index}`);
	});
	(0, react.useEffect)(() => {
		if (selectFirstOptionOnChange) combobox.selectFirstOption();
	}, [selectFirstOptionOnChange, _searchValue]);
	(0, react.useEffect)(() => {
		_value.forEach((val) => {
			if (`${val}` in optionsLockup) retainedSelectedOptions.current[`${val}`] = optionsLockup[`${val}`];
		});
	}, [optionsLockup, _value]);
	const clearButton = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.ClearButton, {
		...clearButtonProps,
		onClear: () => {
			onClear?.();
			setValue([]);
			handleSearchChange("");
		}
	});
	const filteredData = require_filter_picked_values.filterPickedValues({
		data: parsedData,
		value: _value
	});
	const _clearable = clearable && _value.length > 0 && !disabled && !readOnly;
	const pillsListStyle = _clearable ? { paddingInlineEnd: clearSectionOffset[size] ?? clearSectionOffset.sm } : void 0;
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Combobox.Combobox, {
		store: combobox,
		classNames: resolvedClassNames,
		styles: resolvedStyles,
		unstyled,
		size,
		readOnly,
		__staticSelector: "MultiSelect",
		attributes,
		onOptionSubmit: (val) => {
			onOptionSubmit?.(val);
			if (clearSearchOnChange) handleSearchChange("");
			combobox.updateSelectedOptionIndex("selected");
			if (_value.includes(optionsLockup[`${val}`].value)) {
				setValue(_value.filter((v) => v !== optionsLockup[`${val}`].value));
				onRemove?.(optionsLockup[`${val}`].value);
			} else if (_value.length < maxValues) setValue([..._value, optionsLockup[`${val}`].value]);
			else onMaxValues?.();
		},
		...comboboxProps,
		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.DropdownTarget, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PillsInput.PillsInput, {
			...styleProps,
			__staticSelector: "MultiSelect",
			classNames: resolvedClassNames,
			styles: resolvedStyles,
			unstyled,
			size,
			className,
			style,
			variant,
			disabled,
			radius,
			__defaultRightSection: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.Chevron, {
				size,
				error,
				unstyled,
				color: chevronColor
			}),
			__clearSection: clearButton,
			__clearable: _clearable,
			__clearSectionMode: clearSectionMode,
			rightSection,
			rightSectionPointerEvents: rightSectionPointerEvents || "none",
			rightSectionWidth,
			rightSectionProps,
			leftSection,
			leftSectionWidth,
			leftSectionPointerEvents,
			leftSectionProps,
			inputContainer,
			inputWrapperOrder,
			withAsterisk,
			labelProps,
			descriptionProps,
			errorProps,
			wrapperProps,
			description,
			label,
			error,
			withErrorStyles,
			__stylesApiProps: {
				...props,
				rightSectionPointerEvents: rightSectionPointerEvents || "none",
				multiline: true
			},
			pointer: !searchable,
			onClick: () => searchable ? combobox.openDropdown() : combobox.toggleDropdown(),
			"data-expanded": combobox.dropdownOpened || void 0,
			id: _id,
			required,
			mod,
			attributes,
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Pill.Pill.Group, {
				attributes,
				disabled,
				unstyled,
				...getStyles("pillsList", { style: pillsListStyle }),
				children: [values, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.EventsTarget, {
					autoComplete,
					withExpandedAttribute: true,
					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PillsInput.PillsInput.Field, {
						...rest,
						id: _id,
						placeholder,
						type: !searchable && !placeholder ? "hidden" : "visible",
						...getStyles("inputField"),
						unstyled,
						onFocus: (event) => {
							onFocus?.(event);
							openOnFocus && searchable && combobox.openDropdown();
						},
						onBlur: (event) => {
							onBlur?.(event);
							combobox.closeDropdown();
							handleSearchChange("");
						},
						onKeyDown: handleInputKeydown,
						value: _searchValue,
						onChange: (event) => {
							handleSearchChange(event.currentTarget.value);
							searchable && combobox.openDropdown();
							selectFirstOptionOnChange && combobox.selectFirstOption();
						},
						disabled,
						readOnly: readOnly || !searchable,
						pointer: !searchable
					})
				})]
			})
		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_OptionsDropdown.OptionsDropdown, {
			data: hidePickedOptions ? filteredData : parsedData,
			hidden: readOnly || disabled,
			filter,
			search: _searchValue,
			limit,
			hiddenWhenEmpty: !nothingFoundMessage,
			withScrollArea,
			maxDropdownHeight,
			filterOptions: searchable,
			value: _value,
			checkIconPosition,
			withCheckIcon,
			withAlignedLabels,
			nothingFoundMessage,
			unstyled,
			labelId: label ? `${_id}-label` : void 0,
			"aria-label": label ? void 0 : others["aria-label"],
			renderOption,
			scrollAreaProps
		})]
	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.HiddenInput, {
		name,
		valuesDivider: hiddenInputValuesDivider,
		value: _value,
		form,
		disabled,
		...hiddenInputProps
	})] });
});
MultiSelect.classes = {
	...require_InputBase.InputBase.classes,
	...require_Combobox.Combobox.classes
};
MultiSelect.displayName = "@mantine/core/MultiSelect";
//#endregion
exports.MultiSelect = MultiSelect;

//# sourceMappingURL=MultiSelect.cjs.map