@eifi1/ui-kit 0.48.2 → 0.50.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/data-table-row-actions.tsx"],"sourcesContent":["import { isValidElement, useCallback, useMemo } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Pencil, Trash2 } from \"lucide-react\";\nimport { RowActions, type RowAction, type RowActionTone } from \"./row-actions\";\nimport type { SwipeAction } from \"./swipeable-row\";\nimport type { DataTableLabels } from \"./data-table-labels\";\nimport type {\n  DataTableColumn,\n  DataTableDensity,\n  DataTableDesktopSwipeActions,\n  DataTableProps,\n  DataTableRowAction,\n  MobileSwipeActions,\n} from \"./data-table\";\n\n// DataTable's per-row actions (`rowActions`): the actions column on a wide screen and\n// the swipes on a phone card. Moved out of data-table.tsx whole (refactor audit\n// 2026-10, MOD-3 step 1); internal — the public types stay in data-table.tsx.\n\n/** The actions column's key. Not a column a caller declares, so it is kept out of the\n *  column-settings panel. */\nexport const ROW_ACTIONS_KEY = \"__rowActions\";\n\n/** The key of the column derived from `mobileSwipeActions` (0.46, dev#598) — the\n *  table's own too. */\nexport const SWIPE_ACTIONS_KEY = \"__swipeActions\";\n\n/** A column the TABLE adds, not the caller: out of the column settings and the count,\n *  never resized, never the totals row's header. */\nexport function isTableOwnColumn(key: string): boolean {\n  return key === ROW_ACTIONS_KEY || key === SWIPE_ACTIONS_KEY;\n}\n\n/**\n * An actions column's heading (0.46.1, keksdose dev#598 rework — Marcel: a VISIBLE\n * \"Actions\" heading on every table with an actions column): the caller's node, else the\n * word on screen; `false` is the pre-0.46.1 heading, a screen reader's name only.\n */\nexport function actionsHeading(header: ReactNode | false | undefined, word: string): ReactNode {\n  if (header === false) return <span className=\"sr-only\">{word}</span>;\n  return header ?? word;\n}\n\n/** A curtain's tone, as an icon button's (keksdose's `toneOf`): only the tones that MEAN\n *  something on a quiet icon carry over; a status colour, a hue or an app's `paint` stays\n *  on the curtain and reads muted. */\nfunction swipeTone(action: SwipeAction): RowActionTone {\n  switch (action.tone) {\n    case \"danger\":\n    case \"warning\":\n    case \"info\":\n      return action.tone;\n    default:\n      return \"muted\";\n  }\n}\n\n/**\n * A row's swipe plan as desktop row actions (dev#598) — what DataTable's\n * `desktopSwipeActions` column draws, for an app that builds its own actions column (or\n * a `RowActions` outside a table) from the same `mobileSwipeActions` plan, so the two\n * cannot drift (public since 0.46.1, keksdose N3).\n *\n * `end` then `start` — the physical `right` / `left` only where the logical side is\n * missing, as the card reads them — each action once, told apart by its `id`, else by its\n * label (two stages with one label would be one button twice). Each button runs the\n * swipe's own `onCommit`; a swipe's `danger` / `warning` / `info` tone carries over, any\n * other reads `muted`. `options.omit` leaves an action out, `options.commit` gives it a\n * `CommitScope` (see {@link DataTableDesktopSwipeActions}). A `null` plan is `[]`.\n *\n *     <RowActions actions={swipePlanRowActions(plan(row), row, { omit })} name={row.title} />\n */\nexport function swipePlanRowActions<T>(\n  plan: MobileSwipeActions | null | undefined,\n  row: T,\n  options: Pick<DataTableDesktopSwipeActions<T>, \"omit\" | \"commit\"> = {},\n): RowAction[] {\n  if (!plan) return [];\n  const out: RowAction[] = [];\n  const seen = new Set<string>();\n  for (const action of [...(plan.end ?? plan.right ?? []), ...(plan.start ?? plan.left ?? [])]) {\n    const key = action.id ?? action.label;\n    if (seen.has(key)) continue;\n    seen.add(key);\n    if (options.omit?.(action, row)) continue;\n    const commit = typeof options.commit === \"function\" ? options.commit(action, row) : options.commit;\n    out.push({\n      key,\n      label: action.label,\n      icon: isValidElement(action.icon)\n        ? action.icon\n        : action.icon != null && action.icon !== false\n          ? <>{action.icon}</>\n          : undefined,\n      tone: swipeTone(action),\n      commit,\n      onSelect: action.onCommit,\n    });\n  }\n  return out;\n}\n\ninterface ResolvedRowAction<T> {\n  key: string;\n  label: string;\n  icon: ReactNode;\n  tone: \"default\" | \"danger\";\n  swipe: \"start\" | \"end\" | false;\n  action: DataTableRowAction<T>;\n}\n\nfunction resolveRowAction<T>(\n  action: DataTableRowAction<T>,\n  index: number,\n  labels: DataTableLabels,\n): ResolvedRowAction<T> {\n  const tone = action.tone ?? (action.kind === \"delete\" ? \"danger\" : \"default\");\n  return {\n    key: action.kind ?? `${index}:${action.label ?? \"\"}`,\n    label: action.label ?? (action.kind === \"edit\" ? labels.edit : action.kind === \"delete\" ? labels.delete : \"\"),\n    icon:\n      action.icon ??\n      (action.kind === \"edit\" ? <Pencil /> : action.kind === \"delete\" ? <Trash2 /> : null),\n    tone,\n    swipe: action.swipe ?? (tone === \"danger\" ? \"start\" : \"end\"),\n    action,\n  };\n}\n\n/** Ask, then act. */\nasync function runRowAction<T>(action: DataTableRowAction<T>, row: T): Promise<void> {\n  if (action.confirm && !(await action.confirm(row))) return;\n  action.onAction(row);\n}\n\n/** A resolved row action as {@link RowActions} takes it. Its `icon` is any node; a\n *  non-element one (a string glyph) is wrapped, since RowAction wants an element. */\nfunction toRowAction<T>(a: ResolvedRowAction<T>, row: T): RowAction {\n  return {\n    key: a.key,\n    label: a.label,\n    icon: isValidElement(a.icon) ? a.icon : a.icon != null && a.icon !== false ? <>{a.icon}</> : undefined,\n    tone: a.tone,\n    disabledReason: a.action.disabledReason?.(row),\n    onSelect: () => void runRowAction(a.action, row),\n  };\n}\n\n/**\n * The caller's columns with the actions column appended, and the same actions as a\n * phone card's swipes (`swipesFromActions`; DataTable uses it unless the caller passes\n * `mobileSwipeActions`). Without `rowActions` the columns come back as given.\n *\n * The actions column is appended to the caller's columns rather than drawn as a\n * second special case beside the selection column: it then gets the cell padding,\n * the widths and the phone rules (`mobileHidden`) every other column gets.\n */\nexport function useRowActionColumn<T>({\n  columns: columnsProp,\n  rowActions,\n  rowActionsHeader,\n  rowName,\n  labels,\n  density,\n  mobileSwipeActions,\n  desktopSwipeActions,\n}: {\n  columns: DataTableColumn<T>[];\n  rowActions: DataTableProps<T>[\"rowActions\"];\n  rowActionsHeader?: DataTableProps<T>[\"rowActionsHeader\"];\n  rowName: DataTableProps<T>[\"rowName\"];\n  labels: DataTableLabels;\n  density: DataTableDensity;\n  mobileSwipeActions?: DataTableProps<T>[\"mobileSwipeActions\"];\n  desktopSwipeActions?: DataTableProps<T>[\"desktopSwipeActions\"];\n}): {\n  columns: DataTableColumn<T>[];\n  swipesFromActions: (row: T) => MobileSwipeActions | null;\n} {\n  const rowActionsFor = useCallback(\n    (row: T): ResolvedRowAction<T>[] =>\n      rowActions\n        ? (typeof rowActions === \"function\" ? rowActions(row) : rowActions)\n            .filter((a) => !a.hidden?.(row))\n            .map((a, i) => resolveRowAction(a, i, labels))\n        : [],\n    [rowActions, labels],\n  );\n  // dev#598: the desktop half of the caller's swipes. On by default, except beside\n  // `rowActions`, whose column already is the desktop's (and whose swipes these usually\n  // are). The options object is often a fresh literal per render; its parts are the deps.\n  const swipeOptions = typeof desktopSwipeActions === \"object\" ? desktopSwipeActions : undefined;\n  const swipeColumnOn =\n    !!mobileSwipeActions && (desktopSwipeActions === undefined ? !rowActions : desktopSwipeActions !== false);\n  const swipeOmit = swipeOptions?.omit;\n  const swipeName = swipeOptions?.name;\n  const swipeCollapse = swipeOptions?.collapse;\n  const swipeCommit = swipeOptions?.commit;\n  const swipeHeader = swipeOptions?.header;\n  const swipeColumn = useMemo<DataTableColumn<T> | null>(\n    () =>\n      swipeColumnOn\n        ? {\n            key: SWIPE_ACTIONS_KEY,\n            header: actionsHeading(swipeHeader, labels.actions),\n            cell: (row) => (\n              <RowActions\n                actions={swipePlanRowActions(mobileSwipeActions!(row), row, { omit: swipeOmit, commit: swipeCommit })}\n                name={(swipeName ?? rowName)?.(row)}\n                collapse={swipeCollapse}\n                size={density === \"compact\" ? \"2xs\" : \"xs\"}\n                // The last column's tooltips open toward the row's start.\n                tooltipSide=\"start\"\n                labels={{ actions: labels.actions }}\n                className=\"justify-end\"\n              />\n            ),\n            className: \"w-px whitespace-nowrap text-end\",\n            // The heading over the buttons, at the row's end (0.46.1).\n            headClassName: \"w-px text-end\",\n            // On a phone the same actions are the card's swipes.\n            mobileHidden: true,\n            noRowLink: true,\n          }\n        : null,\n    [\n      swipeColumnOn,\n      mobileSwipeActions,\n      swipeOmit,\n      swipeCommit,\n      swipeName,\n      rowName,\n      swipeCollapse,\n      swipeHeader,\n      density,\n      labels.actions,\n    ],\n  );\n  const actionColumns = useMemo<DataTableColumn<T>[]>(\n    () =>\n      rowActions\n        ? [\n            ...columnsProp,\n            {\n              key: ROW_ACTIONS_KEY,\n              header: actionsHeading(rowActionsHeader, labels.actions),\n              // Through RowActions (0.32, §10.8): the icons inline at Normal, one \"⋯\"\n              // menu at Large once there are two — every label at once does not fit a\n              // row. Each control stops its own click: the row's handler already skips\n              // its controls, and this is for the caller who wraps the table in a\n              // clickable element of their own.\n              cell: (row) => (\n                <RowActions\n                  actions={rowActionsFor(row).map((a) => toRowAction(a, row))}\n                  name={rowName?.(row)}\n                  size={density === \"compact\" ? \"2xs\" : \"xs\"}\n                  labels={{ actions: labels.actions }}\n                  className=\"justify-end\"\n                />\n              ),\n              className: \"w-px whitespace-nowrap text-end\",\n              headClassName: \"w-px text-end\",\n              // On a phone the same actions are the card's swipes.\n              mobileHidden: true,\n              noRowLink: true,\n            },\n          ]\n        : columnsProp,\n    [columnsProp, rowActions, rowActionsHeader, rowActionsFor, rowName, labels.actions, density],\n  );\n  const columns = useMemo(\n    () => (swipeColumn ? [...actionColumns, swipeColumn] : actionColumns),\n    [actionColumns, swipeColumn],\n  );\n  // A stable function (0.48.2): the phone cards compare it by identity.\n  const swipesFromActions = useCallback((row: T): MobileSwipeActions | null => {\n    const swipes = rowActionsFor(row).filter((a) => a.swipe && !a.action.disabledReason?.(row));\n    if (!swipes.length) return null;\n    const toSwipe = (a: ResolvedRowAction<T>): SwipeAction => ({\n      label: a.label,\n      icon: a.icon,\n      onCommit: () => void runRowAction(a.action, row),\n      // The row action's tone, painted by SwipeableRow: its soft wash idle, its fill\n      // and that fill's foreground armed (0.33).\n      tone: a.tone === \"danger\" ? \"danger\" : \"brand\",\n    });\n    return {\n      start: swipes.filter((a) => a.swipe === \"start\").map(toSwipe),\n      end: swipes.filter((a) => a.swipe === \"end\").map(toSwipe),\n    };\n  }, [rowActionsFor]);\n  return { columns, swipesFromActions };\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/data-table-row-actions.tsx"],"sourcesContent":["import { isValidElement, useCallback, useMemo } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Pencil, Trash2 } from \"lucide-react\";\nimport { RowActions, type RowAction, type RowActionTone } from \"./row-actions\";\nimport type { SwipeAction } from \"./swipeable-row\";\nimport type { DataTableLabels } from \"./data-table-labels\";\nimport type {\n  DataTableColumn,\n  DataTableDensity,\n  DataTableDesktopSwipeActions,\n  DataTableProps,\n  DataTableRowAction,\n  MobileSwipeActions,\n} from \"./data-table\";\n\n// DataTable's per-row actions (`rowActions`): the actions column on a wide screen and\n// the swipes on a phone card. Moved out of data-table.tsx whole (refactor audit\n// 2026-10, MOD-3 step 1); internal — the public types stay in data-table.tsx.\n\n/** The actions column's key. Not a column a caller declares, so it is kept out of the\n *  column-settings panel. */\nexport const ROW_ACTIONS_KEY = \"__rowActions\";\n\n/** The key of the column derived from `mobileSwipeActions` (0.46, dev#598) — the\n *  table's own too. */\nexport const SWIPE_ACTIONS_KEY = \"__swipeActions\";\n\n/** A column the TABLE adds, not the caller: out of the column settings and the count,\n *  never resized, never the totals row's header. */\nexport function isTableOwnColumn(key: string): boolean {\n  return key === ROW_ACTIONS_KEY || key === SWIPE_ACTIONS_KEY;\n}\n\n/**\n * An actions column's heading (0.46.1, keksdose dev#598 rework — Marcel: a VISIBLE\n * \"Actions\" heading on every table with an actions column): the caller's node, else the\n * word on screen; `false` is the pre-0.46.1 heading, a screen reader's name only.\n */\nexport function actionsHeading(header: ReactNode | false | undefined, word: string): ReactNode {\n  if (header === false) return <span className=\"sr-only\">{word}</span>;\n  return header ?? word;\n}\n\n/** A curtain's tone, as an icon button's (keksdose's `toneOf`): only the tones that MEAN\n *  something on a quiet icon carry over; a status colour, a hue or an app's `paint` stays\n *  on the curtain and reads muted. */\nfunction swipeTone(action: SwipeAction): RowActionTone {\n  switch (action.tone) {\n    case \"danger\":\n    case \"warning\":\n    case \"info\":\n      return action.tone;\n    default:\n      return \"muted\";\n  }\n}\n\n/**\n * A row's swipe plan as desktop row actions (dev#598) — what DataTable's\n * `desktopSwipeActions` column draws, for an app that builds its own actions column (or\n * a `RowActions` outside a table) from the same `mobileSwipeActions` plan, so the two\n * cannot drift (public since 0.46.1, keksdose N3).\n *\n * `end` then `start` — the physical `right` / `left` only where the logical side is\n * missing, as the card reads them — each action once, told apart by its `id`, else by its\n * label (two stages with one label would be one button twice). Each button runs the\n * swipe's own `onCommit` — with no confirmation of the kit's (`confirm: false`), as the\n * swipe has none; a swipe's `danger` / `warning` / `info` tone carries over, any\n * other reads `muted`. `options.omit` leaves an action out, `options.commit` gives it a\n * `CommitScope` (see {@link DataTableDesktopSwipeActions}). A `null` plan is `[]`.\n *\n *     <RowActions actions={swipePlanRowActions(plan(row), row, { omit })} name={row.title} />\n */\nexport function swipePlanRowActions<T>(\n  plan: MobileSwipeActions | null | undefined,\n  row: T,\n  options: Pick<DataTableDesktopSwipeActions<T>, \"omit\" | \"commit\"> = {},\n): RowAction[] {\n  if (!plan) return [];\n  const out: RowAction[] = [];\n  const seen = new Set<string>();\n  for (const action of [...(plan.end ?? plan.right ?? []), ...(plan.start ?? plan.left ?? [])]) {\n    const key = action.id ?? action.label;\n    if (seen.has(key)) continue;\n    seen.add(key);\n    if (options.omit?.(action, row)) continue;\n    const commit = typeof options.commit === \"function\" ? options.commit(action, row) : options.commit;\n    out.push({\n      key,\n      label: action.label,\n      icon: isValidElement(action.icon)\n        ? action.icon\n        : action.icon != null && action.icon !== false\n          ? <>{action.icon}</>\n          : undefined,\n      tone: swipeTone(action),\n      commit,\n      // A swipe commits without the kit asking (the plan's `onCommit` asks, as keksdose's\n      // does), so its button does not ask twice (0.49 KIT-12); a danger one still sits in\n      // the row's menu.\n      confirm: false,\n      onSelect: action.onCommit,\n    });\n  }\n  return out;\n}\n\ninterface ResolvedRowAction<T> {\n  key: string;\n  label: string;\n  icon: ReactNode;\n  tone: \"default\" | \"danger\";\n  swipe: \"start\" | \"end\" | false;\n  action: DataTableRowAction<T>;\n}\n\nfunction resolveRowAction<T>(\n  action: DataTableRowAction<T>,\n  index: number,\n  labels: DataTableLabels,\n): ResolvedRowAction<T> {\n  const tone = action.tone ?? (action.kind === \"delete\" ? \"danger\" : \"default\");\n  return {\n    key: action.kind ?? `${index}:${action.label ?? \"\"}`,\n    label: action.label ?? (action.kind === \"edit\" ? labels.edit : action.kind === \"delete\" ? labels.delete : \"\"),\n    icon:\n      action.icon ??\n      (action.kind === \"edit\" ? <Pencil /> : action.kind === \"delete\" ? <Trash2 /> : null),\n    tone,\n    swipe: action.swipe ?? (tone === \"danger\" ? \"start\" : \"end\"),\n    action,\n  };\n}\n\n/** Ask, then act. */\nasync function runRowAction<T>(action: DataTableRowAction<T>, row: T): Promise<void> {\n  if (action.confirm && !(await action.confirm(row))) return;\n  action.onAction(row);\n}\n\n/** A resolved row action as {@link RowActions} takes it. Its `icon` is any node; a\n *  non-element one (a string glyph) is wrapped, since RowAction wants an element. */\nfunction toRowAction<T>(a: ResolvedRowAction<T>, row: T): RowAction {\n  return {\n    key: a.key,\n    label: a.label,\n    icon: isValidElement(a.icon) ? a.icon : a.icon != null && a.icon !== false ? <>{a.icon}</> : undefined,\n    tone: a.tone,\n    disabledReason: a.action.disabledReason?.(row),\n    // The table's own `confirm` asks in `runRowAction`; RowActions' default question\n    // (0.49 KIT-12) is for a delete that brought none.\n    confirm: a.action.confirm ? false : undefined,\n    onSelect: () => void runRowAction(a.action, row),\n  };\n}\n\n/**\n * The caller's columns with the actions column appended, and the same actions as a\n * phone card's swipes (`swipesFromActions`; DataTable uses it unless the caller passes\n * `mobileSwipeActions`). Without `rowActions` the columns come back as given.\n *\n * The actions column is appended to the caller's columns rather than drawn as a\n * second special case beside the selection column: it then gets the cell padding,\n * the widths and the phone rules (`mobileHidden`) every other column gets.\n */\nexport function useRowActionColumn<T>({\n  columns: columnsProp,\n  rowActions,\n  rowActionsHeader,\n  rowName,\n  labels,\n  density,\n  mobileSwipeActions,\n  desktopSwipeActions,\n}: {\n  columns: DataTableColumn<T>[];\n  rowActions: DataTableProps<T>[\"rowActions\"];\n  rowActionsHeader?: DataTableProps<T>[\"rowActionsHeader\"];\n  rowName: DataTableProps<T>[\"rowName\"];\n  labels: DataTableLabels;\n  density: DataTableDensity;\n  mobileSwipeActions?: DataTableProps<T>[\"mobileSwipeActions\"];\n  desktopSwipeActions?: DataTableProps<T>[\"desktopSwipeActions\"];\n}): {\n  columns: DataTableColumn<T>[];\n  swipesFromActions: (row: T) => MobileSwipeActions | null;\n} {\n  const rowActionsFor = useCallback(\n    (row: T): ResolvedRowAction<T>[] =>\n      rowActions\n        ? (typeof rowActions === \"function\" ? rowActions(row) : rowActions)\n            .filter((a) => !a.hidden?.(row))\n            .map((a, i) => resolveRowAction(a, i, labels))\n        : [],\n    [rowActions, labels],\n  );\n  // dev#598: the desktop half of the caller's swipes. On by default, except beside\n  // `rowActions`, whose column already is the desktop's (and whose swipes these usually\n  // are). The options object is often a fresh literal per render; its parts are the deps.\n  const swipeOptions = typeof desktopSwipeActions === \"object\" ? desktopSwipeActions : undefined;\n  const swipeColumnOn =\n    !!mobileSwipeActions && (desktopSwipeActions === undefined ? !rowActions : desktopSwipeActions !== false);\n  const swipeOmit = swipeOptions?.omit;\n  const swipeName = swipeOptions?.name;\n  const swipeCollapse = swipeOptions?.collapse;\n  const swipeCommit = swipeOptions?.commit;\n  const swipeHeader = swipeOptions?.header;\n  const swipeColumn = useMemo<DataTableColumn<T> | null>(\n    () =>\n      swipeColumnOn\n        ? {\n            key: SWIPE_ACTIONS_KEY,\n            header: actionsHeading(swipeHeader, labels.actions),\n            cell: (row) => (\n              <RowActions\n                actions={swipePlanRowActions(mobileSwipeActions!(row), row, { omit: swipeOmit, commit: swipeCommit })}\n                name={(swipeName ?? rowName)?.(row)}\n                collapse={swipeCollapse}\n                size={density === \"compact\" ? \"2xs\" : \"xs\"}\n                // The last column's tooltips open toward the row's start.\n                tooltipSide=\"start\"\n                labels={{ actions: labels.actions }}\n                className=\"justify-end\"\n              />\n            ),\n            className: \"w-px whitespace-nowrap text-end\",\n            // The heading over the buttons, at the row's end (0.46.1).\n            headClassName: \"w-px text-end\",\n            // On a phone the same actions are the card's swipes.\n            mobileHidden: true,\n            noRowLink: true,\n          }\n        : null,\n    [\n      swipeColumnOn,\n      mobileSwipeActions,\n      swipeOmit,\n      swipeCommit,\n      swipeName,\n      rowName,\n      swipeCollapse,\n      swipeHeader,\n      density,\n      labels.actions,\n    ],\n  );\n  const actionColumns = useMemo<DataTableColumn<T>[]>(\n    () =>\n      rowActions\n        ? [\n            ...columnsProp,\n            {\n              key: ROW_ACTIONS_KEY,\n              header: actionsHeading(rowActionsHeader, labels.actions),\n              // Through RowActions (0.32, §10.8): the icons inline at Normal, one \"⋯\"\n              // menu at Large once there are two — every label at once does not fit a\n              // row. Each control stops its own click: the row's handler already skips\n              // its controls, and this is for the caller who wraps the table in a\n              // clickable element of their own.\n              cell: (row) => (\n                <RowActions\n                  actions={rowActionsFor(row).map((a) => toRowAction(a, row))}\n                  name={rowName?.(row)}\n                  size={density === \"compact\" ? \"2xs\" : \"xs\"}\n                  labels={{ actions: labels.actions }}\n                  className=\"justify-end\"\n                />\n              ),\n              className: \"w-px whitespace-nowrap text-end\",\n              headClassName: \"w-px text-end\",\n              // On a phone the same actions are the card's swipes.\n              mobileHidden: true,\n              noRowLink: true,\n            },\n          ]\n        : columnsProp,\n    [columnsProp, rowActions, rowActionsHeader, rowActionsFor, rowName, labels.actions, density],\n  );\n  const columns = useMemo(\n    () => (swipeColumn ? [...actionColumns, swipeColumn] : actionColumns),\n    [actionColumns, swipeColumn],\n  );\n  // A stable function (0.48.2): the phone cards compare it by identity.\n  const swipesFromActions = useCallback((row: T): MobileSwipeActions | null => {\n    const swipes = rowActionsFor(row).filter((a) => a.swipe && !a.action.disabledReason?.(row));\n    if (!swipes.length) return null;\n    const toSwipe = (a: ResolvedRowAction<T>): SwipeAction => ({\n      label: a.label,\n      icon: a.icon,\n      onCommit: () => void runRowAction(a.action, row),\n      // The row action's tone, painted by SwipeableRow: its soft wash idle, its fill\n      // and that fill's foreground armed (0.33).\n      tone: a.tone === \"danger\" ? \"danger\" : \"brand\",\n    });\n    return {\n      start: swipes.filter((a) => a.swipe === \"start\").map(toSwipe),\n      end: swipes.filter((a) => a.swipe === \"end\").map(toSwipe),\n    };\n  }, [rowActionsFor]);\n  return { columns, swipesFromActions };\n}\n"],"mappings":"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","names":[]}

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

@@ -59,7 +59,7 @@ export interface DataTableRowProps<T> {
 export declare const DataTableRow: <T>(props: DataTableRowProps<T> & {
     key?: string | number;
 }) => ReactNode;
-export interface DataTableMobileRowProps<T> extends Pick<MobileRowProps<T>, "row" | "opensRow" | "mobileDir" | "mobileCardLinkable" | "mobileCard" | "mobilePrimaryCol" | "mobileSecondaryColumns" | "mobileExpandAsDialog" | "compact" | "large"> {
+export interface DataTableMobileRowProps<T> extends Pick<MobileRowProps<T>, "row" | "opensRow" | "mobileDir" | "mobileCardLinkable" | "mobileCardStretched" | "mobileCard" | "mobilePrimaryCol" | "mobileStatusColumns" | "mobileSecondaryColumns" | "mobileActionColumns" | "mobileExpandAsDialog" | "compact" | "large"> {
     ctx: RefObject<DataTableRowCtx<T>>;
     rowKey: string | number;
     expanded: boolean;

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":"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","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    | \"mobileCardStretched\"\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,8 @@ function DataTable({
       detail
     ] });
   };
-  const mobileCardLinkable = mobileColumns.every((c) => !c.noRowLink);
+  const mobileCardLinkable = (mobileCard ? mobileColumns : [...onCard]).every((c) => !keepsOwnClicks(c));
+  const mobileCardStretched = !mobileCard && !mobileCardLinkable && !!mobilePrimaryCol && !keepsOwnClicks(mobilePrimaryCol);
   const [mobileDir, setMobileDir] = useState("ltr");
   const mobileRootRef = (el) => {
     if (!el) return;
@@ -462,13 +486,16 @@ function DataTable({
         className: rowClassName?.(row),
         attrs: rowAttributes?.(row),
         interactive: !!onRowClick,
-        href: mobileCardLinkable ? rowHref?.(row) : void 0,
+        href: mobileCardLinkable || mobileCardStretched ? rowHref?.(row) : void 0,
         swipeActionsFor,
         mobileDir,
         mobileCardLinkable,
+        mobileCardStretched,
         mobileCard,
         mobilePrimaryCol,
+        mobileStatusColumns,
         mobileSecondaryColumns,
+        mobileActionColumns,
         mobileExpandAsDialog,
         compact,
         large,