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

package/dist/Select.jsx

@@ -1,9 +1,26 @@
-import { filterDOMProps, useRenderProps } from "./utils.jsx";
+/*
+* 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.jsx";
+import { TextContext } from "./Text.jsx";
 import { FieldErrorContext } from "./FieldError.jsx";
 import { SelectionIndicatorContext } from "./SelectionIndicator.jsx";
+import { t as racIntlStrings } from "./intl.jsx";
+import { useCollectionRenderer, useCollectionRoot } from "./Collection.jsx";
+import { i as VirtualizerItem } from "./Virtualizer2.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 { 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 } 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
 /**
@@ -12,7 +29,7 @@ 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
 */
-function assignRef(ref, el) {
+function assignRef$1(ref, el) {
 	if (!ref) return;
 	if (typeof ref === "function") ref(el);
 	else ref.current = el;
@@ -39,7 +56,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",
@@ -49,8 +69,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$1(contextSlotProps, props) : props, [
+	const contextSlotProps = useContext(SelectContext)?.slots?.[typeof props.slot === "string" ? props.slot : "default"];
+	const mergedSelectProps = contextSlotProps ? mergeProps(contextSlotProps, props) : props;
+	const [local, stateProps, ariaProps] = splitProps(mergedSelectProps, [
 		"class",
 		"style",
 		"render",
@@ -77,7 +98,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();
@@ -134,20 +154,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
@@ -160,7 +207,7 @@ function Select(props) {
 			return isFocused();
 		},
 		get isFocusVisible() {
-			return isFocusVisible();
+			return isFocusVisibleWithin();
 		},
 		get isDisabled() {
 			return resolveDisabled();
@@ -186,37 +233,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 = () => {
@@ -244,12 +283,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();
 		}
@@ -263,13 +307,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 <>
@@ -278,59 +338,70 @@ function Select(props) {
         </Show>
         {selectChildren}
         {}
-        <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) ?? 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 <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={state.collection().size <= 300} fallback={<Show when={stateProps.name}>
+              <For 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;
+		})()}>
+                {(key) => <input {...hiddenInputProps} name={stateProps.name} form={ariaProps.form} value={key != null ? String(key) : ""} disabled={resolveDisabled()} onInvalid={handleHiddenSelectInvalid} />}
+              </For>
+            </Show>}>
+          <div {...coerceDomRecord(containerProps)} data-testid="hidden-select-container">
+            <label>
+              {ariaProps.label}
+              <select {...hiddenSelectProps} name={stateProps.name} required={hasNativeValidation() && ariaProps.isRequired && !hasSelection() || void 0} value={nativeSelectValue()} onInvalid={handleHiddenSelectInvalid} onChange={handleHiddenSelectChange} onInput={handleHiddenSelectChange}>
+                <option value="" label={"\xA0"}>
+                  {"\xA0"}
+                </option>
+                <For each={hiddenSelectItemNodes()}>
+                  {(item) => <option value={String(item.key)}>{item.textValue}</option>}
+                </For>
+                <Show when={state.collection().size === 0 && stateProps.name}>
+                  <For each={hiddenSelectFallbackValues()}>
+                    {(value) => <option value={value != null ? String(value) : ""} />}
+                  </For>
+                </Show>
+              </select>
+            </label>
+          </div>
+        </Show>
       </>;
 	};
 	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 = <RootChildren />;
+		const textSlots = { slots: {
+			get description() {
+				return selectHook.descriptionProps;
+			},
+			get errorMessage() {
+				return selectHook.errorMessageProps;
+			}
+		} };
+		const renderedRootChildren = <Provider values={[[TextContext, textSlots]]}>
+        <RootChildren />
+      </Provider>;
 		const rootProps = () => ({
 			...baseRootProps(),
 			children: renderedRootChildren
 		});
 		return local.render ? local.render(rootProps(), renderValues()) : <div {...baseRootProps()}>{renderedRootChildren}</div>;
 	};
-	return <SelectContext.Provider value={{
+	return <SelectContext value={{
 		state,
 		rootRef: () => rootRef ?? null,
 		triggerRef: () => triggerRef,
@@ -338,14 +409,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,
@@ -356,12 +433,12 @@ function Select(props) {
 		items: stateProps.items,
 		autoFocus: !!ariaProps.autoFocus
 	}}>
-      <SelectStateContext.Provider value={state}>
-        <FieldErrorContext.Provider value={fieldErrorContext}>
+      <SelectStateContext value={state}>
+        <FieldErrorContext value={fieldErrorContext}>
           <RootContent />
-        </FieldErrorContext.Provider>
-      </SelectStateContext.Provider>
-    </SelectContext.Provider>;
+        </FieldErrorContext>
+      </SelectStateContext>
+    </SelectContext>;
 }
 /**
 * The trigger button for a select.
@@ -376,14 +453,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() {
@@ -406,8 +484,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(rest, triggerFocusProps);
 	};
 	const cleanHoverProps = () => {
 		const { ref: _ref2, ...rest } = hoverProps;
@@ -415,7 +493,7 @@ function SelectTrigger(props) {
 	};
 	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}>
+	return <button ref={setTriggerRef} {...domProps} {...cleanTriggerProps()} {...cleanHoverProps()} type="button" id={triggerAriaProps().id} tabindex={state.isDisabled ? void 0 : 0} disabled={state.isDisabled || void 0} aria-label={triggerAriaProps()["aria-label"]} aria-labelledby={triggerAriaProps()["aria-labelledby"]} aria-haspopup="listbox" aria-expanded={ariaTrueFalse(isOpen())} aria-controls={isOpen() ? menuAriaProps().id : void 0} aria-required={attrTrue(Boolean(triggerAriaProps()["aria-required"]))} aria-describedby={triggerAriaProps()["aria-describedby"]} class={renderProps.class()} style={renderProps.style()} data-focused={dataAttr(isFocused())} data-focus-visible={dataAttr(isFocusVisible())} data-hovered={dataAttr(isHovered())} data-disabled={dataAttr(state.isDisabled)}>
       {renderProps.renderChildren()}
     </button>;
 }
@@ -437,7 +515,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());
@@ -446,10 +529,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()
 		};
@@ -462,7 +542,7 @@ function SelectValue(props) {
 		style: local.style,
 		defaultClassName: "solidaria-Select-value"
 	}, renderValues);
-	return <span {...domProps} {...valueProps} class={renderProps.class()} style={renderProps.style()} data-placeholder={!renderValues().isSelected || void 0}>
+	return <span {...domProps} {...valueProps} class={renderProps.class()} style={renderProps.style()} data-placeholder={dataAttr(!renderValues().isSelected)}>
       {props.children == null ? renderValues().selectedText ?? renderValues().placeholder ?? "" : renderProps.renderChildren()}
     </span>;
 }
@@ -486,7 +566,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;
@@ -494,6 +574,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: () => {
@@ -503,16 +586,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,
@@ -526,35 +615,54 @@ 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 = () => <div 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 ? <div role="option" style={{ display: "contents" }} data-empty-state>
-          {local.renderEmptyState()}
-        </div> : <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>
-    </div>;
+	const listBox = () => <SelectListBoxInPopoverContext value={local.isInPopover === true}>
+      <div ref={(el) => {
+		listBoxRef = el;
+		setListBoxEl(el);
+	}} {...domProps} {...cleanMenuProps()} {...cleanListBoxProps()} {...cleanListBoxFocusProps()} class={renderProps.class()} style={renderProps.style()} data-focused={dataAttr(isListBoxFocused())} data-focus-visible={dataAttr(isListBoxFocusVisible())} data-empty={dataAttr(state.collection().size === 0)} data-layout="stack" data-orientation="vertical">
+        <CollectionRoot collection={items()} scrollRef={() => listBoxEl()}>
+          <Show when={local.children} fallback={<For each={items()}>
+                {(node, index) => {
+		const item = <SelectOption id={node.key}>{node.textValue}</SelectOption>;
+		return isVirtualized() ? <VirtualizerItem index={index()}>{item}</VirtualizerItem> : item;
+	}}
+              </For>}>
+            <For each={items()}>
+              {(node, index) => {
+		const child = node.value != null ? local.children(node.value) : null;
+		return isVirtualized() ? <VirtualizerItem index={index()}>{child}</VirtualizerItem> : child;
+	}}
+            </For>
+          </Show>
+        </CollectionRoot>
+        {state.collection().size === 0 && local.renderEmptyState ? <div role="option" style={{ display: "contents" }} data-empty-state>
+            {local.renderEmptyState()}
+          </div> : null}
+        <Show when={local.onLoadMore}>
+          <ListBoxLoadMoreItem onLoadMore={local.onLoadMore} isLoading={local.isLoading} class={local.loadMoreClass}>
+            {local.renderLoadMore?.()}
+          </ListBoxLoadMoreItem>
+        </Show>
+      </div>
+    </SelectListBoxInPopoverContext>;
 	return <Show when={isOpen()}>
       <Show when={local.isInPopover} fallback={<FocusScope restoreFocus autoFocus>
             {listBox()}
@@ -583,15 +691,23 @@ function SelectOption(props) {
 	const [ref, 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,
@@ -610,7 +726,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);
@@ -634,7 +750,7 @@ function SelectOption(props) {
 			if (state.selectionMode() !== "multiple") state.close();
 		}
 	}, () => ref());
-	const isOptionFocusVisible = () => optionAria.isFocused() && (selectContext?.isFocusVisible() ?? optionAria.isFocusVisible());
+	const isOptionFocusVisible = () => optionAria.isFocusVisible();
 	const renderValues = createMemo(() => ({
 		isSelected: optionAria.isSelected(),
 		isFocused: optionAria.isFocused(),
@@ -651,13 +767,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();
@@ -669,6 +781,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(),
+		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") {
@@ -683,21 +821,14 @@ function SelectOption(props) {
 		state.setSelectedKey(local.id);
 		state.close();
 	};
-	return <SelectionIndicatorContext.Provider value={selectionIndicatorContext()}>
+	return <SelectionIndicatorContext value={selectionIndicatorContext()}>
       {}
-      <div 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()}
+      <div ref={setRef} {...cleanOptionProps()} class={renderProps.class()} style={renderProps.style()} data-selected={dataAttr(optionAria.isSelected())} data-focused={dataAttr(optionAria.isFocused())} data-focus-visible={dataAttr(isOptionFocusVisible())} data-pressed={dataAttr(optionAria.isPressed())} data-hovered={dataAttr(optionAria.isHovered())} data-disabled={dataAttr(optionAria.isDisabled())} data-selection-mode={state.selectionMode()}>
+        <Provider values={[[TextContext, optionTextSlots]]}>
+          <OptionContent render={renderProps.renderChildrenStable} labelProps={optionAria.labelProps} />
+        </Provider>
       </div>
-    </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);
+    </SelectionIndicatorContext>;
 }
 function createSelectListStateAdapter(state) {
 	const selectedKeys = createMemo(() => {
@@ -717,9 +848,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",
@@ -727,26 +858,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;