@linzjs/step-ag-grid 27.0.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": "27.0.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.tsx

@@ -66,7 +66,6 @@ export interface ColDefT<TData extends GridBaseRow, ValueType = any> extends Col
     | ((props: ICellRendererParams<TData, ValueType>) => ReactElement | string | false | null | undefined)
     | string;
   cellRendererParams?: {
-    singleClickEdit?: boolean;
     rightHoverElement?: ReactElement;
     originalCellRenderer?: any;
     editAction?: (selectedRows: TData[]) => void;

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/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,