@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.
@@ -1 +1 @@
1
- {"version":3,"file":"GroupedGrid.d.ts","sourceRoot":"","sources":["../../src/hosts/GroupedGrid.tsx"],"names":[],"mappings":";AAUA,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,CAwGtG"}
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 —