@parallelworks/ui 0.40.1 → 0.42.0

package/dist/components/Dropdown.js

@@ -1,355 +0,0 @@
-import { useStrings } from "./Provider.js";
-import { FaCaretDown } from "../icons/fa/FaCaretDown.js";
-import { truncationTooltipProps } from "./Tooltip.js";
-import { DropdownCaret, flattenDisplayOptions, isCategory, toggleSetMember } from "./dropdownUtils.js";
-import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions } from "@headlessui/react";
-import cx from "classnames";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { createPortal } from "react-dom";
-import deepEqual from "fast-deep-equal";
-import { usePopper } from "react-popper";
-//#region src/components/Dropdown.tsx
-var defaultCollapsedLabel = (count) => `${count} more`;
-function isNamedValue(value) {
-	return typeof value === "object" && value !== null && "name" in value && typeof value.name === "string";
-}
-var checkEquals = (val, opt) => {
-	if (typeof val === "object" && !Array.isArray(val)) return deepEqual(val, opt);
-	return val === opt;
-};
-function getOptionFromValue(value, options) {
-	if (value === void 0) return {
-		label: "",
-		value: ""
-	};
-	const found = options.find((option) => {
-		if (typeof option === "string") return checkEquals(value, option);
-		else if (isCategory(option)) return option.options.find((opt) => checkEquals(value, opt.value));
-		else return checkEquals(value, option.value);
-	});
-	if (found) {
-		if (typeof found === "string") return {
-			label: found,
-			value: found
-		};
-		else if (isCategory(found)) return found.options.find((opt) => checkEquals(value, opt.value)) || {
-			label: JSON.stringify(value),
-			value
-		};
-		else return found;
-	}
-	const isNamedObject = isNamedValue(value);
-	const fallbackLabel = typeof value === "string" ? value : isNamedObject ? value.name : JSON.stringify(value);
-	return {
-		label: fallbackLabel,
-		value: isNamedObject ? value : fallbackLabel
-	};
-}
-function Dropdown(props) {
-	const { onChange, value, options, ...others } = props;
-	const val = useMemo(() => {
-		return getOptionFromValue(value, options);
-	}, [value, options]);
-	const wrapperOnchange = (value) => {
-		onChange(value?.value);
-	};
-	const transformedOptions = useMemo(() => {
-		return options.map((item) => {
-			if (isCategory(item)) return {
-				...item,
-				options: item.options.map((opt) => {
-					if (typeof opt === "string") return {
-						label: opt,
-						value: opt
-					};
-					return opt;
-				})
-			};
-			else if (typeof item === "string") return {
-				label: item,
-				value: item
-			};
-			return item;
-		});
-	}, [options]);
-	return /* @__PURE__ */ jsx(DropdownHelper, {
-		value: val,
-		onChange: wrapperOnchange,
-		options: transformedOptions,
-		...others
-	});
-}
-function ActiveWatcher({ active, onChange }) {
-	const prev = useRef(null);
-	useEffect(() => {
-		if (prev.current !== active) {
-			onChange?.(active?.value);
-			prev.current = active;
-		}
-	}, [active, onChange]);
-	return null;
-}
-function OptionContent({ label, description, icon }) {
-	return /* @__PURE__ */ jsxs("span", {
-		className: cx("flex gap-1.5", description ? "items-start min-w-0" : "items-center truncate"),
-		...truncationTooltipProps(label, (anchor) => anchor.lastElementChild),
-		children: [icon, description ? /* @__PURE__ */ jsxs("span", {
-			className: "flex flex-col min-w-0",
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "truncate",
-				children: label
-			}), /* @__PURE__ */ jsx("span", {
-				className: "text-(--theme-muted-text-color) text-xs leading-snug",
-				children: description
-			})]
-		}) : /* @__PURE__ */ jsx("span", {
-			className: "truncate",
-			children: label
-		})]
-	});
-}
-function ToggleOption({ option, category, expanded, onToggle, ...virtualRowProps }) {
-	return /* @__PURE__ */ jsx(ComboboxOption, {
-		...virtualRowProps,
-		"data-testid": "combobox-toggle",
-		value: option,
-		className: "w-full h-10 flex items-center pl-3",
-		children: /* @__PURE__ */ jsxs("button", {
-			type: "button",
-			"aria-expanded": expanded,
-			className: "flex items-center gap-1.5 cursor-pointer text-(--theme-muted-text-color) hover:text-(--theme-app)",
-			onMouseDown: (e) => e.preventDefault(),
-			onClick: (e) => {
-				e.preventDefault();
-				e.stopPropagation();
-				onToggle(category);
-			},
-			children: [/* @__PURE__ */ jsx(FaCaretDown, { className: cx("w-3 h-3", !expanded && "-rotate-90") }), option.label]
-		})
-	});
-}
-function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassName = "w-full", options = [], onChange, onActiveChange, value, id, ariaLabel, "aria-describedby": describedBy, required, disabled = false, placeholder = "", loading = false, allowCustomValue = false, customValueLabel = "Use", collapsedLabel = defaultCollapsedLabel, portalEl, compact = false, showCaret = true }) {
-	const DEBOUNCE_MS = 500;
-	const t = useStrings().dropdown;
-	const [query, setQuery] = useState("");
-	const [selectedIconWidth, setSelectedIconWidth] = useState(0);
-	const selectedIconRef = useCallback((node) => {
-		setSelectedIconWidth(node?.offsetWidth ?? 0);
-	}, []);
-	const selectedIcon = query === "" ? value?.icon : void 0;
-	const [referenceElement, setReferenceElement] = useState(null);
-	const [popperElement, setPopperElement] = useState(null);
-	const [boundaryEl, setBoundaryEl] = useState(null);
-	useEffect(() => {
-		if (!referenceElement) {
-			setBoundaryEl(null);
-			return;
-		}
-		const ref = referenceElement;
-		const dialog = ref.closest("[role=\"dialog\"]");
-		if (!dialog) {
-			setBoundaryEl(null);
-			return;
-		}
-		let node = ref.parentElement;
-		while (node) {
-			const style = getComputedStyle(node);
-			if (/(auto|scroll|hidden)/.test(`${style.overflowX} ${style.overflowY}`)) {
-				setBoundaryEl(node);
-				return;
-			}
-			if (node === dialog) break;
-			node = node.parentElement;
-		}
-		setBoundaryEl(dialog);
-	}, [referenceElement]);
-	useEffect(() => {
-		if (!referenceElement) return;
-		if (describedBy) referenceElement.setAttribute("aria-describedby", describedBy);
-		else referenceElement.removeAttribute("aria-describedby");
-	}, [referenceElement, describedBy]);
-	const sameWidthModifier = useMemo(() => ({
-		name: "sameWidth",
-		enabled: true,
-		phase: "beforeWrite",
-		requires: ["computeStyles"],
-		fn: ({ state }) => {
-			const popperStyles = state.styles["popper"];
-			if (popperStyles) popperStyles.width = `${state.rects.reference.width}px`;
-		},
-		effect: ({ state }) => {
-			const { popper, reference } = state.elements;
-			if (reference instanceof HTMLElement) popper.style.width = `${reference.offsetWidth}px`;
-		}
-	}), []);
-	const popperModifiers = useMemo(() => boundaryEl ? [
-		sameWidthModifier,
-		{
-			name: "flip",
-			options: { boundary: boundaryEl }
-		},
-		{
-			name: "preventOverflow",
-			options: { boundary: boundaryEl }
-		}
-	] : [sameWidthModifier], [boundaryEl, sameWidthModifier]);
-	const { styles, attributes } = usePopper(referenceElement, popperElement, {
-		strategy: "fixed",
-		modifiers: popperModifiers
-	});
-	const debounceRef = useRef(null);
-	const typedRef = useRef("");
-	const buttonRef = useRef(null);
-	const [expandedCategories, setExpandedCategories] = useState(/* @__PURE__ */ new Set());
-	const selectedCategory = useMemo(() => options.find((o) => isCategory(o) && o.options.some((opt) => checkEquals(value.value, opt.value)))?.category, [options, value]);
-	const lastAutoExpandedValue = useRef(void 0);
-	useEffect(() => {
-		if (!selectedCategory || checkEquals(lastAutoExpandedValue.current, value.value)) return;
-		lastAutoExpandedValue.current = value.value;
-		setExpandedCategories((prev) => prev.size === 1 && prev.has(selectedCategory) ? prev : /* @__PURE__ */ new Set([selectedCategory]));
-	}, [selectedCategory, value]);
-	const toggleCategory = (category) => setExpandedCategories((prev) => toggleSetMember(prev, category));
-	const flushCustomValue = useCallback((val) => {
-		onChange({
-			label: val,
-			value: val
-		});
-	}, [onChange]);
-	const onQueryChange = (val) => {
-		setQuery(val);
-		if (allowCustomValue) {
-			typedRef.current = val;
-			if (debounceRef.current) clearTimeout(debounceRef.current);
-			debounceRef.current = setTimeout(() => {
-				flushCustomValue(val);
-				debounceRef.current = null;
-			}, DEBOUNCE_MS);
-		}
-	};
-	const onInputBlur = () => {
-		if (allowCustomValue && debounceRef.current) {
-			clearTimeout(debounceRef.current);
-			debounceRef.current = null;
-			flushCustomValue(typedRef.current);
-		}
-		setQuery("");
-	};
-	const onComboboxChange = (val) => {
-		if (debounceRef.current) {
-			clearTimeout(debounceRef.current);
-			debounceRef.current = null;
-		}
-		onChange(val);
-	};
-	const flattenedOptions = useMemo(() => flattenDisplayOptions({
-		options,
-		query,
-		expandedCategories,
-		collapsedLabel,
-		selectedValue: value?.value,
-		allowCustomValue,
-		customValueLabel
-	}), [
-		options,
-		query,
-		expandedCategories,
-		collapsedLabel,
-		value,
-		allowCustomValue,
-		customValueLabel
-	]);
-	const comboOptions = /* @__PURE__ */ jsx(ComboboxOptions, {
-		modal: false,
-		ref: setPopperElement,
-		style: styles["popper"],
-		className: cx("bg-(--theme-input-bg) border-(--theme-border) text-(--theme-app) max-h-60! empty:invisible border overflow-auto rounded-md shadow-lg focus:outline-hidden z-9999 data-[popper-reference-hidden=true]:invisible data-[popper-reference-hidden=true]:pointer-events-none", compact ? "text-xs" : "sm:text-sm"),
-		...attributes["popper"],
-		children: ({ option }) => {
-			const optionLabel = typeof option === "string" ? option : option.label;
-			const optionDescription = typeof option !== "string" ? option.description : void 0;
-			const isCategoryRow = typeof option !== "string" && Boolean(option.category);
-			const toggleTarget = typeof option !== "string" ? option.toggle : void 0;
-			const isPinned = typeof option !== "string" && Boolean(option.pinned);
-			if (toggleTarget !== void 0) return /* @__PURE__ */ jsx(ToggleOption, {
-				option,
-				category: toggleTarget,
-				expanded: expandedCategories.has(toggleTarget),
-				onToggle: toggleCategory
-			});
-			return /* @__PURE__ */ jsx(ComboboxOption, {
-				"data-testid": "combobox-option",
-				value: option,
-				className: cx("w-full group relative flex", optionDescription ? "min-h-10 py-2" : compact ? "h-8" : "h-10", isCategoryRow ? "text-[14px] font-bold pl-1 items-center" : "data-disabled:text-(--theme-muted-text-color) data-disabled:bg-(--theme-muted-panel-bg) data-disabled:cursor-not-allowed cursor-pointer items-center pr-9 pl-3 leading-5 data-focus:bg-(--theme-muted-panel-bg) data-focus:text-(--theme-app) data-focus:outline-hidden", "data-selected:border-l-2 data-selected:border-(--theme-link) data-selected:bg-(--theme-muted-panel-bg) data-selected:text-(--theme-app)", isPinned && "border-t border-(--theme-border) font-medium"),
-				children: /* @__PURE__ */ jsx(OptionContent, {
-					label: optionLabel,
-					description: optionDescription,
-					icon: typeof option !== "string" && option.icon
-				})
-			});
-		}
-	});
-	return /* @__PURE__ */ jsx("div", {
-		className: cx("relative rounded-md flex items-center", wrapperClassName),
-		children: /* @__PURE__ */ jsx(Combobox, {
-			"data-testid": "combobox",
-			className: cx("relative w-full", className),
-			as: "div",
-			by: checkEquals,
-			value,
-			onChange: onComboboxChange,
-			onClose: () => {
-				setQuery("");
-				setExpandedCategories(new Set(selectedCategory ? [selectedCategory] : []));
-			},
-			immediate: true,
-			virtual: {
-				options: flattenedOptions,
-				disabled: (option) => Boolean(option.disabled)
-			},
-			disabled,
-			children: ({ activeOption, open }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
-				onActiveChange && /* @__PURE__ */ jsx(ActiveWatcher, {
-					active: activeOption,
-					onChange: onActiveChange
-				}),
-				selectedIcon && /* @__PURE__ */ jsx("span", {
-					ref: selectedIconRef,
-					className: "pointer-events-none absolute inset-y-0 left-3 z-10 flex items-center",
-					children: selectedIcon
-				}, value.label),
-				/* @__PURE__ */ jsx(ComboboxInput, {
-					id,
-					"aria-label": ariaLabel || void 0,
-					"aria-describedby": describedBy,
-					"aria-required": required || void 0,
-					placeholder: loading ? "Loading..." : placeholder,
-					onBlur: onInputBlur,
-					ref: setReferenceElement,
-					onClick: () => {
-						if (!open) buttonRef.current?.click();
-					},
-					style: selectedIcon && selectedIconWidth > 0 ? { paddingLeft: selectedIconWidth + 18 } : void 0,
-					className: cx("placeholder:text-xs bg-(--theme-input-bg) border-(--theme-border) text-(--theme-app) focus:border-(--theme-element) focus:outline-none focus:ring-1 focus:ring-(--theme-element) w-full h-full text-ellipsis pr-8", "disabled:bg-(--theme-input-disabled-bg) disabled:text-(--theme-input-disabled-text) disabled:cursor-not-allowed", textBoxClassName),
-					autoComplete: "off",
-					onChange: (event) => onQueryChange(event.target.value),
-					displayValue: (opt) => {
-						return opt?.label?.replaceAll("\"", "") || query || "";
-					},
-					disabled
-				}),
-				/* @__PURE__ */ jsx(ComboboxButton, {
-					ref: buttonRef,
-					"aria-label": t.showOptions,
-					className: cx("absolute inset-y-0 right-0 flex items-center pr-3 disabled:cursor-not-allowed", !showCaret && "hidden"),
-					"data-testid": "combobox-button",
-					disabled,
-					children: /* @__PURE__ */ jsx(DropdownCaret, {})
-				}),
-				typeof document !== "undefined" && createPortal(comboOptions, portalEl ?? document.querySelector(".ds-root") ?? document.body)
-			] })
-		})
-	});
-}
-//#endregion
-export { Dropdown as default };

package/dist/components/Listbox.d.ts

@@ -1,21 +0,0 @@
-interface ICustomListboxProps<T> {
-    /** Only used visually to inform what you're selecting */
-    type: string;
-    options: {
-        label: string;
-        secondaryLabel?: string;
-        icon?: React.ReactNode;
-        value: T;
-        selected: boolean;
-    }[];
-    closeOnSelect?: boolean;
-    allowSearch?: boolean;
-    handleOptionSelected: (value: T) => void;
-    className?: string;
-    invalid?: boolean;
-    required?: boolean;
-    id?: string | undefined;
-    'aria-describedby'?: string | undefined;
-}
-export default function CustomListbox<T>({ options, handleOptionSelected, type, allowSearch, closeOnSelect, className, invalid, required, id, 'aria-describedby': describedBy, }: ICustomListboxProps<T>): import("react").JSX.Element;
-export {};

package/dist/components/Listbox.js

@@ -1,119 +0,0 @@
-import { useStrings } from "./Provider.js";
-import { FaAngleDown } from "../icons/fa/FaAngleDown.js";
-import { keyedByContent } from "./keys.js";
-import { focusOnMount } from "./focus.js";
-import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } from "@headlessui/react";
-import cx from "classnames";
-import { useEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/Listbox.tsx
-function CustomListbox({ options = [], handleOptionSelected, type, allowSearch = false, closeOnSelect = true, className = "", invalid = false, required = false, id, "aria-describedby": describedBy }) {
-	const { dropdown: strings } = useStrings();
-	const [filter, setFilter] = useState("");
-	const [controlledOpen, setControlledOpen] = useState(false);
-	const optionsToShow = options.filter((option) => !option.selected && option.label && option.label.toLowerCase().includes(filter.toLowerCase()));
-	const wrapperRef = useRef(null);
-	useEffect(() => {
-		function handleClickOutside(event) {
-			const wrapper = wrapperRef.current;
-			if (wrapper && event.target instanceof Node && !wrapper.contains(event.target)) {
-				setControlledOpen(false);
-				setFilter("");
-			}
-		}
-		document.addEventListener("mousedown", handleClickOutside);
-		return () => document.removeEventListener("mousedown", handleClickOutside);
-	}, []);
-	const optionsElement = /* @__PURE__ */ jsxs(ListboxOptions, {
-		modal: false,
-		static: true,
-		className: "absolute w-full py-1 z-50 theme-input rounded-md",
-		children: [allowSearch && /* @__PURE__ */ jsx("div", {
-			className: "pl-2 pr-4 mb-1",
-			children: /* @__PURE__ */ jsx("input", {
-				autoComplete: "off",
-				type: "search",
-				ref: focusOnMount,
-				onChange: (e) => setFilter(e.target.value),
-				value: filter,
-				className: "w-full p-1 theme-input",
-				onKeyDown: (e) => {
-					if (![
-						"ArrowUp",
-						"ArrowDown",
-						"Enter",
-						"Home",
-						"End",
-						"Escape"
-					].includes(e.key)) e.stopPropagation();
-				}
-			})
-		}), /* @__PURE__ */ jsx("div", {
-			className: "overflow-auto max-h-60 theme-panel",
-			children: optionsToShow.length > 0 ? keyedByContent(optionsToShow, (o) => String(o.value)).map(({ key, item: option }) => /* @__PURE__ */ jsx(ListboxOption, {
-				className: "relative hover:theme-hover select-none pl-2 pr-4",
-				value: option.value,
-				children: /* @__PURE__ */ jsx("div", {
-					className: "w-full flex flex-row",
-					children: /* @__PURE__ */ jsxs("div", {
-						className: "w-3/4 py-2 flex items-center",
-						children: [
-							/* @__PURE__ */ jsx("div", {
-								className: "w-4 h-6 btn btn-info text-xl line-height-0 mr-2",
-								children: "+"
-							}),
-							option.icon && /* @__PURE__ */ jsx("span", {
-								className: "mr-2 flex items-center",
-								children: option.icon
-							}),
-							/* @__PURE__ */ jsx("span", {
-								className: "mr-2",
-								children: option.label
-							}),
-							/* @__PURE__ */ jsx("span", {
-								className: "italic",
-								children: option.secondaryLabel
-							})
-						]
-					})
-				})
-			}, key)) : /* @__PURE__ */ jsx("div", {
-				className: "w-full flex flex-row",
-				children: /* @__PURE__ */ jsx("div", {
-					className: "w-3/4 py-2 pl-2 capitalize flex items-center",
-					children: filter === "" ? `All ${type} Added` : `No ${type} Found`
-				})
-			})
-		})]
-	});
-	return /* @__PURE__ */ jsxs(Listbox, {
-		as: "div",
-		className: cx("relative mt-1 theme-input border theme-border rounded-md", className),
-		ref: wrapperRef,
-		onChange: handleOptionSelected,
-		children: [/* @__PURE__ */ jsxs(ListboxButton, {
-			id,
-			"aria-describedby": describedBy,
-			"aria-required": required || void 0,
-			onClick: () => setControlledOpen((prev) => !prev),
-			className: cx("relative w-full py-2 pl-3 text-left", invalid && "border-red-600 focus:border-red-600 focus:ring-red-500"),
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "block truncate",
-				children: strings.select(type)
-			}), /* @__PURE__ */ jsx("span", {
-				className: "pointer-events-none absolute inset-y-0 right-0 flex items-center justify-items-center",
-				children: /* @__PURE__ */ jsx(FaAngleDown, {
-					className: "h-5 w-8",
-					"aria-hidden": "true"
-				})
-			})]
-		}), closeOnSelect ? /* @__PURE__ */ jsx(Transition, {
-			leave: "transition ease-in duration-100",
-			leaveFrom: "opacity-100",
-			leaveTo: "opacity-0",
-			children: optionsElement
-		}) : controlledOpen && optionsElement]
-	});
-}
-//#endregion
-export { CustomListbox as default };

package/dist/components/MultiSelect.d.ts

@@ -1,22 +0,0 @@
-import { type ICategory, type IOptions } from './dropdownUtils.js';
-type MultiSelectDropdownProps<T = string> = {
-    options: (ICategory<T> | IOptions<T> | string)[];
-    value: T[];
-    onChange: (next: T[]) => void;
-    id?: string | undefined;
-    'aria-labelledby'?: string | undefined;
-    'aria-describedby'?: string | undefined;
-    required?: boolean;
-    className?: string;
-    wrapperClassName?: string;
-    textBoxClassName?: string | undefined;
-    disabled?: boolean;
-    placeholder?: string | undefined;
-    loading?: boolean;
-    searchable?: boolean;
-    maxTagCount?: number;
-    /** Custom comparator for object values. Defaults to strict equality. */
-    compareBy?: ((a: T, b: T) => boolean) | undefined;
-};
-export default function MultiSelectDropdown<T = string>({ options, value, onChange, id, 'aria-labelledby': labelledBy, 'aria-describedby': describedBy, required, className, wrapperClassName, textBoxClassName, disabled, placeholder, loading, searchable, maxTagCount, compareBy, }: MultiSelectDropdownProps<T>): import("react").JSX.Element;
-export {};

package/dist/components/MultiSelect.js

@@ -1,168 +0,0 @@
-import { useStrings } from "./Provider.js";
-import { keyedByContent } from "./keys.js";
-import { DropdownCaret, filterOption, flattenOptions, isCategory, isOption } from "./dropdownUtils.js";
-import { focusOnMount } from "./focus.js";
-import { Combobox, ComboboxButton, ComboboxOption, ComboboxOptions } from "@headlessui/react";
-import cx from "classnames";
-import { useMemo, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { usePopper } from "react-popper";
-//#region src/components/MultiSelect.tsx
-var strictEqual = (a, b) => a === b;
-function MultiSelectDropdown({ options, value, onChange, id, "aria-labelledby": labelledBy, "aria-describedby": describedBy, required, className, wrapperClassName = "w-full", textBoxClassName, disabled = false, placeholder, loading = false, searchable = true, maxTagCount = 2, compareBy }) {
-	const strings = useStrings();
-	const [query, setQuery] = useState("");
-	const [referenceEl, setReferenceEl] = useState(null);
-	const [popperEl, setPopperEl] = useState(null);
-	const { styles, attributes } = usePopper(referenceEl, popperEl, {
-		placement: "bottom-start",
-		modifiers: [{
-			name: "offset",
-			options: { offset: [0, 4] }
-		}]
-	});
-	const allOptions = useMemo(() => flattenOptions(options), [options]);
-	const compare = compareBy ?? strictEqual;
-	const selectedOptions = useMemo(() => {
-		const result = [];
-		for (const val of value) {
-			const found = allOptions.find((opt) => isOption(opt) && compare(opt.value, val));
-			if (found) result.push(found);
-		}
-		return result;
-	}, [
-		value,
-		allOptions,
-		compare
-	]);
-	const filteredOptions = useMemo(() => {
-		if (!searchable || query.trim() === "") return allOptions;
-		const result = [];
-		for (const opt of allOptions) if (isCategory(opt)) {
-			const matchedChildren = opt.options.filter((o) => filterOption(o, query));
-			if (matchedChildren.length > 0) result.push(opt, ...matchedChildren);
-		} else if (isOption(opt) && filterOption(opt, query)) result.push(opt);
-		return result;
-	}, [
-		allOptions,
-		query,
-		searchable
-	]);
-	const display = useMemo(() => {
-		const shown = selectedOptions.slice(0, maxTagCount);
-		return {
-			label: shown.map((o) => o.label).join(", "),
-			overflow: selectedOptions.length - shown.length
-		};
-	}, [selectedOptions, maxTagCount]);
-	const isDisabled = disabled || loading;
-	const isEmpty = filteredOptions.length === 0;
-	return /* @__PURE__ */ jsx(Combobox, {
-		multiple: true,
-		value: Array.isArray(value) ? value : [],
-		onChange,
-		disabled: isDisabled,
-		onClose: () => setQuery(""),
-		by: compare,
-		children: ({ open }) => /* @__PURE__ */ jsxs("div", {
-			ref: setReferenceEl,
-			className: cx("relative", wrapperClassName),
-			children: [
-				/* @__PURE__ */ jsx(ComboboxButton, {
-					as: "div",
-					id,
-					"aria-labelledby": labelledBy,
-					"aria-describedby": describedBy,
-					"aria-required": required || void 0,
-					className: cx("theme-input flex items-center cursor-pointer rounded border text-[14px] w-full px-2 pr-8 py-1 min-h-[30px] overflow-hidden", isDisabled && "opacity-50 cursor-not-allowed", textBoxClassName, className),
-					children: loading ? /* @__PURE__ */ jsx("span", {
-						className: "theme-muted-text",
-						children: strings.loading
-					}) : selectedOptions.length > 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
-						className: "min-w-0 truncate",
-						children: display.label
-					}), display.overflow > 0 && /* @__PURE__ */ jsxs("span", {
-						className: "ml-1 shrink-0 theme-muted-text",
-						children: ["+", display.overflow]
-					})] }) : /* @__PURE__ */ jsx("span", {
-						className: "theme-muted-text truncate",
-						children: placeholder
-					})
-				}),
-				/* @__PURE__ */ jsx(DropdownCaret, {}),
-				open && /* @__PURE__ */ jsxs(ComboboxOptions, {
-					modal: false,
-					ref: setPopperEl,
-					static: true,
-					"data-testid": "msd-list",
-					style: styles["popper"],
-					...attributes["popper"],
-					className: "theme-panel z-10 max-h-60 w-full overflow-auto rounded-md shadow-lg focus:outline-none",
-					children: [searchable && /* @__PURE__ */ jsx("div", {
-						className: "sticky top-0 theme-panel p-2 border-b z-10",
-						children: /* @__PURE__ */ jsx("input", {
-							placeholder,
-							"data-1p-ignore": true,
-							autoComplete: "off",
-							type: "text",
-							className: "theme-input w-full",
-							value: query,
-							onChange: (e) => setQuery(e.target.value),
-							onKeyDown: (e) => e.stopPropagation(),
-							ref: focusOnMount
-						})
-					}), /* @__PURE__ */ jsx("div", {
-						className: "py-1",
-						children: isEmpty ? /* @__PURE__ */ jsx("div", {
-							className: "px-4 py-2 text-sm theme-muted-text",
-							children: strings.dropdown.noOptionsFound
-						}) : keyedByContent(filteredOptions, (o) => isCategory(o) ? `category-${o.category ?? "uncat"}` : `option-${String(o.value)}`).map(({ key, item: opt }) => {
-							if (isCategory(opt)) return /* @__PURE__ */ jsx("li", {
-								role: "presentation",
-								className: "px-4 py-2 text-sm font-bold theme-muted-text",
-								children: opt.category
-							}, key);
-							const option = opt;
-							return /* @__PURE__ */ jsx(ComboboxOption, {
-								value: option.value,
-								disabled: option.disabled ?? false,
-								"data-testid": `msd-option-${String(option.value)}`,
-								className: ({ focus }) => cx("relative cursor-pointer select-none py-2 pl-10 pr-4 text-sm", focus && "theme-hover", option.disabled && "cursor-not-allowed opacity-50"),
-								children: ({ selected }) => /* @__PURE__ */ jsxs("div", {
-									className: "flex items-center",
-									children: [
-										/* @__PURE__ */ jsx("span", {
-											className: "absolute inset-y-0 left-0 flex items-center pl-3",
-											children: /* @__PURE__ */ jsx("input", {
-												autoComplete: "off",
-												type: "checkbox",
-												checked: selected,
-												readOnly: true,
-												tabIndex: -1,
-												className: "h-4 w-4 cursor-pointer",
-												"aria-hidden": "true"
-											})
-										}),
-										option.icon && /* @__PURE__ */ jsx("span", {
-											className: "mr-2 flex items-center",
-											children: option.icon
-										}),
-										/* @__PURE__ */ jsx("div", {
-											className: "flex flex-col",
-											children: /* @__PURE__ */ jsx("span", {
-												className: "block truncate",
-												children: option.label
-											})
-										})
-									]
-								})
-							}, key);
-						})
-					})]
-				})
-			]
-		})
-	});
-}
-//#endregion
-export { MultiSelectDropdown as default };