@linzjs/step-ag-grid 7.11.6 → 7.11.7

package/package.json

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

package/src/components/Grid.tsx

@@ -178,6 +178,18 @@ export const Grid = (params: GridProps): JSX.Element => {
             suppressSizeToFit: true,
             checkboxSelection: true,
             headerComponent: GridHeaderSelect,
+            suppressHeaderKeyboardEvent: (e) => {
+              if (e.event.key === "Enter" && !e.event.repeat) {
+                const selectedNodeCount = e.api.getSelectedRows().length;
+                if (selectedNodeCount == 0) {
+                  e.api.selectAllFiltered();
+                } else {
+                  e.api.deselectAll();
+                }
+                return false;
+              }
+              return true;
+            },
             onCellClicked: clickSelectorCheckboxWhenContainingCellClicked,
           },
           ...adjustColDefs,

package/src/components/gridHeader/GridHeaderSelect.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import { IHeaderParams } from "ag-grid-community";
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 /**
  * AgGrid's existing select header doesn't work the way we want.
@@ -12,9 +12,9 @@ export const GridHeaderSelect = ({ api }: IHeaderParams) => {
   const [updateCounter, setUpdateCounter] = useState(0);
   const selectedNodeCount = api.getSelectedRows().length;
 
-  const clickHandler = useCallback(() => {
+  const clickHandler = () => {
     setUpdateCounter(updateCounter + 1);
-  }, [updateCounter]);
+  };
 
   useEffect(() => {
     api.addEventListener("selectionChanged", clickHandler);

package/src/contexts/GridContextProvider.tsx

@@ -1,5 +1,5 @@
 import { ReactElement, ReactNode, useContext, useRef, useState } from "react";
-import { GridApi, RowNode } from "ag-grid-community";
+import { ColDef, GridApi, RowNode } from "ag-grid-community";
 import { GridContext } from "./GridContext";
 import { delay, difference, isEmpty, last, sortBy } from "lodash-es";
 import { isNotEmpty, wait } from "../utils/util";
@@ -131,7 +131,18 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
         (node) => node.data.id,
       );
       const firstNode = rowsThatNeedSelecting[0];
-      firstNode && gridApi.ensureNodeVisible(firstNode);
+      if (firstNode) {
+        gridApi.ensureNodeVisible(firstNode);
+        const colDefs = gridApi.getColumnDefs();
+        if (colDefs && colDefs.length) {
+          const col = colDefs[0] as ColDef; // We don't support ColGroupDef
+          const rowIndex = firstNode.rowIndex;
+          if (rowIndex != null && col != null) {
+            const colId = col.colId;
+            colId != null && setTimeout(() => gridApi.setFocusedCell(rowIndex, colId), 100);
+          }
+        }
+      }
       if (select) {
         // Select rows that shouldn't be selected
         rowsThatNeedSelecting.forEach((node) => node.setSelected(true));

package/src/stories/grid/GridPopoutEditGenericTextArea.stories.tsx

@@ -7,7 +7,7 @@ import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/clien
 import { GridUpdatingContextProvider } from "../../contexts/GridUpdatingContextProvider";
 import { GridContextProvider } from "../../contexts/GridContextProvider";
 import { Grid, GridProps } from "../../components/Grid";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useContext, useMemo, useState } from "react";
 import { ColDefT, GridCell } from "../../components/GridCell";
 import { IFormTestRow } from "./FormTest";
 import { isFloat, wait } from "../../utils/util";
@@ -15,6 +15,7 @@ import { GridPopoverTextArea } from "../../components/gridPopoverEdit/GridPopove
 import { GridPopoverTextInput } from "../../components/gridPopoverEdit/GridPopoverTextInput";
 import { ActionButton } from "../../lui/ActionButton";
 import { GridPopoverMenu } from "../../components/gridPopoverEdit/GridPopoverMenu";
+import { GridContext } from "../../contexts/GridContext";
 
 export default {
   title: "Components / Grids",
@@ -37,6 +38,7 @@ export default {
 } as ComponentMeta<typeof Grid>;
 
 const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
+  const { selectRowsWithFlashDiff } = useContext(GridContext);
   const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
   const [rowData, setRowData] = useState([
     { id: 1000, name: "IS IS DP12345", nameType: "IS", numba: "IX", plan: "DP 12345", distance: 10 },
@@ -155,9 +157,12 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
 
   const addRowAction = useCallback(async () => {
     await wait(1000);
+
     const lastRow = rowData[rowData.length - 1];
-    setRowData([...rowData, { id: lastRow.id + 1, name: "?", nameType: "?", numba: "?", plan: "", distance: null }]);
-  }, [rowData]);
+    await selectRowsWithFlashDiff(async () => {
+      setRowData([...rowData, { id: lastRow.id + 1, name: "?", nameType: "?", numba: "?", plan: "", distance: null }]);
+    });
+  }, [rowData, selectRowsWithFlashDiff]);
 
   return (
     <>