@edo-w/flatline-solid 0.2.1 → 0.3.0

package/dist/combobox/index.js

@@ -0,0 +1,894 @@
+import './index.css';
+import { t as clsx } from "../lite-CiFvU804.js";
+import { n as CheckIcon, t as ChevronDownIcon } from "../icons-CH4ghH8L.js";
+import { createComponent, delegateEvents, insert, memo, mergeProps, spread, template, use } from "solid-js/web";
+import { For, Show, children, createContext, createEffect, createMemo, createSignal, createUniqueId, mergeProps as mergeProps$1, onCleanup, onMount, splitProps, useContext } from "solid-js";
+//#region src/components/combobox/class.ts
+const comboboxClass = {
+	root: "fl-combobox",
+	control: "fl-combobox_control",
+	input: "fl-combobox_input",
+	trigger: "fl-combobox_trigger",
+	icon: "fl-combobox_icon",
+	content: "fl-combobox_content",
+	listbox: "fl-combobox_listbox",
+	item: "fl-combobox_item",
+	itemLabel: "fl-combobox_item-label",
+	itemIndicator: "fl-combobox_item-indicator",
+	group: "fl-combobox_group"
+};
+//#endregion
+//#region src/components/combobox/context.ts
+const ComboboxContext = createContext();
+const ComboboxItemContext = createContext();
+function useComboboxContext() {
+	const context = useContext(ComboboxContext);
+	if (!context) throw new Error("Combobox components must be used within Combobox.");
+	return context;
+}
+function useComboboxItemContext() {
+	const context = useContext(ComboboxItemContext);
+	if (!context) throw new Error("Combobox item parts must be used within Combobox.Item.");
+	return context;
+}
+//#endregion
+//#region src/components/combobox/combobox-content.tsx
+var _tmpl$$11 = /* @__PURE__ */ template(`<div>`);
+function ComboboxContent(props) {
+	const context = useComboboxContext();
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	const rootClass = () => clsx(comboboxClass.content, local.class);
+	return createComponent(Show, {
+		get when() {
+			return context.isOpen();
+		},
+		get children() {
+			var _el$ = _tmpl$$11();
+			spread(_el$, mergeProps({ get ["class"]() {
+				return rootClass();
+			} }, rest), false, true);
+			insert(_el$, () => local.children);
+			return _el$;
+		}
+	});
+}
+//#endregion
+//#region src/lib/reflect.ts
+function isObjectRecord(value) {
+	return typeof value === "object" && value !== null;
+}
+//#endregion
+//#region src/components/combobox/util.ts
+function defaultTextValue(value) {
+	if (typeof value === "string" || typeof value === "number") return String(value);
+	if (isObjectRecord(value)) {
+		if (typeof value.label === "string") return value.label;
+		if (typeof value.textValue === "string") return value.textValue;
+	}
+	return "";
+}
+function resolveAccessor(value, accessor, fallback) {
+	if (accessor === void 0) return fallback(value);
+	if (typeof accessor === "function") return accessor(value);
+	if (isObjectRecord(value)) return value[accessor];
+	return fallback(value);
+}
+function resolveGroupChildren(value, accessor) {
+	if (accessor === void 0) return;
+	if (typeof accessor === "function") return accessor(value);
+	if (isObjectRecord(value)) {
+		const children = value[accessor];
+		if (Array.isArray(children)) return children;
+	}
+}
+function createContainsFilter() {
+	return (option, inputValue) => {
+		const normalizedOption = defaultTextValue(option).toLowerCase();
+		const normalizedInput = inputValue.trim().toLowerCase();
+		if (normalizedInput === "") return true;
+		return normalizedOption.includes(normalizedInput);
+	};
+}
+function callEventHandler(handler, event) {
+	if (typeof handler === "function") handler(event);
+}
+//#endregion
+//#region src/components/combobox/combobox-control.tsx
+var _tmpl$$10 = /* @__PURE__ */ template(`<div>`);
+function ComboboxControl(props) {
+	const context = useComboboxContext();
+	const [local, rest] = splitProps(props, ["class", "onMouseDown"]);
+	const rootClass = () => clsx(comboboxClass.control, local.class);
+	const handleMouseDown = (event) => {
+		callEventHandler(local.onMouseDown, event);
+		if (context.disabled() || context.readOnly()) return;
+		context.openPopup("preserve");
+	};
+	return (() => {
+		var _el$ = _tmpl$$10();
+		_el$.$$mousedown = handleMouseDown;
+		spread(_el$, mergeProps({
+			get ["class"]() {
+				return rootClass();
+			},
+			get ["data-disabled"]() {
+				return context.disabled() ? "" : void 0;
+			}
+		}, rest), false, false);
+		return _el$;
+	})();
+}
+delegateEvents(["mousedown"]);
+//#endregion
+//#region src/components/combobox/combobox-group.tsx
+var _tmpl$$9 = /* @__PURE__ */ template(`<li role=presentation><hr aria-hidden=true><span>`);
+function ComboboxGroup(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"group",
+		"children"
+	]);
+	const rootClass = () => clsx(comboboxClass.group, local.class);
+	return (() => {
+		var _el$ = _tmpl$$9(), _el$3 = _el$.firstChild.nextSibling;
+		spread(_el$, mergeProps({ get ["class"]() {
+			return rootClass();
+		} }, rest), false, true);
+		insert(_el$3, () => local.children ?? local.group?.textValue);
+		return _el$;
+	})();
+}
+//#endregion
+//#region src/components/combobox/combobox-hidden-select.tsx
+var _tmpl$$8 = /* @__PURE__ */ template(`<input type=hidden>`);
+function ComboboxHiddenSelect(props) {
+	const context = useComboboxContext();
+	const [local, rest] = splitProps(props, ["name", "value"]);
+	return (() => {
+		var _el$ = _tmpl$$8();
+		spread(_el$, mergeProps({
+			get name() {
+				return local.name ?? context.name();
+			},
+			get value() {
+				return local.value ?? context.selectedItem()?.value ?? "";
+			}
+		}, rest), false, false);
+		return _el$;
+	})();
+}
+//#endregion
+//#region src/components/combobox/combobox-icon.tsx
+var _tmpl$$7 = /* @__PURE__ */ template(`<span>`);
+function ComboboxIcon(props) {
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	const rootClass = () => clsx(comboboxClass.icon, local.class);
+	return (() => {
+		var _el$ = _tmpl$$7();
+		spread(_el$, mergeProps({ get ["class"]() {
+			return rootClass();
+		} }, rest), false, true);
+		insert(_el$, () => local.children ?? createComponent(ChevronDownIcon, {}));
+		return _el$;
+	})();
+}
+//#endregion
+//#region src/components/combobox/combobox-input.tsx
+var _tmpl$$6 = /* @__PURE__ */ template(`<input type=text role=combobox aria-autocomplete=list>`);
+function ComboboxInput(props) {
+	const context = useComboboxContext();
+	const [local, rest] = splitProps(props, [
+		"class",
+		"placeholder",
+		"onInput",
+		"onFocus",
+		"onKeyDown"
+	]);
+	const rootClass = () => clsx(comboboxClass.input, local.class);
+	const handleInput = (event) => {
+		callEventHandler(local.onInput, event);
+		if (!(event.currentTarget instanceof HTMLInputElement)) return;
+		const input = event.currentTarget;
+		const nextValue = input.value;
+		const selectionStart = input.selectionStart;
+		const selectionEnd = input.selectionEnd;
+		context.setInputValue(nextValue);
+		queueMicrotask(() => {
+			if (document.activeElement !== input) return;
+			if (input.value !== nextValue || selectionStart === null || selectionEnd === null) return;
+			input.setSelectionRange(selectionStart, selectionEnd);
+		});
+	};
+	const handleFocus = (event) => {
+		callEventHandler(local.onFocus, event);
+		if (context.disabled() || context.readOnly()) return;
+	};
+	const handleKeyDown = (event) => {
+		callEventHandler(local.onKeyDown, event);
+		if (context.disabled() || context.readOnly()) return;
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			if (context.isOpen()) {
+				context.highlightNext();
+				return;
+			}
+			if (context.visibleItems().length === 0) {
+				context.openAllOptions("first");
+				return;
+			}
+			context.openPopup("preserve");
+			return;
+		}
+		if (event.key === "ArrowUp") {
+			event.preventDefault();
+			if (context.isOpen()) {
+				context.highlightPrevious();
+				return;
+			}
+			if (context.visibleItems().length === 0) {
+				context.openAllOptions("last");
+				return;
+			}
+			context.openPopup("preserve");
+			return;
+		}
+		if (event.key === "Enter" && context.isOpen()) {
+			const activeItem = context.visibleItems().find((item) => item.key === context.highlightedKey());
+			if (activeItem) {
+				event.preventDefault();
+				context.selectItem(activeItem);
+			}
+			return;
+		}
+		if (event.key === "Escape") {
+			const input = event.currentTarget;
+			const selectionStart = input.selectionStart ?? 0;
+			const selectionEnd = input.selectionEnd ?? 0;
+			if (selectionStart !== selectionEnd) {
+				event.preventDefault();
+				input.setSelectionRange(selectionEnd, selectionEnd);
+				return;
+			}
+			if (context.selectedItem()) {
+				event.preventDefault();
+				context.clearSelectedItem();
+				return;
+			}
+			if (context.isOpen()) event.preventDefault();
+			context.closePopup(true);
+			return;
+		}
+		if (event.key === "Tab") context.closePopup(true);
+	};
+	return (() => {
+		var _el$ = _tmpl$$6();
+		_el$.$$keydown = handleKeyDown;
+		_el$.addEventListener("focus", handleFocus);
+		_el$.$$input = handleInput;
+		var _ref$ = context.setInputRef;
+		typeof _ref$ === "function" ? use(_ref$, _el$) : context.setInputRef = _el$;
+		spread(_el$, mergeProps({
+			get id() {
+				return `${context.rootId}-input`;
+			},
+			get ["class"]() {
+				return rootClass();
+			},
+			get value() {
+				return context.inputValue();
+			},
+			get placeholder() {
+				return local.placeholder ?? context.placeholder();
+			},
+			get disabled() {
+				return context.disabled();
+			},
+			get readOnly() {
+				return context.readOnly();
+			},
+			get required() {
+				return context.required();
+			},
+			get ["aria-expanded"]() {
+				return context.isOpen();
+			},
+			get ["aria-controls"]() {
+				return memo(() => !!context.isOpen())() ? `${context.rootId}-listbox` : void 0;
+			},
+			get ["aria-activedescendant"]() {
+				return memo(() => !!context.highlightedKey())() ? context.getItemId(context.highlightedKey()) : void 0;
+			}
+		}, rest), false, false);
+		return _el$;
+	})();
+}
+delegateEvents(["input", "keydown"]);
+//#endregion
+//#region src/components/combobox/combobox-item.tsx
+var _tmpl$$5 = /* @__PURE__ */ template(`<li role=option>`);
+function ComboboxItem(props) {
+	const context = useComboboxContext();
+	const [local, rest] = splitProps(props, [
+		"class",
+		"item",
+		"children",
+		"onMouseEnter",
+		"onMouseDown",
+		"onClick"
+	]);
+	const rootClass = () => clsx(comboboxClass.item, local.class);
+	const selected = () => context.selectedItem()?.key === local.item.key;
+	const highlighted = () => context.highlightedKey() === local.item.key;
+	let itemRef;
+	createEffect(() => {
+		if (!highlighted() || !itemRef || !context.shouldScrollHighlightedItem()) return;
+		itemRef.scrollIntoView({ block: "nearest" });
+	});
+	const handleMouseEnter = (event) => {
+		callEventHandler(local.onMouseEnter, event);
+		context.setHighlightedKey(local.item.key);
+	};
+	const handleMouseDown = (event) => {
+		callEventHandler(local.onMouseDown, event);
+		event.preventDefault();
+	};
+	const handleClick = (event) => {
+		callEventHandler(local.onClick, event);
+		context.selectItem(local.item);
+	};
+	return createComponent(ComboboxItemContext.Provider, {
+		get value() {
+			return {
+				item: local.item,
+				selected: selected(),
+				highlighted: highlighted()
+			};
+		},
+		get children() {
+			var _el$ = _tmpl$$5();
+			_el$.$$click = handleClick;
+			_el$.$$mousedown = handleMouseDown;
+			_el$.addEventListener("mouseenter", handleMouseEnter);
+			var _ref$ = itemRef;
+			typeof _ref$ === "function" ? use(_ref$, _el$) : itemRef = _el$;
+			spread(_el$, mergeProps({
+				get id() {
+					return context.getItemId(local.item.key);
+				},
+				get ["class"]() {
+					return rootClass();
+				},
+				get ["aria-selected"]() {
+					return selected();
+				},
+				get ["data-selected"]() {
+					return selected() ? "" : void 0;
+				},
+				get ["data-highlighted"]() {
+					return highlighted() ? "" : void 0;
+				},
+				get ["data-disabled"]() {
+					return local.item.disabled ? "" : void 0;
+				}
+			}, rest), false, true);
+			insert(_el$, () => local.children);
+			return _el$;
+		}
+	});
+}
+delegateEvents(["mousedown", "click"]);
+//#endregion
+//#region src/components/combobox/combobox-item-indicator.tsx
+var _tmpl$$4 = /* @__PURE__ */ template(`<div>`);
+function ComboboxItemIndicator(props) {
+	const item = useComboboxItemContext();
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	const rootClass = () => clsx(comboboxClass.itemIndicator, local.class);
+	return createComponent(Show, {
+		get when() {
+			return item.selected;
+		},
+		get children() {
+			var _el$ = _tmpl$$4();
+			spread(_el$, mergeProps({ get ["class"]() {
+				return rootClass();
+			} }, rest), false, true);
+			insert(_el$, () => local.children ?? createComponent(CheckIcon, {}));
+			return _el$;
+		}
+	});
+}
+//#endregion
+//#region src/components/combobox/combobox-item-label.tsx
+var _tmpl$$3 = /* @__PURE__ */ template(`<div>`);
+function ComboboxItemLabel(props) {
+	const item = useComboboxItemContext();
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	const rootClass = () => clsx(comboboxClass.itemLabel, local.class);
+	return (() => {
+		var _el$ = _tmpl$$3();
+		spread(_el$, mergeProps({ get ["class"]() {
+			return rootClass();
+		} }, rest), false, true);
+		insert(_el$, () => local.children ?? item.item.textValue);
+		return _el$;
+	})();
+}
+//#endregion
+//#region src/components/combobox/combobox-listbox.tsx
+var _tmpl$$2 = /* @__PURE__ */ template(`<ul role=listbox>`);
+function DefaultItemComponent(props) {
+	return createComponent(ComboboxItem, {
+		get item() {
+			return props.item;
+		},
+		get children() {
+			return [createComponent(ComboboxItemLabel, { get children() {
+				return props.item.textValue;
+			} }), createComponent(ComboboxItemIndicator, {})];
+		}
+	});
+}
+function DefaultGroupComponent(props) {
+	return createComponent(ComboboxGroup, { get children() {
+		return props.group.textValue;
+	} });
+}
+function ComboboxListbox(props) {
+	const context = useComboboxContext();
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	const rootClass = () => clsx(comboboxClass.listbox, local.class);
+	const ItemComponent = () => context.itemComponent ?? DefaultItemComponent;
+	const GroupComponent = () => context.groupComponent ?? DefaultGroupComponent;
+	return (() => {
+		var _el$ = _tmpl$$2();
+		spread(_el$, mergeProps({
+			get id() {
+				return `${context.rootId}-listbox`;
+			},
+			get ["class"]() {
+				return rootClass();
+			}
+		}, rest), false, true);
+		insert(_el$, () => local.children ?? createComponent(For, {
+			get each() {
+				return context.visibleGroups();
+			},
+			children: (group) => {
+				const GroupRenderer = GroupComponent();
+				const ItemRenderer = ItemComponent();
+				return [createComponent(Show, {
+					get when() {
+						return group.rawValue !== void 0;
+					},
+					get children() {
+						return createComponent(GroupRenderer, { group });
+					}
+				}), createComponent(For, {
+					get each() {
+						return group.items;
+					},
+					children: (item) => createComponent(ItemRenderer, { item })
+				})];
+			}
+		}));
+		return _el$;
+	})();
+}
+//#endregion
+//#region src/components/combobox/combobox-portal.tsx
+function ComboboxPortal(props) {
+	return memo(children(() => props.children));
+}
+//#endregion
+//#region src/components/combobox/combobox-trigger.tsx
+var _tmpl$$1 = /* @__PURE__ */ template(`<button type=button>`);
+function ComboboxTrigger(props) {
+	const context = useComboboxContext();
+	const [local, rest] = splitProps(mergeProps$1({ tabIndex: -1 }, props), [
+		"class",
+		"children",
+		"onMouseDown",
+		"onClick"
+	]);
+	const rootClass = () => clsx(comboboxClass.trigger, local.class);
+	const handleMouseDown = (event) => {
+		callEventHandler(local.onMouseDown, event);
+		event.preventDefault();
+	};
+	const handleClick = (event) => {
+		callEventHandler(local.onClick, event);
+		if (context.disabled() || context.readOnly()) return;
+		context.openPopup("preserve");
+		context.inputRef()?.focus();
+	};
+	return (() => {
+		var _el$ = _tmpl$$1();
+		_el$.$$click = handleClick;
+		_el$.$$mousedown = handleMouseDown;
+		spread(_el$, mergeProps({ get ["class"]() {
+			return rootClass();
+		} }, rest), false, true);
+		insert(_el$, () => local.children ?? createComponent(ComboboxIcon, {}));
+		return _el$;
+	})();
+}
+delegateEvents(["mousedown", "click"]);
+//#endregion
+//#region src/components/combobox/combobox-root.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+function ComboboxRoot(props) {
+	const [local, rest] = splitProps(mergeProps$1({ closeOnSelection: true }, props), [
+		"class",
+		"children",
+		"options",
+		"optionValue",
+		"optionTextValue",
+		"optionLabel",
+		"optionDisabled",
+		"optionGroupChildren",
+		"itemComponent",
+		"groupComponent",
+		"placeholder",
+		"value",
+		"defaultValue",
+		"inputValue",
+		"defaultInputValue",
+		"onChange",
+		"onInputChange",
+		"open",
+		"defaultOpen",
+		"onOpenChange",
+		"disabled",
+		"readOnly",
+		"required",
+		"name",
+		"closeOnSelection",
+		"onFocusOut"
+	]);
+	const resolvedChildren = children(() => local.children);
+	const rootId = createUniqueId();
+	const [rootRef, setRootRef] = createSignal();
+	const [inputRef, setInputRef] = createSignal();
+	const [internalValue, setInternalValue] = createSignal(local.defaultValue ?? null);
+	const [internalOpen, setInternalOpen] = createSignal(Boolean(local.defaultOpen));
+	const [internalInputValue, setInternalInputValue] = createSignal(local.defaultInputValue ?? "");
+	const [filterValue, setFilterValue] = createSignal("");
+	const [highlightedKey, setHighlightedKey] = createSignal(null);
+	const [shouldScrollHighlightedItem, setShouldScrollHighlightedItem] = createSignal(false);
+	const isControlledValue = () => local.value !== void 0;
+	const isControlledInputValue = () => local.inputValue !== void 0;
+	const isControlledOpen = () => local.open !== void 0;
+	const filter = createMemo(() => createContainsFilter());
+	const inputValue = createMemo(() => {
+		if (isControlledInputValue()) return local.inputValue ?? "";
+		return internalInputValue();
+	});
+	const normalizedGroups = createMemo(() => {
+		const groups = [];
+		const looseItems = [];
+		let itemIndex = 0;
+		for (let index = 0; index < local.options.length; index += 1) {
+			const entry = local.options[index];
+			const groupChildren = resolveGroupChildren(entry, local.optionGroupChildren);
+			if (groupChildren !== void 0) {
+				const groupItems = groupChildren.map((option) => {
+					const value = String(resolveAccessor(option, local.optionValue, defaultTextValue));
+					const label = resolveAccessor(option, local.optionLabel, defaultTextValue);
+					const textValue = resolveAccessor(option, local.optionTextValue, () => label);
+					const disabled = Boolean(resolveAccessor(option, local.optionDisabled, () => false));
+					const item = {
+						key: `${value}-${itemIndex}`,
+						value,
+						label,
+						textValue,
+						disabled,
+						rawValue: option
+					};
+					itemIndex += 1;
+					return item;
+				});
+				groups.push({
+					key: `group-${index}`,
+					textValue: defaultTextValue(entry),
+					rawValue: entry,
+					items: groupItems
+				});
+				continue;
+			}
+			const option = entry;
+			const value = String(resolveAccessor(option, local.optionValue, defaultTextValue));
+			const label = resolveAccessor(option, local.optionLabel, defaultTextValue);
+			const textValue = resolveAccessor(option, local.optionTextValue, () => label);
+			const disabled = Boolean(resolveAccessor(option, local.optionDisabled, () => false));
+			looseItems.push({
+				key: `${value}-${itemIndex}`,
+				value,
+				label,
+				textValue,
+				disabled,
+				rawValue: option
+			});
+			itemIndex += 1;
+		}
+		if (looseItems.length > 0) groups.unshift({
+			key: "group-root",
+			textValue: "",
+			items: looseItems
+		});
+		return groups;
+	});
+	const allItems = createMemo(() => normalizedGroups().flatMap((group) => group.items));
+	const selectedItem = createMemo(() => {
+		let selectedOption = internalValue();
+		if (isControlledValue()) selectedOption = local.value ?? null;
+		if (selectedOption == null) return null;
+		const selectedValue = String(resolveAccessor(selectedOption, local.optionValue, defaultTextValue));
+		return allItems().find((item) => item.value === selectedValue) ?? null;
+	});
+	const visibleGroups = createMemo(() => {
+		const currentInput = filterValue().trim();
+		return normalizedGroups().map((group) => ({
+			...group,
+			items: group.items.filter((item) => filter()(item.rawValue, currentInput))
+		})).filter((group) => group.items.length > 0);
+	});
+	const visibleItems = createMemo(() => visibleGroups().flatMap((group) => group.items));
+	const isOpen = createMemo(() => (isControlledOpen() ? Boolean(local.open) : internalOpen()) && visibleItems().length > 0);
+	const setOpen = (value) => {
+		if (!isControlledOpen()) setInternalOpen(value);
+		local.onOpenChange?.(value);
+	};
+	const setSelectedOption = (value) => {
+		if (!isControlledValue()) setInternalValue(() => value);
+		local.onChange?.(value);
+	};
+	const setDisplayedInputValue = (value, emitChange = false) => {
+		if (!isControlledInputValue()) setInternalInputValue(value);
+		if (emitChange) local.onInputChange?.(value);
+	};
+	const restoreInputFromSelection = () => {
+		setDisplayedInputValue(selectedItem()?.label ?? "", isControlledInputValue());
+		setFilterValue("");
+	};
+	const highlightByIndex = (index) => {
+		const items = visibleItems();
+		if (items.length === 0) {
+			setShouldScrollHighlightedItem(false);
+			setHighlightedKey(null);
+			return;
+		}
+		const boundedIndex = Math.min(Math.max(index, 0), items.length - 1);
+		setShouldScrollHighlightedItem(true);
+		setHighlightedKey(items[boundedIndex]?.key ?? null);
+	};
+	const highlightFirst = () => highlightByIndex(0);
+	const highlightLast = () => highlightByIndex(visibleItems().length - 1);
+	const highlightNext = () => {
+		const index = visibleItems().findIndex((item) => item.key === highlightedKey());
+		highlightByIndex(index >= 0 ? index + 1 : 0);
+	};
+	const highlightPrevious = () => {
+		const items = visibleItems();
+		const index = items.findIndex((item) => item.key === highlightedKey());
+		highlightByIndex(index >= 0 ? index - 1 : items.length - 1);
+	};
+	const openPopup = (strategy = "first") => {
+		if (local.disabled || local.readOnly || visibleItems().length === 0) return;
+		setOpen(true);
+		if (strategy === "last") {
+			highlightLast();
+			return;
+		}
+		if (strategy === "preserve") {
+			if (highlightedKey() !== null) return;
+			if (selectedItem()) {
+				setShouldScrollHighlightedItem(true);
+				setHighlightedKey(selectedItem().key);
+				return;
+			}
+		}
+		highlightFirst();
+	};
+	const openAllOptions = (strategy = "first") => {
+		if (local.disabled || local.readOnly || allItems().length === 0) return;
+		setFilterValue("");
+		setOpen(true);
+		if (strategy === "last") {
+			highlightLast();
+			return;
+		}
+		if (strategy === "preserve") {
+			if (highlightedKey() !== null) return;
+			if (selectedItem()) {
+				setShouldScrollHighlightedItem(true);
+				setHighlightedKey(selectedItem().key);
+				return;
+			}
+		}
+		highlightFirst();
+	};
+	const closePopup = (restoreInput = true) => {
+		setOpen(false);
+		setShouldScrollHighlightedItem(false);
+		setHighlightedKey(null);
+		if (restoreInput) restoreInputFromSelection();
+	};
+	const selectItem = (item) => {
+		if (item.disabled) return;
+		setSelectedOption(item.rawValue);
+		setDisplayedInputValue(item.label);
+		setFilterValue("");
+		setShouldScrollHighlightedItem(false);
+		setHighlightedKey(item.key);
+		if (local.closeOnSelection) setOpen(false);
+		inputRef()?.focus();
+	};
+	const clearPendingInput = () => {
+		if (selectedItem() === null) {
+			setDisplayedInputValue("", isControlledInputValue());
+			setFilterValue("");
+			return;
+		}
+		restoreInputFromSelection();
+	};
+	const clearSelectedItem = () => {
+		setSelectedOption(null);
+		setDisplayedInputValue("", true);
+		setFilterValue("");
+		setShouldScrollHighlightedItem(false);
+		setHighlightedKey(null);
+		setOpen(false);
+		inputRef()?.focus();
+	};
+	createEffect(() => {
+		if (!isControlledValue()) return;
+		if (selectedItem() !== null) {
+			restoreInputFromSelection();
+			return;
+		}
+		setFilterValue("");
+		if (!isControlledInputValue()) setDisplayedInputValue("");
+	});
+	createEffect(() => {
+		const items = visibleItems();
+		const selected = selectedItem();
+		if (items.length === 0) {
+			setShouldScrollHighlightedItem(false);
+			setHighlightedKey(null);
+			setOpen(false);
+			return;
+		}
+		if (highlightedKey() && items.some((item) => item.key === highlightedKey())) return;
+		if (isOpen()) {
+			if (selected && items.some((item) => item.key === selected.key)) {
+				setShouldScrollHighlightedItem(true);
+				setHighlightedKey(selected.key);
+				return;
+			}
+			highlightFirst();
+		}
+	});
+	onMount(() => {
+		restoreInputFromSelection();
+		const handlePointerDown = (event) => {
+			const root = rootRef();
+			if (!root || root.contains(event.target)) return;
+			closePopup(true);
+		};
+		document.addEventListener("pointerdown", handlePointerDown);
+		onCleanup(() => {
+			document.removeEventListener("pointerdown", handlePointerDown);
+		});
+	});
+	const context = {
+		rootId,
+		rootRef,
+		setRootRef,
+		inputRef,
+		setInputRef,
+		inputValue,
+		setInputValue: (value) => {
+			const selected = selectedItem();
+			if (selected && value !== selected.label) setSelectedOption(null);
+			setDisplayedInputValue(value, true);
+			setFilterValue(value);
+			if (value.trim() === "") {
+				closePopup(false);
+				return;
+			}
+			openPopup("first");
+		},
+		isOpen,
+		openPopup,
+		openAllOptions,
+		closePopup,
+		togglePopup: () => {
+			if (isOpen()) {
+				closePopup(true);
+				return;
+			}
+			openPopup("first");
+		},
+		visibleGroups,
+		visibleItems,
+		selectedItem,
+		highlightedKey,
+		shouldScrollHighlightedItem,
+		setHighlightedKey: (key) => {
+			setShouldScrollHighlightedItem(false);
+			setHighlightedKey(key);
+		},
+		highlightNext,
+		highlightPrevious,
+		highlightFirst,
+		highlightLast,
+		selectItem,
+		getItemId: (key) => `${rootId}-item-${key}`,
+		itemComponent: local.itemComponent,
+		groupComponent: local.groupComponent,
+		placeholder: () => local.placeholder,
+		disabled: () => Boolean(local.disabled),
+		readOnly: () => Boolean(local.readOnly),
+		required: () => Boolean(local.required),
+		name: () => local.name,
+		clearPendingInput,
+		clearSelectedItem
+	};
+	const rootClass = () => clsx(comboboxClass.root, local.class);
+	const handleFocusOut = (event) => {
+		callEventHandler(local.onFocusOut, event);
+		const nextTarget = event.relatedTarget;
+		if (nextTarget && rootRef()?.contains(nextTarget)) return;
+		queueMicrotask(() => {
+			const activeElement = document.activeElement;
+			if (activeElement instanceof Node && rootRef()?.contains(activeElement)) return;
+			closePopup(true);
+		});
+	};
+	return createComponent(ComboboxContext.Provider, {
+		value: context,
+		get children() {
+			var _el$ = _tmpl$();
+			_el$.$$focusout = handleFocusOut;
+			use(setRootRef, _el$);
+			spread(_el$, mergeProps({ get ["class"]() {
+				return rootClass();
+			} }, rest), false, true);
+			insert(_el$, (() => {
+				var _c$ = memo(() => !!local.children);
+				return () => _c$() ? resolvedChildren() : [createComponent(ComboboxControl, { get children() {
+					return [createComponent(ComboboxInput, { get ["aria-label"]() {
+						return local.placeholder ?? "Combobox";
+					} }), createComponent(ComboboxTrigger, {})];
+				} }), createComponent(ComboboxPortal, { get children() {
+					return createComponent(ComboboxContent, { get children() {
+						return createComponent(ComboboxListbox, {});
+					} });
+				} })];
+			})());
+			return _el$;
+		}
+	});
+}
+delegateEvents(["focusout"]);
+//#endregion
+//#region src/components/combobox/combobox.tsx
+const Combobox = Object.assign(ComboboxRoot, {
+	Control: ComboboxControl,
+	Input: ComboboxInput,
+	Trigger: ComboboxTrigger,
+	Icon: ComboboxIcon,
+	Portal: ComboboxPortal,
+	Content: ComboboxContent,
+	Listbox: ComboboxListbox,
+	Item: ComboboxItem,
+	ItemLabel: ComboboxItemLabel,
+	ItemIndicator: ComboboxItemIndicator,
+	Group: ComboboxGroup,
+	HiddenSelect: ComboboxHiddenSelect
+});
+//#endregion
+export { Combobox, ComboboxContent, ComboboxControl, ComboboxGroup, ComboboxHiddenSelect, ComboboxIcon, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxItemLabel, ComboboxListbox, ComboboxPortal, ComboboxRoot, ComboboxTrigger, comboboxClass };
+
+//# sourceMappingURL=index.js.map