@proyecto-viviana/solidaria 0.2.8 → 0.3.0

package/src/table/createTable.ts

@@ -3,13 +3,13 @@
  * Based on @react-aria/table/useTable.
  */
 
-import { createMemo, createEffect, on, type Accessor } from 'solid-js';
-import type { JSX } from 'solid-js';
-import { createId } from '@proyecto-viviana/solid-stately';
-import type { TableState, TableCollection, Key, GridNode } from '@proyecto-viviana/solid-stately';
-import type { AriaTableProps, TableAria } from './types';
-import { useLocale } from '../i18n';
-import { announce } from '../live-announcer';
+import { createMemo, createEffect, on, type Accessor } from "solid-js";
+import type { JSX } from "solid-js";
+import { createId } from "@proyecto-viviana/solid-stately";
+import type { TableState, TableCollection, Key, GridNode } from "@proyecto-viviana/solid-stately";
+import type { AriaTableProps, TableAria } from "./types";
+import { useLocale } from "../i18n";
+import { announce } from "../live-announcer";
 
 // Global map to store table metadata for child components
 const tableMap = new WeakMap<
@@ -18,7 +18,7 @@ const tableMap = new WeakMap<
     tableId: string;
     actions: { onRowAction?: (key: Key) => void; onCellAction?: (key: Key) => void };
     shouldSelectOnPressUp?: boolean;
-    focusMode?: 'row' | 'cell';
+    focusMode?: "row" | "cell";
   }
 >();
 
@@ -34,13 +34,17 @@ export function getTableData<T>(state: TableState<T, TableCollection<T>>) {
  */
 function getChildCells<T>(collection: TableCollection<T>, rowKey: Key): GridNode<T>[] {
   const children = collection.getChildren(rowKey);
-  return [...children].filter(node => node.type === 'cell' || node.type === 'rowheader');
+  return [...children].filter((node) => node.type === "cell" || node.type === "rowheader");
 }
 
 /**
  * Helper to get cell at specific index in a row
  */
-function getCellAtIndex<T>(collection: TableCollection<T>, rowKey: Key, index: number): GridNode<T> | null {
+function getCellAtIndex<T>(
+  collection: TableCollection<T>,
+  rowKey: Key,
+  index: number,
+): GridNode<T> | null {
   const cells = getChildCells(collection, rowKey);
   return cells[index] ?? null;
 }
@@ -49,14 +53,21 @@ function getCellAtIndex<T>(collection: TableCollection<T>, rowKey: Key, index: n
  * Helper to check if a node is a cell
  */
 function isCell<T>(node: GridNode<T> | null): boolean {
-  return node?.type === 'cell' || node?.type === 'rowheader';
+  return node?.type === "cell" || node?.type === "rowheader";
 }
 
 /**
  * Helper to check if a node is a row
  */
 function isRow<T>(node: GridNode<T> | null): boolean {
-  return node?.type === 'item';
+  return node?.type === "item";
+}
+
+function focusCurrentElement(el: HTMLElement | null | undefined) {
+  const target = el?.querySelector<HTMLElement>(
+    '[role="row"][tabindex="0"], [role="rowheader"][tabindex="0"], [role="gridcell"][tabindex="0"], [role="columnheader"][tabindex="0"]',
+  );
+  target?.focus();
 }
 
 /**
@@ -65,14 +76,16 @@ function isRow<T>(node: GridNode<T> | null): boolean {
 export function createTable<T extends object>(
   props: Accessor<AriaTableProps>,
   state: Accessor<TableState<T, TableCollection<T>>>,
-  ref: Accessor<HTMLTableElement | null>
+  ref: Accessor<HTMLTableElement | null>,
 ): TableAria {
   const id = createId(props().id);
   const locale = useLocale();
 
   // Track previous sort descriptor for announcements
-  let prevSortDescriptor: { column: Key; direction: 'ascending' | 'descending' } | null = null;
+  let prevSortDescriptor: { column: Key; direction: "ascending" | "descending" } | null = null;
   let isFirstRender = true;
+  let typeaheadBuffer = "";
+  let typeaheadTimeout: ReturnType<typeof setTimeout> | undefined;
 
   // Store metadata for child components
   const storeTableData = () => {
@@ -95,38 +108,83 @@ export function createTable<T extends object>(
   });
 
   // Announce sort changes (only after initial render)
-  createEffect(on(
-    () => state().sortDescriptor,
-    (sortDescriptor) => {
-      if (isFirstRender) {
-        isFirstRender = false;
-        prevSortDescriptor = sortDescriptor;
-        return;
-      }
-
-      if (sortDescriptor && (
-        sortDescriptor.column !== prevSortDescriptor?.column ||
-        sortDescriptor.direction !== prevSortDescriptor?.direction
-      )) {
-        const collection = state().collection;
-        const column = collection.columns.find(c => c.key === sortDescriptor.column);
-        const columnName = column?.textValue ?? String(sortDescriptor.column);
-        const directionText = sortDescriptor.direction === 'ascending' ? 'ascending' : 'descending';
+  createEffect(
+    on(
+      () => state().sortDescriptor,
+      (sortDescriptor) => {
+        if (isFirstRender) {
+          isFirstRender = false;
+          prevSortDescriptor = sortDescriptor;
+          return;
+        }
 
-        announce(`Sorted by ${columnName}, ${directionText}`, 'assertive', 500);
-      }
+        if (
+          sortDescriptor &&
+          (sortDescriptor.column !== prevSortDescriptor?.column ||
+            sortDescriptor.direction !== prevSortDescriptor?.direction)
+        ) {
+          const collection = state().collection;
+          const column = collection.columns.find((c) => c.key === sortDescriptor.column);
+          const columnName = column?.textValue ?? String(sortDescriptor.column);
+          const directionText =
+            sortDescriptor.direction === "ascending" ? "ascending" : "descending";
+
+          announce(`Sorted by ${columnName}, ${directionText}`, "assertive", 500);
+        }
 
-      prevSortDescriptor = sortDescriptor;
-    }
-  ));
+        prevSortDescriptor = sortDescriptor;
+      },
+    ),
+  );
 
   // Keyboard navigation handler with full 2D navigation
   const onKeyDown = (e: KeyboardEvent) => {
     const s = state();
     const collection = s.collection;
     const p = props();
-    const focusMode = p.focusMode ?? 'row';
-    const isRTL = locale().direction === 'rtl';
+    const focusMode = p.focusMode ?? "row";
+    const isRTL = locale().direction === "rtl";
+    const setFocusedKey = (key: Key) => {
+      s.setFocusedKey(key);
+      queueMicrotask(() => focusCurrentElement(ref()));
+    };
+    const runTypeahead = (focusedKey: Key, focusedItem: GridNode<T>) => {
+      if (e.key.length !== 1 || e.ctrlKey || e.metaKey || e.altKey) {
+        return false;
+      }
+
+      typeaheadBuffer += e.key.toLocaleLowerCase();
+      if (typeaheadTimeout) {
+        clearTimeout(typeaheadTimeout);
+      }
+      typeaheadTimeout = setTimeout(() => {
+        typeaheadBuffer = "";
+        typeaheadTimeout = undefined;
+      }, 500);
+
+      const rows = Array.from(collection).filter((node) => !s.isDisabled(node.key));
+      if (rows.length === 0) {
+        return true;
+      }
+
+      const currentRowKey =
+        isCell(focusedItem) && focusedItem.parentKey != null ? focusedItem.parentKey : focusedKey;
+      const currentIndex = rows.findIndex((node) => node.key === currentRowKey);
+      const orderedRows =
+        currentIndex >= 0
+          ? [...rows.slice(currentIndex + 1), ...rows.slice(0, currentIndex + 1)]
+          : rows;
+      const match = orderedRows.find((node) =>
+        collection.getTextValue(node.key).toLocaleLowerCase().startsWith(typeaheadBuffer),
+      );
+
+      if (match) {
+        e.preventDefault();
+        setFocusedKey(match.key);
+      }
+
+      return true;
+    };
 
     if (s.isKeyboardNavigationDisabled) {
       return;
@@ -135,11 +193,11 @@ export function createTable<T extends object>(
     const focusedKey = s.focusedKey;
     if (focusedKey == null) {
       // If nothing is focused, focus the first item
-      if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Home' || e.key === 'End') {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Home" || e.key === "End") {
         const firstKey = collection.getFirstKey();
         if (firstKey != null) {
           e.preventDefault();
-          s.setFocusedKey(firstKey);
+          setFocusedKey(firstKey);
         }
       }
       return;
@@ -151,7 +209,7 @@ export function createTable<T extends object>(
     let nextKey: Key | null = null;
 
     switch (e.key) {
-      case 'ArrowDown': {
+      case "ArrowDown": {
         e.preventDefault();
         // If focused on a cell, move to the same column in the next row
         if (isCell(focusedItem) && focusedItem.parentKey != null) {
@@ -168,7 +226,7 @@ export function createTable<T extends object>(
         break;
       }
 
-      case 'ArrowUp': {
+      case "ArrowUp": {
         e.preventDefault();
         // If focused on a cell, move to the same column in the previous row
         if (isCell(focusedItem) && focusedItem.parentKey != null) {
@@ -185,7 +243,7 @@ export function createTable<T extends object>(
         break;
       }
 
-      case 'ArrowRight': {
+      case "ArrowRight": {
         e.preventDefault();
         const goNext = !isRTL;
 
@@ -203,7 +261,7 @@ export function createTable<T extends object>(
 
           if (targetIndex >= 0 && targetIndex < cells.length) {
             nextKey = cells[targetIndex].key;
-          } else if (focusMode === 'row') {
+          } else if (focusMode === "row") {
             // Wrap to row
             nextKey = focusedItem.parentKey;
           } else {
@@ -214,7 +272,7 @@ export function createTable<T extends object>(
         break;
       }
 
-      case 'ArrowLeft': {
+      case "ArrowLeft": {
         e.preventDefault();
         const goNext = isRTL;
 
@@ -232,7 +290,7 @@ export function createTable<T extends object>(
 
           if (targetIndex >= 0 && targetIndex < cells.length) {
             nextKey = cells[targetIndex].key;
-          } else if (focusMode === 'row') {
+          } else if (focusMode === "row") {
             // Wrap to row
             nextKey = focusedItem.parentKey;
           } else {
@@ -243,13 +301,13 @@ export function createTable<T extends object>(
         break;
       }
 
-      case 'Home': {
+      case "Home": {
         e.preventDefault();
         if (e.ctrlKey) {
           // Ctrl+Home: Go to first row/cell
           const firstRowKey = collection.getFirstKey();
           if (firstRowKey != null) {
-            if (isCell(focusedItem) || focusMode === 'cell') {
+            if (isCell(focusedItem) || focusMode === "cell") {
               const cells = getChildCells(collection, firstRowKey);
               nextKey = cells[0]?.key ?? firstRowKey;
             } else {
@@ -267,13 +325,13 @@ export function createTable<T extends object>(
         break;
       }
 
-      case 'End': {
+      case "End": {
         e.preventDefault();
         if (e.ctrlKey) {
           // Ctrl+End: Go to last row/cell
           const lastRowKey = collection.getLastKey();
           if (lastRowKey != null) {
-            if (isCell(focusedItem) || focusMode === 'cell') {
+            if (isCell(focusedItem) || focusMode === "cell") {
               const cells = getChildCells(collection, lastRowKey);
               nextKey = cells[cells.length - 1]?.key ?? lastRowKey;
             } else {
@@ -291,11 +349,11 @@ export function createTable<T extends object>(
         break;
       }
 
-      case 'PageDown': {
+      case "PageDown": {
         e.preventDefault();
         // Move down by roughly a page (using DOM measurements if available)
         const el = ref();
-        if (el) {
+        if (el && el.clientHeight > 0) {
           const visibleHeight = el.clientHeight;
           let currentKey: Key | null = focusedKey;
           let traveled = 0;
@@ -329,9 +387,10 @@ export function createTable<T extends object>(
         } else {
           // Fallback: move 10 rows
           let count = 10;
-          let current: Key | null = isCell(focusedItem) && focusedItem.parentKey != null
-            ? focusedItem.parentKey
-            : focusedKey;
+          let current: Key | null =
+            isCell(focusedItem) && focusedItem.parentKey != null
+              ? focusedItem.parentKey
+              : focusedKey;
           while (count > 0 && current != null) {
             const next = collection.getKeyAfter(current);
             if (next == null) break;
@@ -348,11 +407,11 @@ export function createTable<T extends object>(
         break;
       }
 
-      case 'PageUp': {
+      case "PageUp": {
         e.preventDefault();
         // Move up by roughly a page
         const el = ref();
-        if (el) {
+        if (el && el.clientHeight > 0) {
           const visibleHeight = el.clientHeight;
           let currentKey: Key | null = focusedKey;
           let traveled = 0;
@@ -384,9 +443,10 @@ export function createTable<T extends object>(
         } else {
           // Fallback: move 10 rows
           let count = 10;
-          let current: Key | null = isCell(focusedItem) && focusedItem.parentKey != null
-            ? focusedItem.parentKey
-            : focusedKey;
+          let current: Key | null =
+            isCell(focusedItem) && focusedItem.parentKey != null
+              ? focusedItem.parentKey
+              : focusedKey;
           while (count > 0 && current != null) {
             const prev = collection.getKeyBefore(current);
             if (prev == null) break;
@@ -403,30 +463,33 @@ export function createTable<T extends object>(
         break;
       }
 
-      case 'Escape':
-        s.clearSelection();
+      case "Escape":
+        if (p.escapeKeyBehavior !== "none") {
+          s.clearSelection();
+        }
         return;
 
-      case 'a':
+      case "a":
         if (e.ctrlKey || e.metaKey) {
           e.preventDefault();
-          if (s.selectionMode === 'multiple') {
+          if (s.selectionMode === "multiple") {
             s.selectAll();
           }
         }
         return;
 
-      case ' ':
-      case 'Enter':
+      case " ":
+      case "Enter":
         e.preventDefault();
         // Toggle selection or trigger action
-        if (s.selectionMode !== 'none') {
+        if (s.selectionMode !== "none") {
           // For cells, select the parent row
-          const keyToSelect = isCell(focusedItem) && focusedItem.parentKey != null
-            ? focusedItem.parentKey
-            : focusedKey;
+          const keyToSelect =
+            isCell(focusedItem) && focusedItem.parentKey != null
+              ? focusedItem.parentKey
+              : focusedKey;
 
-          if (e.shiftKey && s.selectionMode === 'multiple') {
+          if (e.shiftKey && s.selectionMode === "multiple") {
             s.extendSelection(keyToSelect);
           } else {
             s.toggleSelection(keyToSelect);
@@ -435,19 +498,23 @@ export function createTable<T extends object>(
         return;
 
       default:
+        if (runTypeahead(focusedKey, focusedItem)) {
+          return;
+        }
         return;
     }
 
     if (nextKey != null) {
-      s.setFocusedKey(nextKey);
+      setFocusedKey(nextKey);
 
       // Handle shift+arrow for range selection
-      if (e.shiftKey && s.selectionMode === 'multiple') {
+      if (e.shiftKey && s.selectionMode === "multiple") {
         // For cells, select the parent row
         const focusedNode = collection.getItem(nextKey);
-        const keyToSelect = focusedNode && isCell(focusedNode) && focusedNode.parentKey != null
-          ? focusedNode.parentKey
-          : nextKey;
+        const keyToSelect =
+          focusedNode && isCell(focusedNode) && focusedNode.parentKey != null
+            ? focusedNode.parentKey
+            : nextKey;
         s.extendSelection(keyToSelect);
       }
     }
@@ -488,8 +555,8 @@ export function createTable<T extends object>(
   // Warn if no label is provided
   createMemo(() => {
     const p = props();
-    if (!p['aria-label'] && !p['aria-labelledby']) {
-      console.warn('Table: An aria-label or aria-labelledby prop is required for accessibility.');
+    if (!p["aria-label"] && !p["aria-labelledby"]) {
+      console.warn("Table: An aria-label or aria-labelledby prop is required for accessibility.");
     }
   });
 
@@ -498,12 +565,12 @@ export function createTable<T extends object>(
     const s = state();
 
     const baseProps: Record<string, unknown> = {
-      role: 'grid',
+      role: "grid",
       id,
-      'aria-label': p['aria-label'],
-      'aria-labelledby': p['aria-labelledby'],
-      'aria-describedby': p['aria-describedby'],
-      'aria-multiselectable': s.selectionMode === 'multiple' ? 'true' : undefined,
+      "aria-label": p["aria-label"],
+      "aria-labelledby": p["aria-labelledby"],
+      "aria-describedby": p["aria-describedby"],
+      "aria-multiselectable": s.selectionMode === "multiple" ? "true" : undefined,
       // Keep the grid itself tabbable so keyboard users can enter
       // row/cell navigation without requiring a prior pointer interaction.
       tabIndex: 0,
@@ -513,8 +580,8 @@ export function createTable<T extends object>(
     };
 
     if (p.isVirtualized) {
-      baseProps['aria-rowcount'] = s.collection.rowCount;
-      baseProps['aria-colcount'] = s.collection.columnCount;
+      baseProps["aria-rowcount"] = s.collection.rowCount;
+      baseProps["aria-colcount"] = s.collection.columnCount;
     }
 
     return baseProps as JSX.HTMLAttributes<HTMLTableElement>;

package/src/table/createTableCell.ts

@@ -3,11 +3,11 @@
  * Based on @react-aria/table/useTableCell.
  */
 
-import { createMemo, createSignal, type Accessor } from 'solid-js';
-import type { JSX } from 'solid-js';
-import type { TableState, TableCollection } from '@proyecto-viviana/solid-stately';
-import type { AriaTableCellProps, TableCellAria } from './types';
-import { getTableData } from './createTable';
+import { createMemo, createSignal, type Accessor } from "solid-js";
+import type { JSX } from "solid-js";
+import type { TableState, TableCollection } from "@proyecto-viviana/solid-stately";
+import type { AriaTableCellProps, TableCellAria } from "./types";
+import { getTableData } from "./createTable";
 
 /**
  * Creates accessibility props for a table cell.
@@ -15,7 +15,7 @@ import { getTableData } from './createTable';
 export function createTableCell<T extends object>(
   props: Accessor<AriaTableCellProps>,
   state: Accessor<TableState<T, TableCollection<T>>>,
-  _ref: Accessor<HTMLTableCellElement | null>
+  _ref: Accessor<HTMLTableCellElement | null>,
 ): TableCellAria {
   const [isPressed, setIsPressed] = createSignal(false);
 
@@ -64,7 +64,7 @@ export function createTableCell<T extends object>(
     if (isDisabled()) return;
 
     // Enter triggers cell action
-    if (e.key === 'Enter') {
+    if (e.key === "Enter") {
       const tableData = getTableData(s);
       const onCellAction = tableData?.actions.onCellAction;
 
@@ -103,17 +103,18 @@ export function createTableCell<T extends object>(
     const tableData = getTableData(s);
 
     // Determine the role based on node type
-    let role: string = 'gridcell';
-    if (node.type === 'rowheader') {
-      role = 'rowheader';
+    let role: string = "gridcell";
+    if (node.type === "rowheader") {
+      role = "rowheader";
     }
 
     const baseProps: Record<string, unknown> = {
       role,
-      id: tableData && node.parentKey != null
-        ? `${tableData.tableId}-${node.parentKey}-${node.key}`
-        : undefined,
-      'aria-disabled': isDisabled() || undefined,
+      id:
+        tableData && node.parentKey != null
+          ? `${tableData.tableId}-${node.parentKey}-${node.key}`
+          : undefined,
+      "aria-disabled": isDisabled() || undefined,
       tabIndex: isFocused() ? 0 : -1,
       onClick,
       onKeyDown,
@@ -124,12 +125,12 @@ export function createTableCell<T extends object>(
 
     // Add aria-colindex for virtualized tables
     if (p.isVirtualized && node.column != null) {
-      baseProps['aria-colindex'] = node.column + 1; // 1-based
+      baseProps["aria-colindex"] = node.column + 1; // 1-based
     }
 
     // Add colspan if present
     if (node.colspan != null && node.colspan > 1) {
-      baseProps['aria-colspan'] = node.colspan;
+      baseProps["aria-colspan"] = node.colspan;
       baseProps.colSpan = node.colspan;
     }