@proyecto-viviana/solidaria 0.3.0 → 0.4.1

package/src/table/createTableRow.ts

@@ -3,11 +3,30 @@
  * Based on @react-aria/table/useTableRow.
  */
 
-import { createMemo, createSignal, type Accessor } from "solid-js";
+import { createMemo, type Accessor } from "solid-js";
 import type { JSX } from "solid-js";
-import type { Key, TableState, TableCollection } from "@proyecto-viviana/solid-stately";
-import type { AriaTableRowProps, TableRowAria } from "./types";
+import type {
+  Collection,
+  Key,
+  Selection,
+  TableState,
+  TableCollection,
+} from "@proyecto-viviana/solid-stately";
+import type { AriaTableRowProps, TableRowAria, ExpandButtonProps } from "./types";
 import { getTableData } from "./createTable";
+import { getRowLabelledBy } from "./utils";
+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,221 +34,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);
-  let didSelectOnPointer = false;
-  let didActionOnPointer = 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 !!p.isDisabled || 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);
   });
 
-  const isInteractive = () => {
-    const s = state();
-    const p = props();
-    const tableData = getTableData(s);
-    return (
-      s.selectionMode !== "none" || !!tableData?.actions.onRowAction || !!p.onAction || !!p.href
-    );
-  };
-
-  const selectRow = (e: MouseEvent | PointerEvent | KeyboardEvent, forceReplace = false) => {
+  // aria-posinset / aria-setsize among same-level sibling rows.
+  const siblingInfo = createMemo(() => {
     const s = state();
-    const p = props();
-
-    if (s.selectionMode !== "none") {
-      if (e.shiftKey && s.selectionMode === "multiple") {
-        s.extendSelection(p.node.key);
-      } else if (!forceReplace && (e.ctrlKey || e.metaKey || s.selectionBehavior === "toggle")) {
-        s.toggleSelection(p.node.key);
-      } else if (!forceReplace && s.selectionMode === "single" && s.isSelected(p.node.key)) {
-        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 activateLink = (e: MouseEvent | KeyboardEvent) => {
-    props().onLinkAction?.(e);
-  };
-
-  const runRowAction = (p: AriaTableRowProps, onRowAction: ((key: Key) => void) | undefined) => {
-    if (onRowAction) {
-      onRowAction(p.node.key);
-    }
-
-    if (p.onAction) {
-      p.onAction();
-    }
-  };
-
-  const isFromInteractiveElement = (e: Event) => {
-    const target = e.target;
-    if (!(target instanceof Element)) return false;
-    return !!target.closest(
-      'a[href],button,input,select,textarea,[role="button"],[role="checkbox"],[role="link"]',
-    );
-  };
-
-  // 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;
-
-    if (isFromInteractiveElement(e)) {
-      didSelectOnPointer = false;
-      didActionOnPointer = false;
-      return;
-    }
-
-    if (p.href) {
-      if (s.selectionBehavior === "replace" && s.selectionMode !== "none") {
-        if (!didSelectOnPointer) {
-          selectRow(e, true);
-        }
-      } else if (!didActionOnPointer) {
-        activateLink(e);
-      }
-      didSelectOnPointer = false;
-      didActionOnPointer = false;
-      return;
-    }
-
-    if (!didSelectOnPointer) {
-      selectRow(e);
-    }
-    didSelectOnPointer = false;
-
-    if (!didActionOnPointer) {
-      runRowAction(p, onRowAction);
-    }
-    didActionOnPointer = false;
-  };
+    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,
+    };
+  });
 
-  const onDblClick = (e: MouseEvent) => {
+  const isSelected = createMemo(() => {
     const s = state();
     const p = props();
+    return s.isSelected(p.node.key);
+  });
 
-    if (isDisabled() || !p.href || s.selectionBehavior !== "replace") return;
-
-    activateLink(e);
+  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),
   };
 
-  const onKeyDown = (e: KeyboardEvent) => {
-    const s = state();
-    const p = props();
-
-    if (isDisabled()) return;
-
-    if (e.key === "Enter") {
-      e.preventDefault();
-
-      // 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;
+
+      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.href) {
-        activateLink(e);
-        return;
-      }
-
-      // Handle selection
-      if (s.selectionMode !== "none") {
-        selectRow(e);
-      }
-
-      // Call action handler
-      if (onRowAction) {
-        onRowAction(p.node.key);
-      }
-
-      if (p.onAction) {
-        p.onAction();
-      }
-    }
-
-    if (e.key === " " || e.key === "Space" || e.key === "Spacebar") {
-      e.preventDefault();
-
-      if (p.href && s.selectionMode !== "none") {
-        selectRow(e, s.selectionBehavior === "replace");
-        return;
-      }
-
-      if (p.href) {
-        activateLink(e);
-        return;
-      }
-
-      if (s.selectionMode !== "none") {
-        selectRow(e);
-      }
-    }
-  };
+  const isDisabled = () => selectableItem.isDisabled();
 
-  const onFocus = () => {
+  const onTreeGridKeyDown = (e: KeyboardEvent) => {
     const s = state();
     const p = props();
-    s.setFocusedKey(p.node.key);
-  };
 
-  const onPointerDown = (e: PointerEvent) => {
-    if (isInteractive() && !isDisabled()) {
-      setIsPressed(true);
-    }
-    const s = state();
-    const tableData = getTableData(s);
-    if (s.selectionMode !== "none" && !tableData?.shouldSelectOnPressUp && !isDisabled()) {
-      selectRow(e);
-      didSelectOnPointer = true;
-    }
-  };
+    if (isDisabled()) return;
 
-  const onPointerUp = (e: PointerEvent) => {
-    const s = state();
-    const p = props();
-    const tableData = getTableData(s);
-    if (s.selectionMode !== "none" && tableData?.shouldSelectOnPressUp && !isDisabled()) {
-      selectRow(e);
-      didSelectOnPointer = true;
-    }
-    if (
-      s.selectionMode === "none" &&
-      tableData?.shouldSelectOnPressUp &&
-      !isDisabled() &&
-      !isFromInteractiveElement(e)
-    ) {
-      if (p.href) {
-        activateLink(e);
-      } else {
-        runRowAction(p, tableData?.actions.onRowAction);
+    // 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;
+        }
       }
-      didActionOnPointer = true;
     }
-    setIsPressed(false);
   };
 
   const rowProps = createMemo(() => {
@@ -241,27 +200,67 @@ export function createTableRow<T extends object>(
       role: "row",
       "aria-selected": s.selectionMode !== "none" ? isSelected() : undefined,
       "aria-disabled": isDisabled() || undefined,
-      tabIndex: isFocused() ? 0 : -1,
-      onClick,
-      onDblClick,
-      onKeyDown,
-      onFocus,
-      onPointerDown,
-      onPointerUp,
     };
 
-    // Add aria-rowindex for virtualized tables
-    if (p.isVirtualized && node.rowIndex != null) {
+    // A row is labelled by its row-header cell(s) — mirrors `useTableRow`'s
+    // `'aria-labelledby': getRowLabelledBy(state, node.key)`. Without it the
+    // browser falls back to concatenating every cell (incl. the selection
+    // checkbox), so the row's accessible name reads "Select Foo.pdf PDF …".
+    const labelledBy = getRowLabelledBy(s, node.key);
+    if (labelledBy) {
+      baseProps["aria-labelledby"] = labelledBy;
+    }
+
+    // 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();
     },
@@ -269,7 +268,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/createTableSelectAllCheckbox.ts

@@ -55,12 +55,8 @@ export function createTableSelectAllCheckbox<T extends object>(
       "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["aria-checked"] = "mixed";
     }
 
     return baseProps as JSX.InputHTMLAttributes<HTMLInputElement>;
@@ -70,5 +66,8 @@ export function createTableSelectAllCheckbox<T extends object>(
     get checkboxProps() {
       return checkboxProps();
     },
+    get isIndeterminate() {
+      return isIndeterminate();
+    },
   };
 }

package/src/table/createTableSelectionCheckbox.ts

@@ -8,6 +8,7 @@ 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 { getRowLabelledBy } from "./utils";
 
 /**
  * Creates accessibility props for a table row selection checkbox.
@@ -24,10 +25,25 @@ export function createTableSelectionCheckbox<T extends object>(
     return s.isSelected(p.key);
   });
 
+  // Mirrors `useGridSelectionCheckbox`'s `!selectionManager.canSelectItem(key)`:
+  // a row's checkbox is disabled when selection is off, the key is in
+  // `disabledKeys`, or the row/item itself is disabled. This is broader than the
+  // row's own focusability gate (which only disables under `disabledBehavior:
+  // "all"`) — a row disabled via its `isDisabled` prop still cannot be selected,
+  // so its checkbox is disabled regardless of `disabledBehavior`.
+  //
+  // `isRowDisabled` carries the render-time per-row `isDisabled` that this
+  // data-driven port keeps on the row hook rather than the collection node
+  // (surfaced via `TableRowContext`); the collection-node check below still
+  // applies for any path that does populate `node.isDisabled`.
   const isDisabled = createMemo(() => {
     const s = state();
     const p = props();
-    return s.isDisabled(p.key);
+    if (s.selectionMode === "none" || s.disabledKeys.has(p.key) || p.isRowDisabled) {
+      return true;
+    }
+    const item = s.collection.getItem(p.key);
+    return !item || !!item.isDisabled || !!item.props?.isDisabled;
   });
 
   const onChange = () => {
@@ -39,6 +55,9 @@ export function createTableSelectionCheckbox<T extends object>(
   };
 
   const checkboxProps = createMemo(() => {
+    const s = state();
+    const p = props();
+
     const baseProps: Record<string, unknown> = {
       id: checkboxId,
       type: "checkbox",
@@ -46,6 +65,10 @@ export function createTableSelectionCheckbox<T extends object>(
       disabled: isDisabled(),
       onChange,
       "aria-label": "Select",
+      // Mirrors `useTableSelectionCheckbox`: the checkbox is labelled by its own
+      // "Select" text plus the row's row-header cell(s), so screen readers read
+      // "Select Foo.pdf" rather than a bare "Select".
+      "aria-labelledby": `${checkboxId} ${getRowLabelledBy(s, p.key)}`,
     };
 
     return baseProps as JSX.InputHTMLAttributes<HTMLInputElement>;

package/src/table/types.ts

@@ -5,6 +5,26 @@
 
 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.
@@ -93,7 +113,7 @@ export interface AriaTableRowProps {
   /** Link href for row activation. */
   href?: string;
   /** Handler for link row activation. */
-  onLinkAction?: (event: MouseEvent | KeyboardEvent) => void;
+  onLinkAction?: (event: TableRowLinkActionEvent) => void;
 }
 
 /**
@@ -102,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;
 }
 
 /**
@@ -154,6 +180,14 @@ export interface TableRowGroupAria {
 export interface AriaTableSelectionCheckboxProps {
   /** The key of the row. */
   key: Key;
+  /**
+   * Whether the owning row is disabled. In upstream RAC the row's `isDisabled`
+   * lives on the shared collection node, so `selectionManager.canSelectItem`
+   * can read it. In this data-driven port per-row `isDisabled` is a render-time
+   * prop threaded through `createTableRow`, so it is surfaced to the sibling
+   * checkbox via `TableRowContext` and forwarded here.
+   */
+  isRowDisabled?: boolean;
 }
 
 /**
@@ -170,4 +204,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;
 }

package/src/table/utils.ts

@@ -0,0 +1,41 @@
+/**
+ * Table accessibility id helpers.
+ * Port of @react-aria/table/utils (`getRowLabelledBy` / cell id derivation).
+ */
+
+import type {
+  Key,
+  GridNode,
+  TableState,
+  TableCollection,
+} from "@proyecto-viviana/solid-stately";
+import { getTableData } from "./createTable";
+
+/**
+ * A row is labelled by its row-header cells. Mirrors `@react-aria/table`'s
+ * `getRowLabelledBy`, which joins `getCellId(state, rowKey, columnKey)` across
+ * `collection.rowHeaderColumnKeys`. We resolve the actual rowheader cell node
+ * and rebuild the exact id string `createTableCell` puts on the element
+ * (`${tableId}-${parentKey}-${cellKey}`) so the reference always matches a real
+ * element, regardless of the cell-key scheme.
+ */
+export function getRowLabelledBy<T extends object>(
+  state: TableState<T, TableCollection<T>>,
+  rowKey: Key,
+): string {
+  const tableData = getTableData(state);
+  const tableId = tableData?.tableId ?? "table";
+  const collection = state.collection as TableCollection<T> & {
+    getCell?: (rowKey: Key, columnKey: Key) => GridNode<T> | null;
+  };
+
+  return [...collection.rowHeaderColumnKeys]
+    .map((columnKey) => {
+      const cell = collection.getCell?.(rowKey, columnKey);
+      return cell?.parentKey != null
+        ? `${tableId}-${String(cell.parentKey)}-${String(cell.key)}`
+        : null;
+    })
+    .filter((id): id is string => id != null)
+    .join(" ");
+}