@linzjs/step-ag-grid 7.10.2 → 7.11.1

package/package.json

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

package/src/components/Grid.tsx

@@ -34,6 +34,7 @@ export interface GridProps {
   animateRows?: boolean;
   rowClassRules?: GridOptions["rowClassRules"];
   rowSelection?: "single" | "multiple";
+  autoSelectFirstRow?: boolean;
 }
 
 /**
@@ -48,6 +49,7 @@ export const Grid = (params: GridProps): JSX.Element => {
     selectRowsById,
     ensureSelectedRowIsVisible,
     sizeColumnsToFit,
+    setExternallySelectedItemsAreInSync,
   } = useContext(GridContext);
   const { checkUpdating } = useContext(GridUpdatingContext);
 
@@ -56,6 +58,22 @@ export const Grid = (params: GridProps): JSX.Element => {
   const [staleGrid, setStaleGrid] = useState(false);
   const postSortRows = usePostSortRowsHook({ setStaleGrid });
 
+  /**
+   * On data load select the first row of the grid if required.
+   */
+  const hasSelectedFirstItem = useRef(false);
+  useEffect(() => {
+    if (!gridReady || !params.autoSelectFirstRow || hasSelectedFirstItem.current || !params.rowData) return;
+    hasSelectedFirstItem.current = true;
+    if (isNotEmpty(params.rowData)) {
+      if (params.setExternalSelectedItems) {
+        params.setExternalSelectedItems([params.rowData[0]]);
+      } else {
+        selectRowsById([params.rowData[0].id]);
+      }
+    }
+  }, [gridReady, params, params.autoSelectFirstRow, params.rowData, selectRowsById]);
+
   /**
    * AgGrid checkbox select does not pass clicks within cell but not on the checkbox to checkbox.
    * This passes the event to the checkbox when you click anywhere in the cell.
@@ -71,7 +89,10 @@ export const Grid = (params: GridProps): JSX.Element => {
    */
   const synchroniseExternalStateToGridSelection = useCallback(
     ({ api }: SelectionChangedEvent) => {
-      if (!params.externalSelectedItems || !params.setExternalSelectedItems) return;
+      if (!params.externalSelectedItems || !params.setExternalSelectedItems) {
+        setExternallySelectedItemsAreInSync(true);
+        return;
+      }
 
       const selectedRows = api.getSelectedRows();
       // We don't want to update selected Items if it hasn't changed to prevent excess renders
@@ -79,10 +100,13 @@ export const Grid = (params: GridProps): JSX.Element => {
         params.externalSelectedItems.length != selectedRows.length ||
         isNotEmpty(xorBy(selectedRows, params.externalSelectedItems, (row) => row.id))
       ) {
+        setExternallySelectedItemsAreInSync(false);
         params.setExternalSelectedItems([...selectedRows]);
+      } else {
+        setExternallySelectedItemsAreInSync(true);
       }
     },
-    [params],
+    [params, setExternallySelectedItemsAreInSync],
   );
 
   /**
@@ -90,21 +114,25 @@ export const Grid = (params: GridProps): JSX.Element => {
    * If new ids are selected scroll them into view.
    */
   const synchroniseExternallySelectedItemsToGrid = useCallback(() => {
-    if (!gridReady()) return;
-    if (!params.externalSelectedItems) return;
+    if (!gridReady) return;
+    if (!params.externalSelectedItems) {
+      setExternallySelectedItemsAreInSync(true);
+      return;
+    }
 
     const selectedIds = params.externalSelectedItems.map((row) => row.id) as number[];
     const lastNewId = last(difference(selectedIds, lastSelectedIds.current));
     if (lastNewId != null) ensureRowVisible(lastNewId);
     lastSelectedIds.current = selectedIds;
     selectRowsById(selectedIds);
-  }, [params.externalSelectedItems, ensureRowVisible, gridReady, selectRowsById]);
+    setExternallySelectedItemsAreInSync(true);
+  }, [gridReady, params.externalSelectedItems, ensureRowVisible, selectRowsById, setExternallySelectedItemsAreInSync]);
 
   /**
    * Synchronise quick filter to grid
    */
   const updateQuickFilter = useCallback(() => {
-    if (!gridReady()) return;
+    if (!gridReady) return;
     if (params.quickFilter) {
       setQuickFilter(internalQuickFilter);
       return;
@@ -257,7 +285,12 @@ export const Grid = (params: GridProps): JSX.Element => {
   return (
     <div
       data-testid={params["data-testid"]}
-      className={clsx("Grid-container", "ag-theme-alpine", staleGrid && "Grid-sortIsStale")}
+      className={clsx(
+        "Grid-container",
+        "ag-theme-alpine",
+        staleGrid && "Grid-sortIsStale",
+        gridReady && params.rowData && "Grid-ready",
+      )}
     >
       {params.quickFilter && (
         <div className="Grid-quickFilter">

package/src/contexts/GridContext.tsx

@@ -3,7 +3,7 @@ import { GridApi, RowNode } from "ag-grid-community";
 import { GridBaseRow } from "../components/Grid";
 
 export interface GridContextType {
-  gridReady: () => boolean;
+  gridReady: boolean;
   setGridApi: (gridApi: GridApi | undefined) => void;
   setQuickFilter: (quickFilter: string) => void;
   editingCells: () => boolean;
@@ -26,13 +26,12 @@ export interface GridContextType {
     tabDirection?: 1 | 0 | -1,
   ) => Promise<boolean>;
   redrawRows: (rowNodes?: RowNode[]) => void;
+  setExternallySelectedItemsAreInSync: (inSync: boolean) => void;
+  waitForExternallySelectedItemsToBeInSync: () => Promise<void>;
 }
 
 export const GridContext = createContext<GridContextType>({
-  gridReady: () => {
-    console.error("no context provider for gridReady");
-    return false;
-  },
+  gridReady: false,
   setGridApi: () => {
     console.error("no context provider for setGridApi");
   },
@@ -89,4 +88,10 @@ export const GridContext = createContext<GridContextType>({
   redrawRows: () => {
     console.error("no context provider for redrawRows");
   },
+  setExternallySelectedItemsAreInSync: () => {
+    console.error("no context provider for setExternallySelectedItemsAreInSync");
+  },
+  waitForExternallySelectedItemsToBeInSync: async () => {
+    console.error("no context provider for waitForExternallySelectedItemsToBeInSync");
+  },
 });

package/src/contexts/GridContextProvider.tsx

@@ -1,8 +1,8 @@
-import { ReactElement, ReactNode, useContext, useRef } from "react";
+import { ReactElement, ReactNode, useContext, useRef, useState } from "react";
 import { GridApi, RowNode } from "ag-grid-community";
 import { GridContext } from "./GridContext";
 import { delay, difference, isEmpty, last, sortBy } from "lodash-es";
-import { isNotEmpty } from "../utils/util";
+import { isNotEmpty, wait } from "../utils/util";
 import { GridUpdatingContext } from "./GridUpdatingContext";
 import { GridBaseRow } from "../components/Grid";
 
@@ -17,21 +17,14 @@ interface GridContextProps {
  */
 export const GridContextProvider = (props: GridContextProps): ReactElement => {
   const { modifyUpdating } = useContext(GridUpdatingContext);
-  const gridApiRef = useRef<GridApi>();
+  const [gridApi, _setGridApi] = useState<GridApi>();
+  const [gridReady, setGridReady] = useState(false);
   const idsBeforeUpdate = useRef<number[]>([]);
+  const externallySelectedItemsAreInSync = useRef(false);
 
-  /**
-   * Has Grid api has been set?
-   * Some ops in components may occur before onGridReady has been called,
-   * and thus will need to check grid is ready before calling.
-   */
-  const gridReady = () => gridApiRef.current != null;
-
-  /**
-   * Set current ref to grid api.
-   */
-  const setGridApi = (_gridApi: GridApi | undefined) => {
-    gridApiRef.current = _gridApi;
+  const setGridApi = (gridApi: GridApi | undefined) => {
+    _setGridApi(gridApi);
+    setGridReady(!!gridApi);
   };
 
   /**
@@ -47,7 +40,6 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
     if (!noApiFn) {
       noApiFn = (() => {}) as () => R;
     }
-    const gridApi = gridApiRef.current;
     return gridApi ? hasApiFn(gridApi) : noApiFn();
   };
 
@@ -121,7 +113,7 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
     rowIds: number[] | undefined,
     select: boolean,
     flash: boolean,
-    retryCount = 5, // We retry for approximately 5x200ms=1s
+    retryCount = 15, // We retry for approximately 5x200ms=1s
   ) => {
     return gridApiOp((gridApi) => {
       const rowNodes = rowIds ? _rowIdsToNodes(rowIds) : _getNewNodes();
@@ -302,6 +294,17 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
     });
   };
 
+  const setExternallySelectedItemsAreInSync = (inSync: boolean) => {
+    externallySelectedItemsAreInSync.current = inSync;
+  };
+
+  const waitForExternallySelectedItemsToBeInSync = async () => {
+    // Wait for up to 5 seconds
+    for (let i = 0; i < 5000 / 200 && !externallySelectedItemsAreInSync.current; i++) {
+      await wait(200);
+    }
+  };
+
   return (
     <GridContext.Provider
       value={{
@@ -323,6 +326,8 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
         stopEditing,
         updatingCells,
         redrawRows,
+        setExternallySelectedItemsAreInSync,
+        waitForExternallySelectedItemsToBeInSync,
       }}
     >
       {props.children}

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

@@ -205,6 +205,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
       columnDefs={columnDefs}
       rowData={rowData}
       domLayout={"autoHeight"}
+      autoSelectFirstRow={true}
     />
   );
 };

package/src/utils/testUtil.ts

@@ -1,7 +1,6 @@
 import { act, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { findQuick, getAllQuick, getMatcher, getQuick, queryQuick } from "./testQuick";
-import { wait } from "./util";
 
 export const countRows = async (within?: HTMLElement): Promise<number> => {
   return getAllQuick({ tagName: `div[row-id]:not(:empty)` }, within).length;
@@ -22,9 +21,15 @@ const _selectRow = async (
 ): Promise<void> => {
   await act(async () => {
     const row = await findRow(rowId, within);
-    const isSelected = !row.className.includes("ag-row-selected");
+    const isSelected = row.className.includes("ag-row-selected");
     if (select === "toggle" || (select === "select" && !isSelected) || (select === "deselect" && isSelected)) {
-      userEvent.click(row);
+      const cell = await findCell(rowId, "selection", within);
+      userEvent.click(cell);
+      await waitFor(async () => {
+        const row = await findRow(rowId, within);
+        const nowSelected = row.className.includes("ag-row-selected");
+        if (nowSelected == isSelected) throw `Row ${rowId} won't select`;
+      });
     }
   });
 };
@@ -63,11 +68,12 @@ export const selectCell = async (rowId: string | number, colId: string, within?:
 };
 
 export const editCell = async (rowId: number | string, colId: string, within?: HTMLElement): Promise<void> => {
+  await selectRow(rowId, within);
   await act(async () => {
     const cell = await findCell(rowId, colId, within);
     userEvent.dblClick(cell);
   });
-  await findOpenMenu();
+  await waitFor(findOpenMenu);
 };
 
 const findOpenMenu = async (): Promise<HTMLElement> => findQuick({ classes: ".szh-menu--state-open" });
@@ -89,14 +95,14 @@ export const findMenuOption = async (menuOptionText: string | RegExp): Promise<H
       }
       return menuOption;
     },
-    { timeout: 10000 },
+    { timeout: 5000 },
   );
 };
 
 export const clickMenuOption = async (menuOptionText: string | RegExp): Promise<void> => {
+  const menuOption = await findMenuOption(menuOptionText);
   await act(async () => {
-    const menuOption = await findMenuOption(menuOptionText);
-    menuOption && userEvent.click(menuOption);
+    userEvent.click(menuOption);
   });
 };
 
@@ -107,7 +113,6 @@ export const openAndClickMenuOption = async (
   within?: HTMLElement,
 ): Promise<void> => {
   await editCell(rowId, colId, within);
-  await wait(100);
   await clickMenuOption(menuOptionText);
 };