@linzjs/step-ag-grid 32.0.0 → 32.1.0

package/package.json

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

package/src/components/Grid.tsx

@@ -44,7 +44,7 @@ import { useGridCopy } from './gridHook/useGridCopy';
 import { CellLocation, useGridRangeSelection } from './gridHook/useGridRangeSelection';
 import { GridNoRowsOverlay } from './GridNoRowsOverlay';
 import { usePostSortRowsHook } from './PostSortRowsHook';
-import { GridBaseRow, GridOnRowDragEndProps } from './types';
+import { ColDefT, GridBaseRow, GridOnRowDragEndProps } from './types';
 
 ModuleRegistry.registerModules([AllCommunityModule]);
 
@@ -471,13 +471,16 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
         };
       } else {
         const colDefEditable = colDef.editable;
+        const ignoreGridReadOnly = (colDef as ColDefT<TData>).ignoreGridReadOnly === true;
         const editable = combineEditables(
-          params.loading !== true && params.readOnly !== true,
+          params.loading !== true,
+          ignoreGridReadOnly ? true : params.readOnly !== true,
           params.defaultColDef?.editable,
           colDefEditable,
         );
         return {
-          ...colDef,
+          // ag-grid warns on unrecognised colDef properties, so it can't be left on the returned colDef
+          ...omit(colDef, 'ignoreGridReadOnly'),
           editable,
           cellClassRules: {
             ...colDef.cellClassRules,

package/src/components/gridForm/GridFormPopoverMenu.tsx

@@ -1,4 +1,3 @@
-import { isEmpty } from 'lodash-es';
 import { Fragment, ReactElement, useCallback, useEffect, useRef, useState } from 'react';
 
 import { useGridPopoverContext } from '../../contexts/GridPopoverContext';
@@ -126,10 +125,15 @@ export const GridFormPopoverMenu = <TData extends GridBaseRow>(props: GridFormPo
     save,
   });
 
+  // isEmpty(options) alone isn't enough: options can be a non-empty array where every item is
+  // hidden (e.g. all actions unavailable in a given mode), which must also show "No actions"
+  // rather than rendering an empty menu body.
+  const hasVisibleOption = options?.some((item) => !item.hidden && item.label !== __isMenuSeparator__);
+
   return popoverWrapper(
     <ComponentLoadingWrapper loading={!options} className={'GridFormPopupMenu'}>
       <>
-        {isEmpty(options) ? (
+        {!hasVisibleOption ? (
           <MenuItem key={`GridPopoverMenu-empty`} className={'GridPopoverMenu-noOptions'} disabled={true}>
             No actions
           </MenuItem>

package/src/components/gridPopoverEdit/GridPopoverMenu.tsx

@@ -20,6 +20,9 @@ export const GridPopoverMenu = <TData extends GridBaseRow>(
       editable: colDef.editable != null ? colDef.editable : true,
       exportable: false,
       cellStyle: { flex: 1, justifyContent: 'center' },
+      suppressMovable: true,
+      lockPosition: 'right',
+      resizable: false,
       cellRenderer: GridRenderPopoutMenuCell,
       // Menus open on single click, this parameter is picked up in Grid.tsx
       singleClickEdit: true,

package/src/components/types.ts

@@ -20,6 +20,8 @@ export interface GridOnRowDragEndProps<TData extends GridBaseRow> {
 // This is so that typescript retains the row type to pass to the GridCells
 export interface ColDefT<TData extends GridBaseRow, ValueType = any> extends ColDef<TData, ValueType> {
   editable?: boolean | EditableCallback<TData, ValueType>;
+  /** When true, this column's editable state ignores the grid-level `readOnly` prop. */
+  ignoreGridReadOnly?: boolean;
   valueGetter?: string | ValueGetterFunc<TData, ValueType>;
   valueFormatter?: string | ValueFormatterFunc<TData, ValueType>;
   cellRenderer?:

package/src/stories/grid/GridReadOnly.stories.tsx

@@ -5,6 +5,7 @@ import '@linzjs/lui/dist/fonts';
 
 import { Meta, StoryFn } from '@storybook/react-vite';
 import { ReactElement, useCallback, useMemo, useState } from 'react';
+import { expect, fn, screen, userEvent } from 'storybook/test';
 
 import {
   ColDefT,
@@ -294,3 +295,71 @@ const GridFilterLessThan = (props: {
 
 export const ReadOnlySingleSelection = GridReadOnlyTemplate.bind({});
 ReadOnlySingleSelection.play = waitForGridReady;
+
+interface IIgnoreReadOnlyRow {
+  id: number;
+  name: string;
+}
+
+const disabledMenuItemAction = fn();
+
+const IgnoreGridReadOnlyTemplate: StoryFn<typeof Grid<IIgnoreReadOnlyRow>> = () => {
+  const columnDefs: ColDefT<IIgnoreReadOnlyRow>[] = useMemo(
+    () => [
+      GridCell<IIgnoreReadOnlyRow, IIgnoreReadOnlyRow['name']>({ field: 'name', headerName: 'Name' }),
+      GridPopoverMenu(
+        { colId: 'blockedActions', headerName: 'Blocked actions' },
+        {
+          multiEdit: true,
+          editorParams: {
+            options: async () => [{ label: 'Should not open', action: async () => {} }],
+          },
+        },
+      ),
+      GridPopoverMenu(
+        { colId: 'alwaysEnabledActions', headerName: 'Always enabled actions', ignoreGridReadOnly: true },
+        {
+          multiEdit: true,
+          editorParams: {
+            options: async () => [
+              { label: 'Locate feature', action: async () => {} },
+              { label: 'Other action', action: disabledMenuItemAction, disabled: 'Not available in read-only mode' },
+            ],
+          },
+        },
+      ),
+    ],
+    [],
+  );
+
+  const [rowData] = useState<IIgnoreReadOnlyRow[]>([{ id: 1, name: 'Row 1' }]);
+
+  return (
+    <GridWrapper maxHeight={200}>
+      <Grid data-testid={'readonly-ignore-flag'} readOnly columnDefs={columnDefs} rowData={rowData} />
+    </GridWrapper>
+  );
+};
+
+export const ReadOnlyIgnoreGridReadOnlyColumn = IgnoreGridReadOnlyTemplate.bind({});
+ReadOnlyIgnoreGridReadOnlyColumn.play = async (context) => {
+  await waitForGridReady(context);
+  const { canvasElement } = context;
+
+  const alwaysEnabledCell = canvasElement.querySelector('.ag-cell[col-id="alwaysEnabledActions"]');
+  await expect(alwaysEnabledCell).toBeInTheDocument();
+  await userEvent.click(alwaysEnabledCell as HTMLElement);
+  await expect(await screen.findByRole('menuitem', { name: 'Locate feature' })).toBeInTheDocument();
+
+  const disabledItem = await screen.findByRole('menuitem', { name: 'Other action' });
+  await expect(disabledItem).toHaveAttribute('aria-disabled', 'true');
+  await userEvent.click(disabledItem);
+  await expect(disabledMenuItemAction).not.toHaveBeenCalled();
+
+  await userEvent.keyboard('{Escape}');
+
+  const blockedCell = canvasElement.querySelector('.ag-cell[col-id="blockedActions"]');
+  await expect(blockedCell).toBeInTheDocument();
+  await userEvent.click(blockedCell as HTMLElement);
+  await expect(screen.queryByRole('menuitem', { name: 'Should not open' })).not.toBeInTheDocument();
+};

package/src/stories/grid/gridFormInteraction/GridFormPopoverMenuInteraction.stories.tsx

@@ -171,3 +171,50 @@ GridFormPopoverMenuInteractions_.play = async ({ canvasElement }) => {
   await userEvent.type(textArea, '{Enter}');
   expect(updateValue).not.toHaveBeenCalled();
 };
+
+const AllHiddenTemplate: StoryFn<typeof GridFormPopoverMenu> = (props: GridFormPopoverMenuProps<any>) => {
+  const anchorRef = useRef<HTMLHeadingElement>(null);
+
+  return (
+    <div className={'react-menu-inline-test'}>
+      <GridContextProvider>
+        <h6 ref={anchorRef}>Interaction Test</h6>
+        <GridPopoverContext.Provider
+          value={{
+            anchorRef,
+            value: null,
+            updateValue,
+            data: { value: '' },
+            colId: '',
+            field: 'value',
+            selectedRows: [],
+            saving: false,
+            setSaving: () => {},
+            formatValue: (value) => value,
+            stopEditing: () => {},
+          }}
+        >
+          <GridFormPopoverMenu
+            {...props}
+            options={() => [
+              { label: 'Hidden one', value: 1, action: enabledAction, hidden: true },
+              { label: 'Hidden two', value: 2, action: enabledAction, hidden: true },
+            ]}
+          />
+        </GridPopoverContext.Provider>
+      </GridContextProvider>
+    </div>
+  );
+};
+
+// Regression test: when every option resolves to hidden, the menu must show "No actions"
+// rather than an empty menu body (isEmpty(options) alone doesn't catch this — the array is
+// non-empty, just every item is hidden).
+export const GridFormPopoverMenuAllOptionsHidden_ = AllHiddenTemplate.bind({});
+GridFormPopoverMenuAllOptionsHidden_.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  expect(await canvas.findByText('No actions')).toBeInTheDocument();
+  expect(canvas.queryByRole('menuitem', { name: 'Hidden one' })).not.toBeInTheDocument();
+  expect(canvas.queryByRole('menuitem', { name: 'Hidden two' })).not.toBeInTheDocument();
+};