@lotics/ui 1.25.0 → 1.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "1.25.0",
+  "version": "1.26.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",

package/src/table.web.tsx

@@ -7,13 +7,22 @@ import type { Column, TableProps } from "./table_types";
 export type { SortDir, TableSort, Column, TableProps } from "./table_types";
 
 // Web table. Built from raw <div>s (not RN Pressable) so a click-to-expand row
-// can legally contain interactive cells: the row is a <div role="row">, never a
-// <button>, and an `interactive` cell's clicks are skipped via a centralized
-// `closest('[data-interactive]')` guard — no stopPropagation, no nested <button>,
-// no absolute overlay. The detail panel renders full-width below the row.
+// can legally contain interactive controls: the row is a <div role="row">, never
+// a <button>. A row click toggles expansion EXCEPT when it lands on an actual
+// interactive element — those keep their own behaviour. This is the web mirror of
+// RN's responder model (the innermost control wins): only the control suppresses
+// the toggle, so empty space anywhere in the row — including around a control in a
+// wide action column — still expands. No stopPropagation, no nested <button>, no
+// absolute overlay, no dead zones. The detail panel renders full-width below.
 
 const CHEVRON_W = 44;
 
+// Clicks landing on (or inside) one of these keep their own behaviour instead of
+// toggling the row — the standard interactive HTML tags + ARIA interactive roles,
+// plus an explicit [data-interactive] escape hatch for a non-element control.
+const INTERACTIVE_SELECTOR =
+  'a[href], button, input, select, textarea, label, summary, [role="button"], [role="link"], [role="checkbox"], [role="switch"], [role="radio"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="option"], [role="tab"], [role="slider"], [role="spinbutton"], [contenteditable="true"], [data-interactive]';
+
 function colWidth<TRow extends Record<string, unknown>>(col: Column<TRow>): CSSProperties {
   return col.width ? { width: col.width, flexShrink: 0 } : { flex: 1, minWidth: 0 };
 }
@@ -113,10 +122,10 @@ export function Table<TRow extends Record<string, unknown>>(props: TableProps<TR
               onClick={
                 pressable
                   ? (e: React.MouseEvent) => {
-                      // Whole-row click acts (expand or select), EXCEPT clicks inside an
-                      // interactive cell (pickers/buttons) — they keep their own behaviour.
-                      // The disclosure chevron is the keyboard/AT affordance for expansion.
-                      if ((e.target as HTMLElement).closest("[data-interactive]")) return;
+                      // Whole-row click acts (expand or select), EXCEPT when it lands on an
+                      // actual interactive element — those keep their own behaviour. The
+                      // disclosure chevron is the keyboard/AT affordance for expansion.
+                      if ((e.target as HTMLElement).closest(INTERACTIVE_SELECTOR)) return;
                       if (expandable) toggle(key, row);
                       else onRowPress?.(row);
                     }
@@ -130,7 +139,6 @@ export function Table<TRow extends Record<string, unknown>>(props: TableProps<TR
                 <div
                   key={col.key as string}
                   role="cell"
-                  data-interactive={col.interactive || undefined}
                   style={{
                     ...bodyCellStyle,
                     ...colWidth(col),

package/src/table_types.ts

@@ -17,10 +17,6 @@ export interface Column<TRow extends Record<string, unknown>> {
   /** When true (and `onSortChange` is set), the header is pressable + shows a
    *  sort arrow when this column is the active `sort`. */
   sortable?: boolean;
-  /** Cells whose own controls (buttons, pickers) must NOT toggle the row. The
-   *  row's expand handler ignores clicks originating inside an interactive cell,
-   *  so the rest of the row stays click-to-expand. */
-  interactive?: boolean;
   renderCell?: (params: { row: TRow; column: Column<TRow> }) => ReactNode;
 }
 
@@ -35,13 +31,14 @@ export interface TableProps<TRow extends Record<string, unknown>> {
    *  parent owns the actual sorting of `rows` — this only drives the indicator. */
   sort?: TableSort<TRow> | null;
   onSortChange?: (key: keyof TRow) => void;
-  /** Click-to-select: pressing a row (except `interactive` cells) calls this —
-   *  e.g. a picker that returns the chosen row. Mutually exclusive with
+  /** Click-to-select: pressing a row (except its interactive controls) calls
+   *  this — e.g. a picker that returns the chosen row. Mutually exclusive with
    *  `renderDetail` (a row either expands or selects); `renderDetail` wins if
    *  both are set. Pair with `rowStyle` to highlight the selected row. */
   onRowPress?: (row: TRow) => void;
   /** Render an inline detail panel, full-width below the row. When set, the
-   *  whole row (except `interactive` cells) is click-to-expand. */
+   *  whole row (except its interactive controls) is click-to-expand. The row
+   *  detects controls by element/role, so cells need no special marking. */
   renderDetail?: (row: TRow) => ReactNode;
   /** Controlled set of expanded row keys. Omit for internal (uncontrolled) state. */
   expandedKeys?: Set<string>;