@eifi1/ui-kit 0.45.0 → 0.46.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (228) hide show
  1. package/README.md +23 -12
  2. package/dist/admin/admin-area-labels.d.ts +9 -0
  3. package/dist/admin/admin-area-labels.js +5 -1
  4. package/dist/admin/admin-area-labels.js.map +1 -1
  5. package/dist/admin/admin-overview.d.ts +16 -1
  6. package/dist/admin/admin-overview.js +12 -1
  7. package/dist/admin/admin-overview.js.map +1 -1
  8. package/dist/admin/mail-test-card.d.ts +3 -2
  9. package/dist/admin/mail-test-card.js +3 -1
  10. package/dist/admin/mail-test-card.js.map +1 -1
  11. package/dist/components/appearance-labels.d.ts +10 -0
  12. package/dist/components/appearance-labels.js +6 -1
  13. package/dist/components/appearance-labels.js.map +1 -1
  14. package/dist/components/data-table-column-settings.js +2 -2
  15. package/dist/components/data-table-column-settings.js.map +1 -1
  16. package/dist/components/data-table-head.js +2 -2
  17. package/dist/components/data-table-head.js.map +1 -1
  18. package/dist/components/data-table-row-actions.d.ts +18 -2
  19. package/dist/components/data-table-row-actions.js +86 -2
  20. package/dist/components/data-table-row-actions.js.map +1 -1
  21. package/dist/components/data-table-shared.js +9 -2
  22. package/dist/components/data-table-shared.js.map +1 -1
  23. package/dist/components/data-table.d.ts +43 -2
  24. package/dist/components/data-table.js +9 -4
  25. package/dist/components/data-table.js.map +1 -1
  26. package/dist/components/date-format-setting.d.ts +29 -0
  27. package/dist/components/date-format-setting.js +36 -0
  28. package/dist/components/date-format-setting.js.map +1 -0
  29. package/dist/components/swipeable-row.d.ts +8 -0
  30. package/dist/components/swipeable-row.js.map +1 -1
  31. package/dist/components/tabs.d.ts +3 -2
  32. package/dist/components/tabs.js +1 -1
  33. package/dist/components/tabs.js.map +1 -1
  34. package/dist/components/translation-review-editor.js +1 -0
  35. package/dist/components/translation-review-editor.js.map +1 -1
  36. package/dist/components/translation-review-labels.d.ts +5 -0
  37. package/dist/components/translation-review-labels.js +2 -0
  38. package/dist/components/translation-review-labels.js.map +1 -1
  39. package/dist/components/translation-review.d.ts +18 -8
  40. package/dist/components/translation-review.js +64 -7
  41. package/dist/components/translation-review.js.map +1 -1
  42. package/dist/components/write-lock-labels.js +2 -1
  43. package/dist/components/write-lock-labels.js.map +1 -1
  44. package/dist/components/write-lock.d.ts +33 -3
  45. package/dist/components/write-lock.js +9 -0
  46. package/dist/components/write-lock.js.map +1 -1
  47. package/dist/data-table.d.ts +1 -1
  48. package/dist/data-table.js.map +1 -1
  49. package/dist/eslint/index.js +1 -1
  50. package/dist/feedback/feedback-row-detail.d.ts +4 -2
  51. package/dist/feedback/feedback-row-detail.js +17 -26
  52. package/dist/feedback/feedback-row-detail.js.map +1 -1
  53. package/dist/feedback/feedback-swipe.d.ts +18 -0
  54. package/dist/feedback/feedback-swipe.js +10 -1
  55. package/dist/feedback/feedback-swipe.js.map +1 -1
  56. package/dist/i18n/german.js +41 -5
  57. package/dist/i18n/german.js.map +1 -1
  58. package/dist/i18n/kit-labels.d.ts +12 -1
  59. package/dist/i18n/kit-labels.js +8 -2
  60. package/dist/i18n/kit-labels.js.map +1 -1
  61. package/dist/i18n/locales/en.js +40 -6
  62. package/dist/i18n/locales/en.js.map +2 -2
  63. package/dist/i18n/locales/es.js +41 -5
  64. package/dist/i18n/locales/es.js.map +1 -1
  65. package/dist/i18n/locales/fr.js +41 -5
  66. package/dist/i18n/locales/fr.js.map +1 -1
  67. package/dist/i18n/locales/hu.js +41 -5
  68. package/dist/i18n/locales/hu.js.map +1 -1
  69. package/dist/i18n/locales/it.js +41 -5
  70. package/dist/i18n/locales/it.js.map +1 -1
  71. package/dist/i18n/locales/zh.js +41 -5
  72. package/dist/i18n/locales/zh.js.map +1 -1
  73. package/dist/i18n/review.js +3 -1
  74. package/dist/i18n/review.js.map +1 -1
  75. package/dist/index.d.ts +15 -2
  76. package/dist/index.js +35 -0
  77. package/dist/index.js.map +1 -1
  78. package/dist/lib/date-format.d.ts +81 -0
  79. package/dist/lib/date-format.js +56 -0
  80. package/dist/lib/date-format.js.map +1 -0
  81. package/dist/lib/format.d.ts +3 -0
  82. package/dist/lib/format.js +5 -4
  83. package/dist/lib/format.js.map +1 -1
  84. package/dist/notifications/device-zone-report.d.ts +27 -0
  85. package/dist/notifications/device-zone-report.js +24 -0
  86. package/dist/notifications/device-zone-report.js.map +1 -0
  87. package/dist/notifications/feedback-notification-types-labels.d.ts +7 -1
  88. package/dist/notifications/feedback-notification-types-labels.js +4 -1
  89. package/dist/notifications/feedback-notification-types-labels.js.map +1 -1
  90. package/dist/notifications/feedback-notification-types.d.ts +11 -5
  91. package/dist/notifications/feedback-notification-types.js +2 -1
  92. package/dist/notifications/feedback-notification-types.js.map +1 -1
  93. package/dist/notifications/notification-bell.d.ts +33 -0
  94. package/dist/notifications/notification-bell.js +74 -0
  95. package/dist/notifications/notification-bell.js.map +1 -0
  96. package/dist/notifications/notification-inbox.d.ts +77 -0
  97. package/dist/notifications/notification-inbox.js +206 -0
  98. package/dist/notifications/notification-inbox.js.map +1 -0
  99. package/dist/notifications/notification-types-setting.d.ts +6 -4
  100. package/dist/notifications/notification-types-setting.js +103 -45
  101. package/dist/notifications/notification-types-setting.js.map +1 -1
  102. package/dist/notifications/notification-types.d.ts +19 -7
  103. package/dist/notifications/notifications-labels.d.ts +41 -7
  104. package/dist/notifications/notifications-labels.js +18 -1
  105. package/dist/notifications/notifications-labels.js.map +1 -1
  106. package/dist/notifications/push-devices-setting.d.ts +20 -3
  107. package/dist/notifications/push-devices-setting.js +93 -33
  108. package/dist/notifications/push-devices-setting.js.map +1 -1
  109. package/dist/notifications/push-worker.d.ts +108 -0
  110. package/dist/notifications/push-worker.js +62 -0
  111. package/dist/notifications/push-worker.js.map +1 -0
  112. package/dist/notifications/quiet-hours-setting.d.ts +29 -17
  113. package/dist/notifications/quiet-hours-setting.js +9 -41
  114. package/dist/notifications/quiet-hours-setting.js.map +1 -1
  115. package/dist/notifications/time-zone-select.d.ts +5 -2
  116. package/dist/notifications/time-zone-select.js.map +1 -1
  117. package/dist/notifications/use-push-device.d.ts +4 -17
  118. package/dist/notifications/use-push-device.js +7 -15
  119. package/dist/notifications/use-push-device.js.map +1 -1
  120. package/dist/offline/local-first.d.ts +33 -0
  121. package/dist/offline/local-first.js +39 -0
  122. package/dist/offline/local-first.js.map +1 -0
  123. package/dist/offline/query-persistence.d.ts +26 -1
  124. package/dist/offline/query-persistence.js +27 -23
  125. package/dist/offline/query-persistence.js.map +1 -1
  126. package/dist/offline/service-worker-updates.d.ts +46 -0
  127. package/dist/offline/service-worker-updates.js +39 -0
  128. package/dist/offline/service-worker-updates.js.map +1 -0
  129. package/dist/offline.d.ts +5 -2
  130. package/dist/offline.js +11 -2
  131. package/dist/offline.js.map +1 -1
  132. package/dist/push-worker.d.ts +2 -0
  133. package/dist/push-worker.js +14 -0
  134. package/dist/push-worker.js.map +1 -0
  135. package/dist/shell/account-menu-text-size.d.ts +33 -0
  136. package/dist/shell/account-menu-text-size.js +51 -0
  137. package/dist/shell/account-menu-text-size.js.map +1 -0
  138. package/dist/shell/top-bar-actions.d.ts +6 -2
  139. package/dist/shell/top-bar-actions.js +1 -0
  140. package/dist/shell/top-bar-actions.js.map +1 -1
  141. package/dist/shell.d.ts +2 -0
  142. package/dist/shell.js +2 -0
  143. package/dist/shell.js.map +1 -1
  144. package/dist/sync/db.d.ts +76 -0
  145. package/dist/sync/db.js +24 -0
  146. package/dist/sync/db.js.map +1 -0
  147. package/dist/sync/engine.d.ts +124 -0
  148. package/dist/sync/engine.js +474 -0
  149. package/dist/sync/engine.js.map +1 -0
  150. package/dist/sync/hooks.d.ts +30 -0
  151. package/dist/sync/hooks.js +67 -0
  152. package/dist/sync/hooks.js.map +1 -0
  153. package/dist/sync/testing.d.ts +28 -0
  154. package/dist/sync/testing.js +41 -0
  155. package/dist/sync/testing.js.map +1 -0
  156. package/dist/sync/wire.d.ts +50 -0
  157. package/dist/sync/wire.js +2 -0
  158. package/dist/sync/wire.js.map +1 -0
  159. package/dist/sync.d.ts +7 -0
  160. package/dist/sync.js +22 -0
  161. package/dist/sync.js.map +1 -0
  162. package/dist/tour/tour-labels.js +1 -0
  163. package/dist/tour/tour-labels.js.map +1 -1
  164. package/dist/tour/tour.d.ts +30 -0
  165. package/dist/tour/tour.js +50 -6
  166. package/dist/tour/tour.js.map +1 -1
  167. package/package.json +19 -1
  168. package/src/admin/admin-area-labels.ts +13 -0
  169. package/src/admin/admin-overview.tsx +37 -2
  170. package/src/admin/mail-test-card.tsx +7 -3
  171. package/src/components/appearance-labels.ts +16 -0
  172. package/src/components/data-table-column-settings.tsx +2 -2
  173. package/src/components/data-table-head.tsx +2 -2
  174. package/src/components/data-table-row-actions.tsx +118 -2
  175. package/src/components/data-table-shared.tsx +21 -2
  176. package/src/components/data-table.tsx +51 -6
  177. package/src/components/date-format-setting.tsx +64 -0
  178. package/src/components/swipeable-row.tsx +8 -0
  179. package/src/components/tabs.tsx +4 -3
  180. package/src/components/translation-review-editor.tsx +2 -0
  181. package/src/components/translation-review-labels.ts +7 -0
  182. package/src/components/translation-review.tsx +102 -14
  183. package/src/components/write-lock-labels.ts +1 -0
  184. package/src/components/write-lock.tsx +36 -3
  185. package/src/data-table.ts +1 -0
  186. package/src/feedback/feedback-row-detail.tsx +18 -23
  187. package/src/feedback/feedback-swipe.tsx +28 -1
  188. package/src/i18n/german.ts +44 -4
  189. package/src/i18n/kit-labels.tsx +18 -1
  190. package/src/i18n/locales/en.ts +1 -0
  191. package/src/i18n/locales/es.ts +44 -4
  192. package/src/i18n/locales/fr.ts +44 -4
  193. package/src/i18n/locales/hu.ts +44 -4
  194. package/src/i18n/locales/it.ts +44 -4
  195. package/src/i18n/locales/zh.ts +44 -2
  196. package/src/i18n/review.ts +3 -1
  197. package/src/index.ts +42 -0
  198. package/src/lib/date-format.ts +151 -0
  199. package/src/lib/format.ts +10 -4
  200. package/src/notifications/device-zone-report.ts +54 -0
  201. package/src/notifications/feedback-notification-types-labels.ts +10 -1
  202. package/src/notifications/feedback-notification-types.ts +12 -5
  203. package/src/notifications/notification-bell.tsx +116 -0
  204. package/src/notifications/notification-inbox.tsx +304 -0
  205. package/src/notifications/notification-types-setting.tsx +151 -55
  206. package/src/notifications/notification-types.ts +20 -8
  207. package/src/notifications/notifications-labels.ts +69 -11
  208. package/src/notifications/push-devices-setting.tsx +123 -34
  209. package/src/notifications/push-worker.ts +160 -0
  210. package/src/notifications/quiet-hours-setting.tsx +41 -58
  211. package/src/notifications/time-zone-select.tsx +5 -2
  212. package/src/notifications/use-push-device.ts +20 -33
  213. package/src/offline/local-first.ts +76 -0
  214. package/src/offline/query-persistence.ts +57 -24
  215. package/src/offline/service-worker-updates.ts +81 -0
  216. package/src/offline.ts +7 -1
  217. package/src/push-worker.ts +25 -0
  218. package/src/shell/account-menu-text-size.tsx +77 -0
  219. package/src/shell/top-bar-actions.tsx +6 -1
  220. package/src/shell.ts +3 -0
  221. package/src/sync/db.ts +103 -0
  222. package/src/sync/engine.ts +699 -0
  223. package/src/sync/hooks.ts +93 -0
  224. package/src/sync/testing.ts +73 -0
  225. package/src/sync/wire.ts +61 -0
  226. package/src/sync.ts +29 -0
  227. package/src/tour/tour-labels.ts +1 -0
  228. package/src/tour/tour.tsx +100 -7
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/components/data-table-head.tsx"],"sourcesContent":["import type { Dispatch, SetStateAction } from \"react\";\nimport { ArrowDown, ArrowUp, ArrowUpDown, Filter } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { defaultFilterState, isFilterActive, resolveFilter } from \"./data-table-filters\";\nimport type { FilterValue } from \"./data-table-filters\";\nimport type { SortState } from \"./data-table-sort\";\nimport { FilterPopover } from \"./data-table-filter-popover\";\nimport { Popover } from \"./popover\";\nimport { Tooltip } from \"./tooltip\";\nimport type { DataTableLabels } from \"./data-table-labels\";\nimport { ROW_ACTIONS_KEY } from \"./data-table-row-actions\";\nimport { columnLabel, logicalAlign, splitCellProps } from \"./data-table-shared\";\nimport type { DataTableColumn, DataTableProps, FilterState } from \"./data-table\";\n\n// DataTable's `<thead>` on a wide screen: the select-all box, and per column the sort\n// button, the filter popover and the resize handle. Moved out of data-table.tsx whole\n// (refactor audit 2026-10, MOD-3 step 5); the state it shows and changes stays the\n// table's.\n\n/** Whether a column is end-aligned — the header then puts its filter button first. */\nconst END_ALIGN = /(^|\\s)text-end(?=\\s|$)/;\n\n/** The wide-screen table's header row. */\nexport function DataTableHead<T>({\n visibleColumns,\n selection,\n compact,\n labels,\n locale,\n isServer,\n hasSortCallback,\n hasFilterCallback,\n sorts,\n filters,\n selectOptionsByKey,\n multiSort,\n resizable,\n widths,\n setWidths,\n headRefs,\n toggleSort,\n setFilterValue,\n clearFilter,\n startResize,\n moveResize,\n finishResize,\n}: {\n visibleColumns: DataTableColumn<T>[];\n selection: DataTableProps<T>[\"selection\"];\n compact: boolean;\n labels: DataTableLabels;\n locale?: string;\n isServer: boolean;\n /** The caller owns the sort (`onSortsChange`), so a server table can offer it. */\n hasSortCallback: boolean;\n /** The caller owns the filters (`onFiltersChange`), likewise. */\n hasFilterCallback: boolean;\n sorts: SortState[];\n filters: FilterState;\n selectOptionsByKey: Record<string, { value: string; label: string }[]>;\n multiSort: boolean;\n resizable: boolean;\n widths: Record<string, number>;\n setWidths: Dispatch<SetStateAction<Record<string, number>>>;\n /** Filled here, one `<th>` per column — what a resize and \"Auto-size\" measure. */\n headRefs: Map<string, HTMLTableCellElement>;\n toggleSort: (key: string, shiftKey: boolean) => void;\n setFilterValue: (key: string, value: FilterValue) => void;\n clearFilter: (key: string) => void;\n startResize: (e: React.PointerEvent<HTMLElement>, key: string) => void;\n moveResize: (e: React.PointerEvent<HTMLElement>) => void;\n finishResize: (e: React.PointerEvent<HTMLElement>, commit: boolean) => void;\n}) {\n return (\n <thead className=\"bg-surface-2 text-secondary\">\n <tr className=\"text-start\">\n {selection && (\n <th\n scope=\"col\"\n className={cn(\n \"sticky top-0 z-10 bg-surface-2 align-middle backdrop-blur-sm\",\n compact ? \"w-8 px-2 py-1\" : \"w-10 px-3 py-2\",\n )}\n >\n <input\n type=\"checkbox\"\n className={cn(\"align-middle accent-indigo-600\", compact ? \"size-3.5\" : \"size-4\")}\n checked={selection.allSelected}\n ref={(el) => {\n if (el) el.indeterminate = selection.someSelected && !selection.allSelected;\n }}\n onChange={(e) => selection.onToggleAll(e.target.checked)}\n aria-label={labels.selectAllRows}\n />\n </th>\n )}\n {visibleColumns.map((col) => {\n // In server mode the utilities stay hidden unless the caller\n // takes them over and feeds them back into the server query.\n const sortable = (!isServer || hasSortCallback) && !!col.sortBy;\n const filter = !isServer || hasFilterCallback ? resolveFilter(col) : null;\n const filterState = filters[col.key] ?? (filter ? defaultFilterState(filter) : undefined);\n const sortIdx = sorts.findIndex((s) => s.key === col.key);\n const active = sortIdx !== -1;\n const Icon = active ? (sorts[sortIdx].dir === \"asc\" ? ArrowUp : ArrowDown) : ArrowUpDown;\n const filterActive = filterState && isFilterActive(filterState);\n // Logical, and a legacy `text-right` still counts — see `logicalAlign`.\n const headClass = logicalAlign(col.headClassName);\n const isEndAligned = !!headClass && END_ALIGN.test(headClass);\n const width = widths[col.key];\n const ownHead = splitCellProps(col.headProps);\n const pinnedHead = width ? { width, minWidth: width, maxWidth: width } : undefined;\n return (\n <th\n {...ownHead.attrs}\n key={col.key}\n ref={(el) => {\n if (el) headRefs.set(col.key, el);\n else headRefs.delete(col.key);\n }}\n scope=\"col\"\n // Only a header the user can actually sort says anything: an\n // `aria-sort` on a plain column is a control that is not there,\n // and a persisted or URL sort can name a column with no `sortBy`\n // (the sort chain drops it silently) — which would otherwise\n // claim a sort the table is not applying.\n //\n // \"none\" on the rest is the half that was missing. Without it a\n // sortable header is indistinguishable from a plain one until the\n // user presses it. Secondary criteria read \"none\" too: ARIA allows\n // exactly one sorted column, and the priority is carried by the\n // badge and by what the header button announces on press.\n aria-sort={\n sortable\n ? sortIdx === 0\n ? sorts[0].dir === \"asc\"\n ? \"ascending\"\n : \"descending\"\n : \"none\"\n : undefined\n }\n style={ownHead.style || pinnedHead ? { ...ownHead.style, ...pinnedHead } : undefined}\n className={cn(\n \"relative font-medium align-middle whitespace-nowrap\",\n compact ? \"px-2 py-1\" : \"px-3 py-2\",\n // Keep the header visible while the user scrolls the page.\n // Each <th> carries its own bg so the row doesn't render\n // transparent over the data rows underneath.\n \"sticky top-0 z-10 bg-surface-2 backdrop-blur-sm\",\n logicalAlign(ownHead.className),\n headClass,\n )}\n >\n <div\n className={cn(\n \"flex items-center gap-1\",\n isEndAligned && \"flex-row-reverse\",\n )}\n >\n <Tooltip label={sortable && multiSort ? labels.sortHint : undefined} portal>\n <button\n type=\"button\"\n onClick={(e) => sortable && toggleSort(col.key, e.shiftKey)}\n disabled={!sortable}\n className={cn(\n \"flex items-center gap-1 text-start\",\n sortable && \"hover:text-primary\",\n )}\n >\n <span>{col.header}</span>\n {sortable && (\n <Icon className={cn(\"size-3\", active ? \"opacity-100\" : \"opacity-40\")} />\n )}\n {/* Priority badge, only meaningful with 2+ sort keys */}\n {active && sorts.length > 1 && (\n <span className=\"text-micro font-semibold leading-none text-brand\">\n {sortIdx + 1}\n </span>\n )}\n </button>\n </Tooltip>\n {filter && (\n <Popover\n // 420 px at Normal, in rem so the calendar grows with its\n // text (§3.2); Popover caps it at the viewport.\n width={filter.type === \"date\" ? \"26.25rem\" : undefined}\n // The panel is THIS column's filter, and says so. Unnamed it was\n // announced as the kit-wide fallback, \"Popover\"; then as \"Filter\"\n // in every column alike (round 0.34 Wave 2, BUG-7c).\n labels={{ panel: labels.filterColumn(columnLabel(col, labels), false) }}\n trigger={({ open, toggle, ref }) => (\n <button\n type=\"button\"\n ref={ref}\n onClick={toggle}\n // Named for its column, and for being filtered: the tint\n // alone said that to nobody who cannot see it (BUG-7c).\n aria-label={labels.filterColumn(columnLabel(col, labels), Boolean(filterActive))}\n aria-haspopup=\"dialog\"\n aria-expanded={open}\n className={cn(\n \"rounded p-1 transition-colors\",\n filterActive\n ? \"bg-brand-soft text-brand-muted\"\n : \"text-placeholder hover:text-secondary hover:bg-hover\",\n )}\n >\n <Filter className=\"size-3\" />\n </button>\n )}\n >\n {() => (\n <FilterPopover\n column={col}\n state={filterState ?? defaultFilterState(filter)}\n onChange={(next) => setFilterValue(col.key, next)}\n onClear={() => clearFilter(col.key)}\n selectOptions={selectOptionsByKey[col.key] ?? []}\n labels={labels}\n locale={locale}\n />\n )}\n </Popover>\n )}\n </div>\n {resizable && col.key !== ROW_ACTIONS_KEY && (\n /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- a\n pointer-only drag handle for a visual preference (column width); it is\n deliberately not a tab stop, and no content or action depends on it. */\n <span\n role=\"separator\"\n aria-orientation=\"vertical\"\n onPointerDown={(e) => startResize(e, col.key)}\n onPointerMove={moveResize}\n onPointerUp={(e) => finishResize(e, true)}\n onPointerCancel={(e) => finishResize(e, false)}\n onDoubleClick={(e) => {\n e.preventDefault();\n setWidths((w) => {\n const next = { ...w };\n delete next[col.key];\n return next;\n });\n }}\n // `touch-none`: without it the browser claims a finger drag for\n // scrolling before the first `pointermove` ever arrives.\n // `end-0` and a translate that flips with it: the handle sits on the column's\n // trailing edge, which is its left one in a right-to-left table.\n className=\"absolute end-0 top-0 z-10 h-full w-1.5 -translate-x-1/2 rtl:translate-x-1/2 cursor-col-resize select-none touch-none hover:bg-brand-soft-hover\"\n />\n )}\n </th>\n );\n })}\n </tr>\n </thead>\n );\n}\n"],"mappings":";AAoFY,cA4EM,YA5EN;AA6BA;AAhHZ,SAAS,WAAW,SAAS,aAAa,cAAc;AACxD,SAAS,UAAU;AACnB,SAAS,oBAAoB,gBAAgB,qBAAqB;AAGlE,SAAS,qBAAqB;AAC9B,SAAS,eAAe;AACxB,SAAS,eAAe;AAExB,SAAS,uBAAuB;AAChC,SAAS,aAAa,cAAc,sBAAsB;AAS1D,MAAM,YAAY;AAGX,SAAS,cAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GA0BG;AACD,SACE,oBAAC,WAAM,WAAU,+BACf,+BAAC,QAAG,WAAU,cACX;AAAA,iBACC;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,WAAW;AAAA,UACT;AAAA,UACA,UAAU,kBAAkB;AAAA,QAC9B;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAW,GAAG,kCAAkC,UAAU,aAAa,QAAQ;AAAA,YAC/E,SAAS,UAAU;AAAA,YACnB,KAAK,CAAC,OAAO;AACX,kBAAI,GAAI,IAAG,gBAAgB,UAAU,gBAAgB,CAAC,UAAU;AAAA,YAClE;AAAA,YACA,UAAU,CAAC,MAAM,UAAU,YAAY,EAAE,OAAO,OAAO;AAAA,YACvD,cAAY,OAAO;AAAA;AAAA,QACrB;AAAA;AAAA,IACF;AAAA,IAED,eAAe,IAAI,CAAC,QAAQ;AAG3B,YAAM,YAAY,CAAC,YAAY,oBAAoB,CAAC,CAAC,IAAI;AACzD,YAAM,SAAS,CAAC,YAAY,oBAAoB,cAAc,GAAG,IAAI;AACrE,YAAM,cAAc,QAAQ,IAAI,GAAG,MAAM,SAAS,mBAAmB,MAAM,IAAI;AAC/E,YAAM,UAAU,MAAM,UAAU,CAAC,MAAM,EAAE,QAAQ,IAAI,GAAG;AACxD,YAAM,SAAS,YAAY;AAC3B,YAAM,OAAO,SAAU,MAAM,OAAO,EAAE,QAAQ,QAAQ,UAAU,YAAa;AAC7E,YAAM,eAAe,eAAe,eAAe,WAAW;AAE9D,YAAM,YAAY,aAAa,IAAI,aAAa;AAChD,YAAM,eAAe,CAAC,CAAC,aAAa,UAAU,KAAK,SAAS;AAC5D,YAAM,QAAQ,OAAO,IAAI,GAAG;AAC5B,YAAM,UAAU,eAAe,IAAI,SAAS;AAC5C,YAAM,aAAa,QAAQ,EAAE,OAAO,UAAU,OAAO,UAAU,MAAM,IAAI;AACzE,aACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG,QAAQ;AAAA,UACZ,KAAK,IAAI;AAAA,UACT,KAAK,CAAC,OAAO;AACX,gBAAI,GAAI,UAAS,IAAI,IAAI,KAAK,EAAE;AAAA,gBAC3B,UAAS,OAAO,IAAI,GAAG;AAAA,UAC9B;AAAA,UACA,OAAM;AAAA,UAYN,aACE,WACI,YAAY,IACV,MAAM,CAAC,EAAE,QAAQ,QACf,cACA,eACF,SACF;AAAA,UAEN,OAAO,QAAQ,SAAS,aAAa,EAAE,GAAG,QAAQ,OAAO,GAAG,WAAW,IAAI;AAAA,UAC3E,WAAW;AAAA,YACT;AAAA,YACA,UAAU,cAAc;AAAA;AAAA;AAAA;AAAA,YAIxB;AAAA,YACA,aAAa,QAAQ,SAAS;AAAA,YAC9B;AAAA,UACF;AAAA;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,gBAAgB;AAAA,YAClB;AAAA,YAEA;AAAA,kCAAC,WAAQ,OAAO,YAAY,YAAY,OAAO,WAAW,QAAW,QAAM,MACzE;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,SAAS,CAAC,MAAM,YAAY,WAAW,IAAI,KAAK,EAAE,QAAQ;AAAA,kBAC1D,UAAU,CAAC;AAAA,kBACX,WAAW;AAAA,oBACT;AAAA,oBACA,YAAY;AAAA,kBACd;AAAA,kBAEA;AAAA,wCAAC,UAAM,cAAI,QAAO;AAAA,oBACjB,YACC,oBAAC,QAAK,WAAW,GAAG,UAAU,SAAS,gBAAgB,YAAY,GAAG;AAAA,oBAGvE,UAAU,MAAM,SAAS,KACxB,oBAAC,UAAK,WAAU,oDACb,oBAAU,GACb;AAAA;AAAA;AAAA,cAEJ,GACF;AAAA,cACC,UACC;AAAA,gBAAC;AAAA;AAAA,kBAGC,OAAO,OAAO,SAAS,SAAS,aAAa;AAAA,kBAI7C,QAAQ,EAAE,OAAO,OAAO,aAAa,YAAY,KAAK,MAAM,GAAG,KAAK,EAAE;AAAA,kBACtE,SAAS,CAAC,EAAE,MAAM,QAAQ,IAAI,MAC5B;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAK;AAAA,sBACL;AAAA,sBACA,SAAS;AAAA,sBAGT,cAAY,OAAO,aAAa,YAAY,KAAK,MAAM,GAAG,QAAQ,YAAY,CAAC;AAAA,sBAC/E,iBAAc;AAAA,sBACd,iBAAe;AAAA,sBACf,WAAW;AAAA,wBACT;AAAA,wBACA,eACI,mCACA;AAAA,sBACN;AAAA,sBAEA,8BAAC,UAAO,WAAU,UAAS;AAAA;AAAA,kBAC7B;AAAA,kBAGD,gBACC;AAAA,oBAAC;AAAA;AAAA,sBACC,QAAQ;AAAA,sBACR,OAAO,eAAe,mBAAmB,MAAM;AAAA,sBAC/C,UAAU,CAAC,SAAS,eAAe,IAAI,KAAK,IAAI;AAAA,sBAChD,SAAS,MAAM,YAAY,IAAI,GAAG;AAAA,sBAClC,eAAe,mBAAmB,IAAI,GAAG,KAAK,CAAC;AAAA,sBAC/C;AAAA,sBACA;AAAA;AAAA,kBACF;AAAA;AAAA,cAEJ;AAAA;AAAA;AAAA,QAEJ;AAAA,QACC,aAAa,IAAI,QAAQ;AAAA;AAAA;AAAA,QAI1B;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,oBAAiB;AAAA,YACjB,eAAe,CAAC,MAAM,YAAY,GAAG,IAAI,GAAG;AAAA,YAC5C,eAAe;AAAA,YACf,aAAa,CAAC,MAAM,aAAa,GAAG,IAAI;AAAA,YACxC,iBAAiB,CAAC,MAAM,aAAa,GAAG,KAAK;AAAA,YAC7C,eAAe,CAAC,MAAM;AACpB,gBAAE,eAAe;AACjB,wBAAU,CAAC,MAAM;AACf,sBAAM,OAAO,EAAE,GAAG,EAAE;AACpB,uBAAO,KAAK,IAAI,GAAG;AACnB,uBAAO;AAAA,cACT,CAAC;AAAA,YACH;AAAA,YAKA,WAAU;AAAA;AAAA,QACZ;AAAA,MAEF;AAAA,IAEJ,CAAC;AAAA,KACH,GACF;AAEJ;","names":[]}
1
+ {"version":3,"sources":["../../src/components/data-table-head.tsx"],"sourcesContent":["import type { Dispatch, SetStateAction } from \"react\";\nimport { ArrowDown, ArrowUp, ArrowUpDown, Filter } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { defaultFilterState, isFilterActive, resolveFilter } from \"./data-table-filters\";\nimport type { FilterValue } from \"./data-table-filters\";\nimport type { SortState } from \"./data-table-sort\";\nimport { FilterPopover } from \"./data-table-filter-popover\";\nimport { Popover } from \"./popover\";\nimport { Tooltip } from \"./tooltip\";\nimport type { DataTableLabels } from \"./data-table-labels\";\nimport { isTableOwnColumn } from \"./data-table-row-actions\";\nimport { columnLabel, logicalAlign, splitCellProps } from \"./data-table-shared\";\nimport type { DataTableColumn, DataTableProps, FilterState } from \"./data-table\";\n\n// DataTable's `<thead>` on a wide screen: the select-all box, and per column the sort\n// button, the filter popover and the resize handle. Moved out of data-table.tsx whole\n// (refactor audit 2026-10, MOD-3 step 5); the state it shows and changes stays the\n// table's.\n\n/** Whether a column is end-aligned — the header then puts its filter button first. */\nconst END_ALIGN = /(^|\\s)text-end(?=\\s|$)/;\n\n/** The wide-screen table's header row. */\nexport function DataTableHead<T>({\n visibleColumns,\n selection,\n compact,\n labels,\n locale,\n isServer,\n hasSortCallback,\n hasFilterCallback,\n sorts,\n filters,\n selectOptionsByKey,\n multiSort,\n resizable,\n widths,\n setWidths,\n headRefs,\n toggleSort,\n setFilterValue,\n clearFilter,\n startResize,\n moveResize,\n finishResize,\n}: {\n visibleColumns: DataTableColumn<T>[];\n selection: DataTableProps<T>[\"selection\"];\n compact: boolean;\n labels: DataTableLabels;\n locale?: string;\n isServer: boolean;\n /** The caller owns the sort (`onSortsChange`), so a server table can offer it. */\n hasSortCallback: boolean;\n /** The caller owns the filters (`onFiltersChange`), likewise. */\n hasFilterCallback: boolean;\n sorts: SortState[];\n filters: FilterState;\n selectOptionsByKey: Record<string, { value: string; label: string }[]>;\n multiSort: boolean;\n resizable: boolean;\n widths: Record<string, number>;\n setWidths: Dispatch<SetStateAction<Record<string, number>>>;\n /** Filled here, one `<th>` per column — what a resize and \"Auto-size\" measure. */\n headRefs: Map<string, HTMLTableCellElement>;\n toggleSort: (key: string, shiftKey: boolean) => void;\n setFilterValue: (key: string, value: FilterValue) => void;\n clearFilter: (key: string) => void;\n startResize: (e: React.PointerEvent<HTMLElement>, key: string) => void;\n moveResize: (e: React.PointerEvent<HTMLElement>) => void;\n finishResize: (e: React.PointerEvent<HTMLElement>, commit: boolean) => void;\n}) {\n return (\n <thead className=\"bg-surface-2 text-secondary\">\n <tr className=\"text-start\">\n {selection && (\n <th\n scope=\"col\"\n className={cn(\n \"sticky top-0 z-10 bg-surface-2 align-middle backdrop-blur-sm\",\n compact ? \"w-8 px-2 py-1\" : \"w-10 px-3 py-2\",\n )}\n >\n <input\n type=\"checkbox\"\n className={cn(\"align-middle accent-indigo-600\", compact ? \"size-3.5\" : \"size-4\")}\n checked={selection.allSelected}\n ref={(el) => {\n if (el) el.indeterminate = selection.someSelected && !selection.allSelected;\n }}\n onChange={(e) => selection.onToggleAll(e.target.checked)}\n aria-label={labels.selectAllRows}\n />\n </th>\n )}\n {visibleColumns.map((col) => {\n // In server mode the utilities stay hidden unless the caller\n // takes them over and feeds them back into the server query.\n const sortable = (!isServer || hasSortCallback) && !!col.sortBy;\n const filter = !isServer || hasFilterCallback ? resolveFilter(col) : null;\n const filterState = filters[col.key] ?? (filter ? defaultFilterState(filter) : undefined);\n const sortIdx = sorts.findIndex((s) => s.key === col.key);\n const active = sortIdx !== -1;\n const Icon = active ? (sorts[sortIdx].dir === \"asc\" ? ArrowUp : ArrowDown) : ArrowUpDown;\n const filterActive = filterState && isFilterActive(filterState);\n // Logical, and a legacy `text-right` still counts — see `logicalAlign`.\n const headClass = logicalAlign(col.headClassName);\n const isEndAligned = !!headClass && END_ALIGN.test(headClass);\n const width = widths[col.key];\n const ownHead = splitCellProps(col.headProps);\n const pinnedHead = width ? { width, minWidth: width, maxWidth: width } : undefined;\n return (\n <th\n {...ownHead.attrs}\n key={col.key}\n ref={(el) => {\n if (el) headRefs.set(col.key, el);\n else headRefs.delete(col.key);\n }}\n scope=\"col\"\n // Only a header the user can actually sort says anything: an\n // `aria-sort` on a plain column is a control that is not there,\n // and a persisted or URL sort can name a column with no `sortBy`\n // (the sort chain drops it silently) — which would otherwise\n // claim a sort the table is not applying.\n //\n // \"none\" on the rest is the half that was missing. Without it a\n // sortable header is indistinguishable from a plain one until the\n // user presses it. Secondary criteria read \"none\" too: ARIA allows\n // exactly one sorted column, and the priority is carried by the\n // badge and by what the header button announces on press.\n aria-sort={\n sortable\n ? sortIdx === 0\n ? sorts[0].dir === \"asc\"\n ? \"ascending\"\n : \"descending\"\n : \"none\"\n : undefined\n }\n style={ownHead.style || pinnedHead ? { ...ownHead.style, ...pinnedHead } : undefined}\n className={cn(\n \"relative font-medium align-middle whitespace-nowrap\",\n compact ? \"px-2 py-1\" : \"px-3 py-2\",\n // Keep the header visible while the user scrolls the page.\n // Each <th> carries its own bg so the row doesn't render\n // transparent over the data rows underneath.\n \"sticky top-0 z-10 bg-surface-2 backdrop-blur-sm\",\n logicalAlign(ownHead.className),\n headClass,\n )}\n >\n <div\n className={cn(\n \"flex items-center gap-1\",\n isEndAligned && \"flex-row-reverse\",\n )}\n >\n <Tooltip label={sortable && multiSort ? labels.sortHint : undefined} portal>\n <button\n type=\"button\"\n onClick={(e) => sortable && toggleSort(col.key, e.shiftKey)}\n disabled={!sortable}\n className={cn(\n \"flex items-center gap-1 text-start\",\n sortable && \"hover:text-primary\",\n )}\n >\n <span>{col.header}</span>\n {sortable && (\n <Icon className={cn(\"size-3\", active ? \"opacity-100\" : \"opacity-40\")} />\n )}\n {/* Priority badge, only meaningful with 2+ sort keys */}\n {active && sorts.length > 1 && (\n <span className=\"text-micro font-semibold leading-none text-brand\">\n {sortIdx + 1}\n </span>\n )}\n </button>\n </Tooltip>\n {filter && (\n <Popover\n // 420 px at Normal, in rem so the calendar grows with its\n // text (§3.2); Popover caps it at the viewport.\n width={filter.type === \"date\" ? \"26.25rem\" : undefined}\n // The panel is THIS column's filter, and says so. Unnamed it was\n // announced as the kit-wide fallback, \"Popover\"; then as \"Filter\"\n // in every column alike (round 0.34 Wave 2, BUG-7c).\n labels={{ panel: labels.filterColumn(columnLabel(col, labels), false) }}\n trigger={({ open, toggle, ref }) => (\n <button\n type=\"button\"\n ref={ref}\n onClick={toggle}\n // Named for its column, and for being filtered: the tint\n // alone said that to nobody who cannot see it (BUG-7c).\n aria-label={labels.filterColumn(columnLabel(col, labels), Boolean(filterActive))}\n aria-haspopup=\"dialog\"\n aria-expanded={open}\n className={cn(\n \"rounded p-1 transition-colors\",\n filterActive\n ? \"bg-brand-soft text-brand-muted\"\n : \"text-placeholder hover:text-secondary hover:bg-hover\",\n )}\n >\n <Filter className=\"size-3\" />\n </button>\n )}\n >\n {() => (\n <FilterPopover\n column={col}\n state={filterState ?? defaultFilterState(filter)}\n onChange={(next) => setFilterValue(col.key, next)}\n onClear={() => clearFilter(col.key)}\n selectOptions={selectOptionsByKey[col.key] ?? []}\n labels={labels}\n locale={locale}\n />\n )}\n </Popover>\n )}\n </div>\n {resizable && !isTableOwnColumn(col.key) && (\n /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- a\n pointer-only drag handle for a visual preference (column width); it is\n deliberately not a tab stop, and no content or action depends on it. */\n <span\n role=\"separator\"\n aria-orientation=\"vertical\"\n onPointerDown={(e) => startResize(e, col.key)}\n onPointerMove={moveResize}\n onPointerUp={(e) => finishResize(e, true)}\n onPointerCancel={(e) => finishResize(e, false)}\n onDoubleClick={(e) => {\n e.preventDefault();\n setWidths((w) => {\n const next = { ...w };\n delete next[col.key];\n return next;\n });\n }}\n // `touch-none`: without it the browser claims a finger drag for\n // scrolling before the first `pointermove` ever arrives.\n // `end-0` and a translate that flips with it: the handle sits on the column's\n // trailing edge, which is its left one in a right-to-left table.\n className=\"absolute end-0 top-0 z-10 h-full w-1.5 -translate-x-1/2 rtl:translate-x-1/2 cursor-col-resize select-none touch-none hover:bg-brand-soft-hover\"\n />\n )}\n </th>\n );\n })}\n </tr>\n </thead>\n );\n}\n"],"mappings":"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","names":[]}
@@ -1,8 +1,22 @@
1
+ import { type RowAction } from "./row-actions.js";
1
2
  import type { DataTableLabels } from "./data-table-labels.js";
2
- import type { DataTableColumn, DataTableDensity, DataTableProps, MobileSwipeActions } from "./data-table.js";
3
+ import type { DataTableColumn, DataTableDensity, DataTableDesktopSwipeActions, DataTableProps, MobileSwipeActions } from "./data-table.js";
3
4
  /** The actions column's key. Not a column a caller declares, so it is kept out of the
4
5
  * column-settings panel. */
5
6
  export declare const ROW_ACTIONS_KEY = "__rowActions";
7
+ /** The key of the column derived from `mobileSwipeActions` (0.46, dev#598) — the
8
+ * table's own too. */
9
+ export declare const SWIPE_ACTIONS_KEY = "__swipeActions";
10
+ /** A column the TABLE adds, not the caller: out of the column settings and the count,
11
+ * never resized, never the totals row's header. */
12
+ export declare function isTableOwnColumn(key: string): boolean;
13
+ /**
14
+ * A row's swipe plan as desktop row actions (dev#598): `end` then `start` — the physical
15
+ * `right` / `left` only where the logical side is missing, as the card reads them — each
16
+ * action once, told apart by its `id`, else by its label (two stages with one label would
17
+ * be one button twice).
18
+ */
19
+ export declare function swipePlanRowActions<T>(plan: MobileSwipeActions | null | undefined, row: T, options?: Pick<DataTableDesktopSwipeActions<T>, "omit" | "commit">): RowAction[];
6
20
  /**
7
21
  * The caller's columns with the actions column appended, and the same actions as a
8
22
  * phone card's swipes (`swipesFromActions`; DataTable uses it unless the caller passes
@@ -12,12 +26,14 @@ export declare const ROW_ACTIONS_KEY = "__rowActions";
12
26
  * second special case beside the selection column: it then gets the cell padding,
13
27
  * the widths and the phone rules (`mobileHidden`) every other column gets.
14
28
  */
15
- export declare function useRowActionColumn<T>({ columns: columnsProp, rowActions, rowName, labels, density, }: {
29
+ export declare function useRowActionColumn<T>({ columns: columnsProp, rowActions, rowName, labels, density, mobileSwipeActions, desktopSwipeActions, }: {
16
30
  columns: DataTableColumn<T>[];
17
31
  rowActions: DataTableProps<T>["rowActions"];
18
32
  rowName: DataTableProps<T>["rowName"];
19
33
  labels: DataTableLabels;
20
34
  density: DataTableDensity;
35
+ mobileSwipeActions?: DataTableProps<T>["mobileSwipeActions"];
36
+ desktopSwipeActions?: DataTableProps<T>["desktopSwipeActions"];
21
37
  }): {
22
38
  columns: DataTableColumn<T>[];
23
39
  swipesFromActions: (row: T) => MobileSwipeActions | null;
@@ -4,6 +4,41 @@ import { isValidElement, useCallback, useMemo } from "react";
4
4
  import { Pencil, Trash2 } from "lucide-react";
5
5
  import { RowActions } from "./row-actions.js";
6
6
  const ROW_ACTIONS_KEY = "__rowActions";
7
+ const SWIPE_ACTIONS_KEY = "__swipeActions";
8
+ function isTableOwnColumn(key) {
9
+ return key === ROW_ACTIONS_KEY || key === SWIPE_ACTIONS_KEY;
10
+ }
11
+ function swipeTone(action) {
12
+ switch (action.tone) {
13
+ case "danger":
14
+ case "warning":
15
+ case "info":
16
+ return action.tone;
17
+ default:
18
+ return "muted";
19
+ }
20
+ }
21
+ function swipePlanRowActions(plan, row, options = {}) {
22
+ if (!plan) return [];
23
+ const out = [];
24
+ const seen = /* @__PURE__ */ new Set();
25
+ for (const action of [...plan.end ?? plan.right ?? [], ...plan.start ?? plan.left ?? []]) {
26
+ const key = action.id ?? action.label;
27
+ if (seen.has(key)) continue;
28
+ seen.add(key);
29
+ if (options.omit?.(action, row)) continue;
30
+ const commit = typeof options.commit === "function" ? options.commit(action, row) : options.commit;
31
+ out.push({
32
+ key,
33
+ label: action.label,
34
+ icon: isValidElement(action.icon) ? action.icon : action.icon != null && action.icon !== false ? /* @__PURE__ */ jsx(Fragment, { children: action.icon }) : void 0,
35
+ tone: swipeTone(action),
36
+ commit,
37
+ onSelect: action.onCommit
38
+ });
39
+ }
40
+ return out;
41
+ }
7
42
  function resolveRowAction(action, index, labels) {
8
43
  const tone = action.tone ?? (action.kind === "delete" ? "danger" : "default");
9
44
  return {
@@ -34,13 +69,55 @@ function useRowActionColumn({
34
69
  rowActions,
35
70
  rowName,
36
71
  labels,
37
- density
72
+ density,
73
+ mobileSwipeActions,
74
+ desktopSwipeActions
38
75
  }) {
39
76
  const rowActionsFor = useCallback(
40
77
  (row) => rowActions ? (typeof rowActions === "function" ? rowActions(row) : rowActions).filter((a) => !a.hidden?.(row)).map((a, i) => resolveRowAction(a, i, labels)) : [],
41
78
  [rowActions, labels]
42
79
  );
43
- const columns = useMemo(
80
+ const swipeOptions = typeof desktopSwipeActions === "object" ? desktopSwipeActions : void 0;
81
+ const swipeColumnOn = !!mobileSwipeActions && (desktopSwipeActions === void 0 ? !rowActions : desktopSwipeActions !== false);
82
+ const swipeOmit = swipeOptions?.omit;
83
+ const swipeName = swipeOptions?.name;
84
+ const swipeCollapse = swipeOptions?.collapse;
85
+ const swipeCommit = swipeOptions?.commit;
86
+ const swipeColumn = useMemo(
87
+ () => swipeColumnOn ? {
88
+ key: SWIPE_ACTIONS_KEY,
89
+ header: /* @__PURE__ */ jsx("span", { className: "sr-only", children: labels.actions }),
90
+ cell: (row) => /* @__PURE__ */ jsx(
91
+ RowActions,
92
+ {
93
+ actions: swipePlanRowActions(mobileSwipeActions(row), row, { omit: swipeOmit, commit: swipeCommit }),
94
+ name: (swipeName ?? rowName)?.(row),
95
+ collapse: swipeCollapse,
96
+ size: density === "compact" ? "2xs" : "xs",
97
+ tooltipSide: "start",
98
+ labels: { actions: labels.actions },
99
+ className: "justify-end"
100
+ }
101
+ ),
102
+ className: "w-px whitespace-nowrap text-end",
103
+ headClassName: "w-px",
104
+ // On a phone the same actions are the card's swipes.
105
+ mobileHidden: true,
106
+ noRowLink: true
107
+ } : null,
108
+ [
109
+ swipeColumnOn,
110
+ mobileSwipeActions,
111
+ swipeOmit,
112
+ swipeCommit,
113
+ swipeName,
114
+ rowName,
115
+ swipeCollapse,
116
+ density,
117
+ labels.actions
118
+ ]
119
+ );
120
+ const actionColumns = useMemo(
44
121
  () => rowActions ? [
45
122
  ...columnsProp,
46
123
  {
@@ -70,6 +147,10 @@ function useRowActionColumn({
70
147
  ] : columnsProp,
71
148
  [columnsProp, rowActions, rowActionsFor, rowName, labels.actions, density]
72
149
  );
150
+ const columns = useMemo(
151
+ () => swipeColumn ? [...actionColumns, swipeColumn] : actionColumns,
152
+ [actionColumns, swipeColumn]
153
+ );
73
154
  const swipesFromActions = (row) => {
74
155
  const swipes = rowActionsFor(row).filter((a) => a.swipe && !a.action.disabledReason?.(row));
75
156
  if (!swipes.length) return null;
@@ -90,6 +171,9 @@ function useRowActionColumn({
90
171
  }
91
172
  export {
92
173
  ROW_ACTIONS_KEY,
174
+ SWIPE_ACTIONS_KEY,
175
+ isTableOwnColumn,
176
+ swipePlanRowActions,
93
177
  useRowActionColumn
94
178
  };
95
179
  //# sourceMappingURL=data-table-row-actions.js.map
@@ -1 +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 } from \"./row-actions\";\nimport type { SwipeAction } from \"./swipeable-row\";\nimport type { DataTableLabels } from \"./data-table-labels\";\nimport type {\n DataTableColumn,\n DataTableDensity,\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\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 rowName,\n labels,\n density,\n}: {\n columns: DataTableColumn<T>[];\n rowActions: DataTableProps<T>[\"rowActions\"];\n rowName: DataTableProps<T>[\"rowName\"];\n labels: DataTableLabels;\n density: DataTableDensity;\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 const columns = useMemo<DataTableColumn<T>[]>(\n () =>\n rowActions\n ? [\n ...columnsProp,\n {\n key: ROW_ACTIONS_KEY,\n header: <span className=\"sr-only\">{labels.actions}</span>,\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\",\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, rowActionsFor, rowName, labels.actions, density],\n );\n const swipesFromActions = (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 };\n return { columns, swipesFromActions };\n}\n"],"mappings":"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","names":[]}
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/** 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): `end` then `start` — the physical\n * `right` / `left` only where the logical side is missing, as the card reads them — each\n * action once, told apart by its `id`, else by its label (two stages with one label would\n * be one button twice).\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 rowName,\n labels,\n density,\n mobileSwipeActions,\n desktopSwipeActions,\n}: {\n columns: DataTableColumn<T>[];\n rowActions: DataTableProps<T>[\"rowActions\"];\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 swipeColumn = useMemo<DataTableColumn<T> | null>(\n () =>\n swipeColumnOn\n ? {\n key: SWIPE_ACTIONS_KEY,\n header: <span className=\"sr-only\">{labels.actions}</span>,\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 headClassName: \"w-px\",\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 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: <span className=\"sr-only\">{labels.actions}</span>,\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\",\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, rowActionsFor, rowName, labels.actions, density],\n );\n const columns = useMemo(\n () => (swipeColumn ? [...actionColumns, swipeColumn] : actionColumns),\n [actionColumns, swipeColumn],\n );\n const swipesFromActions = (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 };\n return { columns, swipesFromActions };\n}\n"],"mappings":"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","names":[]}
@@ -1,6 +1,6 @@
1
1
  "use client";
2
2
  import { jsx } from "react/jsx-runtime";
3
- import { ROW_ACTIONS_KEY } from "./data-table-row-actions.js";
3
+ import { isTableOwnColumn } from "./data-table-row-actions.js";
4
4
  import { DEFAULT_DATA_TABLE_LABELS } from "./data-table-labels.js";
5
5
  function splitCellProps(props) {
6
6
  if (!props) return { attrs: {} };
@@ -30,7 +30,7 @@ function cleanAttrs(attrs) {
30
30
  return out;
31
31
  }
32
32
  function columnLabel(col, labels) {
33
- if (col.key === ROW_ACTIONS_KEY && labels) return labels.actions;
33
+ if (isTableOwnColumn(col.key) && labels) return labels.actions;
34
34
  return col.headerText ?? (typeof col.header === "string" ? col.header : col.key);
35
35
  }
36
36
  function resolveDataTableLabels(...layers) {
@@ -62,6 +62,12 @@ function fromOwnControl(target, row) {
62
62
  const hit = target.closest(OWN_CONTROL);
63
63
  return !!hit && hit !== row && row.contains(hit) && !hit.hasAttribute("data-row-link");
64
64
  }
65
+ const OWN_DEFAULT = 'input[type="checkbox"],input[type="radio"],label,summary';
66
+ function onOwnDefault(target, link) {
67
+ if (!(target instanceof Element)) return false;
68
+ const hit = target.closest(OWN_DEFAULT);
69
+ return !!hit && hit !== link && link.contains(hit);
70
+ }
65
71
  const isPlainLeftClick = (e) => e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey;
66
72
  function RowLink({
67
73
  href,
@@ -79,6 +85,7 @@ function RowLink({
79
85
  className,
80
86
  onClickCapture: (e) => {
81
87
  if (fromOutside(e.target, e.currentTarget)) return;
88
+ if (onOwnDefault(e.target, e.currentTarget)) return;
82
89
  if (isPlainLeftClick(e)) e.preventDefault();
83
90
  },
84
91
  onClick: (e) => {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/components/data-table-shared.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from \"react\";\nimport { ROW_ACTIONS_KEY } from \"./data-table-row-actions\";\nimport { DEFAULT_DATA_TABLE_LABELS, type DataTableLabels } from \"./data-table-labels\";\nimport type { DataTableCellProps, DataTableColumn, DataTableHeadProps } from \"./data-table\";\nimport type { LabelOverride } from \"../i18n/kit-labels\";\n\n// What DataTable shares with its header (data-table-head.tsx), its column panel and its\n// phone layout (data-table-mobile.tsx): the cell-attribute and alignment rules, a\n// column's plain-text name, and the row link. Moved out of data-table.tsx unchanged\n// (refactor audit 2026-10, MOD-3), into a module of their own so none of those has to\n// import data-table.tsx at run time — which imports them. Since 0.35 also the table's\n// label resolver, which DataTable and its FilterPopover share and the barrel no longer\n// exports (round 0.35 R1).\n\n/**\n * Split a caller's cell attributes into what may reach the element and what the kit\n * owns. `role` and `data-col` are dropped outright (see `cellProps`); `className` and\n * `style` come back separately so the kit can merge rather than replace them.\n */\nexport function splitCellProps(\n props: DataTableCellProps | DataTableHeadProps | undefined,\n): { attrs: Record<string, unknown>; className?: string; style?: CSSProperties } {\n if (!props) return { attrs: {} };\n const {\n className,\n style,\n role: _role,\n \"data-col\": _col,\n ...attrs\n } = props as DataTableCellProps & { \"data-col\"?: unknown };\n return { attrs, className, style };\n}\n\n// A bare `text-right` / `text-left` token, with or without variant prefixes\n// (`md:text-right`). Deliberately NOT `text-right-…` or an arbitrary value.\nconst PHYSICAL_ALIGN = /(^|\\s)((?:[\\w-]+:)*)text-(left|right)(?=\\s|$)/g;\n\n/**\n * A column's `className`/`headClassName` with physical text alignment rewritten to\n * logical: `text-right` → `text-end`, `text-left` → `text-start`.\n *\n * Every numeric column written before 0.7.0 says `text-right`, and that is what it\n * MEANT: the end of the line, where digits line up. Rendered as written, a\n * right-to-left table puts those numbers on the far side from their own header's\n * sort button. Rewriting keeps each existing call site correct in both directions\n * with no change on its side; a caller who genuinely wants the physical side in RTL\n * too can say `ltr:text-right rtl:text-right`, which this leaves alone.\n */\nexport function logicalAlign(className: string | undefined): string | undefined {\n return className?.replace(\n PHYSICAL_ALIGN,\n (token: string, lead: string, variants: string, side: string) =>\n // Already scoped to one direction: that is a caller choosing the physical side.\n /(^|:)(ltr|rtl):/.test(variants)\n ? token\n : `${lead}${variants}text-${side === \"right\" ? \"end\" : \"start\"}`,\n );\n}\n\n/** Drop the undefined entries of a {@link DataTableProps.rowAttributes} map, so a\n * caller can write `{ \"data-x\": cond ? \"y\" : undefined }` and get no attribute\n * at all rather than the string \"undefined\" in the DOM. */\nexport function cleanAttrs(\n attrs: Record<string, string | undefined> | undefined,\n): Record<string, string> | undefined {\n if (!attrs) return undefined;\n const out: Record<string, string> = {};\n for (const [k, v] of Object.entries(attrs)) if (v !== undefined) out[k] = v;\n return out;\n}\n\n/**\n * A column's name as a plain string.\n *\n * `header` is a ReactNode — an icon, a unit suffix, a tooltip-wrapped span — and\n * neither a live region nor the column-settings checklist can speak a React element.\n * The `key` fallback is the one the settings panel has always used; a column whose\n * header is not a string and whose key is not human-readable is a call site that\n * should pass a string header, and that is visible in what gets announced.\n */\nexport function columnLabel<T>(col: DataTableColumn<T>, labels?: DataTableLabels): string {\n if (col.key === ROW_ACTIONS_KEY && labels) return labels.actions;\n return col.headerText ?? (typeof col.header === \"string\" ? col.header : col.key);\n}\n\n/**\n * The table's labels: caller overrides merged onto the English defaults (presets merged\n * too, key by key, as the provider merges them — so the parameter is a\n * {@link LabelOverride}).\n *\n * DataTable's own, and FilterPopover's: public until 0.35, when it left the barrel for\n * DataTable's `labels` and the provider's `dataTable`, which it serves (round 0.35 R1,\n * refactor audit 2026-10 API-6a). It stays a resolver rather than `useKitLabels` for the\n * two keys it derives (`columnsCount`, `filterColumn`), which a plain merge would not.\n *\n * Lenient on purpose — a table with no labels at all still renders — so a translated app\n * finds out what fell back to English from `missingKitLabels(labels,\n * DEFAULT_UI_KIT_LABELS)` in its own test, where the answer is actionable.\n */\nexport function resolveDataTableLabels(\n ...layers: (LabelOverride<DataTableLabels> | undefined)[]\n): DataTableLabels {\n if (!layers.some(Boolean)) return DEFAULT_DATA_TABLE_LABELS;\n // The layers in order, the provider's then the prop's, later winning key by key. An\n // `undefined` key is skipped, as `useKitLabels` skips it, rather than blanking the word\n // under it: DataTable spread `{ ...provider, ...prop }`, so `labels={{ autoSize:\n // undefined }}` blanked the provider's word and the English one (round 0.35). `presets`\n // is a record and is merged the same way, so renaming one keeps the other ten.\n const partial: Partial<Omit<DataTableLabels, \"presets\">> = {};\n const presets = { ...DEFAULT_DATA_TABLE_LABELS.presets };\n for (const layer of layers) {\n for (const [key, value] of Object.entries(layer ?? {})) {\n if (value === undefined) continue;\n if (key !== \"presets\") Object.assign(partial, { [key]: value });\n else for (const [preset, text] of Object.entries(value)) if (text !== undefined) presets[preset] = text;\n }\n }\n const merged: DataTableLabels = { ...DEFAULT_DATA_TABLE_LABELS, ...partial, presets };\n // `columnsCount` was split out of `columns` + a template literal. Consumers have\n // been translating `columns` since 0.1, and backfilling the English default over\n // that would hand them \"Columns (4/9)\" back for having translated the key that\n // existed at the time. So the count is derived from the RESOLVED `columns` unless the\n // caller states the whole sentence, which is the escape hatch for a language where\n // the parenthetical does not fit.\n if (partial.columns !== undefined && partial.columnsCount === undefined) {\n merged.columnsCount = (visible, total) => `${merged.columns} (${visible}/${total})`;\n }\n // The same for `filterColumn` (0.34), from a translated `filter`: the app's own word\n // with the column, rather than English for having translated the key that existed.\n if (partial.filter !== undefined && partial.filterColumn === undefined) {\n merged.filterColumn = (column) => `${merged.filter}: ${column}`;\n }\n return merged;\n}\n\n/**\n * Whether a click that reached `row`'s handler did not start in the row's own DOM.\n *\n * React bubbles an event through the COMPONENT tree, portals included: a popover, a\n * menu or a dialog a cell (or the expansion under it) opens renders at `<body>` but\n * still reports its clicks to every React ancestor — the row among them. So a click\n * in a cell's portalled date picker opened the row it came from, and a page wrapped\n * such content in `<div onClick={(e) => e.stopPropagation()}>` to stop it (kastlan's\n * feedback page did, round its comments). The row owns the clicks on the row.\n */\nexport function fromOutside(target: EventTarget | null, row: HTMLElement): boolean {\n return !(target instanceof Node) || !row.contains(target);\n}\n\n/**\n * What counts as a control of its own inside a clickable row: a click or key press\n * that lands on one of these belongs to it, not to the row's `onRowClick`. The row's\n * own link (`rowHref`, marked `data-row-link`) is the exception — it IS the row.\n */\nconst OWN_CONTROL =\n 'a[href],button,input,select,textarea,label,summary,[role=\"button\"],[role=\"link\"],[role=\"checkbox\"],[role=\"switch\"],[role=\"menuitem\"],[role=\"option\"],[contenteditable=\"\"],[contenteditable=\"true\"],[tabindex]:not([tabindex=\"-1\"])';\n\n/** Whether an event on `row` started on a control nested inside it. */\nexport function fromOwnControl(target: EventTarget | null, row: HTMLElement): boolean {\n if (!(target instanceof Element)) return false;\n const hit = target.closest(OWN_CONTROL);\n return !!hit && hit !== row && row.contains(hit) && !hit.hasAttribute(\"data-row-link\");\n}\n\n/** A click the APP owns. Anything else — middle, ⌘/Ctrl, Shift, Alt — belongs to\n * the browser, and the whole feature is not touching it. */\nconst isPlainLeftClick = (e: React.MouseEvent) =>\n e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey;\n\n/**\n * The anchor a linkable row is opened through (Keksdose feedback #451).\n *\n * The plain left click is OURS: cancelled, then handed to the row's own handler, so\n * clicking a row still expands it in place instead of reloading the page. Every\n * other click — middle, ⌘/Ctrl, Shift, Alt — is left completely untouched, which is\n * the entire point of using an anchor rather than an `onAuxClick` + `window.open`:\n * that imitation buys back the middle click and still loses ⌘/Ctrl-click, \"copy link\n * address\", the status-bar preview and the phone's long-press menu.\n *\n * Modified clicks DO stop propagating: on a table with `selection`, ⌘/Ctrl-click and\n * Shift-click on a row mean \"select\" (feedback #289), and a row must not change its\n * selection while the browser is opening a tab. The rest of the row still selects —\n * the link is one cell, not the row.\n *\n * `draggable={false}` because an anchor otherwise hijacks a horizontal mouse drag as\n * a link-drag: that is both drag-to-select-text on the desktop table and the mouse\n * path through SwipeableRow's gesture on the mobile card.\n */\nexport function RowLink({\n href,\n onActivate,\n className,\n children,\n ...rest\n}: {\n href: string;\n /** Runs on a plain left click. Omit it where an ANCESTOR already handles the\n * click (the desktop `<tr>`), or the row would toggle twice. */\n onActivate?: () => void;\n className?: string;\n children: ReactNode;\n} & Omit<\n React.AnchorHTMLAttributes<HTMLAnchorElement>,\n \"href\" | \"className\" | \"children\" | \"onClick\" | \"onClickCapture\"\n>) {\n return (\n <a\n {...rest}\n href={href}\n draggable={false}\n className={className}\n // CAPTURE phase, and it has to be: on the mobile card the whole card is the\n // anchor, so a nested control sits INSIDE it — and the ones that matter\n // (the feedback row's status toggles) stop the click propagating so the row\n // won't also expand. A bubble-phase handler would never run for those, and\n // the browser would follow the link out from under the button press. Cancelling\n // here happens before any descendant can silence the event; `stopPropagation`\n // does not undo a `preventDefault`.\n onClickCapture={(e) => {\n // A click in a portal a descendant opened is not a click on the link: leave\n // it (and a link inside it) alone. See `fromOutside`.\n if (fromOutside(e.target, e.currentTarget)) return;\n if (isPlainLeftClick(e)) e.preventDefault();\n }}\n onClick={(e) => {\n if (fromOutside(e.target, e.currentTarget)) return;\n if (!isPlainLeftClick(e)) {\n e.stopPropagation();\n return;\n }\n // Already cancelled above; this phase only decides what opens. A nested\n // control that stopped propagation deliberately never reaches it, which is\n // exactly how the row behaved before it became a link — and one that did not\n // (a select in a phone card's cell, keksdose live #428) is still its own.\n if (fromOwnControl(e.target, e.currentTarget)) return;\n onActivate?.();\n }}\n >\n {children}\n </a>\n );\n}\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../../src/components/data-table-shared.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from \"react\";\nimport { isTableOwnColumn } from \"./data-table-row-actions\";\nimport { DEFAULT_DATA_TABLE_LABELS, type DataTableLabels } from \"./data-table-labels\";\nimport type { DataTableCellProps, DataTableColumn, DataTableHeadProps } from \"./data-table\";\nimport type { LabelOverride } from \"../i18n/kit-labels\";\n\n// What DataTable shares with its header (data-table-head.tsx), its column panel and its\n// phone layout (data-table-mobile.tsx): the cell-attribute and alignment rules, a\n// column's plain-text name, and the row link. Moved out of data-table.tsx unchanged\n// (refactor audit 2026-10, MOD-3), into a module of their own so none of those has to\n// import data-table.tsx at run time — which imports them. Since 0.35 also the table's\n// label resolver, which DataTable and its FilterPopover share and the barrel no longer\n// exports (round 0.35 R1).\n\n/**\n * Split a caller's cell attributes into what may reach the element and what the kit\n * owns. `role` and `data-col` are dropped outright (see `cellProps`); `className` and\n * `style` come back separately so the kit can merge rather than replace them.\n */\nexport function splitCellProps(\n props: DataTableCellProps | DataTableHeadProps | undefined,\n): { attrs: Record<string, unknown>; className?: string; style?: CSSProperties } {\n if (!props) return { attrs: {} };\n const {\n className,\n style,\n role: _role,\n \"data-col\": _col,\n ...attrs\n } = props as DataTableCellProps & { \"data-col\"?: unknown };\n return { attrs, className, style };\n}\n\n// A bare `text-right` / `text-left` token, with or without variant prefixes\n// (`md:text-right`). Deliberately NOT `text-right-…` or an arbitrary value.\nconst PHYSICAL_ALIGN = /(^|\\s)((?:[\\w-]+:)*)text-(left|right)(?=\\s|$)/g;\n\n/**\n * A column's `className`/`headClassName` with physical text alignment rewritten to\n * logical: `text-right` → `text-end`, `text-left` → `text-start`.\n *\n * Every numeric column written before 0.7.0 says `text-right`, and that is what it\n * MEANT: the end of the line, where digits line up. Rendered as written, a\n * right-to-left table puts those numbers on the far side from their own header's\n * sort button. Rewriting keeps each existing call site correct in both directions\n * with no change on its side; a caller who genuinely wants the physical side in RTL\n * too can say `ltr:text-right rtl:text-right`, which this leaves alone.\n */\nexport function logicalAlign(className: string | undefined): string | undefined {\n return className?.replace(\n PHYSICAL_ALIGN,\n (token: string, lead: string, variants: string, side: string) =>\n // Already scoped to one direction: that is a caller choosing the physical side.\n /(^|:)(ltr|rtl):/.test(variants)\n ? token\n : `${lead}${variants}text-${side === \"right\" ? \"end\" : \"start\"}`,\n );\n}\n\n/** Drop the undefined entries of a {@link DataTableProps.rowAttributes} map, so a\n * caller can write `{ \"data-x\": cond ? \"y\" : undefined }` and get no attribute\n * at all rather than the string \"undefined\" in the DOM. */\nexport function cleanAttrs(\n attrs: Record<string, string | undefined> | undefined,\n): Record<string, string> | undefined {\n if (!attrs) return undefined;\n const out: Record<string, string> = {};\n for (const [k, v] of Object.entries(attrs)) if (v !== undefined) out[k] = v;\n return out;\n}\n\n/**\n * A column's name as a plain string.\n *\n * `header` is a ReactNode — an icon, a unit suffix, a tooltip-wrapped span — and\n * neither a live region nor the column-settings checklist can speak a React element.\n * The `key` fallback is the one the settings panel has always used; a column whose\n * header is not a string and whose key is not human-readable is a call site that\n * should pass a string header, and that is visible in what gets announced.\n */\nexport function columnLabel<T>(col: DataTableColumn<T>, labels?: DataTableLabels): string {\n if (isTableOwnColumn(col.key) && labels) return labels.actions;\n return col.headerText ?? (typeof col.header === \"string\" ? col.header : col.key);\n}\n\n/**\n * The table's labels: caller overrides merged onto the English defaults (presets merged\n * too, key by key, as the provider merges them — so the parameter is a\n * {@link LabelOverride}).\n *\n * DataTable's own, and FilterPopover's: public until 0.35, when it left the barrel for\n * DataTable's `labels` and the provider's `dataTable`, which it serves (round 0.35 R1,\n * refactor audit 2026-10 API-6a). It stays a resolver rather than `useKitLabels` for the\n * two keys it derives (`columnsCount`, `filterColumn`), which a plain merge would not.\n *\n * Lenient on purpose — a table with no labels at all still renders — so a translated app\n * finds out what fell back to English from `missingKitLabels(labels,\n * DEFAULT_UI_KIT_LABELS)` in its own test, where the answer is actionable.\n */\nexport function resolveDataTableLabels(\n ...layers: (LabelOverride<DataTableLabels> | undefined)[]\n): DataTableLabels {\n if (!layers.some(Boolean)) return DEFAULT_DATA_TABLE_LABELS;\n // The layers in order, the provider's then the prop's, later winning key by key. An\n // `undefined` key is skipped, as `useKitLabels` skips it, rather than blanking the word\n // under it: DataTable spread `{ ...provider, ...prop }`, so `labels={{ autoSize:\n // undefined }}` blanked the provider's word and the English one (round 0.35). `presets`\n // is a record and is merged the same way, so renaming one keeps the other ten.\n const partial: Partial<Omit<DataTableLabels, \"presets\">> = {};\n const presets = { ...DEFAULT_DATA_TABLE_LABELS.presets };\n for (const layer of layers) {\n for (const [key, value] of Object.entries(layer ?? {})) {\n if (value === undefined) continue;\n if (key !== \"presets\") Object.assign(partial, { [key]: value });\n else for (const [preset, text] of Object.entries(value)) if (text !== undefined) presets[preset] = text;\n }\n }\n const merged: DataTableLabels = { ...DEFAULT_DATA_TABLE_LABELS, ...partial, presets };\n // `columnsCount` was split out of `columns` + a template literal. Consumers have\n // been translating `columns` since 0.1, and backfilling the English default over\n // that would hand them \"Columns (4/9)\" back for having translated the key that\n // existed at the time. So the count is derived from the RESOLVED `columns` unless the\n // caller states the whole sentence, which is the escape hatch for a language where\n // the parenthetical does not fit.\n if (partial.columns !== undefined && partial.columnsCount === undefined) {\n merged.columnsCount = (visible, total) => `${merged.columns} (${visible}/${total})`;\n }\n // The same for `filterColumn` (0.34), from a translated `filter`: the app's own word\n // with the column, rather than English for having translated the key that existed.\n if (partial.filter !== undefined && partial.filterColumn === undefined) {\n merged.filterColumn = (column) => `${merged.filter}: ${column}`;\n }\n return merged;\n}\n\n/**\n * Whether a click that reached `row`'s handler did not start in the row's own DOM.\n *\n * React bubbles an event through the COMPONENT tree, portals included: a popover, a\n * menu or a dialog a cell (or the expansion under it) opens renders at `<body>` but\n * still reports its clicks to every React ancestor — the row among them. So a click\n * in a cell's portalled date picker opened the row it came from, and a page wrapped\n * such content in `<div onClick={(e) => e.stopPropagation()}>` to stop it (kastlan's\n * feedback page did, round its comments). The row owns the clicks on the row.\n */\nexport function fromOutside(target: EventTarget | null, row: HTMLElement): boolean {\n return !(target instanceof Node) || !row.contains(target);\n}\n\n/**\n * What counts as a control of its own inside a clickable row: a click or key press\n * that lands on one of these belongs to it, not to the row's `onRowClick`. The row's\n * own link (`rowHref`, marked `data-row-link`) is the exception — it IS the row.\n */\nconst OWN_CONTROL =\n 'a[href],button,input,select,textarea,label,summary,[role=\"button\"],[role=\"link\"],[role=\"checkbox\"],[role=\"switch\"],[role=\"menuitem\"],[role=\"option\"],[contenteditable=\"\"],[contenteditable=\"true\"],[tabindex]:not([tabindex=\"-1\"])';\n\n/** Whether an event on `row` started on a control nested inside it. */\nexport function fromOwnControl(target: EventTarget | null, row: HTMLElement): boolean {\n if (!(target instanceof Element)) return false;\n const hit = target.closest(OWN_CONTROL);\n return !!hit && hit !== row && row.contains(hit) && !hit.hasAttribute(\"data-row-link\");\n}\n\n/**\n * The controls whose own default IS the click — a native checkbox's or radio's toggle, a\n * label's click through to its field, a summary's disclosure (0.46, the 0.45 note from\n * UM): cancelling the click undoes it. Each is the click's own activation target, so a\n * click on one does not follow the link around it, and {@link RowLink} leaves its\n * default alone.\n */\nconst OWN_DEFAULT = 'input[type=\"checkbox\"],input[type=\"radio\"],label,summary';\n\n/** Whether a click inside `link` landed on (or in) one of {@link OWN_DEFAULT}. */\nfunction onOwnDefault(target: EventTarget | null, link: HTMLElement): boolean {\n if (!(target instanceof Element)) return false;\n const hit = target.closest(OWN_DEFAULT);\n return !!hit && hit !== link && link.contains(hit);\n}\n\n/** A click the APP owns. Anything else — middle, ⌘/Ctrl, Shift, Alt — belongs to\n * the browser, and the whole feature is not touching it. */\nconst isPlainLeftClick = (e: React.MouseEvent) =>\n e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey;\n\n/**\n * The anchor a linkable row is opened through (Keksdose feedback #451).\n *\n * The plain left click is OURS: cancelled, then handed to the row's own handler, so\n * clicking a row still expands it in place instead of reloading the page. Every\n * other click — middle, ⌘/Ctrl, Shift, Alt — is left completely untouched, which is\n * the entire point of using an anchor rather than an `onAuxClick` + `window.open`:\n * that imitation buys back the middle click and still loses ⌘/Ctrl-click, \"copy link\n * address\", the status-bar preview and the phone's long-press menu.\n *\n * Modified clicks DO stop propagating: on a table with `selection`, ⌘/Ctrl-click and\n * Shift-click on a row mean \"select\" (feedback #289), and a row must not change its\n * selection while the browser is opening a tab. The rest of the row still selects —\n * the link is one cell, not the row.\n *\n * `draggable={false}` because an anchor otherwise hijacks a horizontal mouse drag as\n * a link-drag: that is both drag-to-select-text on the desktop table and the mouse\n * path through SwipeableRow's gesture on the mobile card.\n */\nexport function RowLink({\n href,\n onActivate,\n className,\n children,\n ...rest\n}: {\n href: string;\n /** Runs on a plain left click. Omit it where an ANCESTOR already handles the\n * click (the desktop `<tr>`), or the row would toggle twice. */\n onActivate?: () => void;\n className?: string;\n children: ReactNode;\n} & Omit<\n React.AnchorHTMLAttributes<HTMLAnchorElement>,\n \"href\" | \"className\" | \"children\" | \"onClick\" | \"onClickCapture\"\n>) {\n return (\n <a\n {...rest}\n href={href}\n draggable={false}\n className={className}\n // CAPTURE phase, and it has to be: on the mobile card the whole card is the\n // anchor, so a nested control sits INSIDE it — and the ones that matter\n // (the feedback row's status toggles) stop the click propagating so the row\n // won't also expand. A bubble-phase handler would never run for those, and\n // the browser would follow the link out from under the button press. Cancelling\n // here happens before any descendant can silence the event; `stopPropagation`\n // does not undo a `preventDefault`.\n onClickCapture={(e) => {\n // A click in a portal a descendant opened is not a click on the link: leave\n // it (and a link inside it) alone. See `fromOutside`.\n if (fromOutside(e.target, e.currentTarget)) return;\n // A checkbox, a radio, a label or a summary keeps its own default: cancelling\n // it would undo the toggle, and the link is not followed from it anyway.\n if (onOwnDefault(e.target, e.currentTarget)) return;\n if (isPlainLeftClick(e)) e.preventDefault();\n }}\n onClick={(e) => {\n if (fromOutside(e.target, e.currentTarget)) return;\n if (!isPlainLeftClick(e)) {\n e.stopPropagation();\n return;\n }\n // Already cancelled above; this phase only decides what opens. A nested\n // control that stopped propagation deliberately never reaches it, which is\n // exactly how the row behaved before it became a link — and one that did not\n // (a select in a phone card's cell, keksdose live #428) is still its own.\n if (fromOwnControl(e.target, e.currentTarget)) return;\n onActivate?.();\n }}\n >\n {children}\n </a>\n );\n}\n"],"mappings":"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","names":[]}
@@ -2,6 +2,8 @@ import type { ReactNode, TdHTMLAttributes, ThHTMLAttributes } from "react";
2
2
  import type { ColumnFilter, FilterValue } from "./data-table-filters.js";
3
3
  import type { SortCycle, SortDir, SortState } from "./data-table-sort.js";
4
4
  import type { SwipeAction } from "./swipeable-row.js";
5
+ import type { RowActionsCollapse } from "./row-actions.js";
6
+ import type { CommitScope } from "./write-lock.js";
5
7
  import { type DataTableLabels } from "./data-table-labels.js";
6
8
  import { type LabelOverride } from "../i18n/kit-labels.js";
7
9
  export interface DataTableColumn<T> {
@@ -431,9 +433,28 @@ export interface DataTableProps<T> {
431
433
  * Mobile only, and deliberately so: the desktop table already has room for an
432
434
  * actions column, and a drag gesture on a pointer device is a worse version of a
433
435
  * button. Wraps only the row body, so an expansion panel below stays put while the
434
- * row above it slides.
436
+ * row above it slides. The desktop's buttons for the same actions come with it — see
437
+ * {@link DataTableProps.desktopSwipeActions}.
435
438
  */
436
439
  mobileSwipeActions?: (row: T) => MobileSwipeActions | null;
440
+ /**
441
+ * The desktop half of `mobileSwipeActions` (0.46, keksdose dev#598 — Marcel: every
442
+ * table whose phone cards swipe gets a desktop actions column with the same actions):
443
+ * an actions column DERIVED from the very plan the card swipes with, so the two
444
+ * viewports offer the same functions and cannot drift. Each button runs the swipe's own
445
+ * `onCommit` — the same confirm, the same undo toast. The reading-end side's actions
446
+ * first, then the start side's, each once (by `SwipeAction.id`, else by label); a row
447
+ * whose plan is `null` gets an empty cell. The column is hidden on the phone, where the
448
+ * actions are the swipes, kept off the column settings, and its tooltips open toward
449
+ * the row's start.
450
+ *
451
+ * On by default wherever `mobileSwipeActions` is given, so a new swipeable table cannot
452
+ * forget it — except beside `rowActions`, whose column is the desktop's already (pass
453
+ * `true` or options to add this one too). `false` where the desktop row carries every
454
+ * one of those actions as its own buttons; say so at the call site. Options:
455
+ * {@link DataTableDesktopSwipeActions}.
456
+ */
457
+ desktopSwipeActions?: boolean | DataTableDesktopSwipeActions<T>;
437
458
  /**
438
459
  * Renders as a full-width row above the data rows in the desktop table
439
460
  * (mobile has no equivalent list-row slot, so it's desktop-only). For a
@@ -616,6 +637,26 @@ export interface MobileSwipeActions {
616
637
  /** Committed by dragging physically RIGHT, whatever the direction. */
617
638
  right?: SwipeAction[];
618
639
  }
640
+ /** How {@link DataTableProps.desktopSwipeActions} draws the column (0.46, dev#598). */
641
+ export interface DataTableDesktopSwipeActions<T> {
642
+ /** Leave an action out because the row already has its own button for it — keksdose's
643
+ * feedback inbox, whose status cell offers `advance` and `wont_do`
644
+ * (`feedbackSwipeOmitShown`). Match on `action.id` rather than the translated label. */
645
+ omit?: (action: SwipeAction, row: T) => boolean;
646
+ /** The row's name for the "⋯" menu ("Actions for …"). Default: the table's `rowName`. */
647
+ name?: (row: T) => string | null | undefined;
648
+ /** {@link RowActionsCollapse}; default `"auto"`. A table whose rows offer more than two
649
+ * actions passes `"menu"`, so the column does not switch between icons and a menu. */
650
+ collapse?: RowActionsCollapse;
651
+ /**
652
+ * Whether an action COMMITS, refused with the reason under a locked
653
+ * `WriteLockProvider` ({@link CommitScope}) — a swipe has no such state, so a plan
654
+ * usually returns nothing for a locked row and the desktop shows nothing either; with
655
+ * this the plan can stay and the desktop says why. Per action as a function. Default:
656
+ * no commit scope (the plan decides).
657
+ */
658
+ commit?: CommitScope | ((action: SwipeAction, row: T) => CommitScope | undefined);
659
+ }
619
660
  /**
620
661
  * The phone sort control's strings (keksdose K10). They are `dataTable` strings —
621
662
  * read from the table's resolved labels, so the `labels` prop and the provider's
@@ -637,4 +678,4 @@ export interface DataTableSortLabels {
637
678
  * (DataTableLabels extends DataTableSortLabels; one source for the English). */
638
679
  export declare const DEFAULT_DATA_TABLE_SORT_LABELS: DataTableSortLabels;
639
680
  import { type TableUrlSync } from "./use-table-state.js";
640
- export declare function DataTable<T>({ rows, columns: columnsProp, rowKey, defaultPageSize, onRowClick, rowHref, expandedRow, isExpanded, rowClassName, rowAttributes, paginated, empty, storageKey, urlSync, fillHeight, maxBodyHeight, serverPagination, filters: filtersProp, onFiltersChange, sorts: sortsProp, onSortsChange, pageSize: pageSizeProp, onPageSizeChange, selection, labels: labelsProp, locale: localeProp, storageKeyPrefix: storageKeyPrefixProp, mobileExpandAsDialog, mobileDetailsInRow, rowName, mobileDialogBackCloses, mobileGroupBy, mobileGroupLabel, mobileCard, mobileSort, mobileSwipeActions, leadingRow, density, sortCycle, chrome, columnSettings: columnSettingsProp, resizable: resizableProp, multiSort: multiSortProp, frame, edgeFade, className, rowActions, toolbar, footerLabel, footer: footerProp, }: DataTableProps<T>): import("react").JSX.Element;
681
+ export declare function DataTable<T>({ rows, columns: columnsProp, rowKey, defaultPageSize, onRowClick, rowHref, expandedRow, isExpanded, rowClassName, rowAttributes, paginated, empty, storageKey, urlSync, fillHeight, maxBodyHeight, serverPagination, filters: filtersProp, onFiltersChange, sorts: sortsProp, onSortsChange, pageSize: pageSizeProp, onPageSizeChange, selection, labels: labelsProp, locale: localeProp, storageKeyPrefix: storageKeyPrefixProp, mobileExpandAsDialog, mobileDetailsInRow, rowName, mobileDialogBackCloses, mobileGroupBy, mobileGroupLabel, mobileCard, mobileSort, mobileSwipeActions, desktopSwipeActions, leadingRow, density, sortCycle, chrome, columnSettings: columnSettingsProp, resizable: resizableProp, multiSort: multiSortProp, frame, edgeFade, className, rowActions, toolbar, footerLabel, footer: footerProp, }: DataTableProps<T>): import("react").JSX.Element;
@@ -4,7 +4,7 @@ import { createElement } from "react";
4
4
  import { Fragment, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
5
5
  import { Card } from "./card.js";
6
6
  import { Spinner } from "./spinner.js";
7
- import { ROW_ACTIONS_KEY, useRowActionColumn } from "./data-table-row-actions.js";
7
+ import { isTableOwnColumn, useRowActionColumn } from "./data-table-row-actions.js";
8
8
  import { useColumnResize } from "./data-table-resize.js";
9
9
  import { useRangeSelection } from "./data-table-selection.js";
10
10
  import {
@@ -92,6 +92,7 @@ function DataTable({
92
92
  mobileCard,
93
93
  mobileSort = false,
94
94
  mobileSwipeActions,
95
+ desktopSwipeActions,
95
96
  leadingRow,
96
97
  density = "comfortable",
97
98
  sortCycle = "tri",
@@ -124,7 +125,9 @@ function DataTable({
124
125
  rowActions,
125
126
  rowName,
126
127
  labels,
127
- density
128
+ density,
129
+ mobileSwipeActions,
130
+ desktopSwipeActions
128
131
  });
129
132
  const swipeActionsFor = mobileSwipeActions ?? (rowActions ? swipesFromActions : void 0);
130
133
  const { announce, regionProps } = useAnnounce();
@@ -309,11 +312,13 @@ function DataTable({
309
312
  const totalColSpan = visibleCount + (selection ? 1 : 0);
310
313
  const hasFooterColumns = columns.some((c) => c.footer);
311
314
  const showFooter = footerProp !== false && hasFooterColumns && sorted.length > 0;
312
- const footerLabelCol = showFooter ? visibleColumns.find((c) => !c.footer && c.key !== ROW_ACTIONS_KEY) ?? visibleColumns[0] : void 0;
315
+ const footerLabelCol = showFooter ? visibleColumns.find((c) => !c.footer && !isTableOwnColumn(c.key)) ?? visibleColumns[0] : void 0;
313
316
  const footerValue = (col) => col.footer?.(sorted, slice);
314
317
  const footerHeadingId = useId();
315
318
  const detailIdBase = useId();
316
- const columnsCountLabel = rowActions ? labels.columnsCount(visibleCount - 1, totalCount - 1) : labels.columnsCount(visibleCount, totalCount);
319
+ const ownColumns = columns.filter((c) => isTableOwnColumn(c.key)).length;
320
+ const ownVisible = visibleColumns.filter((c) => isTableOwnColumn(c.key)).length;
321
+ const columnsCountLabel = labels.columnsCount(visibleCount - ownVisible, totalCount - ownColumns);
317
322
  const isMdUp = !usePhoneLayout();
318
323
  const desktopScroller = useRef(null);
319
324
  const edgeFadeProps = useEdgeFade(desktopScroller, edgeFade && isMdUp);