@dataverse-kit/grid-kit 0.2.0 → 0.4.0

package/dist/index.js

@@ -2254,13 +2254,29 @@ const GROUP_CHEVRON_WIDTH = 36;
  * groups + count badges), reusing the same columns/registry as `<DataGrid>`.
  */
 function GroupedGrid(props) {
-    const { items, columns, group, selectionMode = 'none', isLoading, pagination, onPageChange, aggregateItems, toolbar, compact, alternateRowColors, fill, height, rowCommands } = props;
+    const { items, columns, group, selectionMode = 'none', onSelectionChanged, isLoading, pagination, onPageChange, aggregateItems, toolbar, compact, alternateRowColors, fill, height, rowCommands } = props;
     const edit = useEditState();
-    const { ctx } = useGridContext(props, edit);
+    const { ctx, getKeyFn } = useGridContext(props, edit);
     const dlColumns = React.useMemo(() => toDetailsListColumns(columns, ctx), [columns, ctx]);
     // Per-row right-click menu (DetailsList path, same as DataGrid/NestedInline). No-op when
     // rowCommands is unset (onItemContextMenu is undefined → no handler attached).
     const { onItemContextMenu, contextMenuElement } = useRowContextMenu(rowCommands);
+    // Fluent Selection so a toolbar's selection-gated commands can read the checked rows via
+    // onSelectionChanged. Ported verbatim from <DataGrid> (the grouped DetailsList supports
+    // selection + groups together: the Selection is over the flattened `orderedItems`, and
+    // group headers select-all per group). `getKey` (= the consumer's getKey via getKeyFn) keys
+    // the selection per row; null-safe for enableShimmer placeholder rows. selectionMode='none'
+    // (the default) passes no selection → display-only / per-row-menu-only grids are unchanged.
+    const safeRowKey = (it, index) => it == null ? `__gridkit_shimmer_${index ?? 0}` : getKeyFn(it);
+    const onSelectionChangedRef = React.useRef(onSelectionChanged);
+    onSelectionChangedRef.current = onSelectionChanged;
+    const selectionRef = React.useRef();
+    if (!selectionRef.current) {
+        selectionRef.current = new react.Selection({
+            getKey: (it, index) => safeRowKey(it, index),
+            onSelectionChanged: () => onSelectionChangedRef.current?.(selectionRef.current.getSelection()),
+        });
+    }
     // Bucket by groupBy → ordered items + IGroup[] (DetailsList needs contiguous
     // group ranges). See buildGroups (pure + unit-tested).
     const { orderedItems, groups } = React.useMemo(() => buildGroups(items, group), [items, group]);
@@ -2292,7 +2308,7 @@ function GroupedGrid(props) {
             });
         }
         : undefined, [alternateRowColors]);
-    return (jsxRuntime.jsxs(react.Stack, { styles: fillStackStyles(fill, height), children: [toolbar && jsxRuntime.jsx(GridToolbar, { config: toolbar }), jsxRuntime.jsx(FillRegion, { fill: fill, children: jsxRuntime.jsx(react.ShimmeredDetailsList, { items: orderedItems, columns: dlColumns, groups: groups, selectionMode: mapSelectionMode$1(selectionMode), layoutMode: react.DetailsListLayoutMode.justified, compact: compact, setKey: "grid-kit-grouped", onRenderRow: onRenderRow, onItemContextMenu: onItemContextMenu, styles: dynamicsCellRenderers.getDetailsListStyles(), ariaLabelForGrid: "Grouped grid", groupProps: {
+    return (jsxRuntime.jsxs(react.Stack, { styles: fillStackStyles(fill, height), children: [toolbar && jsxRuntime.jsx(GridToolbar, { config: toolbar }), jsxRuntime.jsx(FillRegion, { fill: fill, children: jsxRuntime.jsx(react.ShimmeredDetailsList, { items: orderedItems, columns: dlColumns, groups: groups, selectionMode: mapSelectionMode$1(selectionMode), selection: selectionMode !== 'none' ? selectionRef.current : undefined, getKey: (it, index) => safeRowKey(it, index), layoutMode: react.DetailsListLayoutMode.justified, compact: compact, setKey: "grid-kit-grouped", onRenderRow: onRenderRow, onItemContextMenu: onItemContextMenu, styles: dynamicsCellRenderers.getDetailsListStyles(), ariaLabelForGrid: "Grouped grid", groupProps: {
                         showEmptyGroups: false,
                         // Render a subtotal under each EXPANDED group. Fluent v8 calls the group
                         // footer renderer even for collapsed groups, so guard on isCollapsed —
@@ -2309,10 +2325,17 @@ function GroupedGrid(props) {
  * never fetches — this just normalizes the consumer-supplied resolver and tracks
  * loading. Call `ensure(key, parent)` on demand (row expand / panel open / hover).
  */
-function useChildren(getChildren) {
+function useChildren(getChildren, reloadToken) {
     const [cache, setCache] = React.useState({});
     const cacheRef = React.useRef(cache);
     cacheRef.current = cache;
+    // Remember the parent object per cached key so a `reloadToken` bump can re-run
+    // `getChildren(parent)` for already-loaded rows.
+    const parentsRef = React.useRef({});
+    // `getChildren` accessed via a ref inside the reload effect → the effect can depend
+    // on `reloadToken` alone without a stale closure or an exhaustive-deps warning.
+    const getChildrenRef = React.useRef(getChildren);
+    getChildrenRef.current = getChildren;
     // Guard against setState after unmount (e.g. host swapped while a child fetch
     // is in flight) — mirrors NestedTriggerCell / DetailPaneChildren.
     const mounted = React.useRef(true);
@@ -2325,6 +2348,7 @@ function useChildren(getChildren) {
     const ensure = React.useCallback((key, parent) => {
         if (cacheRef.current[key])
             return;
+        parentsRef.current[key] = parent;
         const result = getChildren(parent);
         if (Array.isArray(result)) {
             setCache((p) => ({ ...p, [key]: { loading: false, rows: result } }));
@@ -2337,6 +2361,30 @@ function useChildren(getChildren) {
             });
         }
     }, [getChildren]);
+    // Re-fetch every already-loaded parent's children when `reloadToken` changes. Compare
+    // the token by VALUE (not a first-run counter) so it's safe under StrictMode's
+    // double-invoke. Crucially we do NOT flip `loading: true` here — the old rows stay
+    // rendered until the fresh ones land, so there's no spinner flash and (since `ensure`
+    // is only re-called on expand) no perpetual spinner for an already-expanded row.
+    const prevToken = React.useRef(reloadToken);
+    React.useEffect(() => {
+        if (reloadToken === prevToken.current)
+            return;
+        prevToken.current = reloadToken;
+        for (const key of Object.keys(parentsRef.current)) {
+            const parent = parentsRef.current[key];
+            const result = getChildrenRef.current(parent);
+            if (Array.isArray(result)) {
+                setCache((p) => ({ ...p, [key]: { loading: false, rows: result } }));
+            }
+            else {
+                Promise.resolve(result).then((rows) => {
+                    if (mounted.current)
+                        setCache((p) => ({ ...p, [key]: { loading: false, rows } }));
+                });
+            }
+        }
+    }, [reloadToken]);
     const get = React.useCallback((key) => cache[key], [cache]);
     return { get, ensure };
 }
@@ -2363,7 +2411,7 @@ function NestedInline(props) {
     const { items, columns, nested, selectionMode, isLoading, compact, alternateRowColors, pagination, onPageChange, aggregateItems, onSelectionChanged, rowCommands, } = parentProps;
     const { onItemContextMenu, contextMenuElement } = useRowContextMenu(rowCommands);
     const [expanded, setExpanded] = React.useState(new Set());
-    const { get, ensure } = useChildren(nested.getChildren);
+    const { get, ensure } = useChildren(nested.getChildren, nested.reloadToken);
     // Forward parent-row selection to the consumer (DataGrid does this; inline did
     // not). A ref keeps the once-created Selection's callback from going stale when
     // the prop changes (mirrors DataGrid's onSelectionChangedRef).
@@ -2491,7 +2539,7 @@ function NestedCardParent(props) {
     const hasAggregate = columns.some((c) => c.aggregate);
     const [selected, setSelected] = React.useState(new Set());
     const [expanded, setExpanded] = React.useState(new Set());
-    const { get, ensure } = useChildren(nested.getChildren);
+    const { get, ensure } = useChildren(nested.getChildren, nested.reloadToken);
     // requires-parent gating needs a Fluent Selection over the parent rows; cards have
     // none, so surface the unsupported config and fall back to independent selection.
     React.useEffect(() => {
@@ -2614,6 +2662,18 @@ function NestedTriggerCell(props) {
                 clearTimeout(hoverTimer.current);
         };
     }, []);
+    // Invalidate the on-demand cache when `reloadToken` changes (e.g. after associating a
+    // new child): drop the loaded `entry` so the next open/hover re-fetches via `load()`
+    // (which early-returns on a non-null `entry`). Value-compared so it's StrictMode-safe.
+    // Edge: if the panel/callout is OPEN at bump time it shows the spinner until reopened —
+    // acceptable, these modes are on-demand and usually closed during a toolbar action.
+    const prevReloadToken = React.useRef(nested.reloadToken);
+    React.useEffect(() => {
+        if (nested.reloadToken === prevReloadToken.current)
+            return;
+        prevReloadToken.current = nested.reloadToken;
+        setEntry(null);
+    }, [nested.reloadToken]);
     // Resolve children once, on demand.
     const load = React.useCallback(() => {
         setEntry((prev) => {
@@ -2791,7 +2851,9 @@ function DetailPaneChildren(props) {
         return () => {
             alive = false;
         };
-    }, [parent, nested]);
+        // `nested.reloadToken` makes the refetch explicit on a child mutation (e.g. addExisting)
+        // rather than relying on `nested`'s inline-literal identity changing each render.
+    }, [parent, nested, nested.reloadToken]);
     if (rows === null)
         return jsxRuntime.jsx(react.Text, { variant: "small", children: "Loading\u2026" });
     return (jsxRuntime.jsx(DataGrid, { items: rows, columns: nested.childColumns, registry: nested.childRegistry, compact: true, selectionMode: nested.childSelectionMode, onSelectionChanged: nested.onChildSelectionChanged ? (sel) => nested.onChildSelectionChanged(parent, sel) : undefined, editable: nested.childEditable, editTrigger: nested.childEditTrigger, onValueChange: nested.onChildValueChange