@eifi1/ui-kit 0.48.2 → 0.49.0

package/dist/components/data-table-row.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/data-table-row.tsx"],"sourcesContent":["import { Fragment, memo } from \"react\";\nimport type { MouseEvent as ReactMouseEvent, ReactNode, RefObject } from \"react\";\nimport { RowLink, cleanAttrs, fromOutside, fromOwnControl, logicalAlign, splitCellProps } from \"./data-table-shared\";\nimport { GROW_CELL_CLASS, GROW_PEER_CELL_CLASS } from \"./data-table-fit\";\nimport { MobileRow, type MobileRowProps } from \"./data-table-mobile\";\nimport type { DataTableColumn, MobileSwipeActions } from \"./data-table\";\nimport { cn } from \"../lib/cn\";\n\n// DataTable's rows as memoised components (0.48.2, keksdose K-052-2, dev #632 — Marcel:\n// \"The table is extremely slow. Is it virtualised or is everytime the whole table\n// rendered?\"). The owner's selection, expansion and the roving focus all live ABOVE the\n// rows, so every tick re-rendered the whole table: on keksdose's register one checkbox\n// cost 430–1200 ms of INP at 271 rows. A row now bails out unless one of its own inputs\n// changed.\n//\n// What a row compares, and so the contract a call site keeps:\n//  * the row object, its index and its key;\n//  * what the table derived for it from the caller's functions, as PRIMITIVES — selected,\n//    selectable, expanded, its tab stop, its `rowClassName` string, its `rowHref`, and\n//    its `rowAttributes` compared key by key. The functions themselves may be inline;\n//  * the column definitions BY IDENTITY: a cell is the caller's render function, and\n//    what it reads is the caller's to say. A page that memoises its columns (keksdose's\n//    `useTransactionColumns`) gets the bail-out; one that writes them inline gets a new\n//    array every render and the full re-render it always had — never a stale cell;\n//  * an OPEN row's detail (`expandedRow`) is called on every render, so it re-renders\n//    with the table as before, and an editor inside it keeps its live inputs.\n// The handlers do not take part: they read the table's latest props through `ctx`, a\n// ref the table refreshes each commit, so a row that bailed out still acts on the\n// current selection and the current `onRowClick`.\n\n/** What a row's handlers read at event time — DataTable's latest props and helpers. */\nexport interface DataTableRowCtx<T> {\n  onRowClick: ((row: T) => void) | undefined;\n  onToggle: ((row: T, checked: boolean) => void) | undefined;\n  isSelected: (row: T) => boolean;\n  canSelect: (row: T) => boolean;\n  selectRange: (toIndex: number) => boolean;\n  /** Anchor the next Shift+click range on this row's key. */\n  setAnchor: (key: string | number) => void;\n  /** Remember the checkbox click that drew a range… */\n  markRangeClick: (e: Event) => void;\n  /** …and drop that click's own change event (true once for it). */\n  takeRangeClick: (e: Event) => boolean;\n  setFocusRowKey: (key: string | number) => void;\n  /** The phone card's long press: enter selection mode with this row selected. */\n  onLongPress: (row: T) => void;\n  /** Under `virtualize` (0.48.2): Arrow/Home/End over every row, rendered or not. True\n   *  when the key was one of them. Without it the roving walks the rendered rows. */\n  moveFocus?: (fromIndex: number, key: string) => boolean;\n}\n\n/** `rowAttributes`' result compared key by key: a call site returns a fresh object (or\n *  `undefined`) per call, and its values are strings. */\nfunction sameAttrs(\n  a: Record<string, string | undefined> | undefined,\n  b: Record<string, string | undefined> | undefined,\n): boolean {\n  if (a === b) return true;\n  if (!a || !b) return false;\n  const ak = Object.keys(a);\n  if (ak.length !== Object.keys(b).length) return false;\n  for (const k of ak) if (a[k] !== b[k]) return false;\n  return true;\n}\n\nfunction sameProps<P extends { attrs?: Record<string, string | undefined> }>(prev: P, next: P): boolean {\n  for (const k of Object.keys(next) as (keyof P)[]) {\n    if (k === \"attrs\") continue;\n    if (!Object.is(prev[k], next[k])) return false;\n  }\n  return sameAttrs(prev.attrs, next.attrs);\n}\n\n/** Arrow/Home/End between the focusable rows of the table's bodies — the roving half of\n *  the keyboard-activatable rows (see the row's `onKeyDown`). */\nfunction moveRowFocus(from: HTMLElement, key: string): boolean {\n  if (!(key in ROW_NAV_KEYS)) return false;\n  // Every body of the table: a grouped table (`groupBy`, 0.48) has one per group.\n  const table = from.closest(\"table\");\n  if (!table) return false;\n  const rows = Array.from(table.tBodies).flatMap((body) =>\n    Array.from(body.children).filter(\n      (el): el is HTMLElement => el instanceof HTMLElement && el.hasAttribute(\"data-row-nav\"),\n    ),\n  );\n  const i = rows.indexOf(from);\n  const target =\n    key === \"ArrowDown\"\n      ? rows[i + 1]\n      : key === \"ArrowUp\"\n        ? rows[i - 1]\n        : key === \"Home\"\n          ? rows[0]\n          : key === \"End\"\n            ? rows[rows.length - 1]\n            : undefined;\n  // At either end the key is still consumed, or ArrowDown on the last row would\n  // scroll the page out from under a focused row.\n  target?.focus();\n  return true;\n}\nconst ROW_NAV_KEYS = { ArrowDown: 1, ArrowUp: 1, Home: 1, End: 1 } as const;\n\n// ---------- Desktop row ----------\n\nexport interface DataTableRowProps<T> {\n  row: T;\n  rowIndex: number;\n  rowKey: string | number;\n  ctx: RefObject<DataTableRowCtx<T>>;\n  columns: DataTableColumn<T>[];\n  widths: Record<string, number>;\n  growDrawn: boolean;\n  linkColumn: DataTableColumn<T> | undefined;\n  href: string | undefined;\n  /** The selection column is drawn (DataTable's `selection`). */\n  selectionColumn: boolean;\n  selectable: boolean;\n  selected: boolean;\n  expanded: boolean;\n  /** The open row's detail; `null` on a closed row. */\n  expansion: ReactNode;\n  /** The row carries the visually hidden disclosure button (focusable rows that expand). */\n  disclosure: boolean;\n  detailId: string;\n  rowsFocusable: boolean;\n  rowInteractive: boolean;\n  tabbable: boolean;\n  className: string | undefined;\n  attrs: Record<string, string | undefined> | undefined;\n  compact: boolean;\n  totalColSpan: number;\n  rowDetailsLabel: string;\n  selectRowLabel: string;\n  /** Under `virtualize` (0.48.2): the row's `aria-rowindex` (its open detail row is the\n   *  next), and the row is marked with its index for the window's measuring. */\n  ariaRowIndex?: number;\n}\n\nfunction DataTableRowImpl<T>({\n  row,\n  rowIndex,\n  rowKey: key,\n  ctx,\n  columns,\n  widths,\n  growDrawn,\n  linkColumn,\n  href,\n  selectionColumn,\n  selectable,\n  selected,\n  expanded,\n  expansion,\n  disclosure: hasDisclosure,\n  detailId,\n  rowsFocusable,\n  rowInteractive,\n  tabbable,\n  className,\n  attrs,\n  compact,\n  totalColSpan,\n  rowDetailsLabel,\n  selectRowLabel,\n  ariaRowIndex,\n}: DataTableRowProps<T>) {\n  const windowed = ariaRowIndex !== undefined;\n  // Whether the row is open, said where ARIA allows it (round 0.34, the\n  // showcase's axe check): `aria-expanded` belongs to a treegrid's row, not a\n  // table's, and the <tr> wore it. A disclosure button in the first cell carries\n  // it now, with `aria-controls` on the detail row while that is there.\n  // Visually hidden and not a tab stop: the row stays the one roving stop, with\n  // Enter/Space and the whole-row click — this is the screen reader cursor's\n  // way in, and where it hears the state. Named by `aria-label`, so the cell's\n  // text stays the cell's own.\n  const disclosure = hasDisclosure ? (\n    <button\n      type=\"button\"\n      tabIndex={-1}\n      className=\"sr-only-fixed\"\n      aria-label={rowDetailsLabel}\n      aria-expanded={expanded}\n      aria-controls={expansion ? detailId : undefined}\n      // The row's own handler leaves a click on a control inside it alone.\n      onClick={() => ctx.current.onRowClick!(row)}\n    />\n  ) : null;\n  return (\n    <Fragment>\n      <tr\n        {...cleanAttrs(attrs)}\n        aria-rowindex={ariaRowIndex}\n        data-row-index={windowed ? rowIndex : undefined}\n        data-row-nav={rowsFocusable ? \"\" : undefined}\n        tabIndex={rowsFocusable ? (tabbable ? 0 : -1) : undefined}\n        onFocus={\n          rowsFocusable\n            ? (e) => {\n                if (e.target === e.currentTarget) ctx.current.setFocusRowKey(key);\n              }\n            : undefined\n        }\n        onKeyDown={\n          rowsFocusable\n            ? (e) => {\n                // Only the row's own key presses: Enter on a nested button\n                // or link is that control's, and Space in a nested input\n                // is a space.\n                if (e.target !== e.currentTarget) return;\n                if (e.altKey || e.ctrlKey || e.metaKey) return;\n                if (e.key === \"Enter\" || e.key === \" \") {\n                  // Space would otherwise scroll the table.\n                  e.preventDefault();\n                  ctx.current.onRowClick!(row);\n                  return;\n                }\n                if (e.shiftKey) return;\n                const move = ctx.current.moveFocus;\n                if (move ? move(rowIndex, e.key) : moveRowFocus(e.currentTarget, e.key)) e.preventDefault();\n              }\n            : undefined\n        }\n        className={cn(\n          \"border-t border-subtle\",\n          rowInteractive && \"cursor-pointer hover:bg-hover\",\n          // The kit's focus frame width (§5, `--focus-ring-width`), drawn as an\n          // OUTLINE rather than FOCUS_RING's box-shadow: a shadow on a `<tr>`\n          // is not painted by every engine, an outline is.\n          rowsFocusable &&\n            \"focus-visible:bg-hover focus-visible:outline-focus focus-visible:-outline-offset-2 focus-visible:outline-brand\",\n          className,\n        )}\n        onClick={\n          rowInteractive\n            ? (e: ReactMouseEvent<HTMLTableRowElement>) => {\n                const c = ctx.current;\n                // A click on a control inside the row (a button, a link,\n                // an input the cell renders) is that control's — it must\n                // not also open the row. Cells no longer have to\n                // `stopPropagation` to get that.\n                if (fromOwnControl(e.target, e.currentTarget)) return;\n                if (fromOutside(e.target, e.currentTarget)) return;\n                // Modifier-clicks anywhere in the row drive\n                // selection instead of expanding it (feedback #289):\n                // Ctrl/Cmd toggles a single row, Shift selects the\n                // range from the last-toggled row (inclusive of this\n                // one) — the same as the checkbox, but for the whole\n                // row, which is what the checkbox-only version was\n                // missing.\n                if (c.onToggle && c.canSelect(row)) {\n                  if (e.shiftKey) {\n                    // Drop the text selection a shift-click would\n                    // otherwise smear across the rows.\n                    window.getSelection?.()?.removeAllRanges();\n                    if (c.selectRange(rowIndex)) return;\n                    // No anchor yet: treat it as the first pick.\n                    c.setAnchor(key);\n                    c.onToggle(row, !c.isSelected(row));\n                    return;\n                  }\n                  if (e.metaKey || e.ctrlKey) {\n                    c.setAnchor(key);\n                    c.onToggle(row, !c.isSelected(row));\n                    return;\n                  }\n                }\n                c.onRowClick?.(row);\n              }\n            : undefined\n        }\n      >\n        {selectionColumn && (\n          <td\n            className={cn(\"align-top\", compact ? \"w-8 px-2 py-1\" : \"w-10 px-3 py-2\")}\n            // Don't let selecting a row also trigger the row click\n            // (which expands/edits it).\n            onClick={(e) => e.stopPropagation()}\n          >\n            {selectable && (\n              <input\n                type=\"checkbox\"\n                className={cn(\"accent-indigo-600\", compact ? \"size-3.5\" : \"size-4\")}\n                checked={selected}\n                // Shift+click selects the range from the last toggled\n                // row. `preventDefault` puts the box back, but it does NOT\n                // stop React's `onChange`: React derives a checkbox's\n                // change from the `click` itself, after the browser has\n                // already flipped `checked` and before the cancellation\n                // reverts it — so the same click also reported itself as\n                // a single toggle, and the owner got `onToggleMany` and\n                // then `onToggle` for the clicked row. The click is\n                // remembered by identity and its change is dropped; a\n                // boolean flag would outlive a click whose change never\n                // came and swallow the user's next real one.\n                onClick={(e) => {\n                  if (e.shiftKey && ctx.current.selectRange(rowIndex)) {\n                    e.preventDefault();\n                    ctx.current.markRangeClick(e.nativeEvent);\n                  }\n                }}\n                onChange={(e) => {\n                  const c = ctx.current;\n                  if (c.takeRangeClick(e.nativeEvent)) return;\n                  c.setAnchor(key);\n                  c.onToggle?.(row, e.target.checked);\n                }}\n                aria-label={selectRowLabel}\n              />\n            )}\n          </td>\n        )}\n        {columns.map((col, colIndex) => {\n          const width = widths[col.key];\n          // The caller's first, the table's over it — see `cellProps`.\n          const own = splitCellProps(col.cellProps?.(row));\n          const pinned = width ? { width, minWidth: width, maxWidth: width } : undefined;\n          return (\n            <td\n              {...own.attrs}\n              key={col.key}\n              data-col={col.key}\n              style={own.style || pinned ? { ...own.style, ...pinned } : undefined}\n              className={cn(\n                \"align-top\",\n                compact ? \"px-2 py-1\" : \"px-3 py-2\",\n                width && \"overflow-hidden text-ellipsis\",\n                col.grow ? GROW_CELL_CLASS : growDrawn && GROW_PEER_CELL_CLASS,\n                logicalAlign(own.className),\n                logicalAlign(col.className),\n              )}\n            >\n              {colIndex === 0 && disclosure}\n              {col === linkColumn && href ? (\n                // No `onActivate`: the click is left to bubble to the\n                // <tr> handler above, which already owns expand-vs-select.\n                // Calling it here as well would toggle the row twice.\n                <RowLink href={href} className=\"block\" data-row-link=\"\">\n                  {col.cell(row)}\n                </RowLink>\n              ) : (\n                col.cell(row)\n              )}\n            </td>\n          );\n        })}\n      </tr>\n      {expansion && (\n        <tr\n          id={hasDisclosure ? detailId : undefined}\n          aria-rowindex={windowed ? ariaRowIndex + 1 : undefined}\n          data-row-detail={windowed ? rowIndex : undefined}\n          className=\"bg-surface-2 border-t border-subtle\"\n        >\n          {/* The detail panel spans every column. In an `auto` table\n              layout (the default here — columns only get fixed style\n              widths once the user resizes/auto-sizes them) the cell's\n              content preferred-width is redistributed across the\n              spanned columns, so a long expansion visibly re-sizes the\n              columns above it — and one-line content does not, since\n              its preferred width is small (feedback #104). Wrapping the\n              content in `w-0 min-w-full` pins the cell's preferred\n              width to ~0 (the explicit width:0 child), so it can never\n              perturb the columns; the div then fills to the full row\n              width only at paint time, and long text wraps within it.\n              Inside it the content is pinned to what the scroller SHOWS\n              (0.47, keksdose S4): on a table wider than its scroller a\n              table-wide panel put an inline editor's Save/Cancel off-screen.\n              `sticky start-0` holds it at the scroller's start edge (the\n              right one in RTL) as the row scrolls sideways, and\n              `--dt-visible-w` (the scroller's clientWidth, measured above)\n              sizes it; before the first measure, and in a table no wider\n              than its scroller, it is the full width as before. */}\n          <td colSpan={totalColSpan} className=\"p-0\">\n            <div className=\"w-0 min-w-full\">\n              <div\n                className={cn(\n                  \"sticky start-0 w-[var(--dt-visible-w,100%)] max-w-full\",\n                  compact ? \"px-2 py-2\" : \"px-3 py-3\",\n                )}\n              >\n                {expansion}\n              </div>\n            </div>\n          </td>\n        </tr>\n      )}\n    </Fragment>\n  );\n}\n\n/** One desktop row (its `<tr>` and, while open, its detail row), memoised — see the\n *  file's note for what it compares. */\nexport const DataTableRow = memo(DataTableRowImpl, sameProps) as <T>(\n  props: DataTableRowProps<T> & { key?: string | number },\n) => ReactNode;\n\n// ---------- Phone card ----------\n\nexport interface DataTableMobileRowProps<T>\n  extends Pick<\n    MobileRowProps<T>,\n    | \"row\"\n    | \"opensRow\"\n    | \"mobileDir\"\n    | \"mobileCardLinkable\"\n    | \"mobileCard\"\n    | \"mobilePrimaryCol\"\n    | \"mobileSecondaryColumns\"\n    | \"mobileExpandAsDialog\"\n    | \"compact\"\n    | \"large\"\n  > {\n  ctx: RefObject<DataTableRowCtx<T>>;\n  rowKey: string | number;\n  expanded: boolean;\n  /** The opened row's content (`openedRowContent`); `null` on a closed card. */\n  expansion: ReactNode;\n  className: string | undefined;\n  attrs: Record<string, string | undefined> | undefined;\n  /** The table has `onRowClick`. */\n  interactive: boolean;\n  href: string | undefined;\n  /** `mobileSwipeActions`, or the swipes derived from `rowActions` — by identity. */\n  swipeActionsFor: ((row: T) => MobileSwipeActions | null) | undefined;\n  /** The table has `selection`. */\n  selectionOn: boolean;\n  selectActive: boolean;\n  selectable: boolean;\n  selected: boolean;\n}\n\nconst yes = () => true;\n\nfunction DataTableMobileRowImpl<T>({\n  ctx,\n  rowKey: key,\n  expanded,\n  expansion,\n  className,\n  attrs,\n  interactive,\n  href,\n  selectionOn,\n  selectActive,\n  selectable,\n  selected,\n  ...rest\n}: DataTableMobileRowProps<T>) {\n  const { row } = rest;\n  // `MobileRow` keeps its own shape (functions of the row); these hand it the values the\n  // table derived, and the handlers read the latest props through `ctx`.\n  return (\n    <MobileRow\n      {...rest}\n      isExpanded={expanded ? yes : undefined}\n      openedRowContent={() => expansion}\n      rowClassName={() => className}\n      rowAttributes={() => attrs}\n      onRowClick={interactive ? (r) => ctx.current.onRowClick!(r) : undefined}\n      rowHref={href !== undefined ? () => href : undefined}\n      select={\n        selectionOn\n          ? {\n              active: selectActive,\n              selectable,\n              selected,\n              onToggle: (checked) => {\n                ctx.current.setAnchor(key);\n                ctx.current.onToggle?.(row, checked);\n              },\n              onLongPress: () => ctx.current.onLongPress(row),\n            }\n          : null\n      }\n    />\n  );\n}\n\n/** One phone card, memoised like {@link DataTableRow}. */\nexport const DataTableMobileRow = memo(DataTableMobileRowImpl, sameProps) as <T>(\n  props: DataTableMobileRowProps<T> & { key?: string | number },\n) => ReactNode;\n"],"mappings":";AAiLI,cAaE,YAbF;AA6IQ;AA9TZ,SAAS,UAAU,YAAY;AAE/B,SAAS,SAAS,YAAY,aAAa,gBAAgB,cAAc,sBAAsB;AAC/F,SAAS,iBAAiB,4BAA4B;AACtD,SAAS,iBAAsC;AAE/C,SAAS,UAAU;AA+CnB,SAAS,UACP,GACA,GACS;AACT,MAAI,MAAM,EAAG,QAAO;AACpB,MAAI,CAAC,KAAK,CAAC,EAAG,QAAO;AACrB,QAAM,KAAK,OAAO,KAAK,CAAC;AACxB,MAAI,GAAG,WAAW,OAAO,KAAK,CAAC,EAAE,OAAQ,QAAO;AAChD,aAAW,KAAK,GAAI,KAAI,EAAE,CAAC,MAAM,EAAE,CAAC,EAAG,QAAO;AAC9C,SAAO;AACT;AAEA,SAAS,UAAoE,MAAS,MAAkB;AACtG,aAAW,KAAK,OAAO,KAAK,IAAI,GAAkB;AAChD,QAAI,MAAM,QAAS;AACnB,QAAI,CAAC,OAAO,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC,CAAC,EAAG,QAAO;AAAA,EAC3C;AACA,SAAO,UAAU,KAAK,OAAO,KAAK,KAAK;AACzC;AAIA,SAAS,aAAa,MAAmB,KAAsB;AAC7D,MAAI,EAAE,OAAO,cAAe,QAAO;AAEnC,QAAM,QAAQ,KAAK,QAAQ,OAAO;AAClC,MAAI,CAAC,MAAO,QAAO;AACnB,QAAM,OAAO,MAAM,KAAK,MAAM,OAAO,EAAE;AAAA,IAAQ,CAAC,SAC9C,MAAM,KAAK,KAAK,QAAQ,EAAE;AAAA,MACxB,CAAC,OAA0B,cAAc,eAAe,GAAG,aAAa,cAAc;AAAA,IACxF;AAAA,EACF;AACA,QAAM,IAAI,KAAK,QAAQ,IAAI;AAC3B,QAAM,SACJ,QAAQ,cACJ,KAAK,IAAI,CAAC,IACV,QAAQ,YACN,KAAK,IAAI,CAAC,IACV,QAAQ,SACN,KAAK,CAAC,IACN,QAAQ,QACN,KAAK,KAAK,SAAS,CAAC,IACpB;AAGZ,UAAQ,MAAM;AACd,SAAO;AACT;AACA,MAAM,eAAe,EAAE,WAAW,GAAG,SAAS,GAAG,MAAM,GAAG,KAAK,EAAE;AAsCjE,SAAS,iBAAoB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,WAAW,iBAAiB;AASlC,QAAM,aAAa,gBACjB;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,UAAU;AAAA,MACV,WAAU;AAAA,MACV,cAAY;AAAA,MACZ,iBAAe;AAAA,MACf,iBAAe,YAAY,WAAW;AAAA,MAEtC,SAAS,MAAM,IAAI,QAAQ,WAAY,GAAG;AAAA;AAAA,EAC5C,IACE;AACJ,SACE,qBAAC,YACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG,WAAW,KAAK;AAAA,QACpB,iBAAe;AAAA,QACf,kBAAgB,WAAW,WAAW;AAAA,QACtC,gBAAc,gBAAgB,KAAK;AAAA,QACnC,UAAU,gBAAiB,WAAW,IAAI,KAAM;AAAA,QAChD,SACE,gBACI,CAAC,MAAM;AACL,cAAI,EAAE,WAAW,EAAE,cAAe,KAAI,QAAQ,eAAe,GAAG;AAAA,QAClE,IACA;AAAA,QAEN,WACE,gBACI,CAAC,MAAM;AAIL,cAAI,EAAE,WAAW,EAAE,cAAe;AAClC,cAAI,EAAE,UAAU,EAAE,WAAW,EAAE,QAAS;AACxC,cAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AAEtC,cAAE,eAAe;AACjB,gBAAI,QAAQ,WAAY,GAAG;AAC3B;AAAA,UACF;AACA,cAAI,EAAE,SAAU;AAChB,gBAAM,OAAO,IAAI,QAAQ;AACzB,cAAI,OAAO,KAAK,UAAU,EAAE,GAAG,IAAI,aAAa,EAAE,eAAe,EAAE,GAAG,EAAG,GAAE,eAAe;AAAA,QAC5F,IACA;AAAA,QAEN,WAAW;AAAA,UACT;AAAA,UACA,kBAAkB;AAAA;AAAA;AAAA;AAAA,UAIlB,iBACE;AAAA,UACF;AAAA,QACF;AAAA,QACA,SACE,iBACI,CAAC,MAA4C;AAC3C,gBAAM,IAAI,IAAI;AAKd,cAAI,eAAe,EAAE,QAAQ,EAAE,aAAa,EAAG;AAC/C,cAAI,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAG;AAQ5C,cAAI,EAAE,YAAY,EAAE,UAAU,GAAG,GAAG;AAClC,gBAAI,EAAE,UAAU;AAGd,qBAAO,eAAe,GAAG,gBAAgB;AACzC,kBAAI,EAAE,YAAY,QAAQ,EAAG;AAE7B,gBAAE,UAAU,GAAG;AACf,gBAAE,SAAS,KAAK,CAAC,EAAE,WAAW,GAAG,CAAC;AAClC;AAAA,YACF;AACA,gBAAI,EAAE,WAAW,EAAE,SAAS;AAC1B,gBAAE,UAAU,GAAG;AACf,gBAAE,SAAS,KAAK,CAAC,EAAE,WAAW,GAAG,CAAC;AAClC;AAAA,YACF;AAAA,UACF;AACA,YAAE,aAAa,GAAG;AAAA,QACpB,IACA;AAAA,QAGL;AAAA,6BACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,GAAG,aAAa,UAAU,kBAAkB,gBAAgB;AAAA,cAGvE,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,cAEjC,wBACC;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,WAAW,GAAG,qBAAqB,UAAU,aAAa,QAAQ;AAAA,kBAClE,SAAS;AAAA,kBAYT,SAAS,CAAC,MAAM;AACd,wBAAI,EAAE,YAAY,IAAI,QAAQ,YAAY,QAAQ,GAAG;AACnD,wBAAE,eAAe;AACjB,0BAAI,QAAQ,eAAe,EAAE,WAAW;AAAA,oBAC1C;AAAA,kBACF;AAAA,kBACA,UAAU,CAAC,MAAM;AACf,0BAAM,IAAI,IAAI;AACd,wBAAI,EAAE,eAAe,EAAE,WAAW,EAAG;AACrC,sBAAE,UAAU,GAAG;AACf,sBAAE,WAAW,KAAK,EAAE,OAAO,OAAO;AAAA,kBACpC;AAAA,kBACA,cAAY;AAAA;AAAA,cACd;AAAA;AAAA,UAEJ;AAAA,UAED,QAAQ,IAAI,CAAC,KAAK,aAAa;AAC9B,kBAAM,QAAQ,OAAO,IAAI,GAAG;AAE5B,kBAAM,MAAM,eAAe,IAAI,YAAY,GAAG,CAAC;AAC/C,kBAAM,SAAS,QAAQ,EAAE,OAAO,UAAU,OAAO,UAAU,MAAM,IAAI;AACrE,mBACE;AAAA,cAAC;AAAA;AAAA,gBACE,GAAG,IAAI;AAAA,gBACR,KAAK,IAAI;AAAA,gBACT,YAAU,IAAI;AAAA,gBACd,OAAO,IAAI,SAAS,SAAS,EAAE,GAAG,IAAI,OAAO,GAAG,OAAO,IAAI;AAAA,gBAC3D,WAAW;AAAA,kBACT;AAAA,kBACA,UAAU,cAAc;AAAA,kBACxB,SAAS;AAAA,kBACT,IAAI,OAAO,kBAAkB,aAAa;AAAA,kBAC1C,aAAa,IAAI,SAAS;AAAA,kBAC1B,aAAa,IAAI,SAAS;AAAA,gBAC5B;AAAA;AAAA,cAEC,aAAa,KAAK;AAAA,cAClB,QAAQ,cAAc;AAAA;AAAA;AAAA;AAAA,gBAIrB,oBAAC,WAAQ,MAAY,WAAU,SAAQ,iBAAc,IAClD,cAAI,KAAK,GAAG,GACf;AAAA,kBAEA,IAAI,KAAK,GAAG;AAAA,YAEhB;AAAA,UAEJ,CAAC;AAAA;AAAA;AAAA,IACH;AAAA,IACC,aACC;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,gBAAgB,WAAW;AAAA,QAC/B,iBAAe,WAAW,eAAe,IAAI;AAAA,QAC7C,mBAAiB,WAAW,WAAW;AAAA,QACvC,WAAU;AAAA,QAqBV,8BAAC,QAAG,SAAS,cAAc,WAAU,OACnC,8BAAC,SAAI,WAAU,kBACb;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,UAAU,cAAc;AAAA,YAC1B;AAAA,YAEC;AAAA;AAAA,QACH,GACF,GACF;AAAA;AAAA,IACF;AAAA,KAEJ;AAEJ;AAIO,MAAM,eAAe,KAAK,kBAAkB,SAAS;AAuC5D,MAAM,MAAM,MAAM;AAElB,SAAS,uBAA0B;AAAA,EACjC;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA+B;AAC7B,QAAM,EAAE,IAAI,IAAI;AAGhB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,YAAY,WAAW,MAAM;AAAA,MAC7B,kBAAkB,MAAM;AAAA,MACxB,cAAc,MAAM;AAAA,MACpB,eAAe,MAAM;AAAA,MACrB,YAAY,cAAc,CAAC,MAAM,IAAI,QAAQ,WAAY,CAAC,IAAI;AAAA,MAC9D,SAAS,SAAS,SAAY,MAAM,OAAO;AAAA,MAC3C,QACE,cACI;AAAA,QACE,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,UAAU,CAAC,YAAY;AACrB,cAAI,QAAQ,UAAU,GAAG;AACzB,cAAI,QAAQ,WAAW,KAAK,OAAO;AAAA,QACrC;AAAA,QACA,aAAa,MAAM,IAAI,QAAQ,YAAY,GAAG;AAAA,MAChD,IACA;AAAA;AAAA,EAER;AAEJ;AAGO,MAAM,qBAAqB,KAAK,wBAAwB,SAAS;","names":[]}
+{"version":3,"sources":["../../src/components/data-table-row.tsx"],"sourcesContent":["import { Fragment, memo } from \"react\";\nimport type { MouseEvent as ReactMouseEvent, ReactNode, RefObject } from \"react\";\nimport { RowLink, cleanAttrs, fromOutside, fromOwnControl, logicalAlign, splitCellProps } from \"./data-table-shared\";\nimport { GROW_CELL_CLASS, GROW_PEER_CELL_CLASS } from \"./data-table-fit\";\nimport { MobileRow, type MobileRowProps } from \"./data-table-mobile\";\nimport type { DataTableColumn, MobileSwipeActions } from \"./data-table\";\nimport { cn } from \"../lib/cn\";\n\n// DataTable's rows as memoised components (0.48.2, keksdose K-052-2, dev #632 — Marcel:\n// \"The table is extremely slow. Is it virtualised or is everytime the whole table\n// rendered?\"). The owner's selection, expansion and the roving focus all live ABOVE the\n// rows, so every tick re-rendered the whole table: on keksdose's register one checkbox\n// cost 430–1200 ms of INP at 271 rows. A row now bails out unless one of its own inputs\n// changed.\n//\n// What a row compares, and so the contract a call site keeps:\n//  * the row object, its index and its key;\n//  * what the table derived for it from the caller's functions, as PRIMITIVES — selected,\n//    selectable, expanded, its tab stop, its `rowClassName` string, its `rowHref`, and\n//    its `rowAttributes` compared key by key. The functions themselves may be inline;\n//  * the column definitions BY IDENTITY: a cell is the caller's render function, and\n//    what it reads is the caller's to say. A page that memoises its columns (keksdose's\n//    `useTransactionColumns`) gets the bail-out; one that writes them inline gets a new\n//    array every render and the full re-render it always had — never a stale cell;\n//  * an OPEN row's detail (`expandedRow`) is called on every render, so it re-renders\n//    with the table as before, and an editor inside it keeps its live inputs.\n// The handlers do not take part: they read the table's latest props through `ctx`, a\n// ref the table refreshes each commit, so a row that bailed out still acts on the\n// current selection and the current `onRowClick`.\n\n/** What a row's handlers read at event time — DataTable's latest props and helpers. */\nexport interface DataTableRowCtx<T> {\n  onRowClick: ((row: T) => void) | undefined;\n  onToggle: ((row: T, checked: boolean) => void) | undefined;\n  isSelected: (row: T) => boolean;\n  canSelect: (row: T) => boolean;\n  selectRange: (toIndex: number) => boolean;\n  /** Anchor the next Shift+click range on this row's key. */\n  setAnchor: (key: string | number) => void;\n  /** Remember the checkbox click that drew a range… */\n  markRangeClick: (e: Event) => void;\n  /** …and drop that click's own change event (true once for it). */\n  takeRangeClick: (e: Event) => boolean;\n  setFocusRowKey: (key: string | number) => void;\n  /** The phone card's long press: enter selection mode with this row selected. */\n  onLongPress: (row: T) => void;\n  /** Under `virtualize` (0.48.2): Arrow/Home/End over every row, rendered or not. True\n   *  when the key was one of them. Without it the roving walks the rendered rows. */\n  moveFocus?: (fromIndex: number, key: string) => boolean;\n}\n\n/** `rowAttributes`' result compared key by key: a call site returns a fresh object (or\n *  `undefined`) per call, and its values are strings. */\nfunction sameAttrs(\n  a: Record<string, string | undefined> | undefined,\n  b: Record<string, string | undefined> | undefined,\n): boolean {\n  if (a === b) return true;\n  if (!a || !b) return false;\n  const ak = Object.keys(a);\n  if (ak.length !== Object.keys(b).length) return false;\n  for (const k of ak) if (a[k] !== b[k]) return false;\n  return true;\n}\n\nfunction sameProps<P extends { attrs?: Record<string, string | undefined> }>(prev: P, next: P): boolean {\n  for (const k of Object.keys(next) as (keyof P)[]) {\n    if (k === \"attrs\") continue;\n    if (!Object.is(prev[k], next[k])) return false;\n  }\n  return sameAttrs(prev.attrs, next.attrs);\n}\n\n/** Arrow/Home/End between the focusable rows of the table's bodies — the roving half of\n *  the keyboard-activatable rows (see the row's `onKeyDown`). */\nfunction moveRowFocus(from: HTMLElement, key: string): boolean {\n  if (!(key in ROW_NAV_KEYS)) return false;\n  // Every body of the table: a grouped table (`groupBy`, 0.48) has one per group.\n  const table = from.closest(\"table\");\n  if (!table) return false;\n  const rows = Array.from(table.tBodies).flatMap((body) =>\n    Array.from(body.children).filter(\n      (el): el is HTMLElement => el instanceof HTMLElement && el.hasAttribute(\"data-row-nav\"),\n    ),\n  );\n  const i = rows.indexOf(from);\n  const target =\n    key === \"ArrowDown\"\n      ? rows[i + 1]\n      : key === \"ArrowUp\"\n        ? rows[i - 1]\n        : key === \"Home\"\n          ? rows[0]\n          : key === \"End\"\n            ? rows[rows.length - 1]\n            : undefined;\n  // At either end the key is still consumed, or ArrowDown on the last row would\n  // scroll the page out from under a focused row.\n  target?.focus();\n  return true;\n}\nconst ROW_NAV_KEYS = { ArrowDown: 1, ArrowUp: 1, Home: 1, End: 1 } as const;\n\n// ---------- Desktop row ----------\n\nexport interface DataTableRowProps<T> {\n  row: T;\n  rowIndex: number;\n  rowKey: string | number;\n  ctx: RefObject<DataTableRowCtx<T>>;\n  columns: DataTableColumn<T>[];\n  widths: Record<string, number>;\n  growDrawn: boolean;\n  linkColumn: DataTableColumn<T> | undefined;\n  href: string | undefined;\n  /** The selection column is drawn (DataTable's `selection`). */\n  selectionColumn: boolean;\n  selectable: boolean;\n  selected: boolean;\n  expanded: boolean;\n  /** The open row's detail; `null` on a closed row. */\n  expansion: ReactNode;\n  /** The row carries the visually hidden disclosure button (focusable rows that expand). */\n  disclosure: boolean;\n  detailId: string;\n  rowsFocusable: boolean;\n  rowInteractive: boolean;\n  tabbable: boolean;\n  className: string | undefined;\n  attrs: Record<string, string | undefined> | undefined;\n  compact: boolean;\n  totalColSpan: number;\n  rowDetailsLabel: string;\n  selectRowLabel: string;\n  /** Under `virtualize` (0.48.2): the row's `aria-rowindex` (its open detail row is the\n   *  next), and the row is marked with its index for the window's measuring. */\n  ariaRowIndex?: number;\n}\n\nfunction DataTableRowImpl<T>({\n  row,\n  rowIndex,\n  rowKey: key,\n  ctx,\n  columns,\n  widths,\n  growDrawn,\n  linkColumn,\n  href,\n  selectionColumn,\n  selectable,\n  selected,\n  expanded,\n  expansion,\n  disclosure: hasDisclosure,\n  detailId,\n  rowsFocusable,\n  rowInteractive,\n  tabbable,\n  className,\n  attrs,\n  compact,\n  totalColSpan,\n  rowDetailsLabel,\n  selectRowLabel,\n  ariaRowIndex,\n}: DataTableRowProps<T>) {\n  const windowed = ariaRowIndex !== undefined;\n  // Whether the row is open, said where ARIA allows it (round 0.34, the\n  // showcase's axe check): `aria-expanded` belongs to a treegrid's row, not a\n  // table's, and the <tr> wore it. A disclosure button in the first cell carries\n  // it now, with `aria-controls` on the detail row while that is there.\n  // Visually hidden and not a tab stop: the row stays the one roving stop, with\n  // Enter/Space and the whole-row click — this is the screen reader cursor's\n  // way in, and where it hears the state. Named by `aria-label`, so the cell's\n  // text stays the cell's own.\n  const disclosure = hasDisclosure ? (\n    <button\n      type=\"button\"\n      tabIndex={-1}\n      className=\"sr-only-fixed\"\n      aria-label={rowDetailsLabel}\n      aria-expanded={expanded}\n      aria-controls={expansion ? detailId : undefined}\n      // The row's own handler leaves a click on a control inside it alone.\n      onClick={() => ctx.current.onRowClick!(row)}\n    />\n  ) : null;\n  return (\n    <Fragment>\n      <tr\n        {...cleanAttrs(attrs)}\n        aria-rowindex={ariaRowIndex}\n        data-row-index={windowed ? rowIndex : undefined}\n        data-row-nav={rowsFocusable ? \"\" : undefined}\n        tabIndex={rowsFocusable ? (tabbable ? 0 : -1) : undefined}\n        onFocus={\n          rowsFocusable\n            ? (e) => {\n                if (e.target === e.currentTarget) ctx.current.setFocusRowKey(key);\n              }\n            : undefined\n        }\n        onKeyDown={\n          rowsFocusable\n            ? (e) => {\n                // Only the row's own key presses: Enter on a nested button\n                // or link is that control's, and Space in a nested input\n                // is a space.\n                if (e.target !== e.currentTarget) return;\n                if (e.altKey || e.ctrlKey || e.metaKey) return;\n                if (e.key === \"Enter\" || e.key === \" \") {\n                  // Space would otherwise scroll the table.\n                  e.preventDefault();\n                  ctx.current.onRowClick!(row);\n                  return;\n                }\n                if (e.shiftKey) return;\n                const move = ctx.current.moveFocus;\n                if (move ? move(rowIndex, e.key) : moveRowFocus(e.currentTarget, e.key)) e.preventDefault();\n              }\n            : undefined\n        }\n        className={cn(\n          \"border-t border-subtle\",\n          rowInteractive && \"cursor-pointer hover:bg-hover\",\n          // The kit's focus frame width (§5, `--focus-ring-width`), drawn as an\n          // OUTLINE rather than FOCUS_RING's box-shadow: a shadow on a `<tr>`\n          // is not painted by every engine, an outline is.\n          rowsFocusable &&\n            \"focus-visible:bg-hover focus-visible:outline-focus focus-visible:-outline-offset-2 focus-visible:outline-brand\",\n          className,\n        )}\n        onClick={\n          rowInteractive\n            ? (e: ReactMouseEvent<HTMLTableRowElement>) => {\n                const c = ctx.current;\n                // A click on a control inside the row (a button, a link,\n                // an input the cell renders) is that control's — it must\n                // not also open the row. Cells no longer have to\n                // `stopPropagation` to get that.\n                if (fromOwnControl(e.target, e.currentTarget)) return;\n                if (fromOutside(e.target, e.currentTarget)) return;\n                // Modifier-clicks anywhere in the row drive\n                // selection instead of expanding it (feedback #289):\n                // Ctrl/Cmd toggles a single row, Shift selects the\n                // range from the last-toggled row (inclusive of this\n                // one) — the same as the checkbox, but for the whole\n                // row, which is what the checkbox-only version was\n                // missing.\n                if (c.onToggle && c.canSelect(row)) {\n                  if (e.shiftKey) {\n                    // Drop the text selection a shift-click would\n                    // otherwise smear across the rows.\n                    window.getSelection?.()?.removeAllRanges();\n                    if (c.selectRange(rowIndex)) return;\n                    // No anchor yet: treat it as the first pick.\n                    c.setAnchor(key);\n                    c.onToggle(row, !c.isSelected(row));\n                    return;\n                  }\n                  if (e.metaKey || e.ctrlKey) {\n                    c.setAnchor(key);\n                    c.onToggle(row, !c.isSelected(row));\n                    return;\n                  }\n                }\n                c.onRowClick?.(row);\n              }\n            : undefined\n        }\n      >\n        {selectionColumn && (\n          <td\n            className={cn(\"align-top\", compact ? \"w-8 px-2 py-1\" : \"w-10 px-3 py-2\")}\n            // Don't let selecting a row also trigger the row click\n            // (which expands/edits it).\n            onClick={(e) => e.stopPropagation()}\n          >\n            {selectable && (\n              <input\n                type=\"checkbox\"\n                className={cn(\"accent-indigo-600\", compact ? \"size-3.5\" : \"size-4\")}\n                checked={selected}\n                // Shift+click selects the range from the last toggled\n                // row. `preventDefault` puts the box back, but it does NOT\n                // stop React's `onChange`: React derives a checkbox's\n                // change from the `click` itself, after the browser has\n                // already flipped `checked` and before the cancellation\n                // reverts it — so the same click also reported itself as\n                // a single toggle, and the owner got `onToggleMany` and\n                // then `onToggle` for the clicked row. The click is\n                // remembered by identity and its change is dropped; a\n                // boolean flag would outlive a click whose change never\n                // came and swallow the user's next real one.\n                onClick={(e) => {\n                  if (e.shiftKey && ctx.current.selectRange(rowIndex)) {\n                    e.preventDefault();\n                    ctx.current.markRangeClick(e.nativeEvent);\n                  }\n                }}\n                onChange={(e) => {\n                  const c = ctx.current;\n                  if (c.takeRangeClick(e.nativeEvent)) return;\n                  c.setAnchor(key);\n                  c.onToggle?.(row, e.target.checked);\n                }}\n                aria-label={selectRowLabel}\n              />\n            )}\n          </td>\n        )}\n        {columns.map((col, colIndex) => {\n          const width = widths[col.key];\n          // The caller's first, the table's over it — see `cellProps`.\n          const own = splitCellProps(col.cellProps?.(row));\n          const pinned = width ? { width, minWidth: width, maxWidth: width } : undefined;\n          return (\n            <td\n              {...own.attrs}\n              key={col.key}\n              data-col={col.key}\n              style={own.style || pinned ? { ...own.style, ...pinned } : undefined}\n              className={cn(\n                \"align-top\",\n                compact ? \"px-2 py-1\" : \"px-3 py-2\",\n                width && \"overflow-hidden text-ellipsis\",\n                col.grow ? GROW_CELL_CLASS : growDrawn && GROW_PEER_CELL_CLASS,\n                logicalAlign(own.className),\n                logicalAlign(col.className),\n              )}\n            >\n              {colIndex === 0 && disclosure}\n              {col === linkColumn && href ? (\n                // No `onActivate`: the click is left to bubble to the\n                // <tr> handler above, which already owns expand-vs-select.\n                // Calling it here as well would toggle the row twice.\n                <RowLink href={href} className=\"block\" data-row-link=\"\">\n                  {col.cell(row)}\n                </RowLink>\n              ) : (\n                col.cell(row)\n              )}\n            </td>\n          );\n        })}\n      </tr>\n      {expansion && (\n        <tr\n          id={hasDisclosure ? detailId : undefined}\n          aria-rowindex={windowed ? ariaRowIndex + 1 : undefined}\n          data-row-detail={windowed ? rowIndex : undefined}\n          className=\"bg-surface-2 border-t border-subtle\"\n        >\n          {/* The detail panel spans every column. In an `auto` table\n              layout (the default here — columns only get fixed style\n              widths once the user resizes/auto-sizes them) the cell's\n              content preferred-width is redistributed across the\n              spanned columns, so a long expansion visibly re-sizes the\n              columns above it — and one-line content does not, since\n              its preferred width is small (feedback #104). Wrapping the\n              content in `w-0 min-w-full` pins the cell's preferred\n              width to ~0 (the explicit width:0 child), so it can never\n              perturb the columns; the div then fills to the full row\n              width only at paint time, and long text wraps within it.\n              Inside it the content is pinned to what the scroller SHOWS\n              (0.47, keksdose S4): on a table wider than its scroller a\n              table-wide panel put an inline editor's Save/Cancel off-screen.\n              `sticky start-0` holds it at the scroller's start edge (the\n              right one in RTL) as the row scrolls sideways, and\n              `--dt-visible-w` (the scroller's clientWidth, measured above)\n              sizes it; before the first measure, and in a table no wider\n              than its scroller, it is the full width as before. */}\n          <td colSpan={totalColSpan} className=\"p-0\">\n            <div className=\"w-0 min-w-full\">\n              <div\n                className={cn(\n                  \"sticky start-0 w-[var(--dt-visible-w,100%)] max-w-full\",\n                  compact ? \"px-2 py-2\" : \"px-3 py-3\",\n                )}\n              >\n                {expansion}\n              </div>\n            </div>\n          </td>\n        </tr>\n      )}\n    </Fragment>\n  );\n}\n\n/** One desktop row (its `<tr>` and, while open, its detail row), memoised — see the\n *  file's note for what it compares. */\nexport const DataTableRow = memo(DataTableRowImpl, sameProps) as <T>(\n  props: DataTableRowProps<T> & { key?: string | number },\n) => ReactNode;\n\n// ---------- Phone card ----------\n\nexport interface DataTableMobileRowProps<T>\n  extends Pick<\n    MobileRowProps<T>,\n    | \"row\"\n    | \"opensRow\"\n    | \"mobileDir\"\n    | \"mobileCardLinkable\"\n    | \"mobileCard\"\n    | \"mobilePrimaryCol\"\n    | \"mobileStatusColumns\"\n    | \"mobileSecondaryColumns\"\n    | \"mobileActionColumns\"\n    | \"mobileExpandAsDialog\"\n    | \"compact\"\n    | \"large\"\n  > {\n  ctx: RefObject<DataTableRowCtx<T>>;\n  rowKey: string | number;\n  expanded: boolean;\n  /** The opened row's content (`openedRowContent`); `null` on a closed card. */\n  expansion: ReactNode;\n  className: string | undefined;\n  attrs: Record<string, string | undefined> | undefined;\n  /** The table has `onRowClick`. */\n  interactive: boolean;\n  href: string | undefined;\n  /** `mobileSwipeActions`, or the swipes derived from `rowActions` — by identity. */\n  swipeActionsFor: ((row: T) => MobileSwipeActions | null) | undefined;\n  /** The table has `selection`. */\n  selectionOn: boolean;\n  selectActive: boolean;\n  selectable: boolean;\n  selected: boolean;\n}\n\nconst yes = () => true;\n\nfunction DataTableMobileRowImpl<T>({\n  ctx,\n  rowKey: key,\n  expanded,\n  expansion,\n  className,\n  attrs,\n  interactive,\n  href,\n  selectionOn,\n  selectActive,\n  selectable,\n  selected,\n  ...rest\n}: DataTableMobileRowProps<T>) {\n  const { row } = rest;\n  // `MobileRow` keeps its own shape (functions of the row); these hand it the values the\n  // table derived, and the handlers read the latest props through `ctx`.\n  return (\n    <MobileRow\n      {...rest}\n      isExpanded={expanded ? yes : undefined}\n      openedRowContent={() => expansion}\n      rowClassName={() => className}\n      rowAttributes={() => attrs}\n      onRowClick={interactive ? (r) => ctx.current.onRowClick!(r) : undefined}\n      rowHref={href !== undefined ? () => href : undefined}\n      select={\n        selectionOn\n          ? {\n              active: selectActive,\n              selectable,\n              selected,\n              onToggle: (checked) => {\n                ctx.current.setAnchor(key);\n                ctx.current.onToggle?.(row, checked);\n              },\n              onLongPress: () => ctx.current.onLongPress(row),\n            }\n          : null\n      }\n    />\n  );\n}\n\n/** One phone card, memoised like {@link DataTableRow}. */\nexport const DataTableMobileRow = memo(DataTableMobileRowImpl, sameProps) as <T>(\n  props: DataTableMobileRowProps<T> & { key?: string | number },\n) => ReactNode;\n"],"mappings":"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","names":[]}

package/dist/components/data-table.d.ts

@@ -21,6 +21,36 @@ export interface DataTableColumn<T> {
     headClassName?: string;
     mobilePrimary?: boolean;
     mobileHidden?: boolean;
+    /**
+     * This column on the phone's default card (0.49 KIT-7; ignored with `mobileCard`):
+     * `"primary"` — the card's title, as `mobilePrimary`; `"secondary"` — one of its
+     * fields; `"hidden"` — not on the card, as `mobileHidden`. The card shows at most
+     * three fields: the columns marked `"secondary"` when any
+     * is, else the first three visible columns after the title. A field whose value is
+     * empty — the cell returns `null`, `undefined`, `""` or the formatters' empty "—" —
+     * is left out of that card. The columns the card does not show go into the opened
+     * row with `mobileDetailsInRow`. A `noRowLink` column (the cell's own buttons or link)
+     * counts as a field: past the third it leaves the card with its action, and a
+     * development build says so once per table and column key. Give a column of row
+     * actions `role: "actions"` instead: it is then no field, and the card draws it after
+     * them.
+     */
+    mobile?: "primary" | "secondary" | "hidden";
+    /**
+     * What the column is (0.49 KIT-7), for the phone's default card; the desktop table is
+     * unchanged.
+     *
+     * - `"status"`: its value sits as a chip beside the title instead of as a label/value
+     *   line, and takes none of the card's three fields. A cell that returns text is drawn
+     *   in a neutral `Chip`; one that returns an element (a `Chip` with its own tone, a
+     *   `StatusDot`) is drawn as it is.
+     * - `"actions"`: the row's buttons (`rowActionsColumn` sets it). Never the card's title
+     *   and never one of its three fields: the card draws it after them, at its end,
+     *   whether or not other columns are marked `mobile: "secondary"`; only `mobileHidden`
+     *   / `mobile: "hidden"` take it off. Its cell keeps its own clicks, as `noRowLink`:
+     *   no row link wraps it, and a card that draws it is not a link.
+     */
+    role?: "status" | "actions";
     /**
      * Set on a column whose cell renders its own `<a>` (or anything else that must
      * keep its own click): the row anchor of `rowHref` then skips it and lands on
@@ -232,7 +262,10 @@ export interface DataTableProps<T> {
      * When true, mirror filter/sort/page state into URL search params so views are
      * shareable and bookmarkable. URL params used: `f.<column>`, `sort`, `p`, `ps`.
      * URL state takes precedence over localStorage on initial load. Requires the
-     * consuming app to render inside a react-router Router.
+     * consuming app to render inside a react-router Router (0.49: only with `urlSync` — a
+     * table without it needs none). With `urlSync` and no Router, a development build
+     * throws "DataTable urlSync requires a Router"; a production build keeps the view in
+     * local state instead.
      *
      * `{ prefix }` namespaces them, for two URL-synced tables on one page:
      * `urlSync={{ prefix: "inv." }}` uses `inv.f.<column>`, `inv.sort`, `inv.p`, `inv.ps`.

package/dist/components/data-table.js

@@ -7,7 +7,15 @@ import { isTableOwnColumn, useRowActionColumn } from "./data-table-row-actions.j
 import { useColumnResize } from "./data-table-resize.js";
 import { useRangeSelection } from "./data-table-selection.js";
 import { columnLabel, logicalAlign, resolveDataTableLabels } from "./data-table-shared.js";
-import { MobileFilters, MobileSelectBar, MobileSort, StackedFields } from "./data-table-mobile.js";
+import {
+  MobileFilters,
+  MobileSelectBar,
+  MobileSort,
+  StackedFields,
+  keepsOwnClicks,
+  mobileCardColumns,
+  useCardColumnWarnings
+} from "./data-table-mobile.js";
 import { DataTableMobileRow, DataTableRow } from "./data-table-row.js";
 import { DataTableHead } from "./data-table-head.js";
 import { DataTableLeadingRow } from "./data-table-leading-row.js";
@@ -317,7 +325,7 @@ function DataTable({
     [columns, hiddenCols, autoHidden]
   );
   const growDrawn = visibleColumns.some((c) => c.grow);
-  const linkColumn = rowHref ? visibleColumns.find((c) => c.mobilePrimary && !c.noRowLink) ?? visibleColumns.find((c) => !c.noRowLink) : void 0;
+  const linkColumn = rowHref ? visibleColumns.find((c) => c.mobilePrimary && !keepsOwnClicks(c)) ?? visibleColumns.find((c) => !keepsOwnClicks(c)) : void 0;
   const { startResize, moveResize, finishResize, autoSizeAll } = useColumnResize({
     headRefs,
     widths,
@@ -350,13 +358,28 @@ function DataTable({
     return () => ro.disconnect();
   }, [measuresVisibleWidth]);
   const edgeFadeProps = useEdgeFade(desktopScroller, edgeFade && isMdUp);
-  const mobileColumns = useMemo(() => visibleColumns.filter((c) => !c.mobileHidden), [visibleColumns]);
-  const mobilePrimaryCol = mobileColumns.find((c) => c.mobilePrimary) ?? mobileColumns[0] ?? null;
-  const mobileSecondaryColumns = useMemo(
-    () => mobileColumns.filter((c) => c !== mobilePrimaryCol),
-    [mobileColumns, mobilePrimaryCol]
+  const mobileColumns = useMemo(
+    () => visibleColumns.filter((c) => !c.mobileHidden && c.mobile !== "hidden"),
+    [visibleColumns]
+  );
+  const {
+    primary: mobilePrimaryCol,
+    status: mobileStatusColumns,
+    fields: mobileSecondaryColumns,
+    actions: mobileActionColumns
+  } = useMemo(() => mobileCardColumns(mobileColumns), [mobileColumns]);
+  useCardColumnWarnings(
+    columns,
+    !mobileCard && !mobileDetailsInRow,
+    storageKey ?? (typeof urlSync === "object" ? urlSync.prefix : void 0)
   );
-  const mobileDetailColumns = mobileDetailsInRow ? visibleColumns.filter((c) => c.mobileHidden) : [];
+  const onCard = /* @__PURE__ */ new Set([
+    ...mobilePrimaryCol ? [mobilePrimaryCol] : [],
+    ...mobileStatusColumns,
+    ...mobileSecondaryColumns,
+    ...mobileActionColumns
+  ]);
+  const mobileDetailColumns = mobileDetailsInRow ? visibleColumns.filter((c) => mobileCard ? c.mobileHidden || c.mobile === "hidden" : !onCard.has(c)) : [];
   const opensRow = !!expandedRow || mobileDetailColumns.length > 0;
   const openedRowContent = (row) => {
     const detail = expandedRow?.(row) ?? null;
@@ -366,7 +389,7 @@ function DataTable({
       detail
     ] });
   };
-  const mobileCardLinkable = mobileColumns.every((c) => !c.noRowLink);
+  const mobileCardLinkable = (mobileCard ? mobileColumns : [...onCard]).every((c) => !keepsOwnClicks(c));
   const [mobileDir, setMobileDir] = useState("ltr");
   const mobileRootRef = (el) => {
     if (!el) return;
@@ -468,7 +491,9 @@ function DataTable({
         mobileCardLinkable,
         mobileCard,
         mobilePrimaryCol,
+        mobileStatusColumns,
         mobileSecondaryColumns,
+        mobileActionColumns,
         mobileExpandAsDialog,
         compact,
         large,