basalt-ui 1.31.0 → 1.32.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/CHANGELOG.md +23 -0
- package/MIGRATING.md +101 -17
- package/agent/rules/basalt-mantine.md +4 -4
- package/configs/oxlint-plugin.js +159 -42
- package/configs/oxlint-plugin.test.ts +182 -0
- package/dist/charts/kinds/BandStrip.d.ts.map +1 -1
- package/dist/charts/kinds/BandStrip.js +18 -66
- package/dist/charts/kinds/DualPanel.d.ts.map +1 -1
- package/dist/charts/kinds/DualPanel.js +5 -26
- package/dist/charts/kinds/MirroredBars.d.ts.map +1 -1
- package/dist/charts/kinds/MirroredBars.js +10 -68
- package/dist/charts/kinds/band-chrome.d.ts +31 -0
- package/dist/charts/kinds/band-chrome.d.ts.map +1 -0
- package/dist/charts/kinds/band-chrome.js +71 -0
- package/dist/charts/primitives/CartesianChart.d.ts.map +1 -1
- package/dist/charts/primitives/CartesianChart.js +49 -76
- package/dist/charts/primitives/ChartCard.d.ts.map +1 -1
- package/dist/charts/primitives/ChartCard.js +5 -23
- package/dist/charts/primitives/ChartFrame.d.ts.map +1 -1
- package/dist/charts/primitives/ChartFrame.js +23 -40
- package/dist/charts/primitives/ChartLegend.d.ts.map +1 -1
- package/dist/charts/primitives/ChartLegend.js +5 -133
- package/dist/charts/primitives/ChartTooltip.d.ts +5 -0
- package/dist/charts/primitives/ChartTooltip.d.ts.map +1 -1
- package/dist/charts/primitives/ChartTooltip.js +16 -1
- package/dist/charts/primitives/HoverOverlay.d.ts +24 -9
- package/dist/charts/primitives/HoverOverlay.d.ts.map +1 -1
- package/dist/charts/primitives/HoverOverlay.js +17 -1
- package/dist/charts/primitives/chart-card-context.d.ts +17 -13
- package/dist/charts/primitives/chart-card-context.d.ts.map +1 -1
- package/dist/charts/primitives/chart-card-context.js +10 -5
- package/dist/charts/primitives/chart-frame-layout.d.ts.map +1 -1
- package/dist/charts/primitives/chart-frame-layout.js +25 -31
- package/dist/charts/primitives/legend-disclosure.d.ts +27 -0
- package/dist/charts/primitives/legend-disclosure.d.ts.map +1 -0
- package/dist/charts/primitives/legend-disclosure.js +153 -0
- package/dist/controls/controls.module.css +5 -0
- package/dist/controls/sync-button.module.css +1 -0
- package/dist/dashboard/stat-group.module.css +19 -64
- package/dist/dashboard/widget-grid.module.css +11 -38
- package/dist/data/data-table-state.d.ts +83 -0
- package/dist/data/data-table-state.d.ts.map +1 -0
- package/dist/data/data-table-state.js +139 -0
- package/dist/data/data-table.d.ts +33 -2
- package/dist/data/data-table.d.ts.map +1 -1
- package/dist/data/data-table.js +179 -277
- package/dist/forms/form-layout.module.css +3 -13
- package/dist/guard/index.d.ts.map +1 -1
- package/dist/guard/index.js +6 -5
- package/dist/notifications/center.d.ts.map +1 -1
- package/dist/provider/index.d.ts.map +1 -1
- package/dist/provider/index.js +12 -10
- package/dist/shell/aside-docking.d.ts +31 -0
- package/dist/shell/aside-docking.d.ts.map +1 -0
- package/dist/shell/aside-docking.js +19 -0
- package/dist/shell/index.d.ts +0 -11
- package/dist/shell/index.d.ts.map +1 -1
- package/dist/shell/index.js +13 -14
- package/dist/shell/use-breakpoint.d.ts +1 -1
- package/dist/theme/floating.module.css +1 -0
- package/dist/theme-lab/derive-controls.d.ts.map +1 -1
- package/llms.txt +2 -2
- package/package.json +2 -1
- package/src/charts/kinds/BandStrip.tsx +18 -64
- package/src/charts/kinds/DualPanel.tsx +4 -24
- package/src/charts/kinds/MirroredBars.tsx +12 -66
- package/src/charts/kinds/band-chrome.tsx +91 -0
- package/src/charts/primitives/CartesianChart.tsx +79 -122
- package/src/charts/primitives/ChartCard.tsx +5 -27
- package/src/charts/primitives/ChartFrame.tsx +37 -76
- package/src/charts/primitives/ChartLegend.tsx +7 -154
- package/src/charts/primitives/ChartTooltip.tsx +16 -0
- package/src/charts/primitives/HoverOverlay.tsx +52 -21
- package/src/charts/primitives/chart-card-context.ts +25 -16
- package/src/charts/primitives/chart-frame-layout.ts +44 -56
- package/src/charts/primitives/legend-disclosure.tsx +177 -0
- package/src/controls/controls.module.css +5 -0
- package/src/controls/sync-button.module.css +1 -0
- package/src/dashboard/stat-group.module.css +19 -64
- package/src/dashboard/widget-grid.module.css +11 -38
- package/src/data/data-table-state.ts +218 -0
- package/src/data/data-table.tsx +127 -218
- package/src/forms/form-layout.module.css +3 -13
- package/src/guard/index.ts +21 -16
- package/src/notifications/center.tsx +3 -0
- package/src/provider/index.tsx +18 -17
- package/src/shell/aside-docking.ts +54 -0
- package/src/shell/index.tsx +15 -37
- package/src/shell/use-breakpoint.ts +2 -2
- package/src/theme/floating.module.css +1 -0
- package/src/theme-lab/derive-controls.tsx +2 -0
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `BasaltDataTable`'s state hooks — the table's own interactive state, the fold row disclosure, the
|
|
3
|
+
* card projection and the row/card activation props. Internal to `./data/table`; nothing here is on a
|
|
4
|
+
* published subpath.
|
|
5
|
+
*/
|
|
6
|
+
import type { ColumnFiltersState, ColumnPinningState, PaginationState, RowSelectionState, SortingState, Updater } from '@tanstack/react-table';
|
|
7
|
+
import type { KeyboardEvent as ReactKeyboardEvent, RefObject } from 'react';
|
|
8
|
+
export declare const EMPTY_FOLD_SET: ReadonlySet<string>;
|
|
9
|
+
/**
|
|
10
|
+
* Which rows have their fold disclosure open. `row.id` defaults to the row's index in `data` (no
|
|
11
|
+
* `getRowId`) — stable across a client-side sort/filter/pagination, which reorder or subset the SAME
|
|
12
|
+
* core rows. PRUNED rather than cleared on every `data` change: a non-memoized `data` prop (an inline
|
|
13
|
+
* `.map()`, an unstable query result) hands a brand-new array of the SAME rows on every parent
|
|
14
|
+
* re-render, and clearing on that reference alone collapsed every open disclosure the instant
|
|
15
|
+
* anything upstream re-rendered.
|
|
16
|
+
*
|
|
17
|
+
* Pruning by ID ALONE is only safe with `getRowId` — a caller-declared identity that genuinely
|
|
18
|
+
* survives a page turn or a refetch, so an id no longer present (a manual-pagination page turn, a
|
|
19
|
+
* delete) still has to go, or a differently-shaped record seated at a reused id would silently read
|
|
20
|
+
* as pre-expanded. Without `getRowId` the id IS the array index, and an index survives a refetch
|
|
21
|
+
* trivially — it is still "0", "1", … even when every object behind it is a different record.
|
|
22
|
+
* Keeping an expanded index across THAT would silently attach the old disclosure to a stranger's
|
|
23
|
+
* row. So the index-id lane keeps a `prevData` snapshot and asks the narrower, correct question: is
|
|
24
|
+
* the object AT this index still the same reference as last time? A non-memoized array of the SAME
|
|
25
|
+
* rows answers yes at every index (the case above); a page turn or a refetch answers no.
|
|
26
|
+
*/
|
|
27
|
+
export declare function useRowDisclosure<T>({ data, getRowId, }: {
|
|
28
|
+
data: readonly T[];
|
|
29
|
+
getRowId: ((row: T, index: number) => string) | undefined;
|
|
30
|
+
}): {
|
|
31
|
+
expanded: ReadonlySet<string>;
|
|
32
|
+
toggle: (rowId: string) => void;
|
|
33
|
+
};
|
|
34
|
+
/** The `BasaltDataTableProps` fields `useDataTableState` reads — declared here rather than picked
|
|
35
|
+
* off the props type, so the hook owns its contract and this module never imports the component. */
|
|
36
|
+
export type DataTableStateProps = {
|
|
37
|
+
initialSorting?: SortingState | undefined;
|
|
38
|
+
onSortingChange?: ((sorting: SortingState) => void) | undefined;
|
|
39
|
+
initialGlobalFilter?: string | undefined;
|
|
40
|
+
onGlobalFilterChange?: ((value: string) => void) | undefined;
|
|
41
|
+
onColumnFiltersChange?: ((filters: ColumnFiltersState) => void) | undefined;
|
|
42
|
+
initialPagination?: PaginationState | undefined;
|
|
43
|
+
onPaginationChange?: ((pagination: PaginationState) => void) | undefined;
|
|
44
|
+
initialColumnPinning?: ColumnPinningState | undefined;
|
|
45
|
+
rowSelection?: RowSelectionState | undefined;
|
|
46
|
+
onRowSelectionChange?: ((selection: RowSelectionState) => void) | undefined;
|
|
47
|
+
};
|
|
48
|
+
/** The table's own interactive state and the TanStack `on*Change` handlers that write it — every
|
|
49
|
+
* piece uncontrolled with an optional change callback, except row selection, which is controlled
|
|
50
|
+
* whenever `rowSelection` is passed. */
|
|
51
|
+
export declare function useDataTableState(props: DataTableStateProps, defaultPageSize: number): {
|
|
52
|
+
sorting: SortingState;
|
|
53
|
+
onSortingChange: (updater: Updater<SortingState>) => void;
|
|
54
|
+
globalFilter: string;
|
|
55
|
+
onGlobalFilterChange: (updater: Updater<string>) => void;
|
|
56
|
+
columnFilters: ColumnFiltersState;
|
|
57
|
+
onColumnFiltersChange: (updater: Updater<ColumnFiltersState>) => void;
|
|
58
|
+
pagination: PaginationState;
|
|
59
|
+
onPaginationChange: (updater: Updater<PaginationState>) => void;
|
|
60
|
+
columnPinning: ColumnPinningState;
|
|
61
|
+
onColumnPinningChange: import("react").Dispatch<import("react").SetStateAction<ColumnPinningState>>;
|
|
62
|
+
rowSelection: RowSelectionState;
|
|
63
|
+
onRowSelectionChange: (updater: Updater<RowSelectionState>) => void;
|
|
64
|
+
};
|
|
65
|
+
/** Whether the table renders as `renderCard` projections: its own root measured below the `regular`
|
|
66
|
+
* container class. A zero width is an un-laid-out ancestor, not a narrow table, so it moves nothing
|
|
67
|
+
* — the default (and the SSR answer) is the table. The root's width never depends on which body it
|
|
68
|
+
* holds, so the swap cannot oscillate. */
|
|
69
|
+
export declare function useCardProjection(enabled: boolean): {
|
|
70
|
+
rootRef: RefObject<HTMLDivElement | null>;
|
|
71
|
+
cards: boolean;
|
|
72
|
+
};
|
|
73
|
+
/** Click + Enter activation, shared by a row and its card. Enter only: Space is the browser's own
|
|
74
|
+
* page-scroll on a focused non-button, and stealing it from a keyboard reader moving down a long
|
|
75
|
+
* table costs more than the second activation key buys. */
|
|
76
|
+
export declare function activationProps<T>(onRowActivate: ((row: T) => void) | undefined, row: T): {
|
|
77
|
+
className: string;
|
|
78
|
+
'data-activatable': boolean;
|
|
79
|
+
tabIndex: number;
|
|
80
|
+
onClick: () => void;
|
|
81
|
+
onKeyDown: (event: ReactKeyboardEvent<HTMLElement>) => void;
|
|
82
|
+
} | undefined;
|
|
83
|
+
//# sourceMappingURL=data-table-state.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"data-table-state.d.ts","sourceRoot":"","sources":["../../src/data/data-table-state.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,EACV,kBAAkB,EAClB,kBAAkB,EAClB,eAAe,EACf,iBAAiB,EACjB,YAAY,EACZ,OAAO,EACR,MAAM,uBAAuB,CAAA;AAE9B,OAAO,KAAK,EAAE,aAAa,IAAI,kBAAkB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAM3E,eAAO,MAAM,cAAc,EAAE,WAAW,CAAC,MAAM,CAAa,CAAA;AAE5D;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,EAClC,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,SAAS,CAAC,EAAE,CAAA;IAClB,QAAQ,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,SAAS,CAAA;CAC1D,GAAG;IAAE,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAAC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAAE,CA2BrE;AAuBD;oGACoG;AACpG,MAAM,MAAM,mBAAmB,GAAG;IAChC,cAAc,CAAC,EAAE,YAAY,GAAG,SAAS,CAAA;IACzC,eAAe,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;IAC/D,mBAAmB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACxC,oBAAoB,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;IAC5D,qBAAqB,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,kBAAkB,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;IAC3E,iBAAiB,CAAC,EAAE,eAAe,GAAG,SAAS,CAAA;IAC/C,kBAAkB,CAAC,EAAE,CAAC,CAAC,UAAU,EAAE,eAAe,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;IACxE,oBAAoB,CAAC,EAAE,kBAAkB,GAAG,SAAS,CAAA;IACrD,YAAY,CAAC,EAAE,iBAAiB,GAAG,SAAS,CAAA;IAC5C,oBAAoB,CAAC,EAAE,CAAC,CAAC,SAAS,EAAE,iBAAiB,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;CAC5E,CAAA;AAED;;wCAEwC;AACxC,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM;;yDAjCrD,IAAI;;wDAAJ,IAAI;;qEAAJ,IAAI;;+DAAJ,IAAI;;;;oCA2DtB,OAAO,CAAC,iBAAiB,CAAC;EAgCvC;AAED;;;0CAG0C;AAC1C,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,OAAO,GAAG;IACnD,OAAO,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IACzC,KAAK,EAAE,OAAO,CAAA;CACf,CAcA;AAED;;2DAE2D;AAC3D,wBAAgB,eAAe,CAAC,CAAC,EAAE,aAAa,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,EAAE,GAAG,EAAE,CAAC;;;;;uBAOjE,kBAAkB,CAAC,WAAW,CAAC;cAUrD"}
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
import { functionalUpdate } from "@tanstack/react-table";
|
|
2
|
+
import { useCallback, useEffect, useRef, useState } from "react";
|
|
3
|
+
import { useMeasuredWidths } from "../common/use-measured-widths.js";
|
|
4
|
+
import { CONTAINER_CLASSES } from "../tokens/size-classes.js";
|
|
5
|
+
import classes from "./data-table.module.css";
|
|
6
|
+
const EMPTY_FOLD_SET = /* @__PURE__ */ new Set();
|
|
7
|
+
function useRowDisclosure({
|
|
8
|
+
data,
|
|
9
|
+
getRowId
|
|
10
|
+
}) {
|
|
11
|
+
const [expanded, setExpanded] = useState(EMPTY_FOLD_SET);
|
|
12
|
+
const toggle = useCallback((rowId) => {
|
|
13
|
+
setExpanded((current) => {
|
|
14
|
+
const next = new Set(current);
|
|
15
|
+
if (next.has(rowId)) next.delete(rowId);
|
|
16
|
+
else next.add(rowId);
|
|
17
|
+
return next;
|
|
18
|
+
});
|
|
19
|
+
}, []);
|
|
20
|
+
const prevDataRef = useRef(data);
|
|
21
|
+
useEffect(() => {
|
|
22
|
+
const prevData = prevDataRef.current;
|
|
23
|
+
prevDataRef.current = data;
|
|
24
|
+
setExpanded((current) => {
|
|
25
|
+
if (current.size === 0) return current;
|
|
26
|
+
const liveIds = getRowId && new Set(data.map((row, index) => getRowId(row, index)));
|
|
27
|
+
const isLive = (id) => {
|
|
28
|
+
if (liveIds) return liveIds.has(id);
|
|
29
|
+
const index = Number(id);
|
|
30
|
+
return data[index] !== void 0 && data[index] === prevData[index];
|
|
31
|
+
};
|
|
32
|
+
const next = new Set([...current].filter(isLive));
|
|
33
|
+
return next.size === current.size ? current : next;
|
|
34
|
+
});
|
|
35
|
+
}, [data, getRowId]);
|
|
36
|
+
return { expanded, toggle };
|
|
37
|
+
}
|
|
38
|
+
function useReportedState(initial, onChange) {
|
|
39
|
+
const [value, setValue] = useState(initial);
|
|
40
|
+
const update = useCallback(
|
|
41
|
+
(updater) => {
|
|
42
|
+
setValue((prev) => {
|
|
43
|
+
const next = functionalUpdate(updater, prev);
|
|
44
|
+
onChange?.(next);
|
|
45
|
+
return next;
|
|
46
|
+
});
|
|
47
|
+
},
|
|
48
|
+
[onChange]
|
|
49
|
+
);
|
|
50
|
+
return [value, update];
|
|
51
|
+
}
|
|
52
|
+
function useDataTableState(props, defaultPageSize) {
|
|
53
|
+
const { rowSelection, onRowSelectionChange } = props;
|
|
54
|
+
const [sorting, onSortingChange] = useReportedState(
|
|
55
|
+
props.initialSorting ?? [],
|
|
56
|
+
props.onSortingChange
|
|
57
|
+
);
|
|
58
|
+
const [globalFilter, onGlobalFilterChange] = useReportedState(
|
|
59
|
+
props.initialGlobalFilter ?? "",
|
|
60
|
+
props.onGlobalFilterChange
|
|
61
|
+
);
|
|
62
|
+
const [columnFilters, onColumnFiltersChange] = useReportedState(
|
|
63
|
+
[],
|
|
64
|
+
props.onColumnFiltersChange
|
|
65
|
+
);
|
|
66
|
+
const [pagination, onPaginationChange] = useReportedState(
|
|
67
|
+
props.initialPagination ?? { pageIndex: 0, pageSize: defaultPageSize },
|
|
68
|
+
props.onPaginationChange
|
|
69
|
+
);
|
|
70
|
+
const [columnPinning, setColumnPinning] = useState(
|
|
71
|
+
props.initialColumnPinning ?? {}
|
|
72
|
+
);
|
|
73
|
+
const [internalRowSelection, setInternalRowSelection] = useState({});
|
|
74
|
+
const handleRowSelectionChange = useCallback(
|
|
75
|
+
(updater) => {
|
|
76
|
+
if (rowSelection !== void 0) {
|
|
77
|
+
onRowSelectionChange?.(functionalUpdate(updater, rowSelection));
|
|
78
|
+
return;
|
|
79
|
+
}
|
|
80
|
+
setInternalRowSelection((prev) => {
|
|
81
|
+
const next = functionalUpdate(updater, prev);
|
|
82
|
+
onRowSelectionChange?.(next);
|
|
83
|
+
return next;
|
|
84
|
+
});
|
|
85
|
+
},
|
|
86
|
+
[rowSelection, onRowSelectionChange]
|
|
87
|
+
);
|
|
88
|
+
return {
|
|
89
|
+
sorting,
|
|
90
|
+
onSortingChange,
|
|
91
|
+
globalFilter,
|
|
92
|
+
onGlobalFilterChange,
|
|
93
|
+
columnFilters,
|
|
94
|
+
onColumnFiltersChange,
|
|
95
|
+
pagination,
|
|
96
|
+
onPaginationChange,
|
|
97
|
+
columnPinning,
|
|
98
|
+
onColumnPinningChange: setColumnPinning,
|
|
99
|
+
rowSelection: rowSelection ?? internalRowSelection,
|
|
100
|
+
onRowSelectionChange: handleRowSelectionChange
|
|
101
|
+
};
|
|
102
|
+
}
|
|
103
|
+
function useCardProjection(enabled) {
|
|
104
|
+
const rootRef = useRef(null);
|
|
105
|
+
const [narrow, setNarrow] = useState(false);
|
|
106
|
+
useMeasuredWidths({
|
|
107
|
+
resolveRoot: () => rootRef.current,
|
|
108
|
+
signature: "",
|
|
109
|
+
enabled,
|
|
110
|
+
onMeasure: (root) => {
|
|
111
|
+
if (root.clientWidth === 0) return;
|
|
112
|
+
const next = root.clientWidth < CONTAINER_CLASSES.regular;
|
|
113
|
+
setNarrow((current) => current === next ? current : next);
|
|
114
|
+
}
|
|
115
|
+
});
|
|
116
|
+
return { rootRef, cards: enabled && narrow };
|
|
117
|
+
}
|
|
118
|
+
function activationProps(onRowActivate, row) {
|
|
119
|
+
if (onRowActivate === void 0) return void 0;
|
|
120
|
+
return {
|
|
121
|
+
className: classes.activatable,
|
|
122
|
+
"data-activatable": true,
|
|
123
|
+
tabIndex: 0,
|
|
124
|
+
onClick: () => onRowActivate(row),
|
|
125
|
+
onKeyDown: (event) => {
|
|
126
|
+
if (event.key !== "Enter") return;
|
|
127
|
+
if (event.target !== event.currentTarget) return;
|
|
128
|
+
event.preventDefault();
|
|
129
|
+
onRowActivate(row);
|
|
130
|
+
}
|
|
131
|
+
};
|
|
132
|
+
}
|
|
133
|
+
export {
|
|
134
|
+
EMPTY_FOLD_SET,
|
|
135
|
+
activationProps,
|
|
136
|
+
useCardProjection,
|
|
137
|
+
useDataTableState,
|
|
138
|
+
useRowDisclosure
|
|
139
|
+
};
|
|
@@ -84,8 +84,9 @@ export type DataTableColumnPinning<T = unknown> = {
|
|
|
84
84
|
};
|
|
85
85
|
/**
|
|
86
86
|
* The four boxes `BasaltDataTable` paints: `root` is the outer fragment's replacement wrapper,
|
|
87
|
-
* `toolbar` is the search/facets/actions row, `table` is
|
|
88
|
-
* the pagination
|
|
87
|
+
* `toolbar` is the search/facets/actions row, `table` is whichever body renders — the Mantine
|
|
88
|
+
* `Table`, or the card list's `Stack` while `renderCard` projects — and `footer` is the pagination
|
|
89
|
+
* bar.
|
|
89
90
|
*/
|
|
90
91
|
export type BasaltDataTableSlot = 'root' | 'toolbar' | 'table' | 'footer';
|
|
91
92
|
/**
|
|
@@ -276,6 +277,36 @@ export type BasaltDataTableProps<T> = BasaltProps & SlotStylesProps<BasaltDataTa
|
|
|
276
277
|
* <BasaltDataTable data={rows} columns={columns} onRowActivate={(row) => setSelected(row)} />
|
|
277
278
|
*/
|
|
278
279
|
onRowActivate?: (row: T) => void;
|
|
280
|
+
/**
|
|
281
|
+
* A compact card projection of one row, rendered INSTEAD of the table while the table's own box
|
|
282
|
+
* is narrower than the `regular` container class (`CONTAINER_CLASSES`, 480px) — keyed on the
|
|
283
|
+
* width this table actually has, never the viewport, so a table in a narrow aside or a split
|
|
284
|
+
* column swaps on a desktop too, and a full-width one does not swap early on a tablet.
|
|
285
|
+
*
|
|
286
|
+
* The cards are the SAME processed rows the table would draw — sorted, filtered and paged — so a
|
|
287
|
+
* list can never disagree with its table; a fixed card order is `initialSorting`, not a second
|
|
288
|
+
* sort. Everything around the body stays: the header (title · count · toolbar), the bulk bar,
|
|
289
|
+
* the pager, and `query` / `isLoading` / `emptyState`. `onRowActivate` makes each card
|
|
290
|
+
* activatable exactly as it does a row (click, or Enter on the focused card). The selection
|
|
291
|
+
* checkbox is not projected — a card list with a selection keeps its bulk bar but no ticks.
|
|
292
|
+
*
|
|
293
|
+
* An activatable card takes `tabIndex=0` + `data-activatable`, never `role="button"`: a card is
|
|
294
|
+
* where a row's actions and links land (argo's all do), and a `button` role makes every
|
|
295
|
+
* descendant presentational, so those nested controls would vanish from the accessibility tree.
|
|
296
|
+
* The affordance is the cursor and the focus ring, as on the row. `maxHeight` caps the card list
|
|
297
|
+
* in a `ScrollArea`; `minWidth` does not apply — it is a horizontal floor for columns, and a
|
|
298
|
+
* card list has none.
|
|
299
|
+
*
|
|
300
|
+
* Reach for it when the row carries more than the columns a phone can hold (a status + label +
|
|
301
|
+
* age header, a clamped title, a prose line). A table that only needs to shed a column or two
|
|
302
|
+
* already has that: the column fold hides the lowest-priority columns behind a per-row
|
|
303
|
+
* disclosure with no prop at all. Server render and first paint are the table.
|
|
304
|
+
*
|
|
305
|
+
* @example
|
|
306
|
+
* <BasaltDataTable data={items} columns={columns} onRowActivate={open}
|
|
307
|
+
* renderCard={(item) => <ItemCard item={item} />} />
|
|
308
|
+
*/
|
|
309
|
+
renderCard?: (row: T) => ReactNode;
|
|
279
310
|
/**
|
|
280
311
|
* Prepends a checkbox column (header = select-all on the page) and arms TanStack's row-selection
|
|
281
312
|
* feature. Selection is uncontrolled unless `rowSelection` is passed.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../src/data/data-table.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../src/data/data-table.tsx"],"names":[],"mappings":"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"}
|