@dataverse-kit/grid-kit 0.3.0 → 0.4.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/dist/hosts/GroupedGrid.d.ts.map +1 -1
- package/dist/index.esm.js +19 -3
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +19 -3
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GroupedGrid.d.ts","sourceRoot":"","sources":["../../src/hosts/GroupedGrid.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"GroupedGrid.d.ts","sourceRoot":"","sources":["../../src/hosts/GroupedGrid.tsx"],"names":[],"mappings":";AAYA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAqBjD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CA6HtG"}
|
package/dist/index.esm.js
CHANGED
|
@@ -2253,13 +2253,29 @@ const GROUP_CHEVRON_WIDTH = 36;
|
|
|
2253
2253
|
* groups + count badges), reusing the same columns/registry as `<DataGrid>`.
|
|
2254
2254
|
*/
|
|
2255
2255
|
function GroupedGrid(props) {
|
|
2256
|
-
const { items, columns, group, selectionMode = 'none', isLoading, pagination, onPageChange, aggregateItems, toolbar, compact, alternateRowColors, fill, height, rowCommands } = props;
|
|
2256
|
+
const { items, columns, group, selectionMode = 'none', onSelectionChanged, isLoading, pagination, onPageChange, aggregateItems, toolbar, compact, alternateRowColors, fill, height, rowCommands } = props;
|
|
2257
2257
|
const edit = useEditState();
|
|
2258
|
-
const { ctx } = useGridContext(props, edit);
|
|
2258
|
+
const { ctx, getKeyFn } = useGridContext(props, edit);
|
|
2259
2259
|
const dlColumns = useMemo(() => toDetailsListColumns(columns, ctx), [columns, ctx]);
|
|
2260
2260
|
// Per-row right-click menu (DetailsList path, same as DataGrid/NestedInline). No-op when
|
|
2261
2261
|
// rowCommands is unset (onItemContextMenu is undefined → no handler attached).
|
|
2262
2262
|
const { onItemContextMenu, contextMenuElement } = useRowContextMenu(rowCommands);
|
|
2263
|
+
// Fluent Selection so a toolbar's selection-gated commands can read the checked rows via
|
|
2264
|
+
// onSelectionChanged. Ported verbatim from <DataGrid> (the grouped DetailsList supports
|
|
2265
|
+
// selection + groups together: the Selection is over the flattened `orderedItems`, and
|
|
2266
|
+
// group headers select-all per group). `getKey` (= the consumer's getKey via getKeyFn) keys
|
|
2267
|
+
// the selection per row; null-safe for enableShimmer placeholder rows. selectionMode='none'
|
|
2268
|
+
// (the default) passes no selection → display-only / per-row-menu-only grids are unchanged.
|
|
2269
|
+
const safeRowKey = (it, index) => it == null ? `__gridkit_shimmer_${index ?? 0}` : getKeyFn(it);
|
|
2270
|
+
const onSelectionChangedRef = useRef(onSelectionChanged);
|
|
2271
|
+
onSelectionChangedRef.current = onSelectionChanged;
|
|
2272
|
+
const selectionRef = useRef();
|
|
2273
|
+
if (!selectionRef.current) {
|
|
2274
|
+
selectionRef.current = new Selection({
|
|
2275
|
+
getKey: (it, index) => safeRowKey(it, index),
|
|
2276
|
+
onSelectionChanged: () => onSelectionChangedRef.current?.(selectionRef.current.getSelection()),
|
|
2277
|
+
});
|
|
2278
|
+
}
|
|
2263
2279
|
// Bucket by groupBy → ordered items + IGroup[] (DetailsList needs contiguous
|
|
2264
2280
|
// group ranges). See buildGroups (pure + unit-tested).
|
|
2265
2281
|
const { orderedItems, groups } = useMemo(() => buildGroups(items, group), [items, group]);
|
|
@@ -2291,7 +2307,7 @@ function GroupedGrid(props) {
|
|
|
2291
2307
|
});
|
|
2292
2308
|
}
|
|
2293
2309
|
: undefined, [alternateRowColors]);
|
|
2294
|
-
return (jsxs(Stack, { styles: fillStackStyles(fill, height), children: [toolbar && jsx(GridToolbar, { config: toolbar }), jsx(FillRegion, { fill: fill, children: jsx(ShimmeredDetailsList, { items: orderedItems, columns: dlColumns, groups: groups, selectionMode: mapSelectionMode$1(selectionMode), layoutMode: DetailsListLayoutMode.justified, compact: compact, setKey: "grid-kit-grouped", onRenderRow: onRenderRow, onItemContextMenu: onItemContextMenu, styles: getDetailsListStyles(), ariaLabelForGrid: "Grouped grid", groupProps: {
|
|
2310
|
+
return (jsxs(Stack, { styles: fillStackStyles(fill, height), children: [toolbar && jsx(GridToolbar, { config: toolbar }), jsx(FillRegion, { fill: fill, children: jsx(ShimmeredDetailsList, { items: orderedItems, columns: dlColumns, groups: groups, selectionMode: mapSelectionMode$1(selectionMode), selection: selectionMode !== 'none' ? selectionRef.current : undefined, getKey: (it, index) => safeRowKey(it, index), layoutMode: DetailsListLayoutMode.justified, compact: compact, setKey: "grid-kit-grouped", onRenderRow: onRenderRow, onItemContextMenu: onItemContextMenu, styles: getDetailsListStyles(), ariaLabelForGrid: "Grouped grid", groupProps: {
|
|
2295
2311
|
showEmptyGroups: false,
|
|
2296
2312
|
// Render a subtotal under each EXPANDED group. Fluent v8 calls the group
|
|
2297
2313
|
// footer renderer even for collapsed groups, so guard on isCollapsed —
|