@linzjs/step-ag-grid 28.5.1 → 29.0.0

package/src/contexts/GridContextProvider.tsx

@@ -17,7 +17,7 @@ import { GridUpdatingContext } from './GridUpdatingContext';
  * Also, make sure the provider is created in a separate component, otherwise it won't be found.
  */
 export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithChildren): ReactElement => {
-  const { modifyUpdating, checkUpdating } = useContext(GridUpdatingContext);
+  const { modifyUpdating, anyUpdating } = useContext(GridUpdatingContext);
   const [gridApi, setGridApi] = useState<GridApi>();
   const [gridReady, setGridReady] = useState(false);
   const [quickFilter, _setQuickFilter] = useState('');
@@ -41,8 +41,10 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
   /**
    * Make extra sure the GridCellFillerColId never gets added to invisibleColumnIds as it's dynamically determined
    */
-  const setInvisibleColumnIds = (invisibleColumnIds: string[]) =>
-    _setInvisibleColumnIds(pull(invisibleColumnIds, GridCellFillerColId));
+  const setInvisibleColumnIds = useCallback(
+    (invisibleColumnIds: string[]) => _setInvisibleColumnIds(pull(invisibleColumnIds, GridCellFillerColId)),
+    [],
+  );
 
   /**
    * Set quick filter directly on grid, based on previously save quickFilter state.
@@ -149,18 +151,6 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
     prePopupFocusedCell.current = gridApi.getFocusedCell() ?? undefined;
   }, [gridApi]);
 
-  /**
-   * After a popup refocus the cell.
-   */
-  const postPopupOps = useCallback(() => {
-    if (!gridApi || gridApi.isDestroyed()) {
-      return;
-    }
-    if (prePopupFocusedCell.current) {
-      gridApi.setFocusedCell(prePopupFocusedCell.current.rowIndex, prePopupFocusedCell.current.column);
-    }
-  }, [gridApi]);
-
   /**
    * Get all row id's in grid.
    */
@@ -461,13 +451,16 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
     }
   }, [gridApi]);
 
-  const stopEditing = useCallback((): void => {
-    if (!gridApi || gridApi.isDestroyed()) {
+  /**
+   *
+   */
+  const resetFocusedCellAfterCellEditing = useCallback((): void => {
+    if (!gridApi || gridApi.isDestroyed() || startCellEditingInProgressRef.current) {
       return;
     }
-    gridApi.stopEditing();
     if (prePopupFocusedCell.current) {
       gridApi.setFocusedCell(prePopupFocusedCell.current.rowIndex, prePopupFocusedCell.current.column);
+      prePopupFocusedCell.current = undefined;
     }
   }, [gridApi]);
 
@@ -491,59 +484,65 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
     }
   }, []);
 
+  const startCellEditingInProgressRef = useRef(false);
   const startCellEditing = useCallback(
     async ({ rowId, colId }: { rowId: number; colId: string }) => {
-      if (!gridApi) return;
-
-      const colDef = gridApi.getColumnDef(colId);
-      if (!colDef) {
+      if (!gridApi || startCellEditingInProgressRef.current) {
         return;
       }
+      startCellEditingInProgressRef.current = true;
 
-      const rowNode = gridApi.getRowNode(`${rowId}`);
-      if (!rowNode) {
-        return;
-      }
+      try {
+        // Edit in progress so don't edit until finished, timeout waiting after 5s
+        if (!(await waitForCondition(() => !anyUpdating(), 5000))) {
+          console.error("Could not start edit because previous edit hasn't finished after 5 seconds");
+          return;
+        }
 
-      prePopupOps();
-      const shouldSelectNode = !rowNode.isSelected();
-      if (shouldSelectNode) {
-        externallySelectedItemsAreInSyncRef.current = false;
-        setExternallySelectedItemsAreInSync(false);
-        rowNode.setSelected(true, true);
-        await waitForExternallySelectedItemsToBeInSync();
-      }
+        const colDef = gridApi.getColumnDef(colId);
+        if (!colDef) {
+          return;
+        }
 
-      // Cell already being edited, so don't re-edit until finished
-      if (checkUpdating([colDef.field ?? colDef.colId ?? ''], rowId)) {
-        return;
-      }
+        const rowNode = gridApi.getRowNode(`${rowId}`);
+        if (!rowNode) {
+          return;
+        }
 
-      const rowIndex = rowNode.rowIndex;
-      if (rowIndex != null) {
-        defer(() => {
-          !gridApi.isDestroyed() &&
-            gridApi.startEditingCell({
-              rowIndex,
-              colKey: colId,
-            });
-        });
+        prePopupOps();
+        const shouldSelectNode = !rowNode.isSelected();
+        if (shouldSelectNode) {
+          externallySelectedItemsAreInSyncRef.current = false;
+          setExternallySelectedItemsAreInSync(false);
+          rowNode.setSelected(true, true);
+          await waitForExternallySelectedItemsToBeInSync();
+        }
+
+        const rowIndex = rowNode.rowIndex;
+        if (rowIndex != null) {
+          defer(() => {
+            !gridApi.isDestroyed() &&
+              gridApi.startEditingCell({
+                rowIndex,
+                colKey: colId,
+              });
+          });
+        }
+      } finally {
+        startCellEditingInProgressRef.current = false;
       }
     },
-    [checkUpdating, gridApi, prePopupOps, waitForExternallySelectedItemsToBeInSync],
+    [anyUpdating, gridApi, prePopupOps, waitForExternallySelectedItemsToBeInSync],
   );
 
-  /**
-   * This differs from stopEdit in that it will also invoke cellEditingCompleteCallback
-   */
-  const cancelEdit = useCallback((): void => {
-    stopEditing();
-    cellEditingCompleteCallbackRef.current?.();
-  }, [stopEditing]);
-
-  const cellEditingCompleteCallbackRef = useRef<() => void>();
-  const setOnCellEditingComplete = useCallback((cellEditingCompleteCallback: (() => void) | undefined) => {
-    cellEditingCompleteCallbackRef.current = cellEditingCompleteCallback;
+  const bulkEditingCompleteCallbackRef = useRef<() => void>();
+  const onBulkEditingComplete = useCallback(() => {
+    resetFocusedCellAfterCellEditing();
+    bulkEditingCompleteCallbackRef.current?.();
+  }, [resetFocusedCellAfterCellEditing]);
+
+  const setOnBulkEditingComplete = useCallback((cellEditingCompleteCallback: (() => void) | undefined) => {
+    bulkEditingCompleteCallbackRef.current = cellEditingCompleteCallback;
   }, []);
 
   /**
@@ -552,7 +551,9 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
   const selectNextEditableCell = useCallback(
     async (tabDirection: -1 | 1): Promise<boolean> => {
       // Pretend it succeeded to prevent unwanted cellEditingCompleteCallback
-      if (!gridApi) return true;
+      if (!gridApi) {
+        return true;
+      }
 
       const focusedCellIsEditable = () => {
         const focusedCell = gridApi.isDestroyed() ? null : gridApi.getFocusedCell();
@@ -572,17 +573,17 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
         if (gridApi.isDestroyed()) {
           return true;
         }
+        // Prevent resetting focus to original editing cell
+        prePopupFocusedCell.current = undefined;
+
         const preRow = gridApi.getFocusedCell();
         if (tabDirection === 1) {
+          gridApi.stopEditing();
           gridApi.tabToNextCell();
         } else {
           gridApi.tabToPreviousCell();
         }
 
-        // If we don't wait the tab to next element won't work
-        // I think this is due to the grid resizing
-        await wait(150);
-
         if (gridApi.isDestroyed()) {
           return true;
         }
@@ -596,18 +597,19 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
         if (focusedCellIsEditable()) {
           const focusedCell = gridApi.getFocusedCell();
           if (focusedCell) {
-            prePopupOps();
-            gridApi.startEditingCell({
-              rowIndex: focusedCell.rowIndex,
-              colKey: focusedCell.column.getColId(),
-            });
+            const rowNode = gridApi.getDisplayedRowAtIndex(focusedCell.rowIndex);
+            const rowId = rowNode?.data?.id;
+            if (rowId == null) {
+              return false;
+            }
+            await startCellEditing({ rowId, colId: focusedCell.column.getColId() });
             return true;
           }
         }
       }
       return false;
     },
-    [gridApi, prePopupOps],
+    [gridApi, startCellEditing],
   );
 
   const updatingCells = useCallback(
@@ -617,65 +619,71 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
       setSaving?: (saving: boolean) => void,
       tabDirection?: 1 | 0 | -1,
     ): Promise<boolean> => {
-      setSaving && setSaving(true);
-      return await gridApiOp(async (gridApi) => {
-        const selectedRows = props.selectedRows;
-
-        let ok = false;
-
-        await modifyUpdating(
-          props.field ?? '',
-          selectedRows.map((data) => data.id),
-          async () => {
-            // MATT Disabled I don't believe these are needed anymore
-            // I've left them here just in case they are
-            // Need to refresh to get spinners to work on all rows
-            // gridApi.refreshCells({ rowNodes: props.selectedRows as RowNode[], force: true });
-            ok = await fnUpdate(selectedRows).catch((ex) => {
-              console.error('Exception during modifyUpdating', ex);
-              return false;
-            });
-          },
-        );
-
-        // MATT Disabled I don't believe these are needed anymore
-        // I've left them here just in case they are
-        // async processes need to refresh their own rows
-        // gridApi.refreshCells({ rowNodes: selectedRows as RowNode[], force: true });
+      try {
+        setSaving?.(true);
+        return await gridApiOp(async (gridApi) => {
+          const selectedRows = props.selectedRows;
+
+          let ok = false;
+
+          await modifyUpdating(
+            props.field ?? '',
+            selectedRows.map((data) => data.id),
+            async () => {
+              // MATT Disabled I don't believe these are needed anymore
+              // I've left them here just in case they are
+              // Need to refresh to get spinners to work on all rows
+              // gridApi.refreshCells({ rowNodes: props.selectedRows as RowNode[], force: true });
+              ok = await fnUpdate(selectedRows).catch((ex) => {
+                console.error('Exception during modifyUpdating', ex);
+                return false;
+              });
+            },
+          );
 
-        if (gridApi.isDestroyed()) {
-          return ok;
-        }
+          // MATT Disabled I don't believe these are needed anymore
+          // I've left them here just in case they are
+          // async processes need to refresh their own rows
+          // gridApi.refreshCells({ rowNodes: selectedRows as RowNode[], force: true });
 
-        if (ok) {
-          const cell = gridApi.getFocusedCell();
-          if (cell && gridApi.getFocusedCell() == null) {
-            !gridApi.isDestroyed && gridApi.setFocusedCell(cell.rowIndex, cell.column);
+          if (gridApi.isDestroyed()) {
+            return ok;
           }
-          // This is needed to trigger postSortRowsHook
-          gridApi.refreshClientSideRowModel();
-        } else {
-          // Don't set saving if ok as the form has already closed
-          setSaving?.(false);
-        }
 
-        // Only focus next cell if user hasn't already manually changed focus
-        const postPopupFocusedCell = gridApi.getFocusedCell();
-        if (
-          prePopupFocusedCell.current &&
-          postPopupFocusedCell &&
-          prePopupFocusedCell.current.rowIndex == postPopupFocusedCell.rowIndex &&
-          prePopupFocusedCell.current.column.getColId() == postPopupFocusedCell.column.getColId()
-        ) {
-          if (!tabDirection || !(await selectNextEditableCell(tabDirection))) {
-            cellEditingCompleteCallbackRef.current && cellEditingCompleteCallbackRef.current();
+          if (ok) {
+            const cell = gridApi.getFocusedCell();
+            if (cell && gridApi.getFocusedCell() == null) {
+              !gridApi.isDestroyed && gridApi.setFocusedCell(cell.rowIndex, cell.column);
+            }
+
+            // This is needed to trigger postSortRowsHook
+            gridApi.refreshClientSideRowModel();
           }
-        }
 
-        return ok;
-      });
+          void (async () => {
+            // Only focus next cell if user hasn't already manually changed focus
+            const postPopupFocusedCell = gridApi.getFocusedCell();
+            if (
+              prePopupFocusedCell.current &&
+              postPopupFocusedCell &&
+              prePopupFocusedCell.current.rowIndex == postPopupFocusedCell.rowIndex &&
+              prePopupFocusedCell.current.column.getColId() == postPopupFocusedCell.column.getColId()
+            ) {
+              if (!tabDirection || !(await selectNextEditableCell(tabDirection))) {
+                onBulkEditingComplete();
+              }
+            } else {
+              onBulkEditingComplete();
+            }
+          })();
+
+          return ok;
+        });
+      } finally {
+        setSaving?.(false);
+      }
     },
-    [gridApiOp, modifyUpdating, selectNextEditableCell],
+    [gridApiOp, modifyUpdating, onBulkEditingComplete, selectNextEditableCell],
   );
 
   const redrawRows: any = useMemo(
@@ -718,20 +726,28 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
     [gridApi],
   );
 
-  const addExternalFilter = (filter: GridFilterExternal<TData>) => {
-    externalFilters.current.push(filter);
-    void onFilterChanged();
-  };
+  const addExternalFilter = useCallback(
+    (filter: GridFilterExternal<TData>) => {
+      externalFilters.current.push(filter);
+      void onFilterChanged();
+    },
+    [onFilterChanged],
+  );
 
-  const removeExternalFilter = (filter: GridFilterExternal<TData>) => {
-    remove(externalFilters.current, (v) => v === filter);
-    void onFilterChanged();
-  };
+  const removeExternalFilter = useCallback(
+    (filter: GridFilterExternal<TData>) => {
+      remove(externalFilters.current, (v) => v === filter);
+      void onFilterChanged();
+    },
+    [onFilterChanged],
+  );
 
-  const isExternalFilterPresent = (): boolean => !isEmpty(externalFilters.current);
+  const isExternalFilterPresent = useCallback((): boolean => !isEmpty(externalFilters.current), []);
 
-  const doesExternalFilterPass = (node: IRowNode): boolean =>
-    externalFilters.current.every((filter) => filter(node.data, node));
+  const doesExternalFilterPass = useCallback(
+    (node: IRowNode): boolean => externalFilters.current.every((filter) => filter(node.data, node)),
+    [],
+  );
 
   const getColDef = useCallback(
     (colId?: string): ColDef | undefined => (!!colId && gridApi?.getColumnDef(colId)) || undefined,
@@ -804,7 +820,6 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
         setInvisibleColumnIds,
         gridReady,
         prePopupOps,
-        postPopupOps,
         setApis,
         setQuickFilter,
         selectRowsById,
@@ -825,8 +840,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
         sizeColumnsToFit,
         autoSizeColumns,
         startCellEditing,
-        stopEditing,
-        cancelEdit,
+        resetFocusedCellAfterCellEditing,
         updatingCells,
         redrawRows,
         externallySelectedItemsAreInSync,
@@ -837,7 +851,8 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
         isExternalFilterPresent,
         doesExternalFilterPass,
         downloadCsv,
-        setOnCellEditingComplete,
+        onBulkEditingComplete,
+        setOnBulkEditingComplete,
         showNoRowsOverlay,
       }}
     >
@@ -894,3 +909,15 @@ export const downloadCsvUseValueFormattersProcessCellCallback = (params: Process
   // We add an extra encodeToString here just in case valueFormatter is returning non string values
   return encodeToString(result);
 };
+
+const waitForCondition = async (condition: () => boolean, timeoutMs: number): Promise<boolean> => {
+  const endTime = Date.now() + timeoutMs;
+  while (Date.now() < endTime) {
+    if (condition()) {
+      return true;
+    }
+    await wait(100);
+  }
+  console.warn('waitForCondition failed');
+  return false;
+};

package/src/contexts/GridPopoverContext.tsx

@@ -6,6 +6,7 @@ export interface GridPopoverContextType<TData extends GridBaseRow> {
   anchorRef: RefObject<Element>;
   saving: boolean;
   setSaving: (saving: boolean) => void;
+  stopEditing: () => void;
   colId: string;
   field: keyof TData;
   value: any;
@@ -22,6 +23,7 @@ export const GridPopoverContext = createContext<GridPopoverContextType<any>>({
   anchorRef: { current: null },
   saving: false,
   setSaving: () => {},
+  stopEditing: () => {},
   colId: '',
   field: '',
   value: null,

package/src/contexts/GridPopoverContextProvider.tsx

@@ -19,7 +19,7 @@ export const GridPopoverContextProvider = (props2: PropsWithChildren<GridPopover
   const hasSaved = useRef(false);
   const [saving, setSaving] = useState(false);
 
-  const { colDef } = props;
+  const { colDef, stopEditing, formatValue, data, value } = props;
   const { cellEditorParams } = colDef;
   const multiEdit = cellEditorParams?.multiEdit ?? false;
   // Then item that is clicked on will always be first in the list
@@ -34,7 +34,10 @@ export const GridPopoverContextProvider = (props2: PropsWithChildren<GridPopover
 
   const updateValue = useCallback(
     async (saveFn: (selectedRows: any[]) => Promise<boolean>, tabDirection: 1 | 0 | -1): Promise<boolean> => {
-      if (hasSaved.current) return true;
+      if (hasSaved.current) {
+        // already called save so ignore
+        return true;
+      }
       hasSaved.current = true;
       return saving ? false : await updatingCells({ selectedRows, field }, saveFn, setSaving, tabDirection);
     },
@@ -50,10 +53,11 @@ export const GridPopoverContextProvider = (props2: PropsWithChildren<GridPopover
         selectedRows,
         colId,
         field,
-        data: props.data,
-        value: props.value,
+        data,
+        value,
         updateValue,
-        formatValue: props.formatValue,
+        formatValue,
+        stopEditing,
       }}
     >
       {children}

package/src/contexts/GridUpdatingContext.tsx

@@ -1,6 +1,7 @@
 import { createContext } from 'react';
 
 export type GridUpdatingContextType = {
+  anyUpdating: () => boolean;
   checkUpdating: (fields: string | string[], id: number | string) => boolean;
   modifyUpdating: (
     fields: string | string[],
@@ -12,6 +13,10 @@ export type GridUpdatingContextType = {
 };
 
 export const GridUpdatingContext = createContext<GridUpdatingContextType>({
+  anyUpdating: () => {
+    console.error('Missing GridUpdatingContext');
+    return false;
+  },
   checkUpdating: () => {
     console.error('Missing GridUpdatingContext');
     return false;

package/src/contexts/GridUpdatingContextProvider.tsx

@@ -1,5 +1,5 @@
-import { castArray, flatten, remove } from 'lodash-es';
-import { PropsWithChildren, useRef, useState } from 'react';
+import { castArray, flatten, isEmpty, remove } from 'lodash-es';
+import { PropsWithChildren, useCallback, useRef, useState } from 'react';
 
 import { GridUpdatingContext } from './GridUpdatingContext';
 
@@ -14,7 +14,7 @@ export const GridUpdatingContextProvider = (props: PropsWithChildren) => {
   const updating = useRef<GridUpdatingContextStatus>({});
   const [updatedDep, setUpdatedDep] = useState(0);
 
-  const resetUpdating = () => {
+  const resetUpdating = useCallback(() => {
     const mergedUpdatingBlocks: GridUpdatingContextStatus = {};
     for (const key in updatingBlocks.current) {
       const arr = flatten(updatingBlocks.current[key]);
@@ -24,33 +24,40 @@ export const GridUpdatingContextProvider = (props: PropsWithChildren) => {
     }
     updating.current = mergedUpdatingBlocks;
     setUpdatedDep((updatedDep) => updatedDep + 1);
-  };
-  const updatingCols = () => Object.keys(updating.current);
-
-  const modifyUpdating = async (
-    fields: string | string[],
-    ids: (number | string)[],
-    fn: () => void | Promise<void>,
-  ) => {
-    const idRef = [...ids];
-    castArray(fields).forEach((field) => {
-      const fieldUpdatingIds = updatingBlocks.current[field] ?? (updatingBlocks.current[field] = []);
-      fieldUpdatingIds.push(idRef);
-    });
-    resetUpdating();
-    await fn();
-    castArray(fields).forEach((field) => {
-      const fieldUpdatingIds = updatingBlocks.current[field];
-      remove(fieldUpdatingIds, (idList) => idList === idRef);
-    });
-    resetUpdating();
-  };
-
-  const checkUpdating = (fields: string | string[], id: number | string): boolean =>
-    castArray(fields).some((f) => updating.current[f]?.includes(id));
+  }, []);
+
+  const updatingCols = useCallback(() => Object.keys(updating.current), []);
+
+  const modifyUpdating = useCallback(
+    async (fields: string | string[], ids: (number | string)[], fn: () => void | Promise<void>) => {
+      const idRef = [...ids];
+      castArray(fields).forEach((field) => {
+        const fieldUpdatingIds = updatingBlocks.current[field] ?? (updatingBlocks.current[field] = []);
+        fieldUpdatingIds.push(idRef);
+      });
+      resetUpdating();
+      await fn();
+      castArray(fields).forEach((field) => {
+        const fieldUpdatingIds = updatingBlocks.current[field];
+        remove(fieldUpdatingIds, (idList) => idList === idRef);
+      });
+      resetUpdating();
+    },
+    [resetUpdating],
+  );
+
+  const anyUpdating = useCallback((): boolean => {
+    return !isEmpty(updating.current);
+  }, []);
+
+  const checkUpdating = useCallback(
+    (fields: string | string[], id: number | string): boolean =>
+      castArray(fields).some((f) => updating.current[f]?.includes(id)),
+    [],
+  );
 
   return (
-    <GridUpdatingContext.Provider value={{ modifyUpdating, checkUpdating, updatingCols, updatedDep }}>
+    <GridUpdatingContext.Provider value={{ modifyUpdating, anyUpdating, checkUpdating, updatingCols, updatedDep }}>
       {props.children}
     </GridUpdatingContext.Provider>
   );

package/src/lui/reactUtils.tsx

@@ -12,3 +12,27 @@ export const usePrevious = <T,>(value: T): T | undefined => {
   }, [value]);
   return ref.current;
 };
+
+/**
+ * Dump prop differences for components between renders.
+ */
+export const usePropMonitor = (what: string, props: NonNullable<unknown>) => {
+  const prev = usePrevious(props);
+  useEffect(() => {
+    if (prev) {
+      let first = true;
+      Object.keys(props).forEach((p) => {
+        // @ts-expect-error any type
+        if (props[p] !== prev[p]) {
+          if (first) {
+            // eslint-disable-next-line no-console
+            console.log('--- props changed -----');
+            first = false;
+          }
+          // eslint-disable-next-line no-console
+          console.log(`${what} key: ${p} changed`);
+        }
+      });
+    }
+  }, [prev, props, what]);
+};

package/src/react-menu3/components/MenuList.tsx

@@ -370,6 +370,9 @@ export const MenuList = ({
     }
 
     const callback = debounce(() => {
+      if (!menuRef.current) {
+        return;
+      }
       const { width, height } = menuRef.current.ownerDocument.body.getBoundingClientRect();
       if (width === 0 || height === 0) return;
       if (

package/src/stories/grid/GridFilterButtons.stories.tsx

@@ -42,7 +42,7 @@ interface ITestRow {
   desc: string;
 }
 
-const GridFilterButtonsTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
+const GridFilterButtonsTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridProps<ITestRow>) => {
   const columnDefs: ColDefT<ITestRow>[] = useMemo(
     () => [
       GridCell({

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

@@ -52,7 +52,7 @@ interface ITestRow {
   desc: string;
 }
 
-const GridNonEditableRowTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
+const GridNonEditableRowTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridProps<ITestRow>) => {
   const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
   const columnDefs: ColDefT<ITestRow>[] = useMemo(
     () => [

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

@@ -57,7 +57,7 @@ interface ITestPinnedRow {
   age: number;
 }
 
-const PinnedRowTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
+const PinnedRowTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridProps<ITestRow>) => {
   const columnDefs: ColDefT<ITestRow>[] = useMemo(
     () => [
       GridCell({