@proyecto-viviana/solidaria-components 0.3.2 → 0.4.0

package/dist/Select.js

@@ -0,0 +1,1031 @@
+import { filterDOMProps, useRenderProps } from "./utils.js";
+import { FieldErrorContext } from "./FieldError.js";
+import { SelectionIndicatorContext } from "./SelectionIndicator.js";
+import { ListBoxLoadMoreItem } from "./ListBox.js";
+import { createComponent, effect, getNextElement, getNextMarker, insert, memo, mergeProps, runHydrationEvents, setAttribute, setProperty, spread, template, use } from "solid-js/web";
+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$2 } 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
+*/
+var _tmpl$ = /*#__PURE__*/ template(`<option>`), _tmpl$2 = /*#__PURE__*/ template(`<input type=hidden>`), _tmpl$3 = /*#__PURE__*/ template(`<div><select><!$><!/><!$><!/></select><!$><!/><!$><!/>`), _tmpl$4 = /*#__PURE__*/ template(`<span>`), _tmpl$5 = /*#__PURE__*/ template(`<div>`), _tmpl$6 = /*#__PURE__*/ template(`<button>`), _tmpl$7 = /*#__PURE__*/ template(`<ul><!$><!/><!$><!/>`), _tmpl$8 = /*#__PURE__*/ template(`<li role=option data-empty-state style=display:contents>`), _tmpl$9 = /*#__PURE__*/ template(`<li>`);
+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$2(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 [
+			(() => {
+				var _el$ = getNextElement(_tmpl$3), _el$2 = _el$.firstChild, _el$4 = _el$2.firstChild, [_el$5, _co$] = getNextMarker(_el$4.nextSibling), _el$6 = _el$5.nextSibling, [_el$7, _co$2] = getNextMarker(_el$6.nextSibling), _el$9 = _el$2.nextSibling, [_el$0, _co$3] = getNextMarker(_el$9.nextSibling), _el$1 = _el$0.nextSibling, [_el$10, _co$4] = getNextMarker(_el$1.nextSibling);
+				spread(_el$, containerProps, false, true);
+				spread(_el$2, mergeProps(hiddenSelectProps, {
+					get name() {
+						return memo(() => !!hasSelection())() ? void 0 : stateProps.name;
+					},
+					get required() {
+						return memo(() => !!(hasNativeValidation() && ariaProps.isRequired))() && !hasSelection() || void 0;
+					},
+					"onInvalid": handleHiddenSelectInvalid,
+					"onChange": handleHiddenSelectChange
+				}), false, true);
+				insert(_el$2, createComponent(Show, {
+					get when() {
+						return state.selectionMode() !== "multiple";
+					},
+					get children() {
+						var _el$3 = getNextElement(_tmpl$);
+						effect(() => setProperty(_el$3, "selected", state.selectedKey() == null));
+						return _el$3;
+					}
+				}), _el$5, _co$);
+				insert(_el$2, createComponent(For, {
+					get each() {
+						return stateProps.items;
+					},
+					children: (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 (() => {
+							var _el$12 = getNextElement(_tmpl$);
+							setProperty(_el$12, "selected", isSelected);
+							insert(_el$12, textValue);
+							effect(() => setProperty(_el$12, "value", String(key)));
+							return _el$12;
+						})();
+					}
+				}), _el$7, _co$2);
+				insert(_el$, createComponent(Show, {
+					get when() {
+						return memo(() => state.selectionMode() === "multiple")() && stateProps.name;
+					},
+					get children() {
+						return createComponent(For, {
+							get each() {
+								return memo(() => state.selectedKeys() === "all")() ? Array.from(state.collection()).map((item) => item.key) : Array.from(state.selectedKeys());
+							},
+							children: (key) => (() => {
+								var _el$13 = getNextElement(_tmpl$2);
+								effect((_p$) => {
+									var _v$4 = stateProps.name, _v$5 = ariaProps.form, _v$6 = resolveDisabled();
+									_v$4 !== _p$.e && setAttribute(_el$13, "name", _p$.e = _v$4);
+									_v$5 !== _p$.t && setAttribute(_el$13, "form", _p$.t = _v$5);
+									_v$6 !== _p$.a && setProperty(_el$13, "disabled", _p$.a = _v$6);
+									return _p$;
+								}, {
+									e: void 0,
+									t: void 0,
+									a: void 0
+								});
+								effect(() => setProperty(_el$13, "value", String(key)));
+								return _el$13;
+							})()
+						});
+					}
+				}), _el$0, _co$3);
+				insert(_el$, createComponent(Show, {
+					get when() {
+						return memo(() => !!(state.selectionMode() !== "multiple" && stateProps.name))() && state.selectedKey() != null;
+					},
+					get children() {
+						var _el$8 = getNextElement(_tmpl$2);
+						effect((_p$) => {
+							var _v$ = stateProps.name, _v$2 = ariaProps.form, _v$3 = resolveDisabled();
+							_v$ !== _p$.e && setAttribute(_el$8, "name", _p$.e = _v$);
+							_v$2 !== _p$.t && setAttribute(_el$8, "form", _p$.t = _v$2);
+							_v$3 !== _p$.a && setProperty(_el$8, "disabled", _p$.a = _v$3);
+							return _p$;
+						}, {
+							e: void 0,
+							t: void 0,
+							a: void 0
+						});
+						effect(() => setProperty(_el$8, "value", String(state.selectedKey())));
+						return _el$8;
+					}
+				}), _el$10, _co$4);
+				runHydrationEvents();
+				return _el$;
+			})(),
+			createComponent(Show, {
+				get when() {
+					return ariaProps.label;
+				},
+				get children() {
+					var _el$11 = getNextElement(_tmpl$4);
+					spread(_el$11, mergeProps(cleanLabelProps), false, true);
+					insert(_el$11, () => ariaProps.label);
+					runHydrationEvents();
+					return _el$11;
+				}
+			}),
+			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 = createComponent(RootChildren, {});
+		const rootProps = () => ({
+			...baseRootProps(),
+			children: renderedRootChildren
+		});
+		return local.render ? local.render(rootProps(), renderValues()) : (() => {
+			var _el$14 = getNextElement(_tmpl$5);
+			spread(_el$14, mergeProps(baseRootProps), false, true);
+			insert(_el$14, renderedRootChildren);
+			runHydrationEvents();
+			return _el$14;
+		})();
+	};
+	return createComponent(SelectContext.Provider, {
+		get value() {
+			return {
+				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
+			};
+		},
+		get children() {
+			return createComponent(SelectStateContext.Provider, {
+				value: state,
+				get children() {
+					return createComponent(FieldErrorContext.Provider, {
+						value: fieldErrorContext,
+						get children() {
+							return createComponent(RootContent, {});
+						}
+					});
+				}
+			});
+		}
+	});
+}
+/**
+* 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 (() => {
+		var _el$15 = getNextElement(_tmpl$6);
+		use(setTriggerRef, _el$15);
+		spread(_el$15, mergeProps(domProps, cleanTriggerProps, cleanHoverProps, {
+			"type": "button",
+			get id() {
+				return triggerAriaProps().id;
+			},
+			get tabIndex() {
+				return state.isDisabled ? void 0 : 0;
+			},
+			get ["aria-label"]() {
+				return triggerAriaProps()["aria-label"];
+			},
+			get ["aria-labelledby"]() {
+				return triggerAriaProps()["aria-labelledby"];
+			},
+			"aria-haspopup": "listbox",
+			get ["aria-expanded"]() {
+				return isOpen();
+			},
+			get ["aria-controls"]() {
+				return memo(() => !!isOpen())() ? menuAriaProps().id : void 0;
+			},
+			get ["aria-disabled"]() {
+				return state.isDisabled || void 0;
+			},
+			get ["aria-required"]() {
+				return triggerAriaProps()["aria-required"];
+			},
+			get ["aria-describedby"]() {
+				return triggerAriaProps()["aria-describedby"];
+			},
+			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, true);
+		insert(_el$15, () => renderProps.renderChildren());
+		runHydrationEvents();
+		return _el$15;
+	})();
+}
+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 (() => {
+		var _el$16 = getNextElement(_tmpl$4);
+		spread(_el$16, mergeProps(domProps, valueProps, {
+			get ["class"]() {
+				return renderProps.class();
+			},
+			get style() {
+				return renderProps.style();
+			},
+			get ["data-placeholder"]() {
+				return !renderValues().isSelected || void 0;
+			}
+		}), false, true);
+		insert(_el$16, (() => {
+			var _c$ = memo(() => props.children == null);
+			return () => _c$() ? renderValues().selectedText ?? renderValues().placeholder ?? "" : renderProps.renderChildren();
+		})());
+		runHydrationEvents();
+		return _el$16;
+	})();
+}
+/**
+* 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 = () => (() => {
+		var _el$17 = getNextElement(_tmpl$7), _el$18 = _el$17.firstChild, [_el$19, _co$5] = getNextMarker(_el$18.nextSibling), _el$20 = _el$19.nextSibling, [_el$21, _co$6] = getNextMarker(_el$20.nextSibling);
+		use((el) => listBoxRef = el, _el$17);
+		spread(_el$17, mergeProps(domProps, cleanMenuProps, cleanListBoxProps, {
+			get ["class"]() {
+				return renderProps.class();
+			},
+			get style() {
+				return renderProps.style();
+			},
+			get ["data-focused"]() {
+				return state.selectionManager.isFocused || void 0;
+			},
+			get ["data-empty"]() {
+				return state.collection().size === 0 || void 0;
+			}
+		}), false, true);
+		insert(_el$17, (() => {
+			var _c$2 = memo(() => !!(state.collection().size === 0 && local.renderEmptyState));
+			return () => _c$2() ? (() => {
+				var _el$22 = getNextElement(_tmpl$8);
+				insert(_el$22, () => local.renderEmptyState());
+				return _el$22;
+			})() : createComponent(Show, {
+				get when() {
+					return local.children;
+				},
+				get fallback() {
+					return createComponent(For, {
+						get each() {
+							return items();
+						},
+						children: (node) => createComponent(SelectOption, {
+							get id() {
+								return node.key;
+							},
+							get children() {
+								return node.textValue;
+							}
+						})
+					});
+				},
+				get children() {
+					return createComponent(For, {
+						get each() {
+							return items();
+						},
+						children: (node) => node.value != null ? local.children(node.value) : null
+					});
+				}
+			});
+		})(), _el$19, _co$5);
+		insert(_el$17, createComponent(Show, {
+			get when() {
+				return local.onLoadMore;
+			},
+			get children() {
+				return createComponent(ListBoxLoadMoreItem, {
+					get onLoadMore() {
+						return local.onLoadMore;
+					},
+					get isLoading() {
+						return local.isLoading;
+					},
+					get ["class"]() {
+						return local.loadMoreClass;
+					},
+					get children() {
+						return local.renderLoadMore?.();
+					}
+				});
+			}
+		}), _el$21, _co$6);
+		runHydrationEvents();
+		return _el$17;
+	})();
+	return createComponent(Show, {
+		get when() {
+			return isOpen();
+		},
+		get children() {
+			return createComponent(Show, {
+				get when() {
+					return local.isInPopover;
+				},
+				get fallback() {
+					return createComponent(FocusScope, {
+						restoreFocus: true,
+						autoFocus: true,
+						get children() {
+							return listBox();
+						}
+					});
+				},
+				get children() {
+					return listBox();
+				}
+			});
+		}
+	});
+}
+/**
+* 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 createComponent(SelectionIndicatorContext.Provider, {
+		get value() {
+			return selectionIndicatorContext();
+		},
+		get children() {
+			var _el$23 = getNextElement(_tmpl$9);
+			use(setRef, _el$23);
+			spread(_el$23, 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$23, (() => {
+				var _c$3 = memo(() => !!hasPrimitiveLabel());
+				return () => _c$3() ? (() => {
+					var _el$24 = getNextElement(_tmpl$4);
+					spread(_el$24, mergeProps(() => optionAria.labelProps), false, true);
+					insert(_el$24, () => renderProps.renderChildren());
+					runHydrationEvents();
+					return _el$24;
+				})() : renderProps.renderChildren();
+			})());
+			runHydrationEvents();
+			return _el$23;
+		}
+	});
+}
+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.js.map