@proyecto-viviana/solidaria-components 0.3.2 → 0.4.1

package/dist/ListBox.jsx

@@ -0,0 +1,644 @@
+import { filterDOMProps, useRenderProps } from "./utils.jsx";
+import { SharedElementTransition } from "./SharedElementTransition.jsx";
+import { SelectionIndicatorContext } from "./SelectionIndicator.jsx";
+import { CollectionRendererContext, Group, Header, Section, flattenCollectionEntries, isCollectionSection, useCollectionRenderer } from "./Collection.jsx";
+import { r as useVirtualizerContext } from "./Virtualizer2.jsx";
+import { useAutocompleteCollection } from "./Autocomplete.jsx";
+import { DropIndicatorContext, getNormalizedDropTargetKey, mergePersistedKeysIntoVirtualRange, useDndPersistedKeys, useRenderDropIndicator } from "./DragAndDrop.jsx";
+import { For, Show, createContext, createEffect, createMemo, createSignal, on, onCleanup, splitProps, useContext } from "solid-js";
+import { CLEAR_FOCUS_EVENT, FOCUS_EVENT, createDragSession, createFocusRing, createListBox, createOption, createScrollIntoViewOnFocus, createStringFormatter, dndIntlStrings, getGlobalDraggingCollectionRef, getGlobalDraggingKeys, mergeProps as mergeProps$1, moveVirtualFocus, registerDropItem, useLocale } from "@proyecto-viviana/solidaria";
+import { createFilteredListState, createListState } from "@proyecto-viviana/solid-stately";
+//#region src/ListBox.tsx
+/**
+* ListBox component for solidaria-components
+*
+* A pre-wired headless listbox that combines state + aria hooks.
+* Port of react-aria-components/src/ListBox.tsx
+*/
+function assignRef(ref, el) {
+	if (!ref) return;
+	if (typeof ref === "function") ref(el);
+	else ref.current = el;
+}
+const ListBoxContext = createContext(null);
+const ListBoxStateContext = createContext(null);
+const ListStateContext = ListBoxStateContext;
+/**
+* A listbox displays a list of options and allows a user to select one or more of them.
+*/
+function ListBox(props) {
+	const contextSlotProps = useContext(ListBoxContext)?.slots?.[props.slot ?? "default"];
+	const [local, stateProps, ariaProps] = splitProps(contextSlotProps ? mergeProps$1(contextSlotProps, props) : props, [
+		"children",
+		"class",
+		"style",
+		"slot",
+		"renderEmptyState",
+		"hasMore",
+		"isLoading",
+		"onLoadMore",
+		"dragAndDropHooks",
+		"slots",
+		"ref"
+	], [
+		"items",
+		"getKey",
+		"getTextValue",
+		"getDisabled",
+		"disabledKeys",
+		"disabledBehavior",
+		"selectionMode",
+		"selectionBehavior",
+		"selectedKeys",
+		"defaultSelectedKeys",
+		"onSelectionChange",
+		"layout",
+		"orientation"
+	]);
+	const flatItems = createMemo(() => {
+		return flattenCollectionEntries(stateProps.items);
+	});
+	const hasSections = createMemo(() => stateProps.items.some((item) => isCollectionSection(item)));
+	const baseState = createListState({
+		get items() {
+			return flatItems();
+		},
+		get getKey() {
+			return stateProps.getKey;
+		},
+		get getTextValue() {
+			return stateProps.getTextValue;
+		},
+		get getDisabled() {
+			return stateProps.getDisabled;
+		},
+		get disabledKeys() {
+			return stateProps.disabledKeys;
+		},
+		get selectionMode() {
+			return stateProps.selectionMode;
+		},
+		get selectionBehavior() {
+			return stateProps.selectionBehavior;
+		},
+		get disabledBehavior() {
+			return stateProps.disabledBehavior;
+		},
+		get selectedKeys() {
+			return stateProps.selectedKeys;
+		},
+		get defaultSelectedKeys() {
+			return stateProps.defaultSelectedKeys;
+		},
+		get onSelectionChange() {
+			return stateProps.onSelectionChange;
+		}
+	});
+	const autocompleteCtx = useAutocompleteCollection();
+	const state = autocompleteCtx ? createFilteredListState(baseState, () => autocompleteCtx.filter) : baseState;
+	const resolveDisabled = () => {
+		const disabled = ariaProps.isDisabled;
+		if (typeof disabled === "function") return disabled();
+		return !!disabled;
+	};
+	const locale = useLocale();
+	const parentCollectionRenderer = useCollectionRenderer();
+	const listBoxAria = createListBox({
+		...ariaProps,
+		get isVirtualized() {
+			return parentCollectionRenderer?.isVirtualized ?? ariaProps.isVirtualized;
+		},
+		get id() {
+			return autocompleteCtx?.collectionProps.id ?? ariaProps.id;
+		},
+		get "aria-label"() {
+			return autocompleteCtx?.collectionProps["aria-label"] ?? ariaProps["aria-label"];
+		},
+		get shouldUseVirtualFocus() {
+			return autocompleteCtx?.collectionProps.shouldUseVirtualFocus ?? ariaProps.shouldUseVirtualFocus;
+		},
+		get disallowTypeAhead() {
+			return autocompleteCtx?.collectionProps.disallowTypeAhead ?? ariaProps.disallowTypeAhead;
+		},
+		get isDisabled() {
+			return resolveDisabled();
+		},
+		get orientation() {
+			return stateProps.orientation ?? "vertical";
+		},
+		get direction() {
+			return locale().direction;
+		}
+	}, state, () => listRef());
+	const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+	const renderValues = createMemo(() => ({
+		isFocused: state.isFocused() || isFocused(),
+		isFocusVisible: isFocusVisible(),
+		isDisabled: resolveDisabled(),
+		isEmpty: state.collection().size === 0
+	}));
+	const renderProps = useRenderProps({
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ListBox"
+	}, renderValues);
+	const domProps = createMemo(() => {
+		return filterDOMProps(ariaProps, { global: true });
+	});
+	const cleanListBoxProps = () => {
+		const { ref: _ref1, ...rest } = listBoxAria.listBoxProps;
+		return rest;
+	};
+	const cleanFocusProps = () => {
+		const { ref: _ref2, ...rest } = focusProps;
+		return rest;
+	};
+	const cleanLabelProps = () => {
+		const { ref: _ref3, ...rest } = listBoxAria.labelProps;
+		return rest;
+	};
+	const [listRef, setListRef] = createSignal(null);
+	createScrollIntoViewOnFocus({
+		focusedKey: () => state.focusedKey(),
+		isActive: () => state.isFocused(),
+		ref: () => listRef()
+	});
+	if (autocompleteCtx) {
+		let shouldVirtualFocusFirst = false;
+		createEffect(() => {
+			const list = listRef();
+			if (!list) return;
+			const onFocusEvent = (e) => {
+				const detail = e.detail;
+				e.stopPropagation();
+				state.setFocused(true);
+				if (detail?.focusStrategy === "first") shouldVirtualFocusFirst = true;
+			};
+			const onClearFocusEvent = (e) => {
+				e.stopPropagation();
+				state.setFocused(false);
+				if (e.detail?.clearFocusKey) state.setFocusedKey(null);
+			};
+			list.addEventListener(FOCUS_EVENT, onFocusEvent);
+			list.addEventListener(CLEAR_FOCUS_EVENT, onClearFocusEvent);
+			onCleanup(() => {
+				list.removeEventListener(FOCUS_EVENT, onFocusEvent);
+				list.removeEventListener(CLEAR_FOCUS_EVENT, onClearFocusEvent);
+			});
+		});
+		createEffect(on(() => [state.collection().getFirstKey?.() ?? null, state.collection().size], ([firstKey, size]) => {
+			if (!shouldVirtualFocusFirst) return;
+			if (firstKey == null) {
+				const list = listRef();
+				if (list) moveVirtualFocus(list);
+				if (size > 0) shouldVirtualFocusFirst = false;
+			} else {
+				state.setFocusedKey(firstKey);
+				shouldVirtualFocusFirst = false;
+			}
+		}, { defer: true }));
+		createEffect(() => {
+			const key = state.focusedKey();
+			const list = listRef();
+			if (!list || !state.isFocused()) return;
+			if (key == null) return;
+			const el = list.ownerDocument.getElementById(String(key));
+			if (el) moveVirtualFocus(el);
+		});
+	}
+	const isEmpty = () => stateProps.items.length === 0;
+	const getItemNodes = createMemo(() => Array.from(state.collection()).filter((node) => node.type === "item"));
+	const getDropTargetByIndex = (index, position) => {
+		const node = getItemNodes()[index];
+		if (!node) return null;
+		return {
+			type: "item",
+			key: node.key,
+			dropPosition: position
+		};
+	};
+	const hasDroppableDnd = createMemo(() => {
+		const hooks = local.dragAndDropHooks;
+		return Boolean(hooks?.useDroppableCollectionState && hooks.useDroppableCollection && (hooks.dropTargetDelegate || parentCollectionRenderer?.dropTargetDelegate || hooks.ListDropTargetDelegate));
+	});
+	const dropState = createMemo(() => {
+		if (!hasDroppableDnd()) return void 0;
+		return local.dragAndDropHooks?.useDroppableCollectionState?.({});
+	});
+	const hasDraggableDnd = createMemo(() => {
+		const hooks = local.dragAndDropHooks;
+		return Boolean(hooks?.useDraggableCollectionState && hooks.useDraggableCollection);
+	});
+	const dragState = createMemo(() => {
+		if (!hasDraggableDnd()) return void 0;
+		return local.dragAndDropHooks?.useDraggableCollectionState?.({ items: flatItems() });
+	});
+	createEffect(() => {
+		if (!hasDraggableDnd()) return;
+		const hooks = local.dragAndDropHooks;
+		const activeDragState = dragState();
+		if (!hooks?.useDraggableCollection || !activeDragState) return;
+		hooks.useDraggableCollection({}, activeDragState, () => listRef());
+	});
+	const droppableCollection = createMemo(() => {
+		if (!hasDroppableDnd()) return void 0;
+		const hooks = local.dragAndDropHooks;
+		const activeDropState = dropState();
+		if (!hooks?.useDroppableCollection || !activeDropState) return void 0;
+		const resolveDirection = () => {
+			const el = listRef();
+			if (el && typeof window !== "undefined" && typeof window.getComputedStyle === "function") {
+				if (window.getComputedStyle(el).direction === "rtl") return "rtl";
+			}
+			return typeof document !== "undefined" && document.dir === "rtl" ? "rtl" : "ltr";
+		};
+		const dropTargetDelegate = hooks.dropTargetDelegate ?? parentCollectionRenderer?.dropTargetDelegate ?? (hooks.ListDropTargetDelegate ? new hooks.ListDropTargetDelegate(() => state.collection(), () => listRef(), {
+			layout: "stack",
+			orientation: "vertical",
+			direction: resolveDirection()
+		}) : void 0);
+		if (!dropTargetDelegate) return void 0;
+		return hooks.useDroppableCollection({
+			dropTargetDelegate,
+			keyboardDelegate: {
+				getFirstKey: () => state.collection().getFirstKey(),
+				getLastKey: () => state.collection().getLastKey(),
+				getKeyBelow: (key) => state.collection().getKeyAfter(key),
+				getKeyAbove: (key) => state.collection().getKeyBefore(key),
+				getKeyPageBelow: (key) => state.collection().getKeyAfter(key),
+				getKeyPageAbove: (key) => state.collection().getKeyBefore(key)
+			},
+			collection: state.collection(),
+			selectedKeys: state.selectionManager.selectedKeys,
+			setSelectedKeys: (keys) => state.selectionManager.setSelectedKeys(keys),
+			setFocusedKey: (key) => state.setFocusedKey(key)
+		}, activeDropState, () => listRef());
+	});
+	const isRootDropTarget = createMemo(() => {
+		return Boolean(dropState()?.target?.type === "root");
+	});
+	const dndRenderDropIndicator = createMemo(() => useRenderDropIndicator(local.dragAndDropHooks, dropState()));
+	const dndDropIndicator = (index, position) => {
+		const target = getDropTargetByIndex(index, position);
+		if (!target || target.type !== "item") return void 0;
+		return dndRenderDropIndicator()?.(target);
+	};
+	const dndFormatter = createStringFormatter(dndIntlStrings);
+	const dragSession = createDragSession();
+	const dropIndicatorTargetsEqual = (a, b) => !!a && a.type === "item" && a.key === b.key && a.dropPosition === b.dropPosition;
+	const dropIndicatorLabel = (target) => {
+		const collection = state.collection();
+		const getText = (key) => {
+			if (key == null) return "";
+			return collection.getTextValue(key) ?? collection.getItem(key)?.textValue ?? "";
+		};
+		if (target.dropPosition === "on") return dndFormatter().format("dropOnItem", { itemText: getText(target.key) });
+		let before;
+		let after;
+		if (target.dropPosition === "before") {
+			const prevKey = collection.getKeyBefore(target.key);
+			const prevNode = prevKey != null ? collection.getItem(prevKey) : null;
+			before = prevNode?.type === "item" ? prevNode.key : null;
+		} else before = target.key;
+		if (target.dropPosition === "after") {
+			const nextKey = collection.getKeyAfter(target.key);
+			const nextNode = nextKey != null ? collection.getItem(nextKey) : null;
+			after = nextNode?.type === "item" ? nextNode.key : null;
+		} else after = target.key;
+		if (before != null && after != null) return dndFormatter().format("insertBetween", {
+			beforeItemText: getText(before),
+			afterItemText: getText(after)
+		});
+		if (before != null) return dndFormatter().format("insertAfter", { itemText: getText(before) });
+		if (after != null) return dndFormatter().format("insertBefore", { itemText: getText(after) });
+		return "";
+	};
+	const wrapDropTypes = (types) => ({ has: (type) => {
+		if (typeof type === "string") return types.has(type);
+		if (Array.isArray(type)) return type.some((t) => typeof t === "string" && types.has(t));
+		return false;
+	} });
+	const ListBoxDropIndicator = (props) => {
+		const [indicatorRef, setIndicatorRef] = createSignal(null);
+		const isDropTarget = createMemo(() => dropIndicatorTargetsEqual(dropState()?.target, props.target));
+		const ariaHidden = createMemo(() => !dragSession() ? "true" : isDropTarget() ? void 0 : "true");
+		const isHidden = createMemo(() => !isDropTarget() && !!ariaHidden());
+		createEffect(() => {
+			const el = indicatorRef();
+			if (!el) return;
+			onCleanup(registerDropItem({
+				element: el,
+				target: props.target,
+				getDropOperation: (types, allowedOperations) => {
+					const st = dropState();
+					if (!st) return "cancel";
+					const isInternal = getGlobalDraggingCollectionRef() === listRef();
+					return st.getDropOperation(props.target, wrapDropTypes(types), allowedOperations, isInternal, getGlobalDraggingKeys());
+				}
+			}));
+			if (dragSession() && isDropTarget()) requestAnimationFrame(() => {
+				if (dragSession() && isDropTarget() && indicatorRef() === el) el.focus();
+			});
+		});
+		return <Show when={!isHidden()}>
+        <div ref={(el) => {
+			setIndicatorRef(el);
+			onCleanup(() => setIndicatorRef(null));
+		}} role="option" class="solidaria-DropIndicator" aria-roledescription={dndFormatter().format("dropIndicator")} aria-label={dropIndicatorLabel(props.target)} aria-hidden={ariaHidden()} tabindex={-1} data-drop-target={isDropTarget() || void 0} />
+      </Show>;
+	};
+	const dropIndicatorContextValue = { render: (p) => <ListBoxDropIndicator target={p.target} /> };
+	const virtualizer = useVirtualizerContext();
+	const persistedKeys = useDndPersistedKeys({ focusedKey: state.focusedKey }, local.dragAndDropHooks, dropState(), state.collection());
+	const virtualRange = createMemo(() => {
+		if (!virtualizer || !parentCollectionRenderer?.isVirtualized || hasSections()) return null;
+		const baseRange = virtualizer.getVisibleRange(stateProps.items.length);
+		const itemNodes = getItemNodes();
+		const persistedIndexes = Array.from(persistedKeys()).map((key) => itemNodes.findIndex((node) => node.key === key)).filter((index) => index >= 0);
+		const dropTarget = dropState()?.target;
+		const normalizedDropKey = getNormalizedDropTargetKey(dropTarget, state.collection());
+		const focusedKey = state.focusedKey();
+		const focusedIndex = focusedKey != null ? itemNodes.findIndex((node) => node.key === focusedKey) : -1;
+		const forceIncludeIndexes = [
+			dropTarget?.type === "item" ? itemNodes.findIndex((node) => node.key === dropTarget.key) : -1,
+			normalizedDropKey != null ? itemNodes.findIndex((node) => node.key === normalizedDropKey) : -1,
+			dropTarget?.type === "item" ? -1 : focusedIndex
+		].filter((index) => index >= 0);
+		return mergePersistedKeysIntoVirtualRange(baseRange, persistedIndexes, stateProps.items.length, virtualizer, 80, {
+			forceIncludeIndexes,
+			forceIncludeMaxSpan: 320
+		});
+	});
+	createEffect(() => {
+		if (!virtualizer || !parentCollectionRenderer?.isVirtualized) return;
+		const getItemNodes = () => Array.from(state.collection()).filter((node) => node.type === "item");
+		virtualizer.setDropTargetItemCountResolver(() => getItemNodes().length);
+		virtualizer.setDropTargetIndexResolver((key) => {
+			const index = getItemNodes().findIndex((node) => node.key === key);
+			return index >= 0 ? index : null;
+		});
+		virtualizer.setDropTargetResolver((target) => {
+			const node = getItemNodes()[target.index];
+			if (!node) return target;
+			return {
+				...target,
+				key: typeof node.key === "string" || typeof node.key === "number" ? node.key : void 0
+			};
+		});
+		onCleanup(() => {
+			virtualizer.setDropTargetIndexResolver(void 0);
+			virtualizer.setDropTargetItemCountResolver(void 0);
+			virtualizer.setDropTargetResolver(void 0);
+		});
+	});
+	const visibleItems = createMemo(() => {
+		const range = virtualRange();
+		if (!range) return stateProps.items;
+		return stateProps.items.slice(range.start, range.end);
+	});
+	const virtualSpacerStyle = (size) => virtualizer?.orientation === "horizontal" ? { width: `${size}px` } : { height: `${size}px` };
+	const sectionedRenderEntries = createMemo(() => {
+		let globalIndex = 0;
+		return stateProps.items.map((entry) => {
+			if (isCollectionSection(entry)) return {
+				type: "section",
+				section: entry,
+				items: entry.items.map((item) => ({
+					item,
+					index: globalIndex++
+				}))
+			};
+			return {
+				type: "item",
+				item: {
+					item: entry,
+					index: globalIndex++
+				}
+			};
+		});
+	});
+	const collectionRenderer = createMemo(() => ({
+		...parentCollectionRenderer,
+		renderItem: (item) => local.children(item),
+		renderDropIndicator: (index, position) => dndDropIndicator(index, position) ?? parentCollectionRenderer?.renderDropIndicator?.(index, position)
+	}));
+	return <ListBoxContext.Provider value={{
+		state,
+		isDisabled: resolveDisabled,
+		dragAndDropHooks: local.dragAndDropHooks,
+		dragState: dragState(),
+		dropState: dropState(),
+		slots: local.slots
+	}}>
+      <ListBoxStateContext.Provider value={state}>
+        <CollectionRendererContext.Provider value={collectionRenderer()}>
+         <DropIndicatorContext.Provider value={dropIndicatorContextValue}>
+          <>
+            <Show when={ariaProps.label}>
+              <span {...cleanLabelProps()}>{ariaProps.label}</span>
+            </Show>
+            <div {...mergeProps$1(domProps(), cleanListBoxProps(), cleanFocusProps(), droppableCollection()?.collectionProps ?? {})} ref={(el) => {
+		setListRef(el);
+		assignRef(local.ref, el);
+		autocompleteCtx?.collectionRef(el);
+	}} class={renderProps.class()} style={renderProps.style()} data-focused={state.isFocused() || void 0} data-focus-visible={isFocusVisible() || void 0} data-disabled={resolveDisabled() || void 0} data-empty={isEmpty() || void 0} data-layout={stateProps.layout} data-orientation={stateProps.orientation} data-drop-target={isRootDropTarget() || void 0} slot={local.slot}>
+              <SharedElementTransition>
+                {isEmpty() && local.renderEmptyState ? <div role="option" style={{ display: "contents" }} data-empty-state>
+                    {local.renderEmptyState()}
+                  </div> : hasSections() ? <For each={sectionedRenderEntries()}>
+                    {(entry) => entry.type === "section" ? <div role="presentation" data-section-wrapper>
+                          <Section class="solidaria-ListBox-section">
+                            {entry.section.title != null && <Header class="solidaria-ListBox-sectionHeader">
+                                {entry.section.title}
+                              </Header>}
+                            <Group class="solidaria-ListBox-sectionGroup">
+                              <div role="group" aria-label={entry.section["aria-label"]}>
+                                <For each={entry.items}>
+                                  {(indexedItem) => <>
+                                      {collectionRenderer().renderDropIndicator?.(indexedItem.index, "before")}
+                                      {collectionRenderer().renderDropIndicator?.(indexedItem.index, "on")}
+                                      {local.children(indexedItem.item)}
+                                      {collectionRenderer().renderDropIndicator?.(indexedItem.index, "after")}
+                                    </>}
+                                </For>
+                              </div>
+                            </Group>
+                          </Section>
+                        </div> : <>
+                          {collectionRenderer().renderDropIndicator?.(entry.item.index, "before")}
+                          {collectionRenderer().renderDropIndicator?.(entry.item.index, "on")}
+                          {local.children(entry.item.item)}
+                          {collectionRenderer().renderDropIndicator?.(entry.item.index, "after")}
+                        </>}
+                  </For> : <>
+                    {virtualRange()?.offsetTop ? <div role="presentation" aria-hidden="true" style={virtualSpacerStyle(virtualRange().offsetTop)} data-virtualizer-spacer="top" /> : null}
+                    <For each={visibleItems()}>
+                      {(item, index) => {
+		const itemIndex = () => (virtualRange()?.start ?? 0) + index();
+		const beforeIndicator = () => collectionRenderer().renderDropIndicator?.(itemIndex(), "before");
+		const onIndicator = () => collectionRenderer().renderDropIndicator?.(itemIndex(), "on");
+		const afterIndicator = () => collectionRenderer().renderDropIndicator?.(itemIndex(), "after");
+		return <>
+                            {beforeIndicator()}
+                            {onIndicator()}
+                            {local.children(item)}
+                            {afterIndicator()}
+                          </>;
+	}}
+                    </For>
+                    {virtualRange()?.offsetBottom ? <div role="presentation" aria-hidden="true" style={virtualSpacerStyle(virtualRange().offsetBottom)} data-virtualizer-spacer="bottom" /> : null}
+                  </>}
+              </SharedElementTransition>
+              {local.hasMore && local.onLoadMore && <ListBoxLoadMoreItem onLoadMore={local.onLoadMore} isLoading={local.isLoading} />}
+            </div>
+          </>
+         </DropIndicatorContext.Provider>
+        </CollectionRendererContext.Provider>
+      </ListBoxStateContext.Provider>
+    </ListBoxContext.Provider>;
+}
+/**
+* An option in a listbox.
+*/
+function ListBoxOption(props) {
+	const [local, ariaProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"id",
+		"item",
+		"textValue",
+		"ref"
+	]);
+	const context = useContext(ListBoxStateContext);
+	if (!context) throw new Error("ListBoxOption must be used within a ListBox");
+	const state = context;
+	const listContext = useContext(ListBoxContext);
+	const [ref, setRef] = createSignal(null);
+	const optionAria = createOption({
+		key: local.id,
+		get isDisabled() {
+			return Boolean(ariaProps.isDisabled || listContext?.isDisabled());
+		},
+		get "aria-label"() {
+			return ariaProps["aria-label"] ?? local.textValue;
+		},
+		get shouldSelectOnPressUp() {
+			return ariaProps.shouldSelectOnPressUp;
+		},
+		get shouldFocusOnHover() {
+			return ariaProps.shouldFocusOnHover;
+		},
+		get onHoverStart() {
+			return ariaProps.onHoverStart;
+		},
+		get onHoverEnd() {
+			return ariaProps.onHoverEnd;
+		},
+		get onHoverChange() {
+			return ariaProps.onHoverChange;
+		}
+	}, state, ref);
+	const renderValues = createMemo(() => ({
+		isSelected: optionAria.isSelected(),
+		isFocused: optionAria.isFocused(),
+		isFocusVisible: optionAria.isFocusVisible(),
+		isPressed: optionAria.isPressed(),
+		isHovered: optionAria.isHovered(),
+		isDisabled: optionAria.isDisabled()
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ListBox-option"
+	}, renderValues);
+	const hasPrimitiveLabel = () => {
+		return typeof props.children === "string" || typeof props.children === "number";
+	};
+	const selectionIndicatorContext = createMemo(() => ({ isSelected: optionAria.isSelected }));
+	const draggableItem = createMemo(() => {
+		if (!listContext?.dragAndDropHooks?.useDraggableItem || !listContext.dragState) return void 0;
+		return listContext.dragAndDropHooks.useDraggableItem({
+			key: local.id,
+			selectionMode: state.selectionManager.selectionMode
+		}, listContext.dragState);
+	});
+	const droppableItem = createMemo(() => {
+		if (!listContext?.dragAndDropHooks?.useDroppableItem || !listContext.dropState) return void 0;
+		return listContext.dragAndDropHooks.useDroppableItem({ key: local.id }, listContext.dropState, () => ref());
+	});
+	const cleanOptionProps = () => {
+		const { ref: _ref1, "aria-describedby": _ariaDescribedby, ...rest } = optionAria.optionProps;
+		if (!hasPrimitiveLabel() && rest["aria-label"] == null) delete rest["aria-labelledby"];
+		return rest;
+	};
+	const domProps = () => filterDOMProps(ariaProps, { global: true });
+	return <SelectionIndicatorContext.Provider value={selectionIndicatorContext()}>
+      <div ref={(el) => {
+		setRef(el);
+		assignRef(local.ref, el);
+	}} {...mergeProps$1(domProps(), cleanOptionProps(), draggableItem()?.dragProps ?? {}, droppableItem()?.dropProps ?? {})} class={renderProps.class()} style={renderProps.style()} data-selected={optionAria.isSelected() || void 0} data-focused={optionAria.isFocused() || void 0} data-focus-visible={optionAria.isFocusVisible() || void 0} data-pressed={optionAria.isPressed() || void 0} data-hovered={optionAria.isHovered() || void 0} data-disabled={optionAria.isDisabled() || void 0} data-dragging={draggableItem()?.isDragging || void 0} data-drop-target={droppableItem()?.isDropTarget || void 0} slot={local.slot}>
+        {hasPrimitiveLabel() ? <span {...optionAria.labelProps}>{renderProps.renderChildren()}</span> : renderProps.renderChildren()}
+      </div>
+    </SelectionIndicatorContext.Provider>;
+}
+/**
+* Load more sentinel item for listbox collections.
+*/
+function ListBoxLoadMoreItem(props) {
+	let sentinelRef;
+	const [isPending, setIsPending] = createSignal(false);
+	const isLoading = () => !!props.isLoading || isPending();
+	const triggerLoadMore = async () => {
+		if (isLoading()) return;
+		setIsPending(true);
+		try {
+			await props.onLoadMore();
+		} finally {
+			setIsPending(false);
+		}
+	};
+	createEffect(() => {});
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children ?? (() => isLoading() ? "Loading more..." : "Load more");
+		},
+		class: props.class,
+		style: props.style,
+		defaultClassName: "solidaria-ListBox-loadMore"
+	}, () => ({ isLoading: isLoading() }));
+	return <>
+      <div style={{
+		position: "relative",
+		width: 0,
+		height: 0,
+		overflow: "hidden"
+	}} inert>
+        <div ref={sentinelRef} style={{
+		position: "absolute",
+		height: "1px",
+		width: "1px"
+	}} />
+      </div>
+      <div role="option" aria-disabled={true} tabIndex={0} onFocus={() => {
+		triggerLoadMore();
+	}} class={renderProps.class()} style={renderProps.style()} data-loading={isLoading() || void 0}>
+        {renderProps.renderChildren()}
+      </div>
+    </>;
+}
+/**
+* Section primitive alias for ListBox composition parity.
+*/
+function ListBoxSection(props) {
+	return <Section {...props} />;
+}
+ListBox.Option = ListBoxOption;
+ListBox.LoadMoreItem = ListBoxLoadMoreItem;
+//#endregion
+export { ListBox, ListBoxContext, ListBoxLoadMoreItem, ListBoxOption, ListBoxSection, ListBoxStateContext, ListStateContext };
+
+//# sourceMappingURL=ListBox.jsx.map