@linzjs/step-ag-grid 21.0.0 → 21.0.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "21.0.0",
+  "version": "21.0.2",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -79,7 +79,7 @@
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@chromatic-com/storybook": "^1.3.5",
-    "@linzjs/lui": ">=21",
+    "@linzjs/lui": "^21.30.0",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
@@ -104,8 +104,8 @@
     "@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",
+    "@typescript-eslint/eslint-plugin": "^7.10.0",
+    "@typescript-eslint/parser": "^7.10.0",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "ag-grid-community": "^31",
     "ag-grid-react": "^31",

package/src/components/Grid.tsx

@@ -182,15 +182,19 @@ export const Grid = ({
     const skipHeader = sizeColumns === "auto-skip-headers" && gridRendered === "rows-visible";
     if (sizeColumns === "auto" || skipHeader) {
       const result = autoSizeColumns({ skipHeader, userSizedColIds: userSizedColIds.current, includeFlex: true });
+      if (!result) {
+        needsAutoSize.current = true;
+        return;
+      }
       if (gridRendered === "empty") {
         if (!hasSetContentSizeEmpty.current && result && !hasSetContentSize.current) {
           hasSetContentSizeEmpty.current = true;
-          params.onContentSize && params.onContentSize(result);
+          params.onContentSize?.(result);
         }
       } else if (gridRendered === "rows-visible") {
         if (result && !hasSetContentSize.current) {
           hasSetContentSize.current = true;
-          params.onContentSize && params.onContentSize(result);
+          params.onContentSize?.(result);
         }
       } else {
         // It should be impossible to get here
@@ -219,7 +223,7 @@ export const Grid = ({
         needsAutoSize.current = true;
       }
     }
-    if (needsAutoSize.current) {
+    if (needsAutoSize.current || (!hasSetContentSize.current && sizeColumns === "auto")) {
       needsAutoSize.current = false;
       setInitialContentSize();
     }
@@ -394,7 +398,7 @@ export const Grid = ({
    */
   const onGridReady = useCallback(
     (event: GridReadyEvent) => {
-      setApis(event.api, event.columnApi, dataTestId);
+      setApis(event.api, dataTestId);
       event.api.showNoRowsOverlay();
       synchroniseExternallySelectedItemsToGrid();
     },
@@ -657,7 +661,7 @@ export const Grid = ({
 
         const moved = event.node.data;
         const target = event.overNode?.data;
-        moved.id != target.id && //moved over a different row
+        moved.id !== target?.id && //moved over a different row
           event.node.rowIndex != targetIndex && //moved to a different index
           params.onRowDragEnd &&
           (await params.onRowDragEnd(moved, target, targetIndex));
@@ -686,6 +690,7 @@ 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/PostSortRowsHook.ts

@@ -38,9 +38,9 @@ export const usePostSortRowsHook = ({ setStaleGrid }: PostSortRowsHookProps) =>
   const previousQuickFilter = useRef("");
 
   return useCallback(
-    ({ api, columnApi, nodes }: PostSortRowsParams) => {
+    ({ api, nodes }: PostSortRowsParams) => {
       // Grid is destroyed
-      if (!api || !columnApi) return;
+      if (!api) return;
 
       const previousRowSortIndex = previousRowSortIndexRef.current;
 
@@ -49,7 +49,7 @@ export const usePostSortRowsHook = ({ setStaleGrid }: PostSortRowsHookProps) =>
       };
 
       const copyCurrentSortSettings = (): ColumnState[] =>
-        columnApi.getColumnState().map((row) => ({ colId: row.colId, sort: row.sort, sortIndex: row.sortIndex }));
+        api.getColumnState().map((row) => ({ colId: row.colId, sort: row.sort, sortIndex: row.sortIndex }));
 
       const backupSortOrder = () => {
         for (const x in previousRowSortIndex) delete previousRowSortIndex[x];
@@ -62,7 +62,7 @@ export const usePostSortRowsHook = ({ setStaleGrid }: PostSortRowsHookProps) =>
       const isSameColumnAndDifferentSort = (col1: ColumnState | undefined, col2: ColumnState | undefined) =>
         col1 && col2 && col1.colId === col2.colId && col1.sort != col2.sort;
 
-      const restorePreviousSortColumnState = () => columnApi.applyColumnState({ state: previousColSort.current });
+      const restorePreviousSortColumnState = () => api.applyColumnState({ state: previousColSort.current });
 
       const sortNodesByPreviousSort = () => {
         nodes.sort(
@@ -149,7 +149,7 @@ export const usePostSortRowsHook = ({ setStaleGrid }: PostSortRowsHookProps) =>
           previousRowSortIndex[`${lastNewNode?.data.id}`] = { index: newIndex, hash: hashNode(lastNewNode) };
           wasStale = true;
         } else if (changedRowCount === 2 && newRowCount === 0) {
-          // This must be a swap rows
+          // This must be a swap rows (sometimes it's not, needs further attention)
           backupSortOrder();
           wasStale = false;
         } else if (changedRowCount > 1 && newRowCount === 1) {

package/src/components/gridHeader/GridHeaderSelect.tsx

@@ -1,6 +1,6 @@
 import { IHeaderParams } from "ag-grid-community";
 import clsx from "clsx";
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 /**
  * AgGrid's existing select header doesn't work the way we want.
@@ -12,14 +12,16 @@ export const GridHeaderSelect = ({ api }: IHeaderParams) => {
   const [updateCounter, setUpdateCounter] = useState(0);
   const selectedNodeCount = api.getSelectedRows().length;
 
-  const clickHandler = useCallback(() => {
-    setUpdateCounter(updateCounter + 1);
-  }, [updateCounter]);
-
   useEffect(() => {
+    const clickHandler = () => {
+      setUpdateCounter(updateCounter + 1);
+    };
+
     api.addEventListener("selectionChanged", clickHandler);
-    return () => api.removeEventListener("selectionChanged", clickHandler);
-  }, [api, clickHandler]);
+    return () => {
+      !api.isDestroyed() && api.removeEventListener("selectionChanged", clickHandler);
+    };
+  }, [api, updateCounter]);
 
   const handleMultiSelect = () => {
     if (selectedNodeCount == 0) {
@@ -29,7 +31,7 @@ export const GridHeaderSelect = ({ api }: IHeaderParams) => {
     }
   };
 
-  const totalNodeCount = api.getModel().getRowCount();
+  const totalNodeCount = api.getDisplayedRowCount();
   const partialSelect = selectedNodeCount != 0 && selectedNodeCount != totalNodeCount;
   const allSelected = selectedNodeCount != 0 && selectedNodeCount == totalNodeCount;
 

package/src/contexts/GridContext.tsx

@@ -1,4 +1,4 @@
-import { ColDef, ColumnApi, GridApi, IRowNode } from "ag-grid-community";
+import { ColDef, GridApi, IRowNode } from "ag-grid-community";
 import { CsvExportParams } from "ag-grid-community";
 import { createContext, useContext } from "react";
 
@@ -23,7 +23,7 @@ export interface GridContextType<TData extends GridBaseRow> {
     filter?: keyof ColDef | ((r: ColDef) => boolean | undefined | null | number | string),
   ) => ColDefT<TData, any>[];
   getColumnIds: (filter?: keyof ColDef | ((r: ColDef) => boolean | undefined | null | number | string)) => string[];
-  setApis: (gridApi: GridApi | undefined, columnApi: ColumnApi | undefined, dataTestId?: string) => void;
+  setApis: (gridApi: GridApi | undefined, dataTestId?: string) => void;
   prePopupOps: () => void;
   postPopupOps: () => void;
   setQuickFilter: (quickFilter: string) => void;

package/src/contexts/GridContextProvider.tsx

@@ -1,5 +1,4 @@
-import { CellPosition, ColDef, ColumnApi, GridApi, IRowNode, RowNode } from "ag-grid-community";
-import { ValueFormatterParams } from "ag-grid-community";
+import { CellPosition, ColDef, GridApi, IRowNode, RowNode } from "ag-grid-community";
 import { CsvExportParams, ProcessCellForExportParams } from "ag-grid-community";
 import debounce from "debounce-promise";
 import { compact, defer, delay, difference, filter, isEmpty, last, pull, remove, sortBy, sumBy } from "lodash-es";
@@ -20,7 +19,6 @@ import { GridUpdatingContext } from "./GridUpdatingContext";
 export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithChildren): ReactElement => {
   const { modifyUpdating, checkUpdating } = useContext(GridUpdatingContext);
   const [gridApi, setGridApi] = useState<GridApi>();
-  const [columnApi, setColumnApi] = useState<ColumnApi>();
   const [gridReady, setGridReady] = useState(false);
   const [quickFilter, setQuickFilter] = useState("");
   const [invisibleColumnIds, _setInvisibleColumnIds] = useState<string[]>();
@@ -40,7 +38,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
    * Set quick filter directly on grid, based on previously save quickFilter state.
    */
   useEffect(() => {
-    gridApi?.setQuickFilter(quickFilter);
+    gridApi?.setGridOption("quickFilterText", quickFilter);
   }, [gridApi, quickFilter]);
 
   /**
@@ -94,11 +92,10 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
    * Set the grid api when the grid is ready.
    */
   const setApis = useCallback(
-    (gridApi: GridApi | undefined, columnApi: ColumnApi | undefined, dataTestId?: string) => {
+    (gridApi: GridApi | undefined, dataTestId?: string) => {
       testId.current = dataTestId;
       setGridApi(gridApi);
-      setColumnApi(columnApi);
-      gridApi?.setQuickFilter(quickFilter);
+      gridApi?.setGridOption("quickFilterText", quickFilter);
       setGridReady(!!gridApi);
     },
     [quickFilter],
@@ -108,9 +105,8 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
    * Used to check if it's OK to autosize.
    */
   const gridRenderState = useCallback((): null | "empty" | "rows-visible" => {
-    // Even though getModel can't be null, sometimes it is
-    if (!gridApi || !gridApi.getModel()) return null;
-    if (!gridApi.getModel().isRowsToRender()) return "empty";
+    if (!gridApi) return null;
+    if (!gridApi.getDisplayedRowCount()) return "empty";
     if (!isEmpty(gridApi.getRenderedNodes())) return "rows-visible";
     // If there are rows to render, but there are no rendered nodes then we should wait
     return null;
@@ -205,8 +201,8 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
     (
       filterDef: keyof ColDef | ((r: ColDef) => boolean | undefined | null | number | string) = () => true,
     ): ColDefT<TData>[] =>
-      filter(columnApi?.getColumns()?.map((col) => col.getColDef()) ?? [], filterDef) as ColDefT<TData>[],
-    [columnApi],
+      filter(gridApi?.getColumns()?.map((col) => col.getColDef()) ?? [], filterDef) as ColDefT<TData>[],
+    [gridApi],
   );
 
   const getColumnIds = useCallback(
@@ -407,9 +403,9 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
    */
   const autoSizeColumns = useCallback(
     ({ skipHeader, colIds, userSizedColIds, includeFlex }: AutoSizeColumnsProps = {}): AutoSizeColumnsResult => {
-      if (!columnApi) return null;
+      if (!gridApi || !gridApi.getColumnState()) return null;
       const colIdsSet = colIds instanceof Set ? colIds : new Set(colIds);
-      const colsToResize = columnApi.getColumnState().filter((colState) => {
+      const colsToResize = gridApi.getColumnState()?.filter?.((colState) => {
         const colId = colState.colId;
         return (
           (isEmpty(colIdsSet) || colIdsSet.has(colId)) &&
@@ -418,19 +414,19 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
         );
       });
       if (!isEmpty(colsToResize)) {
-        columnApi.autoSizeColumns(
+        gridApi.autoSizeColumns(
           colsToResize.map((colState) => colState.colId),
           skipHeader,
         );
       }
       return {
         width: sumBy(
-          columnApi.getColumnState().filter((col) => !col.hide),
+          gridApi.getColumnState().filter((col) => !col.hide),
           "width",
         ),
       };
     },
-    [columnApi],
+    [gridApi],
   );
 
   /**
@@ -489,7 +485,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
    */
   const cancelEdit = useCallback((): void => {
     stopEditing();
-    cellEditingCompleteCallbackRef.current && cellEditingCompleteCallbackRef.current();
+    cellEditingCompleteCallbackRef.current?.();
   }, [stopEditing]);
 
   const cellEditingCompleteCallbackRef = useRef<() => void>();
@@ -583,7 +579,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
           gridApi.refreshClientSideRowModel();
         } else {
           // Don't set saving if ok as the form has already closed
-          setSaving && setSaving(false);
+          setSaving?.(false);
         }
 
         // Only focus next cell if user hasn't already manually changed focus
@@ -667,7 +663,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
    * Apply column visibility
    */
   useEffect(() => {
-    if (!columnApi || !invisibleColumnIds) return;
+    if (!gridApi || !invisibleColumnIds) return;
 
     // show all columns that aren't invisible
     const newVisibleColumns = getColumns(
@@ -679,26 +675,26 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
       const fillerColumn = getColumns(isGridCellFiller)[0];
       fillerColumn && newVisibleColumns.push(fillerColumn);
     }
-    columnApi.setColumnsVisible(compact(newVisibleColumns.map(getColId)), true);
+    gridApi.setColumnsVisible(compact(newVisibleColumns.map(getColId)), true);
 
     // Hide the filler column if there's already a flex column
     const invisibleColumnIdsWithOptionalFiller = visibleColumnsContainsAFlex
       ? [...invisibleColumnIds, GridCellFillerColId]
       : invisibleColumnIds;
-    columnApi.setColumnsVisible(invisibleColumnIdsWithOptionalFiller, false);
-  }, [invisibleColumnIds, columnApi, getColumns]);
+    gridApi.setColumnsVisible(invisibleColumnIdsWithOptionalFiller, false);
+  }, [invisibleColumnIds, getColumns, gridApi]);
 
   /**
    * Download visible columns as a CSV
    */
   const downloadCsv = useCallback(
     (csvExportParams?: CsvExportParams) => {
-      if (!gridApi || !columnApi) return;
+      if (!gridApi) return;
 
       const fileName = csvExportParams?.fileName && sanitiseFileName(fnOrVar(csvExportParams.fileName));
 
-      const columnKeys = columnApi
-        ?.getColumnState()
+      const columnKeys = gridApi
+        .getColumnState()
         .filter((cs) => {
           const colDef = gridApi.getColumnDef(cs.colId);
           return !cs.hide && colDef && !isGridCellFiller(colDef) && colDef.headerComponentParams?.exportable !== false;
@@ -711,7 +707,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
         fileName,
       });
     },
-    [columnApi, gridApi],
+    [gridApi],
   );
 
   return (
@@ -807,7 +803,7 @@ export const downloadCsvUseValueFormattersProcessCellCallback = (params: Process
     return encodeToString(params.value);
   }
 
-  const result = valueFormatter({ ...params, data: params.node?.data, colDef } as ValueFormatterParams);
+  const result = valueFormatter({ ...params, data: params.node?.data, colDef, node: null });
   // type may not be string due to casting, leave the type check in
   if (params.value != null && typeof result !== "string") {
     console.error(`downloadCsv: valueFormatter is returning non string values, colDef:", colId: ${colDef.colId}`);

package/src/stories/grid/GridDragRow.stories.tsx

@@ -91,7 +91,7 @@ const GridDragRowTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
     [],
   );
 
-  const [rowData] = useState([
+  const [rowData, setRowData] = useState([
     { 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" },
@@ -109,8 +109,14 @@ const GridDragRowTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
         columnDefs={columnDefs}
         defaultColDef={{ sortable: false }}
         rowData={rowData}
-        onRowDragEnd={async (row, _, targetIndex) => {
-          alert(`Row ${row.id} request to be moved to index ${targetIndex}.`);
+        onRowDragEnd={async (movedRow, targetRow, _targetIndex) => {
+          setRowData(
+            rowData.map((r) => {
+              if (r.id === movedRow.id) return targetRow;
+              if (r.id === targetRow.id) return movedRow;
+              return r;
+            }),
+          );
         }}
         rowDragText={({ rowNode }) => `${rowNode?.data.id} - ${rowNode?.data.position}`}
       />

package/src/stories/grid/GridPopoverEditDropDown.stories.tsx

@@ -290,6 +290,15 @@ const GridEditDropDownTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
       code: "O2",
       sub: "one",
     },
+    {
+      id: 1002,
+      position: "Scrum Master",
+      position2: "2",
+      position3: "Architect",
+      position4: { code: "O2", desc: "Object Two" },
+      code: "O2",
+      sub: "one",
+    },
   ] as ITestRow[]);
 
   return (

package/src/styles/Grid.scss

@@ -15,13 +15,10 @@
   flex: 1;
 }
 
-
 .Grid-sortIsStale {
-  span.ag-icon.ag-icon-desc::after {
-    content: "*";
-  }
-
-  span.ag-icon.ag-icon-asc::after {
+  span.ag-sort-indicator-icon::before {
+    margin-left: -6px;
+    position: absolute;
     content: "*";
   }
 }