@linzjs/step-ag-grid 7.0.4 → 7.1.1

package/package.json

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

package/src/components/gridForm/GridFormDropDown.tsx

@@ -247,7 +247,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPop
                   data-testid={"filteredMenu-free-text-input"}
                   defaultValue={filter}
                   data-disableenterautosave={true}
-                  data-allowtabtoSave={true}
+                  data-allowtabtosave={true}
                   onChange={(e) => setFilter(e.target.value)}
                   onKeyDown={handleKeyDown}
                   onKeyUp={handleKeyUp}

package/src/components/gridForm/GridFormMultiSelect.tsx

@@ -14,7 +14,7 @@ import {
 } from "react";
 import { GridBaseRow } from "../Grid";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
-import { groupBy, isEmpty, pick, toPairs } from "lodash-es";
+import { fromPairs, groupBy, isEmpty, pick, toPairs } from "lodash-es";
 import { LuiCheckboxInput } from "@linzjs/lui";
 import { useGridPopoverHook } from "../GridPopoverHook";
 import { MenuSeparatorString } from "./GridFormDropDown";
@@ -25,6 +25,8 @@ import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
 import { FormError } from "../../lui/FormError";
 import { textMatch } from "../../utils/textMatcher";
 
+type HeaderGroupType = Record<string, MultiSelectOption[]> | undefined;
+
 export interface MultiSelectOption {
   value: any;
   label?: string;
@@ -112,15 +114,34 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow>(props: GridForm
   /**
    * Groups options into their header groups
    */
-  const headerGroups = useMemo(
-    () =>
-      options &&
-      groupBy(
-        options.filter((o) => textMatch(o.label, filter) && o.value),
-        "filter",
-      ),
-    [filter, options],
-  );
+  const headerGroups = useMemo(() => {
+    if (!options) return undefined;
+    const result = groupBy(
+      options.filter((o) => textMatch(o.label, filter) && o.value),
+      "filter",
+    );
+    // remove leading/trailing/duplicate dividers
+    return fromPairs(
+      toPairs(result).map(([key, arr]) => {
+        let lastWasDivider = true;
+        return [
+          key,
+          arr
+            .map((row, index) => {
+              if (row.value === MenuSeparatorString) {
+                if (lastWasDivider) return null;
+                if (index === arr.length - 1) return null;
+                lastWasDivider = true;
+              } else {
+                lastWasDivider = false;
+              }
+              return row;
+            })
+            .filter((r) => r),
+        ];
+      }),
+    ) as HeaderGroupType;
+  }, [filter, options]);
 
   const headers: GridFormMultiSelectGroup[] = useMemo(() => props.headers ?? [{ header: "" }], [props.headers]);
 
@@ -136,7 +157,7 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow>(props: GridForm
         <>
           {props.filtered && (
             <FilterInput
-              {...{ headerGroups, options, setOptions, filter, setFilter }}
+              {...{ headerGroups, options, setOptions, filter, setFilter, triggerSave }}
               filterHelpText={props.filterHelpText}
               onSelectFilter={props.onSelectFilter}
               filterPlaceholder={props.filterPlaceholder}
@@ -185,12 +206,25 @@ const FilterInput = (props: {
   onSelectFilter?: (filter: string, options: MultiSelectOption[]) => void;
   filter: string;
   setFilter: Dispatch<SetStateAction<string>>;
-  headerGroups: Record<string, MultiSelectOption[]> | undefined;
+  headerGroups: HeaderGroupType;
   filterPlaceholder?: string;
   filterHelpText?: string | ((filter: string, options: MultiSelectOption[]) => string | undefined);
+  triggerSave: () => Promise<void>;
 }) => {
-  const { options, setOptions, onSelectFilter, filter, setFilter, headerGroups, filterPlaceholder, filterHelpText } =
-    props;
+  const {
+    options,
+    setOptions,
+    onSelectFilter,
+    filter,
+    setFilter,
+    headerGroups,
+    filterPlaceholder,
+    filterHelpText,
+    triggerSave,
+  } = props;
+
+  const enterHasBeenPressed = useRef(false);
+  const lastKeyWasEnter = useRef(false);
 
   const toggleSelectAllVisible = useCallback(() => {
     if (!options || !headerGroups) return;
@@ -198,7 +232,9 @@ const FilterInput = (props: {
     if (isEmpty(filter.trim())) {
       // Toggle off if any items are checked otherwise on
       const anyChecked = options.some((o) => o.checked);
-      options.forEach((o) => (o.checked = !anyChecked));
+      options.forEach((o) => {
+        if (o.label !== undefined) o.checked = !anyChecked;
+      });
     } else {
       // Toggle on if any filtered items are checked otherwise off
       const anyChecked = Object.values(headerGroups).some((headerOptions) =>
@@ -206,7 +242,7 @@ const FilterInput = (props: {
       );
       Object.values(headerGroups).forEach((headerOptions) => {
         headerOptions.forEach((o) => {
-          if (o.checked !== undefined) o.checked = anyChecked;
+          if (o.label !== undefined) o.checked = anyChecked;
         });
       });
     }
@@ -216,14 +252,26 @@ const FilterInput = (props: {
   const addCustomFilterValue = useCallback(() => {
     if (!options || !onSelectFilter) return;
 
+    const filterTrimmed = filter.trim();
+    if (isEmpty(filterTrimmed)) {
+      triggerSave().then();
+      return;
+    }
+
     const preFilterOptions = JSON.stringify(options);
-    onSelectFilter(filter.trim(), options);
+    onSelectFilter(filterTrimmed, options);
     // Detect if options list changed and update
     if (preFilterOptions === JSON.stringify(options)) return;
 
     setOptions([...options]);
     setFilter("");
-  }, [filter, onSelectFilter, options, setFilter, setOptions]);
+  }, [filter, onSelectFilter, options, setFilter, setOptions, triggerSave]);
+
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    if (e.key === "Enter") {
+      enterHasBeenPressed.current = true;
+    }
+  }, []);
 
   const handleKeyUp = useCallback(
     (e: KeyboardEvent) => {
@@ -232,10 +280,23 @@ const FilterInput = (props: {
         e.preventDefault();
 
         if (e.ctrlKey) toggleSelectAllVisible();
-        else if (onSelectFilter) addCustomFilterValue();
+        else if (enterHasBeenPressed.current) {
+          const filterTrimmed = filter.trim();
+          if (isEmpty(filterTrimmed)) {
+            triggerSave().then();
+            return;
+          }
+          onSelectFilter && addCustomFilterValue();
+        }
+        lastKeyWasEnter.current = true;
+      } else if (e.key === "Control") {
+        lastKeyWasEnter.current && setFilter("");
+        lastKeyWasEnter.current = false;
+      } else {
+        lastKeyWasEnter.current = false;
       }
     },
-    [addCustomFilterValue, onSelectFilter, toggleSelectAllVisible],
+    [addCustomFilterValue, filter, onSelectFilter, setFilter, toggleSelectAllVisible, triggerSave],
   );
 
   return (
@@ -250,8 +311,9 @@ const FilterInput = (props: {
               data-testid={"filteredMenu-free-text-input"}
               value={filter}
               data-disableenterautosave={true}
-              data-allowtabtoSave={true}
+              data-allowtabtosave={true}
               onChange={(e) => setFilter(e.target.value)}
+              onKeyDown={handleKeyDown}
               onKeyUp={handleKeyUp}
             />
             {filterHelpText && (
@@ -267,7 +329,7 @@ const FilterInput = (props: {
       </FocusableItem>
       <MenuDivider key={`$$divider_filter`} />
       {headerGroups && !toPairs(headerGroups).some(([_, options]) => !isEmpty(options)) && (
-        <div className={"szh-menu__item"}>[No items match the filter]</div>
+        <div className={"szh-menu__item GridPopoverEditDropDown-noOptions"}>No Options</div>
       )}
     </>
   );

package/src/components/gridPopoverEdit/GridPopoverEditDropDown.ts

@@ -11,8 +11,8 @@ export const GridPopoverEditDropDown = <RowType extends GridBaseRow>(
     editor: GridFormDropDown,
     ...props,
     editorParams: {
-      // Defaults to medium size container
-      className: "GridPopoverEditDropDown-containerMedium",
+      // Defaults to large size container
+      className: "GridPopoverEditDropDown-containerLarge",
       ...(props.editorParams as GridFormPopoutDropDownProps<RowType>),
     },
   });

package/src/index.ts

@@ -45,3 +45,4 @@ export * from "./lui/ActionButton";
 
 export * from "./utils/bearing";
 export * from "./utils/util";
+export * from "./utils/testUtil";

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

@@ -138,7 +138,7 @@ export const ControlledMenuFr = (
 
       const isTextArea = activeElement.nodeName === "TEXTAREA";
       const suppressEnterAutoSave = activeElement.getAttribute("data-disableenterautosave") || isTextArea;
-      const allowTabToSave = activeElement.getAttribute("data-allowtabtoSave");
+      const allowTabToSave = activeElement.getAttribute("data-allowtabtosave");
       const invokeSave = (reason: string) => {
         if (!saveButtonRef?.current) return;
         saveButtonRef.current?.setAttribute("data-reason", reason);

package/src/stories/grid/GridPopoutEditMultiSelect.stories.tsx

@@ -8,7 +8,7 @@ import { GridUpdatingContextProvider } from "../../contexts/GridUpdatingContextP
 import { GridContextProvider } from "../../contexts/GridContextProvider";
 import { Grid, GridProps } from "../../components/Grid";
 import { useMemo, useState } from "react";
-import { MenuHeaderItem, MenuSeparator } from "../../components/gridForm/GridFormDropDown";
+import { MenuSeparator } from "../../components/gridForm/GridFormDropDown";
 import { GridFormSubComponentTextArea } from "../../components/gridForm/GridFormSubComponentTextArea";
 import { ColDefT, GridCell } from "../../components/GridCell";
 import { GridPopoutEditMultiSelect } from "../../components/gridPopoverEdit/GridPopoutEditMultiSelect";
@@ -85,8 +85,8 @@ const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridPro
             filtered: true,
             filterPlaceholder: "Filter position",
             className: "GridMultiSelect-containerUnlimited",
+            headers: [{ header: "Header item" }],
             options: [
-              MenuHeaderItem("Header item"),
               { value: "lot1", label: "Lot 1" },
               { value: "lot2", label: "Lot 2" },
               { value: "lot3", label: "Lot 3" },

package/src/utils/testQuick.ts

@@ -0,0 +1,146 @@
+/**
+ * General query all by selected.  Internal use, use quick operations instead.
+ *
+ * @param selector Selector to use
+ * @param container Optional container
+ * @return HTMLElement array
+ */
+import { IconName } from "@linzjs/lui/dist/components/LuiIcon/LuiIcon";
+import { wait } from "./util";
+
+const queryAllBySelector = <T extends HTMLElement>(selector: string, container: HTMLElement = document.body): T[] =>
+  Array.from(container.querySelectorAll<T>(selector));
+
+/**
+ * Filters for query quick operations.
+ */
+export interface IQueryQuick {
+  testId?: string;
+  tagName?: "button" | "span" | "div" | "input" | "textarea" | any;
+  textEquals?: string;
+  textContains?: string;
+  icon?: IconName;
+  ariaLabel?: string;
+  role?: string;
+  classes?: string;
+  child?: IQueryQuick;
+}
+
+const escapeSelectorParam = (param: string): string => param.replace(/["\\]/g, "\\$&");
+
+/**
+ * Build selector for quick operations.
+ *
+ * @param props Filters to convert to selector.
+ * @param container Optional container to search in.
+ */
+const quickSelector = <T extends HTMLElement>(
+  props: IQueryQuick,
+  container?: HTMLElement,
+): { selector: string; els: T[] } => {
+  let selector = "";
+  let lastIQueryQuick = props;
+  for (let loop: IQueryQuick | undefined = props; loop; loop = loop.child) {
+    lastIQueryQuick = loop;
+    loop.tagName && (selector += loop.tagName);
+    loop.ariaLabel && (selector += `[aria-label='${escapeSelectorParam(loop.ariaLabel)}']`);
+    loop.role && (selector += `[role="${escapeSelectorParam(loop.role)}"]`);
+    loop.testId && (selector += `[data-testid="${escapeSelectorParam(loop.testId)}"]`);
+    loop.icon && (selector += `[data-icon='${loop.icon}']`);
+    loop.classes && (selector += loop.classes);
+    selector += " ";
+  }
+
+  if (selector.trim() == "") {
+    throw "get/query/findQuick needs at least one defined parameter";
+  }
+
+  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,
+    );
+  }
+
+  return { selector, els };
+};
+
+/**
+ * Query by filter.
+ *
+ * @param filter Filter
+ * @param container Optional container to look in
+ * @return HTMLElement if found else null
+ */
+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}`;
+  }
+  return els[0] ?? null;
+};
+
+/**
+ * Query all by filter.
+ *
+ * @param filter Filter
+ * @param container Optional container to look in
+ * @return HTMLElement array
+ */
+export const queryAllQuick = <T extends HTMLElement>(filter: IQueryQuick, container?: HTMLElement): T[] =>
+  quickSelector<T>(filter, container)?.els;
+
+/**
+ * Get all by filter.
+ *
+ * @param filter Filter
+ * @param container Optional container to look in
+ * @return HTMLElement array.  Throws exception if nothing is found.
+ */
+export const getAllQuick = <T extends HTMLElement>(filter: IQueryQuick, container?: HTMLElement): T[] => {
+  const els = queryAllQuick(filter, container);
+  if (els.length == 0) {
+    throw Error(`getAllQuick not found, selector: ${quickSelector(filter)}`);
+  }
+  return els as T[];
+};
+
+/**
+ * Get by filter.
+ *
+ * @param filter Filter
+ * @param container Optional container to look in
+ * @return HTMLElement.  Throws exception if not found.
+ */
+export const getQuick = (filter: IQueryQuick, container?: HTMLElement): HTMLElement => {
+  const el = queryQuick(filter, container);
+  if (el == null) {
+    throw Error(`getQuick  not found, selector: ${quickSelector(filter).selector}`);
+  }
+  return el;
+};
+
+/**
+ * Find by filter.  Waits up to 4 seconds to find filter.
+ *
+ * @param filter Filter
+ * @param container Optional container to look in
+ * @return HTMLElement.  Throws exception if not found.
+ */
+export const findQuick = async <T extends HTMLElement>(filter: IQueryQuick, container?: HTMLElement): Promise<T> => {
+  const endTime = Date.now() + 4000;
+  while (Date.now() < endTime) {
+    const el = queryQuick<T>(filter, container);
+    if (el) return el;
+    await wait(50);
+  }
+  throw Error(`findQuick not found, selector: ${quickSelector(filter).selector}`);
+};

package/src/utils/testUtil.ts

@@ -0,0 +1,135 @@
+import { act, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { findQuick, getAllQuick, getQuick, queryQuick } from "./testQuick";
+
+export const findRow = async (rowId: number | string, within?: HTMLElement): Promise<HTMLDivElement> => {
+  return findQuick<HTMLDivElement>({ tagName: `div[row-id='${rowId}']:not(:empty)` }, within);
+};
+
+export const queryRow = async (rowId: number | string, within?: HTMLElement): Promise<HTMLDivElement | null> => {
+  return queryQuick<HTMLDivElement>({ tagName: `div[row-id='${rowId}']:not(:empty)` }, within);
+};
+
+const _selectRow = async (
+  select: "select" | "deselect" | "toggle",
+  rowId: string | number,
+  within?: HTMLElement,
+): Promise<void> => {
+  await act(async () => {
+    const row = await findRow(rowId, within);
+    const isSelected = !row.className.includes("ag-row-selected");
+    if (select === "toggle" || (select === "select" && !isSelected) || (select === "deselect" && isSelected)) {
+      userEvent.click(row);
+    }
+  });
+};
+
+export const selectRow = async (rowId: string | number, within?: HTMLElement): Promise<void> =>
+  _selectRow("select", rowId, within);
+
+export const deselectRow = async (rowId: string | number, within?: HTMLElement): Promise<void> =>
+  _selectRow("deselect", rowId, within);
+
+export const findCell = async (rowId: number | string, colId: string, within?: HTMLElement): Promise<HTMLElement> => {
+  const row = await findRow(rowId, within);
+  return await findQuick({ tagName: `[col-id='${colId}']` }, row);
+};
+
+export const selectCell = async (rowId: string | number, colId: string, within?: HTMLElement): Promise<void> => {
+  await act(async () => {
+    const cell = await findCell(rowId, colId, within);
+    userEvent.click(cell);
+  });
+};
+
+export const editCell = async (rowId: number | string, colId: string, within?: HTMLElement): Promise<void> => {
+  await act(async () => {
+    const cell = await findCell(rowId, colId, within);
+    userEvent.dblClick(cell);
+    await findOpenMenu();
+  });
+};
+
+const findOpenMenu = async (): Promise<HTMLElement> => findQuick({ classes: ".szh-menu--state-open" });
+
+export const queryMenuOption = async (menuOptionText: string): 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,
+  );
+  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 clickMenuOption = async (menuOptionText: string): Promise<void> => {
+  await act(async () => {
+    const menuOption = await findMenuOption(menuOptionText);
+    menuOption && userEvent.click(menuOption);
+  });
+};
+
+export const openAndClickMenuOption = async (
+  rowId: number | string,
+  colId: string,
+  menuOptionText: string,
+  within?: HTMLElement,
+): Promise<void> => {
+  await editCell(rowId, colId, within);
+  await clickMenuOption(menuOptionText);
+};
+
+export const getMultiSelectOptions = async () => {
+  const openMenu = await findOpenMenu();
+  return getAllQuick<HTMLInputElement>({ role: "menuitem", child: { tagName: "input,textarea" } }, openMenu).map(
+    (input) => {
+      return {
+        v: input.value,
+        c: input.checked ?? true,
+      };
+    },
+  );
+};
+
+export const findMultiSelectOption = async (value: string): Promise<HTMLElement> => {
+  const openMenu = await findOpenMenu();
+  return getQuick({ role: "menuitem", child: { tagName: `input[value='${value}']` } }, openMenu);
+};
+
+export const clickMultiSelectOption = async (value: string): Promise<void> => {
+  const menuItem = await findMultiSelectOption(value);
+  menuItem.parentElement && userEvent.click(menuItem.parentElement);
+};
+
+export const typeOtherInput = async (value: string): Promise<void> => {
+  const openMenu = await findOpenMenu();
+  const otherInput = await findQuick({ 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);
+  userEvent.type(otherTextArea, value);
+};
+
+export const closeMenu = (): void => {
+  userEvent.click(document.body);
+};
+
+export const findActionButton = (text: string, container: HTMLElement): Promise<HTMLElement> =>
+  findQuick({ tagName: "button", child: { classes: ".ActionButton-minimalAreaDisplay", textEquals: text } }, container);
+
+export const clickActionButton = async (text: string, container: HTMLElement): Promise<void> => {
+  await act(async () => {
+    const button = await findActionButton(text, container);
+    userEvent.click(button);
+  });
+};

package/src/utils/textMatcher.ts

@@ -1,4 +1,4 @@
-import { isEmpty } from "lodash-es";
+import { isEmpty, partition } from "lodash-es";
 import { isMatch } from "matcher";
 
 /**
@@ -10,8 +10,8 @@ import { isMatch } from "matcher";
  * "*L" => *L
  * "A B" => A* and B*
  * "A B, C" => (A* and B*) or C*
- *
- * Returns ture if there's a text match.
+ * "!A" => all values must not match A
+ * Returns true if there's a text match.
  */
 export const textMatch = (text: string | undefined | null, filter: string): boolean => {
   if (text == null) return true;
@@ -20,12 +20,15 @@ export const textMatch = (text: string | undefined | null, filter: string): bool
     .split(",")
     .map((sf) => sf.trim())
     .filter((sf) => sf);
+  const [negativeFilters, positiveFilters] = partition(superFilters, (superFilters) => superFilters.startsWith("!"));
   const values = text.replaceAll(",", " ").trim().split(/\s+/);
   return (
-    isEmpty(superFilters) || // Not filtered
-    superFilters.some((superFilter) => {
-      const subFilters = superFilter.split(/\s+/).map((s) => s.replaceAll(/([!?])/g, "\\$1"));
-      return subFilters.every((subFilter) => values.some((value) => isMatch(value, subFilter)));
-    })
+    (isEmpty(positiveFilters) || // Not filtered
+      positiveFilters.some((superFilter) => {
+        const subFilters = superFilter.split(/\s+/).map((s) => s.replaceAll(/([!?])/g, "\\$1"));
+        return subFilters.every((subFilter) => values.some((value) => isMatch(value, subFilter)));
+      })) &&
+    (isEmpty(negativeFilters) ||
+      negativeFilters.every((superFilter) => values.every((value) => isMatch(value, superFilter))))
   );
 };