@galaxy-io/dls 1.6.1 → 2.0.0

package/dist/inputs/MultiSelectInput.js

@@ -1,575 +1,191 @@
-import { withTheme } from "../theme/GalaxyTheme.js";
-import { getCssSizeValue } from "../utils/linaria.js";
-import Rotate from "../transform/Rotate.js";
-import Text, { TextSize, TextVariant } from "../text/Text.js";
-import FlexItem from "../containers/FlexItem.js";
-import Dropdown, { DropdownPosition, DropdownVariant } from "../dropdown/Dropdown.js";
-import Icon, { IconVariant } from "../icons/Icon.js";
-import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
-import { InputLabel, InputSize, InputVariant, getInputBorderColor, getInputControlSize, getInputFontSize, getInputHeight, getInputIconSize, getInputLineHeight, getInputPadding, getInputSurfaceColor, getInputTextSize } from "./Input.js";
-import CheckboxInput from "./CheckboxInput.js";
-import HorizontalDivider from "../dividers/HorizontalDivider.js";
-import { useElementWidth } from "../hooks/useElementWidth.js";
-import { useControlledOpenState, useDebouncedValue } from "./hooks.js";
-import { INPUT_VARIANT_TO_ICON_VARIANT_MAP } from "./SelectInput.js";
+import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
+import VisuallyHidden from "../a11y/VisuallyHidden.js";
+import { useControlledState } from "../hooks/useControlledState.js";
+import Chip, { ChipSize } from "../chips/Chip.js";
+import { SelectInputRoot, SelectInputSize, SelectInputVariant } from "./SelectInput.js";
 /* empty css                           */
 import { styled } from "@linaria/react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { forwardRef, useEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { ArrowCounterClockwiseIcon, CaretDownIcon } from "@phosphor-icons/react";
+import { cx } from "@linaria/core";
 //#region src/inputs/MultiSelectInput.tsx
-var INPUT_VARIANT_TO_DROPDOWN_VARIANT = {
-	[InputVariant.TRANSPARENT]: DropdownVariant.TRANSPARENT,
-	[InputVariant.PRIMARY]: DropdownVariant.PRIMARY,
-	[InputVariant.SECONDARY]: DropdownVariant.SECONDARY,
-	[InputVariant.TERTIARY]: DropdownVariant.TERTIARY,
-	[InputVariant.BASE]: DropdownVariant.PRIMARY
+/**
+* The form control for choosing several values from a list of options. SelectInput's field and
+* listbox (through the shared `SelectInputRoot` engine) with three differences: the value is an
+* array of option ids in selection order, choosing a row toggles it and keeps the panel open, and
+* the field shows the chosen options as chips on one line, with a `+N` chip for those that do not
+* fit. `maxSelected` caps the choices; `onCreate` (with `isSearchable`) offers a "Create" row for a
+* term that matches no option.
+*
+* Search, groups, pinned options, descriptions, disabled reasons, loading, paging,
+* virtualization, the keyboard model, sizes and fills are SelectInput's. It does not validate (the
+* app passes `error`) or hold free-form tags (that is `TagInput`).
+*
+* SSR: closed by default; every chip renders on the server and the overflow is clipped until the
+* first measurement. Nothing here touches `window` or `document` at module scope.
+*/
+/** Canonical rungs; MultiSelectInput supports all five (SelectInput's rung table). */
+var MultiSelectInputSize = /* @__PURE__ */ function(MultiSelectInputSize) {
+	/** 20px field, 16px chips, 24px rows. */
+	MultiSelectInputSize["X_SMALL"] = "X_SMALL";
+	/** 24px field, 16px chips, 24px rows. */
+	MultiSelectInputSize["SMALL"] = "SMALL";
+	/** 32px field, 20px chips, 32px rows. The default. */
+	MultiSelectInputSize["MEDIUM"] = "MEDIUM";
+	/** 36px field, 24px chips, 32px rows. */
+	MultiSelectInputSize["LARGE"] = "LARGE";
+	/** 40px field, 28px chips, 32px rows. */
+	MultiSelectInputSize["X_LARGE"] = "X_LARGE";
+	return MultiSelectInputSize;
+}({});
+/** Resting fill of the field (Constitution V-A surface set; 1.x `InputVariant` unchanged). */
+var MultiSelectInputVariant = /* @__PURE__ */ function(MultiSelectInputVariant) {
+	/** `background.base` fill. */
+	MultiSelectInputVariant["BASE"] = "BASE";
+	/** `background.primary` fill. The default. */
+	MultiSelectInputVariant["PRIMARY"] = "PRIMARY";
+	/** `background.secondary` fill. */
+	MultiSelectInputVariant["SECONDARY"] = "SECONDARY";
+	/** `background.tertiary` fill. */
+	MultiSelectInputVariant["TERTIARY"] = "TERTIARY";
+	return MultiSelectInputVariant;
+}({});
+/** Identity: the engine draws every rung. */
+var MULTI_SELECT_INPUT_SIZE_TO_SELECT_INPUT_SIZE_MAP = {
+	["X_SMALL"]: SelectInputSize.X_SMALL,
+	["SMALL"]: SelectInputSize.SMALL,
+	["MEDIUM"]: SelectInputSize.MEDIUM,
+	["LARGE"]: SelectInputSize.LARGE,
+	["X_LARGE"]: SelectInputSize.X_LARGE
 };
-var _exp = () => ({ $size }) => `0 ${getInputPadding($size)}`;
-var _exp2 = () => ({ $size }) => getInputHeight($size);
-var _exp3 = () => ({ $fillWidth, $width }) => $fillWidth ? "100%" : $width ? getCssSizeValue($width) : "auto";
-var _exp4 = () => ({ $isDisabled }) => $isDisabled ? "not-allowed" : "pointer";
-var _exp5 = () => ({ $isDisabled }) => $isDisabled ? .5 : 1;
-var _exp6 = () => ({ theme, $variant }) => getInputSurfaceColor(theme, $variant);
-var _exp7 = () => ({ theme, $variant, $isActive, $isError }) => {
-	if ($isActive) return theme.color.border.selected;
-	if ($isError) return theme.color.border.error;
-	return getInputBorderColor(theme, $variant);
+/** Identity: the engine draws every fill. */
+var MULTI_SELECT_INPUT_VARIANT_TO_SELECT_INPUT_VARIANT_MAP = {
+	["BASE"]: SelectInputVariant.BASE,
+	["PRIMARY"]: SelectInputVariant.PRIMARY,
+	["SECONDARY"]: SelectInputVariant.SECONDARY,
+	["TERTIARY"]: SelectInputVariant.TERTIARY
 };
-var _exp8 = () => ({ theme, $variant, $isActive }) => $isActive ? theme.color.border.selected : getInputBorderColor(theme, $variant);
-var StyledMultiSelectInput = withTheme(/*#__PURE__*/ styled("div")({
-	name: "StyledMultiSelectInput",
-	class: "sf4kgcu",
-	propsAsIs: false,
-	vars: {
-		"sf4kgcu-0": [_exp()],
-		"sf4kgcu-1": [_exp2()],
-		"sf4kgcu-2": [_exp3()],
-		"sf4kgcu-3": [_exp4()],
-		"sf4kgcu-4": [_exp5()],
-		"sf4kgcu-5": [_exp6()],
-		"sf4kgcu-6": [_exp7()],
-		"sf4kgcu-7": [_exp8()]
-	}
-}));
-var _exp9 = () => ({ $size }) => getInputHeight($size);
-var _exp0 = () => ({ theme }) => theme.color.text.primary;
-var _exp1 = () => ({ theme, $size }) => getInputFontSize(theme, $size);
-var _exp10 = () => ({ theme, $size }) => getInputLineHeight(theme, $size);
-var _exp11 = () => ({ theme }) => theme.font.sans.weight.medium;
-var _exp12 = () => ({ theme }) => theme.font.sans.family;
-var _exp13 = () => ({ theme }) => theme.color.text.tertiary;
-var StyledSearchInput = withTheme(/*#__PURE__*/ styled("input")({
-	name: "StyledSearchInput",
-	class: "s15yoqwu",
-	propsAsIs: false,
-	vars: {
-		"s15yoqwu-0": [_exp9()],
-		"s15yoqwu-1": [_exp0()],
-		"s15yoqwu-2": [_exp1()],
-		"s15yoqwu-3": [_exp10()],
-		"s15yoqwu-4": [_exp11()],
-		"s15yoqwu-5": [_exp12()],
-		"s15yoqwu-6": [_exp13()]
-	}
-}));
-var _exp14 = () => ({ $width }) => getCssSizeValue($width, 200);
-var _exp15 = () => ({ $fillWidth, $width }) => {
-	if ($width) return getCssSizeValue($width);
-	return $fillWidth ? "100%" : "auto";
+/** Chip rung per field rung: 2 to 6px inside the field, never above the field's text step. */
+var MULTI_SELECT_INPUT_SIZE_TO_CHIP_SIZE_MAP = {
+	["X_SMALL"]: ChipSize.X_SMALL,
+	["SMALL"]: ChipSize.X_SMALL,
+	["MEDIUM"]: ChipSize.SMALL,
+	["LARGE"]: ChipSize.MEDIUM,
+	["X_LARGE"]: ChipSize.LARGE
 };
-var MultiSelectInputContent = /*#__PURE__*/ styled("div")({
-	name: "MultiSelectInputContent",
-	class: "m1wojn02",
-	propsAsIs: false,
-	vars: {
-		"m1wojn02-0": [_exp14()],
-		"m1wojn02-1": [_exp15()]
-	}
-});
-var _exp16 = () => ({ $fillWidth, $width }) => $fillWidth || $width ? "100%" : "auto";
-var MultiSelectInputOptionsContainer = /*#__PURE__*/ styled("div")({
-	name: "MultiSelectInputOptionsContainer",
-	class: "m1ybiav6",
-	propsAsIs: false,
-	vars: { "m1ybiav6-0": [_exp16()] }
-});
-var _exp17 = () => ({ theme, $isFocused }) => $isFocused ? theme.color.background.secondary : "transparent";
-var _exp18 = () => ({ theme }) => theme.color.background.secondary;
-var MultiSelectInputOption = withTheme(/*#__PURE__*/ styled("div")({
-	name: "MultiSelectInputOption",
-	class: "m78p4ib",
-	propsAsIs: false,
-	vars: {
-		"m78p4ib-0": [_exp17()],
-		"m78p4ib-1": [_exp18()]
-	}
-}));
-var _exp19 = () => ({ theme, $isFocused }) => $isFocused ? theme.color.background.tertiary : "transparent";
-var _exp21 = () => ({ theme }) => theme.color.background.tertiary;
-var PinnedOptionButton = withTheme(/*#__PURE__*/ styled("button")({
-	name: "PinnedOptionButton",
-	class: "p6xdmgb",
-	propsAsIs: false,
-	vars: {
-		"p6xdmgb-0": [_exp19()],
-		"p6xdmgb-1": [_exp21()]
-	}
-}));
-var OptionIconSlot = /*#__PURE__*/ styled("span")({
-	name: "OptionIconSlot",
-	class: "o16no7ck",
+/** The chips' one line, wrapping so a chip that does not fit drops out of sight. */
+var ChipRowRoot = /*#__PURE__*/ styled("span")({
+	name: "ChipRowRoot",
+	class: "gx-MultiSelectInput-ChipRowRoot-cf4kgcu",
 	propsAsIs: false
 });
-var _exp22 = () => ({ $size }) => getInputControlSize($size);
-var ResetIconSlot = /*#__PURE__*/ styled("span")({
-	name: "ResetIconSlot",
-	class: "roazm1",
-	propsAsIs: false,
-	vars: { "roazm1-0": [_exp22()] }
-});
-/**
-* Multi-choice dropdown. Same option shape and search contract as `SelectInput`,
-* but the panel stays open across picks and the trigger summarizes what's chosen.
-*
-* Controlled: `onChange` hands back the complete next selection, not a delta.
-*/
-var MultiSelectInput = ({ label, icon, variant = InputVariant.PRIMARY, size = InputSize.MEDIUM, options, value, placeholder = "Select options...", onChange, width, fillWidth, dropdownWidth, dropdownPlacement = DropdownPosition.BOTTOM_START, isDisabled = false, isRequired = false, isOpen: controlledIsOpen, isIconTrailing, onOpenChange, onReset, pinnedOptions = [], maxDisplayItems = 3, renderSelectedText, renderSelectedContent, error, onSearch, debounceMs = 300 }) => {
-	const isSearchable = !!onSearch;
-	const [isHovered, setIsHovered] = useState(false);
-	const [searchTerm, setSearchTerm] = useState("");
-	const [focusedOptionIndex, setFocusedOptionIndex] = useState(-1);
-	const inputRef = useRef(null);
-	const triggerRef = useRef(null);
-	const optionsRefs = useRef([]);
-	const { isOpen, setOpen } = useControlledOpenState({
-		isOpen: controlledIsOpen,
-		onOpenChange
+/** The line's height per rung: the chip height (Chip's own sums), so a wrapped chip is clipped. */
+var MULTI_SELECT_INPUT_SIZE_TO_CHIP_ROW_CSS_MAP = {
+	["X_SMALL"]: "gx-MultiSelectInput-X_SMALL-x15yoqwu",
+	["SMALL"]: "gx-MultiSelectInput-SMALL-s1wojn02",
+	["MEDIUM"]: "gx-MultiSelectInput-MEDIUM-m1ybiav6",
+	["LARGE"]: "gx-MultiSelectInput-LARGE-l78p4ib",
+	["X_LARGE"]: "gx-MultiSelectInput-X_LARGE-x6xdmgb"
+};
+/** One visible chip left: it and the `+N` chip share the line, and the first chip truncates. */
+var SINGLE_CHIP_ROW_CSS = "gx-MultiSelectInput-SINGLE_CHIP_ROW_CSS-s16no7ck";
+/** The first chip may shrink, so at least one always shows. */
+var FIRST_CHIP_CSS = "gx-MultiSelectInput-FIRST_CHIP_CSS-foazm1";
+/** The selected options as chips on one line, then `+N` for the ones that do not fit. */
+function ChipRow({ options, size, isDisabled }) {
+	const rowRef = useRef(null);
+	const [visibleCount, setVisibleCount] = useState(options.length);
+	const selectionKey = options.map((option) => option.id).join("\n");
+	const [lastKey, setLastKey] = useState(selectionKey);
+	if (lastKey !== selectionKey) {
+		setLastKey(selectionKey);
+		setVisibleCount(options.length);
+	}
+	useIsomorphicLayoutEffect(() => {
+		const row = rowRef.current;
+		if (row === null) return;
+		const chips = Array.from(row.children);
+		const first = chips[0];
+		if (first === void 0) return;
+		if (chips.some((chip) => chip.offsetTop > first.offsetTop) && visibleCount > 1) setVisibleCount(visibleCount - 1);
 	});
-	const triggerWidth = useElementWidth(triggerRef);
-	const resolvedDropdownWidth = useMemo(() => dropdownWidth ?? triggerWidth ?? width, [
-		dropdownWidth,
-		triggerWidth,
-		width
-	]);
-	const effectiveIsDisabled = isDisabled || options.length === 0;
-	const visible = isOpen;
-	const debouncedSearchTerm = useDebouncedValue(searchTerm, debounceMs, isSearchable);
+	const optionCount = options.length;
 	useEffect(() => {
-		if (visible && isSearchable && inputRef.current) {
-			inputRef.current.focus();
-			inputRef.current.select();
-		}
-	}, [visible, isSearchable]);
-	const [prevVisible, setPrevVisible] = useState(visible);
-	if (visible !== prevVisible) {
-		setPrevVisible(visible);
-		if (!visible && isSearchable) {
-			setSearchTerm("");
-			setFocusedOptionIndex(-1);
-		}
-	}
-	const renderIcon = useCallback(() => {
-		if (!icon) return null;
-		let iconVariant = INPUT_VARIANT_TO_ICON_VARIANT_MAP[variant];
-		if (isDisabled) iconVariant = IconVariant.TERTIARY;
-		return /* @__PURE__ */ jsx(FlexItem, {
-			shrink: 0,
-			grow: 0,
-			children: /* @__PURE__ */ jsx(Icon, {
-				component: icon,
-				variant: iconVariant,
-				size: getInputIconSize(size)
-			})
+		const row = rowRef.current;
+		if (row === null || typeof ResizeObserver === "undefined") return;
+		let lastWidth = row.clientWidth;
+		const observer = new ResizeObserver(() => {
+			if (row.clientWidth === lastWidth) return;
+			lastWidth = row.clientWidth;
+			setVisibleCount(optionCount);
 		});
-	}, [
-		icon,
-		variant,
-		size,
-		isDisabled
-	]);
-	const filteredOptions = useMemo(() => {
-		if (!isSearchable || !debouncedSearchTerm.trim()) return options;
-		return onSearch(debouncedSearchTerm, options);
-	}, [
-		isSearchable,
-		onSearch,
-		debouncedSearchTerm,
-		options
-	]);
-	const filteredPinnedOptions = useMemo(() => {
-		if (!isSearchable || !debouncedSearchTerm.trim()) return pinnedOptions;
-		return [];
-	}, [
-		isSearchable,
-		debouncedSearchTerm,
-		pinnedOptions
-	]);
-	if (focusedOptionIndex >= filteredPinnedOptions.length + filteredOptions.length && focusedOptionIndex !== -1) setFocusedOptionIndex(-1);
-	useEffect(() => {
-		optionsRefs.current = [];
-	}, [filteredPinnedOptions, filteredOptions]);
-	const handleToggle = useCallback(() => {
-		if (effectiveIsDisabled) return;
-		setOpen(!visible);
-	}, [
-		effectiveIsDisabled,
-		setOpen,
-		visible
-	]);
-	const handleClose = useCallback(() => {
-		setOpen(false);
-	}, [setOpen]);
-	const handleOptionToggle = (option) => {
-		if (!onChange) return;
-		const isCurrentlySelected = value.some((v) => v.id === option.id);
-		let newValue;
-		if (isCurrentlySelected) newValue = value.filter((v) => v.id !== option.id);
-		else newValue = [...value, option];
-		onChange(newValue);
-	};
-	const handlePinnedOptionToggle = (pinnedOption) => {
-		if (!onChange) return;
-		const pinnedOptionsData = options.filter((option) => pinnedOption.optionIds.includes(option.id));
-		const allPinnedSelected = pinnedOptionsData.every((option) => value.some((v) => v.id === option.id));
-		let newValue;
-		if (allPinnedSelected) newValue = value.filter((v) => !pinnedOption.optionIds.includes(v.id));
-		else {
-			const optionsToAdd = pinnedOptionsData.filter((option) => !value.some((v) => v.id === option.id));
-			newValue = [...value, ...optionsToAdd];
-		}
-		onChange(newValue);
-	};
-	const handleReset = () => {
-		if (onReset) onReset();
-		handleClose();
-	};
-	const handleMouseEnter = () => {
-		setIsHovered(true);
-	};
-	const handleMouseLeave = () => {
-		setIsHovered(false);
-	};
-	const handleKeyDown = (e) => {
-		if (effectiveIsDisabled) return;
-		if (isSearchable && visible) {
-			handleSearchKeyDown(e);
-			return;
-		}
-		if (e.key === "Enter" || e.key === " ") {
-			e.preventDefault();
-			handleToggle();
-		}
-	};
-	const handleSearchKeyDown = (e) => {
-		if (!isSearchable) return;
-		const allOptions = [...filteredPinnedOptions, ...filteredOptions];
-		const currentIndex = focusedOptionIndex;
-		const focusOptionAtIndex = (nextIndex) => {
-			setFocusedOptionIndex(nextIndex);
-			optionsRefs.current[nextIndex]?.scrollIntoView({ block: "nearest" });
-		};
-		switch (e.key) {
-			case "ArrowDown":
-				e.preventDefault();
-				if (currentIndex < allOptions.length - 1) focusOptionAtIndex(currentIndex + 1);
-				break;
-			case "ArrowUp":
-				e.preventDefault();
-				if (currentIndex > 0) focusOptionAtIndex(currentIndex - 1);
-				else inputRef.current?.focus();
-				break;
-			case "Enter":
-				e.preventDefault();
-				if (currentIndex >= 0 && currentIndex < allOptions.length) if (currentIndex < filteredPinnedOptions.length) handlePinnedOptionToggle(filteredPinnedOptions[currentIndex]);
-				else handleOptionToggle(filteredOptions[currentIndex - filteredPinnedOptions.length]);
-				break;
-			case "Escape":
-				e.preventDefault();
-				handleClose();
-				break;
-			default:
-				if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) setFocusedOptionIndex(-1);
-				break;
-		}
-	};
-	const handleInputChange = (e) => {
-		setSearchTerm(e.target.value);
-		setFocusedOptionIndex(-1);
-	};
-	const isOptionSelected = (optionId) => {
-		return value.some((v) => v.id === optionId);
-	};
-	const isPinnedOptionSelected = (pinnedOption) => {
-		return options.filter((option) => pinnedOption.optionIds.includes(option.id)).every((option) => value.some((v) => v.id === option.id));
-	};
-	const isPinnedOptionFocused = (index) => {
-		return isSearchable && focusedOptionIndex === index && index < filteredPinnedOptions.length;
-	};
-	const isOptionFocused = (index) => {
-		return isSearchable && focusedOptionIndex === index + filteredPinnedOptions.length && index >= 0;
-	};
-	const displayText = useMemo(() => {
-		if (renderSelectedText) return renderSelectedText(value, placeholder);
-		if (value.length === 0) return placeholder;
-		if (value.length <= maxDisplayItems) return value.map((v) => v.label).join(", ");
-		const displayItems = value.slice(0, maxDisplayItems).map((v) => v.label);
-		const remainingCount = value.length - maxDisplayItems;
-		return `${displayItems.join(", ")} +${remainingCount} more`;
-	}, [
+		observer.observe(row);
+		return () => observer.disconnect();
+	}, [optionCount]);
+	const shown = Math.max(1, Math.min(visibleCount, options.length));
+	const hidden = options.slice(shown);
+	const chipSize = MULTI_SELECT_INPUT_SIZE_TO_CHIP_SIZE_MAP[size];
+	return /* @__PURE__ */ jsxs(ChipRowRoot, {
+		ref: rowRef,
+		"aria-hidden": true,
+		className: cx(MULTI_SELECT_INPUT_SIZE_TO_CHIP_ROW_CSS_MAP[size], shown === 1 && hidden.length > 0 && SINGLE_CHIP_ROW_CSS),
+		children: [options.slice(0, shown).map((option, index) => /* @__PURE__ */ jsx(Chip, {
+			label: option.label,
+			...option.icon === void 0 ? {} : { icon: option.icon },
+			size: chipSize,
+			isDisabled,
+			...index === 0 ? { className: FIRST_CHIP_CSS } : {}
+		}, option.id)), hidden.length > 0 && /* @__PURE__ */ jsx(Chip, {
+			label: `+${hidden.length}`,
+			size: chipSize,
+			isDisabled,
+			tooltip: hidden.map((option) => option.label).join(", ")
+		})]
+	});
+}
+/** Choose several values from a list of options; the choices show as chips in the field. */
+var MultiSelectInputInner = forwardRef(function MultiSelectInput({ value, defaultValue, onChange, size: sizeProp, variant: variantProp, isGhost, placeholder, isDisabled: isDisabledProp, maxSelected, renderValue, isSearchable, onCreate, className, style, ...rest }, ref) {
+	const size = sizeProp ?? "MEDIUM";
+	const variant = variantProp ?? "PRIMARY";
+	const isDisabled = isDisabledProp ?? false;
+	const [currentValue, setValue] = useControlledState({
 		value,
-		placeholder,
-		maxDisplayItems,
-		renderSelectedText
-	]);
-	const noop = useCallback((_checked) => {}, []);
-	const dropdownBody = /* @__PURE__ */ jsxs(MultiSelectInputContent, {
-		$fillWidth: fillWidth,
-		$width: resolvedDropdownWidth,
-		children: [
-			filteredPinnedOptions.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [filteredPinnedOptions.map((pinnedOption, index) => /* @__PURE__ */ jsx(PinnedOptionButton, {
-				ref: (el) => {
-					optionsRefs.current[index] = el;
-				},
-				$isFocused: isPinnedOptionFocused(index),
-				$size: size,
-				onClick: (e) => {
-					e.preventDefault();
-					handlePinnedOptionToggle(pinnedOption);
-				},
-				onMouseEnter: () => setFocusedOptionIndex(index),
-				children: /* @__PURE__ */ jsxs(FlexWrapper, {
-					alignItems: AlignItems.CENTER,
-					gap: 8,
-					fillWidth: true,
-					children: [/* @__PURE__ */ jsx(CheckboxInput, {
-						variant,
-						size,
-						isChecked: isPinnedOptionSelected(pinnedOption),
-						onChange: noop
-					}), /* @__PURE__ */ jsx(FlexItem, {
-						grow: 1,
-						shrink: 1,
-						minWidth: 0,
-						children: /* @__PURE__ */ jsx(Text, {
-							variant: isPinnedOptionSelected(pinnedOption) ? TextVariant.PRIMARY : TextVariant.SECONDARY,
-							size: getInputTextSize(size),
-							cursor: !effectiveIsDisabled ? "pointer" : "not-allowed",
-							isEllipsis: true,
-							children: pinnedOption.label
-						})
-					})]
-				})
-			}, pinnedOption.id)), /* @__PURE__ */ jsx(FlexItem, {
-				shrink: 0,
-				children: /* @__PURE__ */ jsx(HorizontalDivider, {})
-			})] }),
-			/* @__PURE__ */ jsx(MultiSelectInputOptionsContainer, {
-				$fillWidth: fillWidth,
-				$width: resolvedDropdownWidth,
-				children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => {
-					const absoluteIndex = filteredPinnedOptions.length + index;
-					return /* @__PURE__ */ jsx(MultiSelectInputOption, {
-						ref: (el) => {
-							optionsRefs.current[absoluteIndex] = el;
-						},
-						$isFocused: isOptionFocused(index),
-						onClick: (e) => {
-							e.preventDefault();
-							handleOptionToggle(option);
-						},
-						onMouseEnter: () => setFocusedOptionIndex(absoluteIndex),
-						children: /* @__PURE__ */ jsxs(FlexWrapper, {
-							alignItems: AlignItems.CENTER,
-							gap: 8,
-							fillWidth: true,
-							children: [
-								/* @__PURE__ */ jsx(CheckboxInput, {
-									variant,
-									size,
-									isChecked: isOptionSelected(option.id),
-									onChange: noop
-								}),
-								option.icon && /* @__PURE__ */ jsx(OptionIconSlot, { children: option.icon }),
-								/* @__PURE__ */ jsx(FlexItem, {
-									grow: 1,
-									shrink: 1,
-									minWidth: 0,
-									children: /* @__PURE__ */ jsx(Text, {
-										variant: option.variant ?? TextVariant.PRIMARY,
-										size: getInputTextSize(size),
-										cursor: !effectiveIsDisabled ? "pointer" : "not-allowed",
-										isEllipsis: true,
-										children: option.label
-									})
-								})
-							]
-						})
-					}, option.id);
-				}) : /* @__PURE__ */ jsx(FlexWrapper, {
-					padding: 8,
-					children: /* @__PURE__ */ jsx(Text, {
-						variant: TextVariant.TERTIARY,
-						size: getInputTextSize(size),
-						children: "No options found"
-					})
-				})
-			}),
-			onReset && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FlexItem, {
-				shrink: 0,
-				children: /* @__PURE__ */ jsx(HorizontalDivider, {})
-			}), /* @__PURE__ */ jsx(PinnedOptionButton, {
-				onClick: handleReset,
-				$isFocused: false,
-				$size: size,
-				children: /* @__PURE__ */ jsxs(FlexWrapper, {
-					alignItems: AlignItems.CENTER,
-					gap: 8,
-					children: [/* @__PURE__ */ jsx(ResetIconSlot, {
-						$size: size,
-						children: /* @__PURE__ */ jsx(Icon, {
-							component: ArrowCounterClockwiseIcon,
-							variant: IconVariant.TERTIARY,
-							size: getInputIconSize(size)
-						})
-					}), /* @__PURE__ */ jsx(Text, {
-						variant: TextVariant.SECONDARY,
-						size: getInputTextSize(size),
-						cursor: !effectiveIsDisabled ? "pointer" : "not-allowed",
-						children: "Reset"
-					})]
-				})
-			})] })
-		]
+		defaultValue: defaultValue ?? [],
+		onChange
 	});
-	const displayValue = useMemo(() => {
-		if (isSearchable && visible) return searchTerm;
-		return displayText;
-	}, [
-		isSearchable,
-		visible,
-		searchTerm,
-		displayText
-	]);
-	const textVariant = useMemo(() => {
-		if (value.length > 0) return TextVariant.PRIMARY;
-		if (!effectiveIsDisabled && (visible || isHovered)) return TextVariant.SECONDARY;
-		return TextVariant.TERTIARY;
-	}, [
-		value.length,
-		visible,
-		isHovered,
-		effectiveIsDisabled
-	]);
-	return /* @__PURE__ */ jsxs(FlexWrapper, {
-		direction: FlexDirection.COLUMN,
-		gap: 4,
-		fillWidth,
-		children: [
-			label && /* @__PURE__ */ jsx(InputLabel, {
-				label,
-				isRequired
-			}),
-			/* @__PURE__ */ jsx(Dropdown, {
-				variant: INPUT_VARIANT_TO_DROPDOWN_VARIANT[variant],
-				body: dropdownBody,
-				isOpen: visible,
-				onClose: handleClose,
-				minWidth: resolvedDropdownWidth ?? 200,
-				offset: [0, 3],
-				fillWidth,
-				noPadding: true,
-				position: dropdownPlacement,
-				children: isSearchable && visible ? /* @__PURE__ */ jsxs(StyledMultiSelectInput, {
-					ref: triggerRef,
-					$variant: variant,
-					$size: size,
-					$isActive: visible ?? false,
-					$isDisabled: effectiveIsDisabled,
-					$isError: !!error,
-					$width: width,
-					$fillWidth: fillWidth,
-					onMouseEnter: handleMouseEnter,
-					onMouseLeave: handleMouseLeave,
-					onClick: handleToggle,
-					children: [
-						!isIconTrailing && renderIcon(),
-						/* @__PURE__ */ jsx(StyledSearchInput, {
-							ref: inputRef,
-							$size: size,
-							$isActive: visible ?? false,
-							$isDisabled: effectiveIsDisabled,
-							$isError: !!error,
-							$width: width,
-							$fillWidth: fillWidth,
-							type: "text",
-							placeholder,
-							value: searchTerm,
-							onChange: handleInputChange,
-							onKeyDown: handleSearchKeyDown,
-							autoComplete: "off",
-							autoCorrect: "off",
-							disabled: effectiveIsDisabled,
-							onClick: (e) => e.stopPropagation()
-						}),
-						/* @__PURE__ */ jsx(FlexWrapper, { children: /* @__PURE__ */ jsx(Rotate, {
-							isRotated: visible,
-							deg: -180,
-							children: /* @__PURE__ */ jsx(Icon, {
-								component: CaretDownIcon,
-								size: getInputIconSize(size),
-								variant: !effectiveIsDisabled && (isHovered || visible) ? IconVariant.SECONDARY : IconVariant.TERTIARY
-							})
-						}) }),
-						isIconTrailing && renderIcon()
-					]
-				}) : /* @__PURE__ */ jsxs(StyledMultiSelectInput, {
-					ref: triggerRef,
-					$variant: variant,
-					$size: size,
-					$isActive: visible ?? false,
-					$isDisabled: effectiveIsDisabled,
-					$isError: !!error,
-					$width: width,
-					$fillWidth: fillWidth,
-					onClick: handleToggle,
-					onKeyDown: handleKeyDown,
-					onMouseEnter: handleMouseEnter,
-					onMouseLeave: handleMouseLeave,
-					role: "button",
-					tabIndex: effectiveIsDisabled ? -1 : 0,
-					"aria-haspopup": "listbox",
-					"aria-expanded": visible,
-					"aria-label": displayValue,
-					children: [
-						!isIconTrailing && renderIcon(),
-						renderSelectedContent ? renderSelectedContent(value, placeholder) : /* @__PURE__ */ jsx(Text, {
-							variant: textVariant,
-							size: getInputTextSize(size),
-							cursor: !effectiveIsDisabled ? "pointer" : "not-allowed",
-							isEllipsis: true,
-							children: displayValue
-						}),
-						/* @__PURE__ */ jsx(FlexWrapper, { children: /* @__PURE__ */ jsx(Rotate, {
-							isRotated: visible,
-							deg: -180,
-							children: /* @__PURE__ */ jsx(Icon, {
-								component: CaretDownIcon,
-								size: getInputIconSize(size),
-								variant: !effectiveIsDisabled && (isHovered || visible) ? IconVariant.SECONDARY : IconVariant.TERTIARY
-							})
-						}) }),
-						isIconTrailing && renderIcon()
-					]
-				})
-			}),
-			error && /* @__PURE__ */ jsx(Text, {
-				variant: TextVariant.ERROR,
-				size: TextSize.BODY_SM,
-				children: error
-			})
-		]
+	const limit = maxSelected === void 0 || Math.floor(maxSelected) < 1 ? void 0 : Math.floor(maxSelected);
+	const isAtLimit = limit !== void 0 && currentValue.length >= limit;
+	const toggle = (id) => {
+		setValue(currentValue.includes(id) ? currentValue.filter((selectedId) => selectedId !== id) : [...currentValue, id]);
+	};
+	return /* @__PURE__ */ jsx(SelectInputRoot, {
+		componentName: "MultiSelectInput",
+		...rest,
+		ref,
+		size: MULTI_SELECT_INPUT_SIZE_TO_SELECT_INPUT_SIZE_MAP[size],
+		variant: MULTI_SELECT_INPUT_VARIANT_TO_SELECT_INPUT_VARIANT_MAP[variant],
+		isGhost: isGhost === true,
+		placeholder: placeholder ?? "Select options…",
+		isDisabled,
+		isSearchable: isSearchable === true,
+		selectedIds: currentValue,
+		isMultiple: true,
+		onOptionSelect: toggle,
+		onClear: () => setValue([]),
+		renderSelection: (selected) => renderValue !== void 0 ? renderValue(selected) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(VisuallyHidden, { children: selected.map((option) => option.label).join(", ") }), /* @__PURE__ */ jsx(ChipRow, {
+			options: selected,
+			size,
+			isDisabled
+		})] }),
+		getSelectionText: (selected) => selected.map((option) => option.label).join(", "),
+		limitReason: isAtLimit ? `Limit of ${limit} reached` : void 0,
+		onCreate: isSearchable === true ? onCreate : void 0,
+		...className === void 0 ? {} : { className },
+		...style === void 0 ? {} : { style }
 	});
-};
+});
+MultiSelectInputInner.displayName = "MultiSelectInput";
+/** Choose several values from a list of options; the choices show as chips in the field. */
+var MultiSelectInput = MultiSelectInputInner;
 //#endregion
-export { MultiSelectInput as default };
+export { MultiSelectInputSize, MultiSelectInputVariant, MultiSelectInput as default };