@xh/hoist 77.0.0-SNAPSHOT.1761672695220 → 77.0.0-SNAPSHOT.1761763880882

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## 77.0.0-SNAPSHOT - unreleased
 
+### 🐞 Bug Fixes
+* Fixes regressions in grid context menu for filtering and copy/paste introduced by agGrid v34.
+* Fixes `getExpandState` in `AgGridModel`
+
+* Note: AgGrid no longer supports html markup in context menus.  Applications setting the
+`RecordGridAction` `text` or `secondaryText` property to markup should be sure to use React nodes
+instead.
+
 ### 💥 Breaking Changes
 
 * The `disableXssProtection` flag supported by `AppSpec` and `FieldSpec` has been removed and
@@ -14,7 +22,7 @@
     * Apps that were previously opting-out via `disableXssProtection` should simply remove that
       flag. Apps for which this protection remains important should enable at either the app level
       or for selected Fields and/or Stores.
-      
+
 ## 76.2.0 - 2025-10-22
 
 ### ⚙️ Technical

package/build/types/cmp/grid/impl/MenuSupport.d.ts

@@ -1,6 +1,6 @@
 import { GridModel } from '@xh/hoist/cmp/grid';
-import { GridContextMenuSpec } from '../GridContextMenu';
-import type { GetContextMenuItemsParams, MenuItemDef } from '@xh/hoist/kit/ag-grid';
+import { type GetContextMenuItemsParams, type MenuItemDef } from '@xh/hoist/kit/ag-grid';
+import type { GridContextMenuSpec } from '../GridContextMenu';
 /**
  * @internal
  */

package/build/types/data/RecordAction.d.ts

@@ -1,12 +1,12 @@
-import { ReactElement } from 'react';
-import { Intent, PlainObject, TestSupportProps } from '../core';
+import { ReactElement, ReactNode } from 'react';
+import { Intent, TestSupportProps } from '../core';
 import { StoreRecord } from './StoreRecord';
 import { Column, GridModel } from '../cmp/grid';
 export interface RecordActionSpec extends TestSupportProps {
     /** Label to be displayed. */
-    text?: string;
+    text?: ReactNode;
     /** Additional label to be displayed, usually in a minimal fashion.*/
-    secondaryText?: string;
+    secondaryText?: ReactNode;
     /** Icon to be displayed.*/
     icon?: ReactElement;
     /** Intent to be used for rendering the action.*/
@@ -72,15 +72,15 @@ export interface ActionFnData {
  * @see GridContextMenuSpec
  */
 export declare class RecordAction {
-    text: string;
-    secondaryText: string;
+    text: ReactNode;
+    secondaryText: ReactNode;
     icon: ReactElement;
     intent: Intent;
     className: string;
     tooltip: string;
     actionFn: (data: ActionFnData) => void;
-    displayFn: (data: ActionFnData) => PlainObject;
-    items: Array<RecordAction | string>;
+    displayFn: (data: ActionFnData) => RecordActionSpec;
+    items: RecordActionLike[];
     disabled: boolean;
     hidden: boolean;
     recordsRequired: boolean | number;
@@ -90,17 +90,7 @@ export declare class RecordAction {
      * Called by UI elements to get the display configuration for rendering the action.
      * @internal
      */
-    getDisplaySpec({ record, selectedRecords, gridModel, column, ...rest }: ActionFnData): {
-        icon: ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-        text: string;
-        secondaryText: string;
-        intent: Intent;
-        className: string;
-        tooltip: string;
-        items: (string | RecordAction)[];
-        hidden: boolean;
-        disabled: boolean;
-    };
+    getDisplaySpec({ record, selectedRecords, gridModel, column, ...rest }: ActionFnData): RecordActionSpec;
     /**
      * Called by UI elements to trigger the action.
      * @internal

package/build/types/kit/ag-grid/index.d.ts

@@ -13,8 +13,8 @@ export declare let agGridVersion: any;
  * implementations.
  */
 export type { GridOptions, GridApi, SortDirection, ColDef, ColGroupDef, GetContextMenuItemsParams, GridReadyEvent, IHeaderGroupParams, IHeaderParams, ProcessCellForExportParams, CellClassParams, HeaderClassParams, HeaderValueGetterParams, ICellRendererParams, ITooltipParams, IRowNode, RowClassParams, ValueGetterParams, ValueSetterParams, MenuItemDef, CellPosition, NavigateToNextCellParams, ColumnEvent, ColumnState as AgColumnState, Column as AgColumn, ColumnGroup as AgColumnGroup, AgProvidedColumnGroup, RowDoubleClickedEvent, RowClickedEvent, RowHeightParams, CellClickedEvent, CellContextMenuEvent, CellDoubleClickedEvent, CellEditingStartedEvent, CellEditingStoppedEvent } from 'ag-grid-community';
-export type { CustomCellEditorProps } from 'ag-grid-react';
-export { useGridCellEditor } from 'ag-grid-react';
+export type { CustomCellEditorProps, CustomMenuItemProps } from 'ag-grid-react';
+export { useGridCellEditor, useGridMenuItem } from 'ag-grid-react';
 /**
  * Expose application versions of ag-Grid to Hoist.
  * Typically called in the Bootstrap.js. of the application.

package/cmp/ag-grid/AgGridModel.ts

@@ -18,6 +18,7 @@ import {
     isEmpty,
     isEqual,
     isNil,
+    isObject,
     partition,
     setWith,
     startCase
@@ -415,27 +416,23 @@ export class AgGridModel extends HoistModel {
 
         const expandState = {};
         this.agApi.forEachNode(node => {
-            if (!node.allChildrenCount) return;
-
-            if (node.expanded) {
-                // Skip if parent is collapsed. Parents are visited before children,
-                // so should already be in expandState if expanded.
-                const parent = node.parent;
-                if (
-                    parent &&
-                    parent.id !== 'ROOT_NODE_ID' &&
-                    !has(expandState, this.getGroupNodePath(parent))
-                ) {
-                    return;
-                }
-
-                // Note use of setWith + customizer - required to ensure that nested nodes are
-                // serialized as objects - see https://github.com/xh/hoist-react/issues/3550.
-                const path = this.getGroupNodePath(node);
-                setWith(expandState, path, true, () => ({}));
+            if (!node.allChildrenCount || !node.expanded) return;
+            // Skip if parent is collapsed. Parents are visited before children,
+            // so should already be in expandState if expanded.
+            const parent = node.parent;
+            if (
+                parent &&
+                parent.id !== 'ROOT_NODE_ID' &&
+                !has(expandState, this.getGroupNodePath(parent))
+            ) {
+                return;
             }
-        });
 
+            const path = this.getGroupNodePath(node);
+            // Note use of setWith + customizer - required to ensure that nested nodes are
+            // serialized as objects - see https://github.com/xh/hoist-react/issues/3550.
+            setWith(expandState, path, true, nsValue => (isObject(nsValue) ? nsValue : {}));
+        });
         return expandState;
     }
 

package/cmp/grid/Grid.ts

@@ -273,6 +273,7 @@ export class GridLocalModel extends HoistModel {
                 mode: selModel.mode == 'single' ? 'singleRow' : 'multiRow',
                 enableClickSelection: selModel.isEnabled,
                 isRowSelectable: () => selModel.isEnabled,
+                copySelectedRows: selModel.isEnabled,
                 checkboxes: false,
                 headerCheckbox: false
             };
@@ -321,7 +322,7 @@ export class GridLocalModel extends HoistModel {
     getContextMenuItems = (params: GetContextMenuItemsParams) => {
         const {model} = this,
             {contextMenu} = model;
-        if (!contextMenu || XH.isMobileApp || model.isEditing) return null;
+        if (!contextMenu || XH.isMobileApp || model.isEditing) return [];
 
         // Manipulate selection if needed.
         if (model.selModel.isEnabled) {
@@ -336,7 +337,7 @@ export class GridLocalModel extends HoistModel {
         }
 
         const ret = getAgGridMenuItems(params, model, contextMenu);
-        if (isEmpty(ret)) return null;
+        if (isEmpty(ret)) return [];
 
         return ret;
     };

package/cmp/grid/impl/MenuSupport.ts

@@ -4,19 +4,22 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {Some, XH} from '@xh/hoist/core';
+import {isEmpty, isFunction, isNil, isString, uniq} from 'lodash';
+import copy from 'clipboard-copy';
+import {hoistCmp, type HoistProps, type Some, XH} from '@xh/hoist/core';
 import {Column, GridModel} from '@xh/hoist/cmp/grid';
-import {RecordAction, Store, StoreRecord} from '@xh/hoist/data';
-import {convertIconToHtml, Icon} from '@xh/hoist/icon';
+import {RecordAction, type RecordActionSpec, Store, StoreRecord} from '@xh/hoist/data';
+import {Icon} from '@xh/hoist/icon';
 import {filterConsecutiveMenuSeparators} from '@xh/hoist/utils/impl';
-import copy from 'clipboard-copy';
-import {isEmpty, isFunction, isNil, isString, uniq} from 'lodash';
-import {isValidElement} from 'react';
-import {renderToStaticMarkup} from '@xh/hoist/utils/react';
-import {GridContextMenuItemLike, GridContextMenuSpec} from '../GridContextMenu';
-
-import type {GetContextMenuItemsParams, MenuItemDef} from '@xh/hoist/kit/ag-grid';
 import {wait} from '@xh/hoist/promise';
+import {div, span} from '@xh/hoist/cmp/layout';
+import {
+    useGridMenuItem,
+    type GetContextMenuItemsParams,
+    type MenuItemDef,
+    type CustomMenuItemProps
+} from '@xh/hoist/kit/ag-grid';
+import type {GridContextMenuItemLike, GridContextMenuSpec} from '../GridContextMenu';
 
 /**
  * @internal
@@ -76,22 +79,22 @@ function buildMenuItems(
             subMenu = buildMenuItems(displaySpec.items, record, gridModel, column, agParams);
         }
 
-        const icon = isValidElement(displaySpec.icon) ? convertIconToHtml(displaySpec.icon) : null;
-
         const cssClasses = ['xh-grid-menu-option'];
         if (displaySpec.intent)
             cssClasses.push(`xh-grid-menu-option--intent-${displaySpec.intent}`);
         if (displaySpec.className) cssClasses.push(displaySpec.className);
 
         ret.push({
-            name: displaySpec.text,
-            shortcut: displaySpec.secondaryText,
-            icon,
+            menuItem: RecordActionMenuItem,
+            menuItemParams: {
+                displaySpec
+            },
+            // Standard MenuActionProps
             cssClasses,
             subMenu,
             tooltip: displaySpec.tooltip,
             disabled: displaySpec.disabled,
-            // Avoid specifying action if no handler, allows submenus to remain open if accidentally clicked
+            // Don't specify action if no handler, allows submenus to remain open if clicked
             action: action.actionFn ? () => action.call(actionParams) : undefined
         });
     });
@@ -186,14 +189,9 @@ function replaceHoistToken(token: string, gridModel: GridModel): Some<RecordActi
                                   column,
                                   gridModel
                               })
-                            : (values[0] ?? '[blank]'),
-                        // Grid col renderers will very typically return elements, but we need this to be a string.
-                        // That's the contract for `RecordAction.text`, but even more importantly, we end up piping
-                        // those actions into Ag-Grid context menus, which *only* accept strings / HTML markup
-                        // and *not* ReactElements (as of AG v28.2).
-                        text = isValidElement(elem) ? renderToStaticMarkup(elem) : elem;
-
-                    return {text};
+                            : (values[0] ?? '[blank]');
+
+                    return {text: elem};
                 };
 
             return new RecordAction({
@@ -302,3 +300,43 @@ function levelExpandAction(gridModel: GridModel): RecordAction {
         }
     });
 }
+
+/**
+ * A MenuItem for a Hoist RecordAction.
+ *
+ * A variant of the standard ag-Grid Context menu.  Unlike built-in ag-Grid menu item,
+ * provides support for specifying 'text' and 'shortcut' display as react elements.
+ *
+ * @internal
+ */
+
+interface RecordActionMenuItemProps extends HoistProps, CustomMenuItemProps {
+    displaySpec: RecordActionSpec;
+}
+
+const RecordActionMenuItem = hoistCmp<RecordActionMenuItemProps>({
+    render({displaySpec, subMenu}: RecordActionMenuItemProps) {
+        useGridMenuItem({
+            configureDefaults: () => true
+        });
+
+        return div(
+            span({className: 'ag-menu-option-part ag-menu-option-icon', item: displaySpec.icon}),
+            span({className: 'ag-menu-option-part ag-menu-option-text', item: displaySpec.text}),
+            span({
+                className: 'ag-menu-option-part ag-menu-option-shortcut',
+                item: displaySpec.secondaryText
+            }),
+            span({
+                className: 'ag-menu-option-part ag-menu-option-popup-pointer',
+                item: subMenu
+                    ? span({
+                          className: 'ag-icon ag-icon-small-right',
+                          unselectable: 'on',
+                          role: 'presentation'
+                      })
+                    : ''
+            })
+        );
+    }
+});

package/data/RecordAction.ts

@@ -6,17 +6,17 @@
  */
 
 import {isBoolean, isEmpty, isNil, isNumber, isString} from 'lodash';
-import {ReactElement} from 'react';
-import {Intent, PlainObject, TestSupportProps} from '../core';
+import {ReactElement, ReactNode} from 'react';
+import {Intent, TestSupportProps} from '../core';
 import {StoreRecord} from './StoreRecord';
 import {Column, GridModel} from '../cmp/grid';
 
 export interface RecordActionSpec extends TestSupportProps {
     /** Label to be displayed. */
-    text?: string;
+    text?: ReactNode;
 
     /** Additional label to be displayed, usually in a minimal fashion.*/
-    secondaryText?: string;
+    secondaryText?: ReactNode;
 
     /** Icon to be displayed.*/
     icon?: ReactElement;
@@ -100,15 +100,15 @@ export interface ActionFnData {
  * @see GridContextMenuSpec
  */
 export class RecordAction {
-    text: string;
-    secondaryText: string;
+    text: ReactNode;
+    secondaryText: ReactNode;
     icon: ReactElement;
     intent: Intent;
     className: string;
     tooltip: string;
     actionFn: (data: ActionFnData) => void;
-    displayFn: (data: ActionFnData) => PlainObject;
-    items: Array<RecordAction | string>;
+    displayFn: (data: ActionFnData) => RecordActionSpec;
+    items: RecordActionLike[];
     disabled: boolean;
     hidden: boolean;
     recordsRequired: boolean | number;
@@ -152,11 +152,17 @@ export class RecordAction {
      * Called by UI elements to get the display configuration for rendering the action.
      * @internal
      */
-    getDisplaySpec({record, selectedRecords, gridModel, column, ...rest}: ActionFnData) {
+    getDisplaySpec({
+        record,
+        selectedRecords,
+        gridModel,
+        column,
+        ...rest
+    }: ActionFnData): RecordActionSpec {
         const recordCount =
             record && isEmpty(selectedRecords) ? 1 : selectedRecords ? selectedRecords.length : 0;
 
-        const defaultDisplay = {
+        const defaultDisplay: RecordActionSpec = {
             icon: this.icon,
             text: this.text,
             secondaryText: this.secondaryText,

package/kit/ag-grid/index.ts

@@ -60,8 +60,8 @@ export type {
     CellEditingStoppedEvent
 } from 'ag-grid-community';
 
-export type {CustomCellEditorProps} from 'ag-grid-react';
-export {useGridCellEditor} from 'ag-grid-react';
+export type {CustomCellEditorProps, CustomMenuItemProps} from 'ag-grid-react';
+export {useGridCellEditor, useGridMenuItem} from 'ag-grid-react';
 
 const MIN_VERSION = '34.2.0';
 const MAX_VERSION = '34.*.*';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "77.0.0-SNAPSHOT.1761672695220",
+  "version": "77.0.0-SNAPSHOT.1761763880882",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",