@proyecto-viviana/solidaria-components 0.3.1 → 0.4.0

package/dist/ListBox.js

@@ -0,0 +1,670 @@
+import { filterDOMProps, useRenderProps } from "./utils.js";
+import { SharedElementTransition } from "./SharedElementTransition.js";
+import { SelectionIndicatorContext } from "./SelectionIndicator.js";
+import { CollectionRendererContext, Group, Header, Section, flattenCollectionEntries, isCollectionSection, useCollectionRenderer } from "./Collection.js";
+import { r as useVirtualizerContext } from "./Virtualizer2.js";
+import { getNormalizedDropTargetKey, mergePersistedKeysIntoVirtualRange, useDndPersistedKeys, useRenderDropIndicator } from "./DragAndDrop.js";
+import { className, createComponent, effect, getNextElement, getNextMarker, insert, memo, mergeProps, runHydrationEvents, setAttribute, spread, style, template, use } from "solid-js/web";
+import { For, Show, createContext, createEffect, createMemo, createSignal, onCleanup, splitProps, useContext } from "solid-js";
+import { createFocusRing, createListBox, createOption, createScrollIntoViewOnFocus, mergeProps as mergeProps$2, useLocale } from "@proyecto-viviana/solidaria";
+import { 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
+*/
+var _tmpl$ = /*#__PURE__*/ template(`<span>`), _tmpl$2 = /*#__PURE__*/ template(`<ul><!$><!/><!$><!/>`), _tmpl$3 = /*#__PURE__*/ template(`<li role=option data-empty-state style=display:contents>`), _tmpl$4 = /*#__PURE__*/ template(`<ul role=group>`), _tmpl$5 = /*#__PURE__*/ template(`<li role=presentation data-section-wrapper>`), _tmpl$6 = /*#__PURE__*/ template(`<li role=presentation aria-hidden=true data-virtualizer-spacer=top>`), _tmpl$7 = /*#__PURE__*/ template(`<li role=presentation aria-hidden=true data-virtualizer-spacer=bottom>`), _tmpl$8 = /*#__PURE__*/ template(`<li>`), _tmpl$9 = /*#__PURE__*/ template(`<li inert style=position:relative;width:0;height:0;overflow:hidden><div style=position:absolute;height:1px;width:1px>`), _tmpl$0 = /*#__PURE__*/ template(`<li role=option tabindex=0>`);
+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$2(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 state = 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 resolveDisabled = () => {
+		const disabled = ariaProps.isDisabled;
+		if (typeof disabled === "function") return disabled();
+		return !!disabled;
+	};
+	const locale = useLocale();
+	const listBoxAria = createListBox({
+		...ariaProps,
+		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()
+	});
+	const isEmpty = () => stateProps.items.length === 0;
+	const parentCollectionRenderer = useCollectionRenderer();
+	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)
+			}
+		}, 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 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 createComponent(ListBoxContext.Provider, {
+		get value() {
+			return {
+				state,
+				isDisabled: resolveDisabled,
+				dragAndDropHooks: local.dragAndDropHooks,
+				dragState: dragState(),
+				dropState: dropState(),
+				slots: local.slots
+			};
+		},
+		get children() {
+			return createComponent(ListBoxStateContext.Provider, {
+				value: state,
+				get children() {
+					return createComponent(CollectionRendererContext.Provider, {
+						get value() {
+							return collectionRenderer();
+						},
+						get children() {
+							return [createComponent(Show, {
+								get when() {
+									return ariaProps.label;
+								},
+								get children() {
+									var _el$ = getNextElement(_tmpl$);
+									spread(_el$, mergeProps(cleanLabelProps), false, true);
+									insert(_el$, () => ariaProps.label);
+									runHydrationEvents();
+									return _el$;
+								}
+							}), (() => {
+								var _el$2 = getNextElement(_tmpl$2), _el$3 = _el$2.firstChild, [_el$4, _co$] = getNextMarker(_el$3.nextSibling), _el$5 = _el$4.nextSibling, [_el$6, _co$2] = getNextMarker(_el$5.nextSibling);
+								use((el) => {
+									setListRef(el);
+									assignRef(local.ref, el);
+								}, _el$2);
+								spread(_el$2, mergeProps(() => mergeProps$2(domProps(), cleanListBoxProps(), cleanFocusProps(), droppableCollection()?.collectionProps ?? {}), {
+									get ["class"]() {
+										return renderProps.class();
+									},
+									get style() {
+										return renderProps.style();
+									},
+									get ["data-focused"]() {
+										return state.isFocused() || void 0;
+									},
+									get ["data-focus-visible"]() {
+										return isFocusVisible() || void 0;
+									},
+									get ["data-disabled"]() {
+										return resolveDisabled() || void 0;
+									},
+									get ["data-empty"]() {
+										return isEmpty() || void 0;
+									},
+									get ["data-layout"]() {
+										return stateProps.layout;
+									},
+									get ["data-orientation"]() {
+										return stateProps.orientation;
+									},
+									get ["data-drop-target"]() {
+										return isRootDropTarget() || void 0;
+									},
+									get slot() {
+										return local.slot;
+									}
+								}), false, true);
+								insert(_el$2, createComponent(SharedElementTransition, { get children() {
+									return memo(() => !!(isEmpty() && local.renderEmptyState))() ? (() => {
+										var _el$7 = getNextElement(_tmpl$3);
+										insert(_el$7, () => local.renderEmptyState());
+										return _el$7;
+									})() : memo(() => !!hasSections())() ? createComponent(For, {
+										get each() {
+											return sectionedRenderEntries();
+										},
+										children: (entry) => entry.type === "section" ? (() => {
+											var _el$8 = getNextElement(_tmpl$5);
+											insert(_el$8, createComponent(Section, {
+												"class": "solidaria-ListBox-section",
+												get children() {
+													return [memo(() => memo(() => entry.section.title != null)() && createComponent(Header, {
+														"class": "solidaria-ListBox-sectionHeader",
+														get children() {
+															return entry.section.title;
+														}
+													})), createComponent(Group, {
+														"class": "solidaria-ListBox-sectionGroup",
+														get children() {
+															var _el$9 = getNextElement(_tmpl$4);
+															insert(_el$9, createComponent(For, {
+																get each() {
+																	return entry.items;
+																},
+																children: (indexedItem) => [
+																	memo(() => collectionRenderer().renderDropIndicator?.(indexedItem.index, "before")),
+																	memo(() => collectionRenderer().renderDropIndicator?.(indexedItem.index, "on")),
+																	memo(() => local.children(indexedItem.item)),
+																	memo(() => collectionRenderer().renderDropIndicator?.(indexedItem.index, "after"))
+																]
+															}));
+															effect(() => setAttribute(_el$9, "aria-label", entry.section["aria-label"]));
+															return _el$9;
+														}
+													})];
+												}
+											}));
+											return _el$8;
+										})() : [
+											memo(() => collectionRenderer().renderDropIndicator?.(entry.item.index, "before")),
+											memo(() => collectionRenderer().renderDropIndicator?.(entry.item.index, "on")),
+											memo(() => local.children(entry.item.item)),
+											memo(() => collectionRenderer().renderDropIndicator?.(entry.item.index, "after"))
+										]
+									}) : [
+										memo(() => memo(() => !!virtualRange()?.offsetTop)() ? (() => {
+											var _el$0 = getNextElement(_tmpl$6);
+											effect((_$p) => style(_el$0, virtualSpacerStyle(virtualRange().offsetTop), _$p));
+											return _el$0;
+										})() : null),
+										createComponent(For, {
+											get each() {
+												return visibleItems();
+											},
+											children: (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 [
+													memo(beforeIndicator),
+													memo(onIndicator),
+													memo(() => local.children(item)),
+													memo(afterIndicator)
+												];
+											}
+										}),
+										memo(() => memo(() => !!virtualRange()?.offsetBottom)() ? (() => {
+											var _el$1 = getNextElement(_tmpl$7);
+											effect((_$p) => style(_el$1, virtualSpacerStyle(virtualRange().offsetBottom), _$p));
+											return _el$1;
+										})() : null)
+									];
+								} }), _el$4, _co$);
+								insert(_el$2, (() => {
+									var _c$ = memo(() => !!(local.hasMore && local.onLoadMore));
+									return () => _c$() && createComponent(ListBoxLoadMoreItem, {
+										get onLoadMore() {
+											return local.onLoadMore;
+										},
+										get isLoading() {
+											return local.isLoading;
+										}
+									});
+								})(), _el$6, _co$2);
+								runHydrationEvents();
+								return _el$2;
+							})()];
+						}
+					});
+				}
+			});
+		}
+	});
+}
+/**
+* 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);
+	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 }, 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 createComponent(SelectionIndicatorContext.Provider, {
+		get value() {
+			return selectionIndicatorContext();
+		},
+		get children() {
+			var _el$10 = getNextElement(_tmpl$8);
+			use((el) => {
+				setRef(el);
+				assignRef(local.ref, el);
+			}, _el$10);
+			spread(_el$10, mergeProps(() => mergeProps$2(domProps(), cleanOptionProps(), draggableItem()?.dragProps ?? {}, droppableItem()?.dropProps ?? {}), {
+				get ["class"]() {
+					return renderProps.class();
+				},
+				get style() {
+					return renderProps.style();
+				},
+				get ["data-selected"]() {
+					return optionAria.isSelected() || void 0;
+				},
+				get ["data-focused"]() {
+					return optionAria.isFocused() || void 0;
+				},
+				get ["data-focus-visible"]() {
+					return optionAria.isFocusVisible() || void 0;
+				},
+				get ["data-pressed"]() {
+					return optionAria.isPressed() || void 0;
+				},
+				get ["data-hovered"]() {
+					return optionAria.isHovered() || void 0;
+				},
+				get ["data-disabled"]() {
+					return optionAria.isDisabled() || void 0;
+				},
+				get ["data-dragging"]() {
+					return draggableItem()?.isDragging || void 0;
+				},
+				get ["data-drop-target"]() {
+					return droppableItem()?.isDropTarget || void 0;
+				},
+				get slot() {
+					return local.slot;
+				}
+			}), false, true);
+			insert(_el$10, (() => {
+				var _c$2 = memo(() => !!hasPrimitiveLabel());
+				return () => _c$2() ? (() => {
+					var _el$11 = getNextElement(_tmpl$);
+					spread(_el$11, mergeProps(() => optionAria.labelProps), false, true);
+					insert(_el$11, () => renderProps.renderChildren());
+					runHydrationEvents();
+					return _el$11;
+				})() : renderProps.renderChildren();
+			})());
+			runHydrationEvents();
+			return _el$10;
+		}
+	});
+}
+/**
+* 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(() => {
+		if (!sentinelRef || typeof IntersectionObserver !== "function") return;
+		const margin = `0px 0px ${100 * (props.scrollOffset ?? 1)}% 0px`;
+		const observer = new IntersectionObserver((entries) => {
+			if (entries[0]?.isIntersecting) triggerLoadMore();
+		}, { rootMargin: margin });
+		observer.observe(sentinelRef);
+		return () => observer.disconnect();
+	});
+	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 [(() => {
+		var _el$12 = getNextElement(_tmpl$9), _el$13 = _el$12.firstChild;
+		var _ref$ = sentinelRef;
+		typeof _ref$ === "function" ? use(_ref$, _el$13) : sentinelRef = _el$13;
+		return _el$12;
+	})(), (() => {
+		var _el$14 = getNextElement(_tmpl$0);
+		_el$14.addEventListener("focus", () => {
+			triggerLoadMore();
+		});
+		setAttribute(_el$14, "aria-disabled", true);
+		insert(_el$14, () => renderProps.renderChildren());
+		effect((_p$) => {
+			var _v$ = renderProps.class(), _v$2 = renderProps.style(), _v$3 = isLoading() || void 0;
+			_v$ !== _p$.e && className(_el$14, _p$.e = _v$);
+			_p$.t = style(_el$14, _v$2, _p$.t);
+			_v$3 !== _p$.a && setAttribute(_el$14, "data-loading", _p$.a = _v$3);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0
+		});
+		return _el$14;
+	})()];
+}
+/**
+* Section primitive alias for ListBox composition parity.
+*/
+function ListBoxSection(props) {
+	return createComponent(Section, props);
+}
+ListBox.Option = ListBoxOption;
+ListBox.LoadMoreItem = ListBoxLoadMoreItem;
+//#endregion
+export { ListBox, ListBoxContext, ListBoxLoadMoreItem, ListBoxOption, ListBoxSection, ListBoxStateContext, ListStateContext };
+
+//# sourceMappingURL=ListBox.js.map