@linzjs/step-ag-grid 16.0.0 → 17.0.0

package/src/contexts/GridContext.tsx

@@ -1,10 +1,10 @@
-import { ColDef, ColumnApi, GridApi, RowNode } from "ag-grid-community";
+import { ColDef, ColumnApi, GridApi, IRowNode } from "ag-grid-community";
 import { CsvExportParams } from "ag-grid-community/dist/lib/interfaces/exportParams";
 import { createContext, useContext } from "react";
 
 import { ColDefT, GridBaseRow } from "../components";
 
-export type GridFilterExternal<RowType extends GridBaseRow> = (data: RowType, rowNode: RowNode) => boolean;
+export type GridFilterExternal<RowType extends GridBaseRow> = (data: RowType, rowNode: IRowNode) => boolean;
 
 export interface AutoSizeColumnsProps {
   skipHeader?: boolean;
@@ -51,14 +51,14 @@ export interface GridContextType<RowType extends GridBaseRow> {
     setSaving?: (saving: boolean) => void,
     tabDirection?: 1 | 0 | -1,
   ) => Promise<boolean>;
-  redrawRows: (rowNodes?: RowNode[]) => void;
+  redrawRows: (rowNodes?: IRowNode[]) => void;
   externallySelectedItemsAreInSync: boolean;
   setExternallySelectedItemsAreInSync: (inSync: boolean) => void;
   waitForExternallySelectedItemsToBeInSync: () => Promise<void>;
   addExternalFilter: (filter: GridFilterExternal<RowType>) => void;
   removeExternalFilter: (filter: GridFilterExternal<RowType>) => void;
   isExternalFilterPresent: () => boolean;
-  doesExternalFilterPass: (node: RowNode) => boolean;
+  doesExternalFilterPass: (node: IRowNode) => boolean;
   invisibleColumnIds: string[] | undefined;
   setInvisibleColumnIds: (colIds: string[]) => void;
   downloadCsv: (csvExportParams?: CsvExportParams) => void;

package/src/contexts/GridContextProvider.tsx

@@ -1,10 +1,9 @@
-import { ColDef, ColumnApi, GridApi, RowNode } from "ag-grid-community";
-import { CellPosition } from "ag-grid-community/dist/lib/entities/cellPosition";
+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 debounce from "debounce-promise";
 import { compact, defer, delay, difference, filter, isEmpty, last, pull, remove, sortBy, sumBy } from "lodash-es";
-import { ReactElement, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { PropsWithChildren, ReactElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 
 import { ColDefT, GridBaseRow } from "../components";
 import { GridCellFillerColId, isGridCellFiller } from "../components/GridCellFiller";
@@ -13,16 +12,12 @@ import { isNotEmpty, sanitiseFileName, wait } from "../utils/util";
 import { AutoSizeColumnsProps, AutoSizeColumnsResult, GridContext, GridFilterExternal } from "./GridContext";
 import { GridUpdatingContext } from "./GridUpdatingContext";
 
-interface GridContextProps {
-  children: ReactNode;
-}
-
 /**
  * Context for AgGrid operations.
  * 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: GridContextProps): ReactElement => {
+export const GridContextProvider = <RowType extends GridBaseRow>(props: PropsWithChildren): ReactElement => {
   const { modifyUpdating, checkUpdating } = useContext(GridUpdatingContext);
   const [gridApi, setGridApi] = useState<GridApi>();
   const [columnApi, setColumnApi] = useState<ColumnApi>();
@@ -167,7 +162,7 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
    * Find new row ids
    * Uses beforeUpdate ids to find new nodes.
    */
-  const _getNewNodes = useCallback((): RowNode[] => {
+  const _getNewNodes = useCallback((): IRowNode[] => {
     return gridApiOp(
       (gridApi) =>
         compact(difference(_getAllRowIds(), idsBeforeUpdate.current).map((rowId) => gridApi.getRowNode("" + rowId))),
@@ -182,7 +177,7 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
    * @param rowIds Row ids to get from grid.
    */
   const _rowIdsToNodes = useCallback(
-    (rowIds: number[]): RowNode[] => {
+    (rowIds: number[]): IRowNode[] => {
       return gridApiOp(
         (gridApi) => compact(rowIds.map((rowId) => gridApi.getRowNode("" + rowId))),
         () => [] as RowNode[],
@@ -240,7 +235,14 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
         // After retry count expires we give-up and deselect all rows, then select any subset of rows that have updated
         if (gridHasNotUpdated && retryCount > 0) {
           delay(
-            () => _selectRowsWithOptionalFlash({ rowIds, select, flash, ifNoCellFocused, retryCount: retryCount - 1 }),
+            () =>
+              _selectRowsWithOptionalFlash({
+                rowIds,
+                select,
+                flash,
+                ifNoCellFocused,
+                retryCount: retryCount - 1,
+              }),
             250,
           );
           return;
@@ -394,13 +396,17 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
   const autoSizeColumns = useCallback(
     ({ skipHeader, colIds, userSizedColIds }: AutoSizeColumnsProps = {}): AutoSizeColumnsResult => {
       if (!columnApi) return null;
-      const colIdsSet = colIds instanceof Set ? colIds : new Set<string>(colIds ?? []);
-      columnApi.getColumnState().forEach((col) => {
-        const colId = col.colId;
-        if ((isEmpty(colIdsSet) || colIdsSet.has(colId)) && !userSizedColIds?.has(colId)) {
-          columnApi.autoSizeColumn(colId, skipHeader);
-        }
+      const colIdsSet = colIds instanceof Set ? colIds : new Set(colIds);
+      const colsToResize = columnApi.getColumnState().filter((colState) => {
+        const colId = colState.colId;
+        return (isEmpty(colIdsSet) || colIdsSet.has(colId)) && !userSizedColIds?.has(colId) && !colState.flex;
       });
+      if (!isEmpty(colsToResize)) {
+        columnApi.autoSizeColumns(
+          colsToResize.map((colState) => colState.colId),
+          skipHeader,
+        );
+      }
       return {
         width: sumBy(
           columnApi.getColumnState().filter((col) => !col.hide),
@@ -415,7 +421,7 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
    * Resize columns to fit container
    */
   const sizeColumnsToFit = useCallback((): void => {
-    gridApi && gridApi.sizeColumnsToFit();
+    gridApi?.sizeColumnsToFit();
   }, [gridApi]);
 
   const stopEditing = useCallback((): void => {
@@ -584,7 +590,7 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
   );
 
   const redrawRows = useCallback(
-    (rowNodes?: RowNode[]) => {
+    (rowNodes?: IRowNode[]) => {
       gridApiOp((gridApi) => gridApi.redrawRows(rowNodes ? { rowNodes } : undefined));
     },
     [gridApiOp],
@@ -623,7 +629,7 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
 
   const isExternalFilterPresent = (): boolean => !isEmpty(externalFilters.current);
 
-  const doesExternalFilterPass = (node: RowNode): boolean =>
+  const doesExternalFilterPass = (node: IRowNode): boolean =>
     externalFilters.current.every((filter) => filter(node.data, node));
 
   const getColDef = useCallback(

package/src/contexts/GridPopoverContextProvider.tsx

@@ -1,6 +1,6 @@
 import { ICellEditorParams } from "ag-grid-community";
 import { sortBy } from "lodash-es";
-import { ReactNode, RefObject, useCallback, useContext, useMemo, useRef, useState } from "react";
+import { PropsWithChildren, RefObject, useCallback, useContext, useMemo, useRef, useState } from "react";
 
 import { GridBaseRow } from "../components/Grid";
 import { GridContext } from "./GridContext";
@@ -8,10 +8,9 @@ import { GridPopoverContext } from "./GridPopoverContext";
 
 interface GridPopoverContextProps {
   props: ICellEditorParams;
-  children: ReactNode;
 }
 
-export const GridPopoverContextProvider = ({ props, children }: GridPopoverContextProps) => {
+export const GridPopoverContextProvider = ({ props, children }: PropsWithChildren<GridPopoverContextProps>) => {
   const { getFilteredSelectedRows, updatingCells } = useContext(GridContext);
   const anchorRef = useRef<Element>(props.eGridCell);
 

package/src/contexts/GridUpdatingContextProvider.tsx

@@ -1,19 +1,15 @@
 import { castArray, flatten, remove } from "lodash-es";
-import { ReactNode, useRef, useState } from "react";
+import { PropsWithChildren, useRef, useState } from "react";
 
 import { GridUpdatingContext } from "./GridUpdatingContext";
 
-interface UpdatingContextProviderProps {
-  children: ReactNode;
-}
-
 export type GridUpdatingContextStatus = Record<string, (number | string)[] | undefined>;
 
 type FieldName = string;
 type IdList = (number | string)[];
 type UpdatingBlock = Record<FieldName, IdList[]>;
 
-export const GridUpdatingContextProvider = (props: UpdatingContextProviderProps) => {
+export const GridUpdatingContextProvider = (props: PropsWithChildren) => {
   const updatingBlocks = useRef<UpdatingBlock>({});
   const updating = useRef<GridUpdatingContextStatus>({});
   const [updatedDep, setUpdatedDep] = useState(0);

package/src/lui/ActionButton.tsx

@@ -1,7 +1,7 @@
 import "./ActionButton.scss";
 
 import clsx from "clsx";
-import { CSSProperties, useEffect, useState } from "react";
+import { CSSProperties, ReactElement, useEffect, useState } from "react";
 
 import { LuiButton, LuiIcon, LuiMiniSpinner } from "@linzjs/lui";
 import { LuiButtonProps } from "@linzjs/lui/dist/components/LuiButton/LuiButton";
@@ -43,7 +43,7 @@ export const ActionButton = ({
   iconPosition = "left",
   level = "tertiary",
   "aria-label": ariaLabel,
-}: ActionButtonProps): JSX.Element => {
+}: ActionButtonProps): ReactElement => {
   const [inProgress, setInProgress] = useState(false);
   const lastInProgress = usePrevious(inProgress ?? false);
   const [localInProgress, setLocalInProgress, setLocalInProgressDeferred] = useStateDeferred<boolean>(inProgress);

package/src/lui/FormError.tsx

@@ -1,8 +1,10 @@
 import "./FormError.scss";
 
+import { ReactElement } from "react";
+
 export interface FormErrorProps {
   helpText?: string;
-  error?: JSX.Element | string | boolean | null;
+  error?: ReactElement | string | boolean | null;
 }
 
 export const FormError = (props: FormErrorProps) => {

package/src/lui/TextAreaInput.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import { omit } from "lodash-es";
-import { InputHTMLAttributes, useState } from "react";
+import { InputHTMLAttributes, ReactElement, useState } from "react";
 import { v4 as uuidVersion4 } from "uuid";
 
 import { FormError } from "./FormError";
@@ -15,10 +15,10 @@ export interface LuiTextAreaInputProps extends InputHTMLAttributes<HTMLTextAreaE
   value: string;
 
   // Custom fields
-  label?: JSX.Element | string;
+  label?: ReactElement | string;
   mandatory?: boolean;
   helpText?: string;
-  error?: JSX.Element | string | boolean | null;
+  error?: ReactElement | string | boolean | null;
   allowTabToSave?: boolean;
 }
 

package/src/lui/TextInputFormatted.tsx

@@ -2,7 +2,7 @@ import "./TextInputFormatted.scss";
 
 import clsx from "clsx";
 import { omit } from "lodash-es";
-import { DetailedHTMLProps, InputHTMLAttributes } from "react";
+import { DetailedHTMLProps, InputHTMLAttributes, ReactElement } from "react";
 
 import { FormError } from "./FormError";
 
@@ -12,12 +12,12 @@ export interface LuiTextInputProps extends DetailedHTMLProps<InputHTMLAttributes
 
   // Custom fields
   helpText?: string;
-  error?: JSX.Element | string | boolean | null;
+  error?: ReactElement | string | boolean | null;
   formatted?: string;
   allowTabToSave?: boolean;
 }
 
-export const TextInputFormatted = (props: LuiTextInputProps): JSX.Element => {
+export const TextInputFormatted = (props: LuiTextInputProps): ReactElement => {
   return (
     <div className={clsx("LuiTextInput Grid-popoverContainer", props.error && "hasError", props.className)}>
       <span className="LuiTextInput-inputWrapper">

package/src/lui/reactUtils.test.tsx

@@ -1,7 +1,7 @@
 import { screen } from "@testing-library/dom";
 import { render } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { useEffect, useState } from "react";
+import { ReactElement, useEffect, useState } from "react";
 
 import { usePrevious } from "./reactUtils";
 
@@ -11,7 +11,7 @@ interface WrapperProps {
 
 let extPrevious: boolean | undefined = undefined;
 
-const UsePreviousWrapper = ({ value }: WrapperProps): JSX.Element => {
+const UsePreviousWrapper = ({ value }: WrapperProps): ReactElement => {
   const previous = usePrevious<boolean>(value);
   useEffect(() => {
     extPrevious = previous;
@@ -20,7 +20,7 @@ const UsePreviousWrapper = ({ value }: WrapperProps): JSX.Element => {
   return <div />;
 };
 
-const TestComponent = (): JSX.Element => {
+const TestComponent = (): ReactElement => {
   const [value, setValue] = useState(false);
 
   const toggleValue = () => setValue((value) => !value);

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

@@ -1,4 +1,4 @@
-import { LegacyRef, useContext, useMemo, useRef } from "react";
+import { LegacyRef, ReactElement, useContext, useMemo, useRef } from "react";
 
 import { EventHandlersContext } from "../contexts/EventHandlersContext";
 import { useBEM, useCombinedRef, useItemState } from "../hooks";
@@ -8,7 +8,7 @@ import { withHoveringResultProps } from "../utils/withHovering";
 
 export interface FocusableItemProps extends BaseProps, withHoveringResultProps {
   disabled?: boolean;
-  children: (ref: LegacyRef<any>) => JSX.Element;
+  children: (ref: LegacyRef<any>) => ReactElement;
 }
 
 export const FocusableItemFr = ({

package/src/react-menu3/utils/utils.ts

@@ -25,7 +25,7 @@ export function safeCall<T, R>(fn: (arg?: T) => R, arg?: T): T | R {
 
 const internalKey = "_szhsinMenu";
 export const getName = (component: Record<string, any | undefined>) => component[internalKey];
-//export const defineName = <T extends any[]>(name: string, component: (...args: T) => JSX.Element) =>
+//export const defineName = <T extends any[]>(name: string, component: (...args: T) => ReactElement) =>
 //  Object.defineProperty(component, internalKey, { value: name });
 
 export const defineName = (

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

@@ -1,4 +1,4 @@
-import { MutableRefObject, PropsWithRef, forwardRef, memo, useContext, useRef } from "react";
+import { MutableRefObject, PropsWithRef, ReactElement, forwardRef, memo, useContext, useRef } from "react";
 
 import { HoverItemContext } from "../contexts/HoverItemContext";
 
@@ -8,7 +8,7 @@ export interface withHoveringResultProps {
   menuItemRef?: MutableRefObject<HTMLLIElement>;
 }
 
-export const withHovering = <T,>(name: string, WrappedComponent: (props: T) => JSX.Element) => {
+export const withHovering = <T,>(name: string, WrappedComponent: (props: T) => ReactElement) => {
   const Component = memo(WrappedComponent);
   const WithHovering = forwardRef((props: PropsWithRef<T>, ref) => {
     const menuItemRef = useRef<any>(null);

package/src/stories/grid/FormTest.tsx

@@ -1,6 +1,6 @@
 import "./FormTest.scss";
 
-import { useCallback, useState } from "react";
+import { ReactElement, useCallback, useState } from "react";
 
 import { LuiAlertModal, LuiAlertModalButtons, LuiButton, LuiTextInput } from "@linzjs/lui";
 
@@ -15,7 +15,7 @@ export interface IFormTestRow {
   distance: number | null;
 }
 
-export const FormTest = (props: CellEditorCommon): JSX.Element => {
+export const FormTest = (props: CellEditorCommon): ReactElement => {
   const { value } = useGridPopoverContext<IFormTestRow>();
   const [v1, ...v2] = value.split(" ");
 

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

@@ -2,7 +2,9 @@ import "../../styles/GridTheme.scss";
 import "../../styles/index.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 
+import { expect } from "@storybook/jest";
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import { waitFor } from "@storybook/testing-library";
 import { useMemo, useState } from "react";
 
 import "@linzjs/lui/dist/fonts";
@@ -103,4 +105,9 @@ const GridFilterButtonsTemplate: ComponentStory<typeof Grid> = (props: GridProps
   );
 };
 
-export const FilterButtonsExample = GridFilterButtonsTemplate.bind({});
+export const _FilterButtonsExample = GridFilterButtonsTemplate.bind({});
+_FilterButtonsExample.play = async ({ canvasElement }) => {
+  await waitFor(() => {
+    expect(canvasElement.querySelector(".Grid-ready")).toBeInTheDocument();
+  });
+};

package/src/stories/grid/GridNoRowsOverlay.stories.tsx

@@ -6,7 +6,7 @@ import { within } from "@storybook/testing-library";
 
 import "@linzjs/lui/dist/fonts";
 
-import { GridNoRowsOverlay } from "../../components";
+import { GridNoRowsOverlay, GridNoRowsOverlayProps } from "../../components";
 
 export default {
   title: "Components / Grids / GridNoRowsOverlay",
@@ -14,26 +14,26 @@ export default {
   args: {},
 } as ComponentMeta<typeof GridNoRowsOverlay>;
 
-const GridNoRowsOverlayTemplate: ComponentStory<typeof GridNoRowsOverlay> = (params) => {
+const GridNoRowsOverlayTemplate: ComponentStory<typeof GridNoRowsOverlay> = (params: GridNoRowsOverlayProps) => {
   return <GridNoRowsOverlay {...params} />;
 };
 
-export const GridNoRowsEmpty = GridNoRowsOverlayTemplate.bind({});
-GridNoRowsEmpty.args = {
+export const _GridNoRowsEmpty = GridNoRowsOverlayTemplate.bind({});
+_GridNoRowsEmpty.args = {
   rowCount: 0,
   filteredRowCount: 0,
 };
-GridNoRowsEmpty.play = async ({ canvasElement }) => {
+_GridNoRowsEmpty.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   expect(await canvas.findByText("There are currently no rows")).toBeInTheDocument();
 };
 
-export const GridNoRowsFiltered = GridNoRowsOverlayTemplate.bind({});
-GridNoRowsFiltered.args = {
+export const _GridNoRowsFiltered = GridNoRowsOverlayTemplate.bind({});
+_GridNoRowsFiltered.args = {
   rowCount: 1,
   filteredRowCount: 0,
 };
-GridNoRowsFiltered.play = async ({ canvasElement }) => {
+_GridNoRowsFiltered.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   expect(await canvas.findByText("All rows have been filtered")).toBeInTheDocument();
 };

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

@@ -2,7 +2,9 @@ import "../../styles/GridTheme.scss";
 import "../../styles/index.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 
+import { expect } from "@storybook/jest";
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import { waitFor } from "@storybook/testing-library";
 import { ColDef } from "ag-grid-community";
 import { GridPopoverEditDropDown } from "components/gridPopoverEdit/GridPopoverEditDropDown";
 import { GridPopoverTextArea } from "components/gridPopoverEdit/GridPopoverTextArea";
@@ -176,5 +178,10 @@ const GridNonEditableRowTemplate: ComponentStory<typeof Grid> = (props: GridProp
   );
 };
 
-export const NonEditableRow = GridNonEditableRowTemplate.bind({});
-NonEditableRow.args = { autoSelectFirstRow: true, selectable: true };
+export const _NonEditableRow = GridNonEditableRowTemplate.bind({});
+_NonEditableRow.args = { autoSelectFirstRow: true, selectable: true };
+_NonEditableRow.play = async ({ canvasElement }) => {
+  await waitFor(() => {
+    expect(canvasElement.querySelector(".Grid-ready")).toBeInTheDocument();
+  });
+};

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

@@ -2,7 +2,9 @@ import "../../styles/GridTheme.scss";
 import "../../styles/index.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 
+import { expect } from "@storybook/jest";
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import { waitFor } from "@storybook/testing-library";
 import { ReactElement, useCallback, useContext, useMemo, useState } from "react";
 
 import "@linzjs/lui/dist/fonts";
@@ -134,4 +136,9 @@ const GridPopoutContextMenuTemplate: ComponentStory<typeof Grid> = (props: GridP
   );
 };
 
-export const EditContextMenu = GridPopoutContextMenuTemplate.bind({});
+export const _EditContextMenu = GridPopoutContextMenuTemplate.bind({});
+_EditContextMenu.play = async ({ canvasElement }) => {
+  await waitFor(() => {
+    expect(canvasElement.querySelector(".Grid-ready")).toBeInTheDocument();
+  });
+};

package/src/stories/grid/GridPopoutEditGeneric.stories.tsx

@@ -2,7 +2,9 @@ import "../../styles/GridTheme.scss";
 import "../../styles/index.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 
+import { expect } from "@storybook/jest";
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import { waitFor } from "@storybook/testing-library";
 import { useMemo, useState } from "react";
 
 import "@linzjs/lui/dist/fonts";
@@ -70,4 +72,9 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
   );
 };
 
-export const EditGeneric = GridPopoutEditGenericTemplate.bind({});
+export const _EditGeneric = GridPopoutEditGenericTemplate.bind({});
+_EditGeneric.play = async ({ canvasElement }) => {
+  await waitFor(() => {
+    expect(canvasElement.querySelector(".Grid-ready")).toBeInTheDocument();
+  });
+};

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

@@ -2,7 +2,9 @@ import "../../styles/GridTheme.scss";
 import "../../styles/index.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 
+import { expect } from "@storybook/jest";
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import { waitFor } from "@storybook/testing-library";
 import { useCallback, useContext, useMemo, useState } from "react";
 
 import "@linzjs/lui/dist/fonts";
@@ -225,4 +227,9 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
   );
 };
 
-export const EditGenericTextArea = GridPopoutEditGenericTemplate.bind({});
+export const _EditGenericTextArea = GridPopoutEditGenericTemplate.bind({});
+_EditGenericTextArea.play = async ({ canvasElement }) => {
+  await waitFor(() => {
+    expect(canvasElement.querySelector(".Grid-ready")).toBeInTheDocument();
+  });
+};

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

@@ -2,7 +2,9 @@ import "../../styles/GridTheme.scss";
 import "../../styles/index.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 
+import { expect } from "@storybook/jest";
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import { waitFor } from "@storybook/testing-library";
 import { useMemo, useState } from "react";
 
 import "@linzjs/lui/dist/fonts";
@@ -122,3 +124,8 @@ const GridPopoverEditBearingTemplate: ComponentStory<typeof Grid> = (props: Grid
 };
 
 export const _GridPopoverEditBearing = GridPopoverEditBearingTemplate.bind({});
+_GridPopoverEditBearing.play = async ({ canvasElement }) => {
+  await waitFor(() => {
+    expect(canvasElement.querySelector(".Grid-ready")).toBeInTheDocument();
+  });
+};

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

@@ -2,7 +2,9 @@ import "../../styles/GridTheme.scss";
 import "../../styles/index.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 
+import { expect } from "@storybook/jest";
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import { waitFor } from "@storybook/testing-library";
 import { useCallback, useMemo, useState } from "react";
 
 import "@linzjs/lui/dist/fonts";
@@ -314,3 +316,8 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
 };
 
 export const EditDropdown = GridEditDropDownTemplate.bind({});
+EditDropdown.play = async ({ canvasElement }) => {
+  await waitFor(() => {
+    expect(canvasElement.querySelector(".Grid-ready")).toBeInTheDocument();
+  });
+};

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

@@ -2,7 +2,9 @@ import "../../styles/GridTheme.scss";
 import "../../styles/index.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 
+import { expect } from "@storybook/jest";
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import { waitFor } from "@storybook/testing-library";
 import { isEmpty, partition } from "lodash-es";
 import { useMemo, useState } from "react";
 
@@ -194,3 +196,8 @@ const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridPro
 };
 
 export const EditMultiSelect = GridEditMultiSelectTemplate.bind({});
+EditMultiSelect.play = async ({ canvasElement }) => {
+  await waitFor(() => {
+    expect(canvasElement.querySelector(".Grid-ready")).toBeInTheDocument();
+  });
+};

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

@@ -2,7 +2,9 @@ import "../../styles/GridTheme.scss";
 import "../../styles/index.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 
+import { expect } from "@storybook/jest";
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import { waitFor } from "@storybook/testing-library";
 import { countBy, mergeWith, pull, range, union } from "lodash-es";
 import { useMemo, useState } from "react";
 
@@ -11,6 +13,7 @@ import "@linzjs/lui/dist/fonts";
 import { ColDefT, Grid, GridCell, GridContextProvider, GridProps, GridUpdatingContextProvider } from "../..";
 import { MultiSelectGridOption } from "../../components/gridForm/GridFormMultiSelectGrid";
 import { GridPopoutEditMultiSelectGrid } from "../../components/gridPopoverEdit/GridPopoutEditMultiSelectGrid";
+import { EditMultiSelect } from "./GridPopoverEditMultiSelect.stories";
 
 export default {
   title: "Components / Grids",
@@ -108,3 +111,8 @@ const GridEditMultiSelectGridTemplate: ComponentStory<typeof Grid> = (props: Gri
 };
 
 export const EditMultiSelectGrid = GridEditMultiSelectGridTemplate.bind({});
+EditMultiSelect.play = async ({ canvasElement }) => {
+  await waitFor(() => {
+    expect(canvasElement.querySelector(".Grid-ready")).toBeInTheDocument();
+  });
+};

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

@@ -2,8 +2,10 @@ import "../../styles/GridTheme.scss";
 import "../../styles/index.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 
+import { expect } from "@storybook/jest";
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { useCallback, useMemo, useState } from "react";
+import { waitFor } from "@storybook/testing-library";
+import { ReactElement, useCallback, useMemo, useState } from "react";
 
 import "@linzjs/lui/dist/fonts";
 
@@ -127,6 +129,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
       GridCell({
         headerName: "Custom edit",
         editable: true,
+        flex: 1,
         valueFormatter: () => "Press E",
         cellRendererParams: {
           rightHoverElement: (
@@ -249,7 +252,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
   );
 };
 
-const GridFilterLessThan = (props: { field: keyof ITestRow; text: string }): JSX.Element => {
+const GridFilterLessThan = (props: { field: keyof ITestRow; text: string }): ReactElement => {
   const [value, setValue] = useState<number>();
 
   const filter = useCallback(
@@ -277,3 +280,8 @@ const GridFilterLessThan = (props: { field: keyof ITestRow; text: string }): JSX
 };
 
 export const ReadOnlySingleSelection = GridReadOnlyTemplate.bind({});
+ReadOnlySingleSelection.play = async ({ canvasElement }) => {
+  await waitFor(() => {
+    expect(canvasElement.querySelector(".Grid-ready")).toBeInTheDocument();
+  });
+};

package/src/stories/grid/gridFormInteraction/GridFormDropDownInteraction.stories.tsx

@@ -32,7 +32,7 @@ const onSelectedItem = jest
   .fn<Promise<void>, [GridPopoutEditDropDownSelectedItem<any>]>()
   .mockImplementation(async () => undefined);
 
-const Template: ComponentStory<typeof GridFormDropDown> = (props) => {
+const Template: ComponentStory<typeof GridFormDropDown> = (props: GridFormDropDownProps<any>) => {
   const config: GridFormDropDownProps<any> = {
     filtered: "local",
     onSelectedItem,
@@ -128,7 +128,7 @@ GridFormDropDownInteractions_.play = async ({ canvasElement }) => {
 
   // Test invalid value doesn't save
   updateValue.mockClear();
-  userEvent.clear(textInput);
+  await userEvent.clear(textInput);
   await userEvent.type(textInput, "{Enter}");
   expect(updateValue).not.toHaveBeenCalled();