@proyecto-viviana/solidaria-components 0.3.2 → 0.4.0

package/dist/GridList.js

@@ -0,0 +1,723 @@
+import { filterDOMProps, useRenderProps } from "./utils.js";
+import { SharedElementTransition } from "./SharedElementTransition.js";
+import { CollectionRendererContext, 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, createContext, createEffect, createMemo, createSignal, onCleanup, splitProps, useContext } from "solid-js";
+import { createFocusRing, createGridList, createGridListItem, createGridListSection, createGridListSelectionCheckbox, createHover, mergeProps as mergeProps$2 } from "@proyecto-viviana/solidaria";
+import { createGridState } from "@proyecto-viviana/solid-stately";
+//#region src/GridList.tsx
+/**
+* GridList component for solidaria-components
+*
+* A pre-wired headless grid list that combines state + aria hooks.
+* Based on react-aria-components/src/GridList.tsx
+*
+* GridList is similar to ListBox but supports interactive elements within items
+* and uses grid keyboard navigation.
+*/
+var _tmpl$ = /*#__PURE__*/ template(`<div><!$><!/><!$><!/>`), _tmpl$2 = /*#__PURE__*/ template(`<div role=presentation aria-hidden=true data-virtualizer-spacer=top>`), _tmpl$3 = /*#__PURE__*/ template(`<div role=presentation aria-hidden=true data-virtualizer-spacer=bottom>`), _tmpl$4 = /*#__PURE__*/ template(`<div><div>`), _tmpl$5 = /*#__PURE__*/ template(`<input>`), _tmpl$6 = /*#__PURE__*/ template(`<div inert style=position:relative;width:0;height:0;overflow:hidden><div style=position:absolute;height:1px;width:1px>`), _tmpl$7 = /*#__PURE__*/ template(`<div role=row tabindex=0>`), _tmpl$8 = /*#__PURE__*/ template(`<div>`);
+function assignRef(ref, el) {
+	if (!ref) return;
+	if (typeof ref === "function") ref(el);
+	else ref.current = el;
+}
+const GridListContext = createContext(null);
+const GridListStateContext = createContext(null);
+/** Carries the section header's outer (row) props to {@link GridListHeader}. */
+const GridListHeaderContext = createContext(null);
+/** Carries the section header's inner (rowheader) props to {@link GridListHeader}. */
+const GridListHeaderInnerContext = createContext(null);
+function buildGridCollection(items, getKey, getTextValue, getDisabled) {
+	const nodes = items.map((item, index) => {
+		const key = getKey?.(item) ?? index;
+		return {
+			type: "item",
+			key,
+			value: item,
+			textValue: getTextValue?.(item) ?? String(key),
+			level: 0,
+			index,
+			hasChildNodes: false,
+			childNodes: [],
+			isDisabled: getDisabled?.(item)
+		};
+	});
+	const keyMap = /* @__PURE__ */ new Map();
+	nodes.forEach((node) => keyMap.set(node.key, node));
+	return {
+		rows: nodes,
+		columns: [],
+		headerRows: [],
+		get rowCount() {
+			return nodes.length;
+		},
+		get columnCount() {
+			return 1;
+		},
+		get size() {
+			return nodes.length;
+		},
+		getKeys() {
+			return nodes.map((n) => n.key);
+		},
+		getItem(key) {
+			return keyMap.get(key) ?? null;
+		},
+		at(index) {
+			return nodes[index] ?? null;
+		},
+		getKeyBefore(key) {
+			const node = keyMap.get(key);
+			if (!node) return null;
+			return node.index > 0 ? nodes[node.index - 1].key : null;
+		},
+		getKeyAfter(key) {
+			const node = keyMap.get(key);
+			if (!node) return null;
+			return node.index < nodes.length - 1 ? nodes[node.index + 1].key : null;
+		},
+		getFirstKey() {
+			return nodes[0]?.key ?? null;
+		},
+		getLastKey() {
+			return nodes[nodes.length - 1]?.key ?? null;
+		},
+		getChildren(_key) {
+			return [];
+		},
+		getTextValue(key) {
+			return keyMap.get(key)?.textValue ?? "";
+		},
+		getCell(_rowKey, _columnKey) {
+			return null;
+		},
+		[Symbol.iterator]() {
+			return nodes[Symbol.iterator]();
+		}
+	};
+}
+/**
+* A grid list displays a list of interactive items, with support for
+* keyboard navigation, single or multiple selection, and row actions.
+*/
+function GridList(props) {
+	const [local, stateProps, ariaProps] = splitProps(props, [
+		"children",
+		"class",
+		"style",
+		"ref",
+		"slot",
+		"renderEmptyState",
+		"hasMore",
+		"isLoading",
+		"onLoadMore",
+		"dragAndDropHooks",
+		"orientation"
+	], [
+		"items",
+		"getKey",
+		"getTextValue",
+		"getDisabled",
+		"disabledKeys",
+		"disabledBehavior",
+		"selectionMode",
+		"selectedKeys",
+		"defaultSelectedKeys",
+		"onSelectionChange",
+		"selectionBehavior"
+	]);
+	const [ref, setRef] = createSignal(null);
+	const collection = createMemo(() => buildGridCollection(stateProps.items, stateProps.getKey, stateProps.getTextValue, stateProps.getDisabled));
+	const allDisabledKeys = createMemo(() => {
+		const keys = /* @__PURE__ */ new Set();
+		if (stateProps.disabledKeys) for (const key of stateProps.disabledKeys) keys.add(key);
+		for (const node of collection().rows) if (node.isDisabled) keys.add(node.key);
+		return keys;
+	});
+	const orientation = () => local.orientation ?? "vertical";
+	const resolveDirection = () => {
+		const el = ref();
+		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 state = createGridState(() => ({
+		collection: collection(),
+		disabledKeys: allDisabledKeys(),
+		disabledBehavior: stateProps.disabledBehavior,
+		selectionMode: stateProps.selectionMode,
+		selectionBehavior: stateProps.selectionBehavior ?? "replace",
+		selectedKeys: stateProps.selectedKeys,
+		defaultSelectedKeys: stateProps.defaultSelectedKeys,
+		onSelectionChange: stateProps.onSelectionChange
+	}));
+	const { gridProps } = createGridList(() => ({
+		id: ariaProps.id,
+		"aria-label": ariaProps["aria-label"],
+		"aria-labelledby": ariaProps["aria-labelledby"],
+		"aria-describedby": ariaProps["aria-describedby"],
+		isVirtualized: ariaProps.isVirtualized,
+		onAction: ariaProps.onAction,
+		isDisabled: ariaProps.isDisabled,
+		selectionBehavior: state.selectionBehavior,
+		keyboardNavigationBehavior: ariaProps.keyboardNavigationBehavior,
+		orientation: orientation(),
+		direction: resolveDirection()
+	}), () => state, ref);
+	const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+	const renderValues = createMemo(() => ({
+		isFocused: state.isFocused || isFocused(),
+		isFocusVisible: isFocusVisible(),
+		isDisabled: ariaProps.isDisabled ?? false,
+		isEmpty: stateProps.items.length === 0,
+		orientation: orientation()
+	}));
+	const renderProps = useRenderProps({
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-GridList"
+	}, renderValues);
+	const domProps = createMemo(() => {
+		return filterDOMProps(ariaProps, { global: true });
+	});
+	const cleanGridProps = () => {
+		const { ref: _ref1, ...rest } = gridProps;
+		return rest;
+	};
+	const cleanFocusProps = () => {
+		const { ref: _ref2, ...rest } = focusProps;
+		return rest;
+	};
+	const isEmpty = () => stateProps.items.length === 0;
+	const virtualizer = useVirtualizerContext();
+	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 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: stateProps.items });
+	});
+	const dropState = createMemo(() => {
+		if (!hasDroppableDnd()) return void 0;
+		return local.dragAndDropHooks?.useDroppableCollectionState?.({});
+	});
+	createEffect(() => {
+		if (!hasDraggableDnd()) return;
+		const hooks = local.dragAndDropHooks;
+		const activeDragState = dragState();
+		if (!hooks?.useDraggableCollection || !activeDragState) return;
+		hooks.useDraggableCollection({}, activeDragState, () => ref());
+	});
+	const droppableCollection = createMemo(() => {
+		if (!hasDroppableDnd()) return void 0;
+		const hooks = local.dragAndDropHooks;
+		const activeDropState = dropState();
+		if (!hooks?.useDroppableCollection || !activeDropState) return void 0;
+		const dropTargetDelegate = hooks.dropTargetDelegate ?? parentCollectionRenderer?.dropTargetDelegate ?? (hooks.ListDropTargetDelegate ? new hooks.ListDropTargetDelegate(() => state.collection, () => ref(), {
+			layout: "grid",
+			orientation: orientation(),
+			direction: resolveDirection()
+		}) : void 0);
+		if (!dropTargetDelegate) return void 0;
+		return hooks.useDroppableCollection({
+			dropTargetDelegate,
+			keyboardDelegate: {
+				getFirstKey: () => state.collection.getFirstKey?.() ?? null,
+				getLastKey: () => state.collection.getLastKey?.() ?? null,
+				getKeyBelow: (key) => state.collection.getKeyAfter?.(key) ?? null,
+				getKeyAbove: (key) => state.collection.getKeyBefore?.(key) ?? null,
+				getKeyLeftOf: (key) => resolveDirection() === "rtl" ? state.collection.getKeyAfter?.(key) ?? null : state.collection.getKeyBefore?.(key) ?? null,
+				getKeyRightOf: (key) => resolveDirection() === "rtl" ? state.collection.getKeyBefore?.(key) ?? null : state.collection.getKeyAfter?.(key) ?? null,
+				getKeyPageBelow: (key) => state.collection.getKeyAfter?.(key) ?? null,
+				getKeyPageAbove: (key) => state.collection.getKeyBefore?.(key) ?? null
+			}
+		}, activeDropState, () => ref());
+	});
+	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 persistedKeys = useDndPersistedKeys({ focusedKey: () => state.focusedKey }, local.dragAndDropHooks, dropState(), state.collection);
+	const virtualRange = createMemo(() => {
+		if (!virtualizer || !parentCollectionRenderer?.isVirtualized) 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;
+		virtualizer.setDropTargetItemCountResolver(() => state.collection.size);
+		virtualizer.setDropTargetIndexResolver((key) => {
+			const index = Array.from(state.collection).findIndex((node) => node.key === key);
+			return index >= 0 ? index : null;
+		});
+		virtualizer.setDropTargetResolver((target) => {
+			const node = Array.from(state.collection)[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 contextValue = createMemo(() => ({
+		state,
+		collection: collection(),
+		isDisabled: ariaProps.isDisabled ?? false,
+		selectionBehavior: state.selectionBehavior,
+		dragAndDropHooks: local.dragAndDropHooks,
+		dragState: dragState(),
+		dropState: dropState()
+	}));
+	const collectionRenderer = createMemo(() => ({
+		...parentCollectionRenderer,
+		renderItem: (item) => props.children(item),
+		renderDropIndicator: (index, position) => dndDropIndicator(index, position) ?? parentCollectionRenderer?.renderDropIndicator?.(index, position)
+	}));
+	return createComponent(GridListContext.Provider, {
+		get value() {
+			return contextValue();
+		},
+		get children() {
+			return createComponent(GridListStateContext.Provider, {
+				value: state,
+				get children() {
+					return createComponent(CollectionRendererContext.Provider, {
+						get value() {
+							return collectionRenderer();
+						},
+						get children() {
+							var _el$ = getNextElement(_tmpl$), _el$2 = _el$.firstChild, [_el$3, _co$] = getNextMarker(_el$2.nextSibling), _el$4 = _el$3.nextSibling, [_el$5, _co$2] = getNextMarker(_el$4.nextSibling);
+							use((element) => {
+								setRef(element);
+								assignRef(local.ref, element);
+							}, _el$);
+							spread(_el$, mergeProps(() => mergeProps$2(domProps(), cleanGridProps(), 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 ariaProps.isDisabled || void 0;
+								},
+								get ["data-empty"]() {
+									return isEmpty() || void 0;
+								},
+								get ["data-drop-target"]() {
+									return isRootDropTarget() || void 0;
+								},
+								get ["data-orientation"]() {
+									return orientation();
+								}
+							}), false, true);
+							insert(_el$, createComponent(SharedElementTransition, { get children() {
+								return memo(() => !!(isEmpty() && local.renderEmptyState))() ? local.renderEmptyState() : [
+									memo(() => memo(() => !!virtualRange()?.offsetTop)() ? (() => {
+										var _el$6 = getNextElement(_tmpl$2);
+										effect((_$p) => style(_el$6, virtualSpacerStyle(virtualRange().offsetTop), _$p));
+										return _el$6;
+									})() : 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(() => props.children(item)),
+												memo(afterIndicator)
+											];
+										}
+									}),
+									memo(() => memo(() => !!virtualRange()?.offsetBottom)() ? (() => {
+										var _el$7 = getNextElement(_tmpl$3);
+										effect((_$p) => style(_el$7, virtualSpacerStyle(virtualRange().offsetBottom), _$p));
+										return _el$7;
+									})() : null)
+								];
+							} }), _el$3, _co$);
+							insert(_el$, (() => {
+								var _c$ = memo(() => !!(local.hasMore && local.onLoadMore));
+								return () => _c$() && createComponent(GridListLoadMoreItem, {
+									get onLoadMore() {
+										return local.onLoadMore;
+									},
+									get isLoading() {
+										return local.isLoading;
+									}
+								});
+							})(), _el$5, _co$2);
+							runHydrationEvents();
+							return _el$;
+						}
+					});
+				}
+			});
+		}
+	});
+}
+/**
+* An item in a grid list.
+*/
+function GridListItem(props) {
+	const [local, domProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"id",
+		"item",
+		"textValue",
+		"onAction",
+		"children",
+		"ref"
+	]);
+	const context = useContext(GridListStateContext);
+	if (!context) throw new Error("GridListItem must be used within a GridList");
+	const state = context;
+	const listContext = useContext(GridListContext);
+	const [ref, setRef] = createSignal(null);
+	const itemNode = createMemo(() => {
+		const node = state.collection.getItem(local.id);
+		if (!node) return {
+			type: "item",
+			key: local.id,
+			value: local.item ?? null,
+			textValue: local.textValue ?? String(local.id),
+			level: 0,
+			index: 0,
+			hasChildNodes: false,
+			childNodes: []
+		};
+		return node;
+	});
+	const itemAria = createGridListItem(() => ({
+		node: itemNode(),
+		onAction: local.onAction,
+		selectionBehavior: listContext?.selectionBehavior ?? "replace"
+	}), () => state, ref);
+	const isSelected = () => itemAria.isSelected;
+	const isDisabled = () => itemAria.isDisabled;
+	const isPressed = () => itemAria.isPressed;
+	const { isHovered, hoverProps } = createHover({ get isDisabled() {
+		return isDisabled();
+	} });
+	const { isFocusVisible, focusProps } = createFocusRing();
+	const isFocused = createMemo(() => state.focusedKey === local.id);
+	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 renderValues = createMemo(() => ({
+		isSelected: isSelected(),
+		isFocused: isFocused(),
+		isFocusVisible: isFocusVisible() && isFocused(),
+		isPressed: isPressed(),
+		isHovered: isHovered(),
+		isDisabled: isDisabled(),
+		selectionMode: state.selectionMode,
+		selectionBehavior: listContext?.selectionBehavior ?? "replace"
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-GridList-item"
+	}, renderValues);
+	const cleanRowProps = () => {
+		const { ref: _ref1, ...rest } = itemAria.rowProps;
+		return rest;
+	};
+	const cleanHoverProps = () => {
+		const { ref: _ref2, ...rest } = hoverProps;
+		return rest;
+	};
+	const cleanFocusProps = () => {
+		const { ref: _ref3, ...rest } = focusProps;
+		return rest;
+	};
+	return (() => {
+		var _el$8 = getNextElement(_tmpl$4), _el$9 = _el$8.firstChild;
+		use((element) => {
+			setRef(element);
+			assignRef(local.ref, element);
+		}, _el$8);
+		spread(_el$8, mergeProps(domProps, () => mergeProps$2(cleanRowProps(), cleanHoverProps(), cleanFocusProps(), draggableItem()?.dragProps ?? {}, droppableItem()?.dropProps ?? {}), {
+			get ["class"]() {
+				return renderProps.class();
+			},
+			get style() {
+				return renderProps.style();
+			},
+			get ["data-key"]() {
+				return local.id;
+			},
+			get ["data-selected"]() {
+				return isSelected() || void 0;
+			},
+			get ["data-focused"]() {
+				return isFocused() || void 0;
+			},
+			get ["data-focus-visible"]() {
+				return memo(() => !!isFocusVisible())() && isFocused() || void 0;
+			},
+			get ["data-pressed"]() {
+				return isPressed() || void 0;
+			},
+			get ["data-hovered"]() {
+				return isHovered() || void 0;
+			},
+			get ["data-disabled"]() {
+				return isDisabled() || void 0;
+			},
+			get ["data-dragging"]() {
+				return draggableItem()?.isDragging || void 0;
+			},
+			get ["data-drop-target"]() {
+				return droppableItem()?.isDropTarget || void 0;
+			}
+		}), false, true);
+		spread(_el$9, mergeProps(() => itemAria.gridCellProps), false, true);
+		insert(_el$9, () => renderProps.renderChildren());
+		runHydrationEvents();
+		return _el$8;
+	})();
+}
+/**
+* A checkbox for item selection in a grid list.
+*/
+function GridListSelectionCheckbox(props) {
+	const context = useContext(GridListStateContext);
+	if (!context) throw new Error("GridListSelectionCheckbox must be used within a GridList");
+	const state = context;
+	const checkboxAria = createGridListSelectionCheckbox(() => ({ key: props.itemKey }), () => state);
+	return (() => {
+		var _el$0 = getNextElement(_tmpl$5);
+		spread(_el$0, mergeProps(() => checkboxAria.checkboxProps, {
+			get ["class"]() {
+				return props.class;
+			},
+			get style() {
+				return props.style;
+			},
+			get tabIndex() {
+				return props.excludeFromTabOrder ? -1 : void 0;
+			},
+			get ["aria-label"]() {
+				return props["aria-label"] ?? "Select";
+			}
+		}), false, false);
+		runHydrationEvents();
+		return _el$0;
+	})();
+}
+function GridListLoadMoreItem(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-GridList-loadMore"
+	}, () => ({ isLoading: isLoading() }));
+	return [(() => {
+		var _el$1 = getNextElement(_tmpl$6), _el$10 = _el$1.firstChild;
+		var _ref$ = sentinelRef;
+		typeof _ref$ === "function" ? use(_ref$, _el$10) : sentinelRef = _el$10;
+		return _el$1;
+	})(), (() => {
+		var _el$11 = getNextElement(_tmpl$7);
+		_el$11.addEventListener("focus", () => {
+			triggerLoadMore();
+		});
+		insert(_el$11, () => renderProps.renderChildren());
+		effect((_p$) => {
+			var _v$ = renderProps.class(), _v$2 = renderProps.style(), _v$3 = isLoading() || void 0;
+			_v$ !== _p$.e && className(_el$11, _p$.e = _v$);
+			_p$.t = style(_el$11, _v$2, _p$.t);
+			_v$3 !== _p$.a && setAttribute(_el$11, "data-loading", _p$.a = _v$3);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0
+		});
+		return _el$11;
+	})()];
+}
+/**
+* The header of a {@link GridListSection}. Renders as `role="row"` wrapping a
+* `role="rowheader"` whose id labels the section (mirrors upstream
+* `GridListHeader`). The row/rowheader props are supplied by the enclosing
+* section through context.
+*/
+function GridListHeader(props) {
+	const rowProps = useContext(GridListHeaderContext);
+	const rowHeaderProps = useContext(GridListHeaderInnerContext);
+	return (() => {
+		var _el$12 = getNextElement(_tmpl$4), _el$13 = _el$12.firstChild;
+		spread(_el$12, mergeProps({
+			get ["class"]() {
+				return props.class ?? "solidaria-GridListHeader";
+			},
+			get style() {
+				return props.style;
+			}
+		}, rowProps ?? {}), false, true);
+		spread(_el$13, mergeProps(rowHeaderProps ?? {}, { "style": { display: "contents" } }), false, true);
+		insert(_el$13, () => props.children);
+		runHydrationEvents();
+		return _el$12;
+	})();
+}
+/**
+* A section within a GridList. Renders as `role="rowgroup"` and supplies its
+* optional {@link GridListHeader} with the row/rowheader props that wire up the
+* section's `aria-labelledby` (mirrors upstream `GridListSection`).
+*/
+function GridListSection(props) {
+	const [local, domProps] = splitProps(props, [
+		"children",
+		"class",
+		"style",
+		"slot",
+		"ref"
+	]);
+	const section = createGridListSection({ get "aria-label"() {
+		return domProps["aria-label"];
+	} });
+	const renderProps = useRenderProps({
+		children: void 0,
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-GridListSection"
+	}, () => ({ hasChildren: true }));
+	const filteredDomProps = createMemo(() => filterDOMProps(domProps, { global: true }));
+	return (() => {
+		var _el$14 = getNextElement(_tmpl$8);
+		use((el) => assignRef(local.ref, el), _el$14);
+		spread(_el$14, mergeProps(filteredDomProps, () => section.rowGroupProps, {
+			get ["class"]() {
+				return renderProps.class();
+			},
+			get style() {
+				return renderProps.style();
+			},
+			get slot() {
+				return local.slot;
+			},
+			"data-section": ""
+		}), false, true);
+		insert(_el$14, createComponent(GridListHeaderContext.Provider, {
+			get value() {
+				return section.rowProps;
+			},
+			get children() {
+				return createComponent(GridListHeaderInnerContext.Provider, {
+					get value() {
+						return section.rowHeaderProps;
+					},
+					get children() {
+						return local.children;
+					}
+				});
+			}
+		}));
+		runHydrationEvents();
+		return _el$14;
+	})();
+}
+GridList.Item = GridListItem;
+GridList.SelectionCheckbox = GridListSelectionCheckbox;
+GridList.LoadMoreItem = GridListLoadMoreItem;
+//#endregion
+export { GridList, GridListContext, GridListHeader, GridListHeaderContext, GridListHeaderInnerContext, GridListItem, GridListLoadMoreItem, GridListSection, GridListSelectionCheckbox, GridListStateContext };
+
+//# sourceMappingURL=GridList.js.map