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

package/dist/ComboBox.jsx

@@ -1,8 +1,25 @@
-import { Provider, 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/ComboBox.tsx
+import { DEFAULT_SLOT, OptionContent, Provider, dataAttr, filterDOMProps, useRenderProps } from "./utils.jsx";
 import { TextContext } from "./Text.jsx";
+import { FieldErrorContext } from "./FieldError.jsx";
 import { SelectionIndicatorContext } from "./SelectionIndicator.jsx";
-import { For, Show, createContext, createEffect, createMemo, createSignal, onCleanup, splitProps, useContext } from "solid-js";
-import { createComboBox, createHover, createInteractOutside, createListBox, createOption, createScrollIntoViewOnFocus, getComboBoxData, isFocusVisible, mergeProps as mergeProps$1 } from "@proyecto-viviana/solidaria";
+import { useCollectionRenderer, useCollectionRoot } from "./Collection.jsx";
+import { i as VirtualizerItem } from "./Virtualizer2.jsx";
+import { ListBoxLoadMoreItem } from "./ListBox.jsx";
+import { For, Show, createContext, createEffect, createMemo, createRenderEffect, createSignal, createTrackedEffect, onCleanup, useContext } from "solid-js";
+import { createComboBox, createFilter, createFocusRing, createHover, createInteractOutside, createListBox, createOption, createPress, createScrollIntoViewOnFocus, getComboBoxData, isFocusVisible, mergeProps } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import { createComboBoxState, defaultContainsFilter } from "@proyecto-viviana/solid-stately";
 //#region src/ComboBox.tsx
 /**
@@ -11,7 +28,7 @@ import { createComboBoxState, defaultContainsFilter } from "@proyecto-viviana/so
 * A pre-wired headless combobox that combines state + aria hooks.
 * Port of react-aria-components/src/ComboBox.tsx
 */
-function assignRef(ref, el) {
+function assignRef$1(ref, el) {
 	if (!ref) return;
 	if (typeof ref === "function") ref(el);
 	else ref.current = el;
@@ -27,8 +44,9 @@ function callInputKeyDown(handler, event) {
 * A combobox combines a text input with a listbox, allowing users to filter a list of options.
 */
 function ComboBox(props) {
-	const contextSlotProps = useContext(ComboBoxContext)?.slots?.[props.slot ?? "default"];
-	const [local, stateProps, ariaProps] = splitProps(contextSlotProps ? mergeProps$1(contextSlotProps, props) : props, [
+	const contextSlotProps = useContext(ComboBoxContext)?.slots?.[typeof props.slot === "string" ? props.slot : "default"];
+	const mergedComboBoxProps = contextSlotProps ? mergeProps(contextSlotProps, props) : props;
+	const [local, stateProps, ariaProps] = splitProps(mergedComboBoxProps, [
 		"class",
 		"style",
 		"slot",
@@ -63,14 +81,16 @@ function ComboBox(props) {
 		"name",
 		"formValue"
 	]);
-	let inputRef = null;
+	const [inputEl, setInputEl] = createSignal(null, { ownedWrite: true });
 	let buttonRef = null;
 	let triggerRef = null;
 	let listBoxRef = null;
+	const [popoverRef, setPopoverRef] = createSignal(null);
 	const optionActions = /* @__PURE__ */ new Map();
 	const runOptionAction = (key) => {
 		optionActions.get(key)?.();
 	};
+	const intlFilter = createFilter({ sensitivity: "base" });
 	const state = createComboBoxState({
 		get items() {
 			return stateProps.items;
@@ -130,7 +150,7 @@ function ComboBox(props) {
 			return stateProps.onOpenChange;
 		},
 		get defaultFilter() {
-			return stateProps.defaultFilter;
+			return stateProps.defaultFilter ?? intlFilter().contains;
 		},
 		get allowsCustomValue() {
 			return stateProps.allowsCustomValue;
@@ -165,8 +185,11 @@ function ComboBox(props) {
 		...comboBoxAriaProps(),
 		get name() {
 			return effectiveFormValue() === "text" ? stateProps.name : void 0;
+		},
+		get allowsCustomValue() {
+			return stateProps.allowsCustomValue;
 		}
-	}), state, () => inputRef, () => buttonRef, () => listBoxRef);
+	}), state, () => inputEl(), () => buttonRef, () => listBoxRef, () => popoverRef());
 	const getInputProps = () => {
 		const inputProps = comboBoxAria.inputProps;
 		const originalOnKeyDown = inputProps.onKeyDown;
@@ -180,16 +203,13 @@ function ComboBox(props) {
 			}
 		};
 	};
-	const { isHovered, hoverProps } = createHover({ get isDisabled() {
-		return ariaProps.isDisabled;
-	} });
 	const renderValues = createMemo(() => ({
 		isOpen: comboBoxAria.isOpen(),
 		isFocused: comboBoxAria.isFocused(),
 		isFocusVisible: comboBoxAria.isFocusVisible(),
 		isDisabled: !!ariaProps.isDisabled,
 		isRequired: !!ariaProps.isRequired,
-		isInvalid: !!ariaProps.isInvalid,
+		isInvalid: comboBoxAria.isInvalid,
 		isReadOnly: !!ariaProps.isReadOnly,
 		isSelected: state.selectedKey() != null,
 		inputValue: state.inputValue()
@@ -202,10 +222,6 @@ function ComboBox(props) {
 	const domProps = createMemo(() => {
 		return filterDOMProps(ariaProps, { global: true });
 	});
-	const cleanHoverProps = () => {
-		const { ref: _ref, ...rest } = hoverProps;
-		return rest;
-	};
 	const ComboBoxChildren = () => typeof local.children === "function" ? local.children(renderValues()) : local.children;
 	const textSlots = { slots: {
 		get description() {
@@ -215,7 +231,19 @@ function ComboBox(props) {
 			return comboBoxAria.errorMessageProps;
 		}
 	} };
-	return <ComboBoxContext.Provider value={{
+	const fieldErrorContext = {
+		get validation() {
+			return {
+				isInvalid: comboBoxAria.isInvalid,
+				validationErrors: comboBoxAria.validationErrors,
+				validationDetails: comboBoxAria.validationDetails
+			};
+		},
+		get errorMessageProps() {
+			return comboBoxAria.errorMessageProps;
+		}
+	};
+	return <ComboBoxContext value={{
 		state,
 		listState,
 		inputProps: getInputProps,
@@ -236,9 +264,9 @@ function ComboBox(props) {
 		isFocused: comboBoxAria.isFocused,
 		isFocusVisible: comboBoxAria.isFocusVisible,
 		items: stateProps.items ?? stateProps.defaultItems ?? [],
-		inputRef: () => inputRef,
+		inputRef: () => inputEl(),
 		setInputRef: (el) => {
-			inputRef = el;
+			setInputEl(el);
 		},
 		buttonRef: () => buttonRef,
 		setButtonRef: (el) => {
@@ -252,6 +280,8 @@ function ComboBox(props) {
 		setListBoxRef: (el) => {
 			listBoxRef = el;
 		},
+		popoverRef,
+		setPopoverRef,
 		registerOptionAction: (key, action) => {
 			if (action) optionActions.set(key, action);
 			else optionActions.delete(key);
@@ -259,21 +289,21 @@ function ComboBox(props) {
 		runOptionAction,
 		slots: local.slots
 	}}>
-      <ComboBoxStateContext.Provider value={state}>
-        <div {...domProps()} {...cleanHoverProps()} ref={(el) => {
-		assignRef(local.ref, el);
-		assignRef(local.rootRef, el);
-	}} class={renderProps.class()} style={renderProps.style()} data-open={comboBoxAria.isOpen() || void 0} data-focused={comboBoxAria.isFocused() || void 0} data-focus-visible={comboBoxAria.isFocusVisible() || void 0} data-disabled={ariaProps.isDisabled || void 0} data-required={ariaProps.isRequired || void 0} data-invalid={ariaProps.isInvalid || void 0} data-readonly={ariaProps.isReadOnly || void 0} data-hovered={isHovered() || void 0} slot={local.slot}>
+      <ComboBoxStateContext value={state}>
+        <div {...domProps()} ref={(el) => {
+		assignRef$1(local.ref, el);
+		assignRef$1(local.rootRef, el);
+	}} class={renderProps.class()} style={renderProps.style()} data-open={dataAttr(comboBoxAria.isOpen())} data-focused={dataAttr(comboBoxAria.isFocused())} data-disabled={dataAttr(ariaProps.isDisabled)} data-required={dataAttr(ariaProps.isRequired)} data-invalid={dataAttr(comboBoxAria.isInvalid)} data-readonly={dataAttr(ariaProps.isReadOnly)} slot={local.slot}>
+          <Provider values={[[TextContext, textSlots], [FieldErrorContext, fieldErrorContext]]}>
+            <ComboBoxChildren />
+          </Provider>
           {}
           <Show when={stateProps.name && effectiveFormValue() === "key"}>
             <input type="hidden" name={stateProps.name} form={ariaProps.form} value={state.selectedKey()?.toString() ?? ""} />
           </Show>
-          <Provider values={[[TextContext, textSlots]]}>
-            <ComboBoxChildren />
-          </Provider>
         </div>
-      </ComboBoxStateContext.Provider>
-    </ComboBoxContext.Provider>;
+      </ComboBoxStateContext>
+    </ComboBoxContext>;
 }
 /**
 * Label element for a combobox.
@@ -311,7 +341,7 @@ function ComboBoxDescription(props) {
 		const { ref: _ref, ...rest } = context.descriptionProps();
 		return rest;
 	};
-	return <span {...domProps} {...cleanDescriptionProps()} class={local.class} style={local.style}>
+	return <span {...domProps} {...cleanDescriptionProps()} slot={local.slot ?? "description"} class={local.class} style={local.style}>
       {local.children}
     </span>;
 }
@@ -331,7 +361,7 @@ function ComboBoxErrorMessage(props) {
 		const { ref: _ref, ...rest } = context.errorMessageProps();
 		return rest;
 	};
-	return <span {...domProps} {...cleanErrorMessageProps()} class={local.class} style={local.style}>
+	return <span {...domProps} {...cleanErrorMessageProps()} slot={local.slot ?? "errorMessage"} class={local.class} style={local.style}>
       {local.children}
     </span>;
 }
@@ -368,14 +398,14 @@ function ComboBoxInput(props) {
 		defaultClassName: "solidaria-ComboBox-input"
 	}, renderValues);
 	const cleanInputProps = () => {
-		const { ref: _ref1, value: _value, ...rest } = context.inputProps();
+		const { ref: _ref1, value: _value, "data-open": _dataOpen, ...rest } = context.inputProps();
 		return rest;
 	};
 	const cleanHoverProps = () => {
 		const { ref: _ref2, ...rest } = hoverProps;
 		return rest;
 	};
-	return <input {...domProps} ref={(el) => setInputRef(el)} {...cleanInputProps()} {...cleanHoverProps()} value={state.inputValue()} class={renderProps.class()} style={renderProps.style()} data-open={isOpen() || void 0} data-focused={isFocused() || void 0} data-focus-visible={isFocusVisible() || void 0} data-hovered={isHovered() || void 0} data-disabled={state.isDisabled || void 0} />;
+	return <input {...domProps} ref={(el) => setInputRef(el)} {...cleanInputProps()} {...cleanHoverProps()} value={state.inputValue()} class={renderProps.class()} style={renderProps.style()} data-focused={dataAttr(isFocused())} data-focus-visible={dataAttr(isFocusVisible())} data-hovered={dataAttr(isHovered())} data-disabled={dataAttr(state.isDisabled)} />;
 }
 function ComboBoxValue(props) {
 	const context = useContext(ComboBoxContext);
@@ -408,7 +438,7 @@ function ComboBoxValue(props) {
 		selectedText: selectedText(),
 		state
 	}));
-	return <span class={renderProps.class()} style={renderProps.style()} data-placeholder={isPlaceholder() || void 0}>
+	return <span class={renderProps.class()} style={renderProps.style()} data-placeholder={dataAttr(isPlaceholder())}>
       {props.children ? renderProps.renderChildren() : isPlaceholder() ? props.placeholder : textValue()}
     </span>;
 }
@@ -425,15 +455,22 @@ function ComboBoxButton(props) {
 	]);
 	const context = useContext(ComboBoxContext);
 	if (!context) throw new Error("ComboBoxButton must be used within a ComboBox");
-	const { isOpen, isFocused, state, setButtonRef } = context;
+	const { isOpen, state, setButtonRef } = context;
 	const { isHovered, hoverProps } = createHover({ get isDisabled() {
 		return state.isDisabled;
 	} });
+	const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+	const { isPressed, pressProps } = createPress({
+		get isDisabled() {
+			return state.isDisabled || state.isReadOnly;
+		},
+		preventFocusOnPress: true
+	});
 	const renderValues = createMemo(() => ({
 		isOpen: isOpen(),
 		isFocused: isFocused(),
 		isHovered: isHovered(),
-		isPressed: isOpen(),
+		isPressed: isPressed(),
 		isDisabled: state.isDisabled
 	}));
 	const renderProps = useRenderProps({
@@ -445,17 +482,26 @@ function ComboBoxButton(props) {
 		defaultClassName: "solidaria-ComboBox-button"
 	}, renderValues);
 	const cleanButtonProps = () => {
-		const { ref: _ref1, ...rest } = context.buttonProps();
+		const { ref: _ref1, "data-open": _dataOpen, ...rest } = context.buttonProps();
 		return rest;
 	};
 	const cleanHoverProps = () => {
 		const { ref: _ref2, ...rest } = hoverProps;
 		return rest;
 	};
-	return <button {...domProps} ref={(el) => {
+	const cleanFocusProps = () => {
+		const { ref: _ref3, ...rest } = focusProps;
+		return rest;
+	};
+	const cleanPressProps = () => {
+		const { ref: _ref4, ...rest } = pressProps;
+		return rest;
+	};
+	const mergedButtonProps = () => mergeProps(domProps, cleanButtonProps(), cleanHoverProps(), cleanFocusProps(), cleanPressProps());
+	return <button {...mergedButtonProps()} ref={(el) => {
 		setButtonRef(el);
-		assignRef(local.ref, el);
-	}} {...cleanButtonProps()} {...cleanHoverProps()} class={renderProps.class()} style={renderProps.style()} data-open={isOpen() || void 0} data-pressed={isOpen() || void 0} data-focused={isFocused() || void 0} data-hovered={isHovered() || void 0} data-disabled={state.isDisabled || void 0}>
+		assignRef$1(local.ref, el);
+	}} class={renderProps.class()} style={renderProps.style()} data-pressed={dataAttr(isPressed())} data-focused={dataAttr(isFocused())} data-focus-visible={dataAttr(isFocusVisible())} data-hovered={dataAttr(isHovered())} data-disabled={dataAttr(state.isDisabled)}>
       {renderProps.renderChildren()}
     </button>;
 }
@@ -467,12 +513,17 @@ function ComboBoxListBox(props) {
 		"class",
 		"style",
 		"slot",
-		"children"
+		"children",
+		"renderEmptyState",
+		"onLoadMore",
+		"isLoading",
+		"renderLoadMore",
+		"loadMoreClass"
 	]);
 	const rawContext = useContext(ComboBoxContext);
 	if (!rawContext) throw new Error("ComboBoxListBox must be used within a ComboBox");
 	const context = rawContext;
-	const { state: comboBoxState, listState, isOpen, inputRef, buttonRef, setListBoxRef } = context;
+	const { state: comboBoxState, listState, isOpen, inputRef, buttonRef, setListBoxRef, setPopoverRef } = context;
 	const state = comboBoxState;
 	let listBoxRef;
 	createScrollIntoViewOnFocus({
@@ -488,14 +539,22 @@ function ComboBoxListBox(props) {
 			const button = buttonRef();
 			if (input?.contains(target)) return;
 			if (button?.contains(target)) return;
+			if (target.closest("[role=\"listbox\"]") || target.closest("[role=\"option\"]")) return;
 			if (isOpen()) state.close();
 		},
 		get isDisabled() {
 			return !isOpen();
 		}
 	});
-	const { listBoxProps } = createListBox(context.listBoxProps, listState);
-	const renderValues = createMemo(() => ({ isFocused: state.isFocused() }));
+	const parentCollectionRenderer = useCollectionRenderer();
+	const CollectionRoot = useCollectionRoot();
+	const isVirtualized = () => parentCollectionRenderer?.isVirtualized === true;
+	const { listBoxProps } = createListBox(() => ({
+		...context.listBoxProps(),
+		isVirtualized: parentCollectionRenderer?.isVirtualized
+	}), listState);
+	const { isFocused: isListBoxFocused, isFocusVisible: isListBoxFocusVisible, focusProps } = createFocusRing();
+	const renderValues = createMemo(() => ({ isFocused: isListBoxFocused() }));
 	const renderProps = useRenderProps({
 		class: local.class,
 		style: local.style,
@@ -509,6 +568,10 @@ function ComboBoxListBox(props) {
 		const { ref: _ref2, ...rest } = listBoxProps;
 		return rest;
 	};
+	const cleanFocusProps = () => {
+		const { ref: _ref3, ...rest } = focusProps;
+		return rest;
+	};
 	const items = () => Array.from(state.collection());
 	const getNodeValue = (node) => {
 		if (node.value != null) return node.value;
@@ -517,33 +580,63 @@ function ComboBoxListBox(props) {
 			return (candidate.key ?? candidate.id ?? index) === node.key;
 		}) ?? null;
 	};
+	const [listBoxEl, setListBoxEl] = createSignal(null, { ownedWrite: true });
+	createEffect(() => listBoxEl(), (el) => {
+		if (!el) {
+			setPopoverRef(null);
+			return;
+		}
+		const overlay = el.closest("[data-placement]");
+		setPopoverRef(overlay instanceof HTMLElement ? overlay : el);
+	});
 	const setListBoxElement = (el) => {
 		listBoxRef = el;
 		setListBoxRef(el);
+		setListBoxEl(el);
+		onCleanup(() => {
+			listBoxRef = void 0;
+			setListBoxRef(null);
+			setListBoxEl(null);
+			setPopoverRef(null);
+		});
 	};
-	onCleanup(() => {
-		setListBoxRef(null);
-	});
 	return <Show when={isOpen()}>
       {}
-      <div {...domProps} ref={setListBoxElement} {...cleanContextProps()} {...cleanListBoxProps()} class={renderProps.class()} style={renderProps.style()} data-focused={state.isFocused() || void 0}>
-        <Show when={local.children} fallback={<For each={items()}>
-              {(node) => <ComboBoxOption id={node.key}>{node.textValue}</ComboBoxOption>}
-            </For>}>
-          <For each={items()}>
-            {(node) => {
+      <div {...domProps} ref={setListBoxElement} {...cleanContextProps()} {...cleanListBoxProps()} {...cleanFocusProps()} 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 = <ComboBoxItem id={node.key}>{node.textValue}</ComboBoxItem>;
+		return isVirtualized() ? <VirtualizerItem index={index()}>{item}</VirtualizerItem> : item;
+	}}
+              </For>}>
+            <For each={items()}>
+              {(node, index) => {
 		const value = getNodeValue(node);
-		return value != null ? local.children(value) : null;
+		const child = value != null ? local.children(value) : null;
+		return isVirtualized() ? <VirtualizerItem index={index()}>{child}</VirtualizerItem> : child;
 	}}
-          </For>
+            </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>
     </Show>;
 }
 /**
-* An option in a combobox listbox.
+* An item in a combobox listbox.
+*
+* Local addition: RAC ComboBox uses {@link ListBoxItem}. Prefer that when
+* composing the headless ComboBox. This wrapper stays for existing call sites.
 */
-function ComboBoxOption(props) {
+function ComboBoxItem(props) {
 	const [local, ariaProps] = splitProps(props, [
 		"class",
 		"style",
@@ -556,7 +649,7 @@ function ComboBoxOption(props) {
 	]);
 	const stateContext = useContext(ComboBoxStateContext);
 	const comboBoxContext = useContext(ComboBoxContext);
-	if (!stateContext || !comboBoxContext) throw new Error("ComboBoxOption must be used within a ComboBox");
+	if (!stateContext || !comboBoxContext) throw new Error("ComboBoxItem must be used within a ComboBox");
 	const state = stateContext;
 	const listState = comboBoxContext.listState;
 	const [ref, setRef] = createSignal(null);
@@ -564,12 +657,16 @@ function ComboBoxOption(props) {
 		const listBoxId = getComboBoxData(state)?.listBoxId;
 		return listBoxId ? `${listBoxId}-option-${local.id}` : String(local.id);
 	};
-	createEffect(() => {
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
 		const key = local.id;
 		comboBoxContext?.registerOptionAction(key, local.onAction);
-		onCleanup(() => {
+		_s2Cleanups.push(() => {
 			comboBoxContext?.registerOptionAction(key, void 0);
 		});
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
 	});
 	const optionAria = createOption({
 		key: local.id,
@@ -621,15 +718,53 @@ function ComboBoxOption(props) {
 		const { ref: _ref1, ...rest } = optionAria.optionProps;
 		return rest;
 	};
-	return <SelectionIndicatorContext.Provider value={selectionIndicatorContext()}>
+	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;
+		const stamp = () => {
+			if (labelId) {
+				const label = el.querySelector("[slot='label']");
+				if (label && label.id !== labelId) label.id = labelId;
+			}
+			if (descriptionId) {
+				const description = el.querySelector("[slot='description']");
+				if (description && description.id !== descriptionId) description.id = descriptionId;
+			}
+		};
+		stamp();
+		const observer = new MutationObserver(stamp);
+		observer.observe(el, {
+			childList: true,
+			subtree: true
+		});
+		return () => observer.disconnect();
+	});
+	const selectionMode = () => listState.selectionMode();
+	return <SelectionIndicatorContext value={selectionIndicatorContext()}>
       {}
       <div ref={(el) => {
 		setRef(el);
-		assignRef(local.ref, el);
-	}} {...cleanOptionProps()} class={renderProps.class()} style={renderProps.style()} data-selected={optionAria.isSelected() || void 0} data-focused={optionAria.isFocused() || void 0} data-focus-visible={isOptionFocusVisible() || void 0} data-pressed={optionAria.isPressed() || void 0} data-hovered={optionAria.isHovered() || void 0} data-disabled={optionAria.isDisabled() || void 0}>
-        {renderProps.renderChildren()}
+		assignRef$1(local.ref, el);
+	}} {...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={selectionMode() === "none" ? void 0 : selectionMode()}>
+        <Provider values={[[TextContext, optionTextSlots]]}>
+          <OptionContent render={renderProps.renderChildrenStable} labelProps={optionAria.labelProps} />
+        </Provider>
       </div>
-    </SelectionIndicatorContext.Provider>;
+    </SelectionIndicatorContext>;
 }
 /**
 * Renders selected items as tags in multi-select mode.
@@ -661,7 +796,7 @@ function ComboBoxTag(props) {
 	};
 	return <span class={props.class ?? "solidaria-ComboBox-tag"} style={props.style} data-key={String(props.item.key)}>
       {props.children ?? props.item.label}
-      <button type="button" aria-label={`Remove ${props.item.label}`} onClick={handleRemove} class="solidaria-ComboBox-tag-remove" tabIndex={-1}>
+      <button type="button" aria-label={`Remove ${props.item.label}`} onClick={handleRemove} class="solidaria-ComboBox-tag-remove" tabindex={-1}>
         &#215;
       </button>
     </span>;
@@ -669,7 +804,11 @@ function ComboBoxTag(props) {
 ComboBox.Input = ComboBoxInput;
 ComboBox.Button = ComboBoxButton;
 ComboBox.ListBox = ComboBoxListBox;
-ComboBox.Option = ComboBoxOption;
+/**
+* @deprecated Use {@link ComboBoxItem}. Local addition — RAC ComboBox uses ListBoxItem. Removed in a future minor.
+*/
+const ComboBoxOption = ComboBoxItem;
+ComboBox.Option = ComboBoxItem;
 ComboBox.Label = ComboBoxLabel;
 ComboBox.Description = ComboBoxDescription;
 ComboBox.ErrorMessage = ComboBoxErrorMessage;
@@ -679,7 +818,7 @@ function createComboBoxListStateAdapter(state) {
 	const selectedKeys = createMemo(() => {
 		if (state.selectionMode() === "multiple") return state.selectedKeys();
 		const key = state.selectedKey();
-		return key != null ? new Set([key]) : /* @__PURE__ */ new Set();
+		return key != null ? /* @__PURE__ */ new Set([key]) : /* @__PURE__ */ new Set();
 	});
 	const disabledKeys = createMemo(() => {
 		const keys = /* @__PURE__ */ new Set();
@@ -708,6 +847,10 @@ function createComboBoxListStateAdapter(state) {
 		toggleSelection: (key) => state.select(key),
 		replaceSelection: (key) => state.select(key),
 		setSelectedKeys: (keys) => {
+			if (state.selectionMode() === "multiple") {
+				state.setSelectedKeys(new Set(keys));
+				return;
+			}
 			const first = keys[Symbol.iterator]().next().value;
 			state.setSelectedKey(first ?? null);
 		},
@@ -719,6 +862,6 @@ function createComboBoxListStateAdapter(state) {
 	};
 }
 //#endregion
-export { ComboBox, ComboBoxButton, ComboBoxContext, ComboBoxDescription, ComboBoxErrorMessage, ComboBoxInput, ComboBoxLabel, ComboBoxListBox, ComboBoxOption, ComboBoxStateContext, ComboBoxTag, ComboBoxTagGroup, ComboBoxValue, ComboBoxValueContext, defaultContainsFilter };
+export { ComboBox, ComboBoxButton, ComboBoxContext, ComboBoxDescription, ComboBoxErrorMessage, ComboBoxInput, ComboBoxItem, ComboBoxLabel, ComboBoxListBox, ComboBoxOption, ComboBoxStateContext, ComboBoxTag, ComboBoxTagGroup, ComboBoxValue, ComboBoxValueContext, defaultContainsFilter };
 
 //# sourceMappingURL=ComboBox.jsx.map