@linzjs/step-ag-grid 26.1.0 → 27.1.0

package/package.json

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

package/src/components/Grid.tsx

@@ -359,16 +359,18 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
     });
   }, [params.columnDefs, params.loading, params.readOnly, params.defaultColDef?.editable]);
 
+  const hasExternallySelectedItems = !!params.setExternalSelectedItems;
+
   /**
    * When grid is ready set the apis to the grid context and sync selected items to grid.
    */
   const onGridReady = useCallback(
     (event: GridReadyEvent) => {
-      setApis(event.api, dataTestId);
+      setApis(event.api, hasExternallySelectedItems, dataTestId);
       event.api.showNoRowsOverlay();
       synchroniseExternallySelectedItemsToGrid();
     },
-    [dataTestId, setApis, synchroniseExternallySelectedItemsToGrid],
+    [dataTestId, hasExternallySelectedItems, setApis, synchroniseExternallySelectedItemsToGrid],
   );
 
   /**
@@ -433,7 +435,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
    */
   const onCellClicked = useCallback(
     (event: CellClickedEvent) => {
-      if (event.colDef?.cellRendererParams?.singleClickEdit ?? singleClickEdit) {
+      if (event.colDef.singleClickEdit ?? singleClickEdit) {
         void startCellEditing({ rowId: event.data.id, colId: event.column.getColId() });
       }
     },

package/src/components/GridCell.test.tsx

@@ -1,7 +1,8 @@
+import { ValueGetterParams } from 'ag-grid-community';
 import { describe, expect, test } from 'vitest';
 
 import { GridBaseRow } from './Grid';
-import { generateFilterGetter, SAValueGetterParams } from './GridCell';
+import { generateFilterGetter } from './GridCell';
 
 describe('GridCell', () => {
   test('generateFilterGetter returns passed filterValueGetter', () => {
@@ -26,7 +27,7 @@ describe('GridCell', () => {
       const filterGetter = generateFilterGetter(field, undefined, valueFormatter);
       expect(typeof filterGetter).toBe('function');
       if (typeof filterGetter !== 'function') return;
-      expect(filterGetter({ getValue: () => test.value } as any as SAValueGetterParams<GridBaseRow>)).toBe(
+      expect(filterGetter({ getValue: () => test.value } as unknown as ValueGetterParams<GridBaseRow>)).toBe(
         test.expected,
       );
     });

package/src/components/GridCell.tsx

@@ -1,6 +1,5 @@
 import { ColDef, EditableCallback, ICellEditorParams, ICellRendererParams } from 'ag-grid-community';
 import {
-  EditableCallbackParams,
   SuppressKeyboardEventParams,
   ValueFormatterFunc,
   ValueFormatterParams,
@@ -24,11 +23,6 @@ export interface GenericCellEditorProps<E> {
   editorParams?: E;
 }
 
-export interface SAICellRendererParams<TData = any, TValue = any, TContext = any>
-  extends Omit<ICellRendererParams<TData, TValue, TContext>, 'data'> {
-  data: TData;
-}
-
 export const GridCellRenderer = (props: ICellRendererParams) => {
   const { checkUpdating } = useContext(GridUpdatingContext);
   const colDef = props.colDef as ColDef;
@@ -63,50 +57,21 @@ export const GridCellRenderer = (props: ICellRendererParams) => {
   );
 };
 
-export interface SAValueGetterParams<TData = any, TValue = any> extends Omit<ValueGetterParams<TData, TValue>, 'data'> {
-  data: TData;
-  getValue: (field: string) => any;
-}
-
-export interface SAValueGetterFunc<TData = any, TValue = any> {
-  (params: SAValueGetterParams<TData, TValue>): TValue | null | undefined;
-}
-
-export interface SAEditableCallbackParams<TData = any, TValue = any>
-  extends Omit<EditableCallbackParams<TData, TValue>, 'data'> {
-  data: TData;
-}
-
-export interface SAEditableCallback<TData = any, TValue = any> {
-  (params: SAEditableCallbackParams<TData, TValue>): boolean;
-}
-
-export interface SAValueFormatterParams<TData = any, TValue = any>
-  extends Omit<ValueFormatterParams<TData, TValue>, 'data' | 'value'> {
-  data: TData;
-  value: TValue;
-}
-
-export interface SAValueFormatterFunc<TData = any, TValue = any> {
-  (params: SAValueFormatterParams<TData, TValue>): string;
-}
-
 // 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>;
   valueGetter?: string | ValueGetterFunc<TData, ValueType>;
   valueFormatter?: string | ValueFormatterFunc<TData, ValueType>;
   cellRenderer?:
-    | ((props: SAICellRendererParams<TData, ValueType>) => ReactElement | string | false | null | undefined)
+    | ((props: ICellRendererParams<TData, ValueType>) => ReactElement | string | false | null | undefined)
     | string;
   cellRendererParams?: {
-    singleClickEdit?: boolean;
     rightHoverElement?: ReactElement;
     originalCellRenderer?: any;
     editAction?: (selectedRows: TData[]) => void;
     shortcutKeys?: Record<string, () => void>;
-    warning?: (props: SAICellRendererParams<TData, ValueType>) => ReactElement | string | false | null | undefined;
-    info?: (props: SAICellRendererParams<TData, ValueType>) => ReactElement | string | false | null | undefined;
+    warning?: (props: ICellRendererParams<TData, ValueType>) => ReactElement | string | false | null | undefined;
+    info?: (props: ICellRendererParams<TData, ValueType>) => ReactElement | string | false | null | undefined;
   };
   editor?: (editorProps: any) => ReactElement;
 }
@@ -129,7 +94,7 @@ export const generateFilterGetter = <TData extends GridBaseRow, ValueType>(
   field: string | undefined,
   filterValueGetter: string | ValueGetterFunc<TData, ValueType> | undefined,
   valueFormatter: string | ValueFormatterFunc<TData, ValueType> | undefined,
-): string | SAValueGetterFunc<TData, ValueType> | undefined => {
+): string | ValueGetterFunc<TData, ValueType> | undefined => {
   if (filterValueGetter) return filterValueGetter;
   // aggrid will default to valueGetter
   if (typeof valueFormatter !== 'function' || !field) return undefined;

package/src/components/gridPopoverEdit/GridButton.tsx

@@ -1,12 +1,12 @@
 import { LuiButton, LuiIcon } from '@linzjs/lui';
-import { CellFocusedEvent, ICellEditorParams } from 'ag-grid-community';
+import { CellFocusedEvent, ICellEditorParams, ICellRendererParams } from 'ag-grid-community';
 import { useEffect, useRef } from 'react';
 
 import { GridBaseRow } from '../Grid';
-import { ColDefT, GridCell, SAICellRendererParams } from '../GridCell';
+import { ColDefT, GridCell } from '../GridCell';
 import { GenericCellColDef } from '../gridRender';
 
-const ButtonCellRenderer = <TData extends GridBaseRow>(props: SAICellRendererParams<TData>) => {
+const ButtonCellRenderer = <TData extends GridBaseRow>(props: ICellRendererParams<TData>) => {
   const { data, node, column, colDef, api } = props;
   const inputRef = useRef<HTMLButtonElement>(null);
 
@@ -30,7 +30,7 @@ const ButtonCellRenderer = <TData extends GridBaseRow>(props: SAICellRendererPar
       level="text"
       onClick={() => {
         const selectedRows = [data];
-        const selectedRowIds = selectedRows.map((r) => r.id);
+        const selectedRowIds = selectedRows.map((r) => r!.id);
         colDef?.cellEditorParams.onClick?.({ selectedRows, selectedRowIds });
       }}
       style={{ display: colDef?.cellEditorParams?.visible?.(props) !== false ? '' : 'none' }}

package/src/components/gridPopoverEdit/GridPopoverMenu.tsx

@@ -21,11 +21,9 @@ export const GridPopoverMenu = <TData extends GridBaseRow>(
       exportable: false,
       cellStyle: { flex: 1, justifyContent: 'center' },
       cellRenderer: GridRenderPopoutMenuCell,
+      // Menus open on single click, this parameter is picked up in Grid.tsx
+      singleClickEdit: true,
       ...colDef,
-      cellRendererParams: {
-        // Menus open on single click, this parameter is picked up in Grid.tsx
-        singleClickEdit: true,
-      },
     },
     {
       editor: GridFormPopoverMenu,

package/src/components/gridPopoverEdit/GridPopoverMessage.ts

@@ -11,10 +11,7 @@ export const GridPopoverMessage = <TData extends GridBaseRow, TValue = any>(
     {
       resizable: true,
       ...colDef,
-      cellRendererParams: {
-        singleClickEdit: true,
-        ...colDef.cellRendererParams,
-      },
+      singleClickEdit: true,
     },
     {
       editor: GridFormMessage,

package/src/components/gridRender/GridRenderGenericCell.tsx

@@ -10,7 +10,6 @@ export interface GenericCellColDef<TData extends GridBaseRow, TValue = any> exte
 }
 
 export interface GenericCellRendererParams<TData extends GridBaseRow> {
-  singleClickEdit?: boolean;
   rightHoverElement?: ReactElement | undefined;
   editAction?: (selectedRows: TData[]) => void;
   shortcutKeys?: Record<string, ((params: SuppressKeyboardEventParams) => boolean | void) | undefined>;

package/src/contexts/GridContext.tsx

@@ -23,7 +23,7 @@ export interface GridContextType<TData extends GridBaseRow> {
     filter?: keyof ColDef | ((r: ColDef) => boolean | undefined | null | number | string),
   ) => ColDefT<TData, any>[];
   getColumnIds: (filter?: keyof ColDef | ((r: ColDef) => boolean | undefined | null | number | string)) => string[];
-  setApis: (gridApi: GridApi | undefined, dataTestId?: string) => void;
+  setApis: (gridApi: GridApi | undefined, hasExternallySelectedItems: boolean, dataTestId?: string) => void;
   prePopupOps: () => void;
   postPopupOps: () => void;
   setQuickFilter: (quickFilter: string) => void;

package/src/contexts/GridContextProvider.tsx

@@ -23,6 +23,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
   const [quickFilter, _setQuickFilter] = useState('');
   const [invisibleColumnIds, _setInvisibleColumnIds] = useState<string[]>();
   const testId = useRef<string | undefined>();
+  const hasExternallySelectedItemsRef = useRef(false);
   const idsBeforeUpdate = useRef<number[]>([]);
   const prePopupFocusedCell = useRef<CellPosition>();
   const [externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync] = useState(false);
@@ -101,7 +102,8 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
    * Set the grid api when the grid is ready.
    */
   const setApis = useCallback(
-    (gridApi: GridApi | undefined, dataTestId?: string) => {
+    (gridApi: GridApi | undefined, hasExternallySelectedItems: boolean, dataTestId?: string) => {
+      hasExternallySelectedItemsRef.current = hasExternallySelectedItems;
       testId.current = dataTestId;
       setGridApi(gridApi);
       gridApi?.setGridOption('quickFilterText', quickFilter);
@@ -474,10 +476,17 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
   }, [externallySelectedItemsAreInSync]);
 
   const waitForExternallySelectedItemsToBeInSync = useCallback(async () => {
+    if (!hasExternallySelectedItemsRef.current) {
+      externallySelectedItemsAreInSyncRef.current = true;
+      return;
+    }
     // Wait for up to 5 seconds
     for (let i = 0; i < 5000 / 200 && !externallySelectedItemsAreInSyncRef.current; i++) {
       await wait(200);
     }
+    if (!externallySelectedItemsAreInSyncRef.current) {
+      console.error('externallySelectedItems did not sync with ag-grid selection');
+    }
   }, []);
 
   const startCellEditing = useCallback(

package/src/react-menu3/components/ControlledMenu.tsx

@@ -198,7 +198,7 @@ export const ControlledMenuFr = (
           break;
       }
     },
-    [anchorRef, saveButtonRef],
+    [anchorRef, onClose, saveButtonRef],
   );
 
   const handleKeydownTabAndEnter = useMemo(() => handleKeyboardTabAndEnter(true), [handleKeyboardTabAndEnter]);

package/src/stories/grid/GridPopoverEditDropDown.stories.tsx

@@ -102,6 +102,7 @@ const GridEditDropDownTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
         {
           field: 'position2',
           headerName: 'Multi-edit',
+          singleClickEdit: true,
         },
         {
           multiEdit: true,