@proyecto-viviana/solidaria-components 0.3.2 → 0.4.0

package/dist/ComboBox.js

@@ -0,0 +1,992 @@
+import { Provider, filterDOMProps, useRenderProps } from "./utils.js";
+import { TextContext } from "./Text.js";
+import { SelectionIndicatorContext } from "./SelectionIndicator.js";
+import { className, createComponent, delegateEvents, effect, getNextElement, getNextMarker, insert, memo, mergeProps, runHydrationEvents, setAttribute, setProperty, spread, style, template, use } from "solid-js/web";
+import { For, Show, createContext, createEffect, createMemo, createSignal, onCleanup, splitProps, useContext } from "solid-js";
+import { createComboBox, createHover, createInteractOutside, createListBox, createOption, createScrollIntoViewOnFocus, getComboBoxData, mergeProps as mergeProps$2 } from "@proyecto-viviana/solidaria";
+import { createComboBoxState, defaultContainsFilter } from "@proyecto-viviana/solid-stately";
+//#region src/ComboBox.tsx
+/**
+* ComboBox component for solidaria-components
+*
+* A pre-wired headless combobox that combines state + aria hooks.
+* Port of react-aria-components/src/ComboBox.tsx
+*/
+var _tmpl$ = /*#__PURE__*/ template(`<input type=hidden>`), _tmpl$2 = /*#__PURE__*/ template(`<div><!$><!/><!$><!/>`), _tmpl$3 = /*#__PURE__*/ template(`<label>`), _tmpl$4 = /*#__PURE__*/ template(`<div>`), _tmpl$5 = /*#__PURE__*/ template(`<input>`), _tmpl$6 = /*#__PURE__*/ template(`<span>`), _tmpl$7 = /*#__PURE__*/ template(`<button>`), _tmpl$8 = /*#__PURE__*/ template(`<ul>`), _tmpl$9 = /*#__PURE__*/ template(`<li>`), _tmpl$0 = /*#__PURE__*/ template(`<div role=group aria-label="Selected items">`), _tmpl$1 = /*#__PURE__*/ template(`<span><!$><!/><button type=button class=solidaria-ComboBox-tag-remove tabindex=-1>&#215;`);
+function assignRef(ref, el) {
+	if (!ref) return;
+	if (typeof ref === "function") ref(el);
+	else ref.current = el;
+}
+const ComboBoxContext = createContext(null);
+const ComboBoxStateContext = createContext(null);
+const ComboBoxValueContext = ComboBoxContext;
+function callInputKeyDown(handler, event) {
+	if (typeof handler === "function") handler(event);
+	else if (handler) handler[0](handler[1], event);
+}
+/**
+* A combobox combines a text input with a listbox, allowing users to filter a list of options.
+*/
+function ComboBox(props) {
+	const contextSlotProps = useContext(ComboBoxContext)?.slots?.[props.slot ?? "default"];
+	const [local, stateProps, ariaProps] = splitProps(contextSlotProps ? mergeProps$2(contextSlotProps, props) : props, [
+		"class",
+		"style",
+		"slot",
+		"children",
+		"ref",
+		"rootRef",
+		"slots"
+	], [
+		"items",
+		"defaultItems",
+		"getKey",
+		"getTextValue",
+		"getDisabled",
+		"disabledKeys",
+		"selectionMode",
+		"selectedKey",
+		"defaultSelectedKey",
+		"selectedKeys",
+		"defaultSelectedKeys",
+		"onSelectionChange",
+		"onSelectionChangeMultiple",
+		"inputValue",
+		"defaultInputValue",
+		"onInputChange",
+		"isOpen",
+		"defaultOpen",
+		"onOpenChange",
+		"defaultFilter",
+		"allowsCustomValue",
+		"allowsEmptyCollection",
+		"menuTrigger",
+		"name",
+		"formValue"
+	]);
+	let inputRef = null;
+	let buttonRef = null;
+	let triggerRef = null;
+	let listBoxRef = null;
+	const optionActions = /* @__PURE__ */ new Map();
+	const runOptionAction = (key) => {
+		optionActions.get(key)?.();
+	};
+	const state = createComboBoxState({
+		get items() {
+			return stateProps.items;
+		},
+		get defaultItems() {
+			return stateProps.defaultItems;
+		},
+		get getKey() {
+			return stateProps.getKey;
+		},
+		get getTextValue() {
+			return stateProps.getTextValue;
+		},
+		get getDisabled() {
+			return stateProps.getDisabled;
+		},
+		get disabledKeys() {
+			return stateProps.disabledKeys;
+		},
+		get selectionMode() {
+			return stateProps.selectionMode;
+		},
+		get selectedKey() {
+			return stateProps.selectedKey;
+		},
+		get defaultSelectedKey() {
+			return stateProps.defaultSelectedKey;
+		},
+		get selectedKeys() {
+			return stateProps.selectedKeys;
+		},
+		get defaultSelectedKeys() {
+			return stateProps.defaultSelectedKeys;
+		},
+		get onSelectionChange() {
+			return stateProps.onSelectionChange;
+		},
+		get onSelectionChangeMultiple() {
+			return stateProps.onSelectionChangeMultiple;
+		},
+		get inputValue() {
+			return stateProps.inputValue;
+		},
+		get defaultInputValue() {
+			return stateProps.defaultInputValue;
+		},
+		get onInputChange() {
+			return stateProps.onInputChange;
+		},
+		get isOpen() {
+			return stateProps.isOpen;
+		},
+		get defaultOpen() {
+			return stateProps.defaultOpen;
+		},
+		get onOpenChange() {
+			return stateProps.onOpenChange;
+		},
+		get defaultFilter() {
+			return stateProps.defaultFilter;
+		},
+		get allowsCustomValue() {
+			return stateProps.allowsCustomValue;
+		},
+		get allowsEmptyCollection() {
+			return stateProps.allowsEmptyCollection;
+		},
+		get menuTrigger() {
+			return stateProps.menuTrigger;
+		},
+		get isDisabled() {
+			return ariaProps.isDisabled;
+		},
+		get isReadOnly() {
+			return ariaProps.isReadOnly;
+		},
+		get isRequired() {
+			return ariaProps.isRequired;
+		}
+	});
+	const listState = createComboBoxListStateAdapter(state);
+	const effectiveFormValue = createMemo(() => {
+		if (stateProps.allowsCustomValue) return "text";
+		return stateProps.formValue ?? "key";
+	});
+	const comboBoxAriaProps = createMemo(() => {
+		const cleanProps = {};
+		for (const key in ariaProps) if (!key.startsWith("data-")) cleanProps[key] = ariaProps[key];
+		return cleanProps;
+	});
+	const comboBoxAria = createComboBox(() => ({
+		...comboBoxAriaProps(),
+		get name() {
+			return effectiveFormValue() === "text" ? stateProps.name : void 0;
+		}
+	}), state, () => inputRef, () => buttonRef, () => listBoxRef);
+	const getInputProps = () => {
+		const inputProps = comboBoxAria.inputProps;
+		const originalOnKeyDown = inputProps.onKeyDown;
+		return {
+			...inputProps,
+			onKeyDown: (event) => {
+				const focusedKey = state.focusedKey();
+				const optionAction = event.key === "Enter" && state.isOpen() && focusedKey != null && !state.isKeyDisabled(focusedKey) ? optionActions.get(focusedKey) : void 0;
+				callInputKeyDown(originalOnKeyDown, event);
+				optionAction?.();
+			}
+		};
+	};
+	const { isHovered, hoverProps } = createHover({ get isDisabled() {
+		return ariaProps.isDisabled;
+	} });
+	const renderValues = createMemo(() => ({
+		isOpen: comboBoxAria.isOpen(),
+		isFocused: comboBoxAria.isFocused(),
+		isFocusVisible: comboBoxAria.isFocusVisible(),
+		isDisabled: !!ariaProps.isDisabled,
+		isRequired: !!ariaProps.isRequired,
+		isInvalid: !!ariaProps.isInvalid,
+		isReadOnly: !!ariaProps.isReadOnly,
+		isSelected: state.selectedKey() != null,
+		inputValue: state.inputValue()
+	}));
+	const renderProps = useRenderProps({
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ComboBox"
+	}, renderValues);
+	const domProps = createMemo(() => {
+		return filterDOMProps(ariaProps, { global: true });
+	});
+	const cleanHoverProps = () => {
+		const { ref: _ref, ...rest } = hoverProps;
+		return rest;
+	};
+	const ComboBoxChildren = () => typeof local.children === "function" ? local.children(renderValues()) : local.children;
+	const textSlots = { slots: {
+		get description() {
+			return comboBoxAria.descriptionProps;
+		},
+		get errorMessage() {
+			return comboBoxAria.errorMessageProps;
+		}
+	} };
+	return createComponent(ComboBoxContext.Provider, {
+		get value() {
+			return {
+				state,
+				listState,
+				inputProps: getInputProps,
+				buttonProps: () => comboBoxAria.buttonProps,
+				listBoxProps: () => ({
+					...comboBoxAria.listBoxProps,
+					onAction: void 0,
+					shouldUseVirtualFocus: true,
+					shouldSelectOnPressUp: true,
+					shouldFocusOnHover: true,
+					linkBehavior: "selection",
+					UNSTABLE_itemBehavior: "action"
+				}),
+				labelProps: () => comboBoxAria.labelProps,
+				descriptionProps: () => comboBoxAria.descriptionProps,
+				errorMessageProps: () => comboBoxAria.errorMessageProps,
+				isOpen: comboBoxAria.isOpen,
+				isFocused: comboBoxAria.isFocused,
+				isFocusVisible: comboBoxAria.isFocusVisible,
+				items: stateProps.items ?? stateProps.defaultItems ?? [],
+				inputRef: () => inputRef,
+				setInputRef: (el) => {
+					inputRef = el;
+				},
+				buttonRef: () => buttonRef,
+				setButtonRef: (el) => {
+					buttonRef = el;
+				},
+				triggerRef: () => triggerRef,
+				setTriggerRef: (el) => {
+					triggerRef = el;
+				},
+				listBoxRef: () => listBoxRef,
+				setListBoxRef: (el) => {
+					listBoxRef = el;
+				},
+				registerOptionAction: (key, action) => {
+					if (action) optionActions.set(key, action);
+					else optionActions.delete(key);
+				},
+				runOptionAction,
+				slots: local.slots
+			};
+		},
+		get children() {
+			return createComponent(ComboBoxStateContext.Provider, {
+				value: state,
+				get children() {
+					var _el$ = getNextElement(_tmpl$2), _el$3 = _el$.firstChild, [_el$4, _co$] = getNextMarker(_el$3.nextSibling), _el$5 = _el$4.nextSibling, [_el$6, _co$2] = getNextMarker(_el$5.nextSibling);
+					use((el) => {
+						assignRef(local.ref, el);
+						assignRef(local.rootRef, el);
+					}, _el$);
+					spread(_el$, mergeProps(domProps, cleanHoverProps, {
+						get ["class"]() {
+							return renderProps.class();
+						},
+						get style() {
+							return renderProps.style();
+						},
+						get ["data-open"]() {
+							return comboBoxAria.isOpen() || void 0;
+						},
+						get ["data-focused"]() {
+							return comboBoxAria.isFocused() || void 0;
+						},
+						get ["data-focus-visible"]() {
+							return comboBoxAria.isFocusVisible() || void 0;
+						},
+						get ["data-disabled"]() {
+							return ariaProps.isDisabled || void 0;
+						},
+						get ["data-required"]() {
+							return ariaProps.isRequired || void 0;
+						},
+						get ["data-invalid"]() {
+							return ariaProps.isInvalid || void 0;
+						},
+						get ["data-readonly"]() {
+							return ariaProps.isReadOnly || void 0;
+						},
+						get ["data-hovered"]() {
+							return isHovered() || void 0;
+						},
+						get slot() {
+							return local.slot;
+						}
+					}), false, true);
+					insert(_el$, createComponent(Show, {
+						get when() {
+							return memo(() => !!stateProps.name)() && effectiveFormValue() === "key";
+						},
+						get children() {
+							var _el$2 = getNextElement(_tmpl$);
+							effect((_p$) => {
+								var _v$ = stateProps.name, _v$2 = ariaProps.form;
+								_v$ !== _p$.e && setAttribute(_el$2, "name", _p$.e = _v$);
+								_v$2 !== _p$.t && setAttribute(_el$2, "form", _p$.t = _v$2);
+								return _p$;
+							}, {
+								e: void 0,
+								t: void 0
+							});
+							effect(() => setProperty(_el$2, "value", state.selectedKey()?.toString() ?? ""));
+							return _el$2;
+						}
+					}), _el$4, _co$);
+					insert(_el$, createComponent(Provider, {
+						values: [[TextContext, textSlots]],
+						get children() {
+							return createComponent(ComboBoxChildren, {});
+						}
+					}), _el$6, _co$2);
+					runHydrationEvents();
+					return _el$;
+				}
+			});
+		}
+	});
+}
+/**
+* Label element for a combobox.
+*/
+function ComboBoxLabel(props) {
+	const [local, domProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"children"
+	]);
+	const context = useContext(ComboBoxContext);
+	if (!context) throw new Error("ComboBoxLabel must be used within a ComboBox");
+	const cleanLabelProps = () => {
+		const { ref: _ref, ...rest } = context.labelProps();
+		return rest;
+	};
+	return (() => {
+		var _el$7 = getNextElement(_tmpl$3);
+		spread(_el$7, mergeProps(domProps, cleanLabelProps, {
+			get ["class"]() {
+				return local.class;
+			},
+			get style() {
+				return local.style;
+			}
+		}), false, true);
+		insert(_el$7, () => local.children);
+		runHydrationEvents();
+		return _el$7;
+	})();
+}
+/**
+* Description element for a combobox.
+*/
+function ComboBoxDescription(props) {
+	const [local, domProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"children"
+	]);
+	const context = useContext(ComboBoxContext);
+	if (!context) throw new Error("ComboBoxDescription must be used within a ComboBox");
+	const cleanDescriptionProps = () => {
+		const { ref: _ref, ...rest } = context.descriptionProps();
+		return rest;
+	};
+	return (() => {
+		var _el$8 = getNextElement(_tmpl$4);
+		spread(_el$8, mergeProps(domProps, cleanDescriptionProps, {
+			get ["class"]() {
+				return local.class;
+			},
+			get style() {
+				return local.style;
+			}
+		}), false, true);
+		insert(_el$8, () => local.children);
+		runHydrationEvents();
+		return _el$8;
+	})();
+}
+/**
+* Error message element for a combobox.
+*/
+function ComboBoxErrorMessage(props) {
+	const [local, domProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"children"
+	]);
+	const context = useContext(ComboBoxContext);
+	if (!context) throw new Error("ComboBoxErrorMessage must be used within a ComboBox");
+	const cleanErrorMessageProps = () => {
+		const { ref: _ref, ...rest } = context.errorMessageProps();
+		return rest;
+	};
+	return (() => {
+		var _el$9 = getNextElement(_tmpl$4);
+		spread(_el$9, mergeProps(domProps, cleanErrorMessageProps, {
+			get ["class"]() {
+				return local.class;
+			},
+			get style() {
+				return local.style;
+			}
+		}), false, true);
+		insert(_el$9, () => local.children);
+		runHydrationEvents();
+		return _el$9;
+	})();
+}
+/**
+* The text input for a combobox.
+*/
+function ComboBoxInput(props) {
+	const [local, domProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"children"
+	]);
+	const context = useContext(ComboBoxContext);
+	if (!context) throw new Error("ComboBoxInput must be used within a ComboBox");
+	const { isOpen, isFocused, isFocusVisible, state, setInputRef } = context;
+	const { isHovered, hoverProps } = createHover({ get isDisabled() {
+		return state.isDisabled;
+	} });
+	const renderValues = createMemo(() => ({
+		isOpen: isOpen(),
+		isFocused: isFocused(),
+		isFocusVisible: isFocusVisible(),
+		isHovered: isHovered(),
+		isDisabled: state.isDisabled,
+		inputValue: state.inputValue()
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return local.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ComboBox-input"
+	}, renderValues);
+	const cleanInputProps = () => {
+		const { ref: _ref1, value: _value, ...rest } = context.inputProps();
+		return rest;
+	};
+	const cleanHoverProps = () => {
+		const { ref: _ref2, ...rest } = hoverProps;
+		return rest;
+	};
+	return (() => {
+		var _el$0 = getNextElement(_tmpl$5);
+		use((el) => setInputRef(el), _el$0);
+		spread(_el$0, mergeProps(domProps, cleanInputProps, cleanHoverProps, {
+			get value() {
+				return state.inputValue();
+			},
+			get ["class"]() {
+				return renderProps.class();
+			},
+			get style() {
+				return renderProps.style();
+			},
+			get ["data-open"]() {
+				return isOpen() || void 0;
+			},
+			get ["data-focused"]() {
+				return isFocused() || void 0;
+			},
+			get ["data-focus-visible"]() {
+				return isFocusVisible() || void 0;
+			},
+			get ["data-hovered"]() {
+				return isHovered() || void 0;
+			},
+			get ["data-disabled"]() {
+				return state.isDisabled || void 0;
+			}
+		}), false, false);
+		runHydrationEvents();
+		return _el$0;
+	})();
+}
+function ComboBoxValue(props) {
+	const context = useContext(ComboBoxContext);
+	if (!context) throw new Error("ComboBoxValue must be used within a ComboBox");
+	const state = context.state;
+	const isMulti = createMemo(() => state.selectionMode() === "multiple");
+	const selectedItem = createMemo(() => state.selectedItem());
+	const selectedItems = createMemo(() => {
+		if (isMulti()) return state.selectedItems().map((node) => node.value ?? null);
+		const item = selectedItem();
+		return item ? [item.value ?? null] : [];
+	});
+	const selectedText = createMemo(() => {
+		if (isMulti()) return state.selectedItems().map((n) => n.textValue).join(", ");
+		return selectedItem()?.textValue ?? "";
+	});
+	const textValue = createMemo(() => selectedText() || state.inputValue() || "");
+	const isPlaceholder = createMemo(() => textValue().length === 0);
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: props.class,
+		style: props.style,
+		defaultClassName: "solidaria-ComboBox-value"
+	}, () => ({
+		textValue: textValue(),
+		isPlaceholder: isPlaceholder(),
+		selectedItems: selectedItems(),
+		selectedText: selectedText(),
+		state
+	}));
+	return (() => {
+		var _el$1 = getNextElement(_tmpl$6);
+		insert(_el$1, (() => {
+			var _c$ = memo(() => !!props.children);
+			return () => _c$() ? renderProps.renderChildren() : memo(() => !!isPlaceholder())() ? props.placeholder : textValue();
+		})());
+		effect((_p$) => {
+			var _v$3 = renderProps.class(), _v$4 = renderProps.style(), _v$5 = isPlaceholder() || void 0;
+			_v$3 !== _p$.e && className(_el$1, _p$.e = _v$3);
+			_p$.t = style(_el$1, _v$4, _p$.t);
+			_v$5 !== _p$.a && setAttribute(_el$1, "data-placeholder", _p$.a = _v$5);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0
+		});
+		return _el$1;
+	})();
+}
+/**
+* The trigger button for a combobox.
+*/
+function ComboBoxButton(props) {
+	const [local, domProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"children"
+	]);
+	const context = useContext(ComboBoxContext);
+	if (!context) throw new Error("ComboBoxButton must be used within a ComboBox");
+	const { isOpen, isFocused, state, setButtonRef } = context;
+	const { isHovered, hoverProps } = createHover({ get isDisabled() {
+		return state.isDisabled;
+	} });
+	const renderValues = createMemo(() => ({
+		isOpen: isOpen(),
+		isFocused: isFocused(),
+		isHovered: isHovered(),
+		isPressed: isOpen(),
+		isDisabled: state.isDisabled
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return local.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ComboBox-button"
+	}, renderValues);
+	const cleanButtonProps = () => {
+		const { ref: _ref1, ...rest } = context.buttonProps();
+		return rest;
+	};
+	const cleanHoverProps = () => {
+		const { ref: _ref2, ...rest } = hoverProps;
+		return rest;
+	};
+	return (() => {
+		var _el$10 = getNextElement(_tmpl$7);
+		use((el) => setButtonRef(el), _el$10);
+		spread(_el$10, mergeProps(domProps, cleanButtonProps, cleanHoverProps, {
+			get ["class"]() {
+				return renderProps.class();
+			},
+			get style() {
+				return renderProps.style();
+			},
+			get ["data-open"]() {
+				return isOpen() || void 0;
+			},
+			get ["data-pressed"]() {
+				return isOpen() || void 0;
+			},
+			get ["data-focused"]() {
+				return isFocused() || void 0;
+			},
+			get ["data-hovered"]() {
+				return isHovered() || void 0;
+			},
+			get ["data-disabled"]() {
+				return state.isDisabled || void 0;
+			}
+		}), false, true);
+		insert(_el$10, () => renderProps.renderChildren());
+		runHydrationEvents();
+		return _el$10;
+	})();
+}
+/**
+* The listbox popup for a combobox.
+*/
+function ComboBoxListBox(props) {
+	const [local, domProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"children"
+	]);
+	const rawContext = useContext(ComboBoxContext);
+	if (!rawContext) throw new Error("ComboBoxListBox must be used within a ComboBox");
+	const context = rawContext;
+	const { state: comboBoxState, listState, isOpen, inputRef, buttonRef, setListBoxRef } = context;
+	const state = comboBoxState;
+	let listBoxRef;
+	createScrollIntoViewOnFocus({
+		focusedKey: () => state.focusedKey(),
+		isActive: () => isOpen(),
+		ref: () => listBoxRef ?? null
+	});
+	createInteractOutside({
+		ref: () => listBoxRef ?? null,
+		onInteractOutside: (e) => {
+			const target = e.target;
+			const input = inputRef();
+			const button = buttonRef();
+			if (input?.contains(target)) return;
+			if (button?.contains(target)) return;
+			if (isOpen()) state.close();
+		},
+		get isDisabled() {
+			return !isOpen();
+		}
+	});
+	const { listBoxProps } = createListBox(context.listBoxProps, listState);
+	const renderValues = createMemo(() => ({ isFocused: state.isFocused() }));
+	const renderProps = useRenderProps({
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ComboBox-listbox"
+	}, renderValues);
+	const cleanContextProps = () => {
+		const { ref: _ref1, ...rest } = context.listBoxProps();
+		return rest;
+	};
+	const cleanListBoxProps = () => {
+		const { ref: _ref2, ...rest } = listBoxProps;
+		return rest;
+	};
+	const items = () => Array.from(state.collection());
+	const getNodeValue = (node) => {
+		if (node.value != null) return node.value;
+		return context.items.find((item, index) => {
+			const candidate = item;
+			return (candidate.key ?? candidate.id ?? index) === node.key;
+		}) ?? null;
+	};
+	const setListBoxElement = (el) => {
+		listBoxRef = el;
+		setListBoxRef(el);
+	};
+	onCleanup(() => {
+		setListBoxRef(null);
+	});
+	return createComponent(Show, {
+		get when() {
+			return isOpen();
+		},
+		get children() {
+			var _el$11 = getNextElement(_tmpl$8);
+			use(setListBoxElement, _el$11);
+			spread(_el$11, mergeProps(domProps, cleanContextProps, cleanListBoxProps, {
+				get ["class"]() {
+					return renderProps.class();
+				},
+				get style() {
+					return renderProps.style();
+				},
+				get ["data-focused"]() {
+					return state.isFocused() || void 0;
+				}
+			}), false, true);
+			insert(_el$11, createComponent(Show, {
+				get when() {
+					return local.children;
+				},
+				get fallback() {
+					return createComponent(For, {
+						get each() {
+							return items();
+						},
+						children: (node) => createComponent(ComboBoxOption, {
+							get id() {
+								return node.key;
+							},
+							get children() {
+								return node.textValue;
+							}
+						})
+					});
+				},
+				get children() {
+					return createComponent(For, {
+						get each() {
+							return items();
+						},
+						children: (node) => {
+							const value = getNodeValue(node);
+							return value != null ? local.children(value) : null;
+						}
+					});
+				}
+			}));
+			runHydrationEvents();
+			return _el$11;
+		}
+	});
+}
+/**
+* An option in a combobox listbox.
+*/
+function ComboBoxOption(props) {
+	const [local, ariaProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"id",
+		"item",
+		"textValue",
+		"onAction"
+	]);
+	const stateContext = useContext(ComboBoxStateContext);
+	const comboBoxContext = useContext(ComboBoxContext);
+	if (!stateContext || !comboBoxContext) throw new Error("ComboBoxOption must be used within a ComboBox");
+	const state = stateContext;
+	const listState = comboBoxContext.listState;
+	const [ref, setRef] = createSignal(null);
+	const optionId = () => {
+		const listBoxId = getComboBoxData(state)?.listBoxId;
+		return listBoxId ? `${listBoxId}-option-${local.id}` : String(local.id);
+	};
+	createEffect(() => {
+		const key = local.id;
+		comboBoxContext?.registerOptionAction(key, local.onAction);
+		onCleanup(() => {
+			comboBoxContext?.registerOptionAction(key, void 0);
+		});
+	});
+	const optionAria = createOption({
+		key: local.id,
+		get optionId() {
+			return optionId();
+		},
+		get isDisabled() {
+			return ariaProps.isDisabled;
+		},
+		get "aria-label"() {
+			return ariaProps["aria-label"];
+		},
+		shouldSelectOnPressUp: true,
+		shouldFocusOnHover: true,
+		shouldUseVirtualFocus: true,
+		allowsDifferentPressOrigin: true,
+		get onHoverStart() {
+			return ariaProps.onHoverStart;
+		},
+		get onHoverEnd() {
+			return ariaProps.onHoverEnd;
+		},
+		get onHoverChange() {
+			return ariaProps.onHoverChange;
+		},
+		get onAction() {
+			return local.onAction;
+		}
+	}, listState, () => ref());
+	const isOptionFocusVisible = () => optionAria.isFocusVisible() || optionAria.isFocused() && (comboBoxContext?.isFocusVisible() ?? false);
+	const renderValues = createMemo(() => ({
+		isSelected: optionAria.isSelected(),
+		isFocused: optionAria.isFocused(),
+		isFocusVisible: isOptionFocusVisible(),
+		isPressed: optionAria.isPressed(),
+		isHovered: optionAria.isHovered(),
+		isDisabled: optionAria.isDisabled()
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ComboBox-option"
+	}, renderValues);
+	const selectionIndicatorContext = createMemo(() => ({ isSelected: optionAria.isSelected }));
+	const cleanOptionProps = () => {
+		const { ref: _ref1, ...rest } = optionAria.optionProps;
+		return rest;
+	};
+	return createComponent(SelectionIndicatorContext.Provider, {
+		get value() {
+			return selectionIndicatorContext();
+		},
+		get children() {
+			var _el$12 = getNextElement(_tmpl$9);
+			use(setRef, _el$12);
+			spread(_el$12, mergeProps(cleanOptionProps, {
+				get ["class"]() {
+					return renderProps.class();
+				},
+				get style() {
+					return renderProps.style();
+				},
+				get ["data-selected"]() {
+					return optionAria.isSelected() || void 0;
+				},
+				get ["data-focused"]() {
+					return optionAria.isFocused() || void 0;
+				},
+				get ["data-focus-visible"]() {
+					return isOptionFocusVisible() || void 0;
+				},
+				get ["data-pressed"]() {
+					return optionAria.isPressed() || void 0;
+				},
+				get ["data-hovered"]() {
+					return optionAria.isHovered() || void 0;
+				},
+				get ["data-disabled"]() {
+					return optionAria.isDisabled() || void 0;
+				}
+			}), false, true);
+			insert(_el$12, () => renderProps.renderChildren());
+			runHydrationEvents();
+			return _el$12;
+		}
+	});
+}
+/**
+* Renders selected items as tags in multi-select mode.
+*/
+function ComboBoxTagGroup(props) {
+	const context = useContext(ComboBoxContext);
+	if (!context) throw new Error("ComboBoxTagGroup must be used within a ComboBox");
+	const state = context.state;
+	const items = createMemo(() => state.selectedItems().map((node) => ({
+		key: node.key,
+		label: node.textValue
+	})));
+	return createComponent(Show, {
+		get when() {
+			return items().length > 0;
+		},
+		get children() {
+			var _el$13 = getNextElement(_tmpl$0);
+			insert(_el$13, createComponent(For, {
+				get each() {
+					return items();
+				},
+				children: (item) => props.children(item)
+			}));
+			effect((_p$) => {
+				var _v$6 = props.class ?? "solidaria-ComboBox-tagGroup", _v$7 = props.style;
+				_v$6 !== _p$.e && className(_el$13, _p$.e = _v$6);
+				_p$.t = style(_el$13, _v$7, _p$.t);
+				return _p$;
+			}, {
+				e: void 0,
+				t: void 0
+			});
+			return _el$13;
+		}
+	});
+}
+/**
+* A tag representing a selected item in a multi-select combobox.
+*/
+function ComboBoxTag(props) {
+	const context = useContext(ComboBoxContext);
+	if (!context) throw new Error("ComboBoxTag must be used within a ComboBox");
+	const state = context.state;
+	const handleRemove = () => {
+		if (props.onRemove) props.onRemove();
+		else state.removeSelectedKey(props.item.key);
+	};
+	return (() => {
+		var _el$14 = getNextElement(_tmpl$1), _el$16 = _el$14.firstChild, [_el$17, _co$3] = getNextMarker(_el$16.nextSibling), _el$15 = _el$17.nextSibling;
+		insert(_el$14, () => props.children ?? props.item.label, _el$17, _co$3);
+		_el$15.$$click = handleRemove;
+		effect((_p$) => {
+			var _v$8 = props.class ?? "solidaria-ComboBox-tag", _v$9 = props.style, _v$0 = String(props.item.key), _v$1 = `Remove ${props.item.label}`;
+			_v$8 !== _p$.e && className(_el$14, _p$.e = _v$8);
+			_p$.t = style(_el$14, _v$9, _p$.t);
+			_v$0 !== _p$.a && setAttribute(_el$14, "data-key", _p$.a = _v$0);
+			_v$1 !== _p$.o && setAttribute(_el$15, "aria-label", _p$.o = _v$1);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0
+		});
+		runHydrationEvents();
+		return _el$14;
+	})();
+}
+ComboBox.Input = ComboBoxInput;
+ComboBox.Button = ComboBoxButton;
+ComboBox.ListBox = ComboBoxListBox;
+ComboBox.Option = ComboBoxOption;
+ComboBox.Label = ComboBoxLabel;
+ComboBox.Description = ComboBoxDescription;
+ComboBox.ErrorMessage = ComboBoxErrorMessage;
+ComboBox.TagGroup = ComboBoxTagGroup;
+ComboBox.Tag = ComboBoxTag;
+function createComboBoxListStateAdapter(state) {
+	const selectedKeys = createMemo(() => {
+		if (state.selectionMode() === "multiple") return state.selectedKeys();
+		const key = state.selectedKey();
+		return key != null ? new Set([key]) : /* @__PURE__ */ new Set();
+	});
+	const disabledKeys = createMemo(() => {
+		const keys = /* @__PURE__ */ new Set();
+		for (const node of state.collection()) if (node.isDisabled) keys.add(node.key);
+		return keys;
+	});
+	return {
+		collection: state.collection,
+		selectionManager: state.selectionManager,
+		isFocused: state.isFocused,
+		setFocused: state.setFocused,
+		focusedKey: state.focusedKey,
+		setFocusedKey: (key) => state.setFocusedKey(key ?? null),
+		childFocusStrategy: () => null,
+		selectionMode: state.selectionMode,
+		selectionBehavior: () => "replace",
+		disallowEmptySelection: () => true,
+		selectedKeys,
+		disabledKeys,
+		disabledBehavior: () => "all",
+		isEmpty: () => selectedKeys().size === 0,
+		isSelectAll: () => false,
+		isSelected: state.isSelected,
+		isDisabled: state.isKeyDisabled,
+		setSelectionBehavior: () => {},
+		toggleSelection: (key) => state.select(key),
+		replaceSelection: (key) => state.select(key),
+		setSelectedKeys: (keys) => {
+			const first = keys[Symbol.iterator]().next().value;
+			state.setSelectedKey(first ?? null);
+		},
+		selectAll: () => {},
+		clearSelection: () => state.setSelectedKey(null),
+		toggleSelectAll: () => {},
+		extendSelection: (toKey) => state.select(toKey),
+		select: (key) => state.select(key)
+	};
+}
+delegateEvents(["click"]);
+//#endregion
+export { ComboBox, ComboBoxButton, ComboBoxContext, ComboBoxDescription, ComboBoxErrorMessage, ComboBoxInput, ComboBoxLabel, ComboBoxListBox, ComboBoxOption, ComboBoxStateContext, ComboBoxTag, ComboBoxTagGroup, ComboBoxValue, ComboBoxValueContext, defaultContainsFilter };
+
+//# sourceMappingURL=ComboBox.js.map