@linzjs/step-ag-grid 7.2.0 → 7.3.1

package/package.json

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

package/src/components/gridForm/GridFormDropDown.tsx

@@ -300,8 +300,8 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPop
                     }
                   }}
                 >
-                  {item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)}
-                  {item.subComponent ? "..." : ""}
+                  {(item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)) +
+                    (item.subComponent ? "..." : "")}
                 </MenuItem>
 
                 {item.subComponent && selectedSubComponent === item && (
@@ -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/stories/grid/GridPopoutEditMultiSelect.stories.tsx

@@ -56,11 +56,6 @@ const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridPro
       appB: "B",
       other: "Other",
     };
-    const positionTwoMap: Record<string, string> = {
-      "1": "One",
-      "2": "Two",
-      "3": "Three",
-    };
     return [
       GridCell({
         field: "id",
@@ -177,29 +172,6 @@ const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridPro
           },
         },
       ),
-      GridPopoutEditMultiSelect(
-        {
-          field: "position2",
-          initialWidth: 65,
-          maxWidth: 150,
-          headerName: "Initial editor values ",
-          valueGetter: (props) => positionTwoMap[props.data.position2],
-        },
-        {
-          multiEdit: false,
-          editorParams: {
-            filtered: true,
-            filterPlaceholder: "Filter position",
-            options: Object.entries(positionTwoMap).map(([k, v]) => ({ value: k, label: v })),
-            onSave: async (selectedRows, selectedOptions) => {
-              // eslint-disable-next-line no-console
-              console.log("multiSelect result", { selectedRows, selectedOptions });
-              await wait(1000);
-              return true;
-            },
-          },
-        },
-      ),
     ];
   }, []);
 
@@ -211,6 +183,7 @@ const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridPro
   return (
     <Grid
       {...props}
+      animateRows={true}
       externalSelectedItems={externalSelectedItems}
       setExternalSelectedItems={setExternalSelectedItems}
       columnDefs={columnDefs}

package/src/utils/testQuick.ts

@@ -17,8 +17,7 @@ const queryAllBySelector = <T extends HTMLElement>(selector: string, container:
 export interface IQueryQuick {
   testId?: string;
   tagName?: "button" | "span" | "div" | "input" | "textarea" | any;
-  textEquals?: string;
-  textContains?: string;
+  text?: string | RegExp;
   icon?: IconName;
   ariaLabel?: string;
   role?: string;
@@ -28,6 +27,14 @@ export interface IQueryQuick {
 
 const escapeSelectorParam = (param: string): string => param.replace(/["\\]/g, "\\$&");
 
+export const getMatcher = (matcherText: string | RegExp) => {
+  const textMatcher =
+    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());
+};
+
 /**
  * Build selector for quick operations.
  *
@@ -57,17 +64,9 @@ const quickSelector = <T extends HTMLElement>(
 
   let els = queryAllBySelector<T>(selector, container);
 
-  const textMatch = lastIQueryQuick.textEquals?.toLowerCase();
-  if (textMatch != null) {
-    els = els.filter((el) => el.innerHTML.toLowerCase() === textMatch || el.innerText.toLowerCase() === textMatch);
-  }
-  const textContains = lastIQueryQuick.textContains?.toLowerCase();
-  if (textContains != null) {
-    els = els.filter(
-      (el) =>
-        el.innerHTML.toLowerCase().indexOf(textContains) != -1 ||
-        el.innerText.toLowerCase().indexOf(textContains) != -1,
-    );
+  if (lastIQueryQuick.text != null) {
+    const matcher = getMatcher(lastIQueryQuick.text);
+    els = els.filter(matcher);
   }
 
   return { selector, els };
@@ -83,7 +82,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}`;
+    throw `Found multiple(${els.length}) elements by selector ${selector}\n${els.map(
+      (el, index) => `${index}: ${el.parentElement?.innerHTML}\n\n`,
+    )}`;
   }
   return els[0] ?? null;
 };

package/src/utils/testUtil.ts

@@ -1,6 +1,7 @@
-import { act, within } from "@testing-library/react";
+import { act, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { findQuick, getAllQuick, getQuick, queryQuick } from "./testQuick";
+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);
@@ -35,6 +36,18 @@ export const findCell = async (rowId: number | string, colId: string, within?: H
   return await findQuick({ tagName: `[col-id='${colId}']` }, row);
 };
 
+export const cellContains = async (
+  rowId: number | string,
+  colId: string,
+  text: string | RegExp,
+  within?: HTMLElement,
+) => {
+  return await waitFor(async () => {
+    const row = await findRow(rowId, within);
+    return await findQuick({ tagName: `[col-id='${colId}']`, text }, row);
+  });
+};
+
 export const selectCell = async (rowId: string | number, colId: string, within?: HTMLElement): Promise<void> => {
   await act(async () => {
     const cell = await findCell(rowId, colId, within);
@@ -46,30 +59,34 @@ 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" });
 
-export const queryMenuOption = async (menuOptionText: string): Promise<HTMLElement | null> => {
+export const queryMenuOption = async (menuOptionText: string | RegExp): Promise<HTMLElement | null> => {
   const openMenu = await findOpenMenu();
   const els = await within(openMenu).findAllByRole("menuitem");
-  const result = els.find(
-    (e: HTMLElement) => e.innerHTML?.trim() === menuOptionText || e.innerText?.trim() === menuOptionText,
-  );
+  const matcher = getMatcher(menuOptionText);
+  const result = els.find(matcher);
   return result ?? null;
 };
 
-export const findMenuOption = async (menuOptionText: string): Promise<HTMLElement> => {
-  const menuOption = await queryMenuOption(menuOptionText);
-  if (menuOption == null) {
-    throw Error(`Unable to find menu option ${menuOptionText}`);
-  }
-  return menuOption;
+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;
+    },
+    { timeout: 10000 },
+  );
 };
 
-export const clickMenuOption = async (menuOptionText: string): Promise<void> => {
+export const clickMenuOption = async (menuOptionText: string | RegExp): Promise<void> => {
   await act(async () => {
     const menuOption = await findMenuOption(menuOptionText);
     menuOption && userEvent.click(menuOption);
@@ -79,10 +96,11 @@ export const clickMenuOption = async (menuOptionText: string): Promise<void> =>
 export const openAndClickMenuOption = async (
   rowId: number | string,
   colId: string,
-  menuOptionText: string,
+  menuOptionText: string | RegExp,
   within?: HTMLElement,
 ): Promise<void> => {
   await editCell(rowId, colId, within);
+  await wait(100);
   await clickMenuOption(menuOptionText);
 };
 
@@ -110,13 +128,13 @@ 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.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.type(otherTextArea, value);
 };
 
@@ -125,7 +143,7 @@ export const closeMenu = (): void => {
 };
 
 export const findActionButton = (text: string, container: HTMLElement): Promise<HTMLElement> =>
-  findQuick({ tagName: "button", child: { classes: ".ActionButton-minimalAreaDisplay", textEquals: text } }, container);
+  findQuick({ tagName: "button", child: { classes: ".ActionButton-minimalAreaDisplay", text: text } }, container);
 
 export const clickActionButton = async (text: string, container: HTMLElement): Promise<void> => {
   await act(async () => {