@proyecto-viviana/solidaria 0.2.5 → 0.3.0

package/src/table/createTableRow.ts

@@ -3,11 +3,11 @@
  * 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, createSignal, 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 { getTableData } from "./createTable";
 
 /**
  * Creates accessibility props for a table row.
@@ -15,9 +15,11 @@ 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 isSelected = createMemo(() => {
     const s = state();
@@ -28,7 +30,7 @@ export function createTableRow<T extends object>(
   const isDisabled = createMemo(() => {
     const s = state();
     const p = props();
-    return s.isDisabled(p.node.key);
+    return !!p.isDisabled || s.isDisabled(p.node.key);
   });
 
   const isFocused = createMemo(() => {
@@ -37,30 +39,38 @@ export function createTableRow<T extends object>(
     return s.focusedKey === p.node.key;
   });
 
-  // Handle click/press for selection
-  const onClick = (e: MouseEvent) => {
+  const isInteractive = () => {
     const s = state();
     const p = props();
-
-    if (isDisabled()) return;
-
-    // Get table metadata for actions
     const tableData = getTableData(s);
-    const onRowAction = tableData?.actions.onRowAction;
+    return (
+      s.selectionMode !== "none" || !!tableData?.actions.onRowAction || !!p.onAction || !!p.href
+    );
+  };
 
-    // Handle selection
-    if (s.selectionMode !== 'none') {
-      if (e.shiftKey && s.selectionMode === 'multiple') {
+  const selectRow = (e: MouseEvent | PointerEvent | KeyboardEvent, forceReplace = false) => {
+    const s = state();
+    const p = props();
+
+    if (s.selectionMode !== "none") {
+      if (e.shiftKey && s.selectionMode === "multiple") {
         s.extendSelection(p.node.key);
-      } else if (e.ctrlKey || e.metaKey) {
+      } 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);
       }
     }
+  };
 
-    // Call action handler
+  const activateLink = (e: MouseEvent | KeyboardEvent) => {
+    props().onLinkAction?.(e);
+  };
+
+  const runRowAction = (p: AriaTableRowProps, onRowAction: ((key: Key) => void) | undefined) => {
     if (onRowAction) {
       onRowAction(p.node.key);
     }
@@ -70,22 +80,85 @@ export function createTableRow<T extends object>(
     }
   };
 
+  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 onDblClick = (e: MouseEvent) => {
+    const s = state();
+    const p = props();
+
+    if (isDisabled() || !p.href || s.selectionBehavior !== "replace") return;
+
+    activateLink(e);
+  };
+
   const onKeyDown = (e: KeyboardEvent) => {
     const s = state();
     const p = props();
 
     if (isDisabled()) return;
 
-    if (e.key === 'Enter' || e.key === ' ') {
+    if (e.key === "Enter") {
       e.preventDefault();
 
       // Get table metadata for actions
       const tableData = getTableData(s);
       const onRowAction = tableData?.actions.onRowAction;
 
+      if (p.href) {
+        activateLink(e);
+        return;
+      }
+
       // Handle selection
-      if (s.selectionMode !== 'none') {
-        s.toggleSelection(p.node.key);
+      if (s.selectionMode !== "none") {
+        selectRow(e);
       }
 
       // Call action handler
@@ -97,6 +170,24 @@ export function createTableRow<T extends object>(
         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 onFocus = () => {
@@ -105,11 +196,39 @@ export function createTableRow<T extends object>(
     s.setFocusedKey(p.node.key);
   };
 
-  const onPointerDown = () => {
-    setIsPressed(true);
+  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;
+    }
   };
 
-  const onPointerUp = () => {
+  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);
+      }
+      didActionOnPointer = true;
+    }
     setIsPressed(false);
   };
 
@@ -119,11 +238,12 @@ 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,
+      role: "row",
+      "aria-selected": s.selectionMode !== "none" ? isSelected() : undefined,
+      "aria-disabled": isDisabled() || undefined,
       tabIndex: isFocused() ? 0 : -1,
       onClick,
+      onDblClick,
       onKeyDown,
       onFocus,
       onPointerDown,
@@ -132,7 +252,7 @@ export function createTableRow<T extends object>(
 
     // Add aria-rowindex for virtualized tables
     if (p.isVirtualized && node.rowIndex != null) {
-      baseProps['aria-rowindex'] = node.rowIndex + 1; // 1-based
+      baseProps["aria-rowindex"] = node.rowIndex + 1; // 1-based
     }
 
     return baseProps as JSX.HTMLAttributes<HTMLTableRowElement>;

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,19 @@ 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";
+      baseProps["aria-checked"] = "mixed";
     }
 
     return baseProps as JSX.InputHTMLAttributes<HTMLInputElement>;

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,8 @@
  * 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";
 
 /**
  * Props for the createTable hook.
@@ -13,11 +13,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 +26,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 +86,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: MouseEvent | KeyboardEvent) => void;
 }
 
 /**
@@ -129,7 +137,7 @@ export interface TableCellAria {
  */
 export interface AriaTableRowGroupProps {
   /** The type of row group: 'thead', 'tbody', or 'tfoot'. */
-  type: 'thead' | 'tbody' | 'tfoot';
+  type: "thead" | "tbody" | "tfoot";
 }
 
 /**