@linzjs/step-ag-grid 29.13.0 → 29.14.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "29.13.0",
+  "version": "29.14.1",
   "keywords": [
     "aggrid",
     "ag-grid",

package/src/components/Grid.tsx

@@ -8,6 +8,7 @@ import {
   CellKeyDownEvent,
   ColDef,
   ColGroupDef,
+  ColumnMovedEvent,
   ColumnResizedEvent,
   EditableCallback,
   EditableCallbackParams,
@@ -15,6 +16,7 @@ import {
   GridOptions,
   GridReadyEvent,
   GridSizeChangedEvent,
+  IRowNode,
   ModelUpdatedEvent,
   ModuleRegistry,
   RowClickedEvent,
@@ -37,6 +39,8 @@ import { compareNaturalInsensitive, fnOrVar, isNotEmpty } from '../utils/util';
 import { clickInputWhenContainingCellClicked } from './clickInputWhenContainingCellClicked';
 import { GridHeaderSelect } from './gridHeader';
 import { GridContextMenuComponent, useGridContextMenu } from './gridHook';
+import { useGridCopy } from './gridHook/useGridCopy';
+import { CellLocation, useGridRangeSelection } from './gridHook/useGridRangeSelection';
 import { GridNoRowsOverlay } from './GridNoRowsOverlay';
 import { usePostSortRowsHook } from './PostSortRowsHook';
 import { GridBaseRow, GridOnRowDragEndProps } from './types';
@@ -44,135 +48,148 @@ import { GridBaseRow, GridOnRowDragEndProps } from './types';
 ModuleRegistry.registerModules([AllCommunityModule]);
 
 export interface GridProps<TData extends GridBaseRow = GridBaseRow> {
-  readOnly?: boolean; // set all editables to false when read only, make all styles black, otherwise style is gray for not editable
-  defaultPostSort?: boolean; // Retain sort order after edit, Defaults to true.
-  selectable?: boolean;
-  enableClickSelection?: boolean;
-  enableSelectionWithoutKeys?: boolean;
-  hideSelectColumn?: boolean;
-  theme?: string; // should have prefix ag-theme-
   ['data-testid']?: string;
-  domLayout?: GridOptions['domLayout'];
-  externalSelectedItems?: TData[];
-  externalSelectedIds?: TData['id'][];
-  setExternalSelectedItems?: (items: TData[]) => void;
-  setExternalSelectedIds?: (ids: TData['id'][]) => void;
-  defaultColDef?: GridOptions['defaultColDef'];
+  theme?: string;
+
+  // ─── Grid State ────────────────────────────────────────────────
+  loading?: boolean;
+  readOnly?: boolean;
+  suppressReadOnlyStyle?: boolean;
+
+  // ─── Data & Columns ────────────────────────────────────────────
   columnDefs: ColDef<TData>[] | ColGroupDef<TData>[];
+  defaultColDef?: GridOptions['defaultColDef'];
+  defaultPostSort?: boolean;
+  domLayout?: GridOptions['domLayout'];
+  pinnedBottomRowData?: GridOptions['pinnedBottomRowData'];
+  pinnedTopRowData?: GridOptions['pinnedTopRowData'];
   rowData: GridOptions['rowData'];
-  selectColumnPinned?: ColDef['pinned'];
-  noRowsOverlayText?: string;
-  noRowsMatchingOverlayText?: string;
-  animateRows?: boolean;
-  rowHeight?: number;
   rowClassRules?: GridOptions['rowClassRules'];
+  rowHeight?: number;
   rowSelection?: 'single' | 'multiple';
+  sizeColumns?: 'fit' | 'auto' | 'auto-skip-headers' | 'none';
+
+  // ─── Selection ────────────────────────────────────────────────
   autoSelectFirstRow?: boolean;
+  enableClickSelection?: boolean;
+  enableRangeSelection?: boolean;
+  enableSelectionWithoutKeys?: boolean;
+  externalSelectedIds?: TData['id'][];
+  externalSelectedItems?: TData[];
+  hideSelectColumn?: boolean;
+  selectColumnPinned?: ColDef['pinned'];
+  selectable?: boolean;
+  setExternalSelectedIds?: (ids: TData['id'][]) => void;
+  setExternalSelectedItems?: (items: TData[]) => void;
+
+  // ─── Editing ──────────────────────────────────────────────────
+  onBulkEditingComplete?: () => Promise<void> | void;
+  singleClickEdit?: boolean;
+
+  // ─── Context Menu ─────────────────────────────────────────────
+  contextMenu?: GridContextMenuComponent<TData>;
+  contextMenuSelectRow?: boolean;
+
+  // ─── Callbacks / Events ───────────────────────────────────────
   onCellFocused?: (props: { colDef: ColDef<TData>; data: TData }) => void;
   onColumnMoved?: GridOptions['onColumnMoved'];
-  rowDragText?: GridOptions['rowDragText'];
-  onRowDragEnd?: (props: GridOnRowDragEndProps<TData>) => Promise<void> | void;
-  alwaysShowVerticalScroll?: boolean;
-  suppressColumnVirtualization?: GridOptions['suppressColumnVirtualisation'];
-  suppressReadOnlyStyle?: boolean;
-  /**
-   * When the grid is rendered using sizeColumns=="auto" this is called initially with the required container size to fit all content.
-   * This allows you set the size of the panel to fit perfectly.
-   */
   onContentSize?: (props: { width: number }) => void;
-  /**
-   * <ul>
-   * <li>"none" to use aggrid defaults.</li>
-   * <li>"fit" will adjust columns to fit within panel via min/max/initial sizing.
-   * <b>Note:</b> This is only really needed if you have auto-height columns which prevents "auto" from working.
-   * </li>
-   * <li>"auto" will size columns based on their content but still obeying min/max sizing.</li>
-   * <li>"auto-skip-headers" (default) same as auto but does not take headers into account.</li>
-   * </ul>
-   *
-   * If you want to stretch to container width if width is greater than the container add a flex column.
-   */
-  sizeColumns?: 'fit' | 'auto' | 'auto-skip-headers' | 'none';
-  /**
-   * On first don't return a content size larger than this.
-   */
-  maxInitialWidth?: number;
-  /**
-   * When pressing tab whilst editing the grid will select and edit the next cell if available.
-   * Once the last cell to edit closes this callback is called.
-   */
-  onBulkEditingComplete?: () => Promise<void> | void;
 
   /**
-   * Context menu definition if required.
+   * @deprecated You should drive your app off selection states. This will be deleted.
    */
-  contextMenu?: GridContextMenuComponent<TData>;
-
+  onRowClicked?: (event: RowClickedEvent) => void;
   /**
-   * Whether to select row on context menu.
+   * @deprecated You should drive your app off selection states. This will be deleted.
    */
-  contextMenuSelectRow?: boolean;
+  onRowDoubleClicked?: (event: RowDoubleClickedEvent) => void;
+  onRowDragEnd?: (props: GridOnRowDragEndProps<TData>) => Promise<void> | void;
 
-  /**
-   * Defaults to false.
-   */
-  singleClickEdit?: boolean;
+  // ─── Row Behavior ─────────────────────────────────────────────
+  animateRows?: boolean;
+  alwaysShowVerticalScroll?: boolean;
+  rowDragText?: GridOptions['rowDragText'];
 
-  loading?: boolean;
+  // ─── Overlays / Messages ──────────────────────────────────────
+  noRowsOverlayText?: string;
+  noRowsMatchingOverlayText?: string;
+
+  // ─── Miscellaneous ────────────────────────────────────────────
+  maxInitialWidth?: number;
   suppressCellFocus?: boolean;
-  pinnedTopRowData?: GridOptions['pinnedTopRowData'];
-  pinnedBottomRowData?: GridOptions['pinnedBottomRowData'];
-  onRowClicked?: (event: RowClickedEvent) => void;
-  onRowDoubleClicked?: (event: RowDoubleClickedEvent) => void;
+  suppressColumnVirtualization?: GridOptions['suppressColumnVirtualisation'];
 }
 
 /**
  * Wrapper for AgGrid to add commonly used functionality.
  */
 export const Grid = <TData extends GridBaseRow = GridBaseRow>({
+  theme = 'ag-theme-step-default',
   'data-testid': dataTestId,
+
+  // ─── Grid State ───────────────────────────────
+  suppressReadOnlyStyle = false,
+
+  // ─── Data & Columns ───────────────────────────
   defaultPostSort = true,
+  rowData,
+  rowHeight = theme === 'ag-theme-step-default' ? 40 : theme === 'ag-theme-step-compact' ? 36 : 40,
   rowSelection = 'multiple',
-  suppressColumnVirtualization = true,
-  theme = 'ag-theme-step-default',
   sizeColumns = 'auto',
+
+  // ─── Selection ────────────────────────────────
+  autoSelectFirstRow,
+  enableRangeSelection = false,
+  externalSelectedIds,
+  externalSelectedItems,
   selectColumnPinned = 'left',
-  contextMenuSelectRow = false,
-  singleClickEdit = false,
-  rowData,
-  rowHeight = theme === 'ag-theme-step-default' ? 40 : theme === 'ag-theme-step-compact' ? 36 : 40,
   selectable,
-  autoSelectFirstRow,
+  setExternalSelectedIds,
+  setExternalSelectedItems,
+
+  // ─── Editing ──────────────────────────────────
+  singleClickEdit = false,
+
+  // ─── Context Menu ─────────────────────────────
+  contextMenuSelectRow = false,
+  contextMenu,
+
+  // ─── Callbacks / Events ───────────────────────
   onCellFocused: paramsOnCellFocused,
+  onColumnMoved,
+
+  // ─── Row Behavior ─────────────────────────────
+  suppressColumnVirtualization = true,
+
+  // ─── Miscellaneous ────────────────────────────
   maxInitialWidth,
-  suppressReadOnlyStyle = false,
-  externalSelectedItems,
-  setExternalSelectedItems,
-  externalSelectedIds,
-  setExternalSelectedIds,
+
+  // ─── Spread Remaining Params ──────────────────
   ...params
 }: GridProps<TData>): ReactElement => {
   const {
+    setApis,
+    setExternallySelectedItemsAreInSync,
+    setOnBulkEditingComplete,
     gridReady,
     gridRenderState,
-    setApis,
-    ensureRowVisible,
-    getFirstRowId,
-    selectRowsById,
-    focusByRowById,
-    ensureSelectedRowIsVisible,
+    externallySelectedItemsAreInSync,
+    showNoRowsOverlay,
     autoSizeColumns,
     sizeColumnsToFit,
-    externallySelectedItemsAreInSync,
-    setExternallySelectedItemsAreInSync,
-    isExternalFilterPresent,
     doesExternalFilterPass,
-    setOnBulkEditingComplete,
+    ensureRowVisible,
+    ensureSelectedRowIsVisible,
+    focusByRowById,
     getColDef,
-    showNoRowsOverlay,
+    getFirstRowId,
+    isExternalFilterPresent,
     prePopupOps,
+    selectRowsById,
+
     startCellEditing: propStartCellEditing,
   } = useGridContext<TData>();
+
   // CellEditingStop event happens too much for one edit
   const startedEditRef = useRef(false);
   const startCellEditing = useCallback(
@@ -328,7 +345,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
       return;
     }
     hasSelectedFirstItem.current = true;
-    if (isNotEmpty(rowData) && isEmpty(externalSelectedItems)) {
+    if (isNotEmpty(rowData) && isEmpty(externalSelectedItems) && isEmpty(externalSelectedIds)) {
       const firstRowId = getFirstRowId();
       if (autoSelectFirstRow && selectable) {
         selectRowsById([firstRowId]);
@@ -346,6 +363,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
     selectRowsById,
     getFirstRowId,
     selectable,
+    externalSelectedIds,
   ]);
 
   /**
@@ -544,19 +562,6 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
     [startCellEditing],
   );
 
-  /**
-   * Handle single click edits
-   */
-  const onCellClicked = useCallback(
-    (event: CellClickedEvent) => {
-      const editable = fnOrVar(event.colDef?.editable, event);
-      if ((editable && event.colDef.singleClickEdit) ?? singleClickEdit) {
-        void startCellEditing({ rowId: event.data.id, colId: event.column.getColId() });
-      }
-    },
-    [singleClickEdit, startCellEditing],
-  );
-
   const onCellEditingStopped = useCallback(
     (event: AgGridEvent<TData>) => {
       if (!startedEditRef.current) {
@@ -613,6 +618,93 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
     [prePopupOps, startCellEditing],
   );
 
+  const { cellContextMenu, contextMenuComponent } = useGridContextMenu({
+    contextMenu,
+    contextMenuSelectRow,
+  });
+
+  const hasSelectedMoreThanOneCellRef = useRef(false);
+  const rangeStartRef = useRef<CellLocation | null>(null);
+  const rangeEndRef = useRef<CellLocation | null>(null);
+  const rangeSortedNodesRef = useRef<IRowNode<TData>[] | null>(null);
+
+  const { clearRangeSelection, ranges, onCellMouseDown, onCellMouseOver } = useGridRangeSelection({
+    enableRangeSelection,
+    gridDivRef,
+    rangeStartRef,
+    rangeEndRef,
+    hasSelectedMoreThanOneCellRef,
+    rangeSortedNodesRef,
+  });
+
+  const { onCopyEvent, rangeSelectInterceptContextMenu, rangeSelectContextMenuComponent } = useGridCopy({
+    ranges,
+    rangeStartRef,
+    rangeEndRef,
+    hasSelectedMoreThanOneCellRef,
+    cellContextMenu,
+  });
+
+  const onSortChanged = useCallback(() => {
+    clearRangeSelection();
+    ensureSelectedRowIsVisible();
+  }, [clearRangeSelection, ensureSelectedRowIsVisible]);
+
+  /**
+   * Handle single click edits
+   */
+  const onCellClicked = useCallback(
+    (event: CellClickedEvent) => {
+      if (rangeStartRef.current && rangeEndRef.current) {
+        // This is to detect difference between a single click and a click drag return to cell.
+        if (rangeEndRef.current.timestamp - rangeStartRef.current.timestamp < 100) {
+          clearRangeSelection();
+        }
+        return;
+      }
+      const editable = fnOrVar(event.colDef?.editable, event);
+      if ((editable && event.colDef.singleClickEdit) ?? singleClickEdit) {
+        void startCellEditing({ rowId: event.data.id, colId: event.column.getColId() });
+      }
+    },
+    [clearRangeSelection, singleClickEdit, startCellEditing],
+  );
+
+  /**
+   * Set of column I'd's that are prevented from auto-sizing as they are user set
+   */
+  const userSizedColIds = useRef(new Map<string, number>());
+
+  /**
+   * Lock/unlock column width on user edit/reset.
+   */
+  const onColumnResized = useCallback((e: ColumnResizedEvent) => {
+    const colId = e.column?.getColId();
+    if (colId == null) {
+      return;
+    }
+    const width = e.column?.getActualWidth();
+    if (width == null) {
+      return;
+    }
+    switch (e.source) {
+      case 'uiColumnResized':
+        userSizedColIds.current.set(colId, width);
+        break;
+      case 'autosizeColumns':
+        userSizedColIds.current.delete(colId);
+        break;
+    }
+  }, []);
+
+  const columnMoved = useCallback(
+    (e: ColumnMovedEvent<TData>) => {
+      clearRangeSelection();
+      onColumnMoved?.(e);
+    },
+    [clearRangeSelection, onColumnMoved],
+  );
+
   /**
    * Once the grid has auto-sized we want to run fit to fit the grid in its container,
    * but we don't want the non-flex auto-sized columns to "fit" size, so suppressSizeToFit is set to true.
@@ -730,40 +822,6 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
     prevLoading.current = newLoading;
   }, [params.loading, rowData, showNoRowsOverlay]);
 
-  /**
-   * Set of column I'd's that are prevented from auto-sizing as they are user set
-   */
-  const userSizedColIds = useRef(new Map<string, number>());
-
-  /**
-   * Lock/unlock column width on user edit/reset.
-   */
-  const onColumnResized = useCallback((e: ColumnResizedEvent) => {
-    const colId = e.column?.getColId();
-    if (colId == null) {
-      return;
-    }
-    const width = e.column?.getActualWidth();
-    if (width == null) {
-      return;
-    }
-    switch (e.source) {
-      case 'uiColumnResized':
-        userSizedColIds.current.set(colId, width);
-        /*const colDef = e.column?.getColDef();
-          if (!colDef?.flex) {
-            onGridResize(e);
-          }*/
-        break;
-      case 'autosizeColumns':
-        userSizedColIds.current.delete(colId);
-        //onGridResize(e);
-        break;
-    }
-  }, []);
-
-  const gridContextMenu = useGridContextMenu({ contextMenu: params.contextMenu, contextMenuSelectRow });
-
   const startDragYRef = useRef<number | null>(null);
 
   const clearHighlightRowClasses = useCallback(() => {
@@ -929,9 +987,18 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
         }
         return false;
       },
-      onCellClicked: clickInputWhenContainingCellClicked,
+      // enableClickSelection = true means ag-grid auto selects row if you click outside the checkbox
+      // if it's false we have to do it.
+      onCellClicked: params.enableClickSelection ? undefined : clickInputWhenContainingCellClicked,
     };
-  }, [params.hideSelectColumn, params.onRowDragEnd, rowSelection, selectColumnPinned, selectable]);
+  }, [
+    params.hideSelectColumn,
+    params.onRowDragEnd,
+    rowSelection,
+    selectColumnPinned,
+    selectable,
+    params.enableClickSelection,
+  ]);
 
   const onGridSizeChanged = useCallback(
     (event: GridSizeChangedEvent<TData>) => {
@@ -953,10 +1020,52 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
         gridReady && rowData && autoSized && 'Grid-ready',
       )}
     >
-      {gridContextMenu.component}
-      <div style={{ flex: 1 }} ref={gridDivRef}>
+      {contextMenuComponent}
+      {rangeSelectContextMenuComponent}
+      <div style={{ flex: 1 }} ref={gridDivRef} onCopy={onCopyEvent}>
         <AgGridReact
           theme={'legacy'}
+          domLayout={params.domLayout}
+          defaultColDef={defaultColDef}
+          columnDefs={columnDefsAdjusted}
+          getRowId={getRowId}
+          rowData={rowData}
+          alwaysShowVerticalScroll={params.alwaysShowVerticalScroll}
+          animateRows={params.animateRows ?? false}
+          doesExternalFilterPass={doesExternalFilterPass}
+          isExternalFilterPresent={isExternalFilterPresent}
+          maintainColumnOrder={true}
+          noRowsOverlayComponent={noRowsOverlayComponent}
+          onCellClicked={onCellClicked}
+          onCellContextMenu={rangeSelectInterceptContextMenu}
+          onCellDoubleClicked={onCellDoubleClick}
+          onCellEditingStopped={onCellEditingStopped}
+          onCellFocused={onCellFocused}
+          onCellKeyDown={onCellKeyPress}
+          onCellMouseDown={onCellMouseDown}
+          onCellMouseOver={onCellMouseOver}
+          onColumnMoved={columnMoved}
+          onColumnResized={onColumnResized}
+          onColumnVisible={() => void setInitialContentSize()}
+          onGridReady={onGridReady}
+          onGridSizeChanged={onGridSizeChanged}
+          onModelUpdated={onModelUpdated}
+          onRowClicked={params.onRowClicked}
+          onRowDataUpdated={onRowDataUpdated}
+          onRowDoubleClicked={params.onRowDoubleClicked}
+          onRowDragCancel={clearHighlightRowClasses}
+          onRowDragEnd={onRowDragEnd}
+          onRowDragMove={onRowDragMove}
+          onSelectionChanged={synchroniseExternalStateToGridSelection}
+          onSortChanged={onSortChanged}
+          pinnedBottomRowData={params.pinnedBottomRowData}
+          pinnedTopRowData={params.pinnedTopRowData}
+          postSortRows={params.onRowDragEnd || !defaultPostSort ? undefined : postSortRows}
+          preventDefaultOnContextMenu={true}
+          quickFilterParser={quickFilterParser}
+          rowClassRules={params.rowClassRules}
+          rowDragText={params.rowDragText}
+          rowHeight={rowHeight}
           rowSelection={
             selectable
               ? {
@@ -971,48 +1080,9 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
               : undefined
           }
           selectionColumnDef={selectionColumnDef}
-          rowHeight={rowHeight}
-          animateRows={params.animateRows ?? false}
-          rowClassRules={params.rowClassRules}
-          getRowId={getRowId}
-          suppressColumnVirtualisation={suppressColumnVirtualization}
-          suppressClickEdit={true}
-          onGridSizeChanged={onGridSizeChanged}
-          onColumnVisible={() => void setInitialContentSize()}
-          onRowDataUpdated={onRowDataUpdated}
-          onCellFocused={onCellFocused}
-          onCellKeyDown={onCellKeyPress}
-          onCellClicked={onCellClicked}
-          onCellDoubleClicked={onCellDoubleClick}
-          onCellEditingStopped={onCellEditingStopped}
-          domLayout={params.domLayout}
-          onColumnResized={onColumnResized}
-          defaultColDef={defaultColDef}
-          columnDefs={columnDefsAdjusted}
-          rowData={rowData}
-          postSortRows={params.onRowDragEnd || !defaultPostSort ? undefined : postSortRows}
-          onModelUpdated={onModelUpdated}
-          onGridReady={onGridReady}
-          onSortChanged={ensureSelectedRowIsVisible}
-          quickFilterParser={quickFilterParser}
-          onSelectionChanged={synchroniseExternalStateToGridSelection}
-          onColumnMoved={params.onColumnMoved}
-          noRowsOverlayComponent={noRowsOverlayComponent}
-          alwaysShowVerticalScroll={params.alwaysShowVerticalScroll}
-          isExternalFilterPresent={isExternalFilterPresent}
-          doesExternalFilterPass={doesExternalFilterPass}
-          maintainColumnOrder={true}
-          preventDefaultOnContextMenu={true}
-          onCellContextMenu={gridContextMenu.cellContextMenu}
-          rowDragText={params.rowDragText}
-          onRowDragCancel={clearHighlightRowClasses}
-          onRowDragMove={onRowDragMove}
-          onRowDragEnd={onRowDragEnd}
           suppressCellFocus={params.suppressCellFocus}
-          pinnedTopRowData={params.pinnedTopRowData}
-          pinnedBottomRowData={params.pinnedBottomRowData}
-          onRowClicked={params.onRowClicked}
-          onRowDoubleClicked={params.onRowDoubleClicked}
+          suppressClickEdit={true}
+          suppressColumnVirtualisation={suppressColumnVirtualization}
           suppressStartEditOnTab={true}
         />
       </div>

package/src/components/GridRangeSelectContextMenu.tsx

@@ -0,0 +1,73 @@
+import { LuiIcon } from '@linzjs/lui';
+import clsx from 'clsx';
+import { ReactElement, useCallback, useMemo } from 'react';
+
+import { typedEntries } from '../lui/tsUtils';
+import { MenuDivider, MenuHeader, MenuItem } from '../react-menu3';
+import { GridContextMenuComponentProps } from './gridHook';
+import { CopyOptionsKey, gridCopyOptions } from './gridHook/useGridCopySettings';
+import { GridBaseRow } from './types';
+
+export interface CopyOptionsContext {
+  onCopy: (type?: CopyOptionsKey) => void;
+  copyType: CopyOptionsKey;
+  setCopyType: (copyType: CopyOptionsKey) => void;
+}
+
+export const GridRangeSelectContextMenu = <TData extends GridBaseRow>({
+  event,
+  context,
+}: GridContextMenuComponentProps<TData, CopyOptionsContext>): ReactElement => {
+  const developerContextMenu: boolean =
+    !!(event?.event as { ctrlKey?: boolean })?.ctrlKey && !!(event?.event as { shiftKey?: boolean })?.shiftKey;
+  const onCopy = useMemo(() => context?.onCopy, [context?.onCopy]);
+  const onClick = useCallback(
+    (type: CopyOptionsKey) => {
+      onCopy?.(type);
+    },
+    [onCopy],
+  );
+
+  return (
+    <>
+      <MenuHeader>Copy as</MenuHeader>
+      {typedEntries(gridCopyOptions).map(([key, { icon, text, developer }]) => {
+        return (
+          (!developer || developerContextMenu) && (
+            <MenuItem key={key} onClick={() => void onClick(key)}>
+              <div className={'copyMenuMenuItem'}>
+                <LuiIcon name={icon} alt={text} size={'md'} />
+                <div className={'copyMenuMenuItem__text'}>{text}</div>
+              </div>
+            </MenuItem>
+          )
+        );
+      })}
+      <MenuDivider />
+      <MenuHeader>Set copy default</MenuHeader>
+      {typedEntries(gridCopyOptions).map(([key, { text, developer }]) => {
+        return (
+          !developer && (
+            <MenuItem
+              key={'default_' + key}
+              onClick={(e) => {
+                context?.setCopyType(key);
+                e.keepOpen = true;
+              }}
+            >
+              <div
+                className={clsx(
+                  'copyMenuMenuItem',
+                  context?.copyType === key ? '' : 'copyMenuMenuItem__buttonDefault--hidden',
+                )}
+              >
+                <LuiIcon name={'ic_tick'} alt={'CSV'} size={'sm'} />
+                <div className={'copyMenuMenuItem__text'}>{text}</div>
+              </div>
+            </MenuItem>
+          )
+        );
+      })}
+    </>
+  );
+};

package/src/components/gridForm/GridFormDropDown.tsx

@@ -9,7 +9,7 @@ import { usePrevious } from '../../lui/reactUtils';
 import { FocusableItem, MenuDivider, MenuHeader, MenuItem } from '../../react-menu3';
 import { ClickEvent } from '../../react-menu3/types';
 import { textMatch } from '../../utils/textMatcher';
-import { isNotEmpty } from '../../utils/util';
+import { isNotEmpty, MaybePromise } from '../../utils/util';
 import { ComponentLoadingWrapper } from '../ComponentLoadingWrapper';
 import { CellEditorCommon } from '../GridCell';
 import { useGridPopoverHook } from '../GridPopoverHook';
@@ -47,8 +47,6 @@ export const MenuHeaderItem = (title: string) => {
 
 export type SelectOption<TOptionValue = any> = FinalSelectOption<TOptionValue>;
 
-export type MaybePromise<T> = T | Promise<T>;
-
 export interface GridFormDropDownProps<TData extends GridBaseRow, TOptionValue> extends CellEditorCommon {
   // This overrides CellEditorCommon to provide some common class options
   className?: // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents

package/src/components/gridForm/GridFormPopoverMenu.tsx

@@ -5,6 +5,7 @@ import { useGridPopoverContext } from '../../contexts/GridPopoverContext';
 import { GridSubComponentContext } from '../../contexts/GridSubComponentContext';
 import { FocusableItem, MenuDivider, MenuItem, SubMenu } from '../../react-menu3';
 import { ClickEvent } from '../../react-menu3/types';
+import { MaybePromise } from '../../utils/util';
 import { ComponentLoadingWrapper } from '../ComponentLoadingWrapper';
 import { CellEditorCommon } from '../GridCell';
 import { useGridPopoverHook } from '../GridPopoverHook';
@@ -33,7 +34,7 @@ export interface SelectedMenuOptionResult<TData extends GridBaseRow> extends Men
 export interface MenuOption<TData extends GridBaseRow> {
   label: ReactElement | string | MenuSeparatorType;
   subMenu?: () => ReactElement;
-  action?: (props: { selectedRows: TData[]; menuOption: SelectedMenuOptionResult<TData> }) => Promise<void>;
+  action?: (props: { selectedRows: TData[]; menuOption: SelectedMenuOptionResult<TData> }) => MaybePromise<void>;
   disabled?: string | boolean;
   hidden?: boolean;
   subComponent?: (props: any) => ReactElement;