@navikt/ds-react 8.10.2 → 8.10.4
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/cjs/action-menu/ActionMenu.js +1 -1
- package/cjs/action-menu/ActionMenu.js.map +1 -1
- package/cjs/data/stories/Data.test-data.d.ts +24 -0
- package/cjs/data/stories/Data.test-data.js +1616 -0
- package/cjs/data/stories/Data.test-data.js.map +1 -0
- package/cjs/data/table/column-header/DataTableColumnHeader.d.ts +4 -1
- package/cjs/data/table/column-header/DataTableColumnHeader.js +4 -2
- package/cjs/data/table/column-header/DataTableColumnHeader.js.map +1 -1
- package/cjs/data/table/column-header/useTableColumnResize.d.ts +39 -14
- package/cjs/data/table/column-header/useTableColumnResize.js +37 -39
- package/cjs/data/table/column-header/useTableColumnResize.js.map +1 -1
- package/cjs/data/table/details-panel-row/DataTableDetailsPanelRow.d.ts +6 -0
- package/cjs/data/table/details-panel-row/DataTableDetailsPanelRow.js +32 -0
- package/cjs/data/table/details-panel-row/DataTableDetailsPanelRow.js.map +1 -0
- package/cjs/data/table/helpers/collectTableRowEntries.d.ts +13 -5
- package/cjs/data/table/helpers/collectTableRowEntries.js +26 -19
- package/cjs/data/table/helpers/collectTableRowEntries.js.map +1 -1
- package/cjs/data/table/helpers/selection/SelectionSubtreeHelper.d.ts +46 -0
- package/cjs/data/table/helpers/selection/SelectionSubtreeHelper.js +112 -0
- package/cjs/data/table/helpers/selection/SelectionSubtreeHelper.js.map +1 -0
- package/cjs/data/table/helpers/selection/getMultipleSelectProps.d.ts +3 -2
- package/cjs/data/table/helpers/selection/getMultipleSelectProps.js +43 -19
- package/cjs/data/table/helpers/selection/getMultipleSelectProps.js.map +1 -1
- package/cjs/data/table/helpers/selection/selection.types.d.ts +1 -0
- package/cjs/data/table/helpers/table-keyboard.d.ts +1 -2
- package/cjs/data/table/helpers/table-keyboard.js +1 -2
- package/cjs/data/table/helpers/table-keyboard.js.map +1 -1
- package/cjs/data/table/hooks/useColumnOptions.js +18 -5
- package/cjs/data/table/hooks/useColumnOptions.js.map +1 -1
- package/cjs/data/table/hooks/useTableDetailsPanel.d.ts +62 -0
- package/cjs/data/table/hooks/{useTableExpansion.js → useTableDetailsPanel.js} +26 -19
- package/cjs/data/table/hooks/useTableDetailsPanel.js.map +1 -0
- package/cjs/data/table/hooks/useTableItems.d.ts +18 -17
- package/cjs/data/table/hooks/useTableItems.js +27 -15
- package/cjs/data/table/hooks/useTableItems.js.map +1 -1
- package/cjs/data/table/hooks/useTableSelection.d.ts +6 -3
- package/cjs/data/table/hooks/useTableSelection.js +10 -4
- package/cjs/data/table/hooks/useTableSelection.js.map +1 -1
- package/cjs/data/table/index.d.ts +1 -2
- package/cjs/data/table/index.js +22 -12
- package/cjs/data/table/index.js.map +1 -1
- package/cjs/data/table/root/DataTable.types.d.ts +12 -10
- package/cjs/data/table/root/DataTableRoot.context.d.ts +5 -1
- package/cjs/data/table/root/DataTableRoot.context.js.map +1 -1
- package/cjs/data/table/root/DataTableRoot.d.ts +79 -115
- package/cjs/data/table/root/DataTableRoot.js +167 -39
- package/cjs/data/table/root/DataTableRoot.js.map +1 -1
- package/cjs/data/table/root/DataTableRoot.legacy.d.ts +177 -0
- package/cjs/data/table/root/DataTableRoot.legacy.js +104 -0
- package/cjs/data/table/root/DataTableRoot.legacy.js.map +1 -0
- package/cjs/data/table/sub-row-toggle/DataTableSubRowToggle.d.ts +6 -0
- package/cjs/data/table/sub-row-toggle/DataTableSubRowToggle.js +21 -0
- package/cjs/data/table/sub-row-toggle/DataTableSubRowToggle.js.map +1 -0
- package/cjs/data/table/tr/DataTableTr.js +11 -11
- package/cjs/data/table/tr/DataTableTr.js.map +1 -1
- package/cjs/form/checkbox/Checkbox.js +1 -0
- package/cjs/form/checkbox/Checkbox.js.map +1 -1
- package/cjs/form/radio/Radio.js +7 -1
- package/cjs/form/radio/Radio.js.map +1 -1
- package/cjs/modal/types.d.ts +8 -4
- package/cjs/utils/components/dismissablelayer/DismissableLayer.js +1 -1
- package/cjs/utils/components/dismissablelayer/DismissableLayer.js.map +1 -1
- package/cjs/utils/components/floating/Floating.d.ts +16 -1
- package/cjs/utils/components/floating/Floating.js +50 -13
- package/cjs/utils/components/floating/Floating.js.map +1 -1
- package/cjs/utils/components/floating-menu/Menu.js +1 -1
- package/cjs/utils/components/floating-menu/Menu.js.map +1 -1
- package/cjs/utils/helpers/create-strict-context.js +1 -1
- package/cjs/utils/helpers/create-strict-context.js.map +1 -1
- package/cjs/utils/hooks/useControllableState.d.ts +5 -5
- package/cjs/utils/hooks/useControllableState.js.map +1 -1
- package/cjs/utils/hooks/useValueAsRef.js +1 -1
- package/cjs/utils/hooks/useValueAsRef.js.map +1 -1
- package/cjs/utils-external/hooks/useId.js +1 -1
- package/cjs/utils-external/hooks/useId.js.map +1 -1
- package/esm/action-menu/ActionMenu.js +1 -1
- package/esm/action-menu/ActionMenu.js.map +1 -1
- package/esm/data/stories/Data.test-data.d.ts +24 -0
- package/esm/data/stories/Data.test-data.js +1607 -0
- package/esm/data/stories/Data.test-data.js.map +1 -0
- package/esm/data/table/column-header/DataTableColumnHeader.d.ts +4 -1
- package/esm/data/table/column-header/DataTableColumnHeader.js +4 -2
- package/esm/data/table/column-header/DataTableColumnHeader.js.map +1 -1
- package/esm/data/table/column-header/useTableColumnResize.d.ts +39 -14
- package/esm/data/table/column-header/useTableColumnResize.js +38 -40
- package/esm/data/table/column-header/useTableColumnResize.js.map +1 -1
- package/esm/data/table/details-panel-row/DataTableDetailsPanelRow.d.ts +6 -0
- package/esm/data/table/details-panel-row/DataTableDetailsPanelRow.js +27 -0
- package/esm/data/table/details-panel-row/DataTableDetailsPanelRow.js.map +1 -0
- package/esm/data/table/helpers/collectTableRowEntries.d.ts +13 -5
- package/esm/data/table/helpers/collectTableRowEntries.js +26 -19
- package/esm/data/table/helpers/collectTableRowEntries.js.map +1 -1
- package/esm/data/table/helpers/selection/SelectionSubtreeHelper.d.ts +46 -0
- package/esm/data/table/helpers/selection/SelectionSubtreeHelper.js +109 -0
- package/esm/data/table/helpers/selection/SelectionSubtreeHelper.js.map +1 -0
- package/esm/data/table/helpers/selection/getMultipleSelectProps.d.ts +3 -2
- package/esm/data/table/helpers/selection/getMultipleSelectProps.js +43 -19
- package/esm/data/table/helpers/selection/getMultipleSelectProps.js.map +1 -1
- package/esm/data/table/helpers/selection/selection.types.d.ts +1 -0
- package/esm/data/table/helpers/table-keyboard.d.ts +1 -2
- package/esm/data/table/helpers/table-keyboard.js +1 -2
- package/esm/data/table/helpers/table-keyboard.js.map +1 -1
- package/esm/data/table/hooks/useColumnOptions.js +18 -5
- package/esm/data/table/hooks/useColumnOptions.js.map +1 -1
- package/esm/data/table/hooks/useTableDetailsPanel.d.ts +62 -0
- package/esm/data/table/hooks/useTableDetailsPanel.js +58 -0
- package/esm/data/table/hooks/useTableDetailsPanel.js.map +1 -0
- package/esm/data/table/hooks/useTableItems.d.ts +18 -17
- package/esm/data/table/hooks/useTableItems.js +27 -15
- package/esm/data/table/hooks/useTableItems.js.map +1 -1
- package/esm/data/table/hooks/useTableSelection.d.ts +6 -3
- package/esm/data/table/hooks/useTableSelection.js +10 -4
- package/esm/data/table/hooks/useTableSelection.js.map +1 -1
- package/esm/data/table/index.d.ts +1 -2
- package/esm/data/table/index.js +21 -1
- package/esm/data/table/index.js.map +1 -1
- package/esm/data/table/root/DataTable.types.d.ts +12 -10
- package/esm/data/table/root/DataTableRoot.context.d.ts +5 -1
- package/esm/data/table/root/DataTableRoot.context.js.map +1 -1
- package/esm/data/table/root/DataTableRoot.d.ts +79 -115
- package/esm/data/table/root/DataTableRoot.js +174 -37
- package/esm/data/table/root/DataTableRoot.js.map +1 -1
- package/esm/data/table/root/DataTableRoot.legacy.d.ts +177 -0
- package/esm/data/table/root/DataTableRoot.legacy.js +59 -0
- package/esm/data/table/root/DataTableRoot.legacy.js.map +1 -0
- package/esm/data/table/sub-row-toggle/DataTableSubRowToggle.d.ts +6 -0
- package/esm/data/table/sub-row-toggle/DataTableSubRowToggle.js +16 -0
- package/esm/data/table/sub-row-toggle/DataTableSubRowToggle.js.map +1 -0
- package/esm/data/table/tr/DataTableTr.js +11 -11
- package/esm/data/table/tr/DataTableTr.js.map +1 -1
- package/esm/form/checkbox/Checkbox.js +1 -0
- package/esm/form/checkbox/Checkbox.js.map +1 -1
- package/esm/form/radio/Radio.js +7 -1
- package/esm/form/radio/Radio.js.map +1 -1
- package/esm/modal/types.d.ts +8 -4
- package/esm/utils/components/dismissablelayer/DismissableLayer.js +1 -1
- package/esm/utils/components/dismissablelayer/DismissableLayer.js.map +1 -1
- package/esm/utils/components/floating/Floating.d.ts +16 -1
- package/esm/utils/components/floating/Floating.js +48 -13
- package/esm/utils/components/floating/Floating.js.map +1 -1
- package/esm/utils/components/floating-menu/Menu.js +2 -2
- package/esm/utils/components/floating-menu/Menu.js.map +1 -1
- package/esm/utils/helpers/create-strict-context.js +1 -1
- package/esm/utils/helpers/create-strict-context.js.map +1 -1
- package/esm/utils/hooks/useControllableState.d.ts +5 -5
- package/esm/utils/hooks/useControllableState.js.map +1 -1
- package/esm/utils/hooks/useValueAsRef.js +1 -1
- package/esm/utils/hooks/useValueAsRef.js.map +1 -1
- package/esm/utils-external/hooks/useId.js +1 -1
- package/esm/utils-external/hooks/useId.js.map +1 -1
- package/package.json +3 -3
- package/src/action-menu/ActionMenu.tsx +1 -1
- package/src/data/stories/Data.test-data.tsx +1703 -0
- package/src/data/table/column-header/DataTableColumnHeader.tsx +11 -7
- package/src/data/table/column-header/useTableColumnResize.ts +95 -54
- package/src/data/table/details-panel-row/DataTableDetailsPanelRow.tsx +53 -0
- package/src/data/table/helpers/collectTableRowEntries.ts +55 -31
- package/src/data/table/helpers/selection/SelectionSubtreeHelper.test.ts +66 -0
- package/src/data/table/helpers/selection/SelectionSubtreeHelper.ts +162 -0
- package/src/data/table/helpers/selection/getMultipleSelectProps.ts +57 -20
- package/src/data/table/helpers/selection/selection.types.ts +1 -0
- package/src/data/table/helpers/table-keyboard.ts +1 -2
- package/src/data/table/hooks/__tests__/useTableItems.test.ts +27 -6
- package/src/data/table/hooks/__tests__/useTableSelection.test.ts +182 -58
- package/src/data/table/hooks/useColumnOptions.ts +19 -5
- package/src/data/table/hooks/useTableDetailsPanel.tsx +182 -0
- package/src/data/table/hooks/useTableItems.ts +74 -60
- package/src/data/table/hooks/useTableSelection.ts +27 -12
- package/src/data/table/index.tsx +5 -3
- package/src/data/table/root/DataTable.types.ts +25 -10
- package/src/data/table/root/DataTableRoot.context.ts +5 -1
- package/src/data/table/root/DataTableRoot.legacy.tsx +297 -0
- package/src/data/table/root/DataTableRoot.tsx +483 -219
- package/src/data/table/sub-row-toggle/DataTableSubRowToggle.tsx +39 -0
- package/src/data/table/tr/DataTableTr.tsx +14 -13
- package/src/form/checkbox/Checkbox.tsx +1 -0
- package/src/form/radio/Radio.tsx +7 -1
- package/src/modal/types.ts +8 -4
- package/src/utils/components/dismissablelayer/DismissableLayer.tsx +1 -1
- package/src/utils/components/floating/Floating.tsx +56 -13
- package/src/utils/components/floating-menu/Menu.tsx +4 -1
- package/src/utils/helpers/create-strict-context.tsx +1 -1
- package/src/utils/hooks/useControllableState.ts +11 -8
- package/src/utils/hooks/useValueAsRef.ts +1 -1
- package/src/utils-external/hooks/useId.ts +1 -1
- package/cjs/data/table/hooks/useTableExpansion.d.ts +0 -29
- package/cjs/data/table/hooks/useTableExpansion.js.map +0 -1
- package/cjs/data/table/root/DataTableAuto.d.ts +0 -174
- package/cjs/data/table/root/DataTableAuto.js +0 -206
- package/cjs/data/table/root/DataTableAuto.js.map +0 -1
- package/esm/data/table/hooks/useTableExpansion.d.ts +0 -29
- package/esm/data/table/hooks/useTableExpansion.js +0 -51
- package/esm/data/table/hooks/useTableExpansion.js.map +0 -1
- package/esm/data/table/root/DataTableAuto.d.ts +0 -174
- package/esm/data/table/root/DataTableAuto.js +0 -170
- package/esm/data/table/root/DataTableAuto.js.map +0 -1
- package/src/data/table/hooks/__tests__/useTableExpansion.test.tsx +0 -115
- package/src/data/table/hooks/useTableExpansion.tsx +0 -141
- package/src/data/table/root/DataTableAuto.test.tsx +0 -118
- package/src/data/table/root/DataTableAuto.tsx +0 -603
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Helper class for managing selection state in a tree structure.
|
|
3
|
+
* - It provides methods to get selectable keys in a subtree
|
|
4
|
+
* - Compute selection statistics for a subtree
|
|
5
|
+
* - Determine if a subtree is fully selected.
|
|
6
|
+
*
|
|
7
|
+
* Results of selection statistics are cached to optimize performance for repeated calls on the same subtree.
|
|
8
|
+
*/
|
|
9
|
+
class SelectionSubtreeHelper {
|
|
10
|
+
constructor({ childRowIdsById, disabledKeysSet, selectedKeysSet, }) {
|
|
11
|
+
this.selectionStatsCache = new Map();
|
|
12
|
+
this.childRowIdsById = childRowIdsById !== null && childRowIdsById !== void 0 ? childRowIdsById : new Map();
|
|
13
|
+
this.disabledKeysSet = disabledKeysSet;
|
|
14
|
+
this.selectedKeysSet = selectedKeysSet;
|
|
15
|
+
}
|
|
16
|
+
getSelectableKeys(rootIds) {
|
|
17
|
+
var _a;
|
|
18
|
+
const visitedKeys = new Set();
|
|
19
|
+
const selectableKeys = [];
|
|
20
|
+
const stack = [...rootIds].reverse();
|
|
21
|
+
while (stack.length > 0) {
|
|
22
|
+
const key = stack.pop();
|
|
23
|
+
if (key == null || visitedKeys.has(key)) {
|
|
24
|
+
continue;
|
|
25
|
+
}
|
|
26
|
+
visitedKeys.add(key);
|
|
27
|
+
if (!this.disabledKeysSet.has(key)) {
|
|
28
|
+
selectableKeys.push(key);
|
|
29
|
+
}
|
|
30
|
+
const childRowIds = (_a = this.childRowIdsById.get(key)) !== null && _a !== void 0 ? _a : [];
|
|
31
|
+
for (let childIndex = childRowIds.length - 1; childIndex >= 0; childIndex--) {
|
|
32
|
+
stack.push(childRowIds[childIndex]);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
return selectableKeys;
|
|
36
|
+
}
|
|
37
|
+
/**
|
|
38
|
+
* Returns the number of selectable and selected rows in the subtree of the given root ID.
|
|
39
|
+
* Results are cached after the first computation to optimize repeated calls for the same root ID.
|
|
40
|
+
*
|
|
41
|
+
* The selectable count excludes disabled rows, and the selected count excludes disabled rows that are selected.
|
|
42
|
+
* The method is implemented iteratively to handle deep trees without hitting call stack limits.
|
|
43
|
+
*
|
|
44
|
+
* How it works:
|
|
45
|
+
* - Manually add root ID to stack to get processing going. Note that the ready-flag is `false`.
|
|
46
|
+
* - Pop stack until empty. For each entry:
|
|
47
|
+
* - - If entry is already cached, skip it.
|
|
48
|
+
* - - If entry is not ready, push it back as ready and push all its children as not ready.
|
|
49
|
+
* - - If entry is ready, compute its stats based on its own state and the stats of its children, then cache the result.
|
|
50
|
+
* - Since we add all the children to the stack after pushing element with ready: true, while "popping" the stack we will always encounter the children before their parent is ready, ensuring that the stats for all children are computed and cached before computing the stats for their parent.
|
|
51
|
+
* - Finally, return the cached stats for the root ID.
|
|
52
|
+
*/
|
|
53
|
+
getSelectionStats(rootId) {
|
|
54
|
+
var _a, _b, _c;
|
|
55
|
+
const cachedStats = this.selectionStatsCache.get(rootId);
|
|
56
|
+
if (cachedStats) {
|
|
57
|
+
return cachedStats;
|
|
58
|
+
}
|
|
59
|
+
/* Compute subtree totals iteratively so deep trees do not depend on call stack depth. */
|
|
60
|
+
const stack = [
|
|
61
|
+
{ key: rootId, ready: false },
|
|
62
|
+
];
|
|
63
|
+
while (stack.length > 0) {
|
|
64
|
+
const entry = stack.pop();
|
|
65
|
+
if (!entry) {
|
|
66
|
+
continue;
|
|
67
|
+
}
|
|
68
|
+
if (this.selectionStatsCache.has(entry.key)) {
|
|
69
|
+
continue;
|
|
70
|
+
}
|
|
71
|
+
if (entry.ready) {
|
|
72
|
+
let selectableCount = this.disabledKeysSet.has(entry.key) ? 0 : 1;
|
|
73
|
+
let selectedCount = !this.disabledKeysSet.has(entry.key) &&
|
|
74
|
+
this.selectedKeysSet.has(entry.key)
|
|
75
|
+
? 1
|
|
76
|
+
: 0;
|
|
77
|
+
for (const childKey of (_a = this.childRowIdsById.get(entry.key)) !== null && _a !== void 0 ? _a : []) {
|
|
78
|
+
const childStats = this.selectionStatsCache.get(childKey);
|
|
79
|
+
if (!childStats) {
|
|
80
|
+
continue;
|
|
81
|
+
}
|
|
82
|
+
selectableCount += childStats.selectableCount;
|
|
83
|
+
selectedCount += childStats.selectedCount;
|
|
84
|
+
}
|
|
85
|
+
this.selectionStatsCache.set(entry.key, {
|
|
86
|
+
selectableCount,
|
|
87
|
+
selectedCount,
|
|
88
|
+
});
|
|
89
|
+
continue;
|
|
90
|
+
}
|
|
91
|
+
stack.push({ key: entry.key, ready: true });
|
|
92
|
+
for (const childKey of (_b = this.childRowIdsById.get(entry.key)) !== null && _b !== void 0 ? _b : []) {
|
|
93
|
+
if (!this.selectionStatsCache.has(childKey)) {
|
|
94
|
+
stack.push({ key: childKey, ready: false });
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
return ((_c = this.selectionStatsCache.get(rootId)) !== null && _c !== void 0 ? _c : {
|
|
99
|
+
selectableCount: 0,
|
|
100
|
+
selectedCount: 0,
|
|
101
|
+
});
|
|
102
|
+
}
|
|
103
|
+
isFullySelected(rootId) {
|
|
104
|
+
const stats = this.getSelectionStats(rootId);
|
|
105
|
+
return (stats.selectableCount > 0 && stats.selectedCount === stats.selectableCount);
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
export { SelectionSubtreeHelper };
|
|
109
|
+
//# sourceMappingURL=SelectionSubtreeHelper.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectionSubtreeHelper.js","sourceRoot":"","sources":["../../../../../src/data/table/helpers/selection/SelectionSubtreeHelper.ts"],"names":[],"mappings":"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"}
|
|
@@ -4,9 +4,10 @@ type GetMultipleSelectPropsArgs = {
|
|
|
4
4
|
selectedKeys: (string | number)[];
|
|
5
5
|
setSelectedKeys: (keys: (string | number)[]) => void;
|
|
6
6
|
disabledKeysSet: Set<string | number>;
|
|
7
|
-
|
|
7
|
+
visibleRowIds: (string | number)[];
|
|
8
|
+
childRowIdsById?: Map<string | number, (string | number)[]>;
|
|
8
9
|
};
|
|
9
|
-
declare function getMultipleSelectProps({ selectedKeysSet, selectedKeys, setSelectedKeys, disabledKeysSet,
|
|
10
|
+
declare function getMultipleSelectProps({ selectedKeysSet, selectedKeys, setSelectedKeys, disabledKeysSet, visibleRowIds, childRowIdsById, }: GetMultipleSelectPropsArgs): {
|
|
10
11
|
getTheadCheckboxProps: () => CheckboxInputProps;
|
|
11
12
|
getRowCheckboxProps: (key: string | number) => CheckboxInputProps;
|
|
12
13
|
toggleSelection: (key: string | number) => void;
|
|
@@ -1,31 +1,50 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
const
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
import { SelectionSubtreeHelper } from "./SelectionSubtreeHelper.js";
|
|
2
|
+
function getMultipleSelectProps({ selectedKeysSet, selectedKeys, setSelectedKeys, disabledKeysSet, visibleRowIds, childRowIdsById, }) {
|
|
3
|
+
const subtreeHelper = new SelectionSubtreeHelper({
|
|
4
|
+
childRowIdsById,
|
|
5
|
+
disabledKeysSet,
|
|
6
|
+
selectedKeysSet,
|
|
7
|
+
});
|
|
8
|
+
// Header selection traverses the visible roots and skips already visited
|
|
9
|
+
// descendants, so expanded trees stay linear in the number of rows.
|
|
10
|
+
const headerSelectableKeys = subtreeHelper.getSelectableKeys(visibleRowIds);
|
|
11
|
+
const headerSelectableKeysSet = new Set(headerSelectableKeys);
|
|
12
|
+
const selectedSelectableCount = headerSelectableKeys.filter((k) => selectedKeysSet.has(k)).length;
|
|
13
|
+
const allSelectableSelected = headerSelectableKeys.length > 0 &&
|
|
14
|
+
selectedSelectableCount === headerSelectableKeys.length;
|
|
7
15
|
const indeterminate = selectedSelectableCount > 0 &&
|
|
8
|
-
selectedSelectableCount <
|
|
9
|
-
const selectedKeysNotInView = selectedKeys.filter((k) => !
|
|
16
|
+
selectedSelectableCount < headerSelectableKeys.length;
|
|
17
|
+
const selectedKeysNotInView = selectedKeys.filter((k) => !headerSelectableKeysSet.has(k));
|
|
10
18
|
const disabledSelected = selectedKeys.filter((k) => disabledKeysSet.has(k));
|
|
11
|
-
const preservedKeys = [
|
|
19
|
+
const preservedKeys = [
|
|
20
|
+
...new Set([...selectedKeysNotInView, ...disabledSelected]),
|
|
21
|
+
];
|
|
22
|
+
const isGroupFullySelected = (key) => {
|
|
23
|
+
const groupStats = subtreeHelper.getSelectionStats(key);
|
|
24
|
+
return (groupStats.selectableCount > 0 &&
|
|
25
|
+
groupStats.selectedCount === groupStats.selectableCount);
|
|
26
|
+
};
|
|
12
27
|
const handleToggleAll = () => {
|
|
13
28
|
if (allSelectableSelected) {
|
|
14
29
|
setSelectedKeys(preservedKeys);
|
|
15
30
|
}
|
|
16
31
|
else {
|
|
17
|
-
setSelectedKeys([
|
|
32
|
+
setSelectedKeys([
|
|
33
|
+
...new Set([...preservedKeys, ...headerSelectableKeys]),
|
|
34
|
+
]);
|
|
18
35
|
}
|
|
19
36
|
};
|
|
20
37
|
const handleToggleRow = (key) => {
|
|
21
38
|
if (disabledKeysSet.has(key)) {
|
|
22
39
|
return;
|
|
23
40
|
}
|
|
24
|
-
|
|
25
|
-
|
|
41
|
+
const groupKeys = subtreeHelper.getSelectableKeys([key]);
|
|
42
|
+
if (isGroupFullySelected(key)) {
|
|
43
|
+
const groupKeysSet = new Set(groupKeys);
|
|
44
|
+
setSelectedKeys(selectedKeys.filter((selectedKey) => !groupKeysSet.has(selectedKey)));
|
|
26
45
|
}
|
|
27
46
|
else {
|
|
28
|
-
setSelectedKeys([...selectedKeys,
|
|
47
|
+
setSelectedKeys([...new Set([...selectedKeys, ...groupKeys])]);
|
|
29
48
|
}
|
|
30
49
|
};
|
|
31
50
|
return {
|
|
@@ -33,13 +52,18 @@ function getMultipleSelectProps({ selectedKeysSet, selectedKeys, setSelectedKeys
|
|
|
33
52
|
onChange: handleToggleAll,
|
|
34
53
|
checked: allSelectableSelected,
|
|
35
54
|
indeterminate,
|
|
36
|
-
disabled:
|
|
37
|
-
}),
|
|
38
|
-
getRowCheckboxProps: (key) => ({
|
|
39
|
-
onChange: () => handleToggleRow(key),
|
|
40
|
-
checked: selectedKeysSet.has(key),
|
|
41
|
-
disabled: disabledKeysSet.has(key),
|
|
55
|
+
disabled: headerSelectableKeys.length === 0,
|
|
42
56
|
}),
|
|
57
|
+
getRowCheckboxProps: (key) => {
|
|
58
|
+
const groupStats = subtreeHelper.getSelectionStats(key);
|
|
59
|
+
return {
|
|
60
|
+
onChange: () => handleToggleRow(key),
|
|
61
|
+
checked: isGroupFullySelected(key),
|
|
62
|
+
indeterminate: groupStats.selectedCount > 0 &&
|
|
63
|
+
groupStats.selectedCount < groupStats.selectableCount,
|
|
64
|
+
disabled: disabledKeysSet.has(key),
|
|
65
|
+
};
|
|
66
|
+
},
|
|
43
67
|
toggleSelection: handleToggleRow,
|
|
44
68
|
};
|
|
45
69
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getMultipleSelectProps.js","sourceRoot":"","sources":["../../../../../src/data/table/helpers/selection/getMultipleSelectProps.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"getMultipleSelectProps.js","sourceRoot":"","sources":["../../../../../src/data/table/helpers/selection/getMultipleSelectProps.ts"],"names":[],"mappings":"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"}
|
|
@@ -8,6 +8,7 @@ type SelectionProps = {
|
|
|
8
8
|
* When set to "single", only one row can be selected at a time (renders radio buttons).
|
|
9
9
|
*
|
|
10
10
|
* When set to "multiple", multiple rows can be selected (renders checkboxes).
|
|
11
|
+
* Nested rows use cascading selection, so selecting a parent toggles its descendants too.
|
|
11
12
|
*
|
|
12
13
|
* @default "none"
|
|
13
14
|
*/
|
|
@@ -16,8 +16,7 @@ type NavigationAction = {
|
|
|
16
16
|
};
|
|
17
17
|
/**
|
|
18
18
|
* Maps keyboard events to navigation actions.
|
|
19
|
-
* Supports arrow keys, Home/End (row navigation), Ctrl/Cmd+Home/End (table navigation)
|
|
20
|
-
* and PageUp/PageDown (multi-row navigation).
|
|
19
|
+
* Supports arrow keys, Home/End (row navigation), Ctrl/Cmd+Home/End (table navigation).
|
|
21
20
|
*/
|
|
22
21
|
declare function getNavigationAction(event: KeyboardEvent): NavigationAction | null;
|
|
23
22
|
/**
|
|
@@ -6,8 +6,7 @@ const keyToCoord = {
|
|
|
6
6
|
};
|
|
7
7
|
/**
|
|
8
8
|
* Maps keyboard events to navigation actions.
|
|
9
|
-
* Supports arrow keys, Home/End (row navigation), Ctrl/Cmd+Home/End (table navigation)
|
|
10
|
-
* and PageUp/PageDown (multi-row navigation).
|
|
9
|
+
* Supports arrow keys, Home/End (row navigation), Ctrl/Cmd+Home/End (table navigation).
|
|
11
10
|
*/
|
|
12
11
|
function getNavigationAction(event) {
|
|
13
12
|
const key = event.key;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-keyboard.js","sourceRoot":"","sources":["../../../../src/data/table/helpers/table-keyboard.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,GAAG;IACjB,OAAO,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE;IACxB,SAAS,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;IACzB,SAAS,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;IAC1B,UAAU,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;CAClB,CAAC;AAWX
|
|
1
|
+
{"version":3,"file":"table-keyboard.js","sourceRoot":"","sources":["../../../../src/data/table/helpers/table-keyboard.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,16 +1,29 @@
|
|
|
1
|
+
import { useMemo } from "react";
|
|
1
2
|
function useColumnOptions(columnDefinitions, options) {
|
|
2
3
|
const { stickyColumns, selectionMode } = options;
|
|
3
4
|
const hasSelection = selectionMode !== "none";
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
columns: columnDefinitions.map((colDef, index) => {
|
|
5
|
+
const columns = useMemo(() => {
|
|
6
|
+
return columnDefinitions.map((colDef, index) => {
|
|
7
7
|
const isFirstSticky = (stickyColumns === null || stickyColumns === void 0 ? void 0 : stickyColumns.first) === "1" && index === 0 && !hasSelection;
|
|
8
8
|
const isLastSticky = (stickyColumns === null || stickyColumns === void 0 ? void 0 : stickyColumns.last) === "1" && index === columnDefinitions.length - 1;
|
|
9
9
|
return {
|
|
10
|
-
isSticky: isFirstSticky
|
|
10
|
+
isSticky: isFirstSticky
|
|
11
|
+
? "start"
|
|
12
|
+
: isLastSticky
|
|
13
|
+
? "end"
|
|
14
|
+
: false,
|
|
11
15
|
colDef,
|
|
12
16
|
};
|
|
13
|
-
})
|
|
17
|
+
});
|
|
18
|
+
}, [
|
|
19
|
+
columnDefinitions,
|
|
20
|
+
hasSelection,
|
|
21
|
+
stickyColumns === null || stickyColumns === void 0 ? void 0 : stickyColumns.first,
|
|
22
|
+
stickyColumns === null || stickyColumns === void 0 ? void 0 : stickyColumns.last,
|
|
23
|
+
]);
|
|
24
|
+
return {
|
|
25
|
+
stickySelection: selectionMode !== "none" && (stickyColumns === null || stickyColumns === void 0 ? void 0 : stickyColumns.first) === "1",
|
|
26
|
+
columns,
|
|
14
27
|
};
|
|
15
28
|
}
|
|
16
29
|
export { useColumnOptions };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useColumnOptions.js","sourceRoot":"","sources":["../../../../src/data/table/hooks/useColumnOptions.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useColumnOptions.js","sourceRoot":"","sources":["../../../../src/data/table/hooks/useColumnOptions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAuBhC,SAAS,gBAAgB,CACvB,iBAAuC,EACvC,OAAyB;IAEzB,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,GAAG,OAAO,CAAC;IAEjD,MAAM,YAAY,GAAG,aAAa,KAAK,MAAM,CAAC;IAE9C,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,OAAO,iBAAiB,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YAC7C,MAAM,aAAa,GACjB,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,KAAK,MAAK,GAAG,IAAI,KAAK,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC;YAC/D,MAAM,YAAY,GAChB,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,IAAI,MAAK,GAAG,IAAI,KAAK,KAAK,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC;YAExE,OAAO;gBACL,QAAQ,EAAE,aAAa;oBACrB,CAAC,CAAE,OAAiB;oBACpB,CAAC,CAAC,YAAY;wBACZ,CAAC,CAAE,KAAe;wBAClB,CAAC,CAAE,KAAe;gBACtB,MAAM;aACP,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,EAAE;QACD,iBAAiB;QACjB,YAAY;QACZ,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,KAAK;QACpB,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,IAAI;KACpB,CAAC,CAAC;IAEH,OAAO;QACL,eAAe,EAAE,aAAa,KAAK,MAAM,IAAI,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,KAAK,MAAK,GAAG;QACzE,OAAO;KACR,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
type DetailsPanelProps<T> = {
|
|
3
|
+
/**
|
|
4
|
+
* Renders a details panel below the row when expanded.
|
|
5
|
+
* When provided, an expand toggle column is added automatically.
|
|
6
|
+
*/
|
|
7
|
+
getContent?: (rowData: T) => React.ReactNode;
|
|
8
|
+
/**
|
|
9
|
+
* Determines whether a row can be expanded to show details panel content.
|
|
10
|
+
* @default () => true
|
|
11
|
+
*/
|
|
12
|
+
isRowExpandable?: (rowData: T) => boolean;
|
|
13
|
+
/**
|
|
14
|
+
* Controlled list of expanded row IDs.
|
|
15
|
+
* Use with `onDetailsPanelChange` for controlled usage, or `defaultDetailsPanelRowIds` for uncontrolled.
|
|
16
|
+
*/
|
|
17
|
+
expandedRowIds?: (string | number)[];
|
|
18
|
+
/**
|
|
19
|
+
* Initial list of expanded row IDs for uncontrolled usage.
|
|
20
|
+
* @default []
|
|
21
|
+
*/
|
|
22
|
+
defaultExpandedRowIds?: (string | number)[];
|
|
23
|
+
/**
|
|
24
|
+
* Called when the list of expanded row IDs changes.
|
|
25
|
+
*
|
|
26
|
+
*
|
|
27
|
+
* TODO:
|
|
28
|
+
* - Docs: This pattern is called "Master / Detail" in general terms
|
|
29
|
+
*/
|
|
30
|
+
onExpandedRowIdsChange?: (ids: (string | number)[]) => void;
|
|
31
|
+
/**
|
|
32
|
+
* Returns the height (in px) or `"auto"` for a row's details panel.
|
|
33
|
+
* When a number is returned, the panel scrolls within that fixed height.
|
|
34
|
+
* @default "auto"
|
|
35
|
+
*/
|
|
36
|
+
getHeight?: (rowData: T) => number | "auto";
|
|
37
|
+
/**
|
|
38
|
+
* Shows an expand-all toggle button in the expand column header.
|
|
39
|
+
* @default false
|
|
40
|
+
*/
|
|
41
|
+
showExpandAll?: boolean;
|
|
42
|
+
};
|
|
43
|
+
type DataTableDetailsPanelContextT = {
|
|
44
|
+
isExpanded: (id: string | number) => boolean;
|
|
45
|
+
isDetailsPanelExpandable: (id: string | number) => boolean;
|
|
46
|
+
toggleExpansion: (id: string | number) => void;
|
|
47
|
+
toggleAll: () => void;
|
|
48
|
+
isAllExpanded: boolean;
|
|
49
|
+
getDetailsPanelContent?: (row: unknown) => React.ReactNode;
|
|
50
|
+
getDetailsPanelHeight?: (row: unknown) => number | "auto";
|
|
51
|
+
showExpandAll: boolean;
|
|
52
|
+
enableDetailsPanel: boolean;
|
|
53
|
+
};
|
|
54
|
+
declare const useDataTableDetailsPanel: <S extends boolean = true>(strict?: S | undefined) => S extends true ? DataTableDetailsPanelContextT : DataTableDetailsPanelContextT | undefined;
|
|
55
|
+
declare function DataTableDetailsPanelProvider<T>({ children, detailsPanel, }: {
|
|
56
|
+
detailsPanel?: DetailsPanelProps<T>;
|
|
57
|
+
} & {
|
|
58
|
+
children: React.ReactNode;
|
|
59
|
+
}): React.JSX.Element;
|
|
60
|
+
declare function getDataTableDetailsPanelId(tableId: string, rowId: string | number): string;
|
|
61
|
+
export { DataTableDetailsPanelProvider, getDataTableDetailsPanelId, useDataTableDetailsPanel, };
|
|
62
|
+
export type { DetailsPanelProps };
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import React, { useCallback } from "react";
|
|
2
|
+
import { createStrictContext } from "../../../utils/helpers/index.js";
|
|
3
|
+
import { useControllableState } from "../../../utils/hooks/index.js";
|
|
4
|
+
import { useTableItemsContext } from "./useTableItems.js";
|
|
5
|
+
const { Provider: DataTableDetailsPanelContextProvider, useContext: useDataTableDetailsPanel, } = createStrictContext({
|
|
6
|
+
name: "DataTableDetailsPanelContext",
|
|
7
|
+
errorMessage: "useDataTableDetailsPanel must be used within a DataTableDetailsPanelProvider.",
|
|
8
|
+
});
|
|
9
|
+
function DataTableDetailsPanelProvider({ children, detailsPanel = {}, }) {
|
|
10
|
+
const { expandedRowIds, defaultExpandedRowIds = [], onExpandedRowIdsChange, getContent, isRowExpandable, getHeight, showExpandAll = false, } = detailsPanel;
|
|
11
|
+
const [expandedIds, setExpandedIds] = useControllableState({
|
|
12
|
+
value: expandedRowIds,
|
|
13
|
+
defaultValue: defaultExpandedRowIds,
|
|
14
|
+
onChange: onExpandedRowIdsChange,
|
|
15
|
+
});
|
|
16
|
+
/* TODO: False is just fallback until auto and root is merged */
|
|
17
|
+
const tableItemsContext = useTableItemsContext(false);
|
|
18
|
+
const { itemDetails } = tableItemsContext !== null && tableItemsContext !== void 0 ? tableItemsContext : {
|
|
19
|
+
itemDetails: new Map(),
|
|
20
|
+
};
|
|
21
|
+
const expandableIds = React.useMemo(() => {
|
|
22
|
+
if (!getContent) {
|
|
23
|
+
return new Set();
|
|
24
|
+
}
|
|
25
|
+
const ids = new Set();
|
|
26
|
+
for (const [rowData, { id, level }] of itemDetails.entries()) {
|
|
27
|
+
/* We only allow Master - Details pattern on top level rows */
|
|
28
|
+
if (level > 0) {
|
|
29
|
+
continue;
|
|
30
|
+
}
|
|
31
|
+
if (!isRowExpandable || isRowExpandable(rowData)) {
|
|
32
|
+
ids.add(id);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
return ids;
|
|
36
|
+
}, [getContent, isRowExpandable, itemDetails]);
|
|
37
|
+
const isDetailsPanelExpandableById = useCallback((id) => expandableIds.has(id), [expandableIds]);
|
|
38
|
+
const isExpanded = useCallback((id) => isDetailsPanelExpandableById(id) && expandedIds.includes(id), [expandedIds, isDetailsPanelExpandableById]);
|
|
39
|
+
const toggleExpansion = useCallback((id) => {
|
|
40
|
+
if (!isDetailsPanelExpandableById(id)) {
|
|
41
|
+
return;
|
|
42
|
+
}
|
|
43
|
+
setExpandedIds((currentExpandedIds) => currentExpandedIds.includes(id)
|
|
44
|
+
? currentExpandedIds.filter((expandedId) => expandedId !== id)
|
|
45
|
+
: [...currentExpandedIds, id]);
|
|
46
|
+
}, [isDetailsPanelExpandableById, setExpandedIds]);
|
|
47
|
+
const isAllExpanded = expandableIds.size > 0 &&
|
|
48
|
+
Array.from(expandableIds).every((key) => expandedIds.includes(key));
|
|
49
|
+
const toggleAll = useCallback(() => {
|
|
50
|
+
setExpandedIds(isAllExpanded ? [] : Array.from(expandableIds));
|
|
51
|
+
}, [expandableIds, isAllExpanded, setExpandedIds]);
|
|
52
|
+
return (React.createElement(DataTableDetailsPanelContextProvider, { isExpanded: isExpanded, isDetailsPanelExpandable: isDetailsPanelExpandableById, toggleExpansion: toggleExpansion, toggleAll: toggleAll, isAllExpanded: isAllExpanded, getDetailsPanelContent: getContent, getDetailsPanelHeight: getHeight, showExpandAll: showExpandAll, enableDetailsPanel: !!getContent }, children));
|
|
53
|
+
}
|
|
54
|
+
function getDataTableDetailsPanelId(tableId, rowId) {
|
|
55
|
+
return `${tableId}-expansion-${rowId}`;
|
|
56
|
+
}
|
|
57
|
+
export { DataTableDetailsPanelProvider, getDataTableDetailsPanelId, useDataTableDetailsPanel, };
|
|
58
|
+
//# sourceMappingURL=useTableDetailsPanel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTableDetailsPanel.js","sourceRoot":"","sources":["../../../../src/data/table/hooks/useTableDetailsPanel.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,29 +1,30 @@
|
|
|
1
|
-
import { type ItemDetail } from "../helpers/collectTableRowEntries.js";
|
|
1
|
+
import { type ItemDetail, type TableRowEntryId } from "../helpers/collectTableRowEntries.js";
|
|
2
|
+
type SubRowsProps<T> = {
|
|
3
|
+
getRows?: (rowData: T) => T[];
|
|
4
|
+
expandedRowIds?: (string | number)[];
|
|
5
|
+
defaultExpandedRowIds?: (string | number)[];
|
|
6
|
+
isRowExpandable?: (rowData: T) => boolean;
|
|
7
|
+
onExpandedRowIdsChange?: (ids: (string | number)[]) => void;
|
|
8
|
+
};
|
|
2
9
|
type UseTableItemsArgs<T> = {
|
|
3
10
|
items: T[];
|
|
4
|
-
getRowId
|
|
5
|
-
|
|
6
|
-
* Master - Detail pattern props
|
|
7
|
-
*/
|
|
8
|
-
/**
|
|
9
|
-
* Expanded/Nested rows pattern props
|
|
10
|
-
*/
|
|
11
|
-
getSubRows?: (rowData: T) => T[];
|
|
12
|
-
expandedSubRowIds?: (string | number)[];
|
|
13
|
-
defaultExpandedSubRowIds?: (string | number)[];
|
|
14
|
-
isSubRowExpandable?: (rowData: T) => boolean;
|
|
15
|
-
onExpandedSubRowIdsChange?: (ids: (string | number)[]) => void;
|
|
11
|
+
getRowId: (rowData: T, index: number) => TableRowEntryId;
|
|
12
|
+
subRows?: SubRowsProps<T>;
|
|
16
13
|
};
|
|
17
14
|
type useTableItemsReturn<T> = {
|
|
18
15
|
items: T[];
|
|
19
16
|
itemDetails: Map<T, ItemDetail<T>>;
|
|
20
|
-
|
|
17
|
+
/** Row ids for the rows currently rendered in the table body. */
|
|
18
|
+
visibleRowIds: TableRowEntryId[];
|
|
19
|
+
/** Direct child ids for each row, used to traverse selection groups lazily. */
|
|
20
|
+
childRowIdsById: Map<TableRowEntryId, TableRowEntryId[]>;
|
|
21
|
+
onExpandedRowIdsChange: (id: string | number) => void;
|
|
21
22
|
isSubRowExpanded: (id: string | number) => boolean;
|
|
22
23
|
};
|
|
23
24
|
declare function useTableItems<T>(args: UseTableItemsArgs<T>): useTableItemsReturn<T>;
|
|
24
|
-
declare const TableItemsProvider: import("react").FC<useTableItemsReturn<any> & {
|
|
25
|
+
declare const TableItemsProvider: import("react").FC<Omit<useTableItemsReturn<any>, "childRowIdsById" | "visibleRowIds"> & {
|
|
25
26
|
children: React.ReactNode;
|
|
26
27
|
ref?: never;
|
|
27
|
-
}>, useTableItemsContext: <S extends boolean = true>(strict?: S | undefined) => S extends true ? useTableItemsReturn<any> : useTableItemsReturn<any> | undefined;
|
|
28
|
+
}>, useTableItemsContext: <S extends boolean = true>(strict?: S | undefined) => S extends true ? Omit<useTableItemsReturn<any>, "childRowIdsById" | "visibleRowIds"> : Omit<useTableItemsReturn<any>, "childRowIdsById" | "visibleRowIds"> | undefined;
|
|
28
29
|
export { useTableItems, TableItemsProvider, useTableItemsContext };
|
|
29
|
-
export type { ItemDetail };
|
|
30
|
+
export type { ItemDetail, SubRowsProps };
|
|
@@ -3,39 +3,49 @@ import { createStrictContext } from "../../../utils/helpers/index.js";
|
|
|
3
3
|
import { useControllableState } from "../../../utils/hooks/index.js";
|
|
4
4
|
import { collectTableRowEntries, } from "../helpers/collectTableRowEntries.js";
|
|
5
5
|
function useTableItems(args) {
|
|
6
|
-
const { items,
|
|
6
|
+
const { items, subRows = {}, getRowId } = args;
|
|
7
|
+
const { expandedRowIds, defaultExpandedRowIds, getRows, onExpandedRowIdsChange, isRowExpandable, } = subRows;
|
|
7
8
|
const [nestedSubRowsExpandedIds, setNestedSubRowsExpandedIds] = useControllableState({
|
|
8
|
-
value:
|
|
9
|
-
defaultValue:
|
|
10
|
-
onChange:
|
|
9
|
+
value: expandedRowIds,
|
|
10
|
+
defaultValue: defaultExpandedRowIds !== null && defaultExpandedRowIds !== void 0 ? defaultExpandedRowIds : [],
|
|
11
|
+
onChange: onExpandedRowIdsChange,
|
|
11
12
|
});
|
|
12
13
|
const expandedIdsSet = useMemo(() => new Set(nestedSubRowsExpandedIds), [nestedSubRowsExpandedIds]);
|
|
13
|
-
const { itemDetails, visibleItems } = useMemo(() => {
|
|
14
|
-
const rowEntriesMap = collectTableRowEntries({
|
|
14
|
+
const { itemDetails, visibleItems, visibleRowIds, childRowIdsById } = useMemo(() => {
|
|
15
|
+
const { itemDetails: rowEntriesMap, childRowIdsById: _childRowIdsById } = collectTableRowEntries({
|
|
15
16
|
items,
|
|
16
17
|
getRowId,
|
|
17
|
-
|
|
18
|
-
|
|
18
|
+
getRows,
|
|
19
|
+
isRowExpandable,
|
|
19
20
|
});
|
|
20
21
|
const localVisibleItems = [];
|
|
22
|
+
const localVisibleRowIds = [];
|
|
21
23
|
const addVisibleRows = (rowData) => {
|
|
22
|
-
localVisibleItems.push(rowData);
|
|
23
24
|
const details = rowEntriesMap.get(rowData);
|
|
24
|
-
if (!details
|
|
25
|
-
return;
|
|
25
|
+
if (!details) {
|
|
26
|
+
return [];
|
|
26
27
|
}
|
|
27
|
-
|
|
28
|
-
|
|
28
|
+
localVisibleItems.push(rowData);
|
|
29
|
+
localVisibleRowIds.push(details.id);
|
|
30
|
+
const visibleDescendantRowIds = [];
|
|
31
|
+
if (expandedIdsSet.has(details.id)) {
|
|
32
|
+
for (const childRow of details.children) {
|
|
33
|
+
const childVisibleRowIds = addVisibleRows(childRow);
|
|
34
|
+
visibleDescendantRowIds.push(...childVisibleRowIds);
|
|
35
|
+
}
|
|
29
36
|
}
|
|
37
|
+
return [details.id, ...visibleDescendantRowIds];
|
|
30
38
|
};
|
|
31
39
|
for (const rowData of items) {
|
|
32
40
|
addVisibleRows(rowData);
|
|
33
41
|
}
|
|
34
42
|
return {
|
|
35
43
|
visibleItems: localVisibleItems,
|
|
44
|
+
visibleRowIds: localVisibleRowIds,
|
|
45
|
+
childRowIdsById: _childRowIdsById,
|
|
36
46
|
itemDetails: rowEntriesMap,
|
|
37
47
|
};
|
|
38
|
-
}, [
|
|
48
|
+
}, [getRows, items, getRowId, isRowExpandable, expandedIdsSet]);
|
|
39
49
|
const handleExpandedSubRowIdChange = useCallback((id) => {
|
|
40
50
|
setNestedSubRowsExpandedIds((prev) => prev.includes(id)
|
|
41
51
|
? prev.filter((expandedId) => expandedId !== id)
|
|
@@ -44,7 +54,9 @@ function useTableItems(args) {
|
|
|
44
54
|
return {
|
|
45
55
|
items: visibleItems,
|
|
46
56
|
itemDetails,
|
|
47
|
-
|
|
57
|
+
visibleRowIds,
|
|
58
|
+
childRowIdsById,
|
|
59
|
+
onExpandedRowIdsChange: handleExpandedSubRowIdChange,
|
|
48
60
|
isSubRowExpanded: (id) => expandedIdsSet.has(id),
|
|
49
61
|
};
|
|
50
62
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTableItems.js","sourceRoot":"","sources":["../../../../src/data/table/hooks/useTableItems.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,
|
|
1
|
+
{"version":3,"file":"useTableItems.js","sourceRoot":"","sources":["../../../../src/data/table/hooks/useTableItems.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
import type { SelectionProps, TableSelection } from "../helpers/selection/selection.types.js";
|
|
2
|
-
type UseTableSelectionArgs =
|
|
3
|
-
|
|
2
|
+
type UseTableSelectionArgs = {
|
|
3
|
+
selection?: SelectionProps;
|
|
4
|
+
visibleRowIds: (string | number)[];
|
|
5
|
+
childRowIdsById?: Map<string | number, (string | number)[]>;
|
|
4
6
|
};
|
|
5
7
|
type UseTableSelectionReturn = {
|
|
6
8
|
selection: TableSelection;
|
|
7
9
|
renderSelection: boolean;
|
|
10
|
+
disableRowSelectionOnClick: boolean;
|
|
8
11
|
};
|
|
9
|
-
declare function useTableSelection({
|
|
12
|
+
declare function useTableSelection({ selection, visibleRowIds, childRowIdsById, }: UseTableSelectionArgs): UseTableSelectionReturn;
|
|
10
13
|
/**
|
|
11
14
|
* TODO: Only temp needed to keep Root happy
|
|
12
15
|
*/
|