@galaxy-io/dls 1.0.3

package/dist/inputs/MultiSelectInput.js

@@ -0,0 +1,566 @@
+import { withTheme } from "../theme/GalaxyTheme.js";
+import { getCssSizeValue } from "../utils/linaria.js";
+import Text, { TextSize, TextVariant } from "../text/Text.js";
+import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
+import FlexItem from "../containers/FlexItem.js";
+import Icon, { IconVariant } from "../icons/Icon.js";
+import Dropdown, { DropdownPosition, DropdownVariant } from "../dropdown/Dropdown.js";
+import { InputLabel } from "./Input.js";
+import RotateWithTransition from "../animations/RotateWithTransition.js";
+import HorizontalDivider from "../dividers/HorizontalDivider.js";
+import { useElementWidth } from "../hooks/useElementWidth.js";
+import { useControlledOpenState, useDebouncedValue } from "./hooks.js";
+import { SELECT_INPUT_SIZE_TO_ICON_SIZE, SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP, SELECT_INPUT_VARIANT_TO_ICON_VARIANT_MAP, SelectInputSize, SelectInputVariant } from "./SelectInput.js";
+import CheckboxInput, { CheckboxInputVariant } from "./CheckboxInput.js";
+/* empty css                           */
+import { styled } from "@linaria/react";
+import { match } from "ts-pattern";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ArrowCounterClockwiseIcon, CaretDownIcon } from "@phosphor-icons/react";
+//#region src/inputs/MultiSelectInput.tsx
+var _exp = () => ({ $size }) => {
+	return match($size).with(SelectInputSize.SMALL, () => "0 6px").with(SelectInputSize.MEDIUM, () => "0 8px").with(SelectInputSize.LARGE, () => "0 10px").exhaustive();
+};
+var _exp2 = () => ({ $size }) => {
+	return match($size).with(SelectInputSize.SMALL, () => "24px").with(SelectInputSize.MEDIUM, () => "28px").with(SelectInputSize.LARGE, () => "32px").exhaustive();
+};
+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 }) => theme.color.background.primary;
+var _exp7 = () => ({ theme, $isActive, $isError }) => {
+	if ($isActive) return theme.color.border.selected;
+	if ($isError) return theme.color.border.error;
+	return theme.color.border.primary;
+};
+var _exp8 = () => ({ theme, $isActive }) => $isActive ? theme.color.border.selected : theme.color.border.primary;
+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 }) => {
+	return match($size).with(SelectInputSize.SMALL, () => "24px").with(SelectInputSize.MEDIUM, () => "28px").with(SelectInputSize.LARGE, () => "32px").exhaustive();
+};
+var _exp0 = () => ({ theme }) => theme.color.text.primary;
+var _exp1 = () => ({ theme, $size }) => {
+	return match($size).with(SelectInputSize.SMALL, () => theme.font.sans.size.body_sm).with(SelectInputSize.MEDIUM, () => theme.font.sans.size.body_md).with(SelectInputSize.LARGE, () => theme.font.sans.size.body_lg).exhaustive();
+};
+var _exp10 = () => ({ theme, $size }) => {
+	return match($size).with(SelectInputSize.SMALL, () => theme.font.sans.height.body_sm).with(SelectInputSize.MEDIUM, () => theme.font.sans.height.body_md).with(SelectInputSize.LARGE, () => theme.font.sans.height.body_lg).exhaustive();
+};
+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";
+};
+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.tertiary : "transparent";
+var _exp18 = () => ({ theme }) => theme.color.background.tertiary;
+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",
+	propsAsIs: false
+});
+var SELECT_INPUT_VARIANT_TO_CHECKBOX_INPUT_VARIANT = {
+	[SelectInputVariant.BASE]: CheckboxInputVariant.SECONDARY,
+	[SelectInputVariant.PRIMARY]: CheckboxInputVariant.SECONDARY,
+	[SelectInputVariant.SECONDARY]: CheckboxInputVariant.SECONDARY,
+	[SelectInputVariant.TERTIARY]: CheckboxInputVariant.PRIMARY
+};
+var MultiSelectInput = ({ label, icon, variant = SelectInputVariant.PRIMARY, size = SelectInputSize.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
+	});
+	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);
+	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 = SELECT_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: SELECT_INPUT_SIZE_TO_ICON_SIZE[size]
+			})
+		});
+	}, [
+		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`;
+	}, [
+		value,
+		placeholder,
+		maxDisplayItems,
+		renderSelectedText
+	]);
+	const noop = useCallback((_checked) => {}, []);
+	const dropdownBody = /* @__PURE__ */ jsxs(MultiSelectInputContent, {
+		$fillWidth: fillWidth,
+		$width: resolvedDropdownWidth,
+		children: [
+			filteredPinnedOptions.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [filteredPinnedOptions.map((pinnedOption, index) => /* @__PURE__ */ jsx(PinnedOptionButton, {
+				ref: (el) => {
+					optionsRefs.current[index] = el;
+				},
+				$isFocused: isPinnedOptionFocused(index),
+				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: SELECT_INPUT_VARIANT_TO_CHECKBOX_INPUT_VARIANT[variant],
+						isChecked: isPinnedOptionSelected(pinnedOption),
+						onChange: noop
+					}), /* @__PURE__ */ jsx(FlexItem, {
+						grow: 1,
+						shrink: 1,
+						minWidth: 0,
+						children: /* @__PURE__ */ jsx(Text, {
+							variant: TextVariant.PRIMARY,
+							size: SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP[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: SELECT_INPUT_VARIANT_TO_CHECKBOX_INPUT_VARIANT[variant],
+									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: SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP[size],
+										cursor: !effectiveIsDisabled ? "pointer" : "not-allowed",
+										isEllipsis: true,
+										children: option.label
+									})
+								})
+							]
+						})
+					}, option.id);
+				}) : /* @__PURE__ */ jsx("div", {
+					style: { padding: "8px" },
+					children: /* @__PURE__ */ jsx(Text, {
+						variant: TextVariant.TERTIARY,
+						size: SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP[size],
+						children: "No options found"
+					})
+				})
+			}),
+			onReset && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FlexItem, {
+				shrink: 0,
+				children: /* @__PURE__ */ jsx(HorizontalDivider, {})
+			}), /* @__PURE__ */ jsx(PinnedOptionButton, {
+				onClick: handleReset,
+				$isFocused: false,
+				children: /* @__PURE__ */ jsxs(FlexWrapper, {
+					alignItems: AlignItems.CENTER,
+					gap: 8,
+					children: [/* @__PURE__ */ jsx(Icon, {
+						component: ArrowCounterClockwiseIcon,
+						variant: IconVariant.TERTIARY,
+						size: 12
+					}), /* @__PURE__ */ jsx(Text, {
+						variant: TextVariant.PRIMARY,
+						size: SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP[size],
+						cursor: !effectiveIsDisabled ? "pointer" : "not-allowed",
+						children: "Reset"
+					})]
+				})
+			})] })
+		]
+	});
+	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: DropdownVariant.PRIMARY,
+				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,
+							$variant: variant,
+							$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(RotateWithTransition, {
+							isRotated: visible,
+							deg: -180,
+							children: /* @__PURE__ */ jsx(Icon, {
+								component: CaretDownIcon,
+								size: 10,
+								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: SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP[size],
+							cursor: !effectiveIsDisabled ? "pointer" : "not-allowed",
+							isEllipsis: true,
+							children: displayValue
+						}),
+						/* @__PURE__ */ jsx(FlexWrapper, { children: /* @__PURE__ */ jsx(RotateWithTransition, {
+							isRotated: visible,
+							deg: -180,
+							children: /* @__PURE__ */ jsx(Icon, {
+								component: CaretDownIcon,
+								size: 10,
+								variant: !effectiveIsDisabled && (isHovered || visible) ? IconVariant.SECONDARY : IconVariant.TERTIARY
+							})
+						}) }),
+						isIconTrailing && renderIcon()
+					]
+				})
+			}),
+			error && /* @__PURE__ */ jsx(Text, {
+				variant: TextVariant.ERROR,
+				size: TextSize.BODY_SM,
+				children: error
+			})
+		]
+	});
+};
+//#endregion
+export { MultiSelectInput as default };

package/dist/inputs/MultiTextInput.d.ts

@@ -0,0 +1,27 @@
+export declare enum MultiTextInputSize {
+    SMALL = "SMALL",
+    MEDIUM = "MEDIUM",
+    LARGE = "LARGE"
+}
+export declare enum MultiTextInputVariant {
+    PRIMARY = "PRIMARY",
+    SECONDARY = "SECONDARY",
+    TERTIARY = "TERTIARY"
+}
+export interface MultiTextInputProps {
+    value: string[];
+    onChange: (value: string[]) => void;
+    variant?: MultiTextInputVariant;
+    size?: MultiTextInputSize;
+    placeholder?: string;
+    label?: string;
+    error?: string;
+    isRequired?: boolean;
+    isDisabled?: boolean;
+    autoFocus?: boolean;
+    width?: number | string;
+    fillWidth?: boolean;
+    separator?: string;
+}
+declare const MultiTextInput: import("react").ForwardRefExoticComponent<MultiTextInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export default MultiTextInput;