@linzjs/step-ag-grid 21.1.4 → 21.2.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "21.1.4",
+  "version": "21.2.1",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -41,7 +41,7 @@
     "matcher": "^5.0.0",
     "react-transition-state": "^2.1.1",
     "usehooks-ts": "^3.1.0",
-    "uuid": "^9.0.1"
+    "uuid": "^10.0.0"
   },
   "scripts": {
     "build": "run-s clean stylelint lint css bundle",
@@ -79,50 +79,50 @@
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@chromatic-com/storybook": "^1.3.5",
-    "@linzjs/lui": "^21.30.0",
-    "@rollup/plugin-commonjs": "^25.0.7",
+    "@linzjs/lui": "^21.38.2",
+    "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-essentials": "^8.1.1",
-    "@storybook/addon-interactions": "^8.1.1",
-    "@storybook/addon-links": "^8.1.1",
-    "@storybook/react": "^8.1.1",
-    "@storybook/react-vite": "^8.1.1",
-    "@storybook/test": "^8.1.1",
-    "@storybook/test-runner": "^0.18.1",
-    "@testing-library/dom": "^10.1.0",
-    "@testing-library/jest-dom": "^6.4.5",
+    "@storybook/addon-essentials": "^8.1.11",
+    "@storybook/addon-interactions": "^8.1.11",
+    "@storybook/addon-links": "^8.1.11",
+    "@storybook/react": "^8.1.11",
+    "@storybook/react-vite": "^8.1.11",
+    "@storybook/test": "^8.1.11",
+    "@storybook/test-runner": "^0.19.0",
+    "@testing-library/dom": "^10.2.0",
+    "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/debounce-promise": "^3.1.9",
     "@types/jest": "^29.5.12",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^18.19.33",
-    "@types/react": "^18.3.2",
+    "@types/node": "^18.19.39",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@types/uuid": "^9.0.8",
-    "@typescript-eslint/eslint-plugin": "^7.10.0",
-    "@typescript-eslint/parser": "^7.10.0",
-    "@vitejs/plugin-react-swc": "^3.6.0",
-    "ag-grid-community": "^31",
-    "ag-grid-react": "^31",
+    "@types/uuid": "^10.0.0",
+    "@typescript-eslint/eslint-plugin": "^7.15.0",
+    "@typescript-eslint/parser": "^7.15.0",
+    "@vitejs/plugin-react-swc": "^3.7.0",
+    "ag-grid-community": "^31.3.2",
+    "ag-grid-react": "^31.3.2",
     "babel-jest": "^29.7.0",
     "babel-preset-react-app": "^10.0.1",
-    "chromatic": "^11.3.2",
-    "css-loader": "^7.1.1",
-    "esbuild": "^0.21.2",
+    "chromatic": "^11.5.4",
+    "css-loader": "^7.1.2",
+    "esbuild": "^0.22.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-deprecation": "^2.0.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^28.5.0",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-jest": "^28.6.0",
+    "eslint-plugin-jsx-a11y": "^6.9.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-testing-library": "^6.2.2",
@@ -132,31 +132,31 @@
     "jest-expect-message": "^1.1.3",
     "mkdirp": "^3.0.1",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.38",
+    "postcss": "^8.4.39",
     "postcss-loader": "^7.3.4",
     "postcss-scss": "^4.0.9",
-    "prettier": "^3.2.5",
+    "prettier": "^3.3.2",
     "react": ">=18",
     "react-app-polyfill": "^3.0.0",
-    "react-dom": ">=18",
-    "rollup": "^4.17.2",
+    "react-dom": "^18.3.1",
+    "rollup": "^4.18.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.36.0",
-    "sass": "1.77.1",
+    "sass": "^1.77.6",
     "sass-loader": "^14.2.1",
     "semantic-release": "^22.0.12",
-    "storybook": "^8.1.1",
+    "storybook": "^8.1.11",
     "storybook-css-modules-preset": "^1.1.1",
     "style-loader": "^4.0.0",
-    "stylelint": "15.11.0",
+    "stylelint": "^15.11.0",
     "stylelint-config-recommended-scss": "^13.1.0",
     "stylelint-config-standard": "^34.0.0",
     "stylelint-prettier": "^4.1.0",
     "stylelint-scss": "^5.3.2",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.11",
+    "typescript": "^5.5.3",
+    "vite": "^5.3.2",
     "vite-plugin-html": "^3.2.2",
     "vite-tsconfig-paths": "^4.3.2"
   },

package/src/components/gridFilter/GridFilterQuick.tsx

@@ -1,3 +1,4 @@
+import { LuiIcon } from "@linzjs/lui";
 import { useContext, useEffect, useState } from "react";
 
 import { GridContext } from "../../contexts/GridContext";
@@ -17,11 +18,14 @@ export const GridFilterQuick = ({ quickFilterPlaceholder, defaultValue }: GridFi
 
   return (
     <div className="GridFilterQuick-container">
+      <div className="GridFilterQuick-icon">
+        <LuiIcon name={"ic_search"} alt={"Search"} size={"md"} />
+      </div>
       <input
         aria-label="Search"
         className="GridFilterQuick-input"
         type="text"
-        placeholder={quickFilterPlaceholder ?? "Search..."}
+        placeholder={quickFilterPlaceholder ?? "Search"}
         value={quickFilterValue}
         onChange={(event) => {
           setQuickFilterValue(event.target.value);

package/src/contexts/GridContextProvider.tsx

@@ -20,7 +20,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
   const { modifyUpdating, checkUpdating } = useContext(GridUpdatingContext);
   const [gridApi, setGridApi] = useState<GridApi>();
   const [gridReady, setGridReady] = useState(false);
-  const [quickFilter, setQuickFilter] = useState("");
+  const [quickFilter, _setQuickFilter] = useState("");
   const [invisibleColumnIds, _setInvisibleColumnIds] = useState<string[]>();
   const testId = useRef<string | undefined>();
   const idsBeforeUpdate = useRef<number[]>([]);
@@ -28,6 +28,15 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
   const [externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync] = useState(false);
   const externalFilters = useRef<GridFilterExternal<TData>[]>([]);
 
+  const setQuickFilter = useCallback(
+    (filter: string) => {
+      // If we don't clear the focused cell focus switches back to grid when typing in the quick filter input
+      gridApi?.clearFocusedCell();
+      _setQuickFilter(filter);
+    },
+    [gridApi],
+  );
+
   /**
    * Make extra sure the GridCellFillerColId never gets added to invisibleColumnIds as it's dynamically determined
    */
@@ -630,7 +639,24 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
   const onFilterChanged = useMemo(
     () =>
       debounce(() => {
-        gridApi && gridApi.onFilterChanged();
+        // This is terrible, but there's no other way for me to check whether a filter has changed the grid
+        const getDisplayedRowsHash = () => {
+          const arr: any[] = [];
+          gridApi?.forEachNodeAfterFilter((rowNode) => {
+            arr.push(rowNode.id);
+          });
+          return arr.join("|");
+        };
+
+        if (gridApi) {
+          const hasFocusedCell = gridApi.getFocusedCell();
+          const preHash = hasFocusedCell && getDisplayedRowsHash();
+          gridApi.onFilterChanged();
+          const postHash = hasFocusedCell && getDisplayedRowsHash();
+          // Ag-grid has a bug where if a focused cell comes into view after a filter the filter loses focus
+          // So the focus is cleared to prevent this
+          preHash !== postHash && gridApi.clearFocusedCell();
+        }
       }, 200),
     [gridApi],
   );

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

@@ -255,7 +255,14 @@ const GridReadOnlyTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
   );
 };
 
-const GridFilterLessThan = (props: { field: keyof ITestRow; text: string }): ReactElement => {
+type KeysOfType<TObject, TValue> = {
+  [K in keyof TObject]: TObject[K] extends TValue ? K : never;
+}[keyof TObject];
+
+const GridFilterLessThan = (props: {
+  field: KeysOfType<ITestRow, number | null | undefined>;
+  text: string;
+}): ReactElement => {
   const [value, setValue] = useState<number>();
 
   const filter = useCallback(

package/src/styles/Grid.scss

@@ -54,15 +54,27 @@
   flex: 1;
 }
 
+.GridFilterQuick-icon {
+  position: absolute;
+  margin: 8px;
+  pointer-events: none;
+  fill: colors.$fuscous;
+}
+
 .GridFilterQuick-input {
   width: 100%;
   height: 40px;
   min-height: 40px;
   border: 0.06rem solid colors.$silver;
   border-radius: 3px;
-  padding-left: 0.75rem;
+  padding-left: 36px;
   padding-right: 0.75rem;
   font-family: "Open Sans", system-ui, sans-serif;
+
+  &::placeholder {
+    color: colors.$fuscous;
+    font-style: italic;
+  }
 }
 
 .Grid-popoverContainer {