@linzjs/step-ag-grid 19.1.0 → 20.0.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "19.1.0",
+  "version": "20.0.0",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -28,21 +28,17 @@
   },
   "peerDependencies": {
     "@linzjs/lui": ">=21",
-    "ag-grid-react": "~29",
+    "ag-grid-community": "^30",
+    "ag-grid-react": "^30",
     "lodash-es": ">=4",
     "react": ">=18",
     "react-dom": ">=18"
   },
   "dependencies": {
-    "@linzjs/lui": ">=21",
-    "ag-grid-community": "~29",
-    "ag-grid-react": "~29",
     "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": "^3.1.0",
     "uuid": "^9.0.1"
@@ -91,7 +87,6 @@
     "@semantic-release/git": "^10.0.1",
     "@storybook/addon-essentials": "^8.1.0",
     "@storybook/addon-interactions": "^8.1.0",
-    "@storybook/addon-postcss": "^2.0.0",
     "@storybook/preset-create-react-app": "^8.1.0",
     "@storybook/react": "^8.1.0",
     "@storybook/react-webpack5": "^8.1.0",
@@ -114,7 +109,6 @@
     "babel-jest": "^29.7.0",
     "babel-preset-react-app": "^10.0.1",
     "chromatic": "^11.3.2",
-    "conventional-changelog-conventionalcommits": "^6.1.0",
     "css-loader": "^7.1.1",
     "esbuild": "^0.21.2",
     "eslint": "^8.57.0",
@@ -158,7 +152,12 @@
     "stylelint-prettier": "^4.1.0",
     "stylelint-scss": "^5.3.2",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
-    "typescript": "^4.9.5"
+    "typescript": "^4.9.5",
+    "@linzjs/lui": ">=21",
+    "ag-grid-community": "^30",
+    "ag-grid-react": "^30",
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "babel": {
     "presets": [

package/src/components/GridCell.tsx

@@ -65,7 +65,7 @@ export interface ColDefT<RowType extends GridBaseRow> extends ColDef {
 export const suppressCellKeyboardEvents = (e: SuppressKeyboardEventParams) => {
   const shortcutKeys = e.colDef.cellRendererParams?.shortcutKeys ?? {};
   const exec = shortcutKeys[e.event.key];
-  if (!e.editing && !e.event.repeat && e.event.type === "keypress" && exec) {
+  if (exec && !e.editing && !e.event.repeat && e.event.type === "keydown") {
     const editable = fnOrVar(e.colDef?.editable, e);
     return editable ? exec(e) ?? true : true;
   }

package/src/stories/grid/interactions/GridKeyboardInteractions.stories.tsx

@@ -4,7 +4,7 @@ import "@linzjs/lui/dist/scss/base.scss";
 
 import { Meta, StoryFn } from "@storybook/react";
 import { expect } from "@storybook/test";
-import * as test from "@storybook/test";
+import { fn } from "@storybook/test";
 import { userEvent, waitFor } from "@storybook/test";
 import { useMemo, useState } from "react";
 
@@ -66,11 +66,13 @@ interface ITestRow {
   dd: string;
 }
 
-const multiEditAction = test.fn().mockImplementation(async () => {
+const multiEditAction = fn(async () => {
   await wait(500);
 });
 
-const eAction = test.fn<[], boolean>().mockReturnValue(true);
+const eAction = fn(() => {
+  return true;
+});
 
 const GridKeyboardInteractionsTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
   const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);

package/src/styles/GridTheme.scss

@@ -60,7 +60,11 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
 
 .ag-theme-step-default.theme-specific,
 .ag-theme-step-compact.theme-specific {
-
+  div.ag-center-cols-viewport {
+    // when using domLayout={"autoHeight"}, ag grid has a default min-height
+    // set to 150px so the !important is necessary here
+    min-height: 40px !important;
+  }
   // fix alignment of cell content when grabber is present
   .ag-header-cell-comp-wrapper {
     justify-content: end;
@@ -140,17 +144,25 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     background-color: lightgoldenrodyellow;
   }
 
-  .ag-center-cols-clipper {
-    // when using domLayout={"autoHeight"}, ag grid has a default min-height
-    // set to 150px so the !important is necessary here
-    min-height: 40px !important;
-  }
-
   .ag-body-horizontal-scroll-viewport {
     // It's set to scroll by default, but this causes issues with selecting the last row
     overflow-x: auto;
   }
 
+  .ag-header-group-cell {
+    text-transform: uppercase;
+    font-size: 12px;
+    margin-top: 12px;
+    height: 28px;
+    font-weight: 800;
+    letter-spacing: 2px;
+    justify-content: center;
+
+    &.ag-header-group-cell-with-group {
+      background-color: lui.$iceberg;
+    }
+  }
+
   .ag-cell {
     font-weight: 400;
   }
@@ -224,22 +236,6 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     border-bottom: 2px dashed lui.$andrea;
   }
 
-  // .ag-header .ag-pinned-left-header:after,
-  // .ag-body-viewport .ag-pinned-left-cols-container:after {
-  //   content: " ";
-  //   height: 100%;
-  //   position: absolute;
-  //   z-index: 1;
-  //   top: 0;
-  //   width: 15px;
-  //   box-shadow: -4px 0px 15px -4px rgba(0, 0, 0, 0.1);
-  //   right: -4px;
-  // }
-
-  // div:after {
-  //   box-shadow: 15px 0 15px -15px inset;
-  //   right: -15px;
-  // }
   .ag-pinned-left-header,
   .ag-pinned-right-header,
   .ag-pinned-right-cols-container,

package/src/utils/testUtil.ts

@@ -28,19 +28,26 @@ export const findRow = async (rowId: number | string, within?: HTMLElement): Pro
       { tagName: `.ag-center-cols-container div[row-id='${rowId}']:not(:empty)` },
       within,
     );
-    let combineChildren = Array.from(row.children);
+    // @ts-ignore
+    let combineChildren = [...row.children];
 
     const leftCols = queryQuick<HTMLDivElement>(
       { tagName: `.ag-pinned-left-cols-container div[row-id='${rowId}']` },
       within,
     );
-    if (leftCols) combineChildren = [...Array.from(row.children), ...combineChildren];
+    if (leftCols) {
+      // @ts-ignore
+      combineChildren = [...leftCols.children, ...combineChildren];
+    }
 
     const rightCols = queryQuick<HTMLDivElement>(
       { tagName: `.ag-pinned-right-cols-container div[row-id='${rowId}']` },
       within,
     );
-    if (rightCols) combineChildren = [...Array.from(row.children), ...combineChildren];
+    if (rightCols) {
+      // @ts-ignore
+      combineChildren = [...rightCols.children, ...combineChildren];
+    }
 
     row.replaceChildren(...combineChildren);
   });