@proyecto-viviana/solidaria 0.2.8 → 0.4.0

package/src/table/createTableRow.ts

@@ -3,11 +3,29 @@
  * 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';
+import { createMemo, type Accessor } from "solid-js";
+import type { JSX } from "solid-js";
+import type {
+  Collection,
+  Key,
+  Selection,
+  TableState,
+  TableCollection,
+} from "@proyecto-viviana/solid-stately";
+import type { AriaTableRowProps, TableRowAria, ExpandButtonProps } from "./types";
+import { getTableData } from "./createTable";
+import { useLocale } from "../i18n";
+import { createSelectableItem, type SelectableItemState } from "../selection/createSelectableItem";
+import { mergeProps } from "../utils/mergeProps";
+
+/**
+ * Arrow keys that expand/collapse a tree-grid row, mirroring `@react-aria/table`.
+ * Direction is flipped under RTL.
+ */
+const EXPANSION_KEYS = {
+  expand: { ltr: "ArrowRight", rtl: "ArrowLeft" },
+  collapse: { ltr: "ArrowLeft", rtl: "ArrowRight" },
+} as const;
 
 /**
  * Creates accessibility props for a table row.
@@ -15,102 +33,161 @@ import { getTableData } from './createTable';
 export function createTableRow<T extends object>(
   props: Accessor<AriaTableRowProps>,
   state: Accessor<TableState<T, TableCollection<T>>>,
-  _ref: Accessor<HTMLTableRowElement | null>
+  ref: Accessor<HTMLTableRowElement | null>,
 ): TableRowAria {
-  const [isPressed, setIsPressed] = createSignal(false);
+  const locale = useLocale();
 
-  const isSelected = createMemo(() => {
-    const s = state();
-    const p = props();
-    return s.isSelected(p.node.key);
-  });
+  // Tree-grid (expandable rows): only active when the collection has a tree column.
+  const isTreeRow = createMemo(() => state().treeColumn != null);
 
-  const isDisabled = createMemo(() => {
-    const s = state();
-    const p = props();
-    return s.isDisabled(p.node.key);
-  });
+  const hasChildRows = createMemo(() => props().node.isExpandable ?? false);
 
-  const isFocused = createMemo(() => {
+  const isExpanded = createMemo(() => {
     const s = state();
-    const p = props();
-    return s.focusedKey === p.node.key;
+    if (s.treeColumn == null) return false;
+    return s.expandedKeys === "all" || s.expandedKeys.has(props().node.key);
   });
 
-  // Handle click/press for selection
-  const onClick = (e: MouseEvent) => {
+  // aria-posinset / aria-setsize among same-level sibling rows.
+  const siblingInfo = createMemo(() => {
     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);
+    const node = props().node;
+    if (node.parentKey != null) {
+      const parent = s.collection.getItem(node.parentKey);
+      if (parent) {
+        const siblings = parent.childNodes.filter((n) => n.type === "item");
+        return { posinset: node.index + 1, setsize: siblings.length };
       }
     }
+    const rootRows = s.collection.body.childNodes.filter((n) => n.type === "item");
+    const rootIndex = rootRows.findIndex((n) => n.key === node.key);
+    return {
+      posinset: rootIndex >= 0 ? rootIndex + 1 : node.index + 1,
+      setsize: rootRows.length,
+    };
+  });
 
-    // Call action handler
-    if (onRowAction) {
-      onRowAction(p.node.key);
-    }
-
-    if (p.onAction) {
-      p.onAction();
-    }
-  };
-
-  const onKeyDown = (e: KeyboardEvent) => {
+  const isSelected = createMemo(() => {
     const s = state();
     const p = props();
+    return s.isSelected(p.node.key);
+  });
 
-    if (isDisabled()) return;
-
-    if (e.key === 'Enter' || e.key === ' ' || e.key === 'Space' || e.key === 'Spacebar') {
-      e.preventDefault();
+  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: () => 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),
+  };
 
-      // Get table metadata for actions
+  const selectableItem = createSelectableItem<T>(
+    () => {
+      const s = state();
+      const p = props();
       const tableData = getTableData(s);
       const onRowAction = tableData?.actions.onRowAction;
+      const hasAction = !!p.onAction || !!onRowAction || !!p.href;
 
-      // Handle selection
-      if (s.selectionMode !== 'none') {
-        s.toggleSelection(p.node.key);
-      }
-
-      // Call action handler
-      if (onRowAction) {
-        onRowAction(p.node.key);
-      }
+      return {
+        key: p.node.key,
+        id: `${tableData?.tableId ?? "table"}-row-${String(p.node.key)}`,
+        isVirtualized: p.isVirtualized,
+        shouldSelectOnPressUp: tableData?.shouldSelectOnPressUp ?? false,
+        isDisabled: !!p.isDisabled || s.collection.size === 0,
+        onAction: hasAction
+          ? (event) => {
+              p.onAction?.();
+              onRowAction?.(p.node.key);
+              if (p.href) {
+                p.onLinkAction?.(event);
+              }
+            }
+          : undefined,
+      };
+    },
+    selectableState,
+    ref,
+  );
 
-      if (p.onAction) {
-        p.onAction();
-      }
-    }
-  };
+  const isDisabled = () => selectableItem.isDisabled();
 
-  const onFocus = () => {
+  const onTreeGridKeyDown = (e: KeyboardEvent) => {
     const s = state();
     const p = props();
-    s.setFocusedKey(p.node.key);
-  };
 
-  const onPointerDown = () => {
-    setIsPressed(true);
-  };
+    if (isDisabled()) return;
 
-  const onPointerUp = () => {
-    setIsPressed(false);
+    // Tree-grid expand/collapse with Left/Right arrows (flipped under RTL). Handled before
+    // selection/navigation; stopping propagation prevents the grid's arrow navigation when
+    // expansion consumes the key.
+    if (s.treeColumn != null) {
+      const direction = locale().direction === "rtl" ? "rtl" : "ltr";
+      const key = p.node.key;
+      const expanded = s.expandedKeys;
+      if (
+        e.key === EXPANSION_KEYS.expand[direction] &&
+        s.focusedKey === key &&
+        hasChildRows() &&
+        expanded !== "all" &&
+        !expanded.has(key)
+      ) {
+        s.toggleKey(key);
+        e.stopPropagation();
+        return;
+      } else if (e.key === EXPANSION_KEYS.collapse[direction] && s.focusedKey === key) {
+        if (expanded !== "all") {
+          if (hasChildRows() && expanded.has(key)) {
+            s.toggleKey(key);
+            e.stopPropagation();
+            return;
+          } else if (!expanded.has(key) && p.node.parentKey != null && p.node.level > 0) {
+            // Leaf or already-collapsed row: move focus to the parent row.
+            s.setFocusedKey(p.node.parentKey);
+            e.stopPropagation();
+            return;
+          }
+        } else {
+          s.toggleKey(key);
+          e.stopPropagation();
+          return;
+        }
+      }
+    }
   };
 
   const rowProps = createMemo(() => {
@@ -119,29 +196,61 @@ export function createTableRow<T extends object>(
     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": isDisabled() || undefined,
     };
 
-    // Add aria-rowindex for virtualized tables
-    if (p.isVirtualized && node.rowIndex != null) {
-      baseProps['aria-rowindex'] = node.rowIndex + 1; // 1-based
+    // Tree-grid rows expose their nesting depth, position and expansion state.
+    if (s.treeColumn != null) {
+      const { posinset, setsize } = siblingInfo();
+      baseProps["aria-expanded"] = hasChildRows() ? isExpanded() : undefined;
+      baseProps["aria-level"] = node.level + 1; // 1-based
+      baseProps["aria-posinset"] = posinset;
+      baseProps["aria-setsize"] = setsize;
+      baseProps.onKeyDown = onTreeGridKeyDown;
+    }
+
+    // Add aria-rowindex for virtualized tables. Tree grids omit it (matches upstream).
+    if (p.isVirtualized && s.treeColumn == null && node.rowIndex != null) {
+      baseProps["aria-rowindex"] = node.rowIndex + 1; // 1-based
     }
 
-    return baseProps as JSX.HTMLAttributes<HTMLTableRowElement>;
+    return mergeProps<JSX.HTMLAttributes<HTMLTableRowElement>>(
+      selectableItem.itemProps as unknown as JSX.HTMLAttributes<HTMLTableRowElement>,
+      baseProps,
+    );
   });
 
+  // Chevron button for expanding/collapsing a tree-grid row. Press-based so it flows through
+  // our Button's `createPress`, and excluded from the tab order — reached via the row's
+  // Left/Right arrow keys instead. Mirrors `@react-aria/table`'s `expandButtonProps`; whether a
+  // chevron renders for a leaf row is the consumer's call (gate on `hasChildItems`), matching S2.
+  const onExpandPress = () => {
+    const s = state();
+    const p = props();
+    if (isDisabled()) return;
+    s.toggleKey(p.node.key);
+    s.setFocused(true);
+    s.setFocusedKey(p.node.key);
+  };
+
+  const expandButtonProps = createMemo<ExpandButtonProps>(() => ({
+    isDisabled: isDisabled(),
+    onPress: onExpandPress,
+    excludeFromTabOrder: true,
+    preventFocusOnPress: true,
+    "data-react-aria-prevent-focus": true,
+    "aria-label": isExpanded() ? "Collapse" : "Expand",
+  }));
+
   return {
     get rowProps() {
       return rowProps();
     },
+    get expandButtonProps() {
+      return expandButtonProps();
+    },
     get isSelected() {
       return isSelected();
     },
@@ -149,7 +258,13 @@ export function createTableRow<T extends object>(
       return isDisabled();
     },
     get isPressed() {
-      return isPressed();
+      return selectableItem.isPressed();
+    },
+    get isExpanded() {
+      return isExpanded();
+    },
+    get hasChildRows() {
+      return hasChildRows();
     },
   };
 }

package/src/table/createTableRowGroup.ts

@@ -3,22 +3,20 @@
  * 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';
+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 {
+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',
+      role: "rowgroup",
     };
 
     return baseProps as JSX.HTMLAttributes<HTMLTableSectionElement>;

package/src/table/createTableSelectAllCheckbox.ts

@@ -3,20 +3,20 @@
  * 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';
+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>>>
+  state: Accessor<TableState<T, TableCollection<T>>>,
 ): TableSelectAllCheckboxAria {
   const isSelectAll = createMemo(() => {
     const s = state();
-    return s.selectedKeys === 'all';
+    return s.selectedKeys === "all";
   });
 
   const isEmpty = createMemo(() => {
@@ -27,14 +27,14 @@ export function createTableSelectAllCheckbox<T extends object>(
   const isIndeterminate = createMemo(() => {
     const s = state();
     const selectedKeys = s.selectedKeys;
-    if (selectedKeys === 'all') return false;
+    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();
+    return s.selectionMode !== "multiple" || isEmpty();
   });
 
   const onChange = () => {
@@ -48,18 +48,15 @@ export function createTableSelectAllCheckbox<T extends object>(
     const s = state();
 
     const baseProps: Record<string, unknown> = {
-      type: 'checkbox',
+      type: "checkbox",
       checked: isSelectAll(),
       disabled: isDisabled(),
       onChange,
-      'aria-label': s.selectionMode === 'single' ? 'Select' : 'Select all',
+      "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';
+      baseProps["data-indeterminate"] = "true";
     }
 
     return baseProps as JSX.InputHTMLAttributes<HTMLInputElement>;
@@ -69,5 +66,8 @@ export function createTableSelectAllCheckbox<T extends object>(
     get checkboxProps() {
       return checkboxProps();
     },
+    get isIndeterminate() {
+      return isIndeterminate();
+    },
   };
 }

package/src/table/createTableSelectionCheckbox.ts

@@ -3,18 +3,18 @@
  * 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';
+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>>>
+  state: Accessor<TableState<T, TableCollection<T>>>,
 ): TableSelectionCheckboxAria {
   const checkboxId = createId();
 
@@ -41,11 +41,11 @@ export function createTableSelectionCheckbox<T extends object>(
   const checkboxProps = createMemo(() => {
     const baseProps: Record<string, unknown> = {
       id: checkboxId,
-      type: 'checkbox',
+      type: "checkbox",
       checked: isSelected(),
       disabled: isDisabled(),
       onChange,
-      'aria-label': 'Select',
+      "aria-label": "Select",
     };
 
     return baseProps as JSX.InputHTMLAttributes<HTMLInputElement>;

package/src/table/index.ts

@@ -3,14 +3,15 @@
  * 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 { 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 { createTableColumnResize } from "./createTableColumnResize";
 export type {
   AriaTableProps,
   TableAria,
@@ -27,4 +28,8 @@ export type {
   AriaTableSelectionCheckboxProps,
   TableSelectionCheckboxAria,
   TableSelectAllCheckboxAria,
-} from './types';
+} from "./types";
+export type {
+  CreateTableColumnResizeProps,
+  TableColumnResizeResult,
+} from "./createTableColumnResize";

package/src/table/types.ts

@@ -3,8 +3,28 @@
  * Based on @react-aria/table types.
  */
 
-import type { JSX } from 'solid-js';
-import type { Key, GridNode } from '@proyecto-viviana/solid-stately';
+import type { JSX } from "solid-js";
+import type { Key, GridNode } from "@proyecto-viviana/solid-stately";
+import type { AriaButtonProps } from "../button/types";
+
+export interface TableRowLinkActionEvent {
+  metaKey?: boolean;
+  ctrlKey?: boolean;
+  altKey?: boolean;
+  shiftKey?: boolean;
+}
+
+/**
+ * Props for a tree-grid row's expand/collapse chevron button.
+ *
+ * Press-based (mirrors `@react-aria/table`'s `expandButtonProps`) so it flows through our
+ * Button's `createPress`, plus the `data-react-aria-prevent-focus` marker that keeps focus
+ * management from re-focusing the chevron after a press.
+ */
+export type ExpandButtonProps = AriaButtonProps & {
+  /** Marks the chevron so focus management skips re-focusing it after a press. */
+  "data-react-aria-prevent-focus"?: boolean;
+};
 
 /**
  * Props for the createTable hook.
@@ -13,11 +33,11 @@ export interface AriaTableProps {
   /** ID for the table element. */
   id?: string;
   /** ARIA label for the table. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** ARIA labelledby for the table. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
   /** ARIA describedby for the table. */
-  'aria-describedby'?: string;
+  "aria-describedby"?: string;
   /** Whether the table uses virtual scrolling. */
   isVirtualized?: boolean;
   /** Handler for row actions. */
@@ -26,8 +46,10 @@ export interface AriaTableProps {
   onCellAction?: (key: Key) => void;
   /** Whether selection should occur on press up. */
   shouldSelectOnPressUp?: boolean;
+  /** Whether Escape clears selection. */
+  escapeKeyBehavior?: "clearSelection" | "none";
   /** Focus mode: 'row' or 'cell'. */
-  focusMode?: 'row' | 'cell';
+  focusMode?: "row" | "cell";
 }
 
 /**
@@ -84,8 +106,14 @@ export interface AriaTableRowProps {
   node: GridNode<unknown>;
   /** Whether the table is virtualized. */
   isVirtualized?: boolean;
+  /** Whether the row is disabled. */
+  isDisabled?: boolean;
   /** Handler for row action. */
   onAction?: () => void;
+  /** Link href for row activation. */
+  href?: string;
+  /** Handler for link row activation. */
+  onLinkAction?: (event: TableRowLinkActionEvent) => void;
 }
 
 /**
@@ -94,12 +122,18 @@ export interface AriaTableRowProps {
 export interface TableRowAria {
   /** Props to spread on the row element. */
   rowProps: JSX.HTMLAttributes<HTMLTableRowElement>;
+  /** Props to spread on a tree-grid row's expand/collapse chevron button. */
+  expandButtonProps: ExpandButtonProps;
   /** Whether the row is selected. */
   isSelected: boolean;
   /** Whether the row is disabled. */
   isDisabled: boolean;
   /** Whether the row is pressed. */
   isPressed: boolean;
+  /** Whether the row is expanded (tree grid only; false otherwise). */
+  isExpanded: boolean;
+  /** Whether the row has child rows (tree grid only; false otherwise). */
+  hasChildRows: boolean;
 }
 
 /**
@@ -129,7 +163,7 @@ export interface TableCellAria {
  */
 export interface AriaTableRowGroupProps {
   /** The type of row group: 'thead', 'tbody', or 'tfoot'. */
-  type: 'thead' | 'tbody' | 'tfoot';
+  type: "thead" | "tbody" | "tfoot";
 }
 
 /**
@@ -162,4 +196,6 @@ export interface TableSelectionCheckboxAria {
 export interface TableSelectAllCheckboxAria {
   /** Props to spread on the checkbox input element. */
   checkboxProps: JSX.InputHTMLAttributes<HTMLInputElement>;
+  /** Whether the native checkbox should expose its mixed state. */
+  isIndeterminate: boolean;
 }