@proyecto-viviana/solidaria-components 0.5.0 → 0.7.0-rc.0

package/dist/Select.js

@@ -1,10 +1,27 @@
-import { filterDOMProps, useRenderProps } from "./utils.js";
+/*
+* Copyright 2022 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/Select.tsx
+import { DEFAULT_SLOT, OptionContent, Provider, ariaTrueFalse, attrTrue, coerceDomRecord, dataAttr, filterDOMProps, useRenderProps } from "./utils.js";
+import { TextContext } from "./Text.js";
 import { FieldErrorContext } from "./FieldError.js";
 import { SelectionIndicatorContext } from "./SelectionIndicator.js";
+import { t as racIntlStrings } from "./intl.js";
+import { useCollectionRenderer, useCollectionRoot } from "./Collection.js";
+import { i as VirtualizerItem } from "./Virtualizer2.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 { createComponent, effect, getNextElement, getNextMarker, insert, memo, ref, runHydrationEvents, scope, setProperty, spread, template } from "@solidjs/web";
+import { For, Show, createContext, createMemo, createRenderEffect, createSignal, createTrackedEffect, untrack, useContext } from "solid-js";
+import { FocusScope, createFocusRing, createHiddenSelect, createHover, createInteractOutside, createListBox, createListFormatter, createOption, createSelect, createStringFormatter, focusSafely, getInteractionModality, mergeProps as mergeProps$1 } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import { DEFAULT_VALIDATION_RESULT, createSelectState } from "@proyecto-viviana/solid-stately";
 //#region src/Select.tsx
 /**
@@ -13,8 +30,15 @@ import { DEFAULT_VALIDATION_RESULT, createSelectState } from "@proyecto-viviana/
 * A pre-wired headless select that combines state + aria hooks.
 * Port of react-aria-components/src/Select.tsx
 */
-var _tmpl$ = /*#__PURE__*/ template(`<span>`), _tmpl$2 = /*#__PURE__*/ template(`<option>`), _tmpl$3 = /*#__PURE__*/ template(`<input type=hidden>`), _tmpl$4 = /*#__PURE__*/ template(`<div><select><!$><!/><!$><!/></select><!$><!/><!$><!/>`), _tmpl$5 = /*#__PURE__*/ template(`<div>`), _tmpl$6 = /*#__PURE__*/ template(`<button>`), _tmpl$7 = /*#__PURE__*/ template(`<div><!$><!/><!$><!/>`), _tmpl$8 = /*#__PURE__*/ template(`<div role=option data-empty-state style=display:contents>`);
-function assignRef(ref, el) {
+var _tmpl$ = /* @__PURE__ */ template(`<span>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div><label><!$><!/><select><option value label= > </option><!$><!/><!$><!/>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<input>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<option>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$6 = /* @__PURE__ */ template(`<button>`);
+var _tmpl$7 = /* @__PURE__ */ template(`<div><!$><!/><!$><!/><!$><!/>`);
+var _tmpl$8 = /* @__PURE__ */ template(`<div role=option data-empty-state style=display:contents>`);
+function assignRef$1(ref, el) {
 	if (!ref) return;
 	if (typeof ref === "function") ref(el);
 	else ref.current = el;
@@ -41,7 +65,10 @@ function getNativeSelectValidation(select) {
 const SelectContext = createContext(null);
 const SelectStateContext = createContext(null);
 const SelectValueContext = SelectContext;
-const selectRootLabelProps = new Set([
+/** True when this SelectListBox is the overlay list (Picker / Popover). */
+const SelectListBoxInPopoverContext = createContext(false);
+function noopOptionFocus() {}
+const selectRootLabelProps = /* @__PURE__ */ new Set([
 	"aria-label",
 	"aria-labelledby",
 	"aria-describedby",
@@ -51,8 +78,9 @@ const selectRootLabelProps = new Set([
 * 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, [
+	const contextSlotProps = useContext(SelectContext)?.slots?.[typeof props.slot === "string" ? props.slot : "default"];
+	const mergedSelectProps = contextSlotProps ? mergeProps$1(contextSlotProps, props) : props;
+	const [local, stateProps, ariaProps] = splitProps(mergedSelectProps, [
 		"class",
 		"style",
 		"render",
@@ -79,7 +107,6 @@ function Select(props) {
 	]);
 	let rootRef;
 	const [selectValidation, setSelectValidation] = createSignal(DEFAULT_VALIDATION_RESULT);
-	const errorMessageId = createUniqueId();
 	const resolveDisabled = () => {
 		const disabled = ariaProps.isDisabled;
 		if (typeof disabled === "function") return disabled();
@@ -136,20 +163,47 @@ function Select(props) {
 		},
 		get isRequired() {
 			return ariaProps.isRequired;
+		},
+		get isInvalid() {
+			return ariaProps.isInvalid;
+		},
+		get validationState() {
+			return ariaProps.validationState;
+		},
+		get validate() {
+			return ariaProps.validate;
+		},
+		get name() {
+			return stateProps.name;
+		},
+		get validationBehavior() {
+			return ariaProps.validationBehavior;
 		}
 	});
-	const { labelProps, triggerProps, valueProps, menuProps, isFocused, isFocusVisible, isOpen, isPressed } = createSelect(createMemo(() => {
+	const selectAriaProps = createMemo(() => {
 		const clean = {};
 		for (const key in ariaProps) if (!key.startsWith("data-")) clean[key] = ariaProps[key];
 		return clean;
+	});
+	const isInvalid = createMemo(() => state.displayValidation().isInvalid || selectValidation().isInvalid);
+	const composedValidation = createMemo(() => {
+		const fromState = state.displayValidation();
+		if (fromState.isInvalid) return fromState;
+		return selectValidation();
+	});
+	const selectHook = createSelect(() => ({
+		...selectAriaProps(),
+		isInvalid: isInvalid()
 	}), state);
+	const { isFocused, isFocusVisible, isOpen, isPressed } = selectHook;
 	const { isHovered, hoverProps } = createHover({ get isDisabled() {
 		return resolveDisabled();
 	} });
+	const { isFocusVisible: isFocusVisibleWithin, focusProps } = createFocusRing({ within: true });
 	const renderValues = createMemo(() => ({
 		isOpen: isOpen(),
 		isFocused: isFocused(),
-		isFocusVisible: isFocusVisible(),
+		isFocusVisible: isFocusVisibleWithin(),
 		isDisabled: resolveDisabled(),
 		isRequired: !!ariaProps.isRequired,
 		isSelected: state.selectionMode() === "multiple" ? state.selectedKeys() === "all" || state.selectedKeys().size > 0 : state.selectedKey() != null
@@ -162,7 +216,7 @@ function Select(props) {
 			return isFocused();
 		},
 		get isFocusVisible() {
-			return isFocusVisible();
+			return isFocusVisibleWithin();
 		},
 		get isDisabled() {
 			return resolveDisabled();
@@ -188,37 +242,29 @@ function Select(props) {
 		const { ref: _ref, ...rest } = hoverProps;
 		return rest;
 	};
+	const cleanFocusProps = () => {
+		const { ref: _ref, onFocus, onBlur, ...rest } = focusProps;
+		return {
+			...rest,
+			onFocusIn: onFocus,
+			onFocusOut: onBlur
+		};
+	};
 	const cleanLabelProps = () => {
-		const { ref: _ref, ...rest } = labelProps;
+		const { ref: _ref, ...rest } = selectHook.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;
+		assignRef$1(local.ref, el);
 	};
-	const triggerPropsWithValidation = () => ({
-		...triggerProps,
-		"aria-describedby": triggerDescribedBy()
-	});
+	const triggerPropsWithValidation = () => selectHook.triggerProps;
 	const fieldErrorContext = {
 		get validation() {
-			return validation();
+			return composedValidation();
 		},
 		get errorMessageProps() {
-			return { id: errorMessageId };
+			return selectHook.errorMessageProps;
 		}
 	};
 	const focusTrigger = () => {
@@ -246,12 +292,17 @@ function Select(props) {
 		};
 		return getNativeSelectValidation(select);
 	};
-	const { containerProps, selectProps: hiddenSelectProps } = createHiddenSelect({
+	let triggerRef = null;
+	const setTriggerRef = (el) => {
+		triggerRef = el;
+	};
+	const { containerProps, selectProps: hiddenSelectProps, inputProps: hiddenInputProps } = createHiddenSelect({
 		state,
 		name: stateProps.name,
 		form: ariaProps.form,
 		isRequired: ariaProps.isRequired,
 		validationBehavior: ariaProps.validationBehavior ?? "native",
+		triggerRef: () => triggerRef,
 		get isDisabled() {
 			return resolveDisabled();
 		}
@@ -265,13 +316,29 @@ function Select(props) {
 		hiddenSelectProps.onChange?.(event);
 		setSelectValidation(hasSelection() && event.currentTarget.validity.valid ? DEFAULT_VALIDATION_RESULT : getSelectValidation(event.currentTarget));
 	};
-	createEffect(() => {
+	const hiddenSelectItemNodes = () => Array.from(state.collection()).filter((item) => item.type === "item");
+	const nativeSelectValue = () => {
+		if (state.selectionMode() === "multiple") {
+			const selectedKeys = state.selectedKeys();
+			if (selectedKeys === "all") return hiddenSelectItemNodes().map((item) => String(item.key));
+			return Array.from(selectedKeys).map(String);
+		}
+		const key = state.selectedKey();
+		return key != null ? String(key) : "";
+	};
+	const hiddenSelectFallbackValues = () => {
+		if (state.selectionMode() === "multiple") {
+			const keys = state.selectedKeys();
+			if (keys === "all") return hiddenSelectItemNodes().map((item) => item.key);
+			const listed = Array.from(keys);
+			return listed.length === 0 ? [null] : listed;
+		}
+		return [state.selectedKey()];
+	};
+	createTrackedEffect(() => {
 		if (hasSelection() && selectValidation().isInvalid) setSelectValidation(DEFAULT_VALIDATION_RESULT);
+		if (hasSelection() && !ariaProps.isInvalid && state.displayValidation().isInvalid) state.resetValidation();
 	});
-	let triggerRef = null;
-	const setTriggerRef = (el) => {
-		triggerRef = el;
-	};
 	const RootChildren = () => {
 		const selectChildren = untrack(() => typeof local.children === "function" ? local.children(childRenderValues) : local.children);
 		return [
@@ -281,139 +348,169 @@ function Select(props) {
 				},
 				get children() {
 					var _el$ = getNextElement(_tmpl$);
-					spread(_el$, mergeProps(cleanLabelProps), false, true);
-					insert(_el$, () => ariaProps.label);
+					spread(_el$, cleanLabelProps, true);
+					insert(_el$, () => {
+						return ariaProps.label;
+					});
 					runHydrationEvents();
 					return _el$;
 				}
 			}),
 			selectChildren,
-			(() => {
-				var _el$2 = getNextElement(_tmpl$4), _el$3 = _el$2.firstChild, _el$5 = _el$3.firstChild, [_el$6, _co$] = getNextMarker(_el$5.nextSibling), _el$7 = _el$6.nextSibling, [_el$8, _co$2] = getNextMarker(_el$7.nextSibling), _el$0 = _el$3.nextSibling, [_el$1, _co$3] = getNextMarker(_el$0.nextSibling), _el$10 = _el$1.nextSibling, [_el$11, _co$4] = getNextMarker(_el$10.nextSibling);
-				spread(_el$2, containerProps, false, true);
-				spread(_el$3, 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$3, createComponent(Show, {
-					get when() {
-						return state.selectionMode() !== "multiple";
-					},
-					get children() {
-						var _el$4 = getNextElement(_tmpl$2);
-						effect(() => setProperty(_el$4, "selected", state.selectedKey() == null));
-						return _el$4;
-					}
-				}), _el$6, _co$);
-				insert(_el$3, 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) ?? toTextValue(itemRecord.name) ?? toTextValue(itemRecord.title) : void 0;
-						const textValue = stateProps.getTextValue?.(item) ?? fallbackTextValue ?? (itemRecord != null ? String(key) : 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$2);
-							setProperty(_el$12, "selected", isSelected);
-							insert(_el$12, textValue);
-							effect(() => setProperty(_el$12, "value", String(key)));
-							return _el$12;
-						})();
-					}
-				}), _el$8, _co$2);
-				insert(_el$2, 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$3);
-								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$1, _co$3);
-				insert(_el$2, createComponent(Show, {
-					get when() {
-						return memo(() => !!(state.selectionMode() !== "multiple" && stateProps.name))() && state.selectedKey() != null;
-					},
-					get children() {
-						var _el$9 = getNextElement(_tmpl$3);
-						effect((_p$) => {
-							var _v$ = stateProps.name, _v$2 = ariaProps.form, _v$3 = resolveDisabled();
-							_v$ !== _p$.e && setAttribute(_el$9, "name", _p$.e = _v$);
-							_v$2 !== _p$.t && setAttribute(_el$9, "form", _p$.t = _v$2);
-							_v$3 !== _p$.a && setProperty(_el$9, "disabled", _p$.a = _v$3);
-							return _p$;
-						}, {
-							e: void 0,
-							t: void 0,
-							a: void 0
-						});
-						effect(() => setProperty(_el$9, "value", String(state.selectedKey())));
-						return _el$9;
-					}
-				}), _el$11, _co$4);
-				runHydrationEvents();
-				return _el$2;
-			})()
+			createComponent(Show, {
+				get when() {
+					return state.collection().size <= 300;
+				},
+				get fallback() {
+					return createComponent(Show, {
+						get when() {
+							return stateProps.name;
+						},
+						get children() {
+							return createComponent(For, {
+								get each() {
+									const keys = state.selectionMode() === "multiple" ? state.selectedKeys() === "all" ? Array.from(state.collection()).map((item) => item.key) : Array.from(state.selectedKeys()) : [state.selectedKey()];
+									return keys.length === 0 ? [null] : keys;
+								},
+								children: (key) => (() => {
+									var _el$15 = getNextElement(_tmpl$3);
+									spread(_el$15, [hiddenInputProps, {
+										get name() {
+											return stateProps.name;
+										},
+										get form() {
+											return ariaProps.form;
+										},
+										get value() {
+											return key != null ? String(key) : "";
+										},
+										get disabled() {
+											return resolveDisabled();
+										},
+										onInvalid: handleHiddenSelectInvalid
+									}], false);
+									runHydrationEvents();
+									return _el$15;
+								})()
+							});
+						}
+					});
+				},
+				get children() {
+					var _el$2 = getNextElement(_tmpl$2);
+					var _el$3 = _el$2.firstChild;
+					var _el$4 = _el$3.firstChild;
+					var [_el$5, _el$6] = getNextMarker(_el$4.nextSibling);
+					var _el$7 = _el$5.nextSibling;
+					var _el$9 = _el$7.firstChild.nextSibling;
+					var [_el$10, _el$11] = getNextMarker(_el$9.nextSibling);
+					var _el$12 = _el$10.nextSibling;
+					var [_el$13, _el$14] = getNextMarker(_el$12.nextSibling);
+					spread(_el$2, [() => {
+						return coerceDomRecord(containerProps);
+					}, { "data-testid": "hidden-select-container" }], true);
+					insert(_el$3, () => {
+						return ariaProps.label;
+					}, _el$5, _el$6);
+					spread(_el$7, [hiddenSelectProps, {
+						get name() {
+							return stateProps.name;
+						},
+						get required() {
+							return hasNativeValidation() && ariaProps.isRequired && !hasSelection() || void 0;
+						},
+						get value() {
+							return nativeSelectValue();
+						},
+						onInvalid: handleHiddenSelectInvalid,
+						onChange: handleHiddenSelectChange,
+						onInput: handleHiddenSelectChange
+					}], true);
+					insert(_el$7, createComponent(For, {
+						get each() {
+							return hiddenSelectItemNodes();
+						},
+						children: (item) => (() => {
+							var _el$16 = getNextElement(_tmpl$4);
+							insert(_el$16, () => {
+								return item.textValue;
+							});
+							effect(() => String(item.key), (_v$) => {
+								setProperty(_el$16, "value", _v$);
+							});
+							return _el$16;
+						})()
+					}), _el$10, _el$11);
+					insert(_el$7, createComponent(Show, {
+						get when() {
+							return memo(() => {
+								return state.collection().size === 0;
+							})() && stateProps.name;
+						},
+						get children() {
+							return createComponent(For, {
+								get each() {
+									return hiddenSelectFallbackValues();
+								},
+								children: (value) => (() => {
+									var _el$17 = getNextElement(_tmpl$4);
+									effect(() => value != null ? String(value) : "", (_v$) => {
+										setProperty(_el$17, "value", _v$);
+									});
+									return _el$17;
+								})()
+							});
+						}
+					}), _el$13, _el$14);
+					runHydrationEvents();
+					return _el$2;
+				}
+			})
 		];
 	};
 	const baseRootProps = () => ({
 		...domProps(),
 		...cleanHoverProps(),
+		...cleanFocusProps(),
 		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
+		"data-focused": dataAttr(isFocused()),
+		"data-focus-visible": dataAttr(isFocusVisibleWithin()),
+		"data-open": dataAttr(isOpen()),
+		"data-disabled": dataAttr(resolveDisabled()),
+		"data-required": dataAttr(ariaProps.isRequired),
+		"data-invalid": dataAttr(isInvalid()),
+		"data-hovered": dataAttr(isHovered())
 	});
 	const RootContent = () => {
-		const renderedRootChildren = createComponent(RootChildren, {});
+		const renderedRootChildren = createComponent(Provider, {
+			values: [[TextContext, { slots: {
+				get description() {
+					return selectHook.descriptionProps;
+				},
+				get errorMessage() {
+					return selectHook.errorMessageProps;
+				}
+			} }]],
+			get children() {
+				return 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);
+			var _el$18 = getNextElement(_tmpl$5);
+			spread(_el$18, baseRootProps, true);
+			insert(_el$18, renderedRootChildren);
 			runHydrationEvents();
-			return _el$14;
+			return _el$18;
 		})();
 	};
-	return createComponent(SelectContext.Provider, {
+	return createComponent(SelectContext, {
 		get value() {
 			return {
 				state,
@@ -423,14 +520,20 @@ function Select(props) {
 				get triggerProps() {
 					return triggerPropsWithValidation();
 				},
-				valueProps,
-				labelProps,
-				menuProps,
+				get valueProps() {
+					return selectHook.valueProps;
+				},
+				get labelProps() {
+					return selectHook.labelProps;
+				},
+				get menuProps() {
+					return selectHook.menuProps;
+				},
 				get errorMessageProps() {
-					return { id: errorMessageId };
+					return selectHook.errorMessageProps;
 				},
 				get validation() {
-					return validation();
+					return composedValidation();
 				},
 				isOpen,
 				isFocused,
@@ -443,10 +546,10 @@ function Select(props) {
 			};
 		},
 		get children() {
-			return createComponent(SelectStateContext.Provider, {
+			return createComponent(SelectStateContext, {
 				value: state,
 				get children() {
-					return createComponent(FieldErrorContext.Provider, {
+					return createComponent(FieldErrorContext, {
 						value: fieldErrorContext,
 						get children() {
 							return createComponent(RootContent, {});
@@ -470,14 +573,15 @@ function SelectTrigger(props) {
 	]);
 	const context = useContext(SelectContext);
 	if (!context) throw new Error("SelectTrigger must be used within a Select");
-	const { isOpen, isFocused, isFocusVisible, isPressed, state } = context;
+	const { isOpen, isFocusVisible, isPressed, state } = context;
+	const { isFocused, focusProps: triggerFocusProps } = createFocusRing();
 	let triggerRef;
 	const setTriggerRef = (el) => {
 		triggerRef = el;
 		context.setTriggerRef(el);
-		assignRef(local.ref, el);
+		assignRef$1(local.ref, el);
 	};
-	createEffect(() => {
+	createTrackedEffect(() => {
 		if (context.autoFocus) triggerRef?.focus();
 	});
 	const { isHovered, hoverProps } = createHover({ get isDisabled() {
@@ -500,8 +604,8 @@ function SelectTrigger(props) {
 		defaultClassName: "solidaria-Select-trigger"
 	}, renderValues);
 	const cleanTriggerProps = () => {
-		const { ref: _ref1, ...rest } = context.triggerProps;
-		return rest;
+		const { ref: _ref1, "aria-disabled": _ariaDisabled, "data-open": _dataOpen, ...rest } = context.triggerProps;
+		return mergeProps$1(rest, triggerFocusProps);
 	};
 	const cleanHoverProps = () => {
 		const { ref: _ref2, ...rest } = hoverProps;
@@ -509,65 +613,69 @@ function SelectTrigger(props) {
 	};
 	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",
+	var _el$19 = getNextElement(_tmpl$6);
+	ref(() => {
+		return setTriggerRef;
+	}, _el$19);
+	spread(_el$19, [
+		domProps,
+		cleanTriggerProps,
+		cleanHoverProps,
+		{
+			type: "button",
 			get id() {
 				return triggerAriaProps().id;
 			},
-			get tabIndex() {
+			get tabindex() {
 				return state.isDisabled ? void 0 : 0;
 			},
-			get ["aria-label"]() {
+			get disabled() {
+				return state.isDisabled || void 0;
+			},
+			get "aria-label"() {
 				return triggerAriaProps()["aria-label"];
 			},
-			get ["aria-labelledby"]() {
+			get "aria-labelledby"() {
 				return triggerAriaProps()["aria-labelledby"];
 			},
 			"aria-haspopup": "listbox",
-			get ["aria-expanded"]() {
-				return isOpen();
+			get "aria-expanded"() {
+				return ariaTrueFalse(isOpen());
 			},
-			get ["aria-controls"]() {
-				return memo(() => !!isOpen())() ? menuAriaProps().id : void 0;
+			get "aria-controls"() {
+				return isOpen() ? menuAriaProps().id : void 0;
 			},
-			get ["aria-disabled"]() {
-				return state.isDisabled || void 0;
+			get "aria-required"() {
+				return attrTrue(Boolean(triggerAriaProps()["aria-required"]));
 			},
-			get ["aria-required"]() {
-				return triggerAriaProps()["aria-required"];
-			},
-			get ["aria-describedby"]() {
+			get "aria-describedby"() {
 				return triggerAriaProps()["aria-describedby"];
 			},
-			get ["class"]() {
+			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-focused"() {
+				return dataAttr(isFocused());
 			},
-			get ["data-focus-visible"]() {
-				return isFocusVisible() || void 0;
+			get "data-focus-visible"() {
+				return dataAttr(isFocusVisible());
 			},
-			get ["data-hovered"]() {
-				return isHovered() || void 0;
+			get "data-hovered"() {
+				return dataAttr(isHovered());
 			},
-			get ["data-disabled"]() {
-				return state.isDisabled || void 0;
+			get "data-disabled"() {
+				return dataAttr(state.isDisabled);
 			}
-		}), false, true);
-		insert(_el$15, () => renderProps.renderChildren());
-		runHydrationEvents();
-		return _el$15;
-	})();
+		}
+	], true);
+	insert(_el$19, scope(() => {
+		return renderProps.renderChildren();
+	}));
+	runHydrationEvents();
+	return _el$19;
 }
 function defaultSelectValueChildren(values) {
 	return values.selectedText ?? values.placeholder ?? "";
@@ -587,7 +695,12 @@ function SelectValue(props) {
 	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 stringFormatter = createStringFormatter(racIntlStrings, "react-aria-components");
+	const listFormatter = createListFormatter({
+		style: "long",
+		type: "conjunction"
+	});
+	const placeholder = () => local.placeholder ?? contextPlaceholder ?? stringFormatter().format("selectPlaceholder");
 	const renderValues = createMemo(() => {
 		const collection = state.collection();
 		const selectedItem = state.selectedKey() == null ? null : collection.getItem(state.selectedKey());
@@ -596,10 +709,7 @@ function SelectValue(props) {
 		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,
+			selectedText: state.selectionMode() === "multiple" ? selectedItems.length > 0 ? listFormatter().format(selectedItems.map((item) => item.textValue)) : null : selectedItem?.textValue ?? null,
 			isSelected: state.selectionMode() === "multiple" ? selectedItems.length > 0 : selectedItem != null,
 			placeholder: placeholder()
 		};
@@ -612,26 +722,32 @@ function SelectValue(props) {
 		style: local.style,
 		defaultClassName: "solidaria-Select-value"
 	}, renderValues);
-	return (() => {
-		var _el$16 = getNextElement(_tmpl$);
-		spread(_el$16, mergeProps(domProps, valueProps, {
-			get ["class"]() {
+	var _el$20 = getNextElement(_tmpl$);
+	spread(_el$20, [
+		domProps,
+		valueProps,
+		{
+			get "class"() {
 				return renderProps.class();
 			},
 			get style() {
 				return renderProps.style();
 			},
-			get ["data-placeholder"]() {
-				return !renderValues().isSelected || void 0;
+			get "data-placeholder"() {
+				return dataAttr(!renderValues().isSelected);
 			}
-		}), false, true);
-		insert(_el$16, (() => {
-			var _c$ = memo(() => props.children == null);
-			return () => _c$() ? renderValues().selectedText ?? renderValues().placeholder ?? "" : renderProps.renderChildren();
-		})());
-		runHydrationEvents();
-		return _el$16;
-	})();
+		}
+	], true);
+	insert(_el$20, scope((() => {
+		var _c$ = memo(() => {
+			return props.children == null;
+		});
+		return () => {
+			return _c$() ? renderValues().selectedText ?? renderValues().placeholder ?? "" : renderProps.renderChildren();
+		};
+	})()));
+	runHydrationEvents();
+	return _el$20;
 }
 /**
 * The listbox popup for a select.
@@ -653,7 +769,7 @@ function SelectListBox(props) {
 	if (!context) throw new Error("SelectListBox must be used within a Select");
 	const { menuProps, rootRef, state: selectState, isOpen } = context;
 	const state = selectState;
-	createEffect(() => {
+	createTrackedEffect(() => {
 		if (!isOpen()) return;
 		state.selectionManager.setFocused(true);
 		if (state.focusedKey() != null) return;
@@ -661,6 +777,9 @@ function SelectListBox(props) {
 		if (selectedKey != null && !state.collection().getItem(selectedKey)?.isDisabled) state.setFocusedKey(selectedKey);
 	});
 	let listBoxRef;
+	const [listBoxEl, setListBoxEl] = createSignal(null, { ownedWrite: true });
+	const CollectionRoot = useCollectionRoot();
+	const isVirtualized = () => parentCollectionRenderer?.isVirtualized === true;
 	createInteractOutside({
 		ref: () => rootRef() ?? listBoxRef ?? null,
 		onInteractOutside: () => {
@@ -670,16 +789,22 @@ function SelectListBox(props) {
 			return !isOpen() || local.isInPopover === true;
 		}
 	});
+	const parentCollectionRenderer = useCollectionRenderer();
 	const listBoxHook = createListBox({
 		...menuProps,
 		shouldSelectOnPressUp: true,
 		shouldFocusOnHover: true,
+		disallowEmptySelection: true,
 		shouldSelectOnFocus: local.isInPopover === true ? false : void 0,
 		get isDisabled() {
 			return state.isDisabled;
+		},
+		get isVirtualized() {
+			return parentCollectionRenderer?.isVirtualized;
 		}
 	}, createSelectListStateAdapter(state));
-	const renderValues = createMemo(() => ({ isFocused: state.selectionManager.isFocused }));
+	const { isFocused: isListBoxFocused, isFocusVisible: isListBoxFocusVisible, focusProps: listBoxFocusProps } = createFocusRing();
+	const renderValues = createMemo(() => ({ isFocused: isListBoxFocused() }));
 	const renderProps = useRenderProps({
 		class: local.class,
 		style: local.style,
@@ -693,95 +818,158 @@ function SelectListBox(props) {
 		const { ref: _ref2, "aria-activedescendant": _activeDescendant, onFocus: _onFocus, ...rest } = listBoxHook.listBoxProps;
 		return {
 			...rest,
-			tabIndex: state.isDisabled ? void 0 : state.focusedKey() != null ? -1 : 0
+			tabindex: state.isDisabled ? void 0 : state.focusedKey() != null ? -1 : 0
 		};
 	};
+	const cleanListBoxFocusProps = () => {
+		const { ref: _ref3, ...rest } = listBoxFocusProps;
+		return rest;
+	};
 	const items = () => Array.from(state.collection());
-	createEffect(() => {
+	createTrackedEffect(() => {
 		if (!isOpen()) return;
 		const focusedKey = state.focusedKey();
 		if (focusedKey == null) return;
+		if (local.isInPopover === true && getInteractionModality() !== "keyboard") 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;
+	const listBox = () => createComponent(SelectListBoxInPopoverContext, {
+		get value() {
+			return local.isInPopover === true;
+		},
+		get children() {
+			var _el$21 = getNextElement(_tmpl$7);
+			var _el$22 = _el$21.firstChild;
+			var [_el$23, _el$24] = getNextMarker(_el$22.nextSibling);
+			var _el$25 = _el$23.nextSibling;
+			var [_el$26, _el$27] = getNextMarker(_el$25.nextSibling);
+			var _el$28 = _el$26.nextSibling;
+			var [_el$29, _el$30] = getNextMarker(_el$28.nextSibling);
+			ref(() => {
+				return (el) => {
+					listBoxRef = el;
+					setListBoxEl(el);
+				};
+			}, _el$21);
+			spread(_el$21, [
+				domProps,
+				cleanMenuProps,
+				cleanListBoxProps,
+				cleanListBoxFocusProps,
+				{
+					get "class"() {
+						return renderProps.class();
+					},
+					get style() {
+						return renderProps.style();
+					},
+					get "data-focused"() {
+						return dataAttr(isListBoxFocused());
+					},
+					get "data-focus-visible"() {
+						return dataAttr(isListBoxFocusVisible());
+					},
+					get "data-empty"() {
+						return dataAttr(state.collection().size === 0);
+					},
+					"data-layout": "stack",
+					"data-orientation": "vertical"
+				}
+			], true);
+			insert(_el$21, createComponent(CollectionRoot, {
+				get collection() {
+					return items();
 				},
-				get fallback() {
-					return createComponent(For, {
-						get each() {
-							return items();
+				scrollRef: () => listBoxEl(),
+				get children() {
+					return createComponent(Show, {
+						get when() {
+							return local.children;
 						},
-						children: (node) => createComponent(SelectOption, {
-							get id() {
-								return node.key;
-							},
-							get children() {
-								return node.textValue;
-							}
-						})
+						get fallback() {
+							return createComponent(For, {
+								get each() {
+									return items();
+								},
+								children: (node, index) => {
+									const item = createComponent(SelectOption, {
+										get id() {
+											return node.key;
+										},
+										get children() {
+											return node.textValue;
+										}
+									});
+									return isVirtualized() ? createComponent(VirtualizerItem, {
+										get index() {
+											return index();
+										},
+										children: item
+									}) : item;
+								}
+							});
+						},
+						get children() {
+							return createComponent(For, {
+								get each() {
+									return items();
+								},
+								children: (node, index) => {
+									const child = node.value != null ? local.children(node.value) : null;
+									return isVirtualized() ? createComponent(VirtualizerItem, {
+										get index() {
+											return index();
+										},
+										children: child
+									}) : child;
+								}
+							});
+						}
 					});
+				}
+			}), _el$23, _el$24);
+			insert(_el$21, scope((() => {
+				var _c$2 = memo(() => {
+					return !!(state.collection().size === 0 && local.renderEmptyState);
+				});
+				return () => {
+					return _c$2() ? (() => {
+						var _el$31 = getNextElement(_tmpl$8);
+						insert(_el$31, scope(() => {
+							return local.renderEmptyState();
+						}));
+						return _el$31;
+					})() : null;
+				};
+			})()), _el$26, _el$27);
+			insert(_el$21, createComponent(Show, {
+				get when() {
+					return local.onLoadMore;
 				},
 				get children() {
-					return createComponent(For, {
-						get each() {
-							return items();
+					return createComponent(ListBoxLoadMoreItem, {
+						get onLoadMore() {
+							return local.onLoadMore;
 						},
-						children: (node) => node.value != null ? local.children(node.value) : null
+						get isLoading() {
+							return local.isLoading;
+						},
+						get "class"() {
+							return local.loadMoreClass;
+						},
+						get children() {
+							return local.renderLoadMore?.();
+						}
 					});
 				}
-			});
-		})(), _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;
-	})();
+			}), _el$29, _el$30);
+			runHydrationEvents();
+			return _el$21;
+		}
+	});
 	return createComponent(Show, {
 		get when() {
 			return isOpen();
@@ -824,18 +1012,26 @@ function SelectOption(props) {
 	if (!context) throw new Error("SelectOption must be used within a Select");
 	const state = context;
 	const selectContext = useContext(SelectContext);
-	const [ref, setRefSignal] = createSignal(null);
+	const [ref$1, setRefSignal] = createSignal(null);
 	const setRef = (el) => {
 		setRefSignal(el);
-		assignRef(local.ref, el);
+		assignRef$1(local.ref, el);
 	};
+	const parentCollectionRenderer = useCollectionRenderer();
+	const isInPopover = useContext(SelectListBoxInPopoverContext);
 	const optionAria = createOption({
 		key: local.id,
+		get focus() {
+			return ariaProps.focus ?? (isInPopover ? noopOptionFocus : void 0);
+		},
+		get isVirtualized() {
+			return parentCollectionRenderer?.isVirtualized;
+		},
 		get isDisabled() {
 			return Boolean(ariaProps.isDisabled || selectContext?.isDisabled());
 		},
 		get "aria-label"() {
-			return ariaProps["aria-label"] ?? local.textValue;
+			return ariaProps["aria-label"];
 		},
 		shouldSelectOnPressUp: true,
 		shouldFocusOnHover: true,
@@ -854,7 +1050,7 @@ function SelectOption(props) {
 			if (state.selectionMode() === "multiple") {
 				const keys = state.selectedKeys();
 				if (keys === "all") return;
-				state.setSelectedKeys(new Set([...keys, key]));
+				state.setSelectedKeys(/* @__PURE__ */ new Set([...keys, key]));
 				return;
 			}
 			state.setSelectedKey(key);
@@ -877,8 +1073,8 @@ function SelectOption(props) {
 			state.setSelectedKey(key);
 			if (state.selectionMode() !== "multiple") state.close();
 		}
-	}, () => ref());
-	const isOptionFocusVisible = () => optionAria.isFocused() && (selectContext?.isFocusVisible() ?? optionAria.isFocusVisible());
+	}, () => ref$1());
+	const isOptionFocusVisible = () => optionAria.isFocusVisible();
 	const renderValues = createMemo(() => ({
 		isSelected: optionAria.isSelected(),
 		isFocused: optionAria.isFocused(),
@@ -895,13 +1091,9 @@ function SelectOption(props) {
 		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 { ref: _ref1, ...rest } = optionAria.optionProps;
 		const onClick = rest.onClick;
 		rest.onClick = ((event) => {
 			const wasSelected = optionAria.isSelected();
@@ -913,6 +1105,32 @@ function SelectOption(props) {
 		});
 		return rest;
 	};
+	const optionTextSlots = { slots: {
+		get [DEFAULT_SLOT]() {
+			return optionAria.labelProps;
+		},
+		get label() {
+			return optionAria.labelProps;
+		},
+		get description() {
+			return optionAria.descriptionProps;
+		}
+	} };
+	createRenderEffect(() => ({
+		el: ref$1(),
+		labelId: optionAria.labelProps.id,
+		descriptionId: optionAria.descriptionProps.id
+	}), ({ el, labelId, descriptionId }) => {
+		if (!el) return;
+		if (labelId) {
+			const label = el.querySelector("[slot='label']");
+			if (label && !label.id) label.id = labelId;
+		}
+		if (descriptionId) {
+			const description = el.querySelector("[slot='description']");
+			if (description && !description.id) description.id = descriptionId;
+		}
+	});
 	const selectOption = () => {
 		if (optionAria.isDisabled()) return;
 		if (state.selectionMode() === "multiple") {
@@ -927,63 +1145,62 @@ function SelectOption(props) {
 		state.setSelectedKey(local.id);
 		state.close();
 	};
-	return createComponent(SelectionIndicatorContext.Provider, {
+	return createComponent(SelectionIndicatorContext, {
 		get value() {
 			return selectionIndicatorContext();
 		},
 		get children() {
-			var _el$23 = getNextElement(_tmpl$5);
-			use(setRef, _el$23);
-			spread(_el$23, mergeProps(cleanOptionProps, {
-				get ["class"]() {
+			var _el$32 = getNextElement(_tmpl$5);
+			ref(() => {
+				return setRef;
+			}, _el$32);
+			spread(_el$32, [cleanOptionProps, {
+				get "class"() {
 					return renderProps.class();
 				},
 				get style() {
 					return renderProps.style();
 				},
-				get ["data-selected"]() {
-					return optionAria.isSelected() || void 0;
+				get "data-selected"() {
+					return dataAttr(optionAria.isSelected());
+				},
+				get "data-focused"() {
+					return dataAttr(optionAria.isFocused());
 				},
-				get ["data-focused"]() {
-					return optionAria.isFocused() || void 0;
+				get "data-focus-visible"() {
+					return dataAttr(isOptionFocusVisible());
 				},
-				get ["data-focus-visible"]() {
-					return isOptionFocusVisible() || void 0;
+				get "data-pressed"() {
+					return dataAttr(optionAria.isPressed());
 				},
-				get ["data-pressed"]() {
-					return optionAria.isPressed() || void 0;
+				get "data-hovered"() {
+					return dataAttr(optionAria.isHovered());
 				},
-				get ["data-hovered"]() {
-					return optionAria.isHovered() || void 0;
+				get "data-disabled"() {
+					return dataAttr(optionAria.isDisabled());
 				},
-				get ["data-disabled"]() {
-					return optionAria.isDisabled() || void 0;
+				get "data-selection-mode"() {
+					return state.selectionMode();
 				}
-			}), false, true);
-			insert(_el$23, (() => {
-				var _c$3 = memo(() => !!hasPrimitiveLabel());
-				return () => _c$3() ? (() => {
-					var _el$24 = getNextElement(_tmpl$);
-					spread(_el$24, mergeProps(() => optionAria.labelProps), false, true);
-					insert(_el$24, () => renderProps.renderChildren());
-					runHydrationEvents();
-					return _el$24;
-				})() : renderProps.renderChildren();
-			})());
+			}], true);
+			insert(_el$32, createComponent(Provider, {
+				values: [[TextContext, optionTextSlots]],
+				get children() {
+					return createComponent(OptionContent, {
+						get render() {
+							return renderProps.renderChildrenStable;
+						},
+						get labelProps() {
+							return optionAria.labelProps;
+						}
+					});
+				}
+			}));
 			runHydrationEvents();
-			return _el$23;
+			return _el$32;
 		}
 	});
 }
-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();
@@ -1002,9 +1219,9 @@ function createSelectListStateAdapter(state) {
 		focusedKey: state.focusedKey,
 		setFocusedKey: (key) => state.setFocusedKey(key ?? null),
 		childFocusStrategy: () => null,
-		selectionMode: () => state.selectionMode(),
-		selectionBehavior: () => "replace",
-		disallowEmptySelection: () => true,
+		selectionMode: () => state.selectionManager.selectionMode,
+		selectionBehavior: () => state.selectionManager.selectionBehavior,
+		disallowEmptySelection: () => state.selectionManager.disallowEmptySelection,
 		selectedKeys,
 		disabledKeys,
 		disabledBehavior: () => "all",
@@ -1012,26 +1229,15 @@ function createSelectListStateAdapter(state) {
 		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)
+		setSelectionBehavior: (behavior) => state.selectionManager.setSelectionBehavior(behavior),
+		toggleSelection: (key) => state.selectionManager.toggleSelection(key),
+		replaceSelection: (key) => state.selectionManager.replaceSelection(key),
+		setSelectedKeys: (keys) => state.selectionManager.setSelectedKeys(keys),
+		selectAll: () => state.selectionManager.selectAll(),
+		clearSelection: () => state.selectionManager.clearSelection(),
+		toggleSelectAll: () => state.selectionManager.toggleSelectAll(),
+		extendSelection: (toKey) => state.selectionManager.extendSelection(toKey),
+		select: (key, event) => state.selectionManager.select(key, event)
 	};
 }
 Select.Trigger = SelectTrigger;