@proyecto-viviana/solidaria 0.2.8 → 0.4.0

package/src/gridlist/createGridList.ts

@@ -3,11 +3,13 @@
  * Based on @react-aria/gridlist/useGridList.
  */
 
-import { createMemo, type Accessor } from 'solid-js';
-import type { JSX } from 'solid-js';
-import { createId } from '@proyecto-viviana/solid-stately';
-import type { GridState, GridCollection, Key } from '@proyecto-viviana/solid-stately';
-import type { AriaGridListProps, GridListAria } from './types';
+import { createMemo, createEffect, type Accessor } from "solid-js";
+import type { JSX } from "solid-js";
+import { createId } from "@proyecto-viviana/solid-stately";
+import type { GridState, GridCollection, Key } from "@proyecto-viviana/solid-stately";
+import type { AriaGridListProps, GridListAria } from "./types";
+import { scrollIntoViewport } from "../utils";
+import { getInteractionModality } from "../interactions/createInteractionModality";
 
 /**
  * Metadata stored for a grid list instance.
@@ -15,6 +17,14 @@ import type { AriaGridListProps, GridListAria } from './types';
 interface GridListData {
   /** The generated ID for the grid list. */
   gridListId: string;
+  /** How selection should behave when pressing an item. */
+  selectionBehavior: "replace" | "toggle";
+  /** Whether row selection should occur on press up. */
+  shouldSelectOnPressUp: boolean;
+  /** How keyboard navigation behaves within row children. */
+  keyboardNavigationBehavior: "arrow" | "tab";
+  /** Text direction for row-child arrow navigation. */
+  direction: "ltr" | "rtl";
   /** Actions registered for the grid list. */
   actions: {
     onAction?: (key: Key) => void;
@@ -30,18 +40,50 @@ const gridListDataMap = new WeakMap<object, GridListData>();
  * Gets the grid list data for a given state.
  */
 export function getGridListData<T extends object, C extends GridCollection<T>>(
-  state: GridState<T, C>
+  state: GridState<T, C>,
 ): GridListData | undefined {
   return gridListDataMap.get(state);
 }
 
+/**
+ * Whether a key should be skipped during keyboard navigation. Disabled keys only
+ * block navigation under `disabledBehavior: "all"` (the default); under
+ * `"selection"` they remain focusable (selection is still blocked elsewhere).
+ * Mirrors `ListKeyboardDelegate.isDisabled` in React Aria.
+ */
+function isNavigationDisabled<T extends object, C extends GridCollection<T>>(
+  state: GridState<T, C>,
+  key: Key,
+): boolean {
+  return state.isDisabled(key) && state.disabledBehavior === "all";
+}
+
+/**
+ * Walks from `startKey` via `step` until reaching a navigable (not
+ * navigation-disabled) key, mirroring React Aria's
+ * `ListKeyboardDelegate.findNextNonDisabled`. The next/previous lookups and the
+ * `getFirstKey`/`getLastKey` boundaries all funnel through this so arrow keys,
+ * Home and End land on enabled rows only.
+ */
+function findNextNavigableKey<T extends object, C extends GridCollection<T>>(
+  state: GridState<T, C>,
+  startKey: Key | null,
+  step: (key: Key) => Key | null,
+): Key | null {
+  let key = startKey;
+  while (key != null && isNavigationDisabled(state, key)) {
+    key = step(key);
+  }
+  return key;
+}
+
 /**
  * Creates accessibility props for a grid list.
  */
 export function createGridList<T extends object, C extends GridCollection<T> = GridCollection<T>>(
   props: Accessor<AriaGridListProps>,
   state: Accessor<GridState<T, C>>,
-  _ref: Accessor<HTMLUListElement | null>
+  ref: Accessor<HTMLElement | null>,
 ): GridListAria {
   // Generate a unique ID for the grid list
   const gridListId = props().id ?? createId();
@@ -49,6 +91,18 @@ export function createGridList<T extends object, C extends GridCollection<T> = G
   // Store grid list data for child components
   const gridListData: GridListData = {
     gridListId,
+    get selectionBehavior() {
+      return props().selectionBehavior ?? "replace";
+    },
+    get shouldSelectOnPressUp() {
+      return props().shouldSelectOnPressUp ?? false;
+    },
+    get keyboardNavigationBehavior() {
+      return props().keyboardNavigationBehavior ?? "arrow";
+    },
+    get direction() {
+      return props().direction ?? "ltr";
+    },
     actions: {
       get onAction() {
         return props().onAction;
@@ -69,78 +123,92 @@ export function createGridList<T extends object, C extends GridCollection<T> = G
     if (p.isDisabled) return;
 
     switch (e.key) {
-      case 'ArrowDown': {
+      case "ArrowDown": {
+        e.preventDefault();
+        const nextKey =
+          focusedKey != null
+            ? findNextNavigableKey(s, collection.getKeyAfter(focusedKey), (k) =>
+                collection.getKeyAfter(k),
+              )
+            : findNextNavigableKey(s, collection.getFirstKey(), (k) => collection.getKeyAfter(k));
+        if (nextKey != null) {
+          s.setFocusedKey(nextKey);
+        }
+        break;
+      }
+      case "ArrowUp": {
         e.preventDefault();
-        if (focusedKey != null) {
-          const nextKey = collection.getKeyAfter(focusedKey);
-          if (nextKey != null) {
-            s.setFocusedKey(nextKey);
-          }
-        } else {
-          const firstKey = collection.getFirstKey();
-          if (firstKey != null) {
-            s.setFocusedKey(firstKey);
-          }
+        const prevKey =
+          focusedKey != null
+            ? findNextNavigableKey(s, collection.getKeyBefore(focusedKey), (k) =>
+                collection.getKeyBefore(k),
+              )
+            : findNextNavigableKey(s, collection.getLastKey(), (k) => collection.getKeyBefore(k));
+        if (prevKey != null) {
+          s.setFocusedKey(prevKey);
         }
         break;
       }
-      case 'ArrowUp': {
+      case "ArrowRight":
+      case "ArrowLeft": {
+        // Horizontal orientation promotes the inline axis to the primary
+        // navigation axis. Upstream's ListKeyboardDelegate strips
+        // getKeyLeftOf/getKeyRightOf for a vertical stack, so Left/Right stay
+        // no-ops there; in a horizontal stack they move prev/next, flipped
+        // under RTL (Right=next, Left=prev in LTR).
+        if (p.orientation !== "horizontal") break;
         e.preventDefault();
-        if (focusedKey != null) {
-          const prevKey = collection.getKeyBefore(focusedKey);
-          if (prevKey != null) {
-            s.setFocusedKey(prevKey);
-          }
-        } else {
-          const lastKey = collection.getLastKey();
-          if (lastKey != null) {
-            s.setFocusedKey(lastKey);
-          }
+        const isRtl = p.direction === "rtl";
+        const forward = e.key === "ArrowRight" ? !isRtl : isRtl;
+        const step = forward
+          ? (k: Key) => collection.getKeyAfter(k)
+          : (k: Key) => collection.getKeyBefore(k);
+        const nextKey =
+          focusedKey != null
+            ? findNextNavigableKey(s, step(focusedKey), step)
+            : findNextNavigableKey(s, collection.getFirstKey(), (k) => collection.getKeyAfter(k));
+        if (nextKey != null) {
+          s.setFocusedKey(nextKey);
         }
         break;
       }
-      case 'Home': {
+      case "Home": {
         e.preventDefault();
-        const firstKey = collection.getFirstKey();
+        const firstKey = findNextNavigableKey(s, collection.getFirstKey(), (k) =>
+          collection.getKeyAfter(k),
+        );
         if (firstKey != null) {
           s.setFocusedKey(firstKey);
         }
         break;
       }
-      case 'End': {
+      case "End": {
         e.preventDefault();
-        const lastKey = collection.getLastKey();
+        const lastKey = findNextNavigableKey(s, collection.getLastKey(), (k) =>
+          collection.getKeyBefore(k),
+        );
         if (lastKey != null) {
           s.setFocusedKey(lastKey);
         }
         break;
       }
-      case 'a':
-      case 'A': {
-        if ((e.ctrlKey || e.metaKey) && s.selectionMode === 'multiple') {
+      case "a":
+      case "A": {
+        if ((e.ctrlKey || e.metaKey) && s.selectionMode === "multiple") {
           e.preventDefault();
           s.selectAll();
         }
         break;
       }
-      case ' ':
-      case 'Space':
-      case 'Spacebar': {
-        if (focusedKey != null && s.selectionMode !== 'none' && !s.isDisabled(focusedKey)) {
-          e.preventDefault();
-          s.toggleSelection(focusedKey);
-        }
-        break;
-      }
-      case 'Enter': {
-        if (focusedKey != null && !s.isDisabled(focusedKey)) {
-          e.preventDefault();
-          p.onAction?.(focusedKey);
-        }
-        break;
-      }
-      case 'Escape': {
-        if (s.selectionMode !== 'none') {
+      // Space (toggle selection) and Enter (onAction) are intentionally absent
+      // here. Upstream's useSelectableCollection has no Space/Enter case — the
+      // focused item owns both, via useSelectableItem. We follow browser focus
+      // onto the focused row (the effect below), so the row's own handlers in
+      // createGridListItem fire. Handling them here too would double-toggle a
+      // focused row, because Solid delegates keydown and bubbles the row event
+      // up to this grid handler.
+      case "Escape": {
+        if (s.selectionMode !== "none") {
           e.preventDefault();
           s.clearSelection();
         }
@@ -153,9 +221,11 @@ export function createGridList<T extends object, C extends GridCollection<T> = G
     const s = state();
     s.setFocused(true);
 
-    // If nothing is focused, focus the first item
+    // If nothing is focused, focus the first navigable item
     if (s.focusedKey == null) {
-      const firstKey = s.collection.getFirstKey();
+      const firstKey = findNextNavigableKey(s, s.collection.getFirstKey(), (k) =>
+        s.collection.getKeyAfter(k),
+      );
       if (firstKey != null) {
         s.setFocusedKey(firstKey);
       }
@@ -167,18 +237,56 @@ export function createGridList<T extends object, C extends GridCollection<T> = G
     s.setFocused(false);
   };
 
+  // Mirror React Aria's useSelectableCollection: once the roving tabindex for the
+  // focused key has been committed to the DOM, move browser focus onto that row
+  // from a post-commit effect, looking it up by its stable data-key rather than by
+  // transient tabindex. Selection and activation live on the row
+  // (createGridListItem) to match upstream, so keyboard nav has to carry focus
+  // there for the row's Space/Enter handlers to act on.
+  createEffect(() => {
+    const s = state();
+    const key = s.focusedKey;
+    const el = ref();
+    if (!el || key == null) {
+      return;
+    }
+
+    // Only manage focus while it already lives inside the grid — i.e. the user is
+    // navigating with the keyboard. Gate on the physical position of browser focus
+    // rather than the grid's logical isFocused signal: focus can land directly on a
+    // row (a pointer click) without ever firing the grid's own focus handler, and
+    // the contains() check keeps us from yanking focus back from elsewhere on the
+    // page when the focused key changes from a background interaction.
+    const active = document.activeElement;
+    if (!active || (active !== el && !el.contains(active))) {
+      return;
+    }
+
+    const target = el.querySelector<HTMLElement>(`[data-key="${key}"]`);
+    if (target && target !== active) {
+      target.focus();
+
+      // Reveal the newly focused row when navigating with the keyboard, mirroring
+      // useSelectableCollection. Pointer-driven focus changes should not shift the
+      // scroll position under the user's finger.
+      if (getInteractionModality() !== "pointer") {
+        scrollIntoViewport(target, { containingElement: el });
+      }
+    }
+  });
+
   const gridProps = createMemo(() => {
     const p = props();
     const s = state();
 
     const baseProps: Record<string, unknown> = {
-      role: 'grid',
+      role: "grid",
       id: gridListId,
-      'aria-label': p['aria-label'],
-      'aria-labelledby': p['aria-labelledby'],
-      'aria-describedby': p['aria-describedby'],
-      'aria-multiselectable': s.selectionMode === 'multiple' ? true : undefined,
-      'aria-disabled': p.isDisabled || undefined,
+      "aria-label": p["aria-label"],
+      "aria-labelledby": p["aria-labelledby"],
+      "aria-describedby": p["aria-describedby"],
+      "aria-multiselectable": s.selectionMode === "multiple" ? true : undefined,
+      "aria-disabled": p.isDisabled || undefined,
       tabIndex: p.isDisabled ? undefined : 0,
       onKeyDown,
       onFocus,
@@ -187,10 +295,10 @@ export function createGridList<T extends object, C extends GridCollection<T> = G
 
     // Add row count for virtualized lists
     if (p.isVirtualized) {
-      baseProps['aria-rowcount'] = s.collection.rowCount;
+      baseProps["aria-rowcount"] = s.collection.rowCount;
     }
 
-    return baseProps as JSX.HTMLAttributes<HTMLUListElement>;
+    return baseProps as JSX.HTMLAttributes<HTMLElement>;
   });
 
   return {

package/src/gridlist/createGridListItem.ts

@@ -3,131 +3,104 @@
  * Based on @react-aria/gridlist/useGridListItem.
  */
 
-import { createMemo, createSignal, type Accessor } from 'solid-js';
-import type { JSX } from 'solid-js';
-import type { GridState, GridCollection } from '@proyecto-viviana/solid-stately';
-import type { AriaGridListItemProps, GridListItemAria } from './types';
-import { getGridListData } from './createGridList';
+import { createMemo, type Accessor } from "solid-js";
+import type { JSX } from "solid-js";
+import type {
+  Collection,
+  GridState,
+  GridCollection,
+  Key,
+  Selection,
+} from "@proyecto-viviana/solid-stately";
+import type { AriaGridListItemProps, GridListItemAria } from "./types";
+import { getGridListData } from "./createGridList";
+import { createSelectableItem, type SelectableItemState } from "../selection/createSelectableItem";
+import { mergeCollectionRowInteractionProps } from "../selection/createCollectionRowInteraction";
+import { mergeProps } from "../utils/mergeProps";
 
 /**
  * Creates accessibility props for a grid list item.
  */
-export function createGridListItem<T extends object, C extends GridCollection<T> = GridCollection<T>>(
+export function createGridListItem<
+  T extends object,
+  C extends GridCollection<T> = GridCollection<T>,
+>(
   props: Accessor<AriaGridListItemProps>,
   state: Accessor<GridState<T, C>>,
-  _ref: Accessor<HTMLLIElement | null>
+  ref: Accessor<HTMLElement | null>,
 ): GridListItemAria {
-  const [isPressed, setIsPressed] = createSignal(false);
-
   const isSelected = createMemo(() => {
     const s = state();
     const p = props();
     return s.isSelected(p.node.key);
   });
 
-  const isDisabled = createMemo(() => {
-    const s = state();
-    const p = props();
-    return s.isDisabled(p.node.key);
-  });
-
-  const isFocused = createMemo(() => {
-    const s = state();
-    const p = props();
-    return s.focusedKey === p.node.key;
-  });
-
-  // Handle click/press for selection and actions
-  const onClick = (e: MouseEvent) => {
-    const s = state();
-    const p = props();
-
-    if (isDisabled()) return;
-
-    // Get grid list metadata for actions
-    const gridListData = getGridListData(s);
-    const onAction = gridListData?.actions.onAction;
-
-    // Handle selection
-    if (s.selectionMode !== 'none') {
-      if (e.shiftKey && s.selectionMode === 'multiple') {
-        s.extendSelection(p.node.key);
-      } else if (e.ctrlKey || e.metaKey) {
-        s.toggleSelection(p.node.key);
-      } else {
-        // Replace selection or toggle if already selected
-        if (isSelected() && s.selectedKeys !== 'all') {
-          const selectedKeys = s.selectedKeys as Set<unknown>;
-          if (selectedKeys.size === 1) {
-            // Single selection, trigger action
-            if (onAction) {
-              onAction(p.node.key);
-            }
-            if (p.onAction) {
-              p.onAction();
-            }
-          } else {
-            s.replaceSelection(p.node.key);
-          }
-        } else {
-          s.replaceSelection(p.node.key);
-        }
-      }
-    } else {
-      // No selection mode, just trigger action
-      if (onAction) {
-        onAction(p.node.key);
-      }
-      if (p.onAction) {
-        p.onAction();
-      }
-    }
+  const selectableState: SelectableItemState<T> = {
+    collection: () => state().collection as unknown as Collection<T>,
+    isFocused: () => state().isFocused,
+    setFocused: (focused: boolean) => state().setFocused(focused),
+    focusedKey: () => state().focusedKey,
+    childFocusStrategy: () => state().childFocusStrategy,
+    setFocusedKey: (key: Key | null, strategy) => state().setFocusedKey(key, strategy),
+    selectionMode: () => state().selectionMode,
+    selectionBehavior: () => props().selectionBehavior ?? state().selectionBehavior,
+    disallowEmptySelection: () => state().disallowEmptySelection,
+    selectedKeys: () => state().selectedKeys as Selection,
+    disabledKeys: () => state().disabledKeys,
+    disabledBehavior: () => state().disabledBehavior,
+    isEmpty: () => {
+      const keys = state().selectedKeys;
+      return keys !== "all" && keys.size === 0;
+    },
+    isSelectAll: () => state().selectedKeys === "all",
+    isSelected: (key: Key) => state().isSelected(key),
+    isDisabled: (key: Key) => {
+      const s = state();
+      const item = s.collection.getItem(key);
+      return (
+        s.disabledBehavior === "all" &&
+        s.isDisabled(key) &&
+        item?.props?.disabledBehavior !== "selection"
+      );
+    },
+    canSelectItem: (key: Key) => {
+      const s = state();
+      return s.selectionMode !== "none" && !s.isDisabled(key);
+    },
+    setSelectionBehavior: (behavior) => state().setSelectionBehavior(behavior),
+    toggleSelection: (key: Key) => state().toggleSelection(key),
+    replaceSelection: (key: Key) => state().replaceSelection(key),
+    setSelectedKeys: (keys: Iterable<Key>) => state().setSelectedKeys(keys),
+    selectAll: () => state().selectAll(),
+    clearSelection: () => state().clearSelection(),
+    toggleSelectAll: () => state().toggleSelectAll(),
+    extendSelection: (toKey: Key, _collection: Collection<T>) => state().extendSelection(toKey),
   };
 
-  const onKeyDown = (e: KeyboardEvent) => {
-    const s = state();
-    const p = props();
-
-    if (isDisabled()) return;
-
-    if (e.key === 'Enter') {
-      // Get grid list metadata for actions
+  const selectableItem = createSelectableItem<T>(
+    () => {
+      const s = state();
+      const p = props();
       const gridListData = getGridListData(s);
       const onAction = gridListData?.actions.onAction;
 
-      if (onAction || p.onAction) {
-        e.preventDefault();
-
-        if (onAction) {
-          onAction(p.node.key);
-        }
-
-        if (p.onAction) {
-          p.onAction();
-        }
-      }
-    } else if (e.key === ' ' || e.key === 'Space' || e.key === 'Spacebar') {
-      // Space toggles selection
-      if (s.selectionMode !== 'none') {
-        e.preventDefault();
-        s.toggleSelection(p.node.key);
-      }
-    }
-  };
-
-  const onFocus = () => {
-    const s = state();
-    const p = props();
-    s.setFocusedKey(p.node.key);
-  };
-
-  const onPointerDown = () => {
-    setIsPressed(true);
-  };
-
-  const onPointerUp = () => {
-    setIsPressed(false);
-  };
+      return {
+        key: p.node.key,
+        id: `${gridListData?.gridListId ?? "gridlist"}-row-${String(p.node.key)}`,
+        isVirtualized: p.isVirtualized,
+        shouldSelectOnPressUp: gridListData?.shouldSelectOnPressUp ?? false,
+        onAction:
+          onAction || p.onAction
+            ? () => {
+                p.onAction?.();
+                onAction?.(p.node.key);
+              }
+            : undefined,
+      };
+    },
+    selectableState,
+    ref,
+  );
 
   const rowProps = createMemo(() => {
     const s = state();
@@ -135,28 +108,32 @@ export function createGridListItem<T extends object, C extends GridCollection<T>
     const node = p.node;
 
     const baseProps: Record<string, unknown> = {
-      role: 'row',
-      'aria-selected': s.selectionMode !== 'none' ? isSelected() : undefined,
-      'aria-disabled': isDisabled() || undefined,
-      tabIndex: isFocused() ? 0 : -1,
-      onClick,
-      onKeyDown,
-      onFocus,
-      onPointerDown,
-      onPointerUp,
+      role: "row",
+      "aria-selected": s.selectionMode !== "none" ? isSelected() : undefined,
+      "aria-disabled": selectableItem.isDisabled() || undefined,
     };
 
     // Add aria-rowindex for virtualized lists
     if (p.isVirtualized && node.rowIndex != null) {
-      baseProps['aria-rowindex'] = node.rowIndex + 1; // 1-based
+      baseProps["aria-rowindex"] = node.rowIndex + 1; // 1-based
     }
 
-    return baseProps as JSX.HTMLAttributes<HTMLLIElement>;
+    const gridListData = getGridListData(s);
+    const mergedProps = mergeProps<JSX.HTMLAttributes<HTMLElement>>(
+      selectableItem.itemProps,
+      baseProps,
+    );
+
+    return mergeCollectionRowInteractionProps(mergedProps, {
+      ref,
+      keyboardNavigationBehavior: () => gridListData?.keyboardNavigationBehavior ?? "arrow",
+      direction: () => gridListData?.direction ?? "ltr",
+    });
   });
 
   const gridCellProps = createMemo(() => {
     return {
-      role: 'gridcell',
+      role: "gridcell",
     } as JSX.HTMLAttributes<HTMLDivElement>;
   });
 
@@ -171,10 +148,10 @@ export function createGridListItem<T extends object, C extends GridCollection<T>
       return isSelected();
     },
     get isDisabled() {
-      return isDisabled();
+      return selectableItem.isDisabled();
     },
     get isPressed() {
-      return isPressed();
+      return selectableItem.isPressed();
     },
   };
 }

package/src/gridlist/createGridListSection.ts

@@ -0,0 +1,54 @@
+/**
+ * createGridListSection - Provides accessibility for a grid list section.
+ * Based on @react-aria/gridlist/useGridListSection.
+ */
+
+import { createMemo } from "solid-js";
+import { createId, createSlotId } from "../ssr";
+import { createLabels } from "../label/createLabels";
+import type { AriaGridListSectionProps, GridListSectionAria } from "./types";
+
+/**
+ * Creates accessibility props for a grid list section.
+ *
+ * Mirrors upstream `useGridListSection`: a section is a `role="rowgroup"`
+ * wrapper whose optional header renders as `role="row"` › `role="rowheader"`.
+ * The `aria-labelledby` of the wrapper points at the header's id via a slot id
+ * that resolves to `undefined` when no header is rendered.
+ */
+export function createGridListSection(props: AriaGridListSectionProps): GridListSectionAria {
+  const headingId = createSlotId();
+  // Stable id for the rowgroup so `createLabels` does not regenerate one each
+  // time the slot id resolves (it short-circuits on a provided id).
+  const rowGroupId = createId();
+
+  const labelProps = createMemo(() =>
+    createLabels({
+      id: rowGroupId,
+      "aria-label": props["aria-label"],
+      "aria-labelledby": headingId(),
+    }),
+  );
+
+  return {
+    rowProps: { role: "row" },
+    rowHeaderProps: {
+      get id() {
+        return headingId();
+      },
+      role: "rowheader",
+    },
+    rowGroupProps: {
+      role: "rowgroup",
+      get id() {
+        return labelProps().id;
+      },
+      get "aria-label"() {
+        return labelProps()["aria-label"];
+      },
+      get "aria-labelledby"() {
+        return labelProps()["aria-labelledby"];
+      },
+    },
+  };
+}