@proyecto-viviana/solidaria-components 0.3.2 → 0.4.0

package/dist/ComboBox.jsx

@@ -0,0 +1,714 @@
+import { Provider, filterDOMProps, useRenderProps } from "./utils.jsx";
+import { TextContext } from "./Text.jsx";
+import { SelectionIndicatorContext } from "./SelectionIndicator.jsx";
+import { For, Show, createContext, createEffect, createMemo, createSignal, onCleanup, splitProps, useContext } from "solid-js";
+import { createComboBox, createHover, createInteractOutside, createListBox, createOption, createScrollIntoViewOnFocus, getComboBoxData, mergeProps as mergeProps$1 } 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
+*/
+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$1(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 <ComboBoxContext.Provider value={{
+		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
+	}}>
+      <ComboBoxStateContext.Provider value={state}>
+        <div {...domProps()} {...cleanHoverProps()} ref={(el) => {
+		assignRef(local.ref, el);
+		assignRef(local.rootRef, el);
+	}} class={renderProps.class()} style={renderProps.style()} data-open={comboBoxAria.isOpen() || void 0} data-focused={comboBoxAria.isFocused() || void 0} data-focus-visible={comboBoxAria.isFocusVisible() || void 0} data-disabled={ariaProps.isDisabled || void 0} data-required={ariaProps.isRequired || void 0} data-invalid={ariaProps.isInvalid || void 0} data-readonly={ariaProps.isReadOnly || void 0} data-hovered={isHovered() || void 0} slot={local.slot}>
+          {}
+          <Show when={stateProps.name && effectiveFormValue() === "key"}>
+            <input type="hidden" name={stateProps.name} form={ariaProps.form} value={state.selectedKey()?.toString() ?? ""} />
+          </Show>
+          <Provider values={[[TextContext, textSlots]]}>
+            <ComboBoxChildren />
+          </Provider>
+        </div>
+      </ComboBoxStateContext.Provider>
+    </ComboBoxContext.Provider>;
+}
+/**
+* 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 <label {...domProps} {...cleanLabelProps()} class={local.class} style={local.style}>
+      {local.children}
+    </label>;
+}
+/**
+* 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 <div {...domProps} {...cleanDescriptionProps()} class={local.class} style={local.style}>
+      {local.children}
+    </div>;
+}
+/**
+* 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 <div {...domProps} {...cleanErrorMessageProps()} class={local.class} style={local.style}>
+      {local.children}
+    </div>;
+}
+/**
+* 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 <input {...domProps} ref={(el) => setInputRef(el)} {...cleanInputProps()} {...cleanHoverProps()} value={state.inputValue()} class={renderProps.class()} style={renderProps.style()} data-open={isOpen() || void 0} data-focused={isFocused() || void 0} data-focus-visible={isFocusVisible() || void 0} data-hovered={isHovered() || void 0} data-disabled={state.isDisabled || void 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 <span class={renderProps.class()} style={renderProps.style()} data-placeholder={isPlaceholder() || void 0}>
+      {props.children ? renderProps.renderChildren() : isPlaceholder() ? props.placeholder : textValue()}
+    </span>;
+}
+/**
+* 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 <button {...domProps} ref={(el) => setButtonRef(el)} {...cleanButtonProps()} {...cleanHoverProps()} class={renderProps.class()} style={renderProps.style()} data-open={isOpen() || void 0} data-pressed={isOpen() || void 0} data-focused={isFocused() || void 0} data-hovered={isHovered() || void 0} data-disabled={state.isDisabled || void 0}>
+      {renderProps.renderChildren()}
+    </button>;
+}
+/**
+* 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 <Show when={isOpen()}>
+      <ul {...domProps} ref={setListBoxElement} {...cleanContextProps()} {...cleanListBoxProps()} class={renderProps.class()} style={renderProps.style()} data-focused={state.isFocused() || void 0}>
+        <Show when={local.children} fallback={<For each={items()}>
+              {(node) => <ComboBoxOption id={node.key}>{node.textValue}</ComboBoxOption>}
+            </For>}>
+          <For each={items()}>
+            {(node) => {
+		const value = getNodeValue(node);
+		return value != null ? local.children(value) : null;
+	}}
+          </For>
+        </Show>
+      </ul>
+    </Show>;
+}
+/**
+* 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 <SelectionIndicatorContext.Provider value={selectionIndicatorContext()}>
+      <li ref={setRef} {...cleanOptionProps()} class={renderProps.class()} style={renderProps.style()} data-selected={optionAria.isSelected() || void 0} data-focused={optionAria.isFocused() || void 0} data-focus-visible={isOptionFocusVisible() || void 0} data-pressed={optionAria.isPressed() || void 0} data-hovered={optionAria.isHovered() || void 0} data-disabled={optionAria.isDisabled() || void 0}>
+        {renderProps.renderChildren()}
+      </li>
+    </SelectionIndicatorContext.Provider>;
+}
+/**
+* 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 <Show when={items().length > 0}>
+      <div class={props.class ?? "solidaria-ComboBox-tagGroup"} style={props.style} role="group" aria-label="Selected items">
+        <For each={items()}>{(item) => props.children(item)}</For>
+      </div>
+    </Show>;
+}
+/**
+* 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 <span class={props.class ?? "solidaria-ComboBox-tag"} style={props.style} data-key={String(props.item.key)}>
+      {props.children ?? props.item.label}
+      <button type="button" aria-label={`Remove ${props.item.label}`} onClick={handleRemove} class="solidaria-ComboBox-tag-remove" tabIndex={-1}>
+        &#215;
+      </button>
+    </span>;
+}
+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)
+	};
+}
+//#endregion
+export { ComboBox, ComboBoxButton, ComboBoxContext, ComboBoxDescription, ComboBoxErrorMessage, ComboBoxInput, ComboBoxLabel, ComboBoxListBox, ComboBoxOption, ComboBoxStateContext, ComboBoxTag, ComboBoxTagGroup, ComboBoxValue, ComboBoxValueContext, defaultContainsFilter };
+
+//# sourceMappingURL=ComboBox.jsx.map