@linzjs/step-ag-grid 21.3.0 → 22.0.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "21.3.0",
+  "version": "22.0.1",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -28,8 +28,8 @@
   },
   "peerDependencies": {
     "@linzjs/lui": ">=21",
-    "ag-grid-community": "^31",
-    "ag-grid-react": "^31",
+    "ag-grid-community": "^32.1.0",
+    "ag-grid-react": "^32.1.0",
     "lodash-es": ">=4",
     "react": ">=18",
     "react-dom": ">=18"
@@ -39,9 +39,8 @@
     "debounce-promise": "^3.1.2",
     "lodash-es": ">=4",
     "matcher": "^5.0.0",
-    "react-transition-state": "^2.1.1",
-    "usehooks-ts": "^3.1.0",
-    "uuid": "^10.0.0"
+    "react-transition-state": "^2.1.2",
+    "usehooks-ts": "^3.1.0"
   },
   "scripts": {
     "build": "run-s clean stylelint lint css bundle",
@@ -78,22 +77,22 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@chromatic-com/storybook": "^1.3.5",
-    "@linzjs/lui": "^21.38.2",
+    "@chromatic-com/storybook": "^1.8.0",
+    "@linzjs/lui": "^21.44.4",
     "@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.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",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/react": "^8.2.9",
+    "@storybook/react-vite": "^8.2.9",
+    "@storybook/test": "^8.2.9",
+    "@storybook/test-runner": "^0.19.1",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
@@ -101,53 +100,53 @@
     "@types/jest": "^29.5.12",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^18.19.39",
-    "@types/react": "^18.3.3",
+    "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "@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",
+    "ag-grid-community": "^32.1.0",
+    "ag-grid-react": "^32.1.0",
     "babel-jest": "^29.7.0",
     "babel-preset-react-app": "^10.0.1",
-    "chromatic": "^11.5.4",
+    "chromatic": "^11.7.1",
     "css-loader": "^7.1.2",
-    "esbuild": "^0.22.0",
+    "esbuild": "^0.23.1",
     "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.6.0",
+    "eslint-plugin-jest": "^28.8.1",
     "eslint-plugin-jsx-a11y": "^6.9.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-storybook": "^0.8.0",
-    "eslint-plugin-testing-library": "^6.2.2",
+    "eslint-plugin-testing-library": "^6.3.0",
     "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.39",
+    "postcss": "^8.4.43",
     "postcss-loader": "^7.3.4",
     "postcss-scss": "^4.0.9",
-    "prettier": "^3.3.2",
+    "prettier": "^3.3.3",
     "react": ">=18",
     "react-app-polyfill": "^3.0.0",
     "react-dom": "^18.3.1",
-    "rollup": "^4.18.0",
+    "rollup": "^4.21.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.77.6",
+    "sass": "^1.77.8",
     "sass-loader": "^14.2.1",
     "semantic-release": "^22.0.12",
-    "storybook": "^8.1.11",
+    "storybook": "^8.2.9",
     "storybook-css-modules-preset": "^1.1.1",
     "style-loader": "^4.0.0",
     "stylelint": "^15.11.0",
@@ -155,8 +154,8 @@
     "stylelint-config-standard": "^34.0.0",
     "stylelint-prettier": "^4.1.0",
     "stylelint-scss": "^5.3.2",
-    "typescript": "^5.5.3",
-    "vite": "^5.3.2",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.2",
     "vite-plugin-html": "^3.2.2",
     "vite-tsconfig-paths": "^4.3.2"
   },

package/src/components/Grid.tsx

@@ -1,10 +1,13 @@
 import {
   CellClickedEvent,
+  CellDoubleClickedEvent,
+  CellEditingStartedEvent,
   ColDef,
   ColGroupDef,
   ColumnResizedEvent,
   IClientSideRowModel,
   ModelUpdatedEvent,
+  RowDragLeaveEvent,
   RowHighlightPosition,
   RowNode,
 } from "ag-grid-community";
@@ -12,7 +15,6 @@ import { CellClassParams, EditableCallback, EditableCallbackParams } from "ag-gr
 import { GridOptions } from "ag-grid-community";
 import {
   AgGridEvent,
-  CellEvent,
   CellKeyDownEvent,
   GridReadyEvent,
   RowDragEndEvent,
@@ -372,6 +374,7 @@ export const Grid = ({
               exportable: false,
             },
             checkboxSelection: params.selectable,
+            headerClass: params.onRowDragEnd ? "ag-header-select-draggable" : undefined,
             headerComponent: rowSelection === "multiple" ? GridHeaderSelect : null,
             suppressHeaderKeyboardEvent: (e) => {
               if (!params.selectable) return false;
@@ -450,7 +453,7 @@ export const Grid = ({
   /**
    * Force-refresh all selected rows to re-run class function, to update selection highlighting
    */
-  const refreshSelectedRows = useCallback((event: CellEvent): void => {
+  const refreshSelectedRows = useCallback((event: CellEditingStartedEvent): void => {
     event.api.refreshCells({
       force: true,
       rowNodes: event.api.getSelectedNodes(),
@@ -461,7 +464,7 @@ export const Grid = ({
    * Make sure node is selected for editing and start edit
    */
   const startCellEditing = useCallback(
-    (event: CellEvent) => {
+    (event: CellKeyDownEvent | CellClickedEvent | CellDoubleClickedEvent) => {
       prePopupOps();
       if (!event.node.isSelected()) {
         event.node.setSelected(true, true);
@@ -485,7 +488,7 @@ export const Grid = ({
    * Handle double click edit
    */
   const onCellDoubleClick = useCallback(
-    (event: CellEvent) => {
+    (event: CellDoubleClickedEvent) => {
       if (!invokeEditAction(event)) startCellEditing(event);
     },
     [startCellEditing],
@@ -495,7 +498,7 @@ export const Grid = ({
    * Handle single click edits
    */
   const onCellClicked = useCallback(
-    (event: CellEvent) => {
+    (event: CellClickedEvent) => {
       if (event.colDef?.cellRendererParams?.singleClickEdit ?? singleClickEdit) {
         startCellEditing(event);
       }
@@ -506,7 +509,7 @@ export const Grid = ({
   /**
    * If cell has an edit action invoke it (if editable)
    */
-  const invokeEditAction = (e: CellEvent): boolean => {
+  const invokeEditAction = (e: CellDoubleClickedEvent | CellKeyDownEvent): boolean => {
     const editAction = e.colDef?.cellRendererParams?.editAction;
     if (!editAction) return false;
 
@@ -638,7 +641,7 @@ export const Grid = ({
 
   const gridContextMenu = useGridContextMenu({ contextMenu: params.contextMenu, contextMenuSelectRow });
 
-  const onRowDragLeave = useCallback((event: RowDragMoveEvent) => {
+  const onRowDragLeave = useCallback((event: RowDragLeaveEvent) => {
     const clientSideRowModel = event.api.getModel() as IClientSideRowModel;
     clientSideRowModel.highlightRowAtPixel(null);
   }, []);
@@ -703,7 +706,6 @@ export const Grid = ({
       {gridContextMenu.component}
       <div style={{ flex: 1 }} ref={gridDivRef}>
         <AgGridReact
-          reactiveCustomComponents={true}
           rowHeight={rowHeight}
           animateRows={params.animateRows ?? false}
           rowClassRules={params.rowClassRules}

package/src/components/GridCell.tsx

@@ -116,7 +116,7 @@ export const suppressCellKeyboardEvents = (e: SuppressKeyboardEventParams) => {
   const exec = shortcutKeys[e.event.key];
   if (exec && !e.editing && !e.event.repeat && e.event.type === "keydown") {
     const editable = fnOrVar(e.colDef?.editable, e);
-    return editable ? exec(e) ?? true : true;
+    return editable ? (exec(e) ?? true) : true;
   }
   // It's important that aggrid doesn't trigger edit on enter
   // as the incorrect selected rows will be returned

package/src/components/PostSortRowsHook.ts

@@ -81,9 +81,9 @@ export const usePostSortRowsHook = ({ setStaleGrid }: PostSortRowsHookProps) =>
       const newSortOrder = JSON.stringify(copyCurrentSortSettings());
       let sortOrderChanged = newSortOrder != lastSortOrderHash.current;
 
-      const quickFilter = (api as any).filterManager.quickFilter;
+      const quickFilter = api.getQuickFilter();
       if (previousQuickFilter.current != quickFilter) {
-        previousQuickFilter.current = quickFilter;
+        previousQuickFilter.current = quickFilter ?? "";
         sortOrderChanged = true;
       }
 

package/src/lui/TextAreaInput.tsx

@@ -1,15 +1,9 @@
 import clsx from "clsx";
 import { omit } from "lodash-es";
-import { InputHTMLAttributes, ReactElement, useState } from "react";
-import { v4 as uuidVersion4 } from "uuid";
+import { InputHTMLAttributes, ReactElement, useId } from "react";
 
 import { FormError } from "./FormError";
 
-export const useGenerateOrDefaultId = (idFromProps?: string) => {
-  const [id] = useState(idFromProps ? idFromProps : uuidVersion4());
-  return id;
-};
-
 export interface LuiTextAreaInputProps extends InputHTMLAttributes<HTMLTextAreaElement> {
   // overrides value in base class to be string type only
   value: string;
@@ -23,7 +17,8 @@ export interface LuiTextAreaInputProps extends InputHTMLAttributes<HTMLTextAreaE
 }
 
 export const TextAreaInput = (props: LuiTextAreaInputProps) => {
-  const id = useGenerateOrDefaultId(props?.id);
+  const reactId = useId();
+  const id = props?.id ?? reactId;
 
   return (
     <div

package/src/react-menu3/utils/withHovering.tsx

@@ -8,17 +8,24 @@ export interface withHoveringResultProps {
   menuItemRef?: MutableRefObject<HTMLLIElement>;
 }
 
-export const withHovering = <T,>(name: string, WrappedComponent: (props: T) => ReactElement) => {
+export const withHovering = <X extends Record<string, any>, T extends PropsWithRef<X>>(
+  name: string,
+  WrappedComponent: (props: T) => ReactElement,
+) => {
   const Component = memo(WrappedComponent);
-  const WithHovering = forwardRef((props: PropsWithRef<T>, ref) => {
+  const WithHovering = forwardRef<any, T>((props, ref) => {
     const menuItemRef = useRef<any>(null);
+
     return (
-      <Component
-        {...props}
-        menuItemRef={menuItemRef}
-        externalRef={ref}
-        isHovering={useContext(HoverItemContext) === menuItemRef.current}
-      />
+      <>
+        {/* @ts-ignore Can't work out what the ref issue is here */}
+        <Component
+          {...props}
+          menuItemRef={menuItemRef}
+          externalRef={ref}
+          isHovering={useContext(HoverItemContext) === menuItemRef.current}
+        />
+      </>
     );
   });
 

package/src/stories/grid/GridPopoverEditMultiSelect.stories.tsx

@@ -84,21 +84,24 @@ const GridEditMultiSelectTemplate: StoryFn<typeof Grid> = (props: GridProps) =>
             filterPlaceholder: "Filter position",
             className: "GridMultiSelect-containerUnlimited",
             headers: [{ header: "Header item" }],
-            options: [
-              { value: "lot1", label: "Lot 1" },
-              { value: "lot2", label: "Lot 2" },
-              { value: "lot3", label: "Lot 3" },
-              { value: "lot11", label: "Lot 11" },
-              { value: "lot4", label: "Lot A 482392" },
-              { value: "appA", label: "A" },
-              { value: "appB", label: "B" },
-              MenuSeparator,
-              {
-                value: "other",
-                label: "Other",
-                subComponent: () => <GridFormSubComponentTextArea required={true} maxLength={5} defaultValue={""} />,
-              },
-            ],
+            options: (selectedRows) => {
+              const firstRow = selectedRows[0];
+              return [
+                { value: "lot1", label: "Lot 1" },
+                { value: "lot2", label: "Lot 2" },
+                { value: "lot3", label: "Lot 3" },
+                { value: "lot11", label: "Lot 11" },
+                { value: "lot4", label: "Lot A 482392" },
+                { value: "appA", label: "A" },
+                { value: "appB", label: "B" },
+                MenuSeparator,
+                {
+                  value: "other",
+                  label: "Other",
+                  subComponent: () => <GridFormSubComponentTextArea required={true} maxLength={5} defaultValue={""} />,
+                },
+              ].map((r) => ({ ...r, checked: firstRow.position?.includes(r.value) }));
+            },
             onSave: async ({ selectedRows, selectedOptions }) => {
               // eslint-disable-next-line no-console
               console.log("multiSelect result", { selectedRows, selectedOptions });

package/src/styles/GridTheme.scss

@@ -67,6 +67,10 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
   }
   // fix alignment of cell content when grabber is present
   .ag-header-cell-comp-wrapper {
+    justify-content: center;
+  }
+
+  .ag-header-select-draggable .ag-header-cell-comp-wrapper {
     justify-content: end;
   }