@proyecto-viviana/solidaria 0.1.3 → 0.2.0

package/src/grid/createGridCell.ts

@@ -1,182 +0,0 @@
-/**
- * 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

@@ -1,153 +0,0 @@
-/**
- * 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

@@ -1,18 +0,0 @@
-/**
- * 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

@@ -1,133 +0,0 @@
-/**
- * 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

@@ -1,185 +0,0 @@
-/**
- * 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();
-    },
-  };
-}