@proyecto-viviana/solidaria-components 0.2.9 → 0.3.1

package/src/GridList.tsx

@@ -9,7 +9,6 @@
  */
 
 import {
-  type Accessor,
   type JSX,
   createContext,
   createEffect,
@@ -19,7 +18,8 @@ import {
   splitProps,
   useContext,
   For,
-} from 'solid-js';
+  Show,
+} from "solid-js";
 import {
   createGridList,
   createGridListItem,
@@ -28,7 +28,7 @@ import {
   createHover,
   mergeProps,
   type AriaGridListProps,
-} from '@proyecto-viviana/solidaria';
+} from "@proyecto-viviana/solidaria";
 import {
   createGridState,
   type GridState,
@@ -36,7 +36,7 @@ import {
   type GridNode,
   type Key,
   type DropTarget,
-} from '@proyecto-viviana/solid-stately';
+} from "@proyecto-viviana/solid-stately";
 import {
   type RenderChildren,
   type ClassNameOrFunction,
@@ -44,27 +44,34 @@ import {
   type SlotProps,
   useRenderProps,
   filterDOMProps,
-} from './utils';
-import { SharedElementTransition } from './SharedElementTransition';
-import { type DragAndDropHooks } from './useDragAndDrop';
+} from "./utils";
+import { SharedElementTransition } from "./SharedElementTransition";
+import { type DragAndDropHooks } from "./useDragAndDrop";
 import {
   CollectionRendererContext,
   type CollectionRendererContextValue,
   Section,
   type SectionProps,
   useCollectionRenderer,
-} from './Collection';
-import { useVirtualizerContext } from './Virtualizer';
+} from "./Collection";
+import { useVirtualizerContext } from "./Virtualizer";
 import {
   getNormalizedDropTargetKey,
   mergePersistedKeysIntoVirtualRange,
   useDndPersistedKeys,
   useRenderDropIndicator,
-} from './DragAndDrop';
+} from "./DragAndDrop";
 
-// ============================================
-// TYPES
-// ============================================
+type RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;
+
+function assignRef<T>(ref: RefLike<T>, el: T): void {
+  if (!ref) return;
+  if (typeof ref === "function") {
+    ref(el);
+  } else {
+    ref.current = el;
+  }
+}
 
 export interface GridListRenderProps {
   /** Whether the grid list has focus. */
@@ -77,7 +84,8 @@ export interface GridListRenderProps {
   isEmpty: boolean;
 }
 
-export interface GridListProps<T extends object> extends Omit<AriaGridListProps, 'children'>, SlotProps {
+export interface GridListProps<T extends object>
+  extends Omit<AriaGridListProps, "children">, SlotProps {
   /** The items to render in the grid list. */
   items: T[];
   /** Function to get the key from an item. */
@@ -87,21 +95,25 @@ export interface GridListProps<T extends object> extends Omit<AriaGridListProps,
   /** Function to check if an item is disabled. */
   getDisabled?: (item: T) => boolean;
   /** The selection mode. */
-  selectionMode?: 'none' | 'single' | 'multiple';
+  selectionMode?: "none" | "single" | "multiple";
+  /** How selection should behave when pressing an item. */
+  selectionBehavior?: "replace" | "toggle";
   /** Keys of disabled items. */
   disabledKeys?: Iterable<Key>;
   /** Currently selected keys (controlled). */
-  selectedKeys?: 'all' | Iterable<Key>;
+  selectedKeys?: "all" | Iterable<Key>;
   /** Default selected keys (uncontrolled). */
-  defaultSelectedKeys?: 'all' | Iterable<Key>;
+  defaultSelectedKeys?: "all" | Iterable<Key>;
   /** Handler called when selection changes. */
-  onSelectionChange?: (keys: 'all' | Set<Key>) => void;
+  onSelectionChange?: (keys: "all" | Set<Key>) => void;
   /** The children of the component. A function may be provided to render each item. */
   children: (item: T) => JSX.Element;
   /** The CSS className for the element. */
   class?: ClassNameOrFunction<GridListRenderProps>;
   /** The inline style for the element. */
   style?: StyleOrFunction<GridListRenderProps>;
+  /** Ref for the grid list root element. */
+  ref?: RefLike<HTMLDivElement>;
   /** A function to render when the grid list is empty. */
   renderEmptyState?: () => JSX.Element;
   /** Whether there are more items to load. */
@@ -127,9 +139,16 @@ export interface GridListItemRenderProps {
   isHovered: boolean;
   /** Whether the item is disabled. */
   isDisabled: boolean;
+  /** The grid list selection mode. */
+  selectionMode: "none" | "single" | "multiple";
+  /** How selection behaves when pressing an item. */
+  selectionBehavior: "replace" | "toggle";
 }
 
-export interface GridListItemProps<T extends object> extends SlotProps, Omit<JSX.HTMLAttributes<HTMLDivElement>, 'class' | 'style' | 'children' | 'id'> {
+export interface GridListItemProps<T extends object>
+  extends
+    SlotProps,
+    Omit<JSX.HTMLAttributes<HTMLDivElement>, "class" | "style" | "children" | "id" | "ref"> {
   /** The unique key for the item. */
   id: Key;
   /** The item value. */
@@ -144,11 +163,15 @@ export interface GridListItemProps<T extends object> extends SlotProps, Omit<JSX
   textValue?: string;
   /** Handler called when the item is activated. */
   onAction?: () => void;
+  /** Ref for the rendered row element. */
+  ref?: RefLike<HTMLDivElement>;
 }
 
 export interface GridListLoadMoreItemProps extends SlotProps {
   onLoadMore: () => void | Promise<void>;
   isLoading?: boolean;
+  /** Scroll offset multiplier for early loading trigger (default: 1 = 100% of viewport height). */
+  scrollOffset?: number;
   children?: JSX.Element;
   class?: ClassNameOrFunction<{ isLoading: boolean }>;
   style?: StyleOrFunction<{ isLoading: boolean }>;
@@ -161,37 +184,32 @@ export interface GridListHeaderProps extends SlotProps {
   style?: JSX.CSSProperties;
 }
 
-// ============================================
-// CONTEXT
-// ============================================
-
 interface GridListContextValue<T extends object> {
   state: GridState<T, GridCollection<T>>;
   collection: GridCollection<T>;
   isDisabled: boolean;
+  selectionBehavior: "replace" | "toggle";
   dragAndDropHooks?: DragAndDropHooks<T>;
   dragState?: unknown;
   dropState?: unknown;
 }
 
 export const GridListContext = createContext<GridListContextValue<object> | null>(null);
-export const GridListStateContext = createContext<GridState<object, GridCollection<object>> | null>(null);
+export const GridListStateContext = createContext<GridState<object, GridCollection<object>> | null>(
+  null,
+);
 export const GridListHeaderContext = createContext<null>(null);
 
-// ============================================
-// HELPER: Build GridCollection from items
-// ============================================
-
 function buildGridCollection<T extends object>(
   items: T[],
   getKey?: (item: T) => Key,
   getTextValue?: (item: T) => string,
-  getDisabled?: (item: T) => boolean
+  getDisabled?: (item: T) => boolean,
 ): GridCollection<T> {
   const nodes: GridNode<T>[] = items.map((item, index) => {
     const key = getKey?.(item) ?? index;
     return {
-      type: 'item' as const,
+      type: "item" as const,
       key,
       value: item,
       textValue: getTextValue?.(item) ?? String(key),
@@ -248,7 +266,7 @@ function buildGridCollection<T extends object>(
       return [];
     },
     getTextValue(key: Key) {
-      return keyMap.get(key)?.textValue ?? '';
+      return keyMap.get(key)?.textValue ?? "";
     },
     getCell(_rowKey: Key, _columnKey: Key) {
       return null;
@@ -259,10 +277,6 @@ function buildGridCollection<T extends object>(
   };
 }
 
-// ============================================
-// COMPONENTS
-// ============================================
-
 /**
  * A grid list displays a list of interactive items, with support for
  * keyboard navigation, single or multiple selection, and row actions.
@@ -270,45 +284,52 @@ function buildGridCollection<T extends object>(
 export function GridList<T extends object>(props: GridListProps<T>): JSX.Element {
   const [local, stateProps, ariaProps] = splitProps(
     props,
-    ['children', 'class', 'style', 'slot', 'renderEmptyState', 'hasMore', 'isLoading', 'onLoadMore', 'dragAndDropHooks'],
     [
-      'items',
-      'getKey',
-      'getTextValue',
-      'getDisabled',
-      'disabledKeys',
-      'selectionMode',
-      'selectedKeys',
-      'defaultSelectedKeys',
-      'onSelectionChange',
-    ]
+      "children",
+      "class",
+      "style",
+      "ref",
+      "slot",
+      "renderEmptyState",
+      "hasMore",
+      "isLoading",
+      "onLoadMore",
+      "dragAndDropHooks",
+    ],
+    [
+      "items",
+      "getKey",
+      "getTextValue",
+      "getDisabled",
+      "disabledKeys",
+      "selectionMode",
+      "selectedKeys",
+      "defaultSelectedKeys",
+      "onSelectionChange",
+      "selectionBehavior",
+    ],
   );
 
-  // Create ref signal
-  const [ref, setRef] = createSignal<HTMLUListElement | null>(null);
+  const [ref, setRef] = createSignal<HTMLDivElement | null>(null);
 
-  // Build collection
   const collection = createMemo(() =>
     buildGridCollection(
       stateProps.items,
       stateProps.getKey,
       stateProps.getTextValue,
-      stateProps.getDisabled
-    )
+      stateProps.getDisabled,
+    ),
   );
 
-  // Get disabled keys from items + explicit disabledKeys
   const allDisabledKeys = createMemo(() => {
     const keys = new Set<Key>();
 
-    // Add explicitly disabled keys
     if (stateProps.disabledKeys) {
       for (const key of stateProps.disabledKeys) {
         keys.add(key);
       }
     }
 
-    // Add keys from items marked as disabled
     for (const node of collection().rows) {
       if (node.isDisabled) {
         keys.add(node.key);
@@ -318,35 +339,33 @@ export function GridList<T extends object>(props: GridListProps<T>): JSX.Element
     return keys;
   });
 
-  // Create grid state
   const state = createGridState<T, GridCollection<T>>(() => ({
     collection: collection(),
     disabledKeys: allDisabledKeys(),
     selectionMode: stateProps.selectionMode,
+    selectionBehavior: stateProps.selectionBehavior,
     selectedKeys: stateProps.selectedKeys,
     defaultSelectedKeys: stateProps.defaultSelectedKeys,
     onSelectionChange: stateProps.onSelectionChange,
   }));
 
-  // Create grid list aria props
   const { gridProps } = createGridList<T, GridCollection<T>>(
     () => ({
       id: ariaProps.id,
-      'aria-label': ariaProps['aria-label'],
-      'aria-labelledby': ariaProps['aria-labelledby'],
-      'aria-describedby': ariaProps['aria-describedby'],
+      "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: stateProps.selectionBehavior,
     }),
     () => state,
-    ref
+    ref,
   );
 
-  // Create focus ring
   const { isFocused, isFocusVisible, focusProps } = createFocusRing();
 
-  // Render props values
   const renderValues = createMemo<GridListRenderProps>(() => ({
     isFocused: state.isFocused || isFocused(),
     isFocusVisible: isFocusVisible(),
@@ -354,23 +373,20 @@ export function GridList<T extends object>(props: GridListProps<T>): JSX.Element
     isEmpty: stateProps.items.length === 0,
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-GridList',
+      defaultClassName: "solidaria-GridList",
     },
-    renderValues
+    renderValues,
   );
 
-  // Filter DOM props
   const domProps = createMemo(() => {
     const filtered = filterDOMProps(ariaProps as Record<string, unknown>, { global: true });
     return filtered;
   });
 
-  // Remove ref from spread props
   const cleanGridProps = () => {
     const { ref: _ref1, ...rest } = gridProps as Record<string, unknown>;
     return rest;
@@ -383,18 +399,25 @@ export function GridList<T extends object>(props: GridListProps<T>): JSX.Element
   const isEmpty = () => stateProps.items.length === 0;
   const virtualizer = useVirtualizerContext();
   const parentCollectionRenderer = useCollectionRenderer<T>();
-  const getItemNodes = createMemo(() => Array.from(state.collection).filter((node) => node.type === 'item'));
-  const getDropTargetByIndex = (index: number, position: 'before' | 'after' | 'on'): DropTarget | null => {
+  const getItemNodes = createMemo(() =>
+    Array.from(state.collection).filter((node) => node.type === "item"),
+  );
+  const getDropTargetByIndex = (
+    index: number,
+    position: "before" | "after" | "on",
+  ): DropTarget | null => {
     const node = getItemNodes()[index];
     if (!node) return null;
-    return { type: 'item', key: node.key, dropPosition: position };
+    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)
+      (hooks.dropTargetDelegate ||
+        parentCollectionRenderer?.dropTargetDelegate ||
+        hooks.ListDropTargetDelegate),
     );
   });
   const hasDraggableDnd = createMemo(() => {
@@ -423,22 +446,23 @@ export function GridList<T extends object>(props: GridListProps<T>): JSX.Element
     const hooks = local.dragAndDropHooks;
     const activeDropState = dropState();
     if (!hooks?.useDroppableCollection || !activeDropState) return undefined;
-    const resolveDirection = (): 'ltr' | 'rtl' => {
+    const resolveDirection = (): "ltr" | "rtl" => {
       const el = ref();
-      if (el && typeof window !== 'undefined' && typeof window.getComputedStyle === 'function') {
+      if (el && typeof window !== "undefined" && typeof window.getComputedStyle === "function") {
         const dir = window.getComputedStyle(el).direction;
-        if (dir === 'rtl') return 'rtl';
+        if (dir === "rtl") return "rtl";
       }
-      return typeof document !== 'undefined' && document.dir === 'rtl' ? 'rtl' : 'ltr';
+      return typeof document !== "undefined" && document.dir === "rtl" ? "rtl" : "ltr";
     };
-    const dropTargetDelegate = hooks.dropTargetDelegate
-      ?? parentCollectionRenderer?.dropTargetDelegate
-      ?? (hooks.ListDropTargetDelegate
+    const dropTargetDelegate =
+      hooks.dropTargetDelegate ??
+      parentCollectionRenderer?.dropTargetDelegate ??
+      (hooks.ListDropTargetDelegate
         ? new hooks.ListDropTargetDelegate(
-          () => state.collection,
-          () => ref(),
-          { layout: 'grid', orientation: 'vertical', direction: resolveDirection() }
-        )
+            () => state.collection,
+            () => ref(),
+            { layout: "grid", orientation: "vertical", direction: resolveDirection() },
+          )
         : undefined);
     if (!dropTargetDelegate) return undefined;
     return hooks.useDroppableCollection(
@@ -450,35 +474,37 @@ export function GridList<T extends object>(props: GridListProps<T>): JSX.Element
           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,
+            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,
+            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()
+      () => ref(),
     );
   });
   const isRootDropTarget = createMemo(() => {
-    return Boolean(dropState()?.target?.type === 'root');
+    return Boolean(dropState()?.target?.type === "root");
   });
-  const dndRenderDropIndicator = createMemo(() => useRenderDropIndicator(local.dragAndDropHooks, dropState()));
-  const dndDropIndicator = (index: number, position: 'before' | 'after' | 'on') => {
+  const dndRenderDropIndicator = createMemo(() =>
+    useRenderDropIndicator(local.dragAndDropHooks, dropState()),
+  );
+  const dndDropIndicator = (index: number, position: "before" | "after" | "on") => {
     const target = getDropTargetByIndex(index, position);
-    if (!target || target.type !== 'item') return undefined;
+    if (!target || target.type !== "item") return undefined;
     return dndRenderDropIndicator()?.(target);
   };
   const persistedKeys = useDndPersistedKeys(
     { focusedKey: () => state.focusedKey },
     local.dragAndDropHooks,
     dropState(),
-    state.collection
+    state.collection,
   );
   const virtualRange = createMemo(() => {
     if (!virtualizer || !parentCollectionRenderer?.isVirtualized) return null;
@@ -490,16 +516,26 @@ export function GridList<T extends object>(props: GridListProps<T>): JSX.Element
     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 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,
+      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,
-    });
+    return mergePersistedKeysIntoVirtualRange(
+      baseRange,
+      persistedIndexes,
+      stateProps.items.length,
+      virtualizer,
+      80,
+      {
+        forceIncludeIndexes,
+        forceIncludeMaxSpan: 320,
+      },
+    );
   });
   createEffect(() => {
     if (!virtualizer || !parentCollectionRenderer?.isVirtualized) return;
@@ -514,7 +550,7 @@ export function GridList<T extends object>(props: GridListProps<T>): JSX.Element
       if (!node) return target;
       return {
         ...target,
-        key: typeof node.key === 'string' || typeof node.key === 'number' ? node.key : undefined,
+        key: typeof node.key === "string" || typeof node.key === "number" ? node.key : undefined,
       };
     });
     onCleanup(() => {
@@ -533,6 +569,7 @@ export function GridList<T extends object>(props: GridListProps<T>): JSX.Element
     state,
     collection: collection(),
     isDisabled: ariaProps.isDisabled ?? false,
+    selectionBehavior: stateProps.selectionBehavior ?? "replace",
     dragAndDropHooks: local.dragAndDropHooks,
     dragState: dragState(),
     dropState: dropState(),
@@ -540,21 +577,27 @@ export function GridList<T extends object>(props: GridListProps<T>): JSX.Element
   const collectionRenderer = createMemo<CollectionRendererContextValue<unknown>>(() => ({
     ...parentCollectionRenderer,
     renderItem: (item) => props.children(item as T),
-    renderDropIndicator: (index: number, position: 'before' | 'after' | 'on') =>
-      dndDropIndicator(index, position) ?? parentCollectionRenderer?.renderDropIndicator?.(index, position),
+    renderDropIndicator: (index: number, position: "before" | "after" | "on") =>
+      dndDropIndicator(index, position) ??
+      parentCollectionRenderer?.renderDropIndicator?.(index, position),
   }));
 
   return (
     <GridListContext.Provider value={contextValue() as unknown as GridListContextValue<object>}>
-      <GridListStateContext.Provider value={state as unknown as GridState<object, GridCollection<object>>}>
+      <GridListStateContext.Provider
+        value={state as unknown as GridState<object, GridCollection<object>>}
+      >
         <CollectionRendererContext.Provider value={collectionRenderer()}>
           <div
-            ref={setRef}
+            ref={(element) => {
+              setRef(element);
+              assignRef(local.ref, element);
+            }}
             {...mergeProps(
               domProps(),
               cleanGridProps(),
               cleanFocusProps(),
-              (droppableCollection()?.collectionProps as Record<string, unknown> | undefined) ?? {}
+              (droppableCollection()?.collectionProps as Record<string, unknown> | undefined) ?? {},
             )}
             class={renderProps.class()}
             style={renderProps.style()}
@@ -565,34 +608,47 @@ export function GridList<T extends object>(props: GridListProps<T>): JSX.Element
             data-drop-target={isRootDropTarget() || undefined}
           >
             <SharedElementTransition>
-            {isEmpty() && local.renderEmptyState ? (
-              local.renderEmptyState()
-            ) : (
-              <>
-                {virtualRange()?.offsetTop
-                  ? <div role="presentation" aria-hidden="true" style={{ height: `${virtualRange()!.offsetTop}px` }} 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()}
-                        {props.children(item)}
-                        {afterIndicator()}
-                      </>
-                    );
-                  }}
-                </For>
-                {virtualRange()?.offsetBottom
-                  ? <div role="presentation" aria-hidden="true" style={{ height: `${virtualRange()!.offsetBottom}px` }} data-virtualizer-spacer="bottom" />
-                  : null}
-              </>
-            )}
+              {isEmpty() && local.renderEmptyState ? (
+                local.renderEmptyState()
+              ) : (
+                <>
+                  {virtualRange()?.offsetTop ? (
+                    <div
+                      role="presentation"
+                      aria-hidden="true"
+                      style={{ height: `${virtualRange()!.offsetTop}px` }}
+                      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()}
+                          {props.children(item)}
+                          {afterIndicator()}
+                        </>
+                      );
+                    }}
+                  </For>
+                  {virtualRange()?.offsetBottom ? (
+                    <div
+                      role="presentation"
+                      aria-hidden="true"
+                      style={{ height: `${virtualRange()!.offsetBottom}px` }}
+                      data-virtualizer-spacer="bottom"
+                    />
+                  ) : null}
+                </>
+              )}
             </SharedElementTransition>
             {local.hasMore && local.onLoadMore && (
               <GridListLoadMoreItem onLoadMore={local.onLoadMore} isLoading={local.isLoading} />
@@ -609,34 +665,31 @@ export function GridList<T extends object>(props: GridListProps<T>): JSX.Element
  */
 export function GridListItem<T extends object>(props: GridListItemProps<T>): JSX.Element {
   const [local, domProps] = splitProps(props, [
-    'class',
-    'style',
-    'slot',
-    'id',
-    'item',
-    'textValue',
-    'onAction',
-    'children',
+    "class",
+    "style",
+    "slot",
+    "id",
+    "item",
+    "textValue",
+    "onAction",
+    "children",
+    "ref",
   ]);
 
-  // Get state from context
   const context = useContext(GridListStateContext);
   if (!context) {
-    throw new Error('GridListItem must be used within a GridList');
+    throw new Error("GridListItem must be used within a GridList");
   }
   const state = context as GridState<T, GridCollection<T>>;
   const listContext = useContext(GridListContext) as GridListContextValue<T> | null;
 
-  // Create ref signal
   const [ref, setRef] = createSignal<HTMLDivElement | null>(null);
 
-  // Find or create the item node
   const itemNode = createMemo(() => {
     const node = state.collection.getItem(local.id);
     if (!node) {
-      // Create a simple node for the item
       return {
-        type: 'item' as const,
+        type: "item" as const,
         key: local.id,
         value: local.item ?? null,
         textValue: local.textValue ?? String(local.id),
@@ -649,52 +702,50 @@ export function GridListItem<T extends object>(props: GridListItemProps<T>): JSX
     return node as GridNode<T>;
   });
 
-  // Create item aria props
   const itemAria = createGridListItem<T, GridCollection<T>>(
     () => ({
       node: itemNode(),
       onAction: local.onAction,
+      selectionBehavior: listContext?.selectionBehavior ?? "replace",
     }),
     () => state,
-    ref as Accessor<HTMLLIElement | null>
+    ref,
   );
   const isSelected = () => itemAria.isSelected;
   const isDisabled = () => itemAria.isDisabled;
   const isPressed = () => itemAria.isPressed;
 
-  // Create hover
   const { isHovered, hoverProps } = createHover({
     get isDisabled() {
       return isDisabled();
     },
   });
 
-  // Create focus ring
   const { isFocusVisible, focusProps } = createFocusRing();
 
-  // Check if focused
   const isFocused = createMemo(() => state.focusedKey === local.id);
   const draggableItem = createMemo(() => {
-    if (!listContext?.dragAndDropHooks?.useDraggableItem || !listContext.dragState) return undefined;
+    if (!listContext?.dragAndDropHooks?.useDraggableItem || !listContext.dragState)
+      return undefined;
     return listContext.dragAndDropHooks.useDraggableItem(
       {
         key: local.id as string | number,
       },
-      listContext.dragState as Parameters<NonNullable<DragAndDropHooks<T>['useDraggableItem']>>[1]
+      listContext.dragState as Parameters<NonNullable<DragAndDropHooks<T>["useDraggableItem"]>>[1],
     );
   });
   const droppableItem = createMemo(() => {
-    if (!listContext?.dragAndDropHooks?.useDroppableItem || !listContext.dropState) return undefined;
+    if (!listContext?.dragAndDropHooks?.useDroppableItem || !listContext.dropState)
+      return undefined;
     return listContext.dragAndDropHooks.useDroppableItem(
       {
         key: local.id as string | number,
       },
-      listContext.dropState as Parameters<NonNullable<DragAndDropHooks<T>['useDroppableItem']>>[1],
-      () => ref()
+      listContext.dropState as Parameters<NonNullable<DragAndDropHooks<T>["useDroppableItem"]>>[1],
+      () => ref(),
     );
   });
 
-  // Render props values
   const renderValues = createMemo<GridListItemRenderProps>(() => ({
     isSelected: isSelected(),
     isFocused: isFocused(),
@@ -702,20 +753,20 @@ export function GridListItem<T extends object>(props: GridListItemProps<T>): JSX
     isPressed: isPressed(),
     isHovered: isHovered(),
     isDisabled: isDisabled(),
+    selectionMode: state.selectionMode,
+    selectionBehavior: listContext?.selectionBehavior ?? "replace",
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       children: props.children,
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-GridList-item',
+      defaultClassName: "solidaria-GridList-item",
     },
-    renderValues
+    renderValues,
   );
 
-  // Remove ref from spread props
   const cleanRowProps = () => {
     const { ref: _ref1, ...rest } = itemAria.rowProps as Record<string, unknown>;
     return rest;
@@ -731,14 +782,17 @@ export function GridListItem<T extends object>(props: GridListItemProps<T>): JSX
 
   return (
     <div
-      ref={setRef}
+      ref={(element) => {
+        setRef(element);
+        assignRef(local.ref, element);
+      }}
       {...domProps}
       {...mergeProps(
         cleanRowProps(),
         cleanHoverProps(),
         cleanFocusProps(),
         (draggableItem()?.dragProps as Record<string, unknown> | undefined) ?? {},
-        (droppableItem()?.dropProps as Record<string, unknown> | undefined) ?? {}
+        (droppableItem()?.dropProps as Record<string, unknown> | undefined) ?? {},
       )}
       class={renderProps.class()}
       style={renderProps.style()}
@@ -759,24 +813,38 @@ export function GridListItem<T extends object>(props: GridListItemProps<T>): JSX
 /**
  * A checkbox for item selection in a grid list.
  */
-export function GridListSelectionCheckbox(props: { itemKey: Key }): JSX.Element {
+export function GridListSelectionCheckbox(props: {
+  itemKey: Key;
+  class?: string;
+  style?: JSX.CSSProperties;
+  excludeFromTabOrder?: boolean;
+  "aria-label"?: string;
+}): JSX.Element {
   const context = useContext(GridListStateContext);
   if (!context) {
-    throw new Error('GridListSelectionCheckbox must be used within a GridList');
+    throw new Error("GridListSelectionCheckbox must be used within a GridList");
   }
 
   const state = context as GridState<object, GridCollection<object>>;
 
   const checkboxAria = createGridListSelectionCheckbox<object, GridCollection<object>>(
     () => ({ key: props.itemKey }),
-    () => state
+    () => state,
   );
 
-  return <input {...checkboxAria.checkboxProps} />;
+  return (
+    <input
+      {...checkboxAria.checkboxProps}
+      class={props.class}
+      style={props.style}
+      tabIndex={props.excludeFromTabOrder ? -1 : undefined}
+      aria-label={props["aria-label"] ?? "Select"}
+    />
+  );
 }
 
 export function GridListLoadMoreItem(props: GridListLoadMoreItemProps): JSX.Element {
-  let ref: HTMLDivElement | undefined;
+  let sentinelRef: HTMLDivElement | undefined;
   const [isPending, setIsPending] = createSignal(false);
   const isLoading = () => !!props.isLoading || isPending();
 
@@ -791,46 +859,55 @@ export function GridListLoadMoreItem(props: GridListLoadMoreItemProps): JSX.Elem
   };
 
   createEffect(() => {
-    if (!ref || typeof IntersectionObserver !== 'function') return;
-    const observer = new IntersectionObserver((entries) => {
-      if (entries[0]?.isIntersecting) {
-        void triggerLoadMore();
-      }
-    });
-    observer.observe(ref);
+    if (!sentinelRef || typeof IntersectionObserver !== "function") return;
+    const offset = props.scrollOffset ?? 1;
+    const margin = `0px 0px ${100 * offset}% 0px`;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting) {
+          void triggerLoadMore();
+        }
+      },
+      { rootMargin: margin },
+    );
+    observer.observe(sentinelRef);
     return () => observer.disconnect();
   });
 
   const renderProps = useRenderProps(
     {
-      children: props.children ?? (() => (isLoading() ? 'Loading more...' : 'Load more')),
+      children: props.children ?? (() => (isLoading() ? "Loading more..." : "Load more")),
       class: props.class,
       style: props.style,
-      defaultClassName: 'solidaria-GridList-loadMore',
+      defaultClassName: "solidaria-GridList-loadMore",
     },
-    () => ({ isLoading: isLoading() })
+    () => ({ isLoading: isLoading() }),
   );
 
   return (
-    <div
-      ref={ref}
-      role="row"
-      tabIndex={0}
-      onFocus={() => {
-        void triggerLoadMore();
-      }}
-      class={renderProps.class()}
-      style={renderProps.style()}
-      data-loading={isLoading() || undefined}
-    >
-      {renderProps.renderChildren()}
-    </div>
+    <>
+      <div style={{ position: "relative", width: 0, height: 0, overflow: "hidden" }} inert>
+        <div ref={sentinelRef} style={{ position: "absolute", height: "1px", width: "1px" }} />
+      </div>
+      <div
+        role="row"
+        tabIndex={0}
+        onFocus={() => {
+          void triggerLoadMore();
+        }}
+        class={renderProps.class()}
+        style={renderProps.style()}
+        data-loading={isLoading() || undefined}
+      >
+        {renderProps.renderChildren()}
+      </div>
+    </>
   );
 }
 
 export function GridListHeader(props: GridListHeaderProps): JSX.Element {
   return (
-    <div class={props.class ?? 'solidaria-GridListHeader'} style={props.style}>
+    <div class={props.class ?? "solidaria-GridListHeader"} style={props.style}>
       {props.children}
     </div>
   );
@@ -843,7 +920,6 @@ export function GridListSection(props: GridListSectionProps): JSX.Element {
   return <Section {...props} />;
 }
 
-// Attach Item and SelectionCheckbox as static properties
 GridList.Item = GridListItem;
 GridList.SelectionCheckbox = GridListSelectionCheckbox;
 GridList.LoadMoreItem = GridListLoadMoreItem;