@linzjs/step-ag-grid 17.13.0 → 18.1.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "17.13.0",
+  "version": "18.1.0",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -27,17 +27,16 @@
     "node": ">=18"
   },
   "peerDependencies": {
-    "@linzjs/lui": ">=18",
-    "ag-grid-community": ">=29",
-    "ag-grid-react": ">=29",
+    "@linzjs/lui": ">=21",
+    "ag-grid-react": "~29",
     "lodash-es": ">=4",
     "react": ">=18",
     "react-dom": ">=18"
   },
   "dependencies": {
-    "@linzjs/lui": ">=18",
-    "ag-grid-community": ">=29",
-    "ag-grid-react": ">=29",
+    "@linzjs/lui": ">=21",
+    "ag-grid-community": "~29",
+    "ag-grid-react": "~29",
     "clsx": "^2.0.0",
     "debounce-promise": "^3.1.2",
     "lodash-es": ">=4",
@@ -89,20 +88,20 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-essentials": "^7.4.6",
-    "@storybook/addon-interactions": "^7.4.6",
+    "@storybook/addon-essentials": "^7.6.4",
+    "@storybook/addon-interactions": "^7.6.4",
     "@storybook/addon-postcss": "^2.0.0",
     "@storybook/jest": "^0.2.3",
-    "@storybook/preset-create-react-app": "^7.4.6",
-    "@storybook/react": "^7.4.6",
-    "@storybook/react-webpack5": "^7.4.6",
-    "@storybook/test-runner": "^0.13.0",
+    "@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": "^5.17.0",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
-    "@trivago/prettier-plugin-sort-imports": "^4.2.0",
+    "@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",
@@ -113,9 +112,10 @@
     "@typescript-eslint/parser": "^5.62.0",
     "babel-jest": "^29.7.0",
     "babel-preset-react-app": "^10.0.1",
-    "chromatic": "^7.2.3",
+    "chromatic": "^10.1.0",
     "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",
     "eslint-config-react-app": "^7.0.1",
@@ -147,15 +147,15 @@
     "rollup-plugin-typescript2": "^0.36.0",
     "sass": "1.66.1",
     "sass-loader": "^13.3.2",
-    "semantic-release": "^22.0.5",
-    "storybook": "^7.4.6",
+    "semantic-release": "^22.0.10",
+    "storybook": "^7.6.4",
     "storybook-css-modules-preset": "^1.1.1",
     "style-loader": "^3.3.3",
     "stylelint": "^15.10.3",
     "stylelint-config-recommended-scss": "^12.0.0",
     "stylelint-config-standard": "^34.0.0",
     "stylelint-prettier": "^3.0.0",
-    "stylelint-scss": "^5.1.0",
+    "stylelint-scss": "^5.3.2",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "^4.9.5"
   },

package/src/components/Grid.tsx

@@ -105,6 +105,8 @@ export interface GridProps {
 
   loading?: boolean;
   suppressCellFocus?: boolean;
+  pinnedTopRowData?: GridOptions["pinnedTopRowData"];
+  pinnedBottomRowData?: GridOptions["pinnedBottomRowData"];
 }
 
 /**
@@ -738,6 +740,8 @@ export const Grid = ({
           onRowDragEnd={onRowDragEnd}
           onRowDragLeave={onRowDragLeave}
           suppressCellFocus={params.suppressCellFocus}
+          pinnedTopRowData={params.pinnedTopRowData}
+          pinnedBottomRowData={params.pinnedBottomRowData}
         />
       </div>
     </div>

package/src/index.ts

@@ -19,4 +19,3 @@ export * from "./react-menu3/types";
 export * from "./utils/bearing";
 export * from "./utils/util";
 export * from "./utils/deferredPromise";
-export * from "./utils/testUtil";

package/src/stories/grid/GridPinnedRow.stories.tsx

@@ -0,0 +1,105 @@
+import "../../styles/GridTheme.scss";
+import "../../styles/index.scss";
+import "@linzjs/lui/dist/scss/base.scss";
+
+import { Meta, StoryFn } from "@storybook/react";
+import { useMemo, useState } from "react";
+
+import "@linzjs/lui/dist/fonts";
+
+import {
+  ColDefT,
+  Grid,
+  GridCell,
+  GridContextProvider,
+  GridProps,
+  GridUpdatingContextProvider,
+  GridWrapper,
+} from "../..";
+import { waitForGridReady } from "../../utils/storybookTestUtil";
+
+export default {
+  title: "Components / Grids",
+  component: Grid,
+  args: {
+    selectable: false,
+  },
+  // Storybook hangs otherwise
+  parameters: {
+    docs: {
+      source: {
+        type: "code",
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: 1024, height: 260, display: "flex", flexDirection: "column" }}>
+        <GridUpdatingContextProvider>
+          <GridContextProvider>
+            <Story />
+          </GridContextProvider>
+        </GridUpdatingContextProvider>
+      </div>
+    ),
+  ],
+} as Meta<typeof Grid>;
+
+interface ITestRow {
+  id: number;
+  name: string;
+  position: string;
+  age: number;
+}
+
+interface ITestPinnedRow {
+  name: string;
+  position: string;
+  age: number;
+}
+
+const PinnedRowTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
+  const columnDefs: ColDefT<ITestRow>[] = useMemo(
+    () => [
+      GridCell({
+        field: "name",
+        headerName: "Name",
+      }),
+      GridCell({
+        field: "position",
+        headerName: "Position",
+      }),
+      GridCell({
+        field: "age",
+        headerName: "Age",
+      }),
+    ],
+    [],
+  );
+
+  const [rowData] = useState<ITestRow[]>([
+    { id: 1, name: "Opeyemi", position: "Tester", age: 30 },
+    { id: 2, name: "Johnie", position: "Developer", age: 21 },
+    { id: 3, name: "Laxmi", position: "Manager", age: 65 },
+    { id: 4, name: "Salama", position: "Developer", age: 22 },
+    { id: 5, name: "Husni", position: "Developer", age: 24 },
+  ]);
+  const [pinnedBottomRowData] = useState<ITestPinnedRow[]>([{ name: "Total Age", position: "", age: 170 }]);
+  const [pinnedTopRowData] = useState<ITestPinnedRow[]>([{ name: "Min Age", position: "", age: 21 }]);
+
+  return (
+    <GridWrapper maxHeight={400}>
+      <Grid
+        data-testid={"readonly"}
+        {...props}
+        selectable={false}
+        columnDefs={columnDefs}
+        rowData={rowData}
+        pinnedTopRowData={pinnedTopRowData}
+        pinnedBottomRowData={pinnedBottomRowData}
+      />
+    </GridWrapper>
+  );
+};
+export const PinnedRow = PinnedRowTemplate.bind({});
+PinnedRow.play = waitForGridReady;

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

@@ -220,25 +220,6 @@ const GridReadOnlyTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
     { id: 1001, position: "Developer", age: 12, height: `5'3"`, desc: "Develops application", dd: "2" },
     { id: 1002, position: "Manager", age: 65, height: `5'9"`, desc: "Manages", dd: "3" },
   ]);
-  /*
-  Testing
-  const [loading, setLoading] = useState(false);
-
-  useTimeout(() => {
-    setRowData([
-      { id: 1000, position: "Tester", age: 30, height: `6'4"`, desc: "Tests application", dd: "1" },
-      { id: 1001, position: "Developer", age: 12, height: `5'3"`, desc: "Develops application", dd: "2" },
-      { id: 1002, position: "Manager", age: 65, height: `5'9"`, desc: "Manages", dd: "3" },
-    ]);
-  }, 5000);
-
-  useTimeout(() => {
-    setLoading(true);
-  }, 7000);
-
-  useTimeout(() => {
-    setLoading(false);
-  }, 9000);*/
 
   return (
     <GridWrapper maxHeight={400}>

package/src/styles/Grid.scss

@@ -89,3 +89,12 @@
   max-width: 400px;
 }
 
+.ag-floating-top-container .ag-row {
+  background-color: colors.$hint;
+}
+
+.ag-floating-bottom-container .ag-row {
+  background-color: colors.$hint;
+}
+
+