@proyecto-viviana/solidaria-components 0.3.2 → 0.4.0

package/dist/Select.jsx

@@ -0,0 +1,744 @@
+import { filterDOMProps, useRenderProps } from "./utils.jsx";
+import { FieldErrorContext } from "./FieldError.jsx";
+import { SelectionIndicatorContext } from "./SelectionIndicator.jsx";
+import { ListBoxLoadMoreItem } from "./ListBox.jsx";
+import { For, Show, createContext, createEffect, createMemo, createSignal, createUniqueId, splitProps, untrack, useContext } from "solid-js";
+import { FocusScope, createHiddenSelect, createHover, createInteractOutside, createListBox, createOption, createSelect, focusSafely, mergeProps as mergeProps$1 } from "@proyecto-viviana/solidaria";
+import { DEFAULT_VALIDATION_RESULT, createSelectState } from "@proyecto-viviana/solid-stately";
+//#region src/Select.tsx
+/**
+* Select component for solidaria-components
+*
+* A pre-wired headless select that combines state + aria hooks.
+* Port of react-aria-components/src/Select.tsx
+*/
+function assignRef(ref, el) {
+	if (!ref) return;
+	if (typeof ref === "function") ref(el);
+	else ref.current = el;
+}
+function getNativeSelectValidation(select) {
+	return {
+		isInvalid: !select.validity.valid,
+		validationDetails: {
+			badInput: select.validity.badInput,
+			customError: select.validity.customError,
+			patternMismatch: select.validity.patternMismatch,
+			rangeOverflow: select.validity.rangeOverflow,
+			rangeUnderflow: select.validity.rangeUnderflow,
+			stepMismatch: select.validity.stepMismatch,
+			tooLong: select.validity.tooLong,
+			tooShort: select.validity.tooShort,
+			typeMismatch: select.validity.typeMismatch,
+			valueMissing: select.validity.valueMissing,
+			valid: select.validity.valid
+		},
+		validationErrors: select.validationMessage ? [select.validationMessage] : []
+	};
+}
+const SelectContext = createContext(null);
+const SelectStateContext = createContext(null);
+const SelectValueContext = SelectContext;
+const selectRootLabelProps = new Set([
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"aria-details"
+]);
+/**
+* A select displays a collapsible list of options and allows a user to select one of them.
+*/
+function Select(props) {
+	const contextSlotProps = useContext(SelectContext)?.slots?.[props.slot ?? "default"];
+	const [local, stateProps, ariaProps] = splitProps(contextSlotProps ? mergeProps$1(contextSlotProps, props) : props, [
+		"class",
+		"style",
+		"render",
+		"ref",
+		"slot",
+		"children"
+	], [
+		"items",
+		"getKey",
+		"getTextValue",
+		"getDisabled",
+		"disabledKeys",
+		"selectionMode",
+		"selectedKey",
+		"defaultSelectedKey",
+		"selectedKeys",
+		"defaultSelectedKeys",
+		"onSelectionChange",
+		"onSelectionChangeKeys",
+		"isOpen",
+		"defaultOpen",
+		"onOpenChange",
+		"name"
+	]);
+	let rootRef;
+	const [selectValidation, setSelectValidation] = createSignal(DEFAULT_VALIDATION_RESULT);
+	const errorMessageId = createUniqueId();
+	const resolveDisabled = () => {
+		const disabled = ariaProps.isDisabled;
+		if (typeof disabled === "function") return disabled();
+		return !!disabled;
+	};
+	const state = createSelectState({
+		get items() {
+			return stateProps.items;
+		},
+		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 onSelectionChangeKeys() {
+			return stateProps.onSelectionChangeKeys;
+		},
+		get isOpen() {
+			return stateProps.isOpen;
+		},
+		get defaultOpen() {
+			return stateProps.defaultOpen;
+		},
+		get onOpenChange() {
+			return stateProps.onOpenChange;
+		},
+		get isDisabled() {
+			return resolveDisabled();
+		},
+		get isRequired() {
+			return ariaProps.isRequired;
+		}
+	});
+	const { labelProps, triggerProps, valueProps, menuProps, isFocused, isFocusVisible, isOpen } = createSelect(createMemo(() => {
+		const clean = {};
+		for (const key in ariaProps) if (!key.startsWith("data-")) clean[key] = ariaProps[key];
+		return clean;
+	}), state);
+	const { isHovered, hoverProps } = createHover({ get isDisabled() {
+		return resolveDisabled();
+	} });
+	const renderValues = createMemo(() => ({
+		isOpen: isOpen(),
+		isFocused: isFocused(),
+		isFocusVisible: isFocusVisible(),
+		isDisabled: resolveDisabled(),
+		isRequired: !!ariaProps.isRequired,
+		isSelected: state.selectionMode() === "multiple" ? state.selectedKeys() === "all" || state.selectedKeys().size > 0 : state.selectedKey() != null
+	}));
+	const childRenderValues = {
+		get isOpen() {
+			return isOpen();
+		},
+		get isFocused() {
+			return isFocused();
+		},
+		get isFocusVisible() {
+			return isFocusVisible();
+		},
+		get isDisabled() {
+			return resolveDisabled();
+		},
+		get isRequired() {
+			return !!ariaProps.isRequired;
+		},
+		get isSelected() {
+			return hasSelection();
+		}
+	};
+	const renderProps = useRenderProps({
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-Select"
+	}, renderValues);
+	const domProps = createMemo(() => {
+		const filtered = filterDOMProps(ariaProps, { global: true });
+		for (const key of selectRootLabelProps) delete filtered[key];
+		return filtered;
+	});
+	const cleanHoverProps = () => {
+		const { ref: _ref, ...rest } = hoverProps;
+		return rest;
+	};
+	const cleanLabelProps = () => {
+		const { ref: _ref, ...rest } = labelProps;
+		return rest;
+	};
+	const setRootRef = (el) => {
+		rootRef = el;
+		assignRef(local.ref, el);
+	};
+	const validation = createMemo(() => {
+		const current = selectValidation();
+		if (current.isInvalid || !ariaProps.isInvalid) return current;
+		return {
+			...DEFAULT_VALIDATION_RESULT,
+			isInvalid: true
+		};
+	});
+	const isInvalid = createMemo(() => validation().isInvalid);
+	const triggerDescribedBy = () => {
+		const ids = [triggerProps["aria-describedby"], isInvalid() ? errorMessageId : void 0].filter(Boolean).join(" ").split(" ").filter(Boolean);
+		return ids.length ? Array.from(new Set(ids)).join(" ") : void 0;
+	};
+	const triggerPropsWithValidation = () => ({
+		...triggerProps,
+		"aria-describedby": triggerDescribedBy()
+	});
+	const fieldErrorContext = {
+		get validation() {
+			return validation();
+		},
+		get errorMessageProps() {
+			return { id: errorMessageId };
+		}
+	};
+	const focusTrigger = () => {
+		triggerRef?.focus();
+	};
+	const hasSelection = () => state.selectionMode() === "multiple" ? state.selectedKeys() === "all" || state.selectedKeys().size > 0 : state.selectedKey() != null;
+	const hasNativeValidation = () => (ariaProps.validationBehavior ?? "native") === "native";
+	const getSelectValidation = (select) => {
+		if (ariaProps.isRequired && !hasSelection()) return {
+			isInvalid: true,
+			validationDetails: {
+				badInput: false,
+				customError: false,
+				patternMismatch: false,
+				rangeOverflow: false,
+				rangeUnderflow: false,
+				stepMismatch: false,
+				tooLong: false,
+				tooShort: false,
+				typeMismatch: false,
+				valueMissing: true,
+				valid: false
+			},
+			validationErrors: [select.validationMessage || "Constraints not satisfied"]
+		};
+		return getNativeSelectValidation(select);
+	};
+	const { containerProps, selectProps: hiddenSelectProps } = createHiddenSelect({
+		state,
+		name: stateProps.name,
+		form: ariaProps.form,
+		isRequired: ariaProps.isRequired,
+		validationBehavior: ariaProps.validationBehavior ?? "native",
+		get isDisabled() {
+			return resolveDisabled();
+		}
+	});
+	const handleHiddenSelectInvalid = (event) => {
+		setSelectValidation(getSelectValidation(event.currentTarget));
+		focusTrigger();
+		event.preventDefault();
+	};
+	const handleHiddenSelectChange = (event) => {
+		hiddenSelectProps.onChange?.(event);
+		setSelectValidation(hasSelection() && event.currentTarget.validity.valid ? DEFAULT_VALIDATION_RESULT : getSelectValidation(event.currentTarget));
+	};
+	createEffect(() => {
+		if (hasSelection() && selectValidation().isInvalid) setSelectValidation(DEFAULT_VALIDATION_RESULT);
+	});
+	let triggerRef = null;
+	const setTriggerRef = (el) => {
+		triggerRef = el;
+	};
+	const RootChildren = () => {
+		const selectChildren = untrack(() => typeof local.children === "function" ? local.children(childRenderValues) : local.children);
+		return <>
+        <div {...containerProps}>
+          <select {...hiddenSelectProps} name={hasSelection() ? void 0 : stateProps.name} required={hasNativeValidation() && ariaProps.isRequired && !hasSelection() || void 0} onInvalid={handleHiddenSelectInvalid} onChange={handleHiddenSelectChange}>
+            <Show when={state.selectionMode() !== "multiple"}>
+              <option selected={state.selectedKey() == null} />
+            </Show>
+            <For each={stateProps.items}>
+              {(item) => {
+			const itemRecord = isObjectRecord(item) ? item : null;
+			const fallbackKey = itemRecord != null ? toKey(itemRecord.key) ?? toKey(itemRecord.id) : void 0;
+			const key = stateProps.getKey?.(item) ?? fallbackKey ?? String(item);
+			const fallbackTextValue = itemRecord != null ? toTextValue(itemRecord.textValue) ?? toTextValue(itemRecord.label) : void 0;
+			const textValue = stateProps.getTextValue?.(item) ?? fallbackTextValue ?? String(item);
+			const selectedKeys = state.selectedKeys();
+			const isSelected = state.selectionMode() === "multiple" ? selectedKeys === "all" ? true : selectedKeys.has(key) : key === state.selectedKey();
+			return <option value={String(key)} selected={isSelected}>
+                    {textValue}
+                  </option>;
+		}}
+            </For>
+          </select>
+          <Show when={state.selectionMode() === "multiple" && stateProps.name}>
+            <For each={state.selectedKeys() === "all" ? Array.from(state.collection()).map((item) => item.key) : Array.from(state.selectedKeys())}>
+              {(key) => <input type="hidden" name={stateProps.name} form={ariaProps.form} value={String(key)} disabled={resolveDisabled()} />}
+            </For>
+          </Show>
+          <Show when={state.selectionMode() !== "multiple" && stateProps.name && state.selectedKey() != null}>
+            <input type="hidden" name={stateProps.name} form={ariaProps.form} value={String(state.selectedKey())} disabled={resolveDisabled()} />
+          </Show>
+        </div>
+        <Show when={ariaProps.label}>
+          <span {...cleanLabelProps()}>{ariaProps.label}</span>
+        </Show>
+        {selectChildren}
+      </>;
+	};
+	const baseRootProps = () => ({
+		...domProps(),
+		...cleanHoverProps(),
+		ref: setRootRef,
+		class: renderProps.class(),
+		style: renderProps.style(),
+		slot: local.slot,
+		"data-open": isOpen() || void 0,
+		"data-disabled": resolveDisabled() || void 0,
+		"data-required": ariaProps.isRequired || void 0,
+		"data-invalid": isInvalid() || void 0,
+		"data-hovered": isHovered() || void 0
+	});
+	const RootContent = () => {
+		const renderedRootChildren = <RootChildren />;
+		const rootProps = () => ({
+			...baseRootProps(),
+			children: renderedRootChildren
+		});
+		return local.render ? local.render(rootProps(), renderValues()) : <div {...baseRootProps()}>{renderedRootChildren}</div>;
+	};
+	return <SelectContext.Provider value={{
+		state,
+		rootRef: () => rootRef ?? null,
+		triggerRef: () => triggerRef,
+		setTriggerRef,
+		get triggerProps() {
+			return triggerPropsWithValidation();
+		},
+		valueProps,
+		labelProps,
+		menuProps,
+		get errorMessageProps() {
+			return { id: errorMessageId };
+		},
+		get validation() {
+			return validation();
+		},
+		isOpen,
+		isFocused,
+		isFocusVisible,
+		isDisabled: resolveDisabled,
+		placeholder: ariaProps.placeholder,
+		items: stateProps.items,
+		autoFocus: !!ariaProps.autoFocus
+	}}>
+      <SelectStateContext.Provider value={state}>
+        <FieldErrorContext.Provider value={fieldErrorContext}>
+          <RootContent />
+        </FieldErrorContext.Provider>
+      </SelectStateContext.Provider>
+    </SelectContext.Provider>;
+}
+/**
+* The trigger button for a select.
+*/
+function SelectTrigger(props) {
+	const [local, domProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"children"
+	]);
+	const context = useContext(SelectContext);
+	if (!context) throw new Error("SelectTrigger must be used within a Select");
+	const { isOpen, isFocused, isFocusVisible, state } = context;
+	let triggerRef;
+	const setTriggerRef = (el) => {
+		triggerRef = el;
+		context.setTriggerRef(el);
+	};
+	createEffect(() => {
+		if (context.autoFocus) triggerRef?.focus();
+	});
+	const { isHovered, hoverProps } = createHover({ get isDisabled() {
+		return state.isDisabled;
+	} });
+	const renderValues = createMemo(() => ({
+		isOpen: isOpen(),
+		isFocused: isFocused(),
+		isFocusVisible: isFocusVisible(),
+		isHovered: isHovered(),
+		isDisabled: state.isDisabled
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-Select-trigger"
+	}, renderValues);
+	const cleanTriggerProps = () => {
+		const { ref: _ref1, ...rest } = context.triggerProps;
+		return rest;
+	};
+	const cleanHoverProps = () => {
+		const { ref: _ref2, ...rest } = hoverProps;
+		return rest;
+	};
+	const triggerAriaProps = () => context.triggerProps;
+	const menuAriaProps = () => context.menuProps;
+	return <button ref={setTriggerRef} {...domProps} {...cleanTriggerProps()} {...cleanHoverProps()} type="button" id={triggerAriaProps().id} tabIndex={state.isDisabled ? void 0 : 0} aria-label={triggerAriaProps()["aria-label"]} aria-labelledby={triggerAriaProps()["aria-labelledby"]} aria-haspopup="listbox" aria-expanded={isOpen()} aria-controls={isOpen() ? menuAriaProps().id : void 0} aria-disabled={state.isDisabled || void 0} aria-required={triggerAriaProps()["aria-required"]} aria-describedby={triggerAriaProps()["aria-describedby"]} 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}>
+      {renderProps.renderChildren()}
+    </button>;
+}
+function defaultSelectValueChildren(values) {
+	return values.selectedText ?? values.placeholder ?? "";
+}
+/**
+* Displays the selected value in a select.
+*/
+function SelectValue(props) {
+	const [local, domProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"placeholder",
+		"children"
+	]);
+	const context = useContext(SelectContext);
+	if (!context) throw new Error("SelectValue must be used within a Select");
+	const { valueProps, placeholder: contextPlaceholder } = context;
+	const state = context.state;
+	const placeholder = () => local.placeholder ?? contextPlaceholder;
+	const renderValues = createMemo(() => {
+		const collection = state.collection();
+		const selectedItem = state.selectedKey() == null ? null : collection.getItem(state.selectedKey());
+		const selectedKeys = state.selectedKeys();
+		const selectedItems = selectedKeys === "all" ? Array.from(collection) : Array.from(selectedKeys).map((key) => collection.getItem(key)).filter((item) => item != null);
+		return {
+			selectedItem,
+			selectedItems,
+			selectedText: state.selectionMode() === "multiple" ? selectedItems.length > 0 ? new Intl.ListFormat(void 0, {
+				style: "long",
+				type: "conjunction"
+			}).format(selectedItems.map((item) => item.textValue)) : null : selectedItem?.textValue ?? null,
+			isSelected: state.selectionMode() === "multiple" ? selectedItems.length > 0 : selectedItem != null,
+			placeholder: placeholder()
+		};
+	});
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children ?? defaultSelectValueChildren;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-Select-value"
+	}, renderValues);
+	return <span {...domProps} {...valueProps} class={renderProps.class()} style={renderProps.style()} data-placeholder={!renderValues().isSelected || void 0}>
+      {props.children == null ? renderValues().selectedText ?? renderValues().placeholder ?? "" : renderProps.renderChildren()}
+    </span>;
+}
+/**
+* The listbox popup for a select.
+*/
+function SelectListBox(props) {
+	const [local, domProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"children",
+		"renderEmptyState",
+		"onLoadMore",
+		"isLoading",
+		"renderLoadMore",
+		"loadMoreClass",
+		"isInPopover"
+	]);
+	const context = useContext(SelectContext);
+	if (!context) throw new Error("SelectListBox must be used within a Select");
+	const { menuProps, rootRef, state: selectState, isOpen } = context;
+	const state = selectState;
+	createEffect(() => {
+		if (!isOpen()) return;
+		if (state.focusedKey() != null) return;
+		const selectedKey = state.selectedKey();
+		if (selectedKey != null && !state.collection().getItem(selectedKey)?.isDisabled) state.setFocusedKey(selectedKey);
+	});
+	let listBoxRef;
+	createInteractOutside({
+		ref: () => rootRef() ?? listBoxRef ?? null,
+		onInteractOutside: () => {
+			if (isOpen()) state.close();
+		},
+		get isDisabled() {
+			return !isOpen() || local.isInPopover === true;
+		}
+	});
+	const { listBoxProps } = createListBox({
+		...menuProps,
+		shouldSelectOnPressUp: true,
+		shouldFocusOnHover: true,
+		shouldSelectOnFocus: local.isInPopover === true ? false : void 0,
+		get isDisabled() {
+			return state.isDisabled;
+		}
+	}, createSelectListStateAdapter(state));
+	const renderValues = createMemo(() => ({ isFocused: state.selectionManager.isFocused }));
+	const renderProps = useRenderProps({
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-Select-listbox"
+	}, renderValues);
+	const cleanMenuProps = () => {
+		const { ref: _ref1, ...rest } = menuProps;
+		return rest;
+	};
+	const cleanListBoxProps = () => {
+		const { ref: _ref2, ...rest } = listBoxProps;
+		return rest;
+	};
+	const items = () => Array.from(state.collection());
+	createEffect(() => {
+		if (!isOpen()) return;
+		const focusedKey = state.focusedKey();
+		if (focusedKey == null) return;
+		queueMicrotask(() => {
+			const option = Array.from(listBoxRef?.querySelectorAll("[role='option']") ?? []).find((element) => element.id === String(focusedKey));
+			if (option && document.activeElement !== option) focusSafely(option);
+		});
+	});
+	const listBox = () => <ul ref={(el) => listBoxRef = el} {...domProps} {...cleanMenuProps()} {...cleanListBoxProps()} class={renderProps.class()} style={renderProps.style()} data-focused={state.selectionManager.isFocused || void 0} data-empty={state.collection().size === 0 || void 0}>
+      {state.collection().size === 0 && local.renderEmptyState ? <li role="option" style={{ display: "contents" }} data-empty-state>
+          {local.renderEmptyState()}
+        </li> : <Show when={local.children} fallback={<For each={items()}>
+              {(node) => <SelectOption id={node.key}>{node.textValue}</SelectOption>}
+            </For>}>
+          <For each={items()}>
+            {(node) => node.value != null ? local.children(node.value) : null}
+          </For>
+        </Show>}
+      <Show when={local.onLoadMore}>
+        <ListBoxLoadMoreItem onLoadMore={local.onLoadMore} isLoading={local.isLoading} class={local.loadMoreClass}>
+          {local.renderLoadMore?.()}
+        </ListBoxLoadMoreItem>
+      </Show>
+    </ul>;
+	return <Show when={isOpen()}>
+      <Show when={local.isInPopover} fallback={<FocusScope restoreFocus autoFocus>
+            {listBox()}
+          </FocusScope>}>
+        {listBox()}
+      </Show>
+    </Show>;
+}
+/**
+* An option in a select listbox.
+*/
+function SelectOption(props) {
+	const [local, ariaProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"id",
+		"item",
+		"textValue"
+	]);
+	const context = useContext(SelectStateContext);
+	if (!context) throw new Error("SelectOption must be used within a Select");
+	const state = context;
+	const selectContext = useContext(SelectContext);
+	const [ref, setRef] = createSignal(null);
+	const optionAria = createOption({
+		key: local.id,
+		get isDisabled() {
+			return Boolean(ariaProps.isDisabled || selectContext?.isDisabled());
+		},
+		get "aria-label"() {
+			return ariaProps["aria-label"] ?? local.textValue;
+		},
+		shouldSelectOnPressUp: true,
+		shouldFocusOnHover: true,
+		get onHoverStart() {
+			return ariaProps.onHoverStart;
+		},
+		get onHoverEnd() {
+			return ariaProps.onHoverEnd;
+		},
+		get onHoverChange() {
+			return ariaProps.onHoverChange;
+		}
+	}, {
+		...createSelectListStateAdapter(state),
+		select: (key) => {
+			if (state.selectionMode() === "multiple") {
+				const keys = state.selectedKeys();
+				if (keys === "all") return;
+				state.setSelectedKeys(new Set([...keys, key]));
+				return;
+			}
+			state.setSelectedKey(key);
+			state.close();
+		},
+		toggleSelection: (key) => {
+			if (state.selectionMode() === "multiple") {
+				const keys = state.selectedKeys();
+				if (keys === "all") return;
+				const next = new Set(keys);
+				if (next.has(key)) next.delete(key);
+				else next.add(key);
+				state.setSelectedKeys(next);
+				return;
+			}
+			state.setSelectedKey(key);
+			state.close();
+		},
+		replaceSelection: (key) => {
+			state.setSelectedKey(key);
+			if (state.selectionMode() !== "multiple") state.close();
+		}
+	}, () => ref());
+	const isOptionFocusVisible = () => optionAria.isFocused() && (selectContext?.isFocusVisible() ?? optionAria.isFocusVisible());
+	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-Select-option"
+	}, renderValues);
+	const hasPrimitiveLabel = () => {
+		return typeof props.children === "string" || typeof props.children === "number";
+	};
+	const selectionIndicatorContext = createMemo(() => ({ isSelected: optionAria.isSelected }));
+	const cleanOptionProps = () => {
+		const { ref: _ref1, "aria-describedby": _ariaDescribedby, ...rest } = optionAria.optionProps;
+		if (!hasPrimitiveLabel() && rest["aria-label"] == null) delete rest["aria-labelledby"];
+		const onClick = rest.onClick;
+		rest.onClick = ((event) => {
+			const wasSelected = optionAria.isSelected();
+			onClick?.(event);
+			if (typeof PointerEvent === "undefined") return;
+			queueMicrotask(() => {
+				if (state.selectionMode() !== "multiple" || optionAria.isSelected() === wasSelected) selectOption();
+			});
+		});
+		return rest;
+	};
+	const selectOption = () => {
+		if (optionAria.isDisabled()) return;
+		if (state.selectionMode() === "multiple") {
+			const keys = state.selectedKeys();
+			if (keys === "all") return;
+			const next = new Set(keys);
+			if (next.has(local.id)) next.delete(local.id);
+			else next.add(local.id);
+			state.setSelectedKeys(next);
+			return;
+		}
+		state.setSelectedKey(local.id);
+		state.close();
+	};
+	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}>
+        {hasPrimitiveLabel() ? <span {...optionAria.labelProps}>{renderProps.renderChildren()}</span> : renderProps.renderChildren()}
+      </li>
+    </SelectionIndicatorContext.Provider>;
+}
+function isObjectRecord(value) {
+	return typeof value === "object" && value !== null;
+}
+function toKey(value) {
+	if (typeof value === "string" || typeof value === "number") return value;
+}
+function toTextValue(value) {
+	if (typeof value === "string" || typeof value === "number") return String(value);
+}
+function createSelectListStateAdapter(state) {
+	const selectedKeys = createMemo(() => {
+		const keys = state.selectedKeys();
+		return keys === "all" ? new Set(Array.from(state.collection()).map((item) => item.key)) : keys;
+	});
+	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.selectionManager.isFocused,
+		setFocused: (isFocused) => state.selectionManager.setFocused(isFocused),
+		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: () => state.selectedKeys() === "all",
+		isSelected: (key) => selectedKeys().has(key),
+		isDisabled: state.isKeyDisabled,
+		setSelectionBehavior: () => {},
+		toggleSelection: (key) => {
+			if (state.selectionMode() !== "multiple") {
+				state.setSelectedKey(key);
+				return;
+			}
+			const keys = state.selectedKeys();
+			if (keys === "all") return;
+			const next = new Set(keys);
+			if (next.has(key)) next.delete(key);
+			else next.add(key);
+			state.setSelectedKeys(next);
+		},
+		replaceSelection: (key) => state.setSelectedKey(key),
+		setSelectedKeys: (keys) => state.setSelectedKeys(keys),
+		selectAll: () => {},
+		clearSelection: () => state.selectionMode() === "multiple" ? state.setSelectedKeys([]) : state.setSelectedKey(null),
+		toggleSelectAll: () => {},
+		extendSelection: (toKey) => state.setSelectedKey(toKey),
+		select: (key) => state.selectionMode() === "multiple" ? state.setSelectedKeys([...state.selectedKeys() === "all" ? [] : state.selectedKeys(), key]) : state.setSelectedKey(key)
+	};
+}
+Select.Trigger = SelectTrigger;
+Select.Value = SelectValue;
+Select.ListBox = SelectListBox;
+Select.Option = SelectOption;
+//#endregion
+export { Select, SelectContext, SelectListBox, SelectOption, SelectStateContext, SelectTrigger, SelectValue, SelectValueContext };
+
+//# sourceMappingURL=Select.jsx.map