@linzjs/step-ag-grid 7.3.0 → 7.3.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "7.3.0",
+  "version": "7.3.2",
   "keywords": [
     "aggrid",
     "ag-grid",

package/src/components/gridForm/GridFormDropDown.tsx

@@ -328,7 +328,9 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPop
                         }}
                       >
                         {item.subComponent && (
-                          <item.subComponent key={`${fieldToString(field)}-${index}_subcomponent_inner`} />
+                          <div className={"subComponent"}>
+                            <item.subComponent key={`${fieldToString(field)}-${index}_subcomponent_inner`} />
+                          </div>
                         )}
                       </GridSubComponentContext.Provider>
                     )}

package/src/components/gridForm/GridFormMultiSelect.tsx

@@ -414,7 +414,9 @@ const MenuSubComponent = (props: {
               triggerSave,
             }}
           >
-            <item.subComponent />
+            <div className={"subComponent"}>
+              <item.subComponent />
+            </div>
           </GridSubComponentContext.Provider>
         )
       }

package/src/components/gridForm/GridFormPopoverMenu.tsx

@@ -149,7 +149,9 @@ export const GridFormPopoverMenu = <RowType extends GridBaseRow>(props: GridForm
                             triggerSave,
                           }}
                         >
-                          <item.subComponent />
+                          <div className={"subComponent"}>
+                            <item.subComponent />
+                          </div>
                         </GridSubComponentContext.Provider>
                       )
                     }

package/src/components/gridForm/GridFormSubComponentTextArea.tsx

@@ -35,7 +35,7 @@ export const GridFormSubComponentTextArea = <RowType extends GridBaseRow>(
   }, [setValid, invalid, value]);
 
   return (
-    <div className={clsx("FreeTextInput LuiDeprecatedForms", props.className)}>
+    <div className={clsx("FreeTextInput", props.className)}>
       <TextAreaInput
         className={"free-text-input"}
         value={value}

package/src/components/gridForm/GridFormTextArea.tsx

@@ -50,7 +50,7 @@ export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormTex
   });
 
   return popoverWrapper(
-    <div style={{ display: "flex", flexDirection: "row", width: props.width ?? 240 }}>
+    <div className={"subComponent"} style={{ display: "flex", flexDirection: "row", width: props.width ?? 240 }}>
       <TextAreaInput
         value={value}
         onChange={(e) => setValue(e.target.value)}

package/src/components/gridForm/GridFormTextInput.tsx

@@ -50,7 +50,10 @@ export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormTe
   });
 
   return popoverWrapper(
-    <div style={{ display: "flex", flexDirection: "row", width: props.width ?? 240 }} className={"FormTest"}>
+    <div
+      style={{ display: "flex", flexDirection: "row", width: props.width ?? 240 }}
+      className={"FormTest subComponent"}
+    >
       <TextInputFormatted
         value={value}
         onChange={(e) => setValue(e.target.value)}

package/src/contexts/GridContext.tsx

@@ -15,7 +15,7 @@ export interface GridContextType {
   selectRowsByIdWithFlash: (rowIds?: number[]) => void;
   flashRows: (rowIds?: number[]) => void;
   flashRowsDiff: (updateFn: () => Promise<any>) => Promise<void>;
-  ensureRowVisible: (id: number) => void;
+  ensureRowVisible: (id: number | string) => boolean;
   ensureSelectedRowIsVisible: () => void;
   sizeColumnsToFit: () => void;
   stopEditing: () => void;
@@ -67,6 +67,7 @@ export const GridContext = createContext<GridContextType>({
   },
   ensureRowVisible: () => {
     console.error("no context provider for ensureRowVisible");
+    return true;
   },
   ensureSelectedRowIsVisible: () => {
     console.error("no context provider for ensureSelectedRowIsVisible");

package/src/contexts/GridContextProvider.tsx

@@ -200,10 +200,12 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
     );
   };
 
-  const ensureRowVisible = (id: number): void => {
-    gridApiOp((gridApi) => {
+  const ensureRowVisible = (id: number | string): boolean => {
+    return gridApiOp((gridApi) => {
       const node = gridApi.getRowNode(`${id}`);
-      node && gridApi.ensureNodeVisible(node);
+      if (!node) return false;
+      gridApi.ensureNodeVisible(node);
+      return true;
     });
   };
 

package/src/utils/testUtil.ts

@@ -1,6 +1,7 @@
 import { act, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { findQuick, getAllQuick, getMatcher, getQuick, queryQuick } from "./testQuick";
+import { wait } from "./util";
 
 export const findRow = async (rowId: number | string, within?: HTMLElement): Promise<HTMLDivElement> => {
   return findQuick<HTMLDivElement>({ tagName: `div[row-id='${rowId}']:not(:empty)` }, within);
@@ -41,10 +42,13 @@ export const cellContains = async (
   text: string | RegExp,
   within?: HTMLElement,
 ) => {
-  return await waitFor(async () => {
-    const row = await findRow(rowId, within);
-    return await findQuick({ tagName: `[col-id='${colId}']`, text }, row);
-  });
+  return await waitFor(
+    async () => {
+      const row = await findRow(rowId, within);
+      return await findQuick({ tagName: `[col-id='${colId}']`, text }, row);
+    },
+    { timeout: 10000 },
+  );
 };
 
 export const selectCell = async (rowId: string | number, colId: string, within?: HTMLElement): Promise<void> => {
@@ -58,8 +62,8 @@ export const editCell = async (rowId: number | string, colId: string, within?: H
   await act(async () => {
     const cell = await findCell(rowId, colId, within);
     userEvent.dblClick(cell);
-    await findOpenMenu();
   });
+  await findOpenMenu();
 };
 
 const findOpenMenu = async (): Promise<HTMLElement> => findQuick({ classes: ".szh-menu--state-open" });
@@ -73,13 +77,16 @@ export const queryMenuOption = async (menuOptionText: string | RegExp): Promise<
 };
 
 export const findMenuOption = async (menuOptionText: string | RegExp): Promise<HTMLElement> => {
-  return await waitFor(async () => {
-    const menuOption = await queryMenuOption(menuOptionText);
-    if (menuOption == null) {
-      throw Error(`Unable to find menu option ${menuOptionText}`);
-    }
-    return menuOption;
-  });
+  return await waitFor(
+    async () => {
+      const menuOption = await queryMenuOption(menuOptionText);
+      if (menuOption == null) {
+        throw Error(`Unable to find menu option ${menuOptionText}`);
+      }
+      return menuOption;
+    },
+    { timeout: 10000 },
+  );
 };
 
 export const clickMenuOption = async (menuOptionText: string | RegExp): Promise<void> => {
@@ -96,6 +103,7 @@ export const openAndClickMenuOption = async (
   within?: HTMLElement,
 ): Promise<void> => {
   await editCell(rowId, colId, within);
+  await wait(100);
   await clickMenuOption(menuOptionText);
 };
 
@@ -123,13 +131,15 @@ export const clickMultiSelectOption = async (value: string): Promise<void> => {
 
 export const typeOtherInput = async (value: string): Promise<void> => {
   const openMenu = await findOpenMenu();
-  const otherInput = await findQuick({ tagName: "input[type='text']" }, openMenu);
+  const otherInput = await findQuick({ classes: ".subComponent", child: { tagName: "input[type='text']" } }, openMenu);
+  userEvent.clear(otherInput);
   userEvent.type(otherInput, value);
 };
 
 export const typeOtherTextArea = async (value: string): Promise<void> => {
   const openMenu = await findOpenMenu();
-  const otherTextArea = await findQuick({ tagName: "textarea" }, openMenu);
+  const otherTextArea = await findQuick({ classes: ".subComponent", child: { tagName: "textarea" } }, openMenu);
+  userEvent.clear(otherTextArea);
   userEvent.type(otherTextArea, value);
 };