@proyecto-viviana/solidaria 0.2.2 → 0.2.3

package/src/table/createTableCell.ts

@@ -0,0 +1,147 @@
+/**
+ * createTableCell - Provides accessibility for a table cell.
+ * 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';
+
+/**
+ * Creates accessibility props for a table cell.
+ */
+export function createTableCell<T extends object>(
+  props: Accessor<AriaTableCellProps>,
+  state: Accessor<TableState<T, TableCollection<T>>>,
+  _ref: Accessor<HTMLTableCellElement | null>
+): TableCellAria {
+  const [isPressed, setIsPressed] = createSignal(false);
+
+  const isDisabled = createMemo(() => {
+    const s = state();
+    const p = props();
+    // Check if parent row is disabled
+    const node = p.node;
+    if (node.parentKey != null) {
+      return s.isDisabled(node.parentKey);
+    }
+    return false;
+  });
+
+  const isFocused = createMemo(() => {
+    const s = state();
+    const p = props();
+    return s.focusedKey === p.node.key;
+  });
+
+  // Handle click for cell actions
+  const onClick = () => {
+    const s = state();
+    const p = props();
+
+    if (isDisabled()) return;
+
+    // Get table metadata for actions
+    const tableData = getTableData(s);
+    const onCellAction = tableData?.actions.onCellAction;
+
+    // Call cell action handler
+    if (onCellAction) {
+      onCellAction(p.node.key);
+    }
+
+    if (p.onAction) {
+      p.onAction();
+    }
+  };
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    const s = state();
+    const p = props();
+
+    if (isDisabled()) return;
+
+    // Enter triggers cell action
+    if (e.key === 'Enter') {
+      const tableData = getTableData(s);
+      const onCellAction = tableData?.actions.onCellAction;
+
+      if (onCellAction || p.onAction) {
+        e.preventDefault();
+
+        if (onCellAction) {
+          onCellAction(p.node.key);
+        }
+
+        if (p.onAction) {
+          p.onAction();
+        }
+      }
+    }
+  };
+
+  const onFocus = () => {
+    const s = state();
+    const p = props();
+    s.setFocusedKey(p.node.key);
+  };
+
+  const onPointerDown = () => {
+    setIsPressed(true);
+  };
+
+  const onPointerUp = () => {
+    setIsPressed(false);
+  };
+
+  const gridCellProps = createMemo(() => {
+    const s = state();
+    const p = props();
+    const node = p.node;
+    const tableData = getTableData(s);
+
+    // Determine the role based on node type
+    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,
+      tabIndex: isFocused() ? 0 : -1,
+      onClick,
+      onKeyDown,
+      onFocus,
+      onPointerDown,
+      onPointerUp,
+    };
+
+    // Add aria-colindex for virtualized tables
+    if (p.isVirtualized && node.column != null) {
+      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.colSpan = node.colspan;
+    }
+
+    return baseProps as JSX.HTMLAttributes<HTMLTableCellElement>;
+  });
+
+  return {
+    get gridCellProps() {
+      return gridCellProps();
+    },
+    get isPressed() {
+      return isPressed();
+    },
+  };
+}

package/src/table/createTableColumnHeader.ts

@@ -0,0 +1,115 @@
+/**
+ * createTableColumnHeader - Provides accessibility for a table column header.
+ * Based on @react-aria/table/useTableColumnHeader.
+ */
+
+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 { AriaTableColumnHeaderProps, TableColumnHeaderAria } from './types';
+import { getTableData } from './createTable';
+
+/**
+ * Creates accessibility props for a table column header.
+ */
+export function createTableColumnHeader<T extends object>(
+  props: Accessor<AriaTableColumnHeaderProps>,
+  state: Accessor<TableState<T, TableCollection<T>>>,
+  _ref: Accessor<HTMLTableCellElement | null>
+): TableColumnHeaderAria {
+  const [_isPressed, setIsPressed] = createSignal(false);
+
+  const isFocused = createMemo(() => {
+    const s = state();
+    const p = props();
+    return s.focusedKey === p.node.key;
+  });
+
+  // Handle click for sorting
+  const onClick = () => {
+    const s = state();
+    const p = props();
+
+    if (p.allowsSorting) {
+      s.sort(p.node.key);
+    }
+  };
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    const p = props();
+    const s = state();
+
+    if (p.allowsSorting && (e.key === 'Enter' || e.key === ' ')) {
+      e.preventDefault();
+      s.sort(p.node.key);
+    }
+  };
+
+  const onFocus = () => {
+    const s = state();
+    const p = props();
+    s.setFocusedKey(p.node.key);
+  };
+
+  const onPointerDown = () => {
+    setIsPressed(true);
+  };
+
+  const onPointerUp = () => {
+    setIsPressed(false);
+  };
+
+  const columnHeaderProps = createMemo(() => {
+    const s = state();
+    const p = props();
+    const node = p.node;
+    const tableData = getTableData(s);
+
+    // Determine sort state
+    let ariaSort: 'none' | 'ascending' | 'descending' | undefined = undefined;
+    if (p.allowsSorting) {
+      const sortDescriptor = s.sortDescriptor;
+      if (sortDescriptor?.column === node.key) {
+        ariaSort = sortDescriptor.direction;
+      } else {
+        ariaSort = 'none';
+      }
+    }
+
+    const baseProps: Record<string, unknown> = {
+      role: 'columnheader',
+      id: tableData ? `${tableData.tableId}-${node.key}` : undefined,
+      'aria-sort': ariaSort,
+      tabIndex: isFocused() ? 0 : -1,
+      onFocus,
+    };
+
+    // Add click handler if sortable
+    if (p.allowsSorting) {
+      baseProps.onClick = onClick;
+      baseProps.onKeyDown = onKeyDown;
+      baseProps.onPointerDown = onPointerDown;
+      baseProps.onPointerUp = onPointerUp;
+      baseProps.style = { cursor: 'pointer' };
+    }
+
+    // Add aria-colindex for virtualized tables
+    if (p.isVirtualized && node.column != null) {
+      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.colSpan = node.colspan;
+    }
+
+    return baseProps as JSX.HTMLAttributes<HTMLTableCellElement>;
+  });
+
+  return {
+    get columnHeaderProps() {
+      return columnHeaderProps();
+    },
+  };
+}

package/src/table/createTableHeaderRow.ts

@@ -0,0 +1,40 @@
+/**
+ * createTableHeaderRow - Provides accessibility for a table header row.
+ * Based on @react-aria/table/useTableHeaderRow.
+ */
+
+import { createMemo, type Accessor } from 'solid-js';
+import type { JSX } from 'solid-js';
+import type { TableState, TableCollection } from '@proyecto-viviana/solid-stately';
+import type { AriaTableHeaderRowProps, TableHeaderRowAria } from './types';
+
+/**
+ * Creates accessibility props for a table header row.
+ */
+export function createTableHeaderRow<T extends object>(
+  props: Accessor<AriaTableHeaderRowProps>,
+  _state: Accessor<TableState<T, TableCollection<T>>>,
+  _ref: Accessor<HTMLTableRowElement | null>
+): TableHeaderRowAria {
+  const rowProps = createMemo(() => {
+    const p = props();
+    const node = p.node;
+
+    const baseProps: Record<string, unknown> = {
+      role: 'row',
+    };
+
+    // Add aria-rowindex for virtualized tables
+    if (p.isVirtualized && node.rowIndex != null) {
+      baseProps['aria-rowindex'] = node.rowIndex + 1; // 1-based
+    }
+
+    return baseProps as JSX.HTMLAttributes<HTMLTableRowElement>;
+  });
+
+  return {
+    get rowProps() {
+      return rowProps();
+    },
+  };
+}

package/src/table/createTableRow.ts

@@ -0,0 +1,155 @@
+/**
+ * createTableRow - Provides accessibility for a table row.
+ * Based on @react-aria/table/useTableRow.
+ */
+
+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 { AriaTableRowProps, TableRowAria } from './types';
+import { getTableData } from './createTable';
+
+/**
+ * Creates accessibility props for a table row.
+ */
+export function createTableRow<T extends object>(
+  props: Accessor<AriaTableRowProps>,
+  state: Accessor<TableState<T, TableCollection<T>>>,
+  _ref: Accessor<HTMLTableRowElement | null>
+): TableRowAria {
+  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
+  const onClick = (e: MouseEvent) => {
+    const s = state();
+    const p = props();
+
+    if (isDisabled()) return;
+
+    // Get table metadata for actions
+    const tableData = getTableData(s);
+    const onRowAction = tableData?.actions.onRowAction;
+
+    // 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
+        s.replaceSelection(p.node.key);
+      }
+    }
+
+    // Call action handler
+    if (onRowAction) {
+      onRowAction(p.node.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 table metadata for actions
+      const tableData = getTableData(s);
+      const onRowAction = tableData?.actions.onRowAction;
+
+      // Handle selection
+      if (s.selectionMode !== 'none') {
+        s.toggleSelection(p.node.key);
+      }
+
+      // Call action handler
+      if (onRowAction) {
+        onRowAction(p.node.key);
+      }
+
+      if (p.onAction) {
+        p.onAction();
+      }
+    }
+  };
+
+  const onFocus = () => {
+    const s = state();
+    const p = props();
+    s.setFocusedKey(p.node.key);
+  };
+
+  const onPointerDown = () => {
+    setIsPressed(true);
+  };
+
+  const onPointerUp = () => {
+    setIsPressed(false);
+  };
+
+  const rowProps = createMemo(() => {
+    const s = state();
+    const p = props();
+    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,
+    };
+
+    // Add aria-rowindex for virtualized tables
+    if (p.isVirtualized && node.rowIndex != null) {
+      baseProps['aria-rowindex'] = node.rowIndex + 1; // 1-based
+    }
+
+    return baseProps as JSX.HTMLAttributes<HTMLTableRowElement>;
+  });
+
+  return {
+    get rowProps() {
+      return rowProps();
+    },
+    get isSelected() {
+      return isSelected();
+    },
+    get isDisabled() {
+      return isDisabled();
+    },
+    get isPressed() {
+      return isPressed();
+    },
+  };
+}

package/src/table/createTableRowGroup.ts

@@ -0,0 +1,32 @@
+/**
+ * createTableRowGroup - Provides accessibility for a table row group.
+ * Based on @react-aria/grid/useTableRowGroup.
+ */
+
+import { createMemo, type Accessor } from 'solid-js';
+import type { JSX } from 'solid-js';
+import type { AriaTableRowGroupProps, TableRowGroupAria } from './types';
+
+/**
+ * Creates accessibility props for a table row group (thead, tbody, tfoot).
+ */
+export function createTableRowGroup(
+  props: Accessor<AriaTableRowGroupProps>
+): TableRowGroupAria {
+  const rowGroupProps = createMemo(() => {
+    // Access props for reactivity tracking, even though not currently used
+    void props();
+
+    const baseProps: Record<string, unknown> = {
+      role: 'rowgroup',
+    };
+
+    return baseProps as JSX.HTMLAttributes<HTMLTableSectionElement>;
+  });
+
+  return {
+    get rowGroupProps() {
+      return rowGroupProps();
+    },
+  };
+}

package/src/table/createTableSelectAllCheckbox.ts

@@ -0,0 +1,73 @@
+/**
+ * createTableSelectAllCheckbox - Provides accessibility for a table select-all checkbox.
+ * Based on @react-aria/table/useTableSelectAllCheckbox.
+ */
+
+import { createMemo, type Accessor } from 'solid-js';
+import type { JSX } from 'solid-js';
+import type { TableState, TableCollection } from '@proyecto-viviana/solid-stately';
+import type { TableSelectAllCheckboxAria } from './types';
+
+/**
+ * Creates accessibility props for a table select-all checkbox.
+ */
+export function createTableSelectAllCheckbox<T extends object>(
+  state: Accessor<TableState<T, TableCollection<T>>>
+): TableSelectAllCheckboxAria {
+  const isSelectAll = createMemo(() => {
+    const s = state();
+    return s.selectedKeys === 'all';
+  });
+
+  const isEmpty = createMemo(() => {
+    const s = state();
+    return s.collection.size === 0;
+  });
+
+  const isIndeterminate = createMemo(() => {
+    const s = state();
+    const selectedKeys = s.selectedKeys;
+    if (selectedKeys === 'all') return false;
+    if (selectedKeys.size === 0) return false;
+    return selectedKeys.size < s.collection.size;
+  });
+
+  const isDisabled = createMemo(() => {
+    const s = state();
+    return s.selectionMode !== 'multiple' || isEmpty();
+  });
+
+  const onChange = () => {
+    const s = state();
+    if (!isDisabled()) {
+      s.toggleSelectAll();
+    }
+  };
+
+  const checkboxProps = createMemo(() => {
+    const s = state();
+
+    const baseProps: Record<string, unknown> = {
+      type: 'checkbox',
+      checked: isSelectAll(),
+      disabled: isDisabled(),
+      onChange,
+      'aria-label': s.selectionMode === 'single' ? 'Select' : 'Select all',
+    };
+
+    // Handle indeterminate state
+    // Note: indeterminate is not a standard HTML attribute, it must be set via JavaScript
+    // The component using this should handle this separately
+    if (isIndeterminate()) {
+      baseProps['data-indeterminate'] = 'true';
+    }
+
+    return baseProps as JSX.InputHTMLAttributes<HTMLInputElement>;
+  });
+
+  return {
+    get checkboxProps() {
+      return checkboxProps();
+    },
+  };
+}

package/src/table/createTableSelectionCheckbox.ts

@@ -0,0 +1,59 @@
+/**
+ * createTableSelectionCheckbox - Provides accessibility for a table row selection checkbox.
+ * Based on @react-aria/table/useTableSelectionCheckbox.
+ */
+
+import { createMemo, type Accessor } from 'solid-js';
+import type { JSX } from 'solid-js';
+import { createId } from '@proyecto-viviana/solid-stately';
+import type { TableState, TableCollection } from '@proyecto-viviana/solid-stately';
+import type { AriaTableSelectionCheckboxProps, TableSelectionCheckboxAria } from './types';
+
+/**
+ * Creates accessibility props for a table row selection checkbox.
+ */
+export function createTableSelectionCheckbox<T extends object>(
+  props: Accessor<AriaTableSelectionCheckboxProps>,
+  state: Accessor<TableState<T, TableCollection<T>>>
+): TableSelectionCheckboxAria {
+  const checkboxId = createId();
+
+  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 onChange = () => {
+    const s = state();
+    const p = props();
+    if (!isDisabled()) {
+      s.toggleSelection(p.key);
+    }
+  };
+
+  const checkboxProps = createMemo(() => {
+    const baseProps: Record<string, unknown> = {
+      id: checkboxId,
+      type: 'checkbox',
+      checked: isSelected(),
+      disabled: isDisabled(),
+      onChange,
+      'aria-label': 'Select',
+    };
+
+    return baseProps as JSX.InputHTMLAttributes<HTMLInputElement>;
+  });
+
+  return {
+    get checkboxProps() {
+      return checkboxProps();
+    },
+  };
+}

package/src/table/index.ts

@@ -0,0 +1,30 @@
+/**
+ * Table accessibility primitives for Table components.
+ * Based on @react-aria/table.
+ */
+
+export { createTable, getTableData } from './createTable';
+export { createTableHeaderRow } from './createTableHeaderRow';
+export { createTableColumnHeader } from './createTableColumnHeader';
+export { createTableRow } from './createTableRow';
+export { createTableCell } from './createTableCell';
+export { createTableRowGroup } from './createTableRowGroup';
+export { createTableSelectionCheckbox } from './createTableSelectionCheckbox';
+export { createTableSelectAllCheckbox } from './createTableSelectAllCheckbox';
+export type {
+  AriaTableProps,
+  TableAria,
+  AriaTableHeaderRowProps,
+  TableHeaderRowAria,
+  AriaTableColumnHeaderProps,
+  TableColumnHeaderAria,
+  AriaTableRowProps,
+  TableRowAria,
+  AriaTableCellProps,
+  TableCellAria,
+  AriaTableRowGroupProps,
+  TableRowGroupAria,
+  AriaTableSelectionCheckboxProps,
+  TableSelectionCheckboxAria,
+  TableSelectAllCheckboxAria,
+} from './types';