@linzjs/step-ag-grid 7.0.3 → 7.1.0

package/package.json

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

package/src/components/GridCell.tsx

@@ -78,7 +78,7 @@ export const GridCell = <RowType extends GridBaseRow, Props extends CellEditorCo
     }),
     // Default value formatter, otherwise react freaks out on objects
     valueFormatter: (params: ValueFormatterParams) => {
-      if (params.value == null) return "-";
+      if (params.value == null) return "–";
       const types = ["number", "boolean", "string"];
       if (types.includes(typeof params.value)) return `${params.value}`;
       else return JSON.stringify(params.value);

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/GridFormEditBearing.tsx

@@ -3,7 +3,7 @@ import "../../styles/GridFormEditBearing.scss";
 import { useCallback, useMemo, useState } from "react";
 import { GridBaseRow } from "../Grid";
 import { TextInputFormatted } from "../../lui/TextInputFormatted";
-import { bearingNumberParser, bearingStringValidator, convertDDToDMS } from "../../utils/bearing";
+import { bearingNumberParser, bearingStringValidator } from "../../utils/bearing";
 import { useGridPopoverHook } from "../GridPopoverHook";
 import { CellEditorCommon } from "../GridCell";
 import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
@@ -15,7 +15,7 @@ export interface GridFormEditBearingProps<RowType extends GridBaseRow> extends C
 }
 
 export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridFormEditBearingProps<RowType>) => {
-  const { field, value: initialValue } = useGridPopoverContext<RowType>();
+  const { field, value: initialValue, formatValue } = useGridPopoverContext<RowType>();
 
   // This clears out any scientific precision
   const defaultValue = useMemo(
@@ -65,7 +65,7 @@ export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridForm
         }}
         autoFocus={true}
         placeholder={props.placeHolder}
-        formatted={bearingStringValidator(value, props.range) ? "?" : convertDDToDMS(bearingNumberParser(value))}
+        formatted={bearingStringValidator(value, props.range) ? "?" : formatValue(bearingNumberParser(value))}
         error={bearingStringValidator(value, props.range)}
         helpText={"Press enter or tab to save"}
       />

package/src/components/gridForm/GridFormMultiSelect.tsx

@@ -250,7 +250,7 @@ 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)}
               onKeyUp={handleKeyUp}
             />

package/src/components/gridPopoverEdit/GridPopoverEditBearing.ts

@@ -12,7 +12,6 @@ export const GridPopoverEditBearingLike = <RowType extends GridBaseRow>(
     {
       initialWidth: 65,
       maxWidth: 150,
-      valueFormatter: bearingValueFormatter,
       ...colDef,
     },
     {

package/src/components/gridRender/GridRenderGenericCell.tsx

@@ -5,7 +5,6 @@ import { GridUpdatingContext } from "../../contexts/GridUpdatingContext";
 import { GridLoadableCell } from "../GridLoadableCell";
 import { GridIcon } from "../GridIcon";
 import { ColDef, ICellRendererParams } from "ag-grid-community";
-import { ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef";
 import { GridBaseRow } from "../Grid";
 import { ColDefT } from "../GridCell";
 
@@ -33,13 +32,9 @@ export const GridRendererGenericCell = <RowType extends GridBaseRow>(props: ICel
   const infoFn = cellRendererParams?.info;
   const infoText = infoFn ? infoFn(props) : undefined;
 
-  const defaultFormatter = (props: ValueFormatterParams): string => props.value;
-  const formatter = colDef.valueFormatter ?? defaultFormatter;
-  if (typeof formatter === "string") {
-    console.error("valueFormatter must be a function");
-    return <span>valueFormatter must be a function</span>;
-  }
-  const formatted = formatter(props as ValueFormatterParams);
+  const defaultFormatter = (value: any): string => value;
+  const formatter = props.formatValue ?? defaultFormatter;
+  const formatted = formatter(props.value);
 
   return (
     <GridLoadableCell isLoading={checkUpdating(colDef.field ?? colDef.colId ?? "", props.data.id)}>

package/src/contexts/GridPopoverContext.tsx

@@ -1,14 +1,6 @@
 import { createContext, RefObject, useContext } from "react";
 import { GridBaseRow } from "../components/Grid";
 
-export interface PropsType {
-  value: any;
-  data: any;
-  field: string;
-  selectedRows: any[];
-  updateValue: (saveFn: (selectedRows: any[]) => Promise<boolean>) => Promise<boolean>;
-}
-
 export interface GridPopoverContextType<RowType extends GridBaseRow> {
   anchorRef: RefObject<Element>;
   saving: boolean;
@@ -18,6 +10,7 @@ export interface GridPopoverContextType<RowType extends GridBaseRow> {
   data: RowType;
   selectedRows: RowType[];
   updateValue: (saveFn: (selectedRows: any[]) => Promise<boolean>, tabDirection: 1 | 0 | -1) => Promise<boolean>;
+  formatValue: (value: any) => any;
 }
 
 export const GridPopoverContext = createContext<GridPopoverContextType<any>>({
@@ -29,6 +22,7 @@ export const GridPopoverContext = createContext<GridPopoverContextType<any>>({
   data: {} as GridBaseRow,
   selectedRows: [],
   updateValue: async () => false,
+  formatValue: () => "! No gridPopoverContextProvider !",
 });
 
 export const useGridPopoverContext = <RowType extends GridBaseRow>() =>

package/src/contexts/GridPopoverContextProvider.tsx

@@ -49,6 +49,7 @@ export const GridPopoverContextProvider = ({ props, children }: GridPopoverConte
         data: props.data,
         value: props.value,
         updateValue,
+        formatValue: props.formatValue,
       }}
     >
       {children}

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

@@ -37,8 +37,8 @@ export default {
 
 interface ITestRow {
   id: number;
-  bearing1: string | number | null;
   bearingCorrection: number | null;
+  bearing: string | number | null;
 }
 
 const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
@@ -51,29 +51,29 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
         initialWidth: 65,
         maxWidth: 85,
       }),
-      GridPopoverEditBearing(
+      GridPopoverEditBearingCorrection(
         {
-          field: "bearing1",
-          headerName: "Bearing GCE",
+          field: "bearingCorrection",
+          headerName: "Bearing correction",
           cellRendererParams: {
-            warning: (props: any) => props.data.id == 1002 && "Testers are testing",
-            info: (props: any) => props.data.id == 1001 && "Developers are developing",
+            warning: (props) => props.data.id == 1002 && "Testers are testing",
+            info: (props) => props.data.id == 1001 && "Developers are developing",
           },
         },
         {
           multiEdit: false,
         },
       ),
-      GridPopoverEditBearingCorrection(
+      GridPopoverEditBearing(
         {
-          field: "bearingCorrection",
-          headerName: "Bearing Correction",
+          field: "bearing",
+          headerName: "Bearing",
         },
         {
           editorParams: {
-            onSave: async (selectedRows, value: ITestRow["bearingCorrection"]) => {
+            onSave: async (selectedRows, value: ITestRow["bearing"]) => {
               await wait(1000);
-              selectedRows.forEach((row) => (row["bearingCorrection"] = value));
+              selectedRows.forEach((row) => (row["bearing"] = value));
               return true;
             },
           },
@@ -84,10 +84,10 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
   );
 
   const [rowData] = useState([
-    { id: 1000, bearing1: 1.234, bearingCorrection: 90 },
-    { id: 1001, bearing1: "0E-12", bearingCorrection: 240 },
-    { id: 1002, bearing1: null, bearingCorrection: 355.1 },
-    { id: 1003, bearing1: null, bearingCorrection: 0 },
+    { id: 1000, bearing: 1.234, bearingCorrection: null },
+    { id: 1001, bearing: "0E-12", bearingCorrection: 240 },
+    { id: 1002, bearing: null, bearingCorrection: 355.1 },
+    { id: 1003, bearing: null, bearingCorrection: 0 },
   ] as ITestRow[]);
 
   return (

package/src/utils/bearing.ts

@@ -3,7 +3,7 @@ import { ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef
 export const bearingValueFormatter = (params: ValueFormatterParams): string => {
   const value = typeof params.value == "string" ? parseFloat(params.value) : params.value;
   if (value == null) {
-    return "-";
+    return "–";
   }
   return convertDDToDMS(value, false, false);
 };
@@ -11,7 +11,7 @@ export const bearingValueFormatter = (params: ValueFormatterParams): string => {
 export const bearingCorrectionValueFormatter = (params: ValueFormatterParams): string => {
   const value = params.value;
   if (value == null) {
-    return "-";
+    return "–";
   }
   if (typeof value === "string") {
     return convertDDToDMS(bearingNumberParser(value), true, true);

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);
+  });
+};