@linzjs/step-ag-grid 23.0.1 → 25.0.0

package/dist/src/react-menu3/index.d.ts

@@ -1,11 +1,11 @@
-export { useMenuState } from "./hooks";
-export { MenuButton } from "./components/MenuButton";
-export { Menu } from "./components/Menu";
-export { ControlledMenu } from "./components/ControlledMenu";
-export { SubMenu } from "./components/SubMenu";
-export { MenuItem } from "./components/MenuItem";
-export { FocusableItem } from "./components/FocusableItem";
-export { MenuDivider } from "./components/MenuDivider";
-export { MenuHeader } from "./components/MenuHeader";
-export { MenuGroup } from "./components/MenuGroup";
-export { MenuRadioGroup } from "./components/MenuRadioGroup";
+export { ControlledMenu } from './components/ControlledMenu';
+export { FocusableItem } from './components/FocusableItem';
+export { Menu } from './components/Menu';
+export { MenuButton } from './components/MenuButton';
+export { MenuDivider } from './components/MenuDivider';
+export { MenuGroup } from './components/MenuGroup';
+export { MenuHeader } from './components/MenuHeader';
+export { MenuItem } from './components/MenuItem';
+export { MenuRadioGroup } from './components/MenuRadioGroup';
+export { SubMenu } from './components/SubMenu';
+export { useMenuState } from './hooks';

package/dist/src/react-menu3/positionUtils/getPositionHelpers.d.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject } from "react";
+import { MutableRefObject } from 'react';
 export declare const getPositionHelpers: (containerRef: MutableRefObject<HTMLElement | undefined>, menuRef: MutableRefObject<HTMLElement>, menuScroll: Window | Element, boundingBoxPadding: string | undefined) => {
     menuRect: DOMRect;
     containerRect: DOMRect;

package/dist/src/react-menu3/positionUtils/index.d.ts

@@ -1,3 +1,3 @@
-export { getPositionHelpers } from "./getPositionHelpers";
-export { positionContextMenu } from "./positionContextMenu";
-export { positionMenu } from "./positionMenu";
+export { getPositionHelpers } from './getPositionHelpers';
+export { positionContextMenu } from './positionContextMenu';
+export { positionMenu } from './positionMenu';

package/dist/src/react-menu3/positionUtils/placeArrowHorizontal.d.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject } from "react";
+import { MutableRefObject } from 'react';
 export declare const placeArrowHorizontal: (p: {
     arrowRef: MutableRefObject<HTMLElement | null>;
     menuX: number;

package/dist/src/react-menu3/positionUtils/placeArrowVertical.d.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject } from "react";
+import { MutableRefObject } from 'react';
 export declare const placeArrowVertical: (p: {
     arrowRef: MutableRefObject<HTMLElement | null>;
     menuY: number;

package/dist/src/react-menu3/positionUtils/placeLeftorRight.d.ts

@@ -1,6 +1,6 @@
-import { MutableRefObject } from "react";
-import { MenuDirection } from "../types";
-import { getPositionHelpers } from "./getPositionHelpers";
+import { MutableRefObject } from 'react';
+import { MenuDirection } from '../types';
+import { getPositionHelpers } from './getPositionHelpers';
 export interface placeLeftorRightParams {
     anchorRect: DOMRect;
     placeLeftorRightY: number;
@@ -9,7 +9,7 @@ export interface placeLeftorRightParams {
     arrowRef: MutableRefObject<HTMLElement | null>;
     arrow?: boolean;
     direction: MenuDirection;
-    position: "auto" | "anchor" | "initial";
+    position: 'auto' | 'anchor' | 'initial';
 }
 export declare const placeLeftorRight: (props: ReturnType<typeof getPositionHelpers> & placeLeftorRightParams) => {
     arrowY: number | undefined;

package/dist/src/react-menu3/positionUtils/placeToporBottom.d.ts

@@ -1,6 +1,6 @@
-import { MutableRefObject } from "react";
-import { MenuDirection } from "../types";
-import { getPositionHelpers } from "./getPositionHelpers";
+import { MutableRefObject } from 'react';
+import { MenuDirection } from '../types';
+import { getPositionHelpers } from './getPositionHelpers';
 export interface placeToporBottomParams {
     anchorRect: DOMRect;
     placeToporBottomX: number;
@@ -8,8 +8,8 @@ export interface placeToporBottomParams {
     placeBottomY: number;
     arrowRef: MutableRefObject<HTMLElement | null>;
     arrow?: boolean;
-    direction: "left" | "right" | "top" | "bottom";
-    position: "auto" | "anchor" | "initial";
+    direction: 'left' | 'right' | 'top' | 'bottom';
+    position: 'auto' | 'anchor' | 'initial';
 }
 export declare const placeToporBottom: (props: ReturnType<typeof getPositionHelpers> & placeToporBottomParams) => {
     arrowX?: number | undefined;

package/dist/src/react-menu3/positionUtils/positionContextMenu.d.ts

@@ -1,5 +1,5 @@
-import { MenuDirection } from "../types";
-import { getPositionHelpers } from "./getPositionHelpers";
+import { MenuDirection } from '../types';
+import { getPositionHelpers } from './getPositionHelpers';
 export declare const positionContextMenu: ({ positionHelpers, anchorPoint, }: {
     positionHelpers: ReturnType<typeof getPositionHelpers>;
     anchorPoint: {

package/dist/src/react-menu3/positionUtils/positionMenu.d.ts

@@ -1,6 +1,6 @@
-import { MutableRefObject } from "react";
-import { MenuDirection } from "../types";
-import { getPositionHelpers } from "./getPositionHelpers";
+import { MutableRefObject } from 'react';
+import { MenuDirection } from '../types';
+import { getPositionHelpers } from './getPositionHelpers';
 interface positionMenuProps {
     offsetX: number;
     offsetY: number;
@@ -8,8 +8,8 @@ interface positionMenuProps {
     anchorRef: MutableRefObject<Element | null>;
     arrow?: boolean;
     direction: MenuDirection;
-    position: "auto" | "anchor" | "initial";
-    align: "start" | "center" | "end";
+    position: 'auto' | 'anchor' | 'initial';
+    align: 'start' | 'center' | 'end';
     positionHelpers: ReturnType<typeof getPositionHelpers>;
 }
 export declare const positionMenu: (props: positionMenuProps) => {

package/dist/src/react-menu3/style-utils/index.d.ts

@@ -8,4 +8,4 @@ declare const radioGroupSelector: {};
 declare const submenuSelector: {};
 declare const menuContainerSelector: {};
 declare const menuButtonSelector: {};
-export { menuContainerSelector, menuButtonSelector, menuSelector, menuArrowSelector, menuItemSelector, menuDividerSelector, menuHeaderSelector, menuGroupSelector, radioGroupSelector, submenuSelector, };
+export { menuArrowSelector, menuButtonSelector, menuContainerSelector, menuDividerSelector, menuGroupSelector, menuHeaderSelector, menuItemSelector, menuSelector, radioGroupSelector, submenuSelector, };

package/dist/src/react-menu3/types.d.ts

@@ -1,29 +1,29 @@
-import { ForwardedRef, MutableRefObject } from "react";
-export type MenuState = "opening" | "open" | "closing" | "closed";
-export type MenuAlign = "start" | "center" | "end";
-export type MenuDirection = "left" | "right" | "top" | "bottom";
-export type MenuPosition = "auto" | "anchor" | "initial";
-export type MenuOverflow = "auto" | "visible" | "hidden";
-export type MenuReposition = "auto" | "initial";
-export type MenuViewScroll = "auto" | "close" | "initial";
-export type MenuItemTypeProp = "checkbox" | "radio";
-export type CloseReason = "click" | "cancel" | "blur" | "scroll";
+import { ForwardedRef, MutableRefObject } from 'react';
+export type MenuState = 'opening' | 'open' | 'closing' | 'closed';
+export type MenuAlign = 'start' | 'center' | 'end';
+export type MenuDirection = 'left' | 'right' | 'top' | 'bottom';
+export type MenuPosition = 'auto' | 'anchor' | 'initial';
+export type MenuOverflow = 'auto' | 'visible' | 'hidden';
+export type MenuReposition = 'auto' | 'initial';
+export type MenuViewScroll = 'auto' | 'close' | 'initial';
+export type MenuItemTypeProp = 'checkbox' | 'radio';
+export type CloseReason = 'click' | 'cancel' | 'blur' | 'scroll';
 /**
  * - `'first'` focus the first item in the menu.
  * - `'last'` focus the last item in the menu.
  * - `number` focus item at the specific position (zero-based).
  */
-export type FocusPosition = "first" | "last" | number;
+export type FocusPosition = 'first' | 'last' | number;
 export type ClassNameProp<M = undefined> = string | ((modifiers: M) => string);
 export type RenderProp<M, R = React.ReactNode> = R | ((modifiers: M) => R);
-export interface BaseProps<M = undefined> extends Omit<React.HTMLAttributes<HTMLElement>, "className" | "children"> {
+export interface BaseProps<M = undefined> extends Omit<React.HTMLAttributes<HTMLElement>, 'className' | 'children'> {
     ref?: React.Ref<any>;
     /**
      * Can be a string or a function which receives a modifier object and returns a CSS `class` string.
      */
     className?: ClassNameProp<M>;
 }
-export interface BasePropsWithChildren<M = undefined> extends Omit<React.HTMLAttributes<HTMLElement>, "className"> {
+export interface BasePropsWithChildren<M = undefined> extends Omit<React.HTMLAttributes<HTMLElement>, 'className'> {
     ref?: React.Ref<any>;
     /**
      * Can be a string or a function which receives a modifier object and returns a CSS `class` string.
@@ -131,7 +131,7 @@ export interface Hoverable {
 /**
  * Common props for `Menu`, `SubMenu` and `ControlledMenu`
  */
-interface BaseMenuProps extends Omit<BaseProps, "style"> {
+interface BaseMenuProps extends Omit<BaseProps, 'style'> {
     /**
      * Can be a string or a function which receives a modifier object and returns a CSS `class` string.
      */
@@ -272,7 +272,7 @@ export interface RootMenuProps extends BaseMenuProps, MenuStateOptions {
     /**
      * Properties of this object are spread to the root DOM element containing the menu.
      */
-    containerProps?: Omit<React.HTMLAttributes<HTMLElement>, "className">;
+    containerProps?: Omit<React.HTMLAttributes<HTMLElement>, 'className'>;
     /**
      * A ref object attached to a DOM element within which menu will be positioned.
      * If not provided, the nearest ancestor which has CSS `overflow` set to a value

package/dist/src/react-menu3/utils/constants.d.ts

@@ -1,4 +1,4 @@
-import { MenuState } from "../types";
+import { MenuState } from '../types';
 export declare const menuContainerClass = "szh-menu-container";
 export declare const menuClass = "szh-menu";
 export declare const menuButtonClass = "szh-menu-button";

package/dist/src/react-menu3/utils/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./constants";
-export * from "./utils";
-export { withHovering } from "./withHovering";
+export * from './constants';
+export * from './utils';
+export { withHovering } from './withHovering';

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

@@ -1,6 +1,6 @@
-import { unstable_batchedUpdates } from "react-dom";
-import { MenuButtonProps } from "../components/MenuButton";
-import { MenuState, MenuStateOptions } from "../types";
+import { unstable_batchedUpdates } from 'react-dom';
+import { MenuButtonProps } from '../components/MenuButton';
+import { MenuState, MenuStateOptions } from '../types';
 export declare const isMenuOpen: (state?: MenuState) => boolean;
 export declare const batchedUpdates: typeof unstable_batchedUpdates;
 export declare const values: {
@@ -18,7 +18,7 @@ export type TransitionMap = {
 export declare const getTransition: (transition: MenuStateOptions["transition"], name: keyof TransitionMap) => boolean;
 export declare function safeCall<T, R>(fn: (arg?: T) => R, arg?: T): R;
 export declare function safeCall<T, R>(fn: T, arg: R): T;
-export declare const getName: (component: Record<string, any | undefined>) => any;
+export declare const getName: (component: Record<string, any>) => any;
 export declare const defineName: (name: string, component: React.ForwardRefExoticComponent<React.PropsWithoutRef<MenuButtonProps> & React.RefAttributes<unknown>>) => import("react").ForwardRefExoticComponent<Omit<MenuButtonProps, "ref"> & import("react").RefAttributes<unknown>>;
 export declare const mergeProps: (target: any, source: any) => any;
 export declare const parsePadding: (paddingStr: string | undefined) => {
@@ -29,7 +29,7 @@ export declare const parsePadding: (paddingStr: string | undefined) => {
 };
 export declare const getScrollAncestor: (node: Node | null) => Element | null;
 export declare function commonProps(isDisabled?: boolean, isHovering?: boolean): {
-    "aria-disabled": true | undefined;
+    'aria-disabled': true | undefined;
     tabIndex: number;
 };
 export declare const indexOfNode: (nodeList: NodeListOf<Node>, node: Node) => number;

package/dist/src/react-menu3/utils/withHovering.d.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject, PropsWithRef, ReactElement } from "react";
+import { MutableRefObject, PropsWithRef, ReactElement } from 'react';
 export interface withHoveringResultProps {
     isHovering?: boolean;
     externalRef?: MutableRefObject<any>;

package/{src/utils → dist/src/utils/__tests__}/storybookTestUtil.ts

@@ -1,4 +1,4 @@
-import { expect, waitFor } from "@storybook/test";
+import { expect, waitFor } from '@storybook/test';
 
 export const waitForGridReady = ({ canvasElement }: { canvasElement: HTMLElement }) =>
-  waitFor(() => expect(canvasElement.querySelector(".Grid-ready")).toBeInTheDocument(), { timeout: 5000 });
+  waitFor(() => expect(canvasElement.querySelector('.Grid-ready')).toBeInTheDocument(), { timeout: 5000 });

package/{src/utils → dist/src/utils/__tests__}/testQuick.ts

@@ -5,9 +5,9 @@
  * @param container Optional container
  * @return HTMLElement array
  */
-import { IconName } from "@linzjs/lui/dist/components/LuiIcon/LuiIcon";
+import { IconName } from '@linzjs/lui/dist/components/LuiIcon/LuiIcon';
 
-import { wait } from "./util";
+import { wait } from '../util';
 
 const queryAllBySelector = <T extends HTMLElement>(selector: string, container: HTMLElement = document.body): T[] =>
   Array.from(container.querySelectorAll<T>(selector));
@@ -17,7 +17,8 @@ const queryAllBySelector = <T extends HTMLElement>(selector: string, container:
  */
 export interface IQueryQuick {
   testId?: string;
-  tagName?: "button" | "span" | "div" | "input" | "textarea" | any;
+  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+  tagName?: 'button' | 'span' | 'div' | 'input' | 'textarea' | any;
   text?: string | RegExp;
   icon?: IconName;
   ariaLabel?: string;
@@ -26,11 +27,11 @@ export interface IQueryQuick {
   child?: IQueryQuick;
 }
 
-const escapeSelectorParam = (param: string): string => param.replace(/["\\]/g, "\\$&");
+const escapeSelectorParam = (param: string): string => param.replace(/["\\]/g, '\\$&');
 
 export const getMatcher = (matcherText: string | RegExp) => {
   const textMatcher =
-    typeof matcherText === "string"
+    typeof matcherText === 'string'
       ? (text?: string) => text != null && text.toLowerCase() === matcherText.toLowerCase()
       : (text?: string) => text != null && matcherText.test(text);
   return (e: HTMLElement) => textMatcher(e.innerHTML?.trim()) || textMatcher(e.innerText?.trim());
@@ -46,7 +47,7 @@ const quickSelector = <T extends HTMLElement>(
   props: IQueryQuick,
   container?: HTMLElement,
 ): { selector: string; els: T[] } => {
-  let selector = "";
+  let selector = '';
   let lastIQueryQuick = props;
   for (let loop: IQueryQuick | undefined = props; loop; loop = loop.child) {
     lastIQueryQuick = loop;
@@ -56,11 +57,11 @@ const quickSelector = <T extends HTMLElement>(
     loop.testId && (selector += `[data-testid="${escapeSelectorParam(loop.testId)}"]`);
     loop.icon && (selector += `[data-icon='${loop.icon}']`);
     loop.classes && (selector += loop.classes);
-    selector += " ";
+    selector += ' ';
   }
 
-  if (selector.trim() == "") {
-    throw "get/query/findQuick needs at least one defined parameter";
+  if (selector.trim() == '') {
+    throw 'get/query/findQuick needs at least one defined parameter';
   }
 
   let els = queryAllBySelector<T>(selector, container);
@@ -73,10 +74,10 @@ const quickSelector = <T extends HTMLElement>(
   return {
     selector: [
       selector,
-      typeof lastIQueryQuick.text == "string" ? JSON.stringify(lastIQueryQuick.text) : lastIQueryQuick.text,
+      typeof lastIQueryQuick.text === 'string' ? JSON.stringify(lastIQueryQuick.text) : lastIQueryQuick.text,
     ]
       .filter((r) => r)
-      .join(" "),
+      .join(' '),
     els,
   };
 };
@@ -91,9 +92,9 @@ const quickSelector = <T extends HTMLElement>(
 export const queryQuick = <T extends HTMLElement>(filter: IQueryQuick, container?: HTMLElement): T | null => {
   const { els, selector } = quickSelector<T>(filter, container);
   if (els.length > 1) {
-    throw `Found multiple(${els.length}) elements by selector ${selector}\n${els.map(
-      (el, index) => `${index}: ${el.parentElement?.innerHTML}\n\n`,
-    )}`;
+    throw `Found multiple(${els.length}) elements by selector ${selector}\n${els
+      .map((el, index) => `${index}: ${el.parentElement?.innerHTML}\n\n`)
+      .join()}`;
   }
   return els[0] ?? null;
 };

package/{src/utils → dist/src/utils/__tests__}/testUtil.ts

@@ -1,8 +1,8 @@
-import { act, waitFor, within } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { isEqual } from "lodash-es";
+import { act, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { isEqual } from 'lodash-es';
 
-import { IQueryQuick, findQuick, getAllQuick, getMatcher, getQuick, queryQuick } from "./testQuick";
+import { findQuick, getAllQuick, getMatcher, getQuick, IQueryQuick, queryQuick } from './testQuick';
 
 let user = userEvent;
 /**
@@ -10,16 +10,17 @@ let user = userEvent;
  * @param customisedUserEvent
  */
 export const setUpUserEvent = (customisedUserEvent: any) => {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   user = customisedUserEvent;
 };
 
-export const countRows = async (within?: HTMLElement): Promise<number> => {
+export const countRows = (within?: HTMLElement): 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);
+  await waitFor(() => {
+    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;
@@ -28,7 +29,6 @@ export const findRowByIndex = async (rowIndex: number | string, within?: HTMLEle
       { tagName: `.ag-center-cols-container div[row-index='${rowIndex}']:not(:empty)` },
       within,
     );
-    // @ts-ignore
     let combineChildren = [...Array.from(row.children)];
 
     const leftCols = queryQuick<HTMLDivElement>(
@@ -36,7 +36,6 @@ export const findRowByIndex = async (rowIndex: number | string, within?: HTMLEle
       within,
     );
     if (leftCols) {
-      // @ts-ignore
       combineChildren = [...Array.from(leftCols.children), ...combineChildren];
     }
 
@@ -45,7 +44,6 @@ export const findRowByIndex = async (rowIndex: number | string, within?: HTMLEle
       within,
     );
     if (rightCols) {
-      // @ts-ignore
       combineChildren = [...Array.from(rightCols.children), ...combineChildren];
     }
 
@@ -55,8 +53,8 @@ export const findRowByIndex = async (rowIndex: number | string, within?: HTMLEle
 };
 
 export const findRow = async (rowId: number | string, within?: HTMLElement): Promise<HTMLDivElement> => {
-  await waitFor(async () => {
-    expect(getAllQuick({ classes: ".ag-row" }).length > 0).toBe(true);
+  await waitFor(() => {
+    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;
@@ -65,7 +63,6 @@ export const findRow = async (rowId: number | string, within?: HTMLElement): Pro
       { tagName: `.ag-center-cols-container div[row-id='${rowId}']:not(:empty)` },
       within,
     );
-    // @ts-ignore
     let combineChildren = [...Array.from(row.children)];
 
     const leftCols = queryQuick<HTMLDivElement>(
@@ -73,7 +70,6 @@ export const findRow = async (rowId: number | string, within?: HTMLElement): Pro
       within,
     );
     if (leftCols) {
-      // @ts-ignore
       combineChildren = [...Array.from(leftCols.children), ...combineChildren];
     }
 
@@ -82,7 +78,6 @@ export const findRow = async (rowId: number | string, within?: HTMLElement): Pro
       within,
     );
     if (rightCols) {
-      // @ts-ignore
       combineChildren = [...Array.from(rightCols.children), ...combineChildren];
     }
 
@@ -91,33 +86,33 @@ export const findRow = async (rowId: number | string, within?: HTMLElement): Pro
   return row;
 };
 
-export const queryRow = async (rowId: number | string, within?: HTMLElement): Promise<HTMLDivElement | null> => {
+export const queryRow = (rowId: number | string, within?: HTMLElement): HTMLDivElement | null => {
   return queryQuick<HTMLDivElement>({ tagName: `div[row-id='${rowId}']:not(:empty)` }, within);
 };
 
 const _selectRow = async (
-  select: "select" | "deselect" | "toggle",
+  select: 'select' | 'deselect' | 'toggle',
   rowId: string | number,
   within?: HTMLElement,
 ): Promise<void> => {
   const row = await findRow(rowId, within);
-  const isSelected = row.className.includes("ag-row-selected");
-  if (select === "toggle" || (select === "select" && !isSelected) || (select === "deselect" && isSelected)) {
-    const cell = await findCell(rowId, "selection", within);
+  const isSelected = row.className.includes('ag-row-selected');
+  if (select === 'toggle' || (select === 'select' && !isSelected) || (select === 'deselect' && isSelected)) {
+    const cell = await findCell(rowId, 'selection', within);
     await user.click(cell);
     await waitFor(async () => {
       const row = await findRow(rowId, within);
-      const nowSelected = row.className.includes("ag-row-selected");
+      const nowSelected = row.className.includes('ag-row-selected');
       if (nowSelected === isSelected) throw `Row ${rowId} won't select`;
     });
   }
 };
 
 export const selectRow = async (rowId: string | number, within?: HTMLElement): Promise<void> =>
-  _selectRow("select", rowId, within);
+  _selectRow('select', rowId, within);
 
 export const deselectRow = async (rowId: string | number, within?: HTMLElement): Promise<void> =>
-  _selectRow("deselect", rowId, within);
+  _selectRow('deselect', rowId, within);
 
 export const findCell = async (rowId: number | string, colId: string, within?: HTMLElement): Promise<HTMLElement> => {
   const row = await findRow(rowId, within);
@@ -157,14 +152,14 @@ export const editCell = async (rowId: number | string, colId: string, within?: H
 
 export const isCellReadOnly = async (rowId: number | string, colId: string, within?: HTMLElement): Promise<boolean> => {
   const cell = await findCell(rowId, colId, within);
-  return cell.className.includes("GridCell-readonly");
+  return cell.className.includes('GridCell-readonly');
 };
 
-export const findOpenPopover = () => 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();
-  const els = await within(openMenu).findAllByRole("menuitem");
+  const els = await within(openMenu).findAllByRole('menuitem');
   const matcher = getMatcher(menuOptionText);
   const result = els.find(matcher);
   return result ?? null;
@@ -190,7 +185,7 @@ export const validateMenuOptions = async (
 ): Promise<boolean> => {
   await editCell(rowId, colId);
   const openMenu = await findOpenPopover();
-  const actualOptions = (await within(openMenu).findAllByRole("menuitem")).map((menuItem) => menuItem.textContent);
+  const actualOptions = (await within(openMenu).findAllByRole('menuitem')).map((menuItem) => menuItem.textContent);
   return isEqual(actualOptions, expectedMenuOptions);
 };
 
@@ -221,7 +216,7 @@ export const openAndFindMenuOption = async (
 
 export const getMultiSelectOptions = async () => {
   const openMenu = await findOpenPopover();
-  return getAllQuick<HTMLInputElement>({ role: "menuitem", child: { tagName: "input,textarea" } }, openMenu).map(
+  return getAllQuick<HTMLInputElement>({ role: 'menuitem', child: { tagName: 'input,textarea' } }, openMenu).map(
     (input) => {
       return {
         v: input.value,
@@ -233,7 +228,7 @@ export const getMultiSelectOptions = async () => {
 
 export const findMultiSelectOption = async (value: string): Promise<HTMLElement> => {
   const openMenu = await findOpenPopover();
-  return getQuick({ role: "menuitem", child: { tagName: `input[value='${value}']` } }, openMenu);
+  return getQuick({ role: 'menuitem', child: { tagName: `input[value='${value}']` } }, openMenu);
 };
 
 export const clickMultiSelectOption = async (value: string): Promise<void> => {
@@ -255,14 +250,14 @@ export const typeOnlyInput = async (value: string): Promise<void> =>
   typeInput(value, { child: { tagName: "input[type='text'], textarea" } });
 
 export const typeInputByLabel = async (value: string, labelText: string): Promise<void> => {
-  const labels = getAllQuick({ child: { tagName: "label" } }).filter((l) => l.textContent === labelText);
+  const labels = getAllQuick({ child: { tagName: 'label' } }).filter((l) => l.textContent === labelText);
   if (labels.length === 0) {
     throw Error(`Label not found for text: ${labelText}`);
   }
   if (labels.length > 1) {
     throw Error(`Multiple labels found for text: ${labelText}`);
   }
-  const inputId = labels[0].getAttribute("for");
+  const inputId = labels[0].getAttribute('for');
   await typeInput(value, { child: { tagName: `input[id='${inputId}'], textarea[id='${inputId}']` } });
 };
 
@@ -272,16 +267,16 @@ export const typeInputByPlaceholder = async (value: string, placeholder: string)
   });
 
 export const typeOtherInput = async (value: string): Promise<void> =>
-  typeInput(value, { classes: ".subComponent", child: { tagName: "input[type='text']" } });
+  typeInput(value, { classes: '.subComponent', child: { tagName: "input[type='text']" } });
 
 export const typeOtherTextArea = async (value: string): Promise<void> =>
-  typeInput(value, { classes: ".subComponent", child: { tagName: "textarea" } });
+  typeInput(value, { classes: '.subComponent', child: { tagName: 'textarea' } });
 
 export const closeMenu = () => user.click(document.body);
 export const closePopover = () => user.click(document.body);
 
 export const findActionButton = (text: string, container?: HTMLElement): Promise<HTMLElement> =>
-  findQuick({ tagName: "button", child: { classes: ".ActionButton-minimalAreaDisplay", text: text } }, container);
+  findQuick({ tagName: 'button', child: { classes: '.ActionButton-minimalAreaDisplay', text: text } }, container);
 
 export const clickActionButton = async (text: string, container?: HTMLElement): Promise<void> => {
   const button = await findActionButton(text, container);
@@ -289,11 +284,11 @@ export const clickActionButton = async (text: string, container?: HTMLElement):
 };
 
 export const waitForGridReady = async (props?: { grid?: HTMLElement; timeout?: number }) =>
-  waitFor(() => expect(getAllQuick({ classes: ".Grid-ready" }, props?.grid)).toBeInTheDocument(), {
+  waitFor(() => expect(getAllQuick({ classes: '.Grid-ready' }, props?.grid)).toBeDefined(), {
     timeout: props?.timeout ?? 5000,
   });
 
 export const waitForGridRows = async (props?: { grid?: HTMLElement; timeout?: number }) =>
-  waitFor(async () => expect(getAllQuick({ classes: ".ag-row" }, props?.grid).length > 0).toBe(true), {
+  waitFor(() => expect(getAllQuick({ classes: '.ag-row' }, props?.grid).length > 0).toBe(true), {
     timeout: props?.timeout ?? 5000,
   });