@dataverse-kit/grid-kit 0.1.0 → 0.2.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/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] }));
 }
 
 /**