@proyecto-viviana/solidaria-components 0.2.4 → 0.2.9

package/src/GridList.tsx

@@ -9,10 +9,13 @@
  */
 
 import {
+  type Accessor,
   type JSX,
   createContext,
+  createEffect,
   createMemo,
   createSignal,
+  onCleanup,
   splitProps,
   useContext,
   For,
@@ -23,6 +26,7 @@ import {
   createGridListSelectionCheckbox,
   createFocusRing,
   createHover,
+  mergeProps,
   type AriaGridListProps,
 } from '@proyecto-viviana/solidaria';
 import {
@@ -31,6 +35,7 @@ import {
   type GridCollection,
   type GridNode,
   type Key,
+  type DropTarget,
 } from '@proyecto-viviana/solid-stately';
 import {
   type RenderChildren,
@@ -40,6 +45,22 @@ import {
   useRenderProps,
   filterDOMProps,
 } 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';
+import {
+  getNormalizedDropTargetKey,
+  mergePersistedKeysIntoVirtualRange,
+  useDndPersistedKeys,
+  useRenderDropIndicator,
+} from './DragAndDrop';
 
 // ============================================
 // TYPES
@@ -83,6 +104,14 @@ export interface GridListProps<T extends object> extends Omit<AriaGridListProps,
   style?: StyleOrFunction<GridListRenderProps>;
   /** A function to render when the grid list is empty. */
   renderEmptyState?: () => JSX.Element;
+  /** Whether there are more items to load. */
+  hasMore?: boolean;
+  /** Whether additional items are currently loading. */
+  isLoading?: boolean;
+  /** Called when the load more sentinel becomes visible. */
+  onLoadMore?: () => void | Promise<void>;
+  /** Drag and drop hooks from `useDragAndDrop`. */
+  dragAndDropHooks?: DragAndDropHooks<T>;
 }
 
 export interface GridListItemRenderProps {
@@ -100,7 +129,7 @@ export interface GridListItemRenderProps {
   isDisabled: boolean;
 }
 
-export interface GridListItemProps<T extends object> extends SlotProps {
+export interface GridListItemProps<T extends object> extends SlotProps, Omit<JSX.HTMLAttributes<HTMLDivElement>, 'class' | 'style' | 'children' | 'id'> {
   /** The unique key for the item. */
   id: Key;
   /** The item value. */
@@ -117,6 +146,21 @@ export interface GridListItemProps<T extends object> extends SlotProps {
   onAction?: () => void;
 }
 
+export interface GridListLoadMoreItemProps extends SlotProps {
+  onLoadMore: () => void | Promise<void>;
+  isLoading?: boolean;
+  children?: JSX.Element;
+  class?: ClassNameOrFunction<{ isLoading: boolean }>;
+  style?: StyleOrFunction<{ isLoading: boolean }>;
+}
+
+export interface GridListSectionProps extends SectionProps {}
+export interface GridListHeaderProps extends SlotProps {
+  children?: JSX.Element;
+  class?: string;
+  style?: JSX.CSSProperties;
+}
+
 // ============================================
 // CONTEXT
 // ============================================
@@ -125,10 +169,14 @@ interface GridListContextValue<T extends object> {
   state: GridState<T, GridCollection<T>>;
   collection: GridCollection<T>;
   isDisabled: boolean;
+  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 GridListHeaderContext = createContext<null>(null);
 
 // ============================================
 // HELPER: Build GridCollection from items
@@ -222,7 +270,7 @@ 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'],
+    ['children', 'class', 'style', 'slot', 'renderEmptyState', 'hasMore', 'isLoading', 'onLoadMore', 'dragAndDropHooks'],
     [
       'items',
       'getKey',
@@ -333,34 +381,224 @@ 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 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 undefined;
+    return local.dragAndDropHooks?.useDraggableCollectionState?.({
+      items: stateProps.items,
+    });
+  });
+  const dropState = createMemo(() => {
+    if (!hasDroppableDnd()) return undefined;
+    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 undefined;
+    const hooks = local.dragAndDropHooks;
+    const activeDropState = dropState();
+    if (!hooks?.useDroppableCollection || !activeDropState) return undefined;
+    const resolveDirection = (): 'ltr' | 'rtl' => {
+      const el = ref();
+      if (el && typeof window !== 'undefined' && typeof window.getComputedStyle === 'function') {
+        const dir = window.getComputedStyle(el).direction;
+        if (dir === 'rtl') return 'rtl';
+      }
+      return typeof document !== 'undefined' && document.dir === 'rtl' ? 'rtl' : 'ltr';
+    };
+    const dropTargetDelegate = hooks.dropTargetDelegate
+      ?? parentCollectionRenderer?.dropTargetDelegate
+      ?? (hooks.ListDropTargetDelegate
+        ? new hooks.ListDropTargetDelegate(
+          () => state.collection,
+          () => ref(),
+          { layout: 'grid', orientation: 'vertical', direction: resolveDirection() }
+        )
+        : undefined);
+    if (!dropTargetDelegate) return undefined;
+    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: number, position: 'before' | 'after' | 'on') => {
+    const target = getDropTargetByIndex(index, position);
+    if (!target || target.type !== 'item') return undefined;
+    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 entries = Array.from(state.collection);
+      const index = entries.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 : undefined,
+      };
+    });
+    onCleanup(() => {
+      virtualizer.setDropTargetIndexResolver(undefined);
+      virtualizer.setDropTargetItemCountResolver(undefined);
+      virtualizer.setDropTargetResolver(undefined);
+    });
+  });
+  const visibleItems = createMemo(() => {
+    const range = virtualRange();
+    if (!range) return stateProps.items;
+    return stateProps.items.slice(range.start, range.end);
+  });
 
   const contextValue = createMemo<GridListContextValue<T>>(() => ({
     state,
     collection: collection(),
     isDisabled: ariaProps.isDisabled ?? false,
+    dragAndDropHooks: local.dragAndDropHooks,
+    dragState: dragState(),
+    dropState: dropState(),
+  }));
+  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),
   }));
 
   return (
-    <GridListContext.Provider value={contextValue() as GridListContextValue<object>}>
+    <GridListContext.Provider value={contextValue() as unknown as GridListContextValue<object>}>
       <GridListStateContext.Provider value={state as unknown as GridState<object, GridCollection<object>>}>
-        <ul
-          ref={setRef}
-          {...domProps()}
-          {...cleanGridProps()}
-          {...cleanFocusProps()}
-          class={renderProps.class()}
-          style={renderProps.style()}
-          data-focused={state.isFocused || undefined}
-          data-focus-visible={isFocusVisible() || undefined}
-          data-disabled={ariaProps.isDisabled || undefined}
-          data-empty={isEmpty() || undefined}
-        >
-          {isEmpty() && local.renderEmptyState ? (
-            local.renderEmptyState()
-          ) : (
-            <For each={stateProps.items}>{(item) => props.children(item)}</For>
-          )}
-        </ul>
+        <CollectionRendererContext.Provider value={collectionRenderer()}>
+          <div
+            ref={setRef}
+            {...mergeProps(
+              domProps(),
+              cleanGridProps(),
+              cleanFocusProps(),
+              (droppableCollection()?.collectionProps as Record<string, unknown> | undefined) ?? {}
+            )}
+            class={renderProps.class()}
+            style={renderProps.style()}
+            data-focused={state.isFocused || undefined}
+            data-focus-visible={isFocusVisible() || undefined}
+            data-disabled={ariaProps.isDisabled || undefined}
+            data-empty={isEmpty() || undefined}
+            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}
+              </>
+            )}
+            </SharedElementTransition>
+            {local.hasMore && local.onLoadMore && (
+              <GridListLoadMoreItem onLoadMore={local.onLoadMore} isLoading={local.isLoading} />
+            )}
+          </div>
+        </CollectionRendererContext.Provider>
       </GridListStateContext.Provider>
     </GridListContext.Provider>
   );
@@ -370,7 +608,7 @@ export function GridList<T extends object>(props: GridListProps<T>): JSX.Element
  * An item in a grid list.
  */
 export function GridListItem<T extends object>(props: GridListItemProps<T>): JSX.Element {
-  const [local] = splitProps(props, [
+  const [local, domProps] = splitProps(props, [
     'class',
     'style',
     'slot',
@@ -378,6 +616,7 @@ export function GridListItem<T extends object>(props: GridListItemProps<T>): JSX
     'item',
     'textValue',
     'onAction',
+    'children',
   ]);
 
   // Get state from context
@@ -386,9 +625,10 @@ export function GridListItem<T extends object>(props: GridListItemProps<T>): JSX
     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<HTMLLIElement | null>(null);
+  const [ref, setRef] = createSignal<HTMLDivElement | null>(null);
 
   // Find or create the item node
   const itemNode = createMemo(() => {
@@ -410,19 +650,22 @@ export function GridListItem<T extends object>(props: GridListItemProps<T>): JSX
   });
 
   // Create item aria props
-  const { rowProps, gridCellProps, isSelected, isDisabled, isPressed } = createGridListItem<T, GridCollection<T>>(
+  const itemAria = createGridListItem<T, GridCollection<T>>(
     () => ({
       node: itemNode(),
       onAction: local.onAction,
     }),
     () => state,
-    ref
+    ref as Accessor<HTMLLIElement | null>
   );
+  const isSelected = () => itemAria.isSelected;
+  const isDisabled = () => itemAria.isDisabled;
+  const isPressed = () => itemAria.isPressed;
 
   // Create hover
   const { isHovered, hoverProps } = createHover({
     get isDisabled() {
-      return isDisabled;
+      return isDisabled();
     },
   });
 
@@ -431,15 +674,34 @@ export function GridListItem<T extends object>(props: GridListItemProps<T>): JSX
 
   // Check if focused
   const isFocused = createMemo(() => state.focusedKey === local.id);
+  const draggableItem = createMemo(() => {
+    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]
+    );
+  });
+  const droppableItem = createMemo(() => {
+    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()
+    );
+  });
 
   // Render props values
   const renderValues = createMemo<GridListItemRenderProps>(() => ({
-    isSelected,
+    isSelected: isSelected(),
     isFocused: isFocused(),
     isFocusVisible: isFocusVisible() && isFocused(),
-    isPressed,
+    isPressed: isPressed(),
     isHovered: isHovered(),
-    isDisabled,
+    isDisabled: isDisabled(),
   }));
 
   // Resolve render props
@@ -455,7 +717,7 @@ export function GridListItem<T extends object>(props: GridListItemProps<T>): JSX
 
   // Remove ref from spread props
   const cleanRowProps = () => {
-    const { ref: _ref1, ...rest } = rowProps as Record<string, unknown>;
+    const { ref: _ref1, ...rest } = itemAria.rowProps as Record<string, unknown>;
     return rest;
   };
   const cleanHoverProps = () => {
@@ -468,22 +730,29 @@ export function GridListItem<T extends object>(props: GridListItemProps<T>): JSX
   };
 
   return (
-    <li
+    <div
       ref={setRef}
-      {...cleanRowProps()}
-      {...cleanHoverProps()}
-      {...cleanFocusProps()}
+      {...domProps}
+      {...mergeProps(
+        cleanRowProps(),
+        cleanHoverProps(),
+        cleanFocusProps(),
+        (draggableItem()?.dragProps as Record<string, unknown> | undefined) ?? {},
+        (droppableItem()?.dropProps as Record<string, unknown> | undefined) ?? {}
+      )}
       class={renderProps.class()}
       style={renderProps.style()}
-      data-selected={isSelected || undefined}
+      data-selected={isSelected() || undefined}
       data-focused={isFocused() || undefined}
       data-focus-visible={(isFocusVisible() && isFocused()) || undefined}
-      data-pressed={isPressed || undefined}
+      data-pressed={isPressed() || undefined}
       data-hovered={isHovered() || undefined}
-      data-disabled={isDisabled || undefined}
+      data-disabled={isDisabled() || undefined}
+      data-dragging={draggableItem()?.isDragging || undefined}
+      data-drop-target={droppableItem()?.isDropTarget || undefined}
     >
-      <div {...gridCellProps}>{renderProps.renderChildren()}</div>
-    </li>
+      <div {...itemAria.gridCellProps}>{renderProps.renderChildren()}</div>
+    </div>
   );
 }
 
@@ -498,14 +767,83 @@ export function GridListSelectionCheckbox(props: { itemKey: Key }): JSX.Element
 
   const state = context as GridState<object, GridCollection<object>>;
 
-  const { checkboxProps } = createGridListSelectionCheckbox<object, GridCollection<object>>(
+  const checkboxAria = createGridListSelectionCheckbox<object, GridCollection<object>>(
     () => ({ key: props.itemKey }),
     () => state
   );
 
-  return <input {...checkboxProps} />;
+  return <input {...checkboxAria.checkboxProps} />;
+}
+
+export function GridListLoadMoreItem(props: GridListLoadMoreItemProps): JSX.Element {
+  let ref: HTMLDivElement | undefined;
+  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 (!ref || typeof IntersectionObserver !== 'function') return;
+    const observer = new IntersectionObserver((entries) => {
+      if (entries[0]?.isIntersecting) {
+        void triggerLoadMore();
+      }
+    });
+    observer.observe(ref);
+    return () => observer.disconnect();
+  });
+
+  const renderProps = useRenderProps(
+    {
+      children: props.children ?? (() => (isLoading() ? 'Loading more...' : 'Load more')),
+      class: props.class,
+      style: props.style,
+      defaultClassName: 'solidaria-GridList-loadMore',
+    },
+    () => ({ 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>
+  );
+}
+
+export function GridListHeader(props: GridListHeaderProps): JSX.Element {
+  return (
+    <div class={props.class ?? 'solidaria-GridListHeader'} style={props.style}>
+      {props.children}
+    </div>
+  );
+}
+
+/**
+ * Section primitive alias for GridList composition parity.
+ */
+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;