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

package/dist/GridList.js

@@ -1,11 +1,25 @@
-import { filterDOMProps, useRenderProps } from "./utils.js";
+/*
+* 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/GridList.tsx
+import { dataAttr, filterDOMProps, useRenderProps } from "./utils.js";
+import { TextContext } from "./Text.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 { CollectionRendererContext, renderCollectionDropSlots, useCollectionRenderer, useCollectionRoot } from "./Collection.js";
+import { o as useVirtualizerContext, t as PersistedVirtualItem } from "./Virtualizer2.js";
+import { getNormalizedDropTargetKey, indexesOutsideRange, mergePersistedKeysIntoVirtualRange, useDndPersistedKeys, useRenderDropIndicator } from "./DragAndDrop.js";
+import { className, createComponent, effect, getNextElement, getNextMarker, insert, memo, readShallow, ref, runHydrationEvents, scope, setAttribute, spread, style, template } from "@solidjs/web";
+import { For, createContext, createEffect, createMemo, createSignal, createTrackedEffect, useContext } from "solid-js";
+import { createFocusRing, createGridList, createGridListItem, createGridListSection, createGridListSelectionCheckbox, createHover, mergeProps as mergeProps$1, useLocale } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import { createGridState } from "@proyecto-viviana/solid-stately";
 //#region src/GridList.tsx
 /**
@@ -17,8 +31,13 @@ import { createGridState } from "@proyecto-viviana/solid-stately";
 * 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) {
+var _tmpl$ = /* @__PURE__ */ template(`<div><!$><!/><!$><!/>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<input>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<div inert style=position:relative;width:0;height:0;overflow:hidden><div style=position:absolute;height:1px;width:1px>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<div role=row tabindex=0>`);
+var _tmpl$6 = /* @__PURE__ */ template(`<div><div>`);
+function assignRef$1(ref, el) {
 	if (!ref) return;
 	if (typeof ref === "function") ref(el);
 	else ref.current = el;
@@ -31,7 +50,8 @@ const GridListHeaderContext = createContext(null);
 const GridListHeaderInnerContext = createContext(null);
 function buildGridCollection(items, getKey, getTextValue, getDisabled) {
 	const nodes = items.map((item, index) => {
-		const key = getKey?.(item) ?? index;
+		const record = item;
+		const key = getKey?.(item) ?? record.key ?? record.id ?? index;
 		return {
 			type: "item",
 			key,
@@ -114,7 +134,9 @@ function GridList(props) {
 		"isLoading",
 		"onLoadMore",
 		"dragAndDropHooks",
-		"orientation"
+		"orientation",
+		"layout",
+		"columnCount"
 	], [
 		"items",
 		"getKey",
@@ -128,7 +150,9 @@ function GridList(props) {
 		"onSelectionChange",
 		"selectionBehavior"
 	]);
-	const [ref, setRef] = createSignal(null);
+	const locale = useLocale();
+	const [ref$1, setRef] = createSignal(null, { ownedWrite: true });
+	const parentCollectionRenderer = useCollectionRenderer();
 	const collection = createMemo(() => buildGridCollection(stateProps.items, stateProps.getKey, stateProps.getTextValue, stateProps.getDisabled));
 	const allDisabledKeys = createMemo(() => {
 		const keys = /* @__PURE__ */ new Set();
@@ -137,36 +161,58 @@ function GridList(props) {
 		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 resolveDirection = () => locale().direction;
 	const state = createGridState(() => ({
 		collection: collection(),
 		disabledKeys: allDisabledKeys(),
 		disabledBehavior: stateProps.disabledBehavior,
 		selectionMode: stateProps.selectionMode,
-		selectionBehavior: stateProps.selectionBehavior ?? "replace",
+		selectionBehavior: stateProps.selectionBehavior,
 		selectedKeys: stateProps.selectedKeys,
 		defaultSelectedKeys: stateProps.defaultSelectedKeys,
 		onSelectionChange: stateProps.onSelectionChange
 	}));
 	const gridListAria = 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);
+		get id() {
+			return ariaProps.id;
+		},
+		get "aria-label"() {
+			return ariaProps["aria-label"];
+		},
+		get "aria-labelledby"() {
+			return ariaProps["aria-labelledby"];
+		},
+		get "aria-describedby"() {
+			return ariaProps["aria-describedby"];
+		},
+		get isVirtualized() {
+			return ariaProps.isVirtualized ?? parentCollectionRenderer?.isVirtualized;
+		},
+		get onAction() {
+			return ariaProps.onAction;
+		},
+		get isDisabled() {
+			return ariaProps.isDisabled;
+		},
+		get selectionBehavior() {
+			return state.selectionBehavior;
+		},
+		get keyboardNavigationBehavior() {
+			return ariaProps.keyboardNavigationBehavior;
+		},
+		get orientation() {
+			return orientation();
+		},
+		get direction() {
+			return resolveDirection();
+		},
+		get layout() {
+			return local.layout;
+		},
+		get columnCount() {
+			return local.columnCount;
+		}
+	}), () => state, ref$1);
 	const { isFocused, isFocusVisible, focusProps } = createFocusRing();
 	const renderValues = createMemo(() => ({
 		isFocused: state.isFocused || isFocused(),
@@ -193,7 +239,6 @@ function GridList(props) {
 	};
 	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];
@@ -208,31 +253,27 @@ function GridList(props) {
 		const hooks = local.dragAndDropHooks;
 		return Boolean(hooks?.useDroppableCollectionState && hooks.useDroppableCollection && (hooks.dropTargetDelegate || parentCollectionRenderer?.dropTargetDelegate || hooks.ListDropTargetDelegate));
 	});
-	const hasDraggableDnd = createMemo(() => {
+	const dragStateValue = 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(() => {
+	})() ? local.dragAndDropHooks?.useDraggableCollectionState?.({
+		items: stateProps.items,
+		collection: state.collection,
+		selectedKeys: state.selectedKeys,
+		isSelected: (key) => state.isSelected(key)
+	}) : void 0;
+	const dragState = () => dragStateValue;
+	const dropStateValue = hasDroppableDnd() ? local.dragAndDropHooks?.useDroppableCollectionState?.({ get collection() {
+		return state.collection;
+	} }) : void 0;
+	const dropState = () => dropStateValue;
+	if (local.dragAndDropHooks?.useDraggableCollection && dragStateValue) local.dragAndDropHooks.useDraggableCollection({}, dragStateValue, () => ref$1());
+	const droppableCollectionValue = (() => {
 		if (!hasDroppableDnd()) return void 0;
 		const hooks = local.dragAndDropHooks;
-		const activeDropState = dropState();
+		const activeDropState = dropStateValue;
 		if (!hooks?.useDroppableCollection || !activeDropState) return void 0;
-		const dropTargetDelegate = hooks.dropTargetDelegate ?? parentCollectionRenderer?.dropTargetDelegate ?? (hooks.ListDropTargetDelegate ? new hooks.ListDropTargetDelegate(() => state.collection, () => ref(), {
+		const dropTargetDelegate = hooks.dropTargetDelegate ?? parentCollectionRenderer?.dropTargetDelegate ?? (hooks.ListDropTargetDelegate ? new hooks.ListDropTargetDelegate(() => state.collection, () => ref$1(), {
 			layout: "grid",
 			orientation: orientation(),
 			direction: resolveDirection()
@@ -250,8 +291,9 @@ function GridList(props) {
 				getKeyPageBelow: (key) => state.collection.getKeyAfter?.(key) ?? null,
 				getKeyPageAbove: (key) => state.collection.getKeyBefore?.(key) ?? null
 			}
-		}, activeDropState, () => ref());
-	});
+		}, activeDropState, () => ref$1());
+	})();
+	const droppableCollection = () => droppableCollectionValue;
 	const isRootDropTarget = createMemo(() => {
 		return Boolean(dropState()?.target?.type === "root");
 	});
@@ -266,22 +308,23 @@ function GridList(props) {
 		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, {
+		const forceIncludeIndexes = [dropTarget?.type === "item" ? itemNodes.findIndex((node) => node.key === dropTarget.key) : -1, normalizedDropKey != null ? itemNodes.findIndex((node) => node.key === normalizedDropKey) : -1].filter((index) => index >= 0);
+		return mergePersistedKeysIntoVirtualRange(baseRange, [], stateProps.items.length, virtualizer, 80, {
 			forceIncludeIndexes,
 			forceIncludeMaxSpan: 320
 		});
 	});
-	createEffect(() => {
+	const persistedOutsideIndexes = createMemo(() => {
+		const range = virtualRange();
+		if (!range) return [];
+		const itemNodes = getItemNodes();
+		const persistedIndexes = Array.from(persistedKeys()).map((key) => itemNodes.findIndex((node) => node.key === key)).filter((index) => index >= 0);
+		return indexesOutsideRange(range, persistedIndexes);
+	});
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
 		if (!virtualizer || !parentCollectionRenderer?.isVirtualized) return;
 		virtualizer.setDropTargetItemCountResolver(() => state.collection.size);
 		virtualizer.setDropTargetIndexResolver((key) => {
@@ -296,18 +339,20 @@ function GridList(props) {
 				key: typeof node.key === "string" || typeof node.key === "number" ? node.key : void 0
 			};
 		});
-		onCleanup(() => {
+		_s2Cleanups.push(() => {
 			virtualizer.setDropTargetIndexResolver(void 0);
 			virtualizer.setDropTargetItemCountResolver(void 0);
 			virtualizer.setDropTargetResolver(void 0);
 		});
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
 	});
 	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(),
@@ -322,92 +367,135 @@ function GridList(props) {
 		renderItem: (item) => props.children(item),
 		renderDropIndicator: (index, position) => dndDropIndicator(index, position) ?? parentCollectionRenderer?.renderDropIndicator?.(index, position)
 	}));
-	return createComponent(GridListContext.Provider, {
+	const CollectionRoot = useCollectionRoot();
+	return createComponent(GridListContext, {
 		get value() {
 			return contextValue();
 		},
 		get children() {
-			return createComponent(GridListStateContext.Provider, {
+			return createComponent(GridListStateContext, {
 				value: state,
 				get children() {
-					return createComponent(CollectionRendererContext.Provider, {
+					return createComponent(CollectionRendererContext, {
 						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);
+							var _el$ = getNextElement(_tmpl$);
+							var _el$2 = _el$.firstChild;
+							var [_el$3, _el$4] = getNextMarker(_el$2.nextSibling);
+							var _el$5 = _el$3.nextSibling;
+							var [_el$6, _el$7] = getNextMarker(_el$5.nextSibling);
+							ref(() => {
+								return (element) => {
+									setRef(element);
+									assignRef$1(local.ref, element);
+								};
 							}, _el$);
-							spread(_el$, mergeProps(() => mergeProps$2(domProps(), cleanGridProps(), cleanFocusProps(), droppableCollection()?.collectionProps ?? {}), {
-								get ["class"]() {
+							spread(_el$, [() => {
+								return mergeProps$1(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-focused"() {
+									return dataAttr(state.isFocused);
 								},
-								get ["data-focus-visible"]() {
-									return isFocusVisible() || void 0;
+								get "data-focus-visible"() {
+									return dataAttr(isFocusVisible());
 								},
-								get ["data-disabled"]() {
-									return ariaProps.isDisabled || void 0;
+								get "data-disabled"() {
+									return dataAttr(ariaProps.isDisabled);
 								},
-								get ["data-empty"]() {
-									return isEmpty() || void 0;
+								get "data-empty"() {
+									return dataAttr(isEmpty());
 								},
-								get ["data-drop-target"]() {
-									return isRootDropTarget() || void 0;
+								get "data-drop-target"() {
+									return dataAttr(isRootDropTarget());
 								},
-								get ["data-orientation"]() {
+								get "data-orientation"() {
 									return orientation();
 								}
-							}), false, true);
+							}], 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;
+								return memo(() => {
+									return !!(isEmpty() && local.renderEmptyState);
+								})() ? local.renderEmptyState() : memo(() => {
+									return !!parentCollectionRenderer?.isVirtualized;
+								})() ? createComponent(CollectionRoot, {
+									get collection() {
+										return memo(() => {
+											return !!virtualRange();
+										})() ? stateProps.items : [];
+									},
+									scrollRef: () => ref$1(),
+									get persistedKeys() {
+										return persistedKeys();
 									},
-									get isLoading() {
-										return local.isLoading;
+									get children() {
+										return [createComponent(For, {
+											get each() {
+												return visibleItems();
+											},
+											children: (item, index) => {
+												const itemIndex = () => (virtualRange()?.start ?? 0) + index();
+												return renderCollectionDropSlots({
+													index: itemIndex(),
+													lastIndex: getItemNodes().length - 1,
+													renderDropIndicator: (i, position) => collectionRenderer().renderDropIndicator?.(i, position),
+													children: props.children(item)
+												});
+											}
+										}), createComponent(For, {
+											get each() {
+												return persistedOutsideIndexes();
+											},
+											children: (index) => createComponent(PersistedVirtualItem, {
+												index,
+												get children() {
+													return renderCollectionDropSlots({
+														index,
+														lastIndex: getItemNodes().length - 1,
+														renderDropIndicator: (i, position) => collectionRenderer().renderDropIndicator?.(i, position),
+														children: props.children(stateProps.items[index])
+													});
+												}
+											})
+										})];
 									}
+								}) : createComponent(For, {
+									get each() {
+										return visibleItems();
+									},
+									children: (item, index) => {
+										const itemIndex = () => (virtualRange()?.start ?? 0) + index();
+										return renderCollectionDropSlots({
+											index: itemIndex(),
+											lastIndex: getItemNodes().length - 1,
+											renderDropIndicator: (i, position) => collectionRenderer().renderDropIndicator?.(i, position),
+											children: props.children(item)
+										});
+									}
+								});
+							} }), _el$3, _el$4);
+							insert(_el$, scope((() => {
+								var _c$ = memo(() => {
+									return !!(local.hasMore && local.onLoadMore);
 								});
-							})(), _el$5, _co$2);
+								return () => {
+									return _c$() ? createComponent(GridListLoadMoreItem, {
+										get onLoadMore() {
+											return local.onLoadMore;
+										},
+										get isLoading() {
+											return local.isLoading;
+										}
+									}) : local.hasMore && local.onLoadMore;
+								};
+							})()), _el$6, _el$7);
 							runHydrationEvents();
 							return _el$;
 						}
@@ -429,6 +517,7 @@ function GridListItem(props) {
 		"item",
 		"textValue",
 		"onAction",
+		"isDisabled",
 		"children",
 		"ref"
 	]);
@@ -436,7 +525,7 @@ function GridListItem(props) {
 	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 [ref$2, setRef] = createSignal(null, { ownedWrite: true });
 	const itemNode = createMemo(() => {
 		const node = state.collection.getItem(local.id);
 		if (!node) return {
@@ -453,9 +542,11 @@ function GridListItem(props) {
 	});
 	const itemAria = createGridListItem(() => ({
 		node: itemNode(),
+		textValue: local.textValue,
 		onAction: local.onAction,
-		selectionBehavior: listContext?.selectionBehavior ?? "replace"
-	}), () => state, ref);
+		isDisabled: local.isDisabled,
+		selectionBehavior: listContext?.selectionBehavior ?? "toggle"
+	}), () => state, ref$2);
 	const isSelected = () => itemAria.isSelected;
 	const isDisabled = () => itemAria.isDisabled;
 	const isPressed = () => itemAria.isPressed;
@@ -470,7 +561,7 @@ function GridListItem(props) {
 	});
 	const droppableItem = createMemo(() => {
 		if (!listContext?.dragAndDropHooks?.useDroppableItem || !listContext.dropState) return void 0;
-		return listContext.dragAndDropHooks.useDroppableItem({ key: local.id }, listContext.dropState, () => ref());
+		return listContext.dragAndDropHooks.useDroppableItem({ key: local.id }, listContext.dropState, () => ref$2());
 	});
 	const renderValues = createMemo(() => ({
 		isSelected: isSelected(),
@@ -480,7 +571,8 @@ function GridListItem(props) {
 		isHovered: isHovered(),
 		isDisabled: isDisabled(),
 		selectionMode: state.selectionMode,
-		selectionBehavior: listContext?.selectionBehavior ?? "replace"
+		selectionBehavior: listContext?.selectionBehavior ?? "toggle",
+		descriptionId: itemAria.descriptionProps.id
 	}));
 	const renderProps = useRenderProps({
 		get children() {
@@ -502,52 +594,74 @@ function GridListItem(props) {
 		const { ref: _ref3, ...rest } = focusProps;
 		return rest;
 	};
-	return (() => {
-		var _el$8 = getNextElement(_tmpl$4), _el$9 = _el$8.firstChild;
-		use((element) => {
+	var _el$8 = getNextElement(_tmpl$2);
+	ref(() => {
+		return (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"]() {
+			assignRef$1(local.ref, element);
+			const dragRef = (draggableItem()?.dragProps)?.ref;
+			if (typeof dragRef === "function") dragRef(element);
+		};
+	}, _el$8);
+	spread(_el$8, [
+		domProps,
+		() => {
+			return mergeProps$1(cleanRowProps(), cleanHoverProps(), cleanFocusProps(), draggableItem()?.dragProps ?? {}, droppableItem()?.dropProps ?? {});
+		},
+		{
+			get "class"() {
 				return renderProps.class();
 			},
 			get style() {
 				return renderProps.style();
 			},
-			get ["data-key"]() {
+			get "data-key"() {
 				return local.id;
 			},
-			get ["data-selected"]() {
-				return isSelected() || void 0;
+			get "data-selected"() {
+				return dataAttr(isSelected());
 			},
-			get ["data-focused"]() {
-				return isFocused() || void 0;
+			get "data-focused"() {
+				return dataAttr(isFocused());
 			},
-			get ["data-focus-visible"]() {
-				return memo(() => !!isFocusVisible())() && isFocused() || void 0;
+			get "data-focus-visible"() {
+				return dataAttr(isFocusVisible() && isFocused());
 			},
-			get ["data-pressed"]() {
-				return isPressed() || void 0;
+			get "data-pressed"() {
+				return dataAttr(isPressed());
 			},
-			get ["data-hovered"]() {
-				return isHovered() || void 0;
+			get "data-hovered"() {
+				return dataAttr(isHovered());
 			},
-			get ["data-disabled"]() {
-				return isDisabled() || void 0;
+			get "data-disabled"() {
+				return dataAttr(isDisabled());
 			},
-			get ["data-dragging"]() {
-				return draggableItem()?.isDragging || void 0;
+			get "data-dragging"() {
+				return dataAttr(draggableItem()?.isDragging);
 			},
-			get ["data-drop-target"]() {
-				return droppableItem()?.isDropTarget || void 0;
+			get "data-drop-target"() {
+				return dataAttr(droppableItem()?.isDropTarget);
 			}
-		}), false, true);
-		spread(_el$9, mergeProps(() => itemAria.gridCellProps), false, true);
-		insert(_el$9, () => renderProps.renderChildren());
-		runHydrationEvents();
-		return _el$8;
-	})();
+		}
+	], true);
+	insert(_el$8, createComponent(TextContext, {
+		get value() {
+			return { slots: { description: itemAria.descriptionProps } };
+		},
+		get children() {
+			var _el$9 = getNextElement(_tmpl$2);
+			spread(_el$9, () => {
+				return itemAria.gridCellProps;
+			}, true);
+			insert(_el$9, scope(() => {
+				return renderProps.renderChildren();
+			}));
+			runHydrationEvents();
+			return _el$9;
+		}
+	}));
+	runHydrationEvents();
+	return _el$8;
 }
 /**
 * A checkbox for item selection in a grid list.
@@ -557,29 +671,30 @@ function GridListSelectionCheckbox(props) {
 	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;
-	})();
+	var _el$10 = getNextElement(_tmpl$3);
+	spread(_el$10, [() => {
+		return 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"] ?? checkboxAria.checkboxProps["aria-label"];
+		}
+	}], false);
+	runHydrationEvents();
+	return _el$10;
 }
 function GridListLoadMoreItem(props) {
-	let sentinelRef;
+	const [sentinel, setSentinel] = createSignal();
 	const [isPending, setIsPending] = createSignal(false);
+	const scrollOffsetValue = createMemo(() => props.scrollOffset ?? 1);
 	const isLoading = () => !!props.isLoading || isPending();
 	const triggerLoadMore = async () => {
 		if (isLoading()) return;
@@ -590,13 +705,16 @@ function GridListLoadMoreItem(props) {
 			setIsPending(false);
 		}
 	};
-	createEffect(() => {
-		if (!sentinelRef || typeof IntersectionObserver !== "function") return;
-		const margin = `0px 0px ${100 * (props.scrollOffset ?? 1)}% 0px`;
+	createEffect(() => ({
+		current: sentinel(),
+		scrollOffset: scrollOffsetValue()
+	}), ({ current, scrollOffset }) => {
+		if (!current || typeof IntersectionObserver !== "function") return;
+		const margin = `0px 0px ${100 * scrollOffset}% 0px`;
 		const observer = new IntersectionObserver((entries) => {
 			if (entries[0]?.isIntersecting) triggerLoadMore();
 		}, { rootMargin: margin });
-		observer.observe(sentinelRef);
+		observer.observe(current);
 		return () => observer.disconnect();
 	});
 	const renderProps = useRenderProps({
@@ -608,28 +726,32 @@ function GridListLoadMoreItem(props) {
 		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$4);
+		var _el$12 = _el$11.firstChild;
+		ref(() => {
+			return setSentinel;
+		}, _el$12);
+		return _el$11;
 	})(), (() => {
-		var _el$11 = getNextElement(_tmpl$7);
-		_el$11.addEventListener("focus", () => {
+		var _el$13 = getNextElement(_tmpl$5);
+		_el$13.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
+		insert(_el$13, scope(() => {
+			return renderProps.renderChildren();
+		}));
+		effect(() => {
+			return {
+				e: readShallow(renderProps.class()),
+				t: readShallow(renderProps.style()),
+				a: dataAttr(isLoading())
+			};
+		}, ({ e, t, a }, _p$) => {
+			className(_el$13, e, _p$?.e);
+			style(_el$13, t, _p$?.t);
+			a !== _p$?.a && setAttribute(_el$13, "data-loading", a);
 		});
-		return _el$11;
+		return _el$13;
 	})()];
 }
 /**
@@ -641,21 +763,22 @@ function GridListLoadMoreItem(props) {
 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;
-	})();
+	var _el$14 = getNextElement(_tmpl$6);
+	var _el$15 = _el$14.firstChild;
+	spread(_el$14, [{
+		get "class"() {
+			return props.class ?? "solidaria-GridListHeader";
+		},
+		get style() {
+			return props.style;
+		}
+	}, rowProps ?? {}], true);
+	spread(_el$15, [rowHeaderProps ?? {}, { style: { display: "contents" } }], true);
+	insert(_el$15, scope(() => {
+		return props.children;
+	}));
+	runHydrationEvents();
+	return _el$14;
 }
 /**
 * A section within a GridList. Renders as `role="rowgroup"` and supplies its
@@ -680,11 +803,17 @@ function GridListSection(props) {
 		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"]() {
+	var _el$16 = getNextElement(_tmpl$2);
+	ref(() => {
+		return (el) => assignRef$1(local.ref, el);
+	}, _el$16);
+	spread(_el$16, [
+		filteredDomProps,
+		() => {
+			return section.rowGroupProps;
+		},
+		{
+			get "class"() {
 				return renderProps.class();
 			},
 			get style() {
@@ -693,26 +822,26 @@ function GridListSection(props) {
 			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;
-	})();
+			"data-section": true
+		}
+	], true);
+	insert(_el$16, createComponent(GridListHeaderContext, {
+		get value() {
+			return section.rowProps;
+		},
+		get children() {
+			return createComponent(GridListHeaderInnerContext, {
+				get value() {
+					return section.rowHeaderProps;
+				},
+				get children() {
+					return local.children;
+				}
+			});
+		}
+	}));
+	runHydrationEvents();
+	return _el$16;
 }
 GridList.Item = GridListItem;
 GridList.SelectionCheckbox = GridListSelectionCheckbox;