@dataverse-kit/grid-kit 0.1.0 → 0.3.0

package/dist/hosts/CardGrid.d.ts

@@ -6,7 +6,8 @@ import type { CardGridProps } from '../types';
  * ratings, etc. look identical). Mirrors the Grid Customizer's "Card List" type.
  *
  * Selection is checkbox-based (manual Set), independent of Fluent's DetailsList
- * Selection.
+ * Selection. `rowCommands` adds a per-card right-click context menu (parity with
+ * `DataGrid` / `NestedCardParent`), suppressing the native browser menu.
  */
 export declare function CardGrid<T extends Record<string, unknown>>(props: CardGridProps<T>): JSX.Element;
 //# sourceMappingURL=CardGrid.d.ts.map

package/dist/hosts/CardGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardGrid.d.ts","sourceRoot":"","sources":["../../src/hosts/CardGrid.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,aAAa,EAAa,MAAM,UAAU,CAAC;AASzD;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CA6GhG"}
+{"version":3,"file":"CardGrid.d.ts","sourceRoot":"","sources":["../../src/hosts/CardGrid.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,aAAa,EAAa,MAAM,UAAU,CAAC;AAUzD;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAoIhG"}

package/dist/hosts/nested/NestedTriggerCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NestedTriggerCell.d.ts","sourceRoot":"","sources":["../../../src/hosts/nested/NestedTriggerCell.tsx"],"names":[],"mappings":";AASA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAUhD;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE;IAC7G,MAAM,EAAE,CAAC,CAAC;IACV,MAAM,EAAE,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CAC5B,GAAG,GAAG,CAAC,OAAO,CAsHd"}
+{"version":3,"file":"NestedTriggerCell.d.ts","sourceRoot":"","sources":["../../../src/hosts/nested/NestedTriggerCell.tsx"],"names":[],"mappings":";AASA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAUhD;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE;IAC7G,MAAM,EAAE,CAAC,CAAC;IACV,MAAM,EAAE,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CAC5B,GAAG,GAAG,CAAC,OAAO,CAkId"}

package/dist/hosts/nested/useChildren.d.ts

@@ -8,7 +8,7 @@ export interface ChildEntry<C> {
  * never fetches — this just normalizes the consumer-supplied resolver and tracks
  * loading. Call `ensure(key, parent)` on demand (row expand / panel open / hover).
  */
-export declare function useChildren<T, C>(getChildren: (parent: T) => C[] | Promise<C[]>): {
+export declare function useChildren<T, C>(getChildren: (parent: T) => C[] | Promise<C[]>, reloadToken?: string | number): {
     get: (key: string) => ChildEntry<C> | undefined;
     ensure: (key: string, parent: T) => void;
 };

package/dist/hosts/nested/useChildren.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useChildren.d.ts","sourceRoot":"","sources":["../../../src/hosts/nested/useChildren.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,UAAU,CAAC,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,CAAC,EAAE,CAAC;CACX;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,WAAW,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,OAAO,CAAC,CAAC,EAAE,CAAC;eA8BhD,MAAM,KAAG,WAAW,CAAC,CAAC,GAAG,SAAS;kBAfxD,MAAM,UAAU,CAAC;EAkB1B"}
+{"version":3,"file":"useChildren.d.ts","sourceRoot":"","sources":["../../../src/hosts/nested/useChildren.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,UAAU,CAAC,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,CAAC,EAAE,CAAC;CACX;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,CAAC,EAC9B,WAAW,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,OAAO,CAAC,CAAC,EAAE,CAAC,EAC9C,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM;eA6DC,MAAM,KAAG,WAAW,CAAC,CAAC,GAAG,SAAS;kBAtCxD,MAAM,UAAU,CAAC;EAyC1B"}

package/dist/index.esm.js

@@ -2134,10 +2134,18 @@ function resolveCardLayout(columns, card) {
  * ratings, etc. look identical). Mirrors the Grid Customizer's "Card List" type.
  *
  * Selection is checkbox-based (manual Set), independent of Fluent's DetailsList
- * Selection.
+ * Selection. `rowCommands` adds a per-card right-click context menu (parity with
+ * `DataGrid` / `NestedCardParent`), suppressing the native browser menu.
  */
 function CardGrid(props) {
-    const { items, columns, card, selectionMode = 'none', onSelectionChanged, toolbar, pagination, onPageChange, onActiveItemChanged, fill, height, } = props;
+    const { items, columns, card, selectionMode = 'none', onSelectionChanged, toolbar, pagination, onPageChange, onActiveItemChanged, fill, height, rowCommands, } = props;
+    // Per-row right-click menu (parity with DataGrid / NestedCardParent). For these
+    // raw-div cards we invoke the hook fn from a native onContextMenu and suppress the
+    // browser menu with e.preventDefault() ourselves (the hook's `return false` only
+    // matters to Fluent's DetailsList onItemContextMenu contract). CardGrid is FLAT — no
+    // nested child region — so (unlike NestedCardParent) nothing needs contextmenu
+    // stopPropagation.
+    const { onItemContextMenu, contextMenuElement } = useRowContextMenu(rowCommands);
     const edit = useEditState();
     const { getKeyFn, ctx } = useGridContext(props, edit);
     // Card layout derivation is shared (and unit-tested) via resolveCardLayout —
@@ -2176,10 +2184,21 @@ function CardGrid(props) {
                         paddingTop: 4,
                     }, children: items.map((item) => {
                         const key = getKeyFn(item);
-                        return (jsxs("div", { className: cardClass, style: cardHeight ? { height: cardHeight } : undefined, onClick: () => onActiveItemChanged?.(item), children: [jsxs(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "start", children: [jsx(Text, { variant: "mediumPlus", styles: { root: { fontWeight: 600 } }, children: renderField(byField.get(titleField ?? ''), item) ?? rawValue(item, titleField) }), selectionMode !== 'none' && (
+                        return (jsxs("div", { className: cardClass, style: cardHeight ? { height: cardHeight } : undefined, onClick: () => onActiveItemChanged?.(item), 
+                            // Right-click anywhere on the card opens its row menu. The card is the
+                            // row-equivalent target: the title/body cells have no handler to intercept
+                            // it, and the selection checkbox below only stops LEFT-click (its onClick
+                            // stopPropagation), so a right-click on any of them bubbles here
+                            // (preventDefault suppresses the browser menu).
+                            onContextMenu: onItemContextMenu
+                                ? (e) => {
+                                    e.preventDefault();
+                                    onItemContextMenu(item, undefined, e.nativeEvent);
+                                }
+                                : undefined, children: [jsxs(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "start", children: [jsx(Text, { variant: "mediumPlus", styles: { root: { fontWeight: 600 } }, children: renderField(byField.get(titleField ?? ''), item) ?? rawValue(item, titleField) }), selectionMode !== 'none' && (
                                         // Stop the click from bubbling to the card's onActiveItemChanged.
                                         jsx("span", { onClick: (e) => e.stopPropagation(), children: jsx(Checkbox, { checked: selected.has(key), onChange: (_, checked) => toggleSelect(item, checked), ariaLabel: "Select card" }) }))] }), imageField && rawValue(item, imageField) && (jsx("img", { className: cardImageClass, src: rawValue(item, imageField), alt: "" })), subtitleField && (jsx(Text, { variant: "small", styles: { root: { color: '#605e5c' } }, children: rawValue(item, subtitleField) })), bodyColumns.map((col) => (jsxs("div", { className: bodyRowClass, children: [jsx(Text, { variant: "small", styles: { root: { color: '#605e5c' } }, children: col.name }), jsx("span", { children: renderField(col, item) })] }, col.key)))] }, key));
-                    }) }) }), pagination && jsx(GridPaginationFooter, { pagination: pagination, onPageChange: onPageChange })] }));
+                    }) }) }), pagination && jsx(GridPaginationFooter, { pagination: pagination, onPageChange: onPageChange }), contextMenuElement] }));
 }
 
 /**
@@ -2289,10 +2308,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] = useState({});
     const cacheRef = 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 = 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 = 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 = useRef(true);
@@ -2305,6 +2331,7 @@ function useChildren(getChildren) {
     const ensure = 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 } }));
@@ -2317,6 +2344,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 = useRef(reloadToken);
+    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 = useCallback((key) => cache[key], [cache]);
     return { get, ensure };
 }
@@ -2343,7 +2394,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] = 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).
@@ -2471,7 +2522,7 @@ function NestedCardParent(props) {
     const hasAggregate = columns.some((c) => c.aggregate);
     const [selected, setSelected] = useState(new Set());
     const [expanded, setExpanded] = 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(() => {
@@ -2594,6 +2645,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 = useRef(nested.reloadToken);
+    useEffect(() => {
+        if (nested.reloadToken === prevReloadToken.current)
+            return;
+        prevReloadToken.current = nested.reloadToken;
+        setEntry(null);
+    }, [nested.reloadToken]);
     // Resolve children once, on demand.
     const load = useCallback(() => {
         setEntry((prev) => {
@@ -2771,7 +2834,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 jsx(Text, { variant: "small", children: "Loading\u2026" });
     return (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