@proyecto-viviana/solidaria 0.2.2 → 0.2.3

package/src/grid/createGridCell.ts

@@ -0,0 +1,182 @@
+/**
+ * createGridCell - Provides accessibility for a grid cell.
+ * Based on @react-aria/grid/useGridCell.
+ */
+
+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 { GridCellProps, GridCellAria } from './types';
+import { getGridData } from './createGrid';
+
+/**
+ * Creates accessibility props for a grid cell.
+ */
+export function createGridCell<T extends object>(
+  props: Accessor<GridCellProps>,
+  state: Accessor<GridState<T, GridCollection<T>>>,
+  _ref: Accessor<HTMLElement | null>
+): GridCellAria {
+  const [isPressed, setIsPressed] = createSignal(false);
+
+  const isSelected = createMemo(() => {
+    const s = state();
+    const p = props();
+    // Check if parent row is selected
+    const node = s.collection.getItem(p.key);
+    if (node?.parentKey != null) {
+      return s.isSelected(node.parentKey);
+    }
+    return false;
+  });
+
+  const isDisabled = createMemo(() => {
+    const s = state();
+    const p = props();
+    // Check if parent row is disabled
+    const node = s.collection.getItem(p.key);
+    if (node?.parentKey != null) {
+      return s.isDisabled(node.parentKey);
+    }
+    return false;
+  });
+
+  const isFocused = createMemo(() => {
+    const s = state();
+    const p = props();
+    return s.focusedKey === p.key;
+  });
+
+  // Handle click/press for cell actions
+  const onClick = (e: MouseEvent) => {
+    const s = state();
+    const p = props();
+
+    if (isDisabled()) return;
+
+    // Get grid metadata for actions
+    const gridData = getGridData(s);
+    const onCellAction = gridData?.actions.onCellAction;
+
+    // Get parent row key for selection
+    const node = s.collection.getItem(p.key);
+    const rowKey = node?.parentKey;
+
+    // Handle selection on parent row
+    if (rowKey != null && s.selectionMode !== 'none') {
+      if (e.shiftKey && s.selectionMode === 'multiple') {
+        s.extendSelection(rowKey);
+      } else if (e.ctrlKey || e.metaKey) {
+        s.toggleSelection(rowKey);
+      } else {
+        // Replace selection
+        s.replaceSelection(rowKey);
+      }
+    }
+
+    // Call cell action handler
+    if (onCellAction) {
+      onCellAction(p.key);
+    }
+
+    if (p.onAction) {
+      p.onAction();
+    }
+  };
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    const s = state();
+    const p = props();
+
+    if (isDisabled()) return;
+
+    // Enter or Space triggers cell action
+    if (e.key === 'Enter' || e.key === ' ') {
+      // Only handle if there's an action to trigger
+      const gridData = getGridData(s);
+      const onCellAction = gridData?.actions.onCellAction;
+
+      if (onCellAction || p.onAction) {
+        e.preventDefault();
+
+        if (onCellAction) {
+          onCellAction(p.key);
+        }
+
+        if (p.onAction) {
+          p.onAction();
+        }
+      }
+    }
+  };
+
+  const onFocus = () => {
+    const s = state();
+    const p = props();
+    s.setFocusedKey(p.key);
+  };
+
+  const onPointerDown = () => {
+    setIsPressed(true);
+  };
+
+  const onPointerUp = () => {
+    setIsPressed(false);
+  };
+
+  const cellProps = createMemo(() => {
+    const s = state();
+    const p = props();
+    const node = s.collection.getItem(p.key);
+
+    // Determine the role based on node type
+    let role: string = 'gridcell';
+    if (node?.type === 'rowheader') {
+      role = 'rowheader';
+    } else if (node?.type === 'column') {
+      role = 'columnheader';
+    }
+
+    const baseProps: Record<string, unknown> = {
+      role,
+      'aria-disabled': isDisabled() || undefined,
+      'aria-selected': s.selectionMode !== 'none' ? isSelected() : undefined,
+      tabIndex: isFocused() ? 0 : -1,
+      onClick,
+      onKeyDown,
+      onFocus,
+      onPointerDown,
+      onPointerUp,
+    };
+
+    // Add column index for virtualized grids
+    if (p.isVirtualized && node?.column != null) {
+      baseProps['aria-colindex'] = node.column + 1; // aria-colindex is 1-based
+    }
+
+    // Add colspan if present
+    if (node?.colspan != null && node.colspan > 1) {
+      baseProps['aria-colspan'] = node.colspan;
+    }
+
+    return baseProps as JSX.HTMLAttributes<HTMLElement>;
+  });
+
+  return {
+    get cellProps() {
+      return cellProps();
+    },
+    get isSelected() {
+      return isSelected();
+    },
+    get isDisabled() {
+      return isDisabled();
+    },
+    get isPressed() {
+      return isPressed();
+    },
+    get isFocused() {
+      return isFocused();
+    },
+  };
+}

package/src/grid/createGridRow.ts

@@ -0,0 +1,153 @@
+/**
+ * createGridRow - Provides accessibility for a grid row.
+ * Based on @react-aria/grid/useGridRow.
+ */
+
+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 { GridRowProps, GridRowAria } from './types';
+import { getGridData } from './createGrid';
+
+/**
+ * Creates accessibility props for a grid row.
+ */
+export function createGridRow<T extends object>(
+  props: Accessor<GridRowProps>,
+  state: Accessor<GridState<T, GridCollection<T>>>,
+  _ref: Accessor<HTMLElement | null>
+): GridRowAria {
+  const [isPressed, setIsPressed] = createSignal(false);
+
+  const isSelected = createMemo(() => {
+    const s = state();
+    const p = props();
+    return s.isSelected(p.key);
+  });
+
+  const isDisabled = createMemo(() => {
+    const s = state();
+    const p = props();
+    return s.isDisabled(p.key);
+  });
+
+  const isFocused = createMemo(() => {
+    const s = state();
+    const p = props();
+    return s.focusedKey === p.key;
+  });
+
+  // Handle click/press for selection
+  const onClick = (e: MouseEvent) => {
+    const s = state();
+    const p = props();
+
+    if (isDisabled()) return;
+
+    // Get grid metadata for actions
+    const gridData = getGridData(s);
+    const onRowAction = gridData?.actions.onRowAction;
+
+    // Handle selection
+    if (s.selectionMode !== 'none') {
+      if (e.shiftKey && s.selectionMode === 'multiple') {
+        s.extendSelection(p.key);
+      } else if (e.ctrlKey || e.metaKey) {
+        s.toggleSelection(p.key);
+      } else {
+        // Replace selection
+        s.replaceSelection(p.key);
+      }
+    }
+
+    // Call action handler
+    if (onRowAction) {
+      onRowAction(p.key);
+    }
+
+    if (p.onAction) {
+      p.onAction();
+    }
+  };
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    const s = state();
+    const p = props();
+
+    if (isDisabled()) return;
+
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+
+      // Get grid metadata for actions
+      const gridData = getGridData(s);
+      const onRowAction = gridData?.actions.onRowAction;
+
+      // Handle selection
+      if (s.selectionMode !== 'none') {
+        s.toggleSelection(p.key);
+      }
+
+      // Call action handler
+      if (onRowAction) {
+        onRowAction(p.key);
+      }
+
+      if (p.onAction) {
+        p.onAction();
+      }
+    }
+  };
+
+  const onFocus = () => {
+    const s = state();
+    const p = props();
+    s.setFocusedKey(p.key);
+  };
+
+  const onPointerDown = () => {
+    setIsPressed(true);
+  };
+
+  const onPointerUp = () => {
+    setIsPressed(false);
+  };
+
+  const rowProps = createMemo(() => {
+    const s = state();
+    const p = props();
+
+    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,
+    };
+
+    if (p.isVirtualized && p.index != null) {
+      baseProps['aria-rowindex'] = p.index + 1; // aria-rowindex is 1-based
+    }
+
+    return baseProps as JSX.HTMLAttributes<HTMLElement>;
+  });
+
+  return {
+    get rowProps() {
+      return rowProps();
+    },
+    get isSelected() {
+      return isSelected();
+    },
+    get isDisabled() {
+      return isDisabled();
+    },
+    get isPressed() {
+      return isPressed();
+    },
+  };
+}

package/src/grid/index.ts

@@ -0,0 +1,18 @@
+/**
+ * Grid accessibility primitives for Table and GridList components.
+ * Based on @react-aria/grid.
+ */
+
+export { createGrid, getGridData } from './createGrid';
+export { createGridRow } from './createGridRow';
+export { createGridCell } from './createGridCell';
+export { GridKeyboardDelegate } from './GridKeyboardDelegate';
+export type {
+  KeyboardDelegate,
+  GridProps,
+  GridAria,
+  GridRowProps,
+  GridRowAria,
+  GridCellProps,
+  GridCellAria,
+} from './types';

package/src/grid/types.ts

@@ -0,0 +1,133 @@
+/**
+ * Grid ARIA types for Table and GridList components.
+ * Based on @react-aria/grid types.
+ */
+
+import type { JSX } from 'solid-js';
+import type { Key } from '@proyecto-viviana/solid-stately';
+
+/**
+ * Keyboard delegate interface for grid navigation.
+ */
+export interface KeyboardDelegate {
+  /** Get the key above the given key. */
+  getKeyAbove?(key: Key): Key | null;
+  /** Get the key below the given key. */
+  getKeyBelow?(key: Key): Key | null;
+  /** Get the key to the left of the given key. */
+  getKeyLeftOf?(key: Key): Key | null;
+  /** Get the key to the right of the given key. */
+  getKeyRightOf?(key: Key): Key | null;
+  /** Get the first key in the collection. */
+  getFirstKey?(key?: Key, global?: boolean): Key | null;
+  /** Get the last key in the collection. */
+  getLastKey?(key?: Key, global?: boolean): Key | null;
+  /** Get the key for a page up action. */
+  getKeyPageAbove?(key: Key): Key | null;
+  /** Get the key for a page down action. */
+  getKeyPageBelow?(key: Key): Key | null;
+  /** Get the key that matches the search string. */
+  getKeyForSearch?(search: string, fromKey?: Key): Key | null;
+}
+
+/**
+ * Props for the createGrid hook.
+ */
+export interface GridProps {
+  /** ID for the grid element. */
+  id?: string;
+  /** Whether the grid uses virtual scrolling. */
+  isVirtualized?: boolean;
+  /** Whether typeahead navigation is disabled. */
+  disallowTypeAhead?: boolean;
+  /** Custom keyboard delegate for navigation. */
+  keyboardDelegate?: KeyboardDelegate;
+  /** Whether focus should be on row or cell. */
+  focusMode?: 'row' | 'cell';
+  /** Handler for row actions. */
+  onRowAction?: (key: Key) => void;
+  /** Handler for cell actions. */
+  onCellAction?: (key: Key) => void;
+  /** Escape key behavior. */
+  escapeKeyBehavior?: 'clearSelection' | 'none';
+  /** Whether selection should occur on press up. */
+  shouldSelectOnPressUp?: boolean;
+  /** ARIA label for the grid. */
+  'aria-label'?: string;
+  /** ARIA labelledby for the grid. */
+  'aria-labelledby'?: string;
+  /** ARIA describedby for the grid. */
+  'aria-describedby'?: string;
+}
+
+/**
+ * Return value from createGrid.
+ */
+export interface GridAria {
+  /** Props to spread on the grid element. */
+  gridProps: JSX.HTMLAttributes<HTMLElement>;
+}
+
+/**
+ * Props for the createGridRow hook.
+ */
+export interface GridRowProps {
+  /** The key of the row. */
+  key: Key;
+  /** The index of the row (for virtualized grids). */
+  index?: number;
+  /** Whether the grid is virtualized. */
+  isVirtualized?: boolean;
+  /** Handler for row action. */
+  onAction?: () => void;
+}
+
+/**
+ * Return value from createGridRow.
+ */
+export interface GridRowAria {
+  /** Props to spread on the row element. */
+  rowProps: JSX.HTMLAttributes<HTMLElement>;
+  /** Whether the row is selected. */
+  isSelected: boolean;
+  /** Whether the row is disabled. */
+  isDisabled: boolean;
+  /** Whether the row is pressed. */
+  isPressed: boolean;
+}
+
+/**
+ * Props for the createGridCell hook.
+ */
+export interface GridCellProps {
+  /** The key of the cell. */
+  key: Key;
+  /** The key of the parent row. */
+  parentKey: Key;
+  /** The column index of the cell. */
+  colIndex?: number;
+  /** Column span. */
+  colSpan?: number;
+  /** Whether the grid is virtualized. */
+  isVirtualized?: boolean;
+  /** Whether to focus cell or child element. */
+  focusMode?: 'child' | 'cell';
+  /** Handler for cell action. */
+  onAction?: () => void;
+}
+
+/**
+ * Return value from createGridCell.
+ */
+export interface GridCellAria {
+  /** Props to spread on the cell element. */
+  cellProps: JSX.HTMLAttributes<HTMLElement>;
+  /** Whether the cell's row is selected. */
+  isSelected: boolean;
+  /** Whether the cell's row is disabled. */
+  isDisabled: boolean;
+  /** Whether the cell is pressed. */
+  isPressed: boolean;
+  /** Whether the cell is focused. */
+  isFocused: boolean;
+}

package/src/gridlist/createGridList.ts

@@ -0,0 +1,185 @@
+/**
+ * createGridList - Provides accessibility for a grid list.
+ * 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';
+
+/**
+ * Metadata stored for a grid list instance.
+ */
+interface GridListData {
+  /** The generated ID for the grid list. */
+  gridListId: string;
+  /** Actions registered for the grid list. */
+  actions: {
+    onAction?: (key: Key) => void;
+  };
+}
+
+/**
+ * WeakMap to store grid list data for child components to access.
+ */
+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>
+): GridListData | undefined {
+  return gridListDataMap.get(state);
+}
+
+/**
+ * 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>
+): GridListAria {
+  // Generate a unique ID for the grid list
+  const gridListId = props().id ?? createId();
+
+  // Store grid list data for child components
+  const gridListData: GridListData = {
+    gridListId,
+    actions: {
+      get onAction() {
+        return props().onAction;
+      },
+    },
+  };
+
+  // Store in WeakMap using the state as key
+  gridListDataMap.set(state(), gridListData);
+
+  // Handle keyboard navigation
+  const onKeyDown = (e: KeyboardEvent) => {
+    const s = state();
+    const p = props();
+    const collection = s.collection;
+    const focusedKey = s.focusedKey;
+
+    if (p.isDisabled) return;
+
+    switch (e.key) {
+      case 'ArrowDown': {
+        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);
+          }
+        }
+        break;
+      }
+      case 'ArrowUp': {
+        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);
+          }
+        }
+        break;
+      }
+      case 'Home': {
+        e.preventDefault();
+        const firstKey = collection.getFirstKey();
+        if (firstKey != null) {
+          s.setFocusedKey(firstKey);
+        }
+        break;
+      }
+      case 'End': {
+        e.preventDefault();
+        const lastKey = collection.getLastKey();
+        if (lastKey != null) {
+          s.setFocusedKey(lastKey);
+        }
+        break;
+      }
+      case 'a':
+      case 'A': {
+        if ((e.ctrlKey || e.metaKey) && s.selectionMode === 'multiple') {
+          e.preventDefault();
+          s.selectAll();
+        }
+        break;
+      }
+      case 'Escape': {
+        if (s.selectionMode !== 'none') {
+          e.preventDefault();
+          s.clearSelection();
+        }
+        break;
+      }
+    }
+  };
+
+  const onFocus = () => {
+    const s = state();
+    s.setFocused(true);
+
+    // If nothing is focused, focus the first item
+    if (s.focusedKey == null) {
+      const firstKey = s.collection.getFirstKey();
+      if (firstKey != null) {
+        s.setFocusedKey(firstKey);
+      }
+    }
+  };
+
+  const onBlur = () => {
+    const s = state();
+    s.setFocused(false);
+  };
+
+  const gridProps = createMemo(() => {
+    const p = props();
+    const s = state();
+
+    const baseProps: Record<string, unknown> = {
+      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,
+      tabIndex: p.isDisabled ? undefined : 0,
+      onKeyDown,
+      onFocus,
+      onBlur,
+    };
+
+    // Add row count for virtualized lists
+    if (p.isVirtualized) {
+      baseProps['aria-rowcount'] = s.collection.rowCount;
+    }
+
+    return baseProps as JSX.HTMLAttributes<HTMLUListElement>;
+  });
+
+  return {
+    get gridProps() {
+      return gridProps();
+    },
+  };
+}