@linzjs/step-ag-grid 18.1.0 → 19.1.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "18.1.0",
+  "version": "19.1.0",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -37,14 +37,14 @@
     "@linzjs/lui": ">=21",
     "ag-grid-community": "~29",
     "ag-grid-react": "~29",
-    "clsx": "^2.0.0",
+    "clsx": "^2.1.1",
     "debounce-promise": "^3.1.2",
     "lodash-es": ">=4",
     "matcher": "^5.0.0",
     "react": ">=18",
     "react-dom": ">=18",
     "react-transition-state": "^2.1.1",
-    "usehooks-ts": "^2.9.1",
+    "usehooks-ts": "^3.1.0",
     "uuid": "^9.0.1"
   },
   "scripts": {
@@ -83,78 +83,79 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@rollup/plugin-commonjs": "^25.0.5",
-    "@rollup/plugin-json": "^6.0.1",
+    "@chromatic-com/storybook": "^1.3.5",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@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": "^7.6.4",
-    "@storybook/addon-interactions": "^7.6.4",
+    "@storybook/addon-essentials": "^8.1.0",
+    "@storybook/addon-interactions": "^8.1.0",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/jest": "^0.2.3",
-    "@storybook/preset-create-react-app": "^7.6.4",
-    "@storybook/react": "^7.6.4",
-    "@storybook/react-webpack5": "^7.6.4",
-    "@storybook/test-runner": "^0.16.0",
-    "@storybook/testing-library": "^0.2.2",
-    "@testing-library/dom": "^9.3.3",
-    "@testing-library/jest-dom": "^6.1.5",
-    "@testing-library/react": "^14.1.2",
-    "@testing-library/user-event": "^14.5.1",
+    "@storybook/preset-create-react-app": "^8.1.0",
+    "@storybook/react": "^8.1.0",
+    "@storybook/react-webpack5": "^8.1.0",
+    "@storybook/test": "^8.1.0",
+    "@storybook/test-runner": "^0.18.0",
+    "@testing-library/dom": "^10.1.0",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@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.7",
-    "@types/jest": "^29.5.5",
-    "@types/lodash-es": "^4.17.9",
-    "@types/node": "^18.18.4",
-    "@types/react": "^18.2.25",
-    "@types/react-dom": "^18.2.11",
-    "@types/uuid": "^9.0.5",
-    "@typescript-eslint/parser": "^5.62.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/react-dom": "^18.3.0",
+    "@types/uuid": "^9.0.8",
+    "@typescript-eslint/eslint-plugin": "^7.9.0",
+    "@typescript-eslint/parser": "^7.9.0",
     "babel-jest": "^29.7.0",
     "babel-preset-react-app": "^10.0.1",
-    "chromatic": "^10.1.0",
+    "chromatic": "^11.3.2",
     "conventional-changelog-conventionalcommits": "^6.1.0",
-    "css-loader": "^6.8.1",
-    "esbuild": "^0.19.9",
-    "eslint": "^8.51.0",
-    "eslint-config-prettier": "^9.0.0",
+    "css-loader": "^7.1.1",
+    "esbuild": "^0.21.2",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-deprecation": "^1.6.0",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-jest": "^27.4.2",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.15",
-    "eslint-plugin-testing-library": "^6.0.2",
+    "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-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-testing-library": "^6.2.2",
     "jest": "^29.7.0",
     "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.7.0",
     "jest-expect-message": "^1.1.3",
     "mkdirp": "^3.0.1",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.31",
-    "postcss-loader": "^7.3.3",
+    "postcss": "^8.4.38",
+    "postcss-loader": "^7.3.4",
     "postcss-scss": "^4.0.9",
-    "prettier": "^2.8.8",
+    "prettier": "^3.2.5",
     "react-app-polyfill": "^3.0.0",
     "react-scripts": "^5.0.1",
-    "rollup": "^4.0.2",
+    "rollup": "^4.17.2",
     "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.66.1",
-    "sass-loader": "^13.3.2",
-    "semantic-release": "^22.0.10",
-    "storybook": "^7.6.4",
+    "sass": "1.77.1",
+    "sass-loader": "^14.2.1",
+    "semantic-release": "^22.0.12",
+    "storybook": "^8.1.0",
     "storybook-css-modules-preset": "^1.1.1",
-    "style-loader": "^3.3.3",
-    "stylelint": "^15.10.3",
-    "stylelint-config-recommended-scss": "^12.0.0",
+    "style-loader": "^4.0.0",
+    "stylelint": "15.11.0",
+    "stylelint-config-recommended-scss": "^13.1.0",
     "stylelint-config-standard": "^34.0.0",
-    "stylelint-prettier": "^3.0.0",
+    "stylelint-prettier": "^4.1.0",
     "stylelint-scss": "^5.3.2",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "^4.9.5"

package/src/components/gridFilter/GridFilterColumnsToggle.tsx

@@ -92,7 +92,7 @@ export const GridFilterColumnsToggle = ({ saveState = true }: GridFilterColumnsT
       <div className={"GridFilterColumnsToggle-container"}>
         {getColumns("headerName").map((col) => (
           <MenuItem
-            key={col.colId}
+            key={col.colId ?? "no_col_id"}
             disabled={isNonManageableColumn(col)}
             onClick={(e: ClickEvent) => {
               // Global react-menu MenuItem handler handles tabs

package/src/components/gridForm/GridFormMultiSelectGrid.tsx

@@ -145,8 +145,8 @@ export const GridFormMultiSelectGrid = <RowType extends GridBaseRow>(
                     value={`${o.value}`}
                     label={
                       <>
-                        {o.warning && <GridIcon icon={"ic_warning_outline"} title={o.warning} />}
-                        <span className={"GridMultiSelectGrid-Label"}>
+                        {o.warning && <GridIcon key={"$$icon$$"} icon={"ic_warning_outline"} title={o.warning} />}
+                        <span key={"$$label$$"} className={"GridMultiSelectGrid-Label"}>
                           {o.label ?? (o.value == null ? `<${o.value}>` : `${o.value}`)}
                         </span>
                       </>

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

@@ -264,10 +264,12 @@ export const ControlledMenuFr = (
     [onItemClick, onClose],
   );
 
-  const onKeyDown = ({ key }: KeyboardEvent) => {
-    switch (key) {
+  const onKeyUp = (e: KeyboardEvent) => {
+    switch (e.key) {
       case Keys.ESC:
-        safeCall(onClose, { key, reason: CloseReason.CANCEL });
+        e.preventDefault();
+        e.stopPropagation();
+        safeCall(onClose, { key: e.key, reason: CloseReason.CANCEL });
         break;
     }
   };
@@ -298,7 +300,7 @@ export const ControlledMenuFr = (
 
   const menuList = (
     <div
-      {...mergeProps({ onKeyDown, onBlur }, containerProps)}
+      {...mergeProps({ onKeyUp, onBlur }, containerProps)}
       className={useBEM({
         block: menuContainerClass,
         modifiers,

package/src/stories/grid/GridNoRowsOverlay.stories.tsx

@@ -1,8 +1,8 @@
 import "@linzjs/lui/dist/scss/base.scss";
 
-import { expect } from "@storybook/jest";
 import { Meta, StoryFn } from "@storybook/react";
-import { within } from "@storybook/testing-library";
+import { expect } from "@storybook/test";
+import { within } from "@storybook/test";
 
 import "@linzjs/lui/dist/fonts";
 

package/src/stories/grid/gridFormInteraction/GridFormDropDownInteraction.stories.tsx

@@ -2,35 +2,26 @@ import "../../../react-menu3/styles/index.scss";
 import "../../../styles/index.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 
-import { expect, jest } from "@storybook/jest";
-import { Meta, StoryFn } from "@storybook/react";
-import { userEvent, within } from "@storybook/testing-library";
-import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
+import { StoryFn } from "@storybook/react";
+import { expect, fn, userEvent, within } from "@storybook/test";
+import { GridPopoverContext } from "contexts/GridPopoverContext";
 import { useRef } from "react";
 
 import "@linzjs/lui/dist/fonts";
 
-import {
-  GridContextProvider,
-  GridFormDropDown,
-  GridFormDropDownProps,
-  GridFormSubComponentTextInput,
-  GridPopoutEditDropDownSelectedItem,
-} from "../../..";
+import { GridContext, GridFormDropDown, GridFormDropDownProps, GridFormSubComponentTextInput } from "../../..";
 
 export default {
   title: "GridForm / Interactions",
   component: GridFormDropDown,
   args: {},
-} as Meta<typeof GridFormDropDown>;
+};
 
-const updateValue = jest
-  .fn<void, [saveFn: (selectedRows: any[]) => Promise<boolean>, _tabDirection: 1 | 0 | -1]>()
-  .mockImplementation((saveFn: (selectedRows: any[]) => Promise<boolean>, _tabDirection: 1 | 0 | -1) => saveFn([]));
+const updateValue = fn(async (saveFn: (selectedRows: any[]) => Promise<boolean>, _tabDirection: 1 | 0 | -1) =>
+  saveFn([]),
+);
 
-const onSelectedItem = jest
-  .fn<Promise<void>, [GridPopoutEditDropDownSelectedItem<any>]>()
-  .mockImplementation(async () => undefined);
+const onSelectedItem = fn(async () => {});
 
 const Template: StoryFn<typeof GridFormDropDown> = (props: GridFormDropDownProps<any>) => {
   const config: GridFormDropDownProps<any> = {
@@ -52,30 +43,37 @@ const Template: StoryFn<typeof GridFormDropDown> = (props: GridFormDropDownProps
 
   return (
     <div className={"react-menu-inline-test"}>
-      <GridContextProvider>
-        <div>
-          <h6 ref={anchorRef}>Interaction test</h6>
-          <GridPopoverContext.Provider
-            value={
-              {
-                anchorRef: anchorRef,
-                updateValue,
-                data: { value: "" },
-                value: "",
-                field: "value",
-                selectedRows: [],
-              } as any as GridPopoverContextType<any>
-            }
-          >
-            <GridFormDropDown {...props} {...config} />
-          </GridPopoverContext.Provider>
-        </div>
-      </GridContextProvider>
+      <GridContext.Provider
+        value={
+          {
+            stopEditing: () => {},
+            cancelEdit: () => {},
+          } as any
+        }
+      >
+        <h6 ref={anchorRef}>Interaction test</h6>
+        <GridPopoverContext.Provider
+          value={{
+            anchorRef,
+            updateValue,
+            data: { value: "" },
+            value: "",
+            field: "value",
+            selectedRows: [],
+            formatValue: () => "",
+            saving: false,
+            setSaving: () => {},
+          }}
+        >
+          <GridFormDropDown {...props} {...config} />
+        </GridPopoverContext.Provider>
+      </GridContext.Provider>
     </div>
   );
 };
 
-export const GridFormDropDownInteractions_ = Template.bind({});
+//console.log({ extendedExpect });
+export const GridFormDropDownInteractions_: typeof Template = Template.bind({});
 GridFormDropDownInteractions_.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
 
@@ -114,7 +112,7 @@ GridFormDropDownInteractions_.play = async ({ canvasElement }) => {
   // Test tab to save
   updateValue.mockClear();
   await userEvent.tab();
-  expect(updateValue).toHaveBeenCalledWith(expect.anything(), 1); // 1 = Tab
+  expect(updateValue).toHaveBeenCalledWith(expect.anything(), 1); // 1 = tab
 
   // Test shift+tab to save
   updateValue.mockClear();

package/src/stories/grid/gridFormInteraction/GridFormEditBearingCorrectionInteraction.stories.tsx

@@ -2,16 +2,15 @@ import "../../../react-menu3/styles/index.scss";
 import "../../../styles/index.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 
-import { expect, jest } from "@storybook/jest";
-import { Meta, StoryFn } from "@storybook/react";
-import { userEvent, within } from "@storybook/testing-library";
-import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
+import { StoryFn } from "@storybook/react";
+import { expect, fn, userEvent, within } from "@storybook/test";
+import { GridPopoverContext } from "contexts/GridPopoverContext";
 import { useRef } from "react";
 
 import "@linzjs/lui/dist/fonts";
 
 import {
-  GridContextProvider,
+  GridContext,
   GridFormEditBearing,
   GridFormEditBearingProps,
   GridPopoverEditBearingCorrectionEditorParams,
@@ -21,34 +20,45 @@ export default {
   title: "GridForm / Interactions",
   component: GridFormEditBearing,
   args: {},
-} as Meta<typeof GridFormEditBearing>;
+};
 
-const updateValue = jest.fn();
+const updateValue = fn();
 
 const Template: StoryFn<typeof GridFormEditBearing> = (props: GridFormEditBearingProps<any>) => {
   const anchorRef = useRef<HTMLHeadingElement>(null);
 
   return (
     <div className={"react-menu-inline-test"}>
-      <GridContextProvider>
+      <GridContext.Provider
+        value={
+          {
+            stopEditing: () => {},
+            cancelEdit: () => {},
+          } as any
+        }
+      >
         <h6 ref={anchorRef}>Interaction Test</h6>
         <GridPopoverContext.Provider
-          value={
-            {
-              anchorRef,
-              value: null,
-              updateValue,
-            } as any as GridPopoverContextType<any>
-          }
+          value={{
+            anchorRef,
+            value: null,
+            updateValue,
+            formatValue: (value) => value,
+            setSaving: () => {},
+            saving: false,
+            selectedRows: [],
+            data: { value: "" },
+            field: "value",
+          }}
         >
           <GridFormEditBearing {...props} {...GridPopoverEditBearingCorrectionEditorParams} />
         </GridPopoverContext.Provider>
-      </GridContextProvider>
+      </GridContext.Provider>
     </div>
   );
 };
 
-export const GridFormEditBearingCorrectionInteractions_ = Template.bind({});
+export const GridFormEditBearingCorrectionInteractions_: typeof Template = Template.bind({});
 GridFormEditBearingCorrectionInteractions_.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
 

package/src/stories/grid/gridFormInteraction/GridFormEditBearingInteraction.stories.tsx

@@ -2,16 +2,15 @@ import "../../../react-menu3/styles/index.scss";
 import "../../../styles/index.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 
-import { expect, jest } from "@storybook/jest";
-import { Meta, StoryFn } from "@storybook/react";
-import { userEvent, within } from "@storybook/testing-library";
-import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
+import { StoryFn } from "@storybook/react";
+import { expect, fn, userEvent, within } from "@storybook/test";
+import { GridPopoverContext } from "contexts/GridPopoverContext";
 import { useRef } from "react";
 
 import "@linzjs/lui/dist/fonts";
 
 import {
-  GridContextProvider,
+  GridContext,
   GridFormEditBearing,
   GridFormEditBearingProps,
   GridPopoverEditBearingEditorParams,
@@ -21,34 +20,45 @@ export default {
   title: "GridForm / Interactions",
   component: GridFormEditBearing,
   args: {},
-} as Meta<typeof GridFormEditBearing>;
+};
 
-const updateValue = jest.fn();
+const updateValue = fn();
 
 const Template: StoryFn<typeof GridFormEditBearing> = (props: GridFormEditBearingProps<any>) => {
   const anchorRef = useRef<HTMLHeadingElement>(null);
 
   return (
     <div className={"react-menu-inline-test"}>
-      <GridContextProvider>
+      <GridContext.Provider
+        value={
+          {
+            stopEditing: () => {},
+            cancelEdit: () => {},
+          } as any
+        }
+      >
         <h6 ref={anchorRef}>Interaction Test</h6>
         <GridPopoverContext.Provider
-          value={
-            {
-              anchorRef,
-              value: null,
-              updateValue,
-            } as any as GridPopoverContextType<any>
-          }
+          value={{
+            anchorRef,
+            value: null,
+            updateValue,
+            formatValue: (value) => value,
+            setSaving: () => {},
+            saving: false,
+            selectedRows: [],
+            data: { value: "" },
+            field: "value",
+          }}
         >
           <GridFormEditBearing {...props} {...GridPopoverEditBearingEditorParams} />
         </GridPopoverContext.Provider>
-      </GridContextProvider>
+      </GridContext.Provider>
     </div>
   );
 };
 
-export const GridFormEditBearingInteractions_ = Template.bind({});
+export const GridFormEditBearingInteractions_: typeof Template = Template.bind({});
 GridFormEditBearingInteractions_.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
 

package/src/stories/grid/gridFormInteraction/GridFormMultiSelectGridInteraction.stories.tsx

@@ -2,36 +2,25 @@ import "../../../react-menu3/styles/index.scss";
 import "../../../styles/index.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 
-import { expect, jest } from "@storybook/jest";
-import { Meta, StoryFn } from "@storybook/react";
-import { userEvent, waitFor, within } from "@storybook/testing-library";
-import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
+import { StoryFn } from "@storybook/react";
+import { expect, fn, userEvent, waitFor, within } from "@storybook/test";
+import { GridPopoverContext } from "contexts/GridPopoverContext";
 import { useRef } from "react";
 
 import "@linzjs/lui/dist/fonts";
 
-import {
-  GridContextProvider,
-  GridFormMultiSelectGrid,
-  GridFormMultiSelectGridProps,
-  GridFormMultiSelectGridSaveProps,
-  MultiSelectGridOption,
-} from "../../..";
+import { GridContext, GridFormMultiSelectGrid, GridFormMultiSelectGridProps, MultiSelectGridOption } from "../../..";
 
 export default {
   title: "GridForm / Interactions",
   component: GridFormMultiSelectGrid,
   args: {},
-} as Meta<typeof GridFormMultiSelectGrid>;
+};
 
-const updateValue = jest
-  .fn<void, [saveFn: (selectedRows: any[]) => Promise<boolean>, _tabDirection: 1 | 0 | -1]>()
-  .mockImplementation((saveFn: (selectedRows: any[]) => Promise<boolean>, _tabDirection: 1 | 0 | -1) => saveFn([]));
+const updateValue = fn((saveFn: (selectedRows: any[]) => Promise<boolean>, _tabDirection: 1 | 0 | -1) => saveFn([]));
 
-const onSave = jest
-  .fn<Promise<boolean>, [GridFormMultiSelectGridSaveProps<any>]>()
-  .mockImplementation(async () => true);
-const onSelectFilter = jest.fn();
+const onSave = fn(async () => true);
+const onSelectFilter = fn();
 
 let options: MultiSelectGridOption[] = [];
 const Template: StoryFn<typeof GridFormMultiSelectGrid> = (props: GridFormMultiSelectGridProps<any>) => {
@@ -52,30 +41,36 @@ const Template: StoryFn<typeof GridFormMultiSelectGrid> = (props: GridFormMultiS
 
   return (
     <div className={"react-menu-inline-test"}>
-      <GridContextProvider>
-        <div>
-          <h6 ref={anchorRef}>Interaction test</h6>
-          <GridPopoverContext.Provider
-            value={
-              {
-                anchorRef: anchorRef,
-                updateValue,
-                data: { value: "" },
-                value: "",
-                field: "value",
-                selectedRows: [],
-              } as any as GridPopoverContextType<any>
-            }
-          >
-            <GridFormMultiSelectGrid {...props} {...config} />
-          </GridPopoverContext.Provider>
-        </div>
-      </GridContextProvider>
+      <GridContext.Provider
+        value={
+          {
+            stopEditing: () => {},
+            cancelEdit: () => {},
+          } as any
+        }
+      >
+        <h6 ref={anchorRef}>Interaction test</h6>
+        <GridPopoverContext.Provider
+          value={{
+            anchorRef: anchorRef,
+            updateValue,
+            value: "",
+            selectedRows: [],
+            formatValue: (value) => value,
+            setSaving: () => {},
+            saving: false,
+            data: { value: "" },
+            field: "value",
+          }}
+        >
+          <GridFormMultiSelectGrid {...props} {...config} />
+        </GridPopoverContext.Provider>
+      </GridContext.Provider>
     </div>
   );
 };
 
-export const GridFormMultiSelectGridInteractions_ = Template.bind({});
+export const GridFormMultiSelectGridInteractions_: typeof Template = Template.bind({});
 GridFormMultiSelectGridInteractions_.play = async ({ canvasElement }) => {
   updateValue.mockClear();
   onSave.mockClear();