@linzjs/step-ag-grid 20.0.0 → 21.0.0

package/src/contexts/GridContextProvider.tsx

@@ -1,6 +1,6 @@
 import { CellPosition, ColDef, ColumnApi, GridApi, IRowNode, RowNode } from "ag-grid-community";
-import { ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef";
-import { CsvExportParams, ProcessCellForExportParams } from "ag-grid-community/dist/lib/interfaces/exportParams";
+import { ValueFormatterParams } 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";
 import { PropsWithChildren, ReactElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
@@ -8,7 +8,7 @@ import { PropsWithChildren, ReactElement, useCallback, useContext, useEffect, us
 import { ColDefT, GridBaseRow } from "../components";
 import { GridCellFillerColId, isGridCellFiller } from "../components/GridCellFiller";
 import { getColId, isFlexColumn } from "../components/gridUtil";
-import { isNotEmpty, sanitiseFileName, wait } from "../utils/util";
+import { fnOrVar, isNotEmpty, sanitiseFileName, wait } from "../utils/util";
 import { AutoSizeColumnsProps, AutoSizeColumnsResult, GridContext, GridFilterExternal } from "./GridContext";
 import { GridUpdatingContext } from "./GridUpdatingContext";
 
@@ -17,7 +17,7 @@ import { GridUpdatingContext } from "./GridUpdatingContext";
  * Make sure you wrap AgGrid in this.
  * Also, make sure the provider is created in a separate component, otherwise it won't be found.
  */
-export const GridContextProvider = <RowType extends GridBaseRow>(props: PropsWithChildren): ReactElement => {
+export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithChildren): ReactElement => {
   const { modifyUpdating, checkUpdating } = useContext(GridUpdatingContext);
   const [gridApi, setGridApi] = useState<GridApi>();
   const [columnApi, setColumnApi] = useState<ColumnApi>();
@@ -28,7 +28,7 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: PropsWit
   const idsBeforeUpdate = useRef<number[]>([]);
   const prePopupFocusedCell = useRef<CellPosition>();
   const [externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync] = useState(false);
-  const externalFilters = useRef<GridFilterExternal<RowType>[]>([]);
+  const externalFilters = useRef<GridFilterExternal<TData>[]>([]);
 
   /**
    * Make extra sure the GridCellFillerColId never gets added to invisibleColumnIds as it's dynamically determined
@@ -204,8 +204,8 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: PropsWit
   const getColumns = useCallback(
     (
       filterDef: keyof ColDef | ((r: ColDef) => boolean | undefined | null | number | string) = () => true,
-    ): ColDefT<RowType>[] =>
-      filter(columnApi?.getColumns()?.map((col) => col.getColDef()) ?? [], filterDef) as ColDefT<RowType>[],
+    ): ColDefT<TData>[] =>
+      filter(columnApi?.getColumns()?.map((col) => col.getColDef()) ?? [], filterDef) as ColDefT<TData>[],
     [columnApi],
   );
 
@@ -639,12 +639,12 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: PropsWit
     [gridApi],
   );
 
-  const addExternalFilter = (filter: GridFilterExternal<RowType>) => {
+  const addExternalFilter = (filter: GridFilterExternal<TData>) => {
     externalFilters.current.push(filter);
     onFilterChanged().then();
   };
 
-  const removeExternalFilter = (filter: GridFilterExternal<RowType>) => {
+  const removeExternalFilter = (filter: GridFilterExternal<TData>) => {
     remove(externalFilters.current, (v) => v === filter);
     onFilterChanged().then();
   };
@@ -695,7 +695,7 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: PropsWit
     (csvExportParams?: CsvExportParams) => {
       if (!gridApi || !columnApi) return;
 
-      const fileName = csvExportParams?.fileName && sanitiseFileName(csvExportParams.fileName);
+      const fileName = csvExportParams?.fileName && sanitiseFileName(fnOrVar(csvExportParams.fileName));
 
       const columnKeys = columnApi
         ?.getColumnState()

package/src/contexts/GridPopoverContext.tsx

@@ -2,14 +2,14 @@ import { RefObject, createContext, useContext } from "react";
 
 import { GridBaseRow } from "../components/Grid";
 
-export interface GridPopoverContextType<RowType extends GridBaseRow> {
+export interface GridPopoverContextType<TData extends GridBaseRow> {
   anchorRef: RefObject<Element>;
   saving: boolean;
   setSaving: (saving: boolean) => void;
-  field: keyof RowType;
+  field: keyof TData;
   value: any;
-  data: RowType;
-  selectedRows: RowType[];
+  data: TData;
+  selectedRows: TData[];
   updateValue: (saveFn: (selectedRows: any[]) => Promise<boolean>, tabDirection: 1 | 0 | -1) => Promise<boolean>;
   formatValue: (value: any) => any;
 }
@@ -26,5 +26,5 @@ export const GridPopoverContext = createContext<GridPopoverContextType<any>>({
   formatValue: () => "! No gridPopoverContextProvider !",
 });
 
-export const useGridPopoverContext = <RowType extends GridBaseRow>() =>
-  useContext<GridPopoverContextType<RowType>>(GridPopoverContext);
+export const useGridPopoverContext = <TData extends GridBaseRow>() =>
+  useContext<GridPopoverContextType<TData>>(GridPopoverContext);

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

@@ -66,12 +66,12 @@ const GridDragRowTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
         headerName: "Id",
         lockVisible: true,
       }),
-      GridCell({
+      GridCell<ITestRow, ITestRow["position"]>({
         field: "position",
         headerName: "Position",
         cellRendererParams: {
-          warning: (props) => props.value === "Tester" && "Testers are testing",
-          info: (props) => props.value === "Developer" && "Developers are awesome",
+          warning: ({ value }) => value === "Tester" && "Testers are testing",
+          info: ({ value }) => value === "Developer" && "Developers are awesome",
         },
       }),
       GridCell({
@@ -112,7 +112,7 @@ const GridDragRowTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
         onRowDragEnd={async (row, _, targetIndex) => {
           alert(`Row ${row.id} request to be moved to index ${targetIndex}.`);
         }}
-        rowDragText={(params) => `${params.rowNode?.data.id} - ${params.rowNode?.data.position}`}
+        rowDragText={({ rowNode }) => `${rowNode?.data.id} - ${rowNode?.data.position}`}
       />
     </GridWrapper>
   );

package/src/stories/grid/GridNonEditableRow.stories.tsx

@@ -3,7 +3,6 @@ import "../../styles/index.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 
 import { Meta, StoryFn } from "@storybook/react";
-import { ColDef } from "ag-grid-community";
 import { GridPopoverEditDropDown } from "components/gridPopoverEdit/GridPopoverEditDropDown";
 import { GridPopoverTextArea } from "components/gridPopoverEdit/GridPopoverTextArea";
 import { useMemo, useState } from "react";
@@ -155,9 +154,9 @@ const GridNonEditableRowTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
     { id: 1002, position: "Manager", age: 65, desc: "Manages", dd: "3" },
   ]);
 
-  const defaultColDef: ColDef = useMemo(
+  const defaultColDef: ColDefT<ITestRow> = useMemo(
     () => ({
-      editable: (params) => (params.data as ITestRow).position !== "Manager",
+      editable: ({ data }) => data?.position !== "Manager",
     }),
     [],
   );

package/src/stories/grid/GridPopoutContextMenu.stories.tsx

@@ -85,8 +85,8 @@ const GridPopoutContextMenuTemplate: StoryFn<typeof Grid> = (props: GridProps) =
       GridCell({
         field: "distance",
         headerName: "Number input",
-        valueFormatter: (params) => {
-          const v = params.data.distance;
+        valueFormatter: ({ data }) => {
+          const v = data?.distance;
           return v != null ? `${v}m` : "–";
         },
       }),

package/src/stories/grid/GridPopoutEditGenericTextArea.stories.tsx

@@ -91,7 +91,7 @@ const GridPopoutEditGenericTemplate: StoryFn<typeof Grid> = (props: GridProps) =
           field: "distance",
           headerName: "Number input",
           valueFormatter: (params) => {
-            const v = params.data.distance;
+            const v = params.data?.distance;
             return v != null ? `${v}${params.colDef.cellEditorParams.units}` : "–";
           },
         },

package/src/stories/grid/GridPopoverEditBearing.stories.tsx

@@ -65,8 +65,8 @@ const GridPopoverEditBearingTemplate: StoryFn<typeof Grid> = (props: GridProps)
           field: "bearingCorrection",
           headerName: "Bearing correction",
           cellRendererParams: {
-            warning: ({ data }) => data.id == 1002 && "Testers are testing",
-            info: ({ data }) => data.id == 1001 && "Developers are developing",
+            warning: ({ data }) => data?.id == 1002 && "Testers are testing",
+            info: ({ data }) => data?.id == 1001 && "Developers are developing",
           },
         },
         {

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

@@ -99,7 +99,7 @@ const GridEditDropDownTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
         field: "id",
         headerName: "Id",
       }),
-      GridPopoverEditDropDown(
+      GridPopoverEditDropDown<ITestRow, ITestRow["position2"]>(
         {
           field: "position2",
           headerName: "Multi-edit",
@@ -173,7 +173,7 @@ const GridEditDropDownTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
         {
           field: "position4",
           headerName: "Filtered (object)",
-          valueGetter: (params) => params.data.position4?.desc,
+          valueGetter: ({ data }) => data?.position4?.desc,
         },
         {
           multiEdit: true,
@@ -217,7 +217,7 @@ const GridEditDropDownTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
         {
           field: "sub",
           headerName: "Subcomponent",
-          valueGetter: (params) => params.data.sub,
+          valueGetter: ({ data }) => data?.sub,
         },
         {
           multiEdit: true,

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

@@ -68,7 +68,7 @@ const GridEditMultiSelectTemplate: StoryFn<typeof Grid> = (props: GridProps) =>
         field: "id",
         headerName: "Id",
       }),
-      GridPopoutEditMultiSelect(
+      GridPopoutEditMultiSelect<ITestRow, ITestRow["position"]>(
         {
           field: "position",
           headerName: "Position",
@@ -112,7 +112,7 @@ const GridEditMultiSelectTemplate: StoryFn<typeof Grid> = (props: GridProps) =>
           },
         },
       ),
-      GridPopoutEditMultiSelect(
+      GridPopoutEditMultiSelect<ITestRow, ITestRow["position"]>(
         {
           field: "position",
           headerName: "Parcel picker",

package/src/stories/grid/GridPopoverEditMultiSelectGrid.stories.tsx

@@ -49,7 +49,7 @@ const GridEditMultiSelectGridTemplate: StoryFn<typeof Grid> = (props: GridProps)
         field: "id",
         headerName: "Id",
       }),
-      GridPopoutEditMultiSelectGrid(
+      GridPopoutEditMultiSelectGrid<ITestRow, ITestRow["position"]>(
         {
           field: "position",
           headerName: "Position",
@@ -62,7 +62,7 @@ const GridEditMultiSelectGridTemplate: StoryFn<typeof Grid> = (props: GridProps)
           multiEdit: true,
           editorParams: {
             className: "GridMultiSelect-containerUnlimited",
-            options: (selectedRows) => {
+            options: (selectedRows: ITestRow[]) => {
               const counts: Record<number, number> = mergeWith(
                 {},
                 ...selectedRows.map((row) => countBy(row.position)),

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

@@ -80,23 +80,23 @@ const GridReadOnlyTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
         headerName: "Id",
         lockVisible: true,
       }),
-      GridCell({
+      GridCell<ITestRow, ITestRow["position"]>({
         field: "position",
         headerName: "Position",
         cellRendererParams: {
-          warning: (props) => props.value === "Tester" && "Testers are testing",
-          info: (props) => props.value === "Developer" && "Developers are awesome",
+          warning: ({ value }) => value === "Tester" && "Testers are testing",
+          info: ({ value }) => value === "Developer" && "Developers are awesome",
         },
       }),
       {
         headerName: "Metrics",
         marryChildren: true,
         children: [
-          GridCell({
+          GridCell<ITestRow, ITestRow["age"]>({
             field: "age",
             headerName: "Age",
           }),
-          GridCell({
+          GridCell<ITestRow, ITestRow["height"]>({
             field: "height",
             headerName: "Height",
           }),
@@ -134,7 +134,7 @@ const GridReadOnlyTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
           rightHoverElement: (
             <GridIcon icon={"ic_launch_modal"} title={"Title text"} className={"GridCell-editableIcon"} />
           ),
-          editAction: (selectedRows) => {
+          editAction: (selectedRows: ITestRow[]) => {
             alert(`Custom edit ${selectedRows.map((r) => r.id)} rowId(s) selected`);
           },
           shortcutKeys: {

package/src/stories/grid/GridViewList.stories.tsx

@@ -54,24 +54,22 @@ const GridReadOnlyTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
   const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
   const columnDefs: ColDefT<ITestRow>[] = useMemo(
     () => [
-      GridCell({
+      GridCell<ITestRow, ITestRow["id"]>({
         field: "id",
         headerName: "Id",
         lockVisible: true,
         resizable: false,
         lockPosition: "left",
-        cellRenderer: (props) => {
-          return <a href={"#"}>{props.value}</a>;
-        },
+        cellRenderer: ({ value }) => <a href={"#"}>{value}</a>,
       }),
-      GridCell({
+      GridCell<ITestRow, ITestRow["position"]>({
         field: "position",
         headerName: "Position",
         resizable: false,
         lockPosition: "left",
         cellRendererParams: {
-          warning: (props) => props.value === "Tester" && "Testers are testing",
-          info: (props) => props.value === "Developer" && "Developers are awesome",
+          warning: ({ value }) => value === "Tester" && "Testers are testing",
+          info: ({ value }) => value === "Developer" && "Developers are awesome",
         },
       }),
       GridCell({

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

@@ -82,12 +82,12 @@ const GridKeyboardInteractionsTemplate: StoryFn<typeof Grid> = (props: GridProps
         field: "id",
         headerName: "Id",
       }),
-      GridCell({
+      GridCell<ITestRow, ITestRow["position"]>({
         field: "position",
         headerName: "Position",
         cellRendererParams: {
-          warning: (props) => props.value === "Tester" && "Testers are testing",
-          info: (props) => props.value === "Developer" && "Developers are awesome",
+          warning: ({ value }) => value === "Tester" && "Testers are testing",
+          info: ({ value }) => value === "Developer" && "Developers are awesome",
         },
       }),
       GridCell({

package/src/utils/testUtil.ts

@@ -17,6 +17,43 @@ export const countRows = async (within?: HTMLElement): Promise<number> => {
   return getAllQuick({ tagName: `div[row-id]:not(:empty)` }, within).length;
 };
 
+export const findRowByIndex = async (rowIndex: number | string, within?: HTMLElement): Promise<HTMLDivElement> => {
+  await waitFor(async () => {
+    expect(getAllQuick({ classes: ".ag-row" }).length > 0).toBe(true);
+  });
+  //if this is not wrapped in an act console errors are logged during testing
+  let row!: HTMLDivElement;
+  await act(async () => {
+    row = await findQuick<HTMLDivElement>(
+      { tagName: `.ag-center-cols-container div[row-index='${rowIndex}']:not(:empty)` },
+      within,
+    );
+    // @ts-ignore
+    let combineChildren = [...Array.from(row.children)];
+
+    const leftCols = queryQuick<HTMLDivElement>(
+      { tagName: `.ag-pinned-left-cols-container div[row-index='${rowIndex}']` },
+      within,
+    );
+    if (leftCols) {
+      // @ts-ignore
+      combineChildren = [...Array.from(leftCols.children), ...combineChildren];
+    }
+
+    const rightCols = queryQuick<HTMLDivElement>(
+      { tagName: `.ag-pinned-right-cols-container div[row-index='${rowIndex}']` },
+      within,
+    );
+    if (rightCols) {
+      // @ts-ignore
+      combineChildren = [...Array.from(rightCols.children), ...combineChildren];
+    }
+
+    row.replaceChildren(...combineChildren);
+  });
+  return row;
+};
+
 export const findRow = async (rowId: number | string, within?: HTMLElement): Promise<HTMLDivElement> => {
   await waitFor(async () => {
     expect(getAllQuick({ classes: ".ag-row" }).length > 0).toBe(true);
@@ -29,7 +66,7 @@ export const findRow = async (rowId: number | string, within?: HTMLElement): Pro
       within,
     );
     // @ts-ignore
-    let combineChildren = [...row.children];
+    let combineChildren = [...Array.from(row.children)];
 
     const leftCols = queryQuick<HTMLDivElement>(
       { tagName: `.ag-pinned-left-cols-container div[row-id='${rowId}']` },
@@ -37,7 +74,7 @@ export const findRow = async (rowId: number | string, within?: HTMLElement): Pro
     );
     if (leftCols) {
       // @ts-ignore
-      combineChildren = [...leftCols.children, ...combineChildren];
+      combineChildren = [...Array.from(leftCols.children), ...combineChildren];
     }
 
     const rightCols = queryQuick<HTMLDivElement>(
@@ -46,7 +83,7 @@ export const findRow = async (rowId: number | string, within?: HTMLElement): Pro
     );
     if (rightCols) {
       // @ts-ignore
-      combineChildren = [...rightCols.children, ...combineChildren];
+      combineChildren = [...Array.from(rightCols.children), ...combineChildren];
     }
 
     row.replaceChildren(...combineChildren);
@@ -108,9 +145,14 @@ export const selectCell = async (rowId: string | number, colId: string, within?:
 };
 
 export const editCell = async (rowId: number | string, colId: string, within?: HTMLElement): Promise<void> => {
-  const cell = await findCell(rowId, colId, within);
-  await user.dblClick(cell);
-  await waitFor(findOpenPopover);
+  await waitFor(
+    async () => {
+      const cell = await findCell(rowId, colId, within);
+      await user.dblClick(cell);
+      await waitFor(findOpenPopover, { timeout: 1000 });
+    },
+    { timeout: 10000 },
+  );
 };
 
 export const isCellReadOnly = async (rowId: number | string, colId: string, within?: HTMLElement): Promise<boolean> => {
@@ -118,7 +160,7 @@ export const isCellReadOnly = async (rowId: number | string, colId: string, with
   return cell.className.includes("GridCell-readonly");
 };
 
-export const findOpenPopover = async (): Promise<HTMLElement> => findQuick({ classes: ".szh-menu--state-open" });
+export const findOpenPopover = () => findQuick({ classes: ".szh-menu--state-open" });
 
 export const queryMenuOption = async (menuOptionText: string | RegExp): Promise<HTMLElement | null> => {
   const openMenu = await findOpenPopover();

package/src/utils/textValidator.ts

@@ -3,11 +3,11 @@ import { ReactElement } from "react";
 import { GridBaseRow } from "../components/Grid";
 import { isFloat, stringByteLengthIsInvalid } from "./util";
 
-export interface TextInputValidatorProps<RowType extends GridBaseRow> {
+export interface TextInputValidatorProps<TData extends GridBaseRow> {
   required?: boolean;
   maxLength?: number;
   maxBytes?: number;
-  invalid?: (value: string, data: RowType, context: any) => ReactElement | string | null;
+  invalid?: (value: string, data: TData, context: any) => ReactElement | string | null;
   numberFormat?: {
     precision?: number;
     scale?: number;
@@ -19,10 +19,10 @@ export interface TextInputValidatorProps<RowType extends GridBaseRow> {
   };
 }
 
-export const TextInputValidator = <RowType extends GridBaseRow>(
-  props: TextInputValidatorProps<RowType>,
+export const TextInputValidator = <TData extends GridBaseRow>(
+  props: TextInputValidatorProps<TData>,
   value: string | null,
-  data: RowType,
+  data: TData,
   context: any,
 ) => {
   if (value == null) return null;

package/src/utils/util.ts

@@ -44,7 +44,7 @@ export const hasParentClass = function (className: string, child: Node) {
 export const stringByteLengthIsInvalid = (str: string, maxBytes: number) =>
   new TextEncoder().encode(str).length > maxBytes;
 
-export const fnOrVar = (fn: any, param: any) => (typeof fn === "function" ? fn(param) : fn);
+export const fnOrVar = (fn: any, param?: any) => (typeof fn === "function" ? fn(param) : fn);
 
 export const sanitiseFileName = (filename: string): string => {
   const valid = filename