@linzjs/step-ag-grid 15.1.3 → 17.0.0

package/src/components/gridForm/GridFormPopoverMenu.tsx

@@ -1,5 +1,5 @@
 import { isEmpty } from "lodash-es";
-import { Fragment, useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, ReactElement, useCallback, useEffect, useRef, useState } from "react";
 
 import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
 import { GridSubComponentContext } from "../../contexts/GridSubComponentContext";
@@ -28,11 +28,11 @@ export interface SelectedMenuOptionResult<RowType extends GridBaseRow> extends M
 }
 
 export interface MenuOption<RowType extends GridBaseRow> {
-  label: JSX.Element | string | MenuSeparatorType;
+  label: ReactElement | string | MenuSeparatorType;
   action?: (props: { selectedRows: RowType[]; menuOption: SelectedMenuOptionResult<RowType> }) => Promise<void>;
   disabled?: string | boolean;
   hidden?: boolean;
-  subComponent?: (props: any) => JSX.Element;
+  subComponent?: (props: any) => ReactElement;
 }
 
 /**
@@ -141,7 +141,7 @@ export const GridFormPopoverMenu = <RowType extends GridBaseRow>(props: GridForm
                     disabled={!!item.disabled}
                     title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
                   >
-                    {item.label as JSX.Element | string}
+                    {item.label as ReactElement | string}
                   </MenuItem>
                   {item.subComponent && subComponentSelected === item && (
                     <FocusableItem className={"LuiDeprecatedForms"} key={`${item.label}_subcomponent`}>

package/src/components/gridForm/GridFormSubComponentTextArea.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { useCallback, useContext, useEffect } from "react";
+import { ReactElement, useCallback, useContext, useEffect } from "react";
 
 import { GridSubComponentContext } from "../../contexts/GridSubComponentContext";
 import { TextAreaInput } from "../../lui/TextAreaInput";
@@ -19,7 +19,7 @@ export interface GridSubComponentTextAreaProps<RowType extends GridBaseRow>
 
 export const GridFormSubComponentTextArea = <RowType extends GridBaseRow>(
   props: GridSubComponentTextAreaProps<RowType>,
-): JSX.Element => {
+): ReactElement => {
   const { value, data, setValue, setValid, context } = useContext(GridSubComponentContext);
 
   const helpText = props.helpText ?? "Press tab to save";

package/src/components/gridForm/GridFormSubComponentTextInput.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useContext, useEffect } from "react";
+import { ReactElement, useCallback, useContext, useEffect } from "react";
 
 import { GridSubComponentContext } from "../../contexts/GridSubComponentContext";
 import { TextInputFormatted } from "../../lui/TextInputFormatted";
@@ -17,7 +17,7 @@ export interface GridFormSubComponentTextInputProps<RowType extends GridBaseRow>
 
 export const GridFormSubComponentTextInput = <RowType extends GridBaseRow>(
   props: GridFormSubComponentTextInputProps<RowType>,
-): JSX.Element => {
+): ReactElement => {
   const { value, setValue, setValid, data, context } = useContext(GridSubComponentContext);
 
   const helpText = props.helpText ?? "Press enter or tab to save";

package/src/components/gridForm/GridFormTextArea.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from "react";
+import { ReactElement, useCallback, useMemo, useState } from "react";
 
 import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
 import { TextAreaInput } from "../../lui/TextAreaInput";
@@ -16,7 +16,7 @@ export interface GridFormTextAreaProps<RowType extends GridBaseRow>
   helpText?: string;
 }
 
-export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormTextAreaProps<RowType>): JSX.Element => {
+export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormTextAreaProps<RowType>): ReactElement => {
   const { field, value: initialVale, data } = useGridPopoverContext<RowType>();
 
   const initValue = useMemo(() => (initialVale == null ? "" : `${initialVale}`), [initialVale]);

package/src/components/gridPopoverEdit/GridPopoverMessage.ts

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

package/src/components/gridRender/GridRenderGenericCell.tsx

@@ -5,6 +5,7 @@ import {
   ValueFormatterParams,
   ValueGetterParams,
 } from "ag-grid-community/dist/lib/entities/colDef";
+import { ReactElement } from "react";
 
 import { GridBaseRow } from "../Grid";
 import { ColDefT } from "../GridCell";
@@ -40,7 +41,7 @@ export interface GenericCellColDef<RowType extends GridBaseRow> extends ColDefT<
 
 export interface GenericCellRendererParams<RowType extends GridBaseRow> {
   singleClickEdit?: boolean;
-  rightHoverElement?: JSX.Element | undefined;
+  rightHoverElement?: ReactElement | undefined;
   editAction?: (selectedRows: RowType[]) => void;
   shortcutKeys?: Record<string, ((params: SuppressKeyboardEventParams) => boolean | void) | undefined>;
   warning?: (props: RowICellRendererParams<RowType>) => string | string[] | boolean | null | undefined;

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;
@@ -36,7 +36,7 @@ export interface GridContextType<RowType extends GridBaseRow> {
   selectRowsByIdWithFlash: (rowIds?: number[]) => void;
   flashRows: (rowIds?: number[]) => void;
   flashRowsDiff: (updateFn: () => Promise<any>) => Promise<void>;
-  focusByRowById: (rowId: number) => void;
+  focusByRowById: (rowId: number, ifNoCellFocused?: boolean) => void;
   ensureRowVisible: (id: number | string) => boolean;
   ensureSelectedRowIsVisible: () => void;
   getFirstRowId: () => number;
@@ -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[],
@@ -218,10 +213,19 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
    */
   const _selectRowsWithOptionalFlash = useCallback(
     (
-      rowIds: number[] | undefined,
-      select: boolean,
-      flash: boolean,
-      retryCount = 15, // We retry for approximately 5x200ms=1s
+      {
+        rowIds,
+        select,
+        flash,
+        ifNoCellFocused = false,
+        retryCount = 15,
+      }: {
+        rowIds: number[] | undefined;
+        select: boolean;
+        flash: boolean;
+        ifNoCellFocused?: boolean;
+        retryCount?: number;
+      }, // We retry for approximately 5x200ms=1s
     ) => {
       return gridApiOp((gridApi) => {
         const rowNodes = rowIds ? _rowIdsToNodes(rowIds) : _getNewNodes();
@@ -230,7 +234,17 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
         const gridHasNotUpdated = gridRowIdsNotUpdatedYet || gridRowIdsNotChangedYet;
         // 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, retryCount - 1), 250);
+          delay(
+            () =>
+              _selectRowsWithOptionalFlash({
+                rowIds,
+                select,
+                flash,
+                ifNoCellFocused,
+                retryCount: retryCount - 1,
+              }),
+            250,
+          );
           return;
         }
 
@@ -249,7 +263,13 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
               const colId = col.colId;
               // We need to make sure we aren't currently editing a cell otherwise tests will fail
               // as they will start to edit the cell before this stuff has a chance to run
-              colId && defer(() => isEmpty(gridApi.getEditingCells()) && gridApi.setFocusedCell(rowIndex, colId));
+              colId &&
+                delay(() => {
+                  if (isEmpty(gridApi.getEditingCells()) && (!ifNoCellFocused || gridApi.getFocusedCell() == null)) {
+                    // ifNoCellFocused
+                    gridApi.setFocusedCell(rowIndex, colId);
+                  }
+                }, 100);
             }
           }
         }
@@ -278,17 +298,17 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
   );
 
   const selectRowsById = useCallback(
-    (rowIds?: number[]) => _selectRowsWithOptionalFlash(rowIds, true, false),
+    (rowIds?: number[]) => _selectRowsWithOptionalFlash({ rowIds, select: true, flash: false }),
     [_selectRowsWithOptionalFlash],
   );
 
   const selectRowsByIdWithFlash = useCallback(
-    (rowIds?: number[]) => _selectRowsWithOptionalFlash(rowIds, true, true),
+    (rowIds?: number[]) => _selectRowsWithOptionalFlash({ rowIds, select: true, flash: true }),
     [_selectRowsWithOptionalFlash],
   );
 
   const flashRows = useCallback(
-    (rowIds?: number[]) => _selectRowsWithOptionalFlash(rowIds, false, true),
+    (rowIds?: number[]) => _selectRowsWithOptionalFlash({ rowIds, select: false, flash: true }),
     [_selectRowsWithOptionalFlash],
   );
 
@@ -296,7 +316,7 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
     async (fn: () => Promise<any>) => {
       beforeUpdate();
       await fn();
-      _selectRowsWithOptionalFlash(undefined, true, false);
+      _selectRowsWithOptionalFlash({ rowIds: undefined, select: true, flash: false });
     },
     [_selectRowsWithOptionalFlash, beforeUpdate],
   );
@@ -305,7 +325,7 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
     async (fn: () => Promise<any>) => {
       beforeUpdate();
       await fn();
-      _selectRowsWithOptionalFlash(undefined, true, true);
+      _selectRowsWithOptionalFlash({ rowIds: undefined, select: true, flash: true });
     },
     [_selectRowsWithOptionalFlash, beforeUpdate],
   );
@@ -314,13 +334,14 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
     async (fn: () => Promise<any>) => {
       beforeUpdate();
       await fn();
-      _selectRowsWithOptionalFlash(undefined, false, true);
+      _selectRowsWithOptionalFlash({ rowIds: undefined, select: false, flash: true });
     },
     [_selectRowsWithOptionalFlash, beforeUpdate],
   );
 
   const focusByRowById = useCallback(
-    (rowId: number) => _selectRowsWithOptionalFlash([rowId], false, false),
+    (rowId: number, ifNoCellFocused?: boolean) =>
+      _selectRowsWithOptionalFlash({ rowIds: [rowId], select: false, flash: false, ifNoCellFocused }),
     [_selectRowsWithOptionalFlash],
   );
 
@@ -375,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),
@@ -396,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 => {
@@ -565,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],
@@ -604,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,11 +1,12 @@
+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";
 import { IconName } from "@linzjs/lui/dist/components/LuiIcon/LuiIcon";
 
-import "./ActionButton.scss";
 import { usePrevious } from "./reactUtils";
 import { useStateDeferred } from "./stateDeferredHook";
 
@@ -42,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

@@ -1,9 +1,10 @@
+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";
-import "./TextInputFormatted.scss";
 
 export interface LuiTextInputProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
   // overrides value in base class to be string type only
@@ -11,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,6 +1,7 @@
 import { screen } from "@testing-library/dom";
-import { act, render } from "@testing-library/react";
-import { useEffect, useState } from "react";
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { ReactElement, useEffect, useState } from "react";
 
 import { usePrevious } from "./reactUtils";
 
@@ -10,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;
@@ -19,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);
@@ -39,10 +40,10 @@ describe("usePrevious", () => {
 
     expect(extPrevious).toBeUndefined();
 
-    act(() => button.click());
+    await userEvent.click(button);
     expect(extPrevious).toBe(false);
 
-    act(() => button.click());
+    await userEvent.click(button);
     expect(extPrevious).toBe(true);
   });
 });

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/components/ActionButton.stories.tsx

@@ -1,8 +1,9 @@
+import "@linzjs/lui/dist/scss/base.scss";
+
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
 import { useCallback } from "react";
 
 import "@linzjs/lui/dist/fonts";
-import "@linzjs/lui/dist/scss/base.scss";
 
 import { ActionButton } from "../../lui/ActionButton";
 import { wait } from "../../utils/util";

package/src/stories/grid/FormTest.tsx

@@ -1,9 +1,10 @@
-import { useCallback, useState } from "react";
+import "./FormTest.scss";
+
+import { ReactElement, useCallback, useState } from "react";
 
 import { LuiAlertModal, LuiAlertModalButtons, LuiButton, LuiTextInput } from "@linzjs/lui";
 
 import { CellEditorCommon, FormError, useGridPopoverContext, useGridPopoverHook, wait } from "../..";
-import "./FormTest.scss";
 
 export interface IFormTestRow {
   id: number;
@@ -14,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

@@ -1,8 +1,13 @@
+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";
-import "@linzjs/lui/dist/scss/base.scss";
 
 import {
   ColDefT,
@@ -16,26 +21,13 @@ import {
   GridUpdatingContextProvider,
   GridWrapper,
 } from "../..";
-import "../../styles/GridTheme.scss";
-import "../../styles/index.scss";
 
 export default {
   title: "Components / Grids",
   component: Grid,
   decorators: [
     (Story) => (
-      <div
-        style={{
-          border: "1px solid #eee",
-          display: "flex",
-          flexDirection: "column",
-          height: "100%",
-          maxHeight: 500,
-          maxWidth: "100%",
-          minWidth: "480px",
-          padding: "1em",
-        }}
-      >
+      <div style={{ width: 1024, height: 400, display: "flex" }}>
         <GridUpdatingContextProvider>
           <GridContextProvider>
             <Story />
@@ -113,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();
+  });
+};