@eifi1/ui-kit 0.48.1 → 0.49.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.
- package/README.md +28 -13
- package/dist/admin/admin-action-confirm.js +1 -1
- package/dist/admin/admin-action-confirm.js.map +1 -1
- package/dist/admin/invitations-panel.js +5 -1
- package/dist/admin/invitations-panel.js.map +1 -1
- package/dist/admin/user-roster.d.ts +11 -5
- package/dist/admin/user-roster.js +15 -4
- package/dist/admin/user-roster.js.map +1 -1
- package/dist/auth/accept-invitation.js +2 -2
- package/dist/auth/accept-invitation.js.map +1 -1
- package/dist/auth/not-found-page.js +1 -1
- package/dist/auth/not-found-page.js.map +1 -1
- package/dist/auth/reset-password-form.js +2 -2
- package/dist/auth/reset-password-form.js.map +1 -1
- package/dist/auth/verify-email.js +2 -2
- package/dist/auth/verify-email.js.map +1 -1
- package/dist/billing/plan-card.js +2 -2
- package/dist/billing/plan-card.js.map +1 -1
- package/dist/components/breadcrumbs.d.ts +19 -1
- package/dist/components/breadcrumbs.js +11 -4
- package/dist/components/breadcrumbs.js.map +1 -1
- package/dist/components/button-look.d.ts +37 -7
- package/dist/components/button-look.js +33 -6
- package/dist/components/button-look.js.map +1 -1
- package/dist/components/button.d.ts +4 -1
- package/dist/components/button.js +2 -2
- package/dist/components/button.js.map +1 -1
- package/dist/components/calendar-heatmap.js +2 -1
- package/dist/components/calendar-heatmap.js.map +1 -1
- package/dist/components/chart-edge.d.ts +10 -0
- package/dist/components/chart-edge.js +57 -0
- package/dist/components/chart-edge.js.map +1 -0
- package/dist/components/chart.js +2 -1
- package/dist/components/chart.js.map +1 -1
- package/dist/components/chip.d.ts +8 -1
- package/dist/components/chip.js +4 -1
- package/dist/components/chip.js.map +1 -1
- package/dist/components/confirm-context.d.ts +5 -0
- package/dist/components/confirm-context.js +7 -0
- package/dist/components/confirm-context.js.map +1 -0
- package/dist/components/confirm-dialog.js +3 -3
- package/dist/components/confirm-dialog.js.map +1 -1
- package/dist/components/danger-confirm.d.ts +2 -2
- package/dist/components/danger-confirm.js +1 -1
- package/dist/components/danger-confirm.js.map +1 -1
- package/dist/components/data-table-fit.d.ts +8 -1
- package/dist/components/data-table-fit.js +28 -4
- package/dist/components/data-table-fit.js.map +1 -1
- package/dist/components/data-table-groups.d.ts +3 -1
- package/dist/components/data-table-groups.js +11 -5
- package/dist/components/data-table-groups.js.map +1 -1
- package/dist/components/data-table-head.d.ts +8 -1
- package/dist/components/data-table-head.js +11 -3
- package/dist/components/data-table-head.js.map +1 -1
- package/dist/components/data-table-leading-row.d.ts +3 -1
- package/dist/components/data-table-leading-row.js +2 -1
- package/dist/components/data-table-leading-row.js.map +1 -1
- package/dist/components/data-table-mobile.d.ts +48 -2
- package/dist/components/data-table-mobile.js +87 -10
- package/dist/components/data-table-mobile.js.map +1 -1
- package/dist/components/data-table-row-actions.d.ts +2 -1
- package/dist/components/data-table-row-actions.js +9 -2
- package/dist/components/data-table-row-actions.js.map +1 -1
- package/dist/components/data-table-row.d.ts +84 -0
- package/dist/components/data-table-row.js +261 -0
- package/dist/components/data-table-row.js.map +1 -0
- package/dist/components/data-table-selection.d.ts +3 -0
- package/dist/components/data-table-selection.js +12 -1
- package/dist/components/data-table-selection.js.map +1 -1
- package/dist/components/data-table-virtual.d.ts +98 -0
- package/dist/components/data-table-virtual.js +369 -0
- package/dist/components/data-table-virtual.js.map +1 -0
- package/dist/components/data-table.d.ts +74 -2
- package/dist/components/data-table.js +241 -221
- package/dist/components/data-table.js.map +1 -1
- package/dist/components/error-boundary.js +2 -2
- package/dist/components/error-boundary.js.map +1 -1
- package/dist/components/floating-panel.d.ts +36 -13
- package/dist/components/floating-panel.js +27 -7
- package/dist/components/floating-panel.js.map +1 -1
- package/dist/components/form-actions.d.ts +1 -1
- package/dist/components/form-actions.js +1 -1
- package/dist/components/form-actions.js.map +1 -1
- package/dist/components/icon-button.d.ts +11 -0
- package/dist/components/icon-button.js +7 -5
- package/dist/components/icon-button.js.map +1 -1
- package/dist/components/nav-pills.d.ts +8 -1
- package/dist/components/nav-pills.js +61 -38
- package/dist/components/nav-pills.js.map +1 -1
- package/dist/components/page-header-context.d.ts +8 -0
- package/dist/components/page-header-context.js +7 -0
- package/dist/components/page-header-context.js.map +1 -0
- package/dist/components/page-header.d.ts +14 -2
- package/dist/components/page-header.js +10 -1
- package/dist/components/page-header.js.map +1 -1
- package/dist/components/pie-chart.js +2 -1
- package/dist/components/pie-chart.js.map +1 -1
- package/dist/components/progress-bar.js +5 -4
- package/dist/components/progress-bar.js.map +1 -1
- package/dist/components/reauth-dialog.js +1 -1
- package/dist/components/reauth-dialog.js.map +1 -1
- package/dist/components/row-actions-labels.js +3 -1
- package/dist/components/row-actions-labels.js.map +1 -1
- package/dist/components/row-actions.d.ts +43 -9
- package/dist/components/row-actions.js +78 -15
- package/dist/components/row-actions.js.map +1 -1
- package/dist/components/section-nav.d.ts +37 -0
- package/dist/components/section-nav.js +33 -0
- package/dist/components/section-nav.js.map +1 -0
- package/dist/components/series-chart.js +8 -3
- package/dist/components/series-chart.js.map +1 -1
- package/dist/components/share-card.js +1 -1
- package/dist/components/share-card.js.map +1 -1
- package/dist/components/signature-pad.js +1 -1
- package/dist/components/signature-pad.js.map +1 -1
- package/dist/components/sparkline.js +2 -1
- package/dist/components/sparkline.js.map +1 -1
- package/dist/components/stat-tile.js +14 -7
- package/dist/components/stat-tile.js.map +1 -1
- package/dist/components/status-dot.d.ts +5 -1
- package/dist/components/status-dot.js +4 -1
- package/dist/components/status-dot.js.map +1 -1
- package/dist/components/tooltip.js +1 -1
- package/dist/components/tooltip.js.map +1 -1
- package/dist/components/translation-review-editor.js +2 -2
- package/dist/components/translation-review-editor.js.map +1 -1
- package/dist/components/translation-review.js +2 -2
- package/dist/components/translation-review.js.map +1 -1
- package/dist/components/treemap.d.ts +5 -2
- package/dist/components/treemap.js +26 -6
- package/dist/components/treemap.js.map +1 -1
- package/dist/components/use-table-state.js +37 -6
- package/dist/components/use-table-state.js.map +1 -1
- package/dist/data-table.d.ts +1 -0
- package/dist/data-table.js.map +1 -1
- package/dist/demo/demo-banner.js +1 -1
- package/dist/demo/demo-banner.js.map +1 -1
- package/dist/demo/demo-ended.js +1 -1
- package/dist/demo/demo-ended.js.map +1 -1
- package/dist/demo/demo-start.js +1 -1
- package/dist/demo/demo-start.js.map +1 -1
- package/dist/eslint/index.js +1 -1
- package/dist/feedback/feedback-inbox.js +1 -1
- package/dist/feedback/feedback-inbox.js.map +1 -1
- package/dist/hooks/use-anchored-panel.js +2 -1
- package/dist/hooks/use-anchored-panel.js.map +1 -1
- package/dist/hooks/use-dismiss.d.ts +9 -1
- package/dist/hooks/use-dismiss.js +25 -5
- package/dist/hooks/use-dismiss.js.map +1 -1
- package/dist/hooks/use-document-title.d.ts +14 -0
- package/dist/hooks/use-document-title.js +22 -0
- package/dist/hooks/use-document-title.js.map +1 -0
- package/dist/i18n/german.js +6 -2
- package/dist/i18n/german.js.map +1 -1
- package/dist/i18n/kit-labels.d.ts +31 -1
- package/dist/i18n/kit-labels.js +43 -2
- package/dist/i18n/kit-labels.js.map +1 -1
- package/dist/i18n/locales/en.js +6 -2
- package/dist/i18n/locales/en.js.map +2 -2
- package/dist/i18n/locales/es.js +6 -2
- package/dist/i18n/locales/es.js.map +1 -1
- package/dist/i18n/locales/fr.js +6 -2
- package/dist/i18n/locales/fr.js.map +1 -1
- package/dist/i18n/locales/hu.js +6 -2
- package/dist/i18n/locales/hu.js.map +1 -1
- package/dist/i18n/locales/it.js +6 -2
- package/dist/i18n/locales/it.js.map +1 -1
- package/dist/i18n/locales/zh.js +6 -2
- package/dist/i18n/locales/zh.js.map +1 -1
- package/dist/i18n/review.js +2 -0
- package/dist/i18n/review.js.map +1 -1
- package/dist/i18n/shared-labels.js +1 -0
- package/dist/i18n/shared-labels.js.map +1 -1
- package/dist/index.d.ts +8 -1
- package/dist/index.js +11 -0
- package/dist/index.js.map +1 -1
- package/dist/landing/landing-actions.js +2 -2
- package/dist/landing/landing-actions.js.map +1 -1
- package/dist/landing/public-header.js +2 -2
- package/dist/landing/public-header.js.map +1 -1
- package/dist/lib/clipboard-minus.d.ts +27 -0
- package/dist/lib/clipboard-minus.js +63 -0
- package/dist/lib/clipboard-minus.js.map +1 -0
- package/dist/lib/document-title.d.ts +17 -0
- package/dist/lib/document-title.js +29 -0
- package/dist/lib/document-title.js.map +1 -0
- package/dist/lib/float-clearance.js +8 -2
- package/dist/lib/float-clearance.js.map +1 -1
- package/dist/lib/format.d.ts +35 -10
- package/dist/lib/format.js +55 -11
- package/dist/lib/format.js.map +1 -1
- package/dist/lib/minus.d.ts +22 -0
- package/dist/lib/minus.js +14 -0
- package/dist/lib/minus.js.map +1 -0
- package/dist/lib/status-tone.d.ts +30 -0
- package/dist/lib/status-tone.js +17 -0
- package/dist/lib/status-tone.js.map +1 -0
- package/dist/settings/settings-layout.js +3 -2
- package/dist/settings/settings-layout.js.map +1 -1
- package/dist/shell/account-menu-language.d.ts +1 -1
- package/dist/shell/account-menu-language.js +9 -1
- package/dist/shell/account-menu-language.js.map +1 -1
- package/dist/shell/app-shell-labels.js +2 -1
- package/dist/shell/app-shell-labels.js.map +1 -1
- package/dist/shell/app-shell.d.ts +58 -16
- package/dist/shell/app-shell.js +158 -44
- package/dist/shell/app-shell.js.map +1 -1
- package/dist/shell/language-code.d.ts +3 -0
- package/dist/shell/language-code.js +8 -0
- package/dist/shell/language-code.js.map +1 -0
- package/dist/shell/topbar-controls.d.ts +14 -6
- package/dist/shell/topbar-controls.js +14 -17
- package/dist/shell/topbar-controls.js.map +1 -1
- package/dist/testing/css-variables.generated.d.ts +1 -1
- package/dist/testing/css-variables.generated.js +1 -1
- package/dist/testing/css-variables.generated.js.map +1 -1
- package/dist/theme/chart-palette.d.ts +82 -15
- package/dist/theme/chart-palette.js +51 -24
- package/dist/theme/chart-palette.js.map +1 -1
- package/dist/theme/palette-presets.d.ts +9 -0
- package/dist/theme/palette-presets.js +77 -62
- package/dist/theme/palette-presets.js.map +1 -1
- package/dist/tour/tour.js +1 -1
- package/dist/tour/tour.js.map +1 -1
- package/dist/wizard/stepper-nav.d.ts +1 -1
- package/dist/wizard/stepper-nav.js +3 -3
- package/dist/wizard/stepper-nav.js.map +1 -1
- package/package.json +1 -1
- package/src/admin/admin-action-confirm.tsx +1 -1
- package/src/admin/invitations-panel.tsx +7 -3
- package/src/admin/user-roster.tsx +23 -6
- package/src/auth/accept-invitation.tsx +3 -3
- package/src/auth/not-found-page.tsx +1 -1
- package/src/auth/reset-password-form.tsx +3 -3
- package/src/auth/verify-email.tsx +3 -3
- package/src/billing/plan-card.tsx +2 -2
- package/src/components/breadcrumbs.tsx +32 -4
- package/src/components/button-look.ts +86 -15
- package/src/components/button.tsx +6 -3
- package/src/components/calendar-heatmap.tsx +2 -1
- package/src/components/chart-edge.ts +73 -0
- package/src/components/chart.tsx +3 -1
- package/src/components/chip.tsx +10 -1
- package/src/components/confirm-context.ts +7 -0
- package/src/components/confirm-dialog.tsx +3 -3
- package/src/components/danger-confirm.tsx +3 -3
- package/src/components/data-table-fit.ts +58 -8
- package/src/components/data-table-groups.tsx +15 -4
- package/src/components/data-table-head.tsx +25 -2
- package/src/components/data-table-leading-row.tsx +4 -1
- package/src/components/data-table-mobile.tsx +162 -11
- package/src/components/data-table-row-actions.tsx +12 -3
- package/src/components/data-table-row.tsx +485 -0
- package/src/components/data-table-selection.ts +17 -1
- package/src/components/data-table-virtual.ts +547 -0
- package/src/components/data-table.tsx +367 -326
- package/src/components/error-boundary.tsx +2 -2
- package/src/components/floating-panel.tsx +67 -16
- package/src/components/form-actions.tsx +2 -2
- package/src/components/icon-button.tsx +21 -8
- package/src/components/nav-pills.tsx +29 -2
- package/src/components/page-header-context.ts +8 -0
- package/src/components/page-header.tsx +34 -2
- package/src/components/pie-chart.tsx +2 -1
- package/src/components/progress-bar.tsx +6 -3
- package/src/components/reauth-dialog.tsx +1 -1
- package/src/components/row-actions-labels.ts +2 -0
- package/src/components/row-actions.tsx +154 -33
- package/src/components/section-nav.tsx +65 -0
- package/src/components/series-chart.tsx +12 -3
- package/src/components/share-card.tsx +1 -1
- package/src/components/signature-pad.tsx +1 -1
- package/src/components/sparkline.tsx +2 -1
- package/src/components/stat-tile.tsx +19 -7
- package/src/components/status-dot.tsx +7 -1
- package/src/components/tooltip.tsx +3 -1
- package/src/components/translation-review-editor.tsx +2 -2
- package/src/components/translation-review.tsx +2 -2
- package/src/components/treemap.tsx +34 -8
- package/src/components/use-table-state.ts +63 -8
- package/src/data-table.ts +5 -3
- package/src/demo/demo-banner.tsx +1 -1
- package/src/demo/demo-ended.tsx +1 -1
- package/src/demo/demo-start.tsx +1 -1
- package/src/feedback/feedback-inbox.tsx +1 -1
- package/src/hooks/use-anchored-panel.ts +9 -1
- package/src/hooks/use-dismiss.ts +43 -4
- package/src/hooks/use-document-title.ts +31 -0
- package/src/i18n/german.ts +4 -0
- package/src/i18n/kit-labels.tsx +76 -1
- package/src/i18n/locales/es.ts +4 -0
- package/src/i18n/locales/fr.ts +4 -0
- package/src/i18n/locales/hu.ts +4 -0
- package/src/i18n/locales/it.ts +4 -0
- package/src/i18n/locales/zh.ts +4 -0
- package/src/i18n/review.ts +2 -0
- package/src/i18n/shared-labels.ts +1 -0
- package/src/index.ts +13 -0
- package/src/landing/landing-actions.tsx +2 -2
- package/src/landing/public-header.tsx +2 -2
- package/src/lib/clipboard-minus.ts +94 -0
- package/src/lib/document-title.ts +41 -0
- package/src/lib/float-clearance.ts +19 -3
- package/src/lib/format.ts +115 -30
- package/src/lib/minus.ts +40 -0
- package/src/lib/status-tone.ts +43 -0
- package/src/settings/settings-layout.tsx +3 -2
- package/src/shell/account-menu-language.tsx +14 -2
- package/src/shell/app-shell-labels.ts +1 -0
- package/src/shell/app-shell.tsx +298 -69
- package/src/shell/language-code.ts +5 -0
- package/src/shell/topbar-controls.tsx +35 -15
- package/src/testing/css-variables.generated.ts +6 -6
- package/src/theme/chart-palette.ts +102 -20
- package/src/theme/palette-presets.ts +121 -84
- package/src/tour/tour.tsx +1 -1
- package/src/wizard/stepper-nav.tsx +4 -4
- package/tokens.css +28 -18
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/data-table-mobile.tsx"],"sourcesContent":["import { Fragment, useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport type { MouseEvent as ReactMouseEvent, PointerEvent as ReactPointerEvent, ReactNode } from \"react\";\nimport { ArrowDownWideNarrow, ArrowUpNarrowWide, ChevronDown, ChevronRight, Filter } from \"lucide-react\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { IconButton } from \"./icon-button\";\nimport { Select } from \"./select\";\nimport { cn } from \"../lib/cn\";\nimport { dirOf, type Direction } from \"../lib/direction\";\nimport { defaultFilterState, isFilterActive, resolveFilter } from \"./data-table-filters\";\nimport type { ColumnFilter, FilterValue } from \"./data-table-filters\";\nimport type { SortCycle, SortState } from \"./data-table-sort\";\nimport { FilterPopover } from \"./data-table-filter-popover\";\nimport { SwipeableRow, type SwipeAction } from \"./swipeable-row\";\nimport { DialogFrame } from \"./dialog-frame\";\nimport { Checkbox } from \"./checkbox\";\nimport { useLongPress } from \"../hooks/use-long-press\";\nimport type { DataTableLabels } from \"./data-table-labels\";\nimport { RowLink, cleanAttrs, columnLabel, fromOutside, fromOwnControl } from \"./data-table-shared\";\nimport type {\n DataTableCellProps,\n DataTableColumn,\n DataTableProps,\n DataTableSortLabels,\n FilterState,\n MobileSwipeActions,\n} from \"./data-table\";\n\n// DataTable's phone layout: the card a row becomes, the fields inside it, and the sort\n// and filter controls above the card list. Moved out of data-table.tsx whole (refactor\n// audit 2026-10, MOD-3 step 4); the list itself, its pager and its row dialog stay in\n// DataTable, which owns the state they share with the wide-screen table.\n\n/** Only the `data-*` attributes of a cell's props — what a phone card field takes. */\nfunction dataAttrsOf(props: DataTableCellProps | undefined): Record<string, unknown> | undefined {\n if (!props) return undefined;\n const out: Record<string, unknown> = {};\n for (const [k, v] of Object.entries(props)) if (k.startsWith(\"data-\") && k !== \"data-col\") out[k] = v;\n return out;\n}\n\n/** The logical sides onto the physical drag directions {@link SwipeableRow} takes. */\nfunction physicalSwipe(\n actions: MobileSwipeActions,\n dir: Direction,\n): { left?: SwipeAction[]; right?: SwipeAction[] } {\n const rtl = dir === \"rtl\";\n return {\n left: (rtl ? actions.end : actions.start) ?? actions.left,\n right: (rtl ? actions.start : actions.end) ?? actions.right,\n };\n}\n\n// ---------- Phone card at Large (0.32) ----------\n\n/**\n * §4 \"nothing truncates\" in a phone card at Large and Extra large: a cell's own\n * `truncate` (a kit cell, a chip, the app's span) wraps instead — and breaks inside a\n * word too long for the card rather than running out of it. A descendant rule, so it\n * reaches the cells without the table knowing what they render; `large:`, so Normal\n * keeps every ellipsis it had.\n */\nconst CARD_NO_TRUNCATE =\n \"large:[&_.truncate]:whitespace-normal large:[&_.truncate]:[overflow-wrap:anywhere]\";\n\n/**\n * Columns as label-above-value pairs: the phone card's fields at Large (§4), and the\n * opened row's `mobileDetailsInRow` at every size. Each pair is a `<div>` in the\n * `<dl>` — the grouping HTML allows — so a pair keeps together and the gap falls\n * BETWEEN facts rather than between a label and its own value. `relative` holds a\n * header's `sr-only` text (an actions column's), as every kit container must.\n */\nexport function StackedFields<T>({ columns, row, compact }: { columns: DataTableColumn<T>[]; row: T; compact: boolean }) {\n return (\n <dl\n data-card-fields=\"stacked\"\n className={cn(\"relative flex min-w-0 flex-col\", compact ? \"gap-1.5 text-xs\" : \"gap-2.5 text-sm\", CARD_NO_TRUNCATE)}\n >\n {columns.map((col) => (\n <div key={col.key} className=\"min-w-0\">\n <dt className=\"text-xs uppercase tracking-wide text-muted\">{col.header}</dt>\n <dd\n {...dataAttrsOf(col.cellProps?.(row))}\n className=\"mt-0.5 min-w-0 break-words text-secondary\"\n >\n {col.cell(row)}\n </dd>\n </div>\n ))}\n </dl>\n );\n}\n\n// ---------- Phone sort control (keksdose K10) ----------\n\n/**\n * The card list's sort control: a \"Sort by\" select and a direction button.\n *\n * keksdose K10 (inputs audit 2026-10-02 §5; its aggregated report tables, #258): a\n * table is sorted by its header row and the phone card list has none, so the two\n * decisions the header carries — which column, which direction — were unreachable\n * below the breakpoint. keksdose hand-built this row over its DataTable to answer\n * \"who did I pay the most\" on the device it was asked on; this is that row, driven by\n * the SAME sort state as the headers (controlled `sorts` included), so turning the\n * phone sideways keeps the order and a sort chosen here is the one the URL and the\n * storage key hold.\n *\n * The rules are the header's: a newly picked column starts in its `firstSort`, the\n * direction button flips the primary sort (secondary ones stay), and \"Default order\"\n * — the third click of a `\"tri\"` cycle — is offered only under `\"tri\"`, since a\n * `\"toggle\"` table promises it is always ranked by something. The select's label is\n * a real `<label>` beside it, and the button sits outside that label: a click inside\n * a label is forwarded to the control it names, so a nested button would flip AND\n * open the select.\n */\nexport function MobileSort<T>({\n columns,\n sorts,\n sortCycle,\n compact,\n labels,\n onPick,\n onFlip,\n}: {\n columns: DataTableColumn<T>[];\n sorts: SortState[];\n sortCycle: SortCycle;\n compact: boolean;\n labels: DataTableLabels;\n onPick: (key: string | null) => void;\n onFlip: () => void;\n}) {\n const selectId = useId();\n const sortLabels: DataTableSortLabels = labels;\n if (columns.length === 0) return null;\n // A persisted or URL sort can name a column with no `sortBy` (or a hidden one): the\n // sort chain drops it, and so does the control rather than claiming it.\n const primary = sorts[0] && columns.some((c) => c.key === sorts[0].key) ? sorts[0] : null;\n const offerDefault = sortCycle === \"tri\" || primary === null;\n const desc = primary?.dir === \"desc\";\n return (\n <div\n data-table-mobile-sort=\"\"\n className={cn(\n // At Large the direction button shows its words (IconButton's label, §4); the\n // row wraps so the select keeps a usable width on a 240 px card.\n \"flex flex-wrap items-center gap-2 border-b border-subtle\",\n compact ? \"px-3 py-1.5\" : \"px-4 py-2\",\n )}\n >\n <label htmlFor={selectId} className=\"shrink-0 text-xs text-muted\">\n {sortLabels.sortBy}\n </label>\n <Select\n id={selectId}\n size={compact ? \"sm\" : \"md\"}\n className=\"min-w-0 flex-1 large:basis-40\"\n value={primary?.key ?? \"\"}\n onChange={(e) => onPick(e.target.value || null)}\n >\n {offerDefault && <option value=\"\">{sortLabels.sortDefault}</option>}\n {columns.map((col) => (\n <option key={col.key} value={col.key}>\n {columnLabel(col, labels)}\n </option>\n ))}\n </Select>\n <IconButton\n size={compact ? \"xs\" : \"md\"}\n variant=\"secondary\"\n label={desc ? sortLabels.sortDescending : sortLabels.sortAscending}\n disabled={primary === null}\n onClick={onFlip}\n >\n {desc ? <ArrowDownWideNarrow /> : <ArrowUpNarrowWide />}\n </IconButton>\n </div>\n );\n}\n\n// ---------- Phone card ----------\n\n/** One phone card: what DataTable's card list draws for a row. */\nexport interface MobileRowProps<T> {\n row: T;\n isExpanded: DataTableProps<T>[\"isExpanded\"];\n /** What the row shows when opened — DataTable's `openedRowContent`. */\n openedRowContent: (row: T) => ReactNode;\n /** Whether an opened row has anything to show at all. */\n opensRow: boolean;\n rowClassName: DataTableProps<T>[\"rowClassName\"];\n rowAttributes: DataTableProps<T>[\"rowAttributes\"];\n onRowClick: DataTableProps<T>[\"onRowClick\"];\n rowHref: DataTableProps<T>[\"rowHref\"];\n /** `mobileSwipeActions`, or the swipes derived from `rowActions`. */\n swipeActionsFor: ((row: T) => MobileSwipeActions | null) | undefined;\n /** The card list's reading direction, for which physical drag a swipe side means. */\n mobileDir: Direction;\n /** No column the card renders owns a link, so the card itself may be one. */\n mobileCardLinkable: boolean;\n mobileCard: DataTableProps<T>[\"mobileCard\"];\n mobilePrimaryCol: DataTableColumn<T> | null;\n mobileSecondaryColumns: DataTableColumn<T>[];\n mobileExpandAsDialog: boolean;\n compact: boolean;\n /** The text size is Large or Extra large (§4). */\n large: boolean;\n /** Phone selection (0.40, keksdose live #421); null without DataTable's `selection`. */\n select: MobileRowSelect | null;\n}\n\n/** A phone card's part in DataTable's `selection` (0.40, keksdose live #421). */\nexport interface MobileRowSelect {\n /** The card list is in selection mode: the card shows its box and a tap toggles it. */\n active: boolean;\n /** `selection.isSelectable` for this row. */\n selectable: boolean;\n selected: boolean;\n onToggle: (checked: boolean) => void;\n /** A long press outside the mode: enter it with this row selected. */\n onLongPress: () => void;\n}\n\n/** One mobile card. Shared by the flat list and the grouped list, so both draw\n * identical row markup. */\nexport function MobileRow<T>({\n row,\n isExpanded,\n openedRowContent,\n opensRow,\n rowClassName,\n rowAttributes,\n onRowClick,\n rowHref,\n swipeActionsFor,\n mobileDir,\n mobileCardLinkable,\n mobileCard,\n mobilePrimaryCol,\n mobileSecondaryColumns,\n mobileExpandAsDialog,\n compact,\n large,\n select,\n}: MobileRowProps<T>) {\n const expanded = isExpanded?.(row) ?? false;\n // Selection mode (#421): the whole card is the row's checkbox — a tap toggles it\n // instead of opening the row, and the swipe and the long press stand down, so no\n // gesture means two things at once (keksdose's register list, its feedback #153).\n const selecting = !!select?.active;\n // Not on an open card, as in kk's register: its editor and a selection are two modes\n // fighting over the same row.\n const pressable = !!select && select.selectable && !selecting && !expanded;\n const longPress = useLongPress(() => select?.onLongPress(), { enabled: pressable });\n const expansion = expanded ? openedRowContent(row) : null;\n const tint = rowClassName?.(row);\n // Use div+role=\"button\" rather than a real <button> so cells that\n // contain their own interactive controls (status toggles, action\n // icons) don't end up as illegal nested buttons.\n const interactive = !!onRowClick;\n // Say that the card OPENS something (Keksdose feedback #163). A phone card had\n // only a cursor and a tap-tint to advertise its editor — on the invoice review\n // screen, whose entire purpose is correcting mis-read lines, that read as \"these\n // values are not editable\". A chevron is the affordance every list on a phone\n // uses for exactly this, and it points the way the row actually opens: right into\n // a sheet, or down into an inline panel that flips it when expanded.\n const opensDetail = interactive && opensRow;\n const swipeActions = swipeActionsFor?.(row);\n const swipe = swipeActions ? physicalSwipe(swipeActions, mobileDir) : null;\n // An OPEN card swipes too (0.40, keksdose live #416, Marcel: \"faster than scrolling\n // down to the buttons\"). Only the card's header — the summary line — is inside\n // SwipeableRow; the opened body below is a sibling, so its fields, sliders and\n // scrolling never meet the gesture. Until 0.40 an open card silently lost it.\n // In selection mode a sideways drag would be a second meaning for a selecting touch.\n const swipeEnabled = !!swipe && !selecting;\n const href = mobileCardLinkable ? rowHref?.(row) : undefined;\n const cardClass = cn(\n \"w-full text-start flex items-center\",\n // §4: more room per row at Large — a taller row is a bigger tap target too.\n compact ? \"px-3 py-2 gap-2 text-sm large:py-3\" : \"px-4 py-3 gap-3 large:py-4\",\n // Live #320's other half: the card acknowledges the touch before the sheet\n // arrives. On a cold route the data can take a beat, and an unacknowledged tap\n // reads as \"did that register?\" — which is most of what \"abrupt\" means here.\n // `origin-center` + a 0.5% squeeze is deliberately almost subliminal: this fires\n // on every row of a long list, so anything larger becomes the list's personality\n // rather than feedback. `transition-transform` alone, so the existing background\n // flip stays instant.\n interactive &&\n \"cursor-pointer transition-transform duration-100 active:scale-[0.995] active:bg-active motion-reduce:transition-none motion-reduce:active:scale-100\",\n // The keyboard's frame drawn INSIDE the card, as the desktop row's is (keksdose live\n // #394): the browser's own ring and tap highlight sit on the card's outer edge, and\n // three ancestors clip it — SwipeableRow's `overflow-hidden`, the card list, and\n // AppShell main's `overflow-x-clip` — so the frame went missing on one side. A press\n // keeps the fill and the squeeze above; an outline on every tap of a long list would\n // be louder than the acknowledgement it replaces.\n (interactive || selecting) && cn(\"[-webkit-tap-highlight-color:transparent] focus-visible:ring-inset\", FOCUS_RING),\n selecting && \"cursor-pointer\",\n select?.selected && selecting && \"bg-brand-soft\",\n // A 500 ms hold would otherwise start a text selection, and iOS's link callout —\n // which only yields to this CSS. The trade kk made on its register: the card's text\n // is not selectable on a phone where the table offers selection.\n select && \"select-none [-webkit-touch-callout:none]\",\n );\n // The card's content is written once and worn by either tag below. Note that\n // the primary cell is rendered RAW here, never through `linkColumn` — the card\n // itself is the anchor, and routing it through `linkColumn` too would nest an\n // <a> inside an <a>. Desktop and mobile are mutually exclusive (`isMdUp`), so\n // exactly one anchor exists per row.\n const cardInner = (\n <>\n {/* The card's own content keeps the column it always had; the chevron sits\n beside it rather than inside, so a caller's `mobileCard` is untouched. */}\n <div\n className={cn(\n \"flex min-w-0 flex-1 flex-col\",\n compact ? \"gap-1 large:gap-2\" : \"gap-2 large:gap-3\",\n // §4 \"nothing truncates\": at Large a cell's own `truncate` wraps instead —\n // the reader who chose bigger type is the one an ellipsis fails. A caller's\n // `mobileCard` is its own layout and keeps what it chose.\n !mobileCard && CARD_NO_TRUNCATE,\n )}\n >\n {mobileCard ? (\n mobileCard(row)\n ) : (\n <>\n {/* Only the `data-*` half of `cellProps` — see its note. */}\n {mobilePrimaryCol && (\n <div {...dataAttrsOf(mobilePrimaryCol.cellProps?.(row))} className=\"min-w-0 break-words font-medium\">\n {mobilePrimaryCol.cell(row)}\n </div>\n )}\n {mobileSecondaryColumns.length > 0 && large ? (\n // §4: each label ABOVE its value at Large. Side by side, a label column\n // sized to the widest label leaves a value a sliver of a 240 px card.\n <StackedFields columns={mobileSecondaryColumns} row={row} compact={compact} />\n ) : mobileSecondaryColumns.length > 0 && (\n <dl\n className={cn(\n \"grid grid-cols-[auto_1fr] gap-x-3\",\n compact ? \"gap-y-0.5 text-xs\" : \"gap-y-1 text-sm\",\n )}\n >\n {mobileSecondaryColumns.map((col) => (\n <Fragment key={col.key}>\n <dt className=\"text-xs uppercase tracking-wide text-muted self-center\">\n {col.header}\n </dt>\n <dd\n {...dataAttrsOf(col.cellProps?.(row))}\n className=\"min-w-0 text-secondary self-center\"\n >\n {col.cell(row)}\n </dd>\n </Fragment>\n ))}\n </dl>\n )}\n </>\n )}\n </div>\n {opensDetail && !selecting &&\n // `aria-hidden`: the row already announces itself as a button with\n // `aria-expanded`, so the icon would only add a second, wordless stop.\n (mobileExpandAsDialog ? (\n // Points INTO the sheet, which is the reading-forward direction.\n <ChevronRight\n aria-hidden\n className=\"size-4 shrink-0 text-placeholder rtl:-scale-x-100\"\n />\n ) : (\n <ChevronDown\n aria-hidden\n className={cn(\n \"size-4 shrink-0 text-placeholder transition-transform\",\n expanded && \"rotate-180\",\n )}\n />\n ))}\n </>\n );\n // The long press rides the card itself; the click it leaves behind is swallowed on\n // the `<li>` below, in the capture phase, before the card (or RowLink) sees it.\n // Attached whenever the table selects, the hook's `enabled` deciding whether a press\n // arms: its pointerdown also clears a stale swallow latch, which must happen in the\n // mode too, or a long press whose click never came would eat the first toggle.\n //\n // A press that starts on a control in a cell (or in a portal one opened) is that\n // control's, not a way into the mode (keksdose live #428): it only clears the latch.\n const press = select\n ? {\n ...longPress.handlers,\n onPointerDown: (e: ReactPointerEvent<HTMLElement>) => {\n if (fromOutside(e.target, e.currentTarget) || fromOwnControl(e.target, e.currentTarget)) {\n longPress.consumeClick();\n return;\n }\n longPress.handlers.onPointerDown(e);\n },\n onContextMenu: (e: ReactMouseEvent<HTMLElement>) => {\n if (fromOutside(e.target, e.currentTarget) || fromOwnControl(e.target, e.currentTarget)) return;\n longPress.handlers.onContextMenu(e);\n },\n }\n : undefined;\n const body = selecting ? (\n // In the mode a card is a toggle — kk's register row: `role=\"button\"` with\n // `aria-pressed`, the box beside it only a picture of that state (the card is the\n // one control, so the two can never fight or fire twice).\n /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- role=\"button\",\n tabIndex 0 and Enter/Space are all here; the rule cannot follow the conditional role. */\n <div\n role={select!.selectable ? \"button\" : undefined}\n tabIndex={select!.selectable ? 0 : undefined}\n aria-pressed={select!.selectable ? select!.selected : undefined}\n aria-disabled={select!.selectable ? undefined : true}\n data-card-selecting=\"\"\n {...press}\n onClick={(e) => {\n if (!select!.selectable || fromOutside(e.target, e.currentTarget)) return;\n // A tap on a control in a cell is that control's (keksdose live #428).\n if (fromOwnControl(e.target, e.currentTarget)) return;\n select!.onToggle(!select!.selected);\n }}\n onKeyDown={(e) => {\n if (!select!.selectable || e.target !== e.currentTarget) return;\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n select!.onToggle(!select!.selected);\n }\n }}\n className={cardClass}\n >\n <Checkbox\n readOnly\n tabIndex={-1}\n aria-hidden\n checked={select!.selected}\n disabled={!select!.selectable}\n className=\"pointer-events-none shrink-0 self-center\"\n inputClassName=\"pointer-events-none\"\n />\n {cardInner}\n </div>\n ) : interactive && href ? (\n // A card with a URL of its own is a LINK, not a div wearing role=\"button\"\n // (feedback #451): the phone's long-press \"open in new tab\" and a screen\n // reader's link semantics both come free, and the fake role goes away.\n <RowLink\n href={href}\n {...press}\n onActivate={() => onRowClick!(row)}\n aria-expanded={opensRow ? expanded : undefined}\n className={cardClass}\n // Enter already activates a link natively, and that routes through\n // RowLink's own onClick — handling it here too would open the row twice.\n // Space is the only key left, and only so it opens the row instead of\n // scrolling the list.\n onKeyDown={(e) => {\n if (e.key !== \" \") return;\n e.preventDefault();\n onRowClick!(row);\n }}\n >\n {cardInner}\n </RowLink>\n ) : (\n /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- the handlers are\n only attached when `interactive`, and then so are role=\"button\", tabIndex 0 and the\n Enter/Space handler below; the rule cannot follow the conditional role. */\n <div\n {...press}\n role={interactive ? \"button\" : undefined}\n tabIndex={interactive ? 0 : undefined}\n onClick={\n interactive\n ? (e) => {\n if (fromOutside(e.target, e.currentTarget)) return;\n // A tap on a control in a cell (a select, a button) is that\n // control's, as on the desktop `<tr>` (keksdose live #428).\n if (fromOwnControl(e.target, e.currentTarget)) return;\n onRowClick!(row);\n }\n : undefined\n }\n onKeyDown={\n interactive\n ? (e) => {\n // A key press inside a nested control is that control's.\n if (e.target !== e.currentTarget) return;\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n onRowClick!(row);\n }\n }\n : undefined\n }\n aria-expanded={opensRow ? expanded : undefined}\n className={cardClass}\n >\n {cardInner}\n </div>\n );\n return (\n <li\n className={cn(tint)}\n {...cleanAttrs(rowAttributes?.(row))}\n data-selected={selecting && select!.selected ? \"\" : undefined}\n onClickCapture={\n select\n ? (e) => {\n if (!longPress.consumeClick()) return;\n e.preventDefault();\n e.stopPropagation();\n }\n : undefined\n }\n >\n {swipeEnabled ? (\n <SwipeableRow enabled left={swipe!.left} right={swipe!.right}>\n {body}\n </SwipeableRow>\n ) : (\n body\n )}\n {expansion && !mobileExpandAsDialog && (\n <div\n className={cn(\n \"bg-surface-2 border-t border-subtle\",\n compact ? \"px-3 py-2\" : \"px-4 py-3\",\n )}\n >\n {expansion}\n </div>\n )}\n </li>\n );\n}\n\n// ---------- Phone selection bar (0.40, keksdose live #421) ----------\n\n/**\n * The card list's way into and out of selection mode for a keyboard and a screen\n * reader — the long press is a touch gesture, and a gesture alone is no path at all.\n *\n * Outside the mode it is one button, \"Select rows\", visually hidden until it takes\n * focus (SwipeableRow's keyboard buttons, the same rule): the card list keeps the look\n * kk's register has, where the long press is the way in, and Tab or a screen reader's\n * cursor still finds it. In the mode it is a visible row: \"Select all rows\" — the\n * desktop header's box — and Cancel, which clears the selection and leaves, as the\n * bulk bar's Clear does. The owner's bulk bar is the owner's, as on desktop: it\n * appears because the selection is no longer empty.\n */\nexport function MobileSelectBar({\n active,\n allSelected,\n someSelected,\n compact,\n labels,\n onEnter,\n onToggleAll,\n onCancel,\n}: {\n active: boolean;\n allSelected: boolean;\n someSelected: boolean;\n compact: boolean;\n labels: DataTableLabels;\n onEnter: () => void;\n onToggleAll: (checked: boolean) => void;\n onCancel: () => void;\n}) {\n // The control that was pressed unmounts with the mode it switched, so focus is\n // handed across: into the bar's box on the way in, back to the button on the way out.\n const handOff = useRef(false);\n const allBox = useRef<HTMLInputElement>(null);\n const enterButton = useRef<HTMLButtonElement>(null);\n useEffect(() => {\n if (!handOff.current) return;\n handOff.current = false;\n (active ? allBox.current : enterButton.current)?.focus();\n }, [active]);\n if (!active)\n return (\n <button\n ref={enterButton}\n type=\"button\"\n data-table-mobile-select=\"\"\n onClick={() => {\n handOff.current = true;\n onEnter();\n }}\n className={cn(\n \"sr-only rounded-md text-sm font-medium text-secondary\",\n // Padding only once shown: unconditional, it beats sr-only's `padding: 0`\n // (SwipeableRow's 0.32.1 note).\n \"focus:not-sr-only focus:m-2 focus:inline-flex focus:px-2 focus:py-1\",\n FOCUS_RING,\n )}\n >\n {labels.selectRows}\n </button>\n );\n return (\n <div\n data-table-mobile-select=\"\"\n className={cn(\n \"flex flex-wrap items-center justify-between gap-2 border-b border-subtle\",\n compact ? \"px-3 py-1.5\" : \"px-4 py-2\",\n )}\n >\n <Checkbox\n ref={allBox}\n label={labels.selectAllRows}\n checked={allSelected}\n indeterminate={someSelected && !allSelected}\n onChange={(e) => onToggleAll(e.target.checked)}\n />\n <button\n type=\"button\"\n onClick={() => {\n handOff.current = true;\n onCancel();\n }}\n className={cn(\"rounded-md px-2 py-1 text-sm text-muted hover:text-secondary\", FOCUS_RING)}\n >\n {labels.cancelSelection}\n </button>\n </div>\n );\n}\n\n// ---------- Mobile filter sheet ----------\n\n/**\n * Filter access for the mobile card list (feedback #299). The desktop table\n * houses per-column filters in its header; the card list has no header, so the\n * same filters were unreachable on phones. This renders a compact \"Filters\" bar\n * that opens a bottom sheet listing each filterable column as a collapsible\n * section, reusing the very same {@link FilterPopover} and filter state the\n * desktop table drives — so it filters identically and stays URL-synced.\n *\n * The sheet is a {@link DialogFrame} (round 0.34 BUG-7b = DUP-6). It was the last\n * hand-rolled modal in the kit: `role=\"dialog\" aria-modal=\"true\"` on the backdrop, with\n * copies of the scroll lock, the backdrop close and the Back entry — and no name, no\n * focus moved in, no trap and no Escape, so a reader was told the page was hidden while\n * focus stayed on it. On a phone `Modal` is a bottom sheet already; it now brings all\n * of that, and the exit motion, from the one place every other dialog gets it.\n */\nexport function MobileFilters<T>({\n columns,\n filters,\n selectOptionsByKey,\n isServer,\n hasFilterCallback,\n onSetFilter,\n onClearFilter,\n onClearAll,\n labels,\n locale,\n}: {\n columns: DataTableColumn<T>[];\n filters: FilterState;\n selectOptionsByKey: Record<string, { value: string; label: string }[]>;\n isServer: boolean;\n hasFilterCallback: boolean;\n onSetFilter: (key: string, value: FilterValue) => void;\n onClearFilter: (key: string) => void;\n onClearAll: () => void;\n labels: DataTableLabels;\n locale?: string;\n}) {\n const [open, setOpen] = useState(false);\n // The sheet is portalled to <body>, out from under whatever `dir` the table sits\n // in, so it carries the trigger's direction with it — read at the moment of opening,\n // from the element the user actually pressed.\n const [dir, setDir] = useState<Direction>(\"ltr\");\n const [expanded, setExpanded] = useState<string | null>(null);\n\n const filterable = useMemo(\n () =>\n columns\n .map((col) => ({ col, filter: !isServer || hasFilterCallback ? resolveFilter(col) : null }))\n .filter((x): x is { col: DataTableColumn<T>; filter: ColumnFilter<T> } => !!x.filter),\n [columns, isServer, hasFilterCallback],\n );\n\n if (filterable.length === 0) return null;\n\n const activeCount = filterable.filter(({ col }) => {\n const s = filters[col.key];\n return s && isFilterActive(s);\n }).length;\n\n return (\n <div className=\"flex items-center justify-between gap-2 border-b border-subtle px-4 py-2\">\n <button\n type=\"button\"\n onClick={(e) => {\n setDir(dirOf(e.currentTarget));\n setOpen(true);\n }}\n className=\"inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium text-secondary hover:bg-hover\"\n >\n <Filter className=\"size-4\" />\n <span>{labels.filters}</span>\n {activeCount > 0 && (\n <span className=\"inline-flex min-w-4 items-center justify-center rounded-full bg-info-soft px-1 text-caption font-semibold text-info\">\n {activeCount}\n </span>\n )}\n </button>\n {activeCount > 0 && (\n <button\n type=\"button\"\n onClick={onClearAll}\n className=\"text-xs text-muted hover:text-secondary\"\n >\n {labels.clearAll}\n </button>\n )}\n {/* Escape, the backdrop, Back (Keksdose feedback #172: the filters are already\n in the URL, so closing never loses anything), the scroll lock, focus in and\n back to this bar's button — all `Modal`'s. `fullBleed` lets the sheet meet the\n screen's edges on a phone, as it always did. */}\n <DialogFrame\n open={open}\n onClose={() => setOpen(false)}\n title={labels.filters}\n closeButton\n closeLabel={labels.close}\n headerDivider\n fullBleed\n // Portalled to <body>, so the direction read from the button goes with it.\n dir={dir}\n className=\"max-h-[85vh] rounded-b-none md:rounded-b-lg\"\n // The sections run edge to edge with a rule between them, as before.\n bodyClassName=\"space-y-0 divide-y divide-subtle px-0 pt-0 pb-0\"\n actions={(close) => (\n <>\n <button\n type=\"button\"\n onClick={onClearAll}\n disabled={activeCount === 0}\n // `me-auto` keeps Clear all at the start and Done at the end.\n className=\"me-auto text-sm text-muted hover:text-secondary disabled:opacity-40\"\n >\n {labels.clearAll}\n </button>\n <button\n type=\"button\"\n onClick={close}\n className=\"rounded-md bg-inverse px-4 py-2 text-sm font-medium text-inverse\"\n >\n {labels.done}\n </button>\n </>\n )}\n >\n {filterable.map(({ col, filter }) => {\n const state = filters[col.key];\n const active = !!state && isFilterActive(state);\n const isItemOpen = expanded === col.key;\n return (\n <div key={col.key}>\n <button\n type=\"button\"\n onClick={() => setExpanded(isItemOpen ? null : col.key)}\n aria-expanded={isItemOpen}\n className=\"flex w-full items-center justify-between gap-2 px-4 py-3 text-start\"\n >\n <span className=\"flex items-center gap-2 text-sm font-medium text-secondary\">\n {col.header}\n {active && <span className=\"size-1.5 rounded-full bg-brand\" />}\n </span>\n <ChevronDown\n className={cn(\n \"size-4 shrink-0 text-placeholder transition-transform\",\n isItemOpen && \"rotate-180\",\n )}\n />\n </button>\n {isItemOpen && (\n <div className=\"px-4 pb-3\">\n <FilterPopover\n column={col}\n state={state ?? defaultFilterState(filter)}\n onChange={(next) => onSetFilter(col.key, next)}\n onClear={() => onClearFilter(col.key)}\n selectOptions={selectOptionsByKey[col.key] ?? []}\n labels={labels}\n locale={locale}\n />\n </div>\n )}\n </div>\n );\n })}\n </DialogFrame>\n </div>\n );\n}\n"],"mappings":"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","names":["Fragment"]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/data-table-mobile.tsx"],"sourcesContent":["import { Fragment, isValidElement, useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport type { MouseEvent as ReactMouseEvent, PointerEvent as ReactPointerEvent, ReactNode } from \"react\";\nimport { ArrowDownWideNarrow, ArrowUpNarrowWide, ChevronDown, ChevronRight, Filter } from \"lucide-react\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { IconButton } from \"./icon-button\";\nimport { Select } from \"./select\";\nimport { cn } from \"../lib/cn\";\nimport { dirOf, type Direction } from \"../lib/direction\";\nimport { defaultFilterState, isFilterActive, resolveFilter } from \"./data-table-filters\";\nimport type { ColumnFilter, FilterValue } from \"./data-table-filters\";\nimport type { SortCycle, SortState } from \"./data-table-sort\";\nimport { FilterPopover } from \"./data-table-filter-popover\";\nimport { SwipeableRow, type SwipeAction } from \"./swipeable-row\";\nimport { DialogFrame } from \"./dialog-frame\";\nimport { Checkbox } from \"./checkbox\";\nimport { Chip } from \"./chip\";\nimport { BooleanMark } from \"./data-table-cells\";\nimport { EMPTY_FORMATTED_VALUE } from \"../lib/format\";\nimport { useLongPress } from \"../hooks/use-long-press\";\nimport type { DataTableLabels } from \"./data-table-labels\";\nimport { RowLink, cleanAttrs, columnLabel, fromOutside, fromOwnControl } from \"./data-table-shared\";\nimport type {\n DataTableCellProps,\n DataTableColumn,\n DataTableProps,\n DataTableSortLabels,\n FilterState,\n MobileSwipeActions,\n} from \"./data-table\";\n\n// DataTable's phone layout: the card a row becomes, the fields inside it, and the sort\n// and filter controls above the card list. Moved out of data-table.tsx whole (refactor\n// audit 2026-10, MOD-3 step 4); the list itself, its pager and its row dialog stay in\n// DataTable, which owns the state they share with the wide-screen table.\n\n/** Only the `data-*` attributes of a cell's props — what a phone card field takes. */\nfunction dataAttrsOf(props: DataTableCellProps | undefined): Record<string, unknown> | undefined {\n if (!props) return undefined;\n const out: Record<string, unknown> = {};\n for (const [k, v] of Object.entries(props)) if (k.startsWith(\"data-\") && k !== \"data-col\") out[k] = v;\n return out;\n}\n\n/** The logical sides onto the physical drag directions {@link SwipeableRow} takes. */\nfunction physicalSwipe(\n actions: MobileSwipeActions,\n dir: Direction,\n): { left?: SwipeAction[]; right?: SwipeAction[] } {\n const rtl = dir === \"rtl\";\n return {\n left: (rtl ? actions.end : actions.start) ?? actions.left,\n right: (rtl ? actions.start : actions.end) ?? actions.right,\n };\n}\n\n// ---------- Phone card at Large (0.32) ----------\n\n/**\n * §4 \"nothing truncates\" in a phone card at Large and Extra large: a cell's own\n * `truncate` (a kit cell, a chip, the app's span) wraps instead — and breaks inside a\n * word too long for the card rather than running out of it. A descendant rule, so it\n * reaches the cells without the table knowing what they render; `large:`, so Normal\n * keeps every ellipsis it had.\n */\nconst CARD_NO_TRUNCATE =\n \"large:[&_.truncate]:whitespace-normal large:[&_.truncate]:[overflow-wrap:anywhere]\";\n\n/**\n * Columns as label-above-value pairs: the phone card's fields at Large (§4), and the\n * opened row's `mobileDetailsInRow` at every size. Each pair is a `<div>` in the\n * `<dl>` — the grouping HTML allows — so a pair keeps together and the gap falls\n * BETWEEN facts rather than between a label and its own value. `relative` holds a\n * header's `sr-only` text (an actions column's), as every kit container must.\n */\nexport function StackedFields<T>({ columns, row, compact }: { columns: DataTableColumn<T>[]; row: T; compact: boolean }) {\n const fields = filledFields(columns, row);\n if (fields.length === 0) return null;\n return (\n <dl\n data-card-fields=\"stacked\"\n className={cn(\"relative flex min-w-0 flex-col\", compact ? \"gap-1.5 text-xs\" : \"gap-2.5 text-sm\", CARD_NO_TRUNCATE)}\n >\n {fields.map(({ col, value }) => (\n <div key={col.key} className=\"min-w-0\">\n <dt className=\"text-xs uppercase tracking-wide text-muted\">{col.header}</dt>\n <dd\n {...dataAttrsOf(col.cellProps?.(row))}\n className=\"mt-0.5 min-w-0 break-words text-secondary\"\n >\n {value}\n </dd>\n </div>\n ))}\n </dl>\n );\n}\n\n/** The most fields the default phone card shows under its title (0.49 KIT-7). */\nexport const MOBILE_CARD_FIELDS = 3;\n\n/**\n * The default phone card's columns (0.49 KIT-7), out of the phone's columns (visible,\n * not `mobileHidden`): the title — `mobile: \"primary\"` or `mobilePrimary`, else the\n * first that is not a status — the `role: \"status\"` columns for beside it, at most\n * {@link MOBILE_CARD_FIELDS} fields: those marked `mobile: \"secondary\"` when any is,\n * else the first after the title, and the `role: \"actions\"` columns, drawn after the\n * fields. An actions column is never the title and never one of the fields, so the\n * fields and the marks leave it on the card; only `mobileHidden` / `mobile: \"hidden\"`\n * (which keep it out of `columns`) remove it.\n */\nexport function mobileCardColumns<T>(columns: DataTableColumn<T>[]): {\n primary: DataTableColumn<T> | null;\n status: DataTableColumn<T>[];\n fields: DataTableColumn<T>[];\n actions: DataTableColumn<T>[];\n} {\n const titles = columns.filter((c) => c.role !== \"actions\");\n const primary =\n titles.find((c) => c.mobile === \"primary\") ??\n titles.find((c) => c.mobilePrimary) ??\n titles.find((c) => c.role !== \"status\") ??\n titles[0] ??\n null;\n const status = columns.filter((c) => c !== primary && c.role === \"status\");\n const actions = columns.filter((c) => c.role === \"actions\");\n const rest = titles.filter((c) => c !== primary && c.role !== \"status\");\n const marked = rest.filter((c) => c.mobile === \"secondary\");\n return { primary, status, fields: (marked.length > 0 ? marked : rest).slice(0, MOBILE_CARD_FIELDS), actions };\n}\n\n/** A column whose cell keeps its own clicks — `noRowLink`, or `role: \"actions\"`: no row\n * link may wrap it, and a card that draws it is not a link itself. */\nexport function keepsOwnClicks<T>(col: DataTableColumn<T>): boolean {\n return !!col.noRowLink || col.role === \"actions\";\n}\n\n/** The kit's dev switch, as `lib/logger.ts` reads it: a development build, never a\n * production one, never under vitest. Read per call so a test can switch it on. */\nfunction devWarnings(): boolean {\n return Boolean(import.meta.env?.DEV) && !import.meta.env?.VITEST;\n}\n\n/**\n * A development build's note on the default phone card (0.49 KIT-7): a `noRowLink`\n * column past its three fields. Such a column holds the cell's own controls — a per-row\n * delete, a link — and the card leaves it out with them, so on a phone the action is\n * gone. Never for a `role: \"actions\"` column, which the card draws after its fields.\n * Read off the declared `columns` (not the ones a person or the width hid), and only\n * while the table lets the card choose: `enabled` is false with a `mobileCard` or\n * `mobileDetailsInRow` (the column is then in the opened row), and a column marked\n * `mobile: \"secondary\"` means the app chose. Once per table and column key; `name`\n * (the table's `storageKey` or `urlSync` prefix) says which table, else its title\n * column does.\n */\nexport function useCardColumnWarnings<T>(columns: DataTableColumn<T>[], enabled: boolean, name?: string): void {\n const warned = useRef<Set<string> | null>(null);\n useEffect(() => {\n if (!enabled || !devWarnings()) return;\n const phone = columns.filter((c) => !c.mobileHidden && c.mobile !== \"hidden\");\n if (phone.some((c) => c.mobile === \"secondary\")) return;\n const { primary, status, fields, actions } = mobileCardColumns(phone);\n const onCard = new Set<DataTableColumn<T> | null>([primary, ...status, ...fields, ...actions]);\n const table = name ? ` \"${name}\"` : primary ? ` (title column \"${primary.key}\")` : \"\";\n warned.current ??= new Set();\n for (const col of phone) {\n if (onCard.has(col) || !col.noRowLink || warned.current.has(col.key)) continue;\n warned.current.add(col.key);\n console.warn(\n `[ui-kit] DataTable${table}: column \"${col.key}\" (noRowLink) is past the phone card's three fields and ` +\n 'leaves the card — give it role: \"actions\" (drawn after the fields), or move its action to rowActions.',\n );\n }\n }, [columns, enabled, name]);\n}\n\n/**\n * Whether a rendered cell shows nothing worth a line (0.49 KIT-7): `null`, `undefined`,\n * a boolean (React draws neither), `\"\"` or blank text, and the formatters' empty value\n * \"—\" ({@link EMPTY_FORMATTED_VALUE}), and `booleanColumn`'s mark for an unset value.\n * Any other element is never empty here — its output is the component's — so a column\n * whose empty value should drop off the card returns `null` (or \"—\") from `cell` for it.\n */\nexport function isEmptyCell(value: ReactNode): boolean {\n if (value === null || value === undefined || typeof value === \"boolean\") return true;\n if (isValidElement<{ value?: unknown }>(value) && value.type === BooleanMark) return value.props.value == null;\n if (typeof value === \"string\") {\n const text = value.trim();\n return text === \"\" || text === EMPTY_FORMATTED_VALUE;\n }\n return false;\n}\n\n/** Each column's rendered cell, without the empty ones. */\nfunction filledFields<T>(columns: DataTableColumn<T>[], row: T): { col: DataTableColumn<T>; value: ReactNode }[] {\n return columns.map((col) => ({ col, value: col.cell(row) })).filter(({ value }) => !isEmptyCell(value));\n}\n\n/** A status column's value beside the card's title: text in a neutral chip, an element\n * (the app's own Chip or StatusDot) as it is. */\nfunction StatusChip({ value }: { value: ReactNode }) {\n return typeof value === \"string\" || typeof value === \"number\" ? <Chip size=\"sm\">{value}</Chip> : <>{value}</>;\n}\n\n// ---------- Phone sort control (keksdose K10) ----------\n\n/**\n * The card list's sort control: a \"Sort by\" select and a direction button.\n *\n * keksdose K10 (inputs audit 2026-10-02 §5; its aggregated report tables, #258): a\n * table is sorted by its header row and the phone card list has none, so the two\n * decisions the header carries — which column, which direction — were unreachable\n * below the breakpoint. keksdose hand-built this row over its DataTable to answer\n * \"who did I pay the most\" on the device it was asked on; this is that row, driven by\n * the SAME sort state as the headers (controlled `sorts` included), so turning the\n * phone sideways keeps the order and a sort chosen here is the one the URL and the\n * storage key hold.\n *\n * The rules are the header's: a newly picked column starts in its `firstSort`, the\n * direction button flips the primary sort (secondary ones stay), and \"Default order\"\n * — the third click of a `\"tri\"` cycle — is offered only under `\"tri\"`, since a\n * `\"toggle\"` table promises it is always ranked by something. The select's label is\n * a real `<label>` beside it, and the button sits outside that label: a click inside\n * a label is forwarded to the control it names, so a nested button would flip AND\n * open the select.\n */\nexport function MobileSort<T>({\n columns,\n sorts,\n sortCycle,\n compact,\n labels,\n onPick,\n onFlip,\n}: {\n columns: DataTableColumn<T>[];\n sorts: SortState[];\n sortCycle: SortCycle;\n compact: boolean;\n labels: DataTableLabels;\n onPick: (key: string | null) => void;\n onFlip: () => void;\n}) {\n const selectId = useId();\n const sortLabels: DataTableSortLabels = labels;\n if (columns.length === 0) return null;\n // A persisted or URL sort can name a column with no `sortBy` (or a hidden one): the\n // sort chain drops it, and so does the control rather than claiming it.\n const primary = sorts[0] && columns.some((c) => c.key === sorts[0].key) ? sorts[0] : null;\n const offerDefault = sortCycle === \"tri\" || primary === null;\n const desc = primary?.dir === \"desc\";\n return (\n <div\n data-table-mobile-sort=\"\"\n className={cn(\n // At Large the direction button shows its words (IconButton's label, §4); the\n // row wraps so the select keeps a usable width on a 240 px card.\n \"flex flex-wrap items-center gap-2 border-b border-subtle\",\n compact ? \"px-3 py-1.5\" : \"px-4 py-2\",\n )}\n >\n <label htmlFor={selectId} className=\"shrink-0 text-xs text-muted\">\n {sortLabels.sortBy}\n </label>\n <Select\n id={selectId}\n size={compact ? \"sm\" : \"md\"}\n className=\"min-w-0 flex-1 large:basis-40\"\n value={primary?.key ?? \"\"}\n onChange={(e) => onPick(e.target.value || null)}\n >\n {offerDefault && <option value=\"\">{sortLabels.sortDefault}</option>}\n {columns.map((col) => (\n <option key={col.key} value={col.key}>\n {columnLabel(col, labels)}\n </option>\n ))}\n </Select>\n <IconButton\n size={compact ? \"xs\" : \"md\"}\n variant=\"secondary\"\n label={desc ? sortLabels.sortDescending : sortLabels.sortAscending}\n disabled={primary === null}\n onClick={onFlip}\n >\n {desc ? <ArrowDownWideNarrow /> : <ArrowUpNarrowWide />}\n </IconButton>\n </div>\n );\n}\n\n// ---------- Phone card ----------\n\n/** One phone card: what DataTable's card list draws for a row. */\nexport interface MobileRowProps<T> {\n row: T;\n isExpanded: DataTableProps<T>[\"isExpanded\"];\n /** What the row shows when opened — DataTable's `openedRowContent`. */\n openedRowContent: (row: T) => ReactNode;\n /** Whether an opened row has anything to show at all. */\n opensRow: boolean;\n rowClassName: DataTableProps<T>[\"rowClassName\"];\n rowAttributes: DataTableProps<T>[\"rowAttributes\"];\n onRowClick: DataTableProps<T>[\"onRowClick\"];\n rowHref: DataTableProps<T>[\"rowHref\"];\n /** `mobileSwipeActions`, or the swipes derived from `rowActions`. */\n swipeActionsFor: ((row: T) => MobileSwipeActions | null) | undefined;\n /** The card list's reading direction, for which physical drag a swipe side means. */\n mobileDir: Direction;\n /** No column the card renders owns a link, so the card itself may be one. */\n mobileCardLinkable: boolean;\n mobileCard: DataTableProps<T>[\"mobileCard\"];\n mobilePrimaryCol: DataTableColumn<T> | null;\n /** The `role: \"status\"` columns, drawn as chips beside the title (0.49 KIT-7). */\n mobileStatusColumns: DataTableColumn<T>[];\n mobileSecondaryColumns: DataTableColumn<T>[];\n /** The `role: \"actions\"` columns, drawn after the fields at the card's end (0.49 KIT-7). */\n mobileActionColumns: DataTableColumn<T>[];\n mobileExpandAsDialog: boolean;\n compact: boolean;\n /** The text size is Large or Extra large (§4). */\n large: boolean;\n /** Phone selection (0.40, keksdose live #421); null without DataTable's `selection`. */\n select: MobileRowSelect | null;\n}\n\n/** A phone card's part in DataTable's `selection` (0.40, keksdose live #421). */\nexport interface MobileRowSelect {\n /** The card list is in selection mode: the card shows its box and a tap toggles it. */\n active: boolean;\n /** `selection.isSelectable` for this row. */\n selectable: boolean;\n selected: boolean;\n onToggle: (checked: boolean) => void;\n /** A long press outside the mode: enter it with this row selected. */\n onLongPress: () => void;\n}\n\n/** One mobile card. Shared by the flat list and the grouped list, so both draw\n * identical row markup. */\nexport function MobileRow<T>({\n row,\n isExpanded,\n openedRowContent,\n opensRow,\n rowClassName,\n rowAttributes,\n onRowClick,\n rowHref,\n swipeActionsFor,\n mobileDir,\n mobileCardLinkable,\n mobileCard,\n mobilePrimaryCol,\n mobileStatusColumns,\n mobileSecondaryColumns,\n mobileActionColumns,\n mobileExpandAsDialog,\n compact,\n large,\n select,\n}: MobileRowProps<T>) {\n const expanded = isExpanded?.(row) ?? false;\n // Selection mode (#421): the whole card is the row's checkbox — a tap toggles it\n // instead of opening the row, and the swipe and the long press stand down, so no\n // gesture means two things at once (keksdose's register list, its feedback #153).\n const selecting = !!select?.active;\n // Not on an open card, as in kk's register: its editor and a selection are two modes\n // fighting over the same row.\n const pressable = !!select && select.selectable && !selecting && !expanded;\n const longPress = useLongPress(() => select?.onLongPress(), { enabled: pressable });\n const expansion = expanded ? openedRowContent(row) : null;\n const tint = rowClassName?.(row);\n // Use div+role=\"button\" rather than a real <button> so cells that\n // contain their own interactive controls (status toggles, action\n // icons) don't end up as illegal nested buttons.\n const interactive = !!onRowClick;\n // Say that the card OPENS something (Keksdose feedback #163). A phone card had\n // only a cursor and a tap-tint to advertise its editor — on the invoice review\n // screen, whose entire purpose is correcting mis-read lines, that read as \"these\n // values are not editable\". A chevron is the affordance every list on a phone\n // uses for exactly this, and it points the way the row actually opens: right into\n // a sheet, or down into an inline panel that flips it when expanded.\n const opensDetail = interactive && opensRow;\n const swipeActions = swipeActionsFor?.(row);\n const swipe = swipeActions ? physicalSwipe(swipeActions, mobileDir) : null;\n // An OPEN card swipes too (0.40, keksdose live #416, Marcel: \"faster than scrolling\n // down to the buttons\"). Only the card's header — the summary line — is inside\n // SwipeableRow; the opened body below is a sibling, so its fields, sliders and\n // scrolling never meet the gesture. Until 0.40 an open card silently lost it.\n // In selection mode a sideways drag would be a second meaning for a selecting touch.\n const swipeEnabled = !!swipe && !selecting;\n const href = mobileCardLinkable ? rowHref?.(row) : undefined;\n const cardClass = cn(\n \"w-full text-start flex items-center\",\n // §4: more room per row at Large — a taller row is a bigger tap target too.\n compact ? \"px-3 py-2 gap-2 text-sm large:py-3\" : \"px-4 py-3 gap-3 large:py-4\",\n // Live #320's other half: the card acknowledges the touch before the sheet\n // arrives. On a cold route the data can take a beat, and an unacknowledged tap\n // reads as \"did that register?\" — which is most of what \"abrupt\" means here.\n // `origin-center` + a 0.5% squeeze is deliberately almost subliminal: this fires\n // on every row of a long list, so anything larger becomes the list's personality\n // rather than feedback. `transition-transform` alone, so the existing background\n // flip stays instant.\n interactive &&\n \"cursor-pointer transition-transform duration-100 active:scale-[0.995] active:bg-active motion-reduce:transition-none motion-reduce:active:scale-100\",\n // The keyboard's frame drawn INSIDE the card, as the desktop row's is (keksdose live\n // #394): the browser's own ring and tap highlight sit on the card's outer edge, and\n // three ancestors clip it — SwipeableRow's `overflow-hidden`, the card list, and\n // AppShell main's `overflow-x-clip` — so the frame went missing on one side. A press\n // keeps the fill and the squeeze above; an outline on every tap of a long list would\n // be louder than the acknowledgement it replaces.\n (interactive || selecting) && cn(\"[-webkit-tap-highlight-color:transparent] focus-visible:ring-inset\", FOCUS_RING),\n selecting && \"cursor-pointer\",\n select?.selected && selecting && \"bg-brand-soft\",\n // A 500 ms hold would otherwise start a text selection, and iOS's link callout —\n // which only yields to this CSS. The trade kk made on its register: the card's text\n // is not selectable on a phone where the table offers selection.\n select && \"select-none [-webkit-touch-callout:none]\",\n );\n // The card's content is written once and worn by either tag below. Note that\n // the primary cell is rendered RAW here, never through `linkColumn` — the card\n // itself is the anchor, and routing it through `linkColumn` too would nest an\n // <a> inside an <a>. Desktop and mobile are mutually exclusive (`isMdUp`), so\n // exactly one anchor exists per row.\n // The default card's filled fields and status values (0.49 KIT-7): an empty one\n // gets no line. Not computed for a `mobileCard`, which draws its own.\n const fields = mobileCard ? [] : filledFields(mobileSecondaryColumns, row);\n const statuses = mobileCard ? [] : filledFields(mobileStatusColumns, row);\n const actionCells = mobileCard ? [] : filledFields(mobileActionColumns, row);\n const cardInner = (\n <>\n {/* The card's own content keeps the column it always had; the chevron sits\n beside it rather than inside, so a caller's `mobileCard` is untouched. */}\n <div\n className={cn(\n \"flex min-w-0 flex-1 flex-col\",\n compact ? \"gap-1 large:gap-2\" : \"gap-2 large:gap-3\",\n // §4 \"nothing truncates\": at Large a cell's own `truncate` wraps instead —\n // the reader who chose bigger type is the one an ellipsis fails. A caller's\n // `mobileCard` is its own layout and keeps what it chose.\n !mobileCard && CARD_NO_TRUNCATE,\n )}\n >\n {mobileCard ? (\n mobileCard(row)\n ) : (\n <>\n {/* Only the `data-*` half of `cellProps` — see its note. The title row\n carries the status chips at its end (0.49 KIT-7). */}\n {(mobilePrimaryCol || statuses.length > 0) && (\n <div data-card-head=\"\" className=\"flex min-w-0 items-start justify-between gap-2\">\n {mobilePrimaryCol && (\n <div\n {...dataAttrsOf(mobilePrimaryCol.cellProps?.(row))}\n data-card-title=\"\"\n className=\"min-w-0 flex-1 break-words font-medium\"\n >\n {mobilePrimaryCol.cell(row)}\n </div>\n )}\n {statuses.length > 0 && (\n <div className=\"flex shrink-0 flex-wrap items-center justify-end gap-1\">\n {statuses.map(({ col, value }) => (\n <span key={col.key} {...dataAttrsOf(col.cellProps?.(row))} data-card-status=\"\" className=\"inline-flex\">\n <StatusChip value={value} />\n </span>\n ))}\n </div>\n )}\n </div>\n )}\n {fields.length > 0 && large ? (\n // §4: each label ABOVE its value at Large. Side by side, a label column\n // sized to the widest label leaves a value a sliver of a 240 px card.\n <StackedFields columns={mobileSecondaryColumns} row={row} compact={compact} />\n ) : fields.length > 0 && (\n <dl\n className={cn(\n \"grid grid-cols-[auto_1fr] gap-x-3\",\n compact ? \"gap-y-0.5 text-xs\" : \"gap-y-1 text-sm\",\n )}\n >\n {fields.map(({ col, value }) => (\n <Fragment key={col.key}>\n <dt className=\"text-xs uppercase tracking-wide text-muted self-center\">\n {col.header}\n </dt>\n <dd\n {...dataAttrsOf(col.cellProps?.(row))}\n className=\"min-w-0 text-secondary self-center\"\n >\n {value}\n </dd>\n </Fragment>\n ))}\n </dl>\n )}\n {/* The row's actions after the fields, at the card's end (0.49 KIT-7): its\n buttons keep their own clicks, and RowActions folds into \"⋯\" at Large. */}\n {actionCells.length > 0 && (\n <div data-card-actions=\"\" className=\"flex min-w-0 flex-wrap items-center justify-end gap-2\">\n {actionCells.map(({ col, value }) => (\n <div key={col.key} {...dataAttrsOf(col.cellProps?.(row))} className=\"flex min-w-0 justify-end\">\n {value}\n </div>\n ))}\n </div>\n )}\n </>\n )}\n </div>\n {opensDetail && !selecting &&\n // `aria-hidden`: the row already announces itself as a button with\n // `aria-expanded`, so the icon would only add a second, wordless stop.\n (mobileExpandAsDialog ? (\n // Points INTO the sheet, which is the reading-forward direction.\n <ChevronRight\n aria-hidden\n className=\"size-4 shrink-0 text-placeholder rtl:-scale-x-100\"\n />\n ) : (\n <ChevronDown\n aria-hidden\n className={cn(\n \"size-4 shrink-0 text-placeholder transition-transform\",\n expanded && \"rotate-180\",\n )}\n />\n ))}\n </>\n );\n // The long press rides the card itself; the click it leaves behind is swallowed on\n // the `<li>` below, in the capture phase, before the card (or RowLink) sees it.\n // Attached whenever the table selects, the hook's `enabled` deciding whether a press\n // arms: its pointerdown also clears a stale swallow latch, which must happen in the\n // mode too, or a long press whose click never came would eat the first toggle.\n //\n // A press that starts on a control in a cell (or in a portal one opened) is that\n // control's, not a way into the mode (keksdose live #428): it only clears the latch.\n const press = select\n ? {\n ...longPress.handlers,\n onPointerDown: (e: ReactPointerEvent<HTMLElement>) => {\n if (fromOutside(e.target, e.currentTarget) || fromOwnControl(e.target, e.currentTarget)) {\n longPress.consumeClick();\n return;\n }\n longPress.handlers.onPointerDown(e);\n },\n onContextMenu: (e: ReactMouseEvent<HTMLElement>) => {\n if (fromOutside(e.target, e.currentTarget) || fromOwnControl(e.target, e.currentTarget)) return;\n longPress.handlers.onContextMenu(e);\n },\n }\n : undefined;\n const body = selecting ? (\n // In the mode a card is a toggle — kk's register row: `role=\"button\"` with\n // `aria-pressed`, the box beside it only a picture of that state (the card is the\n // one control, so the two can never fight or fire twice).\n /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- role=\"button\",\n tabIndex 0 and Enter/Space are all here; the rule cannot follow the conditional role. */\n <div\n role={select!.selectable ? \"button\" : undefined}\n tabIndex={select!.selectable ? 0 : undefined}\n aria-pressed={select!.selectable ? select!.selected : undefined}\n aria-disabled={select!.selectable ? undefined : true}\n data-card-selecting=\"\"\n {...press}\n onClick={(e) => {\n if (!select!.selectable || fromOutside(e.target, e.currentTarget)) return;\n // A tap on a control in a cell is that control's (keksdose live #428).\n if (fromOwnControl(e.target, e.currentTarget)) return;\n select!.onToggle(!select!.selected);\n }}\n onKeyDown={(e) => {\n if (!select!.selectable || e.target !== e.currentTarget) return;\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n select!.onToggle(!select!.selected);\n }\n }}\n className={cardClass}\n >\n <Checkbox\n readOnly\n tabIndex={-1}\n aria-hidden\n checked={select!.selected}\n disabled={!select!.selectable}\n className=\"pointer-events-none shrink-0 self-center\"\n inputClassName=\"pointer-events-none\"\n />\n {cardInner}\n </div>\n ) : interactive && href ? (\n // A card with a URL of its own is a LINK, not a div wearing role=\"button\"\n // (feedback #451): the phone's long-press \"open in new tab\" and a screen\n // reader's link semantics both come free, and the fake role goes away.\n <RowLink\n href={href}\n {...press}\n onActivate={() => onRowClick!(row)}\n aria-expanded={opensRow ? expanded : undefined}\n className={cardClass}\n // Enter already activates a link natively, and that routes through\n // RowLink's own onClick — handling it here too would open the row twice.\n // Space is the only key left, and only so it opens the row instead of\n // scrolling the list.\n onKeyDown={(e) => {\n if (e.key !== \" \") return;\n e.preventDefault();\n onRowClick!(row);\n }}\n >\n {cardInner}\n </RowLink>\n ) : (\n /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- the handlers are\n only attached when `interactive`, and then so are role=\"button\", tabIndex 0 and the\n Enter/Space handler below; the rule cannot follow the conditional role. */\n <div\n {...press}\n role={interactive ? \"button\" : undefined}\n tabIndex={interactive ? 0 : undefined}\n onClick={\n interactive\n ? (e) => {\n if (fromOutside(e.target, e.currentTarget)) return;\n // A tap on a control in a cell (a select, a button) is that\n // control's, as on the desktop `<tr>` (keksdose live #428).\n if (fromOwnControl(e.target, e.currentTarget)) return;\n onRowClick!(row);\n }\n : undefined\n }\n onKeyDown={\n interactive\n ? (e) => {\n // A key press inside a nested control is that control's.\n if (e.target !== e.currentTarget) return;\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n onRowClick!(row);\n }\n }\n : undefined\n }\n aria-expanded={opensRow ? expanded : undefined}\n className={cardClass}\n >\n {cardInner}\n </div>\n );\n return (\n <li\n className={cn(tint)}\n {...cleanAttrs(rowAttributes?.(row))}\n data-selected={selecting && select!.selected ? \"\" : undefined}\n onClickCapture={\n select\n ? (e) => {\n if (!longPress.consumeClick()) return;\n e.preventDefault();\n e.stopPropagation();\n }\n : undefined\n }\n >\n {swipeEnabled ? (\n <SwipeableRow enabled left={swipe!.left} right={swipe!.right}>\n {body}\n </SwipeableRow>\n ) : (\n body\n )}\n {expansion && !mobileExpandAsDialog && (\n <div\n className={cn(\n \"bg-surface-2 border-t border-subtle\",\n compact ? \"px-3 py-2\" : \"px-4 py-3\",\n )}\n >\n {expansion}\n </div>\n )}\n </li>\n );\n}\n\n// ---------- Phone selection bar (0.40, keksdose live #421) ----------\n\n/**\n * The card list's way into and out of selection mode for a keyboard and a screen\n * reader — the long press is a touch gesture, and a gesture alone is no path at all.\n *\n * Outside the mode it is one button, \"Select rows\", visually hidden until it takes\n * focus (SwipeableRow's keyboard buttons, the same rule): the card list keeps the look\n * kk's register has, where the long press is the way in, and Tab or a screen reader's\n * cursor still finds it. In the mode it is a visible row: \"Select all rows\" — the\n * desktop header's box — and Cancel, which clears the selection and leaves, as the\n * bulk bar's Clear does. The owner's bulk bar is the owner's, as on desktop: it\n * appears because the selection is no longer empty.\n */\nexport function MobileSelectBar({\n active,\n allSelected,\n someSelected,\n compact,\n labels,\n onEnter,\n onToggleAll,\n onCancel,\n}: {\n active: boolean;\n allSelected: boolean;\n someSelected: boolean;\n compact: boolean;\n labels: DataTableLabels;\n onEnter: () => void;\n onToggleAll: (checked: boolean) => void;\n onCancel: () => void;\n}) {\n // The control that was pressed unmounts with the mode it switched, so focus is\n // handed across: into the bar's box on the way in, back to the button on the way out.\n const handOff = useRef(false);\n const allBox = useRef<HTMLInputElement>(null);\n const enterButton = useRef<HTMLButtonElement>(null);\n useEffect(() => {\n if (!handOff.current) return;\n handOff.current = false;\n (active ? allBox.current : enterButton.current)?.focus();\n }, [active]);\n if (!active)\n return (\n <button\n ref={enterButton}\n type=\"button\"\n data-table-mobile-select=\"\"\n onClick={() => {\n handOff.current = true;\n onEnter();\n }}\n className={cn(\n \"sr-only rounded-md text-sm font-medium text-secondary\",\n // Padding only once shown: unconditional, it beats sr-only's `padding: 0`\n // (SwipeableRow's 0.32.1 note).\n \"focus:not-sr-only focus:m-2 focus:inline-flex focus:px-2 focus:py-1\",\n FOCUS_RING,\n )}\n >\n {labels.selectRows}\n </button>\n );\n return (\n <div\n data-table-mobile-select=\"\"\n className={cn(\n \"flex flex-wrap items-center justify-between gap-2 border-b border-subtle\",\n compact ? \"px-3 py-1.5\" : \"px-4 py-2\",\n )}\n >\n <Checkbox\n ref={allBox}\n label={labels.selectAllRows}\n checked={allSelected}\n indeterminate={someSelected && !allSelected}\n onChange={(e) => onToggleAll(e.target.checked)}\n />\n <button\n type=\"button\"\n onClick={() => {\n handOff.current = true;\n onCancel();\n }}\n className={cn(\"rounded-md px-2 py-1 text-sm text-muted hover:text-secondary\", FOCUS_RING)}\n >\n {labels.cancelSelection}\n </button>\n </div>\n );\n}\n\n// ---------- Mobile filter sheet ----------\n\n/**\n * Filter access for the mobile card list (feedback #299). The desktop table\n * houses per-column filters in its header; the card list has no header, so the\n * same filters were unreachable on phones. This renders a compact \"Filters\" bar\n * that opens a bottom sheet listing each filterable column as a collapsible\n * section, reusing the very same {@link FilterPopover} and filter state the\n * desktop table drives — so it filters identically and stays URL-synced.\n *\n * The sheet is a {@link DialogFrame} (round 0.34 BUG-7b = DUP-6). It was the last\n * hand-rolled modal in the kit: `role=\"dialog\" aria-modal=\"true\"` on the backdrop, with\n * copies of the scroll lock, the backdrop close and the Back entry — and no name, no\n * focus moved in, no trap and no Escape, so a reader was told the page was hidden while\n * focus stayed on it. On a phone `Modal` is a bottom sheet already; it now brings all\n * of that, and the exit motion, from the one place every other dialog gets it.\n */\nexport function MobileFilters<T>({\n columns,\n filters,\n selectOptionsByKey,\n isServer,\n hasFilterCallback,\n onSetFilter,\n onClearFilter,\n onClearAll,\n labels,\n locale,\n}: {\n columns: DataTableColumn<T>[];\n filters: FilterState;\n selectOptionsByKey: Record<string, { value: string; label: string }[]>;\n isServer: boolean;\n hasFilterCallback: boolean;\n onSetFilter: (key: string, value: FilterValue) => void;\n onClearFilter: (key: string) => void;\n onClearAll: () => void;\n labels: DataTableLabels;\n locale?: string;\n}) {\n const [open, setOpen] = useState(false);\n // The sheet is portalled to <body>, out from under whatever `dir` the table sits\n // in, so it carries the trigger's direction with it — read at the moment of opening,\n // from the element the user actually pressed.\n const [dir, setDir] = useState<Direction>(\"ltr\");\n const [expanded, setExpanded] = useState<string | null>(null);\n\n const filterable = useMemo(\n () =>\n columns\n .map((col) => ({ col, filter: !isServer || hasFilterCallback ? resolveFilter(col) : null }))\n .filter((x): x is { col: DataTableColumn<T>; filter: ColumnFilter<T> } => !!x.filter),\n [columns, isServer, hasFilterCallback],\n );\n\n if (filterable.length === 0) return null;\n\n const activeCount = filterable.filter(({ col }) => {\n const s = filters[col.key];\n return s && isFilterActive(s);\n }).length;\n\n return (\n <div className=\"flex items-center justify-between gap-2 border-b border-subtle px-4 py-2\">\n <button\n type=\"button\"\n onClick={(e) => {\n setDir(dirOf(e.currentTarget));\n setOpen(true);\n }}\n className=\"inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium text-secondary hover:bg-hover\"\n >\n <Filter className=\"size-4\" />\n <span>{labels.filters}</span>\n {activeCount > 0 && (\n <span className=\"inline-flex min-w-4 items-center justify-center rounded-full bg-info-soft px-1 text-caption font-semibold text-info\">\n {activeCount}\n </span>\n )}\n </button>\n {activeCount > 0 && (\n <button\n type=\"button\"\n onClick={onClearAll}\n className=\"text-xs text-muted hover:text-secondary\"\n >\n {labels.clearAll}\n </button>\n )}\n {/* Escape, the backdrop, Back (Keksdose feedback #172: the filters are already\n in the URL, so closing never loses anything), the scroll lock, focus in and\n back to this bar's button — all `Modal`'s. `fullBleed` lets the sheet meet the\n screen's edges on a phone, as it always did. */}\n <DialogFrame\n open={open}\n onClose={() => setOpen(false)}\n title={labels.filters}\n closeButton\n closeLabel={labels.close}\n headerDivider\n fullBleed\n // Portalled to <body>, so the direction read from the button goes with it.\n dir={dir}\n className=\"max-h-[85vh] rounded-b-none md:rounded-b-lg\"\n // The sections run edge to edge with a rule between them, as before.\n bodyClassName=\"space-y-0 divide-y divide-subtle px-0 pt-0 pb-0\"\n actions={(close) => (\n <>\n <button\n type=\"button\"\n onClick={onClearAll}\n disabled={activeCount === 0}\n // `me-auto` keeps Clear all at the start and Done at the end.\n className=\"me-auto text-sm text-muted hover:text-secondary disabled:opacity-40\"\n >\n {labels.clearAll}\n </button>\n <button\n type=\"button\"\n onClick={close}\n className=\"rounded-md bg-inverse px-4 py-2 text-sm font-medium text-inverse\"\n >\n {labels.done}\n </button>\n </>\n )}\n >\n {filterable.map(({ col, filter }) => {\n const state = filters[col.key];\n const active = !!state && isFilterActive(state);\n const isItemOpen = expanded === col.key;\n return (\n <div key={col.key}>\n <button\n type=\"button\"\n onClick={() => setExpanded(isItemOpen ? null : col.key)}\n aria-expanded={isItemOpen}\n className=\"flex w-full items-center justify-between gap-2 px-4 py-3 text-start\"\n >\n <span className=\"flex items-center gap-2 text-sm font-medium text-secondary\">\n {col.header}\n {active && <span className=\"size-1.5 rounded-full bg-brand\" />}\n </span>\n <ChevronDown\n className={cn(\n \"size-4 shrink-0 text-placeholder transition-transform\",\n isItemOpen && \"rotate-180\",\n )}\n />\n </button>\n {isItemOpen && (\n <div className=\"px-4 pb-3\">\n <FilterPopover\n column={col}\n state={state ?? defaultFilterState(filter)}\n onChange={(next) => onSetFilter(col.key, next)}\n onClear={() => onClearFilter(col.key)}\n selectOptions={selectOptionsByKey[col.key] ?? []}\n labels={labels}\n locale={locale}\n />\n </div>\n )}\n </div>\n );\n })}\n </DialogFrame>\n </div>\n );\n}\n"],"mappings":";AAmFQ,SAqH2F,UApHzF,KADF;AAnFR,SAAS,YAAAA,WAAU,gBAAgB,WAAW,OAAO,SAAS,QAAQ,gBAAgB;AAEtF,SAAS,qBAAqB,mBAAmB,aAAa,cAAc,cAAc;AAC1F,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,UAAU;AACnB,SAAS,aAA6B;AACtC,SAAS,oBAAoB,gBAAgB,qBAAqB;AAGlE,SAAS,qBAAqB;AAC9B,SAAS,oBAAsC;AAC/C,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAC5B,SAAS,6BAA6B;AACtC,SAAS,oBAAoB;AAE7B,SAAS,SAAS,YAAY,aAAa,aAAa,sBAAsB;AAgB9E,SAAS,YAAY,OAA4E;AAC/F,MAAI,CAAC,MAAO,QAAO;AACnB,QAAM,MAA+B,CAAC;AACtC,aAAW,CAAC,GAAG,CAAC,KAAK,OAAO,QAAQ,KAAK,EAAG,KAAI,EAAE,WAAW,OAAO,KAAK,MAAM,WAAY,KAAI,CAAC,IAAI;AACpG,SAAO;AACT;AAGA,SAAS,cACP,SACA,KACiD;AACjD,QAAM,MAAM,QAAQ;AACpB,SAAO;AAAA,IACL,OAAO,MAAM,QAAQ,MAAM,QAAQ,UAAU,QAAQ;AAAA,IACrD,QAAQ,MAAM,QAAQ,QAAQ,QAAQ,QAAQ,QAAQ;AAAA,EACxD;AACF;AAWA,MAAM,mBACJ;AASK,SAAS,cAAiB,EAAE,SAAS,KAAK,QAAQ,GAAgE;AACvH,QAAM,SAAS,aAAa,SAAS,GAAG;AACxC,MAAI,OAAO,WAAW,EAAG,QAAO;AAChC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,oBAAiB;AAAA,MACjB,WAAW,GAAG,kCAAkC,UAAU,oBAAoB,mBAAmB,gBAAgB;AAAA,MAEhH,iBAAO,IAAI,CAAC,EAAE,KAAK,MAAM,MACxB,qBAAC,SAAkB,WAAU,WAC3B;AAAA,4BAAC,QAAG,WAAU,8CAA8C,cAAI,QAAO;AAAA,QACvE;AAAA,UAAC;AAAA;AAAA,YACE,GAAG,YAAY,IAAI,YAAY,GAAG,CAAC;AAAA,YACpC,WAAU;AAAA,YAET;AAAA;AAAA,QACH;AAAA,WAPQ,IAAI,GAQd,CACD;AAAA;AAAA,EACH;AAEJ;AAGO,MAAM,qBAAqB;AAY3B,SAAS,kBAAqB,SAKnC;AACA,QAAM,SAAS,QAAQ,OAAO,CAAC,MAAM,EAAE,SAAS,SAAS;AACzD,QAAM,UACJ,OAAO,KAAK,CAAC,MAAM,EAAE,WAAW,SAAS,KACzC,OAAO,KAAK,CAAC,MAAM,EAAE,aAAa,KAClC,OAAO,KAAK,CAAC,MAAM,EAAE,SAAS,QAAQ,KACtC,OAAO,CAAC,KACR;AACF,QAAM,SAAS,QAAQ,OAAO,CAAC,MAAM,MAAM,WAAW,EAAE,SAAS,QAAQ;AACzE,QAAM,UAAU,QAAQ,OAAO,CAAC,MAAM,EAAE,SAAS,SAAS;AAC1D,QAAM,OAAO,OAAO,OAAO,CAAC,MAAM,MAAM,WAAW,EAAE,SAAS,QAAQ;AACtE,QAAM,SAAS,KAAK,OAAO,CAAC,MAAM,EAAE,WAAW,WAAW;AAC1D,SAAO,EAAE,SAAS,QAAQ,SAAS,OAAO,SAAS,IAAI,SAAS,MAAM,MAAM,GAAG,kBAAkB,GAAG,QAAQ;AAC9G;AAIO,SAAS,eAAkB,KAAkC;AAClE,SAAO,CAAC,CAAC,IAAI,aAAa,IAAI,SAAS;AACzC;AAIA,SAAS,cAAuB;AAC9B,SAAO,QAAQ,YAAY,KAAK,GAAG,KAAK,CAAC,YAAY,KAAK;AAC5D;AAcO,SAAS,sBAAyB,SAA+B,SAAkB,MAAqB;AAC7G,QAAM,SAAS,OAA2B,IAAI;AAC9C,YAAU,MAAM;AACd,QAAI,CAAC,WAAW,CAAC,YAAY,EAAG;AAChC,UAAM,QAAQ,QAAQ,OAAO,CAAC,MAAM,CAAC,EAAE,gBAAgB,EAAE,WAAW,QAAQ;AAC5E,QAAI,MAAM,KAAK,CAAC,MAAM,EAAE,WAAW,WAAW,EAAG;AACjD,UAAM,EAAE,SAAS,QAAQ,QAAQ,QAAQ,IAAI,kBAAkB,KAAK;AACpE,UAAM,SAAS,oBAAI,IAA+B,CAAC,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC7F,UAAM,QAAQ,OAAO,KAAK,IAAI,MAAM,UAAU,mBAAmB,QAAQ,GAAG,OAAO;AACnF,WAAO,YAAY,oBAAI,IAAI;AAC3B,eAAW,OAAO,OAAO;AACvB,UAAI,OAAO,IAAI,GAAG,KAAK,CAAC,IAAI,aAAa,OAAO,QAAQ,IAAI,IAAI,GAAG,EAAG;AACtE,aAAO,QAAQ,IAAI,IAAI,GAAG;AAC1B,cAAQ;AAAA,QACN,qBAAqB,KAAK,aAAa,IAAI,GAAG;AAAA,MAEhD;AAAA,IACF;AAAA,EACF,GAAG,CAAC,SAAS,SAAS,IAAI,CAAC;AAC7B;AASO,SAAS,YAAY,OAA2B;AACrD,MAAI,UAAU,QAAQ,UAAU,UAAa,OAAO,UAAU,UAAW,QAAO;AAChF,MAAI,eAAoC,KAAK,KAAK,MAAM,SAAS,YAAa,QAAO,MAAM,MAAM,SAAS;AAC1G,MAAI,OAAO,UAAU,UAAU;AAC7B,UAAM,OAAO,MAAM,KAAK;AACxB,WAAO,SAAS,MAAM,SAAS;AAAA,EACjC;AACA,SAAO;AACT;AAGA,SAAS,aAAgB,SAA+B,KAAyD;AAC/G,SAAO,QAAQ,IAAI,CAAC,SAAS,EAAE,KAAK,OAAO,IAAI,KAAK,GAAG,EAAE,EAAE,EAAE,OAAO,CAAC,EAAE,MAAM,MAAM,CAAC,YAAY,KAAK,CAAC;AACxG;AAIA,SAAS,WAAW,EAAE,MAAM,GAAyB;AACnD,SAAO,OAAO,UAAU,YAAY,OAAO,UAAU,WAAW,oBAAC,QAAK,MAAK,MAAM,iBAAM,IAAU,gCAAG,iBAAM;AAC5G;AAwBO,SAAS,WAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQG;AACD,QAAM,WAAW,MAAM;AACvB,QAAM,aAAkC;AACxC,MAAI,QAAQ,WAAW,EAAG,QAAO;AAGjC,QAAM,UAAU,MAAM,CAAC,KAAK,QAAQ,KAAK,CAAC,MAAM,EAAE,QAAQ,MAAM,CAAC,EAAE,GAAG,IAAI,MAAM,CAAC,IAAI;AACrF,QAAM,eAAe,cAAc,SAAS,YAAY;AACxD,QAAM,OAAO,SAAS,QAAQ;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,0BAAuB;AAAA,MACvB,WAAW;AAAA;AAAA;AAAA,QAGT;AAAA,QACA,UAAU,gBAAgB;AAAA,MAC5B;AAAA,MAEA;AAAA,4BAAC,WAAM,SAAS,UAAU,WAAU,+BACjC,qBAAW,QACd;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,YACJ,MAAM,UAAU,OAAO;AAAA,YACvB,WAAU;AAAA,YACV,OAAO,SAAS,OAAO;AAAA,YACvB,UAAU,CAAC,MAAM,OAAO,EAAE,OAAO,SAAS,IAAI;AAAA,YAE7C;AAAA,8BAAgB,oBAAC,YAAO,OAAM,IAAI,qBAAW,aAAY;AAAA,cACzD,QAAQ,IAAI,CAAC,QACZ,oBAAC,YAAqB,OAAO,IAAI,KAC9B,sBAAY,KAAK,MAAM,KADb,IAAI,GAEjB,CACD;AAAA;AAAA;AAAA,QACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,UAAU,OAAO;AAAA,YACvB,SAAQ;AAAA,YACR,OAAO,OAAO,WAAW,iBAAiB,WAAW;AAAA,YACrD,UAAU,YAAY;AAAA,YACtB,SAAS;AAAA,YAER,iBAAO,oBAAC,uBAAoB,IAAK,oBAAC,qBAAkB;AAAA;AAAA,QACvD;AAAA;AAAA;AAAA,EACF;AAEJ;AAmDO,SAAS,UAAa;AAAA,EAC3B;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,GAAsB;AACpB,QAAM,WAAW,aAAa,GAAG,KAAK;AAItC,QAAM,YAAY,CAAC,CAAC,QAAQ;AAG5B,QAAM,YAAY,CAAC,CAAC,UAAU,OAAO,cAAc,CAAC,aAAa,CAAC;AAClE,QAAM,YAAY,aAAa,MAAM,QAAQ,YAAY,GAAG,EAAE,SAAS,UAAU,CAAC;AAClF,QAAM,YAAY,WAAW,iBAAiB,GAAG,IAAI;AACrD,QAAM,OAAO,eAAe,GAAG;AAI/B,QAAM,cAAc,CAAC,CAAC;AAOtB,QAAM,cAAc,eAAe;AACnC,QAAM,eAAe,kBAAkB,GAAG;AAC1C,QAAM,QAAQ,eAAe,cAAc,cAAc,SAAS,IAAI;AAMtE,QAAM,eAAe,CAAC,CAAC,SAAS,CAAC;AACjC,QAAM,OAAO,qBAAqB,UAAU,GAAG,IAAI;AACnD,QAAM,YAAY;AAAA,IAChB;AAAA;AAAA,IAEA,UAAU,uCAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQjD,eACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAOD,eAAe,cAAc,GAAG,sEAAsE,UAAU;AAAA,IACjH,aAAa;AAAA,IACb,QAAQ,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA,IAIjC,UAAU;AAAA,EACZ;AAQA,QAAM,SAAS,aAAa,CAAC,IAAI,aAAa,wBAAwB,GAAG;AACzE,QAAM,WAAW,aAAa,CAAC,IAAI,aAAa,qBAAqB,GAAG;AACxE,QAAM,cAAc,aAAa,CAAC,IAAI,aAAa,qBAAqB,GAAG;AAC3E,QAAM,YACJ,iCAGE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,UAAU,sBAAsB;AAAA;AAAA;AAAA;AAAA,UAIhC,CAAC,cAAc;AAAA,QACjB;AAAA,QAEC,uBACC,WAAW,GAAG,IAEd,iCAGI;AAAA,+BAAoB,SAAS,SAAS,MACtC,qBAAC,SAAI,kBAAe,IAAG,WAAU,kDAC9B;AAAA,gCACC;AAAA,cAAC;AAAA;AAAA,gBACE,GAAG,YAAY,iBAAiB,YAAY,GAAG,CAAC;AAAA,gBACjD,mBAAgB;AAAA,gBAChB,WAAU;AAAA,gBAET,2BAAiB,KAAK,GAAG;AAAA;AAAA,YAC5B;AAAA,YAED,SAAS,SAAS,KACjB,oBAAC,SAAI,WAAU,0DACZ,mBAAS,IAAI,CAAC,EAAE,KAAK,MAAM,MAC1B,oBAAC,UAAoB,GAAG,YAAY,IAAI,YAAY,GAAG,CAAC,GAAG,oBAAiB,IAAG,WAAU,eACvF,8BAAC,cAAW,OAAc,KADjB,IAAI,GAEf,CACD,GACH;AAAA,aAEJ;AAAA,UAED,OAAO,SAAS,KAAK;AAAA;AAAA;AAAA,YAGpB,oBAAC,iBAAc,SAAS,wBAAwB,KAAU,SAAkB;AAAA,cAC1E,OAAO,SAAS,KAClB;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,UAAU,sBAAsB;AAAA,cAClC;AAAA,cAEC,iBAAO,IAAI,CAAC,EAAE,KAAK,MAAM,MACxB,qBAACA,WAAA,EACC;AAAA,oCAAC,QAAG,WAAU,0DACX,cAAI,QACP;AAAA,gBACA;AAAA,kBAAC;AAAA;AAAA,oBACE,GAAG,YAAY,IAAI,YAAY,GAAG,CAAC;AAAA,oBACpC,WAAU;AAAA,oBAET;AAAA;AAAA,gBACH;AAAA,mBATa,IAAI,GAUnB,CACD;AAAA;AAAA,UACH;AAAA,UAID,YAAY,SAAS,KACpB,oBAAC,SAAI,qBAAkB,IAAG,WAAU,yDACjC,sBAAY,IAAI,CAAC,EAAE,KAAK,MAAM,MAC7B,oBAAC,SAAmB,GAAG,YAAY,IAAI,YAAY,GAAG,CAAC,GAAG,WAAU,4BACjE,mBADO,IAAI,GAEd,CACD,GACH;AAAA,WAEJ;AAAA;AAAA,IAEJ;AAAA,IACC,eAAe,CAAC;AAAA;AAAA,KAGd;AAAA;AAAA,MAEC;AAAA,QAAC;AAAA;AAAA,UACC,eAAW;AAAA,UACX,WAAU;AAAA;AAAA,MACZ;AAAA,QAEA;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,QACX,WAAW;AAAA,UACT;AAAA,UACA,YAAY;AAAA,QACd;AAAA;AAAA,IACF;AAAA,KAEN;AAUF,QAAM,QAAQ,SACV;AAAA,IACE,GAAG,UAAU;AAAA,IACb,eAAe,CAAC,MAAsC;AACpD,UAAI,YAAY,EAAE,QAAQ,EAAE,aAAa,KAAK,eAAe,EAAE,QAAQ,EAAE,aAAa,GAAG;AACvF,kBAAU,aAAa;AACvB;AAAA,MACF;AACA,gBAAU,SAAS,cAAc,CAAC;AAAA,IACpC;AAAA,IACA,eAAe,CAAC,MAAoC;AAClD,UAAI,YAAY,EAAE,QAAQ,EAAE,aAAa,KAAK,eAAe,EAAE,QAAQ,EAAE,aAAa,EAAG;AACzF,gBAAU,SAAS,cAAc,CAAC;AAAA,IACpC;AAAA,EACF,IACA;AACJ,QAAM,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMX;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,OAAQ,aAAa,WAAW;AAAA,QACtC,UAAU,OAAQ,aAAa,IAAI;AAAA,QACnC,gBAAc,OAAQ,aAAa,OAAQ,WAAW;AAAA,QACtD,iBAAe,OAAQ,aAAa,SAAY;AAAA,QAChD,uBAAoB;AAAA,QACnB,GAAG;AAAA,QACJ,SAAS,CAAC,MAAM;AACd,cAAI,CAAC,OAAQ,cAAc,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAG;AAEnE,cAAI,eAAe,EAAE,QAAQ,EAAE,aAAa,EAAG;AAC/C,iBAAQ,SAAS,CAAC,OAAQ,QAAQ;AAAA,QACpC;AAAA,QACA,WAAW,CAAC,MAAM;AAChB,cAAI,CAAC,OAAQ,cAAc,EAAE,WAAW,EAAE,cAAe;AACzD,cAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,cAAE,eAAe;AACjB,mBAAQ,SAAS,CAAC,OAAQ,QAAQ;AAAA,UACpC;AAAA,QACF;AAAA,QACA,WAAW;AAAA,QAEX;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,UAAQ;AAAA,cACR,UAAU;AAAA,cACV,eAAW;AAAA,cACX,SAAS,OAAQ;AAAA,cACjB,UAAU,CAAC,OAAQ;AAAA,cACnB,WAAU;AAAA,cACV,gBAAe;AAAA;AAAA,UACjB;AAAA,UACC;AAAA;AAAA;AAAA,IACH;AAAA,MACE,eAAe;AAAA;AAAA;AAAA;AAAA,IAIf;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACC,GAAG;AAAA,QACJ,YAAY,MAAM,WAAY,GAAG;AAAA,QACjC,iBAAe,WAAW,WAAW;AAAA,QACrC,WAAW;AAAA,QAKX,WAAW,CAAC,MAAM;AAChB,cAAI,EAAE,QAAQ,IAAK;AACnB,YAAE,eAAe;AACjB,qBAAY,GAAG;AAAA,QACjB;AAAA,QAEC;AAAA;AAAA,IACH;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,MAAM,cAAc,WAAW;AAAA,QAC/B,UAAU,cAAc,IAAI;AAAA,QAC5B,SACE,cACI,CAAC,MAAM;AACL,cAAI,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAG;AAG5C,cAAI,eAAe,EAAE,QAAQ,EAAE,aAAa,EAAG;AAC/C,qBAAY,GAAG;AAAA,QACjB,IACA;AAAA,QAEN,WACE,cACI,CAAC,MAAM;AAEL,cAAI,EAAE,WAAW,EAAE,cAAe;AAClC,cAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,cAAE,eAAe;AACjB,uBAAY,GAAG;AAAA,UACjB;AAAA,QACF,IACA;AAAA,QAEN,iBAAe,WAAW,WAAW;AAAA,QACrC,WAAW;AAAA,QAEV;AAAA;AAAA,IACH;AAAA;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,IAAI;AAAA,MACjB,GAAG,WAAW,gBAAgB,GAAG,CAAC;AAAA,MACnC,iBAAe,aAAa,OAAQ,WAAW,KAAK;AAAA,MACpD,gBACE,SACI,CAAC,MAAM;AACL,YAAI,CAAC,UAAU,aAAa,EAAG;AAC/B,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAAA,MACpB,IACA;AAAA,MAGL;AAAA,uBACC,oBAAC,gBAAa,SAAO,MAAC,MAAM,MAAO,MAAM,OAAO,MAAO,OACpD,gBACH,IAEA;AAAA,QAED,aAAa,CAAC,wBACb;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,UAAU,cAAc;AAAA,YAC1B;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAgBO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GASG;AAGD,QAAM,UAAU,OAAO,KAAK;AAC5B,QAAM,SAAS,OAAyB,IAAI;AAC5C,QAAM,cAAc,OAA0B,IAAI;AAClD,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ,QAAS;AACtB,YAAQ,UAAU;AAClB,KAAC,SAAS,OAAO,UAAU,YAAY,UAAU,MAAM;AAAA,EACzD,GAAG,CAAC,MAAM,CAAC;AACX,MAAI,CAAC;AACH,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL,4BAAyB;AAAA,QACzB,SAAS,MAAM;AACb,kBAAQ,UAAU;AAClB,kBAAQ;AAAA,QACV;AAAA,QACA,WAAW;AAAA,UACT;AAAA;AAAA;AAAA,UAGA;AAAA,UACA;AAAA,QACF;AAAA,QAEC,iBAAO;AAAA;AAAA,IACV;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,4BAAyB;AAAA,MACzB,WAAW;AAAA,QACT;AAAA,QACA,UAAU,gBAAgB;AAAA,MAC5B;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,OAAO,OAAO;AAAA,YACd,SAAS;AAAA,YACT,eAAe,gBAAgB,CAAC;AAAA,YAChC,UAAU,CAAC,MAAM,YAAY,EAAE,OAAO,OAAO;AAAA;AAAA,QAC/C;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS,MAAM;AACb,sBAAQ,UAAU;AAClB,uBAAS;AAAA,YACX;AAAA,YACA,WAAW,GAAG,gEAAgE,UAAU;AAAA,YAEvF,iBAAO;AAAA;AAAA,QACV;AAAA;AAAA;AAAA,EACF;AAEJ;AAmBO,SAAS,cAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAWG;AACD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAItC,QAAM,CAAC,KAAK,MAAM,IAAI,SAAoB,KAAK;AAC/C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAwB,IAAI;AAE5D,QAAM,aAAa;AAAA,IACjB,MACE,QACG,IAAI,CAAC,SAAS,EAAE,KAAK,QAAQ,CAAC,YAAY,oBAAoB,cAAc,GAAG,IAAI,KAAK,EAAE,EAC1F,OAAO,CAAC,MAAiE,CAAC,CAAC,EAAE,MAAM;AAAA,IACxF,CAAC,SAAS,UAAU,iBAAiB;AAAA,EACvC;AAEA,MAAI,WAAW,WAAW,EAAG,QAAO;AAEpC,QAAM,cAAc,WAAW,OAAO,CAAC,EAAE,IAAI,MAAM;AACjD,UAAM,IAAI,QAAQ,IAAI,GAAG;AACzB,WAAO,KAAK,eAAe,CAAC;AAAA,EAC9B,CAAC,EAAE;AAEH,SACE,qBAAC,SAAI,WAAU,4EACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,CAAC,MAAM;AACd,iBAAO,MAAM,EAAE,aAAa,CAAC;AAC7B,kBAAQ,IAAI;AAAA,QACd;AAAA,QACA,WAAU;AAAA,QAEV;AAAA,8BAAC,UAAO,WAAU,UAAS;AAAA,UAC3B,oBAAC,UAAM,iBAAO,SAAQ;AAAA,UACrB,cAAc,KACb,oBAAC,UAAK,WAAU,uHACb,uBACH;AAAA;AAAA;AAAA,IAEJ;AAAA,IACC,cAAc,KACb;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,WAAU;AAAA,QAET,iBAAO;AAAA;AAAA,IACV;AAAA,IAMF;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,SAAS,MAAM,QAAQ,KAAK;AAAA,QAC5B,OAAO,OAAO;AAAA,QACd,aAAW;AAAA,QACX,YAAY,OAAO;AAAA,QACnB,eAAa;AAAA,QACb,WAAS;AAAA,QAET;AAAA,QACA,WAAU;AAAA,QAEV,eAAc;AAAA,QACd,SAAS,CAAC,UACR,iCACE;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS;AAAA,cACT,UAAU,gBAAgB;AAAA,cAE1B,WAAU;AAAA,cAET,iBAAO;AAAA;AAAA,UACV;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS;AAAA,cACT,WAAU;AAAA,cAET,iBAAO;AAAA;AAAA,UACV;AAAA,WACF;AAAA,QAGD,qBAAW,IAAI,CAAC,EAAE,KAAK,OAAO,MAAM;AACnC,gBAAM,QAAQ,QAAQ,IAAI,GAAG;AAC7B,gBAAM,SAAS,CAAC,CAAC,SAAS,eAAe,KAAK;AAC9C,gBAAM,aAAa,aAAa,IAAI;AACpC,iBACE,qBAAC,SACC;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS,MAAM,YAAY,aAAa,OAAO,IAAI,GAAG;AAAA,gBACtD,iBAAe;AAAA,gBACf,WAAU;AAAA,gBAEV;AAAA,uCAAC,UAAK,WAAU,8DACb;AAAA,wBAAI;AAAA,oBACJ,UAAU,oBAAC,UAAK,WAAU,kCAAiC;AAAA,qBAC9D;AAAA,kBACA;AAAA,oBAAC;AAAA;AAAA,sBACC,WAAW;AAAA,wBACT;AAAA,wBACA,cAAc;AAAA,sBAChB;AAAA;AAAA,kBACF;AAAA;AAAA;AAAA,YACF;AAAA,YACC,cACC,oBAAC,SAAI,WAAU,aACb;AAAA,cAAC;AAAA;AAAA,gBACC,QAAQ;AAAA,gBACR,OAAO,SAAS,mBAAmB,MAAM;AAAA,gBACzC,UAAU,CAAC,SAAS,YAAY,IAAI,KAAK,IAAI;AAAA,gBAC7C,SAAS,MAAM,cAAc,IAAI,GAAG;AAAA,gBACpC,eAAe,mBAAmB,IAAI,GAAG,KAAK,CAAC;AAAA,gBAC/C;AAAA,gBACA;AAAA;AAAA,YACF,GACF;AAAA,eA7BM,IAAI,GA+Bd;AAAA,QAEJ,CAAC;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;","names":["Fragment"]}
|
|
@@ -26,7 +26,8 @@ export declare function actionsHeading(header: ReactNode | false | undefined, wo
|
|
|
26
26
|
* `end` then `start` — the physical `right` / `left` only where the logical side is
|
|
27
27
|
* missing, as the card reads them — each action once, told apart by its `id`, else by its
|
|
28
28
|
* label (two stages with one label would be one button twice). Each button runs the
|
|
29
|
-
* swipe's own `onCommit
|
|
29
|
+
* swipe's own `onCommit` — with no confirmation of the kit's (`confirm: false`), as the
|
|
30
|
+
* swipe has none; a swipe's `danger` / `warning` / `info` tone carries over, any
|
|
30
31
|
* other reads `muted`. `options.omit` leaves an action out, `options.commit` gives it a
|
|
31
32
|
* `CommitScope` (see {@link DataTableDesktopSwipeActions}). A `null` plan is `[]`.
|
|
32
33
|
*
|
|
@@ -38,6 +38,10 @@ function swipePlanRowActions(plan, row, options = {}) {
|
|
|
38
38
|
icon: isValidElement(action.icon) ? action.icon : action.icon != null && action.icon !== false ? /* @__PURE__ */ jsx(Fragment, { children: action.icon }) : void 0,
|
|
39
39
|
tone: swipeTone(action),
|
|
40
40
|
commit,
|
|
41
|
+
// A swipe commits without the kit asking (the plan's `onCommit` asks, as keksdose's
|
|
42
|
+
// does), so its button does not ask twice (0.49 KIT-12); a danger one still sits in
|
|
43
|
+
// the row's menu.
|
|
44
|
+
confirm: false,
|
|
41
45
|
onSelect: action.onCommit
|
|
42
46
|
});
|
|
43
47
|
}
|
|
@@ -65,6 +69,9 @@ function toRowAction(a, row) {
|
|
|
65
69
|
icon: isValidElement(a.icon) ? a.icon : a.icon != null && a.icon !== false ? /* @__PURE__ */ jsx(Fragment, { children: a.icon }) : void 0,
|
|
66
70
|
tone: a.tone,
|
|
67
71
|
disabledReason: a.action.disabledReason?.(row),
|
|
72
|
+
// The table's own `confirm` asks in `runRowAction`; RowActions' default question
|
|
73
|
+
// (0.49 KIT-12) is for a delete that brought none.
|
|
74
|
+
confirm: a.action.confirm ? false : void 0,
|
|
68
75
|
onSelect: () => void runRowAction(a.action, row)
|
|
69
76
|
};
|
|
70
77
|
}
|
|
@@ -159,7 +166,7 @@ function useRowActionColumn({
|
|
|
159
166
|
() => swipeColumn ? [...actionColumns, swipeColumn] : actionColumns,
|
|
160
167
|
[actionColumns, swipeColumn]
|
|
161
168
|
);
|
|
162
|
-
const swipesFromActions = (row) => {
|
|
169
|
+
const swipesFromActions = useCallback((row) => {
|
|
163
170
|
const swipes = rowActionsFor(row).filter((a) => a.swipe && !a.action.disabledReason?.(row));
|
|
164
171
|
if (!swipes.length) return null;
|
|
165
172
|
const toSwipe = (a) => ({
|
|
@@ -174,7 +181,7 @@ function useRowActionColumn({
|
|
|
174
181
|
start: swipes.filter((a) => a.swipe === "start").map(toSwipe),
|
|
175
182
|
end: swipes.filter((a) => a.swipe === "end").map(toSwipe)
|
|
176
183
|
};
|
|
177
|
-
};
|
|
184
|
+
}, [rowActionsFor]);
|
|
178
185
|
return { columns, swipesFromActions };
|
|
179
186
|
}
|
|
180
187
|
export {
|
|
@@ -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, type RowActionTone } from \"./row-actions\";\nimport type { SwipeAction } from \"./swipeable-row\";\nimport type { DataTableLabels } from \"./data-table-labels\";\nimport type {\n DataTableColumn,\n DataTableDensity,\n DataTableDesktopSwipeActions,\n DataTableProps,\n DataTableRowAction,\n MobileSwipeActions,\n} from \"./data-table\";\n\n// DataTable's per-row actions (`rowActions`): the actions column on a wide screen and\n// the swipes on a phone card. Moved out of data-table.tsx whole (refactor audit\n// 2026-10, MOD-3 step 1); internal — the public types stay in data-table.tsx.\n\n/** The actions column's key. Not a column a caller declares, so it is kept out of the\n * column-settings panel. */\nexport const ROW_ACTIONS_KEY = \"__rowActions\";\n\n/** The key of the column derived from `mobileSwipeActions` (0.46, dev#598) — the\n * table's own too. */\nexport const SWIPE_ACTIONS_KEY = \"__swipeActions\";\n\n/** A column the TABLE adds, not the caller: out of the column settings and the count,\n * never resized, never the totals row's header. */\nexport function isTableOwnColumn(key: string): boolean {\n return key === ROW_ACTIONS_KEY || key === SWIPE_ACTIONS_KEY;\n}\n\n/**\n * An actions column's heading (0.46.1, keksdose dev#598 rework — Marcel: a VISIBLE\n * \"Actions\" heading on every table with an actions column): the caller's node, else the\n * word on screen; `false` is the pre-0.46.1 heading, a screen reader's name only.\n */\nexport function actionsHeading(header: ReactNode | false | undefined, word: string): ReactNode {\n if (header === false) return <span className=\"sr-only\">{word}</span>;\n return header ?? word;\n}\n\n/** A curtain's tone, as an icon button's (keksdose's `toneOf`): only the tones that MEAN\n * something on a quiet icon carry over; a status colour, a hue or an app's `paint` stays\n * on the curtain and reads muted. */\nfunction swipeTone(action: SwipeAction): RowActionTone {\n switch (action.tone) {\n case \"danger\":\n case \"warning\":\n case \"info\":\n return action.tone;\n default:\n return \"muted\";\n }\n}\n\n/**\n * A row's swipe plan as desktop row actions (dev#598) — what DataTable's\n * `desktopSwipeActions` column draws, for an app that builds its own actions column (or\n * a `RowActions` outside a table) from the same `mobileSwipeActions` plan, so the two\n * cannot drift (public since 0.46.1, keksdose N3).\n *\n * `end` then `start` — the physical `right` / `left` only where the logical side is\n * missing, as the card reads them — each action once, told apart by its `id`, else by its\n * label (two stages with one label would be one button twice). Each button runs the\n * swipe's own `onCommit`; a swipe's `danger` / `warning` / `info` tone carries over, any\n * other reads `muted`. `options.omit` leaves an action out, `options.commit` gives it a\n * `CommitScope` (see {@link DataTableDesktopSwipeActions}). A `null` plan is `[]`.\n *\n * <RowActions actions={swipePlanRowActions(plan(row), row, { omit })} name={row.title} />\n */\nexport function swipePlanRowActions<T>(\n plan: MobileSwipeActions | null | undefined,\n row: T,\n options: Pick<DataTableDesktopSwipeActions<T>, \"omit\" | \"commit\"> = {},\n): RowAction[] {\n if (!plan) return [];\n const out: RowAction[] = [];\n const seen = new Set<string>();\n for (const action of [...(plan.end ?? plan.right ?? []), ...(plan.start ?? plan.left ?? [])]) {\n const key = action.id ?? action.label;\n if (seen.has(key)) continue;\n seen.add(key);\n if (options.omit?.(action, row)) continue;\n const commit = typeof options.commit === \"function\" ? options.commit(action, row) : options.commit;\n out.push({\n key,\n label: action.label,\n icon: isValidElement(action.icon)\n ? action.icon\n : action.icon != null && action.icon !== false\n ? <>{action.icon}</>\n : undefined,\n tone: swipeTone(action),\n commit,\n onSelect: action.onCommit,\n });\n }\n return out;\n}\n\ninterface ResolvedRowAction<T> {\n key: string;\n label: string;\n icon: ReactNode;\n tone: \"default\" | \"danger\";\n swipe: \"start\" | \"end\" | false;\n action: DataTableRowAction<T>;\n}\n\nfunction resolveRowAction<T>(\n action: DataTableRowAction<T>,\n index: number,\n labels: DataTableLabels,\n): ResolvedRowAction<T> {\n const tone = action.tone ?? (action.kind === \"delete\" ? \"danger\" : \"default\");\n return {\n key: action.kind ?? `${index}:${action.label ?? \"\"}`,\n label: action.label ?? (action.kind === \"edit\" ? labels.edit : action.kind === \"delete\" ? labels.delete : \"\"),\n icon:\n action.icon ??\n (action.kind === \"edit\" ? <Pencil /> : action.kind === \"delete\" ? <Trash2 /> : null),\n tone,\n swipe: action.swipe ?? (tone === \"danger\" ? \"start\" : \"end\"),\n action,\n };\n}\n\n/** Ask, then act. */\nasync function runRowAction<T>(action: DataTableRowAction<T>, row: T): Promise<void> {\n if (action.confirm && !(await action.confirm(row))) return;\n action.onAction(row);\n}\n\n/** A resolved row action as {@link RowActions} takes it. Its `icon` is any node; a\n * non-element one (a string glyph) is wrapped, since RowAction wants an element. */\nfunction toRowAction<T>(a: ResolvedRowAction<T>, row: T): RowAction {\n return {\n key: a.key,\n label: a.label,\n icon: isValidElement(a.icon) ? a.icon : a.icon != null && a.icon !== false ? <>{a.icon}</> : undefined,\n tone: a.tone,\n disabledReason: a.action.disabledReason?.(row),\n onSelect: () => void runRowAction(a.action, row),\n };\n}\n\n/**\n * The caller's columns with the actions column appended, and the same actions as a\n * phone card's swipes (`swipesFromActions`; DataTable uses it unless the caller passes\n * `mobileSwipeActions`). Without `rowActions` the columns come back as given.\n *\n * The actions column is appended to the caller's columns rather than drawn as a\n * second special case beside the selection column: it then gets the cell padding,\n * the widths and the phone rules (`mobileHidden`) every other column gets.\n */\nexport function useRowActionColumn<T>({\n columns: columnsProp,\n rowActions,\n rowActionsHeader,\n rowName,\n labels,\n density,\n mobileSwipeActions,\n desktopSwipeActions,\n}: {\n columns: DataTableColumn<T>[];\n rowActions: DataTableProps<T>[\"rowActions\"];\n rowActionsHeader?: DataTableProps<T>[\"rowActionsHeader\"];\n rowName: DataTableProps<T>[\"rowName\"];\n labels: DataTableLabels;\n density: DataTableDensity;\n mobileSwipeActions?: DataTableProps<T>[\"mobileSwipeActions\"];\n desktopSwipeActions?: DataTableProps<T>[\"desktopSwipeActions\"];\n}): {\n columns: DataTableColumn<T>[];\n swipesFromActions: (row: T) => MobileSwipeActions | null;\n} {\n const rowActionsFor = useCallback(\n (row: T): ResolvedRowAction<T>[] =>\n rowActions\n ? (typeof rowActions === \"function\" ? rowActions(row) : rowActions)\n .filter((a) => !a.hidden?.(row))\n .map((a, i) => resolveRowAction(a, i, labels))\n : [],\n [rowActions, labels],\n );\n // dev#598: the desktop half of the caller's swipes. On by default, except beside\n // `rowActions`, whose column already is the desktop's (and whose swipes these usually\n // are). The options object is often a fresh literal per render; its parts are the deps.\n const swipeOptions = typeof desktopSwipeActions === \"object\" ? desktopSwipeActions : undefined;\n const swipeColumnOn =\n !!mobileSwipeActions && (desktopSwipeActions === undefined ? !rowActions : desktopSwipeActions !== false);\n const swipeOmit = swipeOptions?.omit;\n const swipeName = swipeOptions?.name;\n const swipeCollapse = swipeOptions?.collapse;\n const swipeCommit = swipeOptions?.commit;\n const swipeHeader = swipeOptions?.header;\n const swipeColumn = useMemo<DataTableColumn<T> | null>(\n () =>\n swipeColumnOn\n ? {\n key: SWIPE_ACTIONS_KEY,\n header: actionsHeading(swipeHeader, labels.actions),\n cell: (row) => (\n <RowActions\n actions={swipePlanRowActions(mobileSwipeActions!(row), row, { omit: swipeOmit, commit: swipeCommit })}\n name={(swipeName ?? rowName)?.(row)}\n collapse={swipeCollapse}\n size={density === \"compact\" ? \"2xs\" : \"xs\"}\n // The last column's tooltips open toward the row's start.\n tooltipSide=\"start\"\n labels={{ actions: labels.actions }}\n className=\"justify-end\"\n />\n ),\n className: \"w-px whitespace-nowrap text-end\",\n // The heading over the buttons, at the row's end (0.46.1).\n headClassName: \"w-px text-end\",\n // On a phone the same actions are the card's swipes.\n mobileHidden: true,\n noRowLink: true,\n }\n : null,\n [\n swipeColumnOn,\n mobileSwipeActions,\n swipeOmit,\n swipeCommit,\n swipeName,\n rowName,\n swipeCollapse,\n swipeHeader,\n density,\n labels.actions,\n ],\n );\n const actionColumns = useMemo<DataTableColumn<T>[]>(\n () =>\n rowActions\n ? [\n ...columnsProp,\n {\n key: ROW_ACTIONS_KEY,\n header: actionsHeading(rowActionsHeader, labels.actions),\n // Through RowActions (0.32, §10.8): the icons inline at Normal, one \"⋯\"\n // menu at Large once there are two — every label at once does not fit a\n // row. Each control stops its own click: the row's handler already skips\n // its controls, and this is for the caller who wraps the table in a\n // clickable element of their own.\n cell: (row) => (\n <RowActions\n actions={rowActionsFor(row).map((a) => toRowAction(a, row))}\n name={rowName?.(row)}\n size={density === \"compact\" ? \"2xs\" : \"xs\"}\n labels={{ actions: labels.actions }}\n className=\"justify-end\"\n />\n ),\n className: \"w-px whitespace-nowrap text-end\",\n headClassName: \"w-px text-end\",\n // On a phone the same actions are the card's swipes.\n mobileHidden: true,\n noRowLink: true,\n },\n ]\n : columnsProp,\n [columnsProp, rowActions, rowActionsHeader, rowActionsFor, rowName, labels.actions, density],\n );\n const columns = useMemo(\n () => (swipeColumn ? [...actionColumns, swipeColumn] : actionColumns),\n [actionColumns, swipeColumn],\n );\n 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":";AAuC+B,SAqDnB,UArDmB;AAvC/B,SAAS,gBAAgB,aAAa,eAAe;AAErD,SAAS,QAAQ,cAAc;AAC/B,SAAS,kBAAsD;AAkBxD,MAAM,kBAAkB;AAIxB,MAAM,oBAAoB;AAI1B,SAAS,iBAAiB,KAAsB;AACrD,SAAO,QAAQ,mBAAmB,QAAQ;AAC5C;AAOO,SAAS,eAAe,QAAuC,MAAyB;AAC7F,MAAI,WAAW,MAAO,QAAO,oBAAC,UAAK,WAAU,WAAW,gBAAK;AAC7D,SAAO,UAAU;AACnB;AAKA,SAAS,UAAU,QAAoC;AACrD,UAAQ,OAAO,MAAM;AAAA,IACnB,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAO,OAAO;AAAA,IAChB;AACE,aAAO;AAAA,EACX;AACF;AAiBO,SAAS,oBACd,MACA,KACA,UAAoE,CAAC,GACxD;AACb,MAAI,CAAC,KAAM,QAAO,CAAC;AACnB,QAAM,MAAmB,CAAC;AAC1B,QAAM,OAAO,oBAAI,IAAY;AAC7B,aAAW,UAAU,CAAC,GAAI,KAAK,OAAO,KAAK,SAAS,CAAC,GAAI,GAAI,KAAK,SAAS,KAAK,QAAQ,CAAC,CAAE,GAAG;AAC5F,UAAM,MAAM,OAAO,MAAM,OAAO;AAChC,QAAI,KAAK,IAAI,GAAG,EAAG;AACnB,SAAK,IAAI,GAAG;AACZ,QAAI,QAAQ,OAAO,QAAQ,GAAG,EAAG;AACjC,UAAM,SAAS,OAAO,QAAQ,WAAW,aAAa,QAAQ,OAAO,QAAQ,GAAG,IAAI,QAAQ;AAC5F,QAAI,KAAK;AAAA,MACP;AAAA,MACA,OAAO,OAAO;AAAA,MACd,MAAM,eAAe,OAAO,IAAI,IAC5B,OAAO,OACP,OAAO,QAAQ,QAAQ,OAAO,SAAS,QACrC,gCAAG,iBAAO,MAAK,IACf;AAAA,MACN,MAAM,UAAU,MAAM;AAAA,MACtB;AAAA,MACA,UAAU,OAAO;AAAA,IACnB,CAAC;AAAA,EACH;AACA,SAAO;AACT;AAWA,SAAS,iBACP,QACA,OACA,QACsB;AACtB,QAAM,OAAO,OAAO,SAAS,OAAO,SAAS,WAAW,WAAW;AACnE,SAAO;AAAA,IACL,KAAK,OAAO,QAAQ,GAAG,KAAK,IAAI,OAAO,SAAS,EAAE;AAAA,IAClD,OAAO,OAAO,UAAU,OAAO,SAAS,SAAS,OAAO,OAAO,OAAO,SAAS,WAAW,OAAO,SAAS;AAAA,IAC1G,MACE,OAAO,SACN,OAAO,SAAS,SAAS,oBAAC,UAAO,IAAK,OAAO,SAAS,WAAW,oBAAC,UAAO,IAAK;AAAA,IACjF;AAAA,IACA,OAAO,OAAO,UAAU,SAAS,WAAW,UAAU;AAAA,IACtD;AAAA,EACF;AACF;AAGA,eAAe,aAAgB,QAA+B,KAAuB;AACnF,MAAI,OAAO,WAAW,CAAE,MAAM,OAAO,QAAQ,GAAG,EAAI;AACpD,SAAO,SAAS,GAAG;AACrB;AAIA,SAAS,YAAe,GAAyB,KAAmB;AAClE,SAAO;AAAA,IACL,KAAK,EAAE;AAAA,IACP,OAAO,EAAE;AAAA,IACT,MAAM,eAAe,EAAE,IAAI,IAAI,EAAE,OAAO,EAAE,QAAQ,QAAQ,EAAE,SAAS,QAAQ,gCAAG,YAAE,MAAK,IAAM;AAAA,IAC7F,MAAM,EAAE;AAAA,IACR,gBAAgB,EAAE,OAAO,iBAAiB,GAAG;AAAA,IAC7C,UAAU,MAAM,KAAK,aAAa,EAAE,QAAQ,GAAG;AAAA,EACjD;AACF;AAWO,SAAS,mBAAsB;AAAA,EACpC,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAYE;AACA,QAAM,gBAAgB;AAAA,IACpB,CAAC,QACC,cACK,OAAO,eAAe,aAAa,WAAW,GAAG,IAAI,YACnD,OAAO,CAAC,MAAM,CAAC,EAAE,SAAS,GAAG,CAAC,EAC9B,IAAI,CAAC,GAAG,MAAM,iBAAiB,GAAG,GAAG,MAAM,CAAC,IAC/C,CAAC;AAAA,IACP,CAAC,YAAY,MAAM;AAAA,EACrB;AAIA,QAAM,eAAe,OAAO,wBAAwB,WAAW,sBAAsB;AACrF,QAAM,gBACJ,CAAC,CAAC,uBAAuB,wBAAwB,SAAY,CAAC,aAAa,wBAAwB;AACrG,QAAM,YAAY,cAAc;AAChC,QAAM,YAAY,cAAc;AAChC,QAAM,gBAAgB,cAAc;AACpC,QAAM,cAAc,cAAc;AAClC,QAAM,cAAc,cAAc;AAClC,QAAM,cAAc;AAAA,IAClB,MACE,gBACI;AAAA,MACE,KAAK;AAAA,MACL,QAAQ,eAAe,aAAa,OAAO,OAAO;AAAA,MAClD,MAAM,CAAC,QACL;AAAA,QAAC;AAAA;AAAA,UACC,SAAS,oBAAoB,mBAAoB,GAAG,GAAG,KAAK,EAAE,MAAM,WAAW,QAAQ,YAAY,CAAC;AAAA,UACpG,OAAO,aAAa,WAAW,GAAG;AAAA,UAClC,UAAU;AAAA,UACV,MAAM,YAAY,YAAY,QAAQ;AAAA,UAEtC,aAAY;AAAA,UACZ,QAAQ,EAAE,SAAS,OAAO,QAAQ;AAAA,UAClC,WAAU;AAAA;AAAA,MACZ;AAAA,MAEF,WAAW;AAAA;AAAA,MAEX,eAAe;AAAA;AAAA,MAEf,cAAc;AAAA,MACd,WAAW;AAAA,IACb,IACA;AAAA,IACN;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,IACT;AAAA,EACF;AACA,QAAM,gBAAgB;AAAA,IACpB,MACE,aACI;AAAA,MACE,GAAG;AAAA,MACH;AAAA,QACE,KAAK;AAAA,QACL,QAAQ,eAAe,kBAAkB,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMvD,MAAM,CAAC,QACL;AAAA,UAAC;AAAA;AAAA,YACC,SAAS,cAAc,GAAG,EAAE,IAAI,CAAC,MAAM,YAAY,GAAG,GAAG,CAAC;AAAA,YAC1D,MAAM,UAAU,GAAG;AAAA,YACnB,MAAM,YAAY,YAAY,QAAQ;AAAA,YACtC,QAAQ,EAAE,SAAS,OAAO,QAAQ;AAAA,YAClC,WAAU;AAAA;AAAA,QACZ;AAAA,QAEF,WAAW;AAAA,QACX,eAAe;AAAA;AAAA,QAEf,cAAc;AAAA,QACd,WAAW;AAAA,MACb;AAAA,IACF,IACA;AAAA,IACN,CAAC,aAAa,YAAY,kBAAkB,eAAe,SAAS,OAAO,SAAS,OAAO;AAAA,EAC7F;AACA,QAAM,UAAU;AAAA,IACd,MAAO,cAAc,CAAC,GAAG,eAAe,WAAW,IAAI;AAAA,IACvD,CAAC,eAAe,WAAW;AAAA,EAC7B;AACA,QAAM,oBAAoB,CAAC,QAAsC;AAC/D,UAAM,SAAS,cAAc,GAAG,EAAE,OAAO,CAAC,MAAM,EAAE,SAAS,CAAC,EAAE,OAAO,iBAAiB,GAAG,CAAC;AAC1F,QAAI,CAAC,OAAO,OAAQ,QAAO;AAC3B,UAAM,UAAU,CAAC,OAA0C;AAAA,MACzD,OAAO,EAAE;AAAA,MACT,MAAM,EAAE;AAAA,MACR,UAAU,MAAM,KAAK,aAAa,EAAE,QAAQ,GAAG;AAAA;AAAA;AAAA,MAG/C,MAAM,EAAE,SAAS,WAAW,WAAW;AAAA,IACzC;AACA,WAAO;AAAA,MACL,OAAO,OAAO,OAAO,CAAC,MAAM,EAAE,UAAU,OAAO,EAAE,IAAI,OAAO;AAAA,MAC5D,KAAK,OAAO,OAAO,CAAC,MAAM,EAAE,UAAU,KAAK,EAAE,IAAI,OAAO;AAAA,IAC1D;AAAA,EACF;AACA,SAAO,EAAE,SAAS,kBAAkB;AACtC;","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/**\n * An actions column's heading (0.46.1, keksdose dev#598 rework — Marcel: a VISIBLE\n * \"Actions\" heading on every table with an actions column): the caller's node, else the\n * word on screen; `false` is the pre-0.46.1 heading, a screen reader's name only.\n */\nexport function actionsHeading(header: ReactNode | false | undefined, word: string): ReactNode {\n if (header === false) return <span className=\"sr-only\">{word}</span>;\n return header ?? word;\n}\n\n/** A curtain's tone, as an icon button's (keksdose's `toneOf`): only the tones that MEAN\n * something on a quiet icon carry over; a status colour, a hue or an app's `paint` stays\n * on the curtain and reads muted. */\nfunction swipeTone(action: SwipeAction): RowActionTone {\n switch (action.tone) {\n case \"danger\":\n case \"warning\":\n case \"info\":\n return action.tone;\n default:\n return \"muted\";\n }\n}\n\n/**\n * A row's swipe plan as desktop row actions (dev#598) — what DataTable's\n * `desktopSwipeActions` column draws, for an app that builds its own actions column (or\n * a `RowActions` outside a table) from the same `mobileSwipeActions` plan, so the two\n * cannot drift (public since 0.46.1, keksdose N3).\n *\n * `end` then `start` — the physical `right` / `left` only where the logical side is\n * missing, as the card reads them — each action once, told apart by its `id`, else by its\n * label (two stages with one label would be one button twice). Each button runs the\n * swipe's own `onCommit` — with no confirmation of the kit's (`confirm: false`), as the\n * swipe has none; a swipe's `danger` / `warning` / `info` tone carries over, any\n * other reads `muted`. `options.omit` leaves an action out, `options.commit` gives it a\n * `CommitScope` (see {@link DataTableDesktopSwipeActions}). A `null` plan is `[]`.\n *\n * <RowActions actions={swipePlanRowActions(plan(row), row, { omit })} name={row.title} />\n */\nexport function swipePlanRowActions<T>(\n plan: MobileSwipeActions | null | undefined,\n row: T,\n options: Pick<DataTableDesktopSwipeActions<T>, \"omit\" | \"commit\"> = {},\n): RowAction[] {\n if (!plan) return [];\n const out: RowAction[] = [];\n const seen = new Set<string>();\n for (const action of [...(plan.end ?? plan.right ?? []), ...(plan.start ?? plan.left ?? [])]) {\n const key = action.id ?? action.label;\n if (seen.has(key)) continue;\n seen.add(key);\n if (options.omit?.(action, row)) continue;\n const commit = typeof options.commit === \"function\" ? options.commit(action, row) : options.commit;\n out.push({\n key,\n label: action.label,\n icon: isValidElement(action.icon)\n ? action.icon\n : action.icon != null && action.icon !== false\n ? <>{action.icon}</>\n : undefined,\n tone: swipeTone(action),\n commit,\n // A swipe commits without the kit asking (the plan's `onCommit` asks, as keksdose's\n // does), so its button does not ask twice (0.49 KIT-12); a danger one still sits in\n // the row's menu.\n confirm: false,\n onSelect: action.onCommit,\n });\n }\n return out;\n}\n\ninterface ResolvedRowAction<T> {\n key: string;\n label: string;\n icon: ReactNode;\n tone: \"default\" | \"danger\";\n swipe: \"start\" | \"end\" | false;\n action: DataTableRowAction<T>;\n}\n\nfunction resolveRowAction<T>(\n action: DataTableRowAction<T>,\n index: number,\n labels: DataTableLabels,\n): ResolvedRowAction<T> {\n const tone = action.tone ?? (action.kind === \"delete\" ? \"danger\" : \"default\");\n return {\n key: action.kind ?? `${index}:${action.label ?? \"\"}`,\n label: action.label ?? (action.kind === \"edit\" ? labels.edit : action.kind === \"delete\" ? labels.delete : \"\"),\n icon:\n action.icon ??\n (action.kind === \"edit\" ? <Pencil /> : action.kind === \"delete\" ? <Trash2 /> : null),\n tone,\n swipe: action.swipe ?? (tone === \"danger\" ? \"start\" : \"end\"),\n action,\n };\n}\n\n/** Ask, then act. */\nasync function runRowAction<T>(action: DataTableRowAction<T>, row: T): Promise<void> {\n if (action.confirm && !(await action.confirm(row))) return;\n action.onAction(row);\n}\n\n/** A resolved row action as {@link RowActions} takes it. Its `icon` is any node; a\n * non-element one (a string glyph) is wrapped, since RowAction wants an element. */\nfunction toRowAction<T>(a: ResolvedRowAction<T>, row: T): RowAction {\n return {\n key: a.key,\n label: a.label,\n icon: isValidElement(a.icon) ? a.icon : a.icon != null && a.icon !== false ? <>{a.icon}</> : undefined,\n tone: a.tone,\n disabledReason: a.action.disabledReason?.(row),\n // The table's own `confirm` asks in `runRowAction`; RowActions' default question\n // (0.49 KIT-12) is for a delete that brought none.\n confirm: a.action.confirm ? false : undefined,\n onSelect: () => void runRowAction(a.action, row),\n };\n}\n\n/**\n * The caller's columns with the actions column appended, and the same actions as a\n * phone card's swipes (`swipesFromActions`; DataTable uses it unless the caller passes\n * `mobileSwipeActions`). Without `rowActions` the columns come back as given.\n *\n * The actions column is appended to the caller's columns rather than drawn as a\n * second special case beside the selection column: it then gets the cell padding,\n * the widths and the phone rules (`mobileHidden`) every other column gets.\n */\nexport function useRowActionColumn<T>({\n columns: columnsProp,\n rowActions,\n rowActionsHeader,\n rowName,\n labels,\n density,\n mobileSwipeActions,\n desktopSwipeActions,\n}: {\n columns: DataTableColumn<T>[];\n rowActions: DataTableProps<T>[\"rowActions\"];\n rowActionsHeader?: DataTableProps<T>[\"rowActionsHeader\"];\n rowName: DataTableProps<T>[\"rowName\"];\n labels: DataTableLabels;\n density: DataTableDensity;\n mobileSwipeActions?: DataTableProps<T>[\"mobileSwipeActions\"];\n desktopSwipeActions?: DataTableProps<T>[\"desktopSwipeActions\"];\n}): {\n columns: DataTableColumn<T>[];\n swipesFromActions: (row: T) => MobileSwipeActions | null;\n} {\n const rowActionsFor = useCallback(\n (row: T): ResolvedRowAction<T>[] =>\n rowActions\n ? (typeof rowActions === \"function\" ? rowActions(row) : rowActions)\n .filter((a) => !a.hidden?.(row))\n .map((a, i) => resolveRowAction(a, i, labels))\n : [],\n [rowActions, labels],\n );\n // dev#598: the desktop half of the caller's swipes. On by default, except beside\n // `rowActions`, whose column already is the desktop's (and whose swipes these usually\n // are). The options object is often a fresh literal per render; its parts are the deps.\n const swipeOptions = typeof desktopSwipeActions === \"object\" ? desktopSwipeActions : undefined;\n const swipeColumnOn =\n !!mobileSwipeActions && (desktopSwipeActions === undefined ? !rowActions : desktopSwipeActions !== false);\n const swipeOmit = swipeOptions?.omit;\n const swipeName = swipeOptions?.name;\n const swipeCollapse = swipeOptions?.collapse;\n const swipeCommit = swipeOptions?.commit;\n const swipeHeader = swipeOptions?.header;\n const swipeColumn = useMemo<DataTableColumn<T> | null>(\n () =>\n swipeColumnOn\n ? {\n key: SWIPE_ACTIONS_KEY,\n header: actionsHeading(swipeHeader, labels.actions),\n cell: (row) => (\n <RowActions\n actions={swipePlanRowActions(mobileSwipeActions!(row), row, { omit: swipeOmit, commit: swipeCommit })}\n name={(swipeName ?? rowName)?.(row)}\n collapse={swipeCollapse}\n size={density === \"compact\" ? \"2xs\" : \"xs\"}\n // The last column's tooltips open toward the row's start.\n tooltipSide=\"start\"\n labels={{ actions: labels.actions }}\n className=\"justify-end\"\n />\n ),\n className: \"w-px whitespace-nowrap text-end\",\n // The heading over the buttons, at the row's end (0.46.1).\n headClassName: \"w-px text-end\",\n // On a phone the same actions are the card's swipes.\n mobileHidden: true,\n noRowLink: true,\n }\n : null,\n [\n swipeColumnOn,\n mobileSwipeActions,\n swipeOmit,\n swipeCommit,\n swipeName,\n rowName,\n swipeCollapse,\n swipeHeader,\n density,\n labels.actions,\n ],\n );\n const actionColumns = useMemo<DataTableColumn<T>[]>(\n () =>\n rowActions\n ? [\n ...columnsProp,\n {\n key: ROW_ACTIONS_KEY,\n header: actionsHeading(rowActionsHeader, labels.actions),\n // Through RowActions (0.32, §10.8): the icons inline at Normal, one \"⋯\"\n // menu at Large once there are two — every label at once does not fit a\n // row. Each control stops its own click: the row's handler already skips\n // its controls, and this is for the caller who wraps the table in a\n // clickable element of their own.\n cell: (row) => (\n <RowActions\n actions={rowActionsFor(row).map((a) => toRowAction(a, row))}\n name={rowName?.(row)}\n size={density === \"compact\" ? \"2xs\" : \"xs\"}\n labels={{ actions: labels.actions }}\n className=\"justify-end\"\n />\n ),\n className: \"w-px whitespace-nowrap text-end\",\n headClassName: \"w-px text-end\",\n // On a phone the same actions are the card's swipes.\n mobileHidden: true,\n noRowLink: true,\n },\n ]\n : columnsProp,\n [columnsProp, rowActions, rowActionsHeader, rowActionsFor, rowName, labels.actions, density],\n );\n const columns = useMemo(\n () => (swipeColumn ? [...actionColumns, swipeColumn] : actionColumns),\n [actionColumns, swipeColumn],\n );\n // A stable function (0.48.2): the phone cards compare it by identity.\n const swipesFromActions = useCallback((row: T): MobileSwipeActions | null => {\n const swipes = rowActionsFor(row).filter((a) => a.swipe && !a.action.disabledReason?.(row));\n if (!swipes.length) return null;\n const toSwipe = (a: ResolvedRowAction<T>): SwipeAction => ({\n label: a.label,\n icon: a.icon,\n onCommit: () => void runRowAction(a.action, row),\n // The row action's tone, painted by SwipeableRow: its soft wash idle, its fill\n // and that fill's foreground armed (0.33).\n tone: a.tone === \"danger\" ? \"danger\" : \"brand\",\n });\n return {\n start: swipes.filter((a) => a.swipe === \"start\").map(toSwipe),\n end: swipes.filter((a) => a.swipe === \"end\").map(toSwipe),\n };\n }, [rowActionsFor]);\n return { columns, swipesFromActions };\n}\n"],"mappings":"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","names":[]}
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import type { ReactNode, RefObject } from "react";
|
|
2
|
+
import { type MobileRowProps } from "./data-table-mobile.js";
|
|
3
|
+
import type { DataTableColumn, MobileSwipeActions } from "./data-table.js";
|
|
4
|
+
/** What a row's handlers read at event time — DataTable's latest props and helpers. */
|
|
5
|
+
export interface DataTableRowCtx<T> {
|
|
6
|
+
onRowClick: ((row: T) => void) | undefined;
|
|
7
|
+
onToggle: ((row: T, checked: boolean) => void) | undefined;
|
|
8
|
+
isSelected: (row: T) => boolean;
|
|
9
|
+
canSelect: (row: T) => boolean;
|
|
10
|
+
selectRange: (toIndex: number) => boolean;
|
|
11
|
+
/** Anchor the next Shift+click range on this row's key. */
|
|
12
|
+
setAnchor: (key: string | number) => void;
|
|
13
|
+
/** Remember the checkbox click that drew a range… */
|
|
14
|
+
markRangeClick: (e: Event) => void;
|
|
15
|
+
/** …and drop that click's own change event (true once for it). */
|
|
16
|
+
takeRangeClick: (e: Event) => boolean;
|
|
17
|
+
setFocusRowKey: (key: string | number) => void;
|
|
18
|
+
/** The phone card's long press: enter selection mode with this row selected. */
|
|
19
|
+
onLongPress: (row: T) => void;
|
|
20
|
+
/** Under `virtualize` (0.48.2): Arrow/Home/End over every row, rendered or not. True
|
|
21
|
+
* when the key was one of them. Without it the roving walks the rendered rows. */
|
|
22
|
+
moveFocus?: (fromIndex: number, key: string) => boolean;
|
|
23
|
+
}
|
|
24
|
+
export interface DataTableRowProps<T> {
|
|
25
|
+
row: T;
|
|
26
|
+
rowIndex: number;
|
|
27
|
+
rowKey: string | number;
|
|
28
|
+
ctx: RefObject<DataTableRowCtx<T>>;
|
|
29
|
+
columns: DataTableColumn<T>[];
|
|
30
|
+
widths: Record<string, number>;
|
|
31
|
+
growDrawn: boolean;
|
|
32
|
+
linkColumn: DataTableColumn<T> | undefined;
|
|
33
|
+
href: string | undefined;
|
|
34
|
+
/** The selection column is drawn (DataTable's `selection`). */
|
|
35
|
+
selectionColumn: boolean;
|
|
36
|
+
selectable: boolean;
|
|
37
|
+
selected: boolean;
|
|
38
|
+
expanded: boolean;
|
|
39
|
+
/** The open row's detail; `null` on a closed row. */
|
|
40
|
+
expansion: ReactNode;
|
|
41
|
+
/** The row carries the visually hidden disclosure button (focusable rows that expand). */
|
|
42
|
+
disclosure: boolean;
|
|
43
|
+
detailId: string;
|
|
44
|
+
rowsFocusable: boolean;
|
|
45
|
+
rowInteractive: boolean;
|
|
46
|
+
tabbable: boolean;
|
|
47
|
+
className: string | undefined;
|
|
48
|
+
attrs: Record<string, string | undefined> | undefined;
|
|
49
|
+
compact: boolean;
|
|
50
|
+
totalColSpan: number;
|
|
51
|
+
rowDetailsLabel: string;
|
|
52
|
+
selectRowLabel: string;
|
|
53
|
+
/** Under `virtualize` (0.48.2): the row's `aria-rowindex` (its open detail row is the
|
|
54
|
+
* next), and the row is marked with its index for the window's measuring. */
|
|
55
|
+
ariaRowIndex?: number;
|
|
56
|
+
}
|
|
57
|
+
/** One desktop row (its `<tr>` and, while open, its detail row), memoised — see the
|
|
58
|
+
* file's note for what it compares. */
|
|
59
|
+
export declare const DataTableRow: <T>(props: DataTableRowProps<T> & {
|
|
60
|
+
key?: string | number;
|
|
61
|
+
}) => ReactNode;
|
|
62
|
+
export interface DataTableMobileRowProps<T> extends Pick<MobileRowProps<T>, "row" | "opensRow" | "mobileDir" | "mobileCardLinkable" | "mobileCard" | "mobilePrimaryCol" | "mobileStatusColumns" | "mobileSecondaryColumns" | "mobileActionColumns" | "mobileExpandAsDialog" | "compact" | "large"> {
|
|
63
|
+
ctx: RefObject<DataTableRowCtx<T>>;
|
|
64
|
+
rowKey: string | number;
|
|
65
|
+
expanded: boolean;
|
|
66
|
+
/** The opened row's content (`openedRowContent`); `null` on a closed card. */
|
|
67
|
+
expansion: ReactNode;
|
|
68
|
+
className: string | undefined;
|
|
69
|
+
attrs: Record<string, string | undefined> | undefined;
|
|
70
|
+
/** The table has `onRowClick`. */
|
|
71
|
+
interactive: boolean;
|
|
72
|
+
href: string | undefined;
|
|
73
|
+
/** `mobileSwipeActions`, or the swipes derived from `rowActions` — by identity. */
|
|
74
|
+
swipeActionsFor: ((row: T) => MobileSwipeActions | null) | undefined;
|
|
75
|
+
/** The table has `selection`. */
|
|
76
|
+
selectionOn: boolean;
|
|
77
|
+
selectActive: boolean;
|
|
78
|
+
selectable: boolean;
|
|
79
|
+
selected: boolean;
|
|
80
|
+
}
|
|
81
|
+
/** One phone card, memoised like {@link DataTableRow}. */
|
|
82
|
+
export declare const DataTableMobileRow: <T>(props: DataTableMobileRowProps<T> & {
|
|
83
|
+
key?: string | number;
|
|
84
|
+
}) => ReactNode;
|