@linzjs/step-ag-grid 2.4.3 → 2.4.5

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "2.4.3",
+  "version": "2.4.5",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -46,6 +46,7 @@
   },
   "scripts": {
     "build": "run-s clean stylelint lint css bundle",
+    "yalc": "run-s clean css bundle && yalc publish",
     "clean": "rimraf dist && mkdirp ./dist",
     "bundle": "rollup -c",
     "stylelint": "stylelint src/**/*.scss src/**/*.css --fix",
@@ -107,7 +108,7 @@
     "babel-preset-react-app": "^10.0.1",
     "chromatic": "^6.11.4",
     "conventional-changelog-conventionalcommits": "^5.0.0",
-    "eslint": "^8.26.0",
+    "eslint": "^8.27.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-deprecation": "^1.3.2",
@@ -134,7 +135,7 @@
     "sass-loader": "10.3.1",
     "semantic-release": "^19.0.5",
     "storybook-addon-mock": "^2.4.1",
-    "style-loader": "^2.0.0",
+    "style-loader": "2.0.0",
     "stylelint": "^14.14.1",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-standard": "^29.0.0",

package/src/components/PostSortRowsHook.ts

@@ -1,6 +1,9 @@
-import { useCallback, useRef } from "react";
+import { useCallback, useContext, useRef } from "react";
 import { PostSortRowsParams } from "ag-grid-community/dist/lib/entities/iCallbackParams";
 import { ColumnState } from "ag-grid-community/dist/lib/columns/columnModel";
+import { isEmpty } from "lodash-es";
+import { RowNode } from "ag-grid-community";
+import { GridContext } from "../contexts/GridContext";
 
 interface PostSortRowsHookProps {
   setStaleGrid: (stale: boolean) => void;
@@ -12,6 +15,8 @@ interface PostSortRowsHookProps {
  * Handles stale sort, when you edit a row but don't want to re-sort.
  */
 export const usePostSortRowsHook = ({ setStaleGrid }: PostSortRowsHookProps) => {
+  const { redrawRows } = useContext(GridContext);
+
   // On first run we need to init the first backed up sort order
   const initialised = useRef(false);
 
@@ -19,7 +24,7 @@ export const usePostSortRowsHook = ({ setStaleGrid }: PostSortRowsHookProps) =>
   const lastSortOrderHash = useRef<string>("");
 
   // Used to detect if sort order was the same, has the direction changed
-  const previousRowSortIndexRef = useRef<Record<number, number | undefined>>({});
+  const previousRowSortIndexRef = useRef<Record<string, { index: number; hash: string } | undefined>>({});
 
   // stale sort is when there's a sort and user edits a row
   // this applies a class to the div wrapping the grid which in turn adds a * beside the sort arrow
@@ -33,14 +38,21 @@ export const usePostSortRowsHook = ({ setStaleGrid }: PostSortRowsHookProps) =>
 
   return useCallback(
     ({ api, columnApi, nodes }: PostSortRowsParams) => {
+      // Grid is destroyed
+      if (!api || !columnApi) return;
+
       const previousRowSortIndex = previousRowSortIndexRef.current;
 
+      const hashNode = (node: RowNode | undefined) => {
+        return node ? JSON.stringify(node.data) : "";
+      };
+
       const copyCurrentSortSettings = (): ColumnState[] =>
         columnApi.getColumnState().map((row) => ({ colId: row.colId, sort: row.sort, sortIndex: row.sortIndex }));
 
       const backupSortOrder = () => {
         for (const x in previousRowSortIndex) delete previousRowSortIndex[x];
-        nodes.forEach((row, index) => (previousRowSortIndex[row.data.id] = index));
+        nodes.forEach((node, index) => (previousRowSortIndex[`${node.data.id}`] = { index, hash: hashNode(node) }));
       };
 
       // Check if column is the first sorted column.  Note: column is preconfigured to sort its sortIndex is null not 1
@@ -51,22 +63,13 @@ export const usePostSortRowsHook = ({ setStaleGrid }: PostSortRowsHookProps) =>
 
       const restorePreviousSortColumnState = () => columnApi.applyColumnState({ state: previousColSort.current });
 
-      const hasNewRows = () => nodes.some((row) => previousRowSortIndex[row.data.id] == null);
-
-      const sortIsStale = () => {
-        // If there are new rows we want to them to be at the bottom of the grid, so we treat it as sort not stale
-        if (hasNewRows()) return false;
-
-        // Otherwise check if the stored sort index matches the new sort index
-        return nodes.some((node, index) => previousRowSortIndex[node.data.id] != index);
-      };
-
-      const sortNodesByPreviousSort = () =>
+      const sortNodesByPreviousSort = () => {
         nodes.sort(
           (a, b) =>
-            (previousRowSortIndex[a.data.id] ?? Number.MAX_SAFE_INTEGER) -
-            (previousRowSortIndex[b.data.id] ?? Number.MAX_SAFE_INTEGER),
+            (previousRowSortIndex[`${a.data.id}`]?.index ?? Number.MAX_SAFE_INTEGER) -
+            (previousRowSortIndex[`${b.data.id}`]?.index ?? Number.MAX_SAFE_INTEGER),
         );
+      };
 
       // On first load copy the current sort
       if (!initialised.current) {
@@ -83,6 +86,10 @@ export const usePostSortRowsHook = ({ setStaleGrid }: PostSortRowsHookProps) =>
         sortOrderChanged = true;
       }
 
+      if (isEmpty(previousRowSortIndex)) {
+        backupSortOrder();
+      }
+
       if (sortOrderChanged) {
         const thisFirstCol = copyCurrentSortSettings().find(isFirstSortColumn);
         const previousFirstCol = previousColSort.current.find(isFirstSortColumn);
@@ -115,23 +122,69 @@ export const usePostSortRowsHook = ({ setStaleGrid }: PostSortRowsHookProps) =>
           lastSortOrderHash.current = newSortOrder;
         }
       } else {
-        if (sortIsStale()) {
+        let firstChangedNodeIndex = -1;
+        let lastNewNode: RowNode | undefined = undefined;
+        let changedRowCount = 0;
+        let newRowCount = 0;
+        let index = 0;
+        for (const node of nodes) {
+          const psr = previousRowSortIndex[`${node.data.id}`];
+          if (psr) {
+            if (psr.hash != hashNode(node)) {
+              if (firstChangedNodeIndex === -1) firstChangedNodeIndex = index;
+              changedRowCount++;
+            }
+          } else {
+            lastNewNode = node;
+            newRowCount++;
+          }
+          index++;
+        }
+
+        let wasStale = false;
+        if (changedRowCount === 0 && newRowCount === 1) {
+          // insert new row at end
+          const newIndex = index - 1;
+          previousRowSortIndex[`${lastNewNode?.data.id}`] = { index: newIndex, hash: hashNode(lastNewNode) };
+          wasStale = true;
+        } else if (changedRowCount === 2 && newRowCount === 0) {
+          // This must be a swap rows
+          backupSortOrder();
+          wasStale = false;
+        } else if (changedRowCount > 1 && newRowCount === 1) {
+          // This must be a insert so, insert new row near the row that changed
+          previousRowSortIndex[`${lastNewNode?.data.id}`] = {
+            index: firstChangedNodeIndex + 0.5,
+            hash: hashNode(lastNewNode),
+          };
+          wasStale = true;
+          // For some reason AgGrid mis-positions the inserted row.
+          lastNewNode && redrawRows();
+        } else if (changedRowCount == 1 && newRowCount === 0) {
+          // User edited one row so, do nothing, retain sort
+          wasStale = true;
+        } else if (changedRowCount !== 0 || newRowCount != 0) {
+          // too many rows changed, resort
+          backupSortOrder();
+        }
+
+        if (wasStale) {
+          // Check if the sort order the aggrid passed matches our stale sort order
+          const stillStale =
+            Object.keys(previousRowSortIndex).length != nodes.length ||
+            nodes.some((node, index) => previousRowSortIndex[`${node.data.id}`]?.index !== index);
+
           // If we haven't already processed a stale sort then...
-          if (!sortWasStale.current) {
+          if (stillStale && !sortWasStale.current) {
             // backup sort state, so we can restore it when sort is clicked on a stale column
             previousColSort.current = copyCurrentSortSettings();
-            backupSortOrder();
             sortWasStale.current = true;
             setStaleGrid(true);
           }
-
-          sortNodesByPreviousSort();
         }
-        // secondary sort backup as there may be new nodes that didn't have their sort registered
-        // which would cause two new rows to sort out of sequence
-        backupSortOrder();
+        sortNodesByPreviousSort();
       }
     },
-    [setStaleGrid],
+    [redrawRows, setStaleGrid],
   );
 };

package/src/components/gridPopoverEdit/GridPopoverMenu.tsx

@@ -16,8 +16,9 @@ export const GridPopoverMenu = <RowType extends GridBaseRow>(
 ): ColDefT<RowType> =>
   GridCell<RowType, GridFormPopoutMenuProps<RowType>>(
     {
-      maxWidth: 64,
+      maxWidth: 40,
       editable: colDef.editable != null ? colDef.editable : true,
+      cellStyle: { "justify-content": "flex-end" },
       cellRenderer: GridRenderPopoutMenuCell,
       cellClass: custom?.multiEdit ? GenericMultiEditCellClass : undefined,
       ...colDef,

package/src/components/gridPopoverEdit/GridPopoverMessage.ts

@@ -9,6 +9,7 @@ export const GridPopoverMessage = <RowType extends GridBaseRow>(
 ): ColDefT<RowType> =>
   GridCell(
     {
+      resizable: false,
       ...colDef,
       cellRendererParams: {
         singleClickEdit: true,

package/src/contexts/GridContext.tsx

@@ -1,5 +1,5 @@
 import { createContext } from "react";
-import { GridApi } from "ag-grid-community";
+import { GridApi, RowNode } from "ag-grid-community";
 import { GridBaseRow } from "../components/Grid";
 
 export interface GridContextType {
@@ -24,6 +24,7 @@ export interface GridContextType {
     fnUpdate: (selectedRows: any[]) => Promise<boolean>,
     setSaving?: (saving: boolean) => void,
   ) => Promise<boolean>;
+  redrawRows: (rowNodes?: RowNode[]) => void;
 }
 
 export const GridContext = createContext<GridContextType>({
@@ -83,4 +84,7 @@ export const GridContext = createContext<GridContextType>({
     console.error("no context provider for modifyUpdating");
     return false;
   },
+  redrawRows: () => {
+    console.error("no context provider for redrawRows");
+  },
 });

package/src/contexts/GridContextProvider.tsx

@@ -273,6 +273,12 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
     });
   };
 
+  const redrawRows = (rowNodes?: RowNode[]) => {
+    gridApiOp((gridApi) => {
+      gridApi.redrawRows(rowNodes ? { rowNodes } : undefined);
+    });
+  };
+
   return (
     <GridContext.Provider
       value={{
@@ -293,6 +299,7 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
         sizeColumnsToFit,
         stopEditing,
         updatingCells,
+        redrawRows,
       }}
     >
       {props.children}

package/src/lui/ActionButton.tsx

@@ -6,18 +6,21 @@ import { LuiButton, LuiIcon, LuiMiniSpinner } from "@linzjs/lui";
 import { IconName } from "@linzjs/lui/dist/components/LuiIcon/LuiIcon";
 import { usePrevious } from "./reactUtils";
 import { useStateDeferred } from "./stateDeferredHook";
+import { LuiButtonProps } from "@linzjs/lui/dist/components/LuiButton/LuiButton";
 
 export interface ActionButtonProps {
   icon: IconName;
-  name: string;
+  name?: string;
+  "aria-label"?: string;
   inProgressName?: string;
   title?: string;
   dataTestId?: string;
   size?: "xs" | "sm" | "md" | "lg" | "xl" | "ns";
   className?: string;
-  onAction: () => Promise<void>;
+  onAction: () => Promise<void> | void;
   // Used for external code to get access to whether action is in progress
   externalSetInProgress?: () => void;
+  level?: LuiButtonProps["level"];
 }
 
 // Kept this less than one second, so I don't have issues with waitFor as it defaults to 1s
@@ -33,6 +36,8 @@ export const ActionButton = ({
   onAction,
   externalSetInProgress,
   size = "sm",
+  level = "tertiary",
+  "aria-label": ariaLabel,
 }: ActionButtonProps): JSX.Element => {
   const [inProgress, setInProgress] = useState(false);
   const lastInProgress = usePrevious(inProgress ?? false);
@@ -47,17 +52,22 @@ export const ActionButton = ({
     <LuiButton
       data-testid={dataTestId}
       type={"button"}
-      level={"tertiary"}
-      title={title ?? name}
-      aria-label={name}
+      level={level}
+      title={title ?? ariaLabel ?? name}
+      aria-label={ariaLabel ?? name}
       className={clsx("lui-button-icon", "ActionButton", className, localInProgress && "ActionButton-inProgress")}
       size={"lg"}
+      style={name == null ? { padding: "8px 5px" } : {}}
       onClick={async () => {
-        setInProgress(true);
-        externalSetInProgress && setInProgress(true);
-        await onAction();
-        externalSetInProgress && setInProgress(false);
-        setInProgress(false);
+        const promise = onAction();
+        const isPromise = typeof promise !== "undefined";
+        if (isPromise) {
+          setInProgress(true);
+          externalSetInProgress && setInProgress(true);
+          if (isPromise) await promise;
+          externalSetInProgress && setInProgress(false);
+          setInProgress(false);
+        }
       }}
       disabled={localInProgress}
     >
@@ -66,13 +76,13 @@ export const ActionButton = ({
           size={16}
           divProps={{
             "data-testid": "loading-spinner",
-            style: { padding: 0, margin: 0, paddingRight: 8 },
+            style: { margin: 0, paddingRight: 5, paddingLeft: 3, paddingBottom: 0, paddingTop: 0 },
             role: "status",
-            ["aria-label"]: "Loading",
+            "aria-label": "Loading",
           }}
         />
       ) : (
-        <LuiIcon name={icon} alt={name} size={size} />
+        <LuiIcon name={icon} alt={ariaLabel ?? name ?? ""} size={size} />
       )}
       <span className={"ActionButton-minimalArea"}>
         <span className={"ActionButton-minimalAreaDisplay"}>{(localInProgress ? inProgressName : name) ?? name}</span>

package/src/stories/components/ActionButton.stories.tsx

@@ -16,7 +16,12 @@ const ActionButtonTemplate: ComponentStory<typeof ActionButton> = () => {
   const performAction = useCallback(async () => {
     await wait(1000);
   }, []);
-  return <ActionButton icon={"ic_add"} name={"Add new row"} inProgressName={"Adding..."} onAction={performAction} />;
+  return (
+    <>
+      <ActionButton icon={"ic_add"} name={"Add new row"} inProgressName={"Adding..."} onAction={performAction} />
+      <ActionButton icon={"ic_add"} aria-label={"Add new row"} onAction={performAction} level={"primary"} />
+    </>
+  );
 };
 
 export const ActionButtonSimple = ActionButtonTemplate.bind({});

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

@@ -78,6 +78,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
       GridPopoverMessage(
         {
           headerName: "Popout message",
+          maxWidth: 200,
           cellRenderer: () => <>Click me!</>,
         },
         {
@@ -91,9 +92,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
         },
       ),
       GridPopoverMenu(
-        {
-          headerName: "Menu",
-        },
+        {},
         {
           multiEdit: true,
           editorParams: {
@@ -136,7 +135,6 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
       ),
       GridPopoverMenu(
         {
-          headerName: "Menu disabled",
           editable: false,
         },
         {