@linzjs/step-ag-grid 4.0.2 → 5.0.0

package/src/components/gridForm/GridFormTextInput.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { TextInputFormatted } from "../../lui/TextInputFormatted";
 import { useGridPopoverHook } from "../GridPopoverHook";
 import { GridBaseRow } from "../Grid";
@@ -21,7 +21,7 @@ export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormTe
 
   const helpText = props.helpText ?? "Press enter or tab to save";
 
-  const initValue = initialVale == null ? "" : `${initialVale}`;
+  const initValue = useMemo(() => (initialVale == null ? "" : `${initialVale}`), [initialVale]);
   const [value, setValue] = useState(initValue);
 
   const invalid = useCallback(() => TextInputValidator<RowType>(props, value, data), [data, props, value]);
@@ -29,6 +29,7 @@ export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormTe
   const save = useCallback(
     async (selectedRows: RowType[]): Promise<boolean> => {
       if (invalid()) return false;
+
       const trimmedValue = value.trim();
       if (initValue === trimmedValue) return true;
 
@@ -47,7 +48,11 @@ export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormTe
     },
     [invalid, value, initValue, props, field],
   );
-  const { popoverWrapper, onlyInputKeyboardEventHandlers } = useGridPopoverHook({ className: props.className, save });
+  const { popoverWrapper } = useGridPopoverHook({
+    className: props.className,
+    invalid,
+    save,
+  });
 
   return popoverWrapper(
     <div style={{ display: "flex", flexDirection: "row", width: props.width ?? 240 }} className={"FormTest"}>
@@ -58,7 +63,6 @@ export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormTe
         formatted={props.units}
         style={{ width: "100%" }}
         placeholder={props.placeholder}
-        {...onlyInputKeyboardEventHandlers}
         helpText={helpText}
       />
     </div>,

package/src/contexts/GridContext.tsx

@@ -25,6 +25,7 @@ export interface GridContextType {
     setSaving?: (saving: boolean) => void,
   ) => Promise<boolean>;
   redrawRows: (rowNodes?: RowNode[]) => void;
+  selectNextCell: (tabDirection: -1 | 0 | 1) => void;
 }
 
 export const GridContext = createContext<GridContextType>({
@@ -87,4 +88,7 @@ export const GridContext = createContext<GridContextType>({
   redrawRows: () => {
     console.error("no context provider for redrawRows");
   },
+  selectNextCell: () => {
+    console.error("no context provider for selectNextCell");
+  },
 });

package/src/contexts/GridContextProvider.tsx

@@ -275,6 +275,13 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
     });
   };
 
+  const selectNextCell = (tabDirection: -1 | 0 | 1 = 0) => {
+    gridApiOp((gridApi) => {
+      if (tabDirection == 1) gridApi.tabToNextCell();
+      if (tabDirection == -1) gridApi.tabToPreviousCell();
+    });
+  };
+
   return (
     <GridContext.Provider
       value={{
@@ -296,6 +303,7 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
         stopEditing,
         updatingCells,
         redrawRows,
+        selectNextCell,
       }}
     >
       {props.children}

package/src/contexts/GridPopoverContext.tsx

@@ -17,7 +17,7 @@ export interface GridPopoverContextType<RowType extends GridBaseRow> {
   value: any;
   data: RowType;
   selectedRows: RowType[];
-  updateValue: (saveFn: (selectedRows: any[]) => Promise<boolean>) => Promise<boolean>;
+  updateValue: (saveFn: (selectedRows: any[]) => Promise<boolean>, tabDirection: 1 | 0 | -1) => Promise<boolean>;
 }
 
 export const GridPopoverContext = createContext<GridPopoverContextType<any>>({

package/src/contexts/GridPopoverContextProvider.tsx

@@ -11,7 +11,7 @@ interface GridPopoverContextProps {
 }
 
 export const GridPopoverContextProvider = ({ props, children }: GridPopoverContextProps) => {
-  const { getSelectedRows, updatingCells, stopEditing } = useContext(GridContext);
+  const { getSelectedRows, updatingCells, stopEditing, selectNextCell } = useContext(GridContext);
   const anchorRef = useRef<Element>(props.eGridCell);
 
   const [saving, setSaving] = useState(false);
@@ -27,16 +27,19 @@ export const GridPopoverContextProvider = ({ props, children }: GridPopoverConte
   const field = props.colDef?.field ?? "";
 
   const updateValue = useCallback(
-    async (saveFn: (selectedRows: any[]) => Promise<boolean>): Promise<boolean> => {
+    async (saveFn: (selectedRows: any[]) => Promise<boolean>, tabDirection: 1 | 0 | -1): Promise<boolean> => {
       let result = false;
       if (!saving) {
         result = await updatingCells({ selectedRows, field }, saveFn, setSaving);
-        if (result) stopEditing();
+        if (result) {
+          stopEditing();
+          tabDirection && selectNextCell(tabDirection);
+        }
       }
 
       return result;
     },
-    [field, saving, selectedRows, stopEditing, updatingCells],
+    [field, saving, selectNextCell, selectedRows, stopEditing, updatingCells],
   );
 
   return (

package/src/contexts/GridUpdatingContext.tsx

@@ -2,7 +2,12 @@ import { createContext } from "react";
 
 export type GridUpdatingContextType = {
   checkUpdating: (fields: string | string[], id: number | string) => boolean;
-  modifyUpdating: (field: string, ids: (number | string)[], fn: () => void | Promise<void>) => Promise<void>;
+  modifyUpdating: (
+    fields: string | string[],
+    ids: (number | string)[],
+    fn: () => void | Promise<void>,
+  ) => Promise<void>;
+  updatedDep: number;
 };
 
 export const GridUpdatingContext = createContext<GridUpdatingContextType>({
@@ -13,4 +18,5 @@ export const GridUpdatingContext = createContext<GridUpdatingContextType>({
   modifyUpdating: async () => {
     console.error("Missing GridUpdatingContext");
   },
+  updatedDep: 0,
 });

package/src/contexts/GridUpdatingContextProvider.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useRef } from "react";
+import { ReactNode, useRef, useState } from "react";
 import { castArray, flatten, remove } from "lodash-es";
 import { GridUpdatingContext } from "./GridUpdatingContext";
 
@@ -15,6 +15,7 @@ type UpdatingBlock = Record<FieldName, IdList[]>;
 export const GridUpdatingContextProvider = (props: UpdatingContextProviderProps) => {
   const updatingBlocks = useRef<UpdatingBlock>({});
   const updating = useRef<GridUpdatingContextStatus>({});
+  const [updatedDep, setUpdatedDep] = useState(0);
 
   const resetUpdating = () => {
     const mergedUpdatingBlocks: GridUpdatingContextStatus = {};
@@ -22,15 +23,25 @@ export const GridUpdatingContextProvider = (props: UpdatingContextProviderProps)
       mergedUpdatingBlocks[key] = flatten(updatingBlocks.current[key]);
     }
     updating.current = mergedUpdatingBlocks;
+    setUpdatedDep((updatedDep) => updatedDep + 1);
   };
 
-  const modifyUpdating = async (field: string, ids: (number | string)[], fn: () => void | Promise<void>) => {
-    const fieldUpdatingIds = updatingBlocks.current[field] ?? (updatingBlocks.current[field] = []);
+  const modifyUpdating = async (
+    fields: string | string[],
+    ids: (number | string)[],
+    fn: () => void | Promise<void>,
+  ) => {
     const idRef = [...ids];
-    fieldUpdatingIds.push(idRef);
+    castArray(fields).forEach((field) => {
+      const fieldUpdatingIds = updatingBlocks.current[field] ?? (updatingBlocks.current[field] = []);
+      fieldUpdatingIds.push(idRef);
+    });
     resetUpdating();
     await fn();
-    remove(fieldUpdatingIds, (idList) => idList === idRef);
+    castArray(fields).forEach((field) => {
+      const fieldUpdatingIds = updatingBlocks.current[field];
+      remove(fieldUpdatingIds, (idList) => idList === idRef);
+    });
     resetUpdating();
   };
 
@@ -38,7 +49,7 @@ export const GridUpdatingContextProvider = (props: UpdatingContextProviderProps)
     castArray(fields).some((f) => updating.current[f]?.includes(id));
 
   return (
-    <GridUpdatingContext.Provider value={{ modifyUpdating, checkUpdating }}>
+    <GridUpdatingContext.Provider value={{ modifyUpdating, checkUpdating, updatedDep }}>
       {props.children}
     </GridUpdatingContext.Provider>
   );

package/src/lui/FormError.tsx

@@ -0,0 +1,29 @@
+import { LuiIcon } from "@linzjs/lui";
+
+export interface FormErrorProps {
+  helpText?: string;
+  error?: string | boolean | null;
+}
+
+export const FormError = (props: FormErrorProps) => {
+  return (
+    <>
+      {props.error && (
+        <span className="LuiTextInput-error">
+          <LuiIcon alt="error" name="ic_error" className="LuiTextInput-error-icon" size="sm" status="error" />
+          {props.error}
+        </span>
+      )}
+
+      {props.helpText && !props.error && (
+        <span
+          style={{
+            fontSize: "0.7rem",
+          }}
+        >
+          {props.helpText}
+        </span>
+      )}
+    </>
+  );
+};

package/src/lui/TextAreaInput.tsx

@@ -1,8 +1,8 @@
 import { InputHTMLAttributes, useState } from "react";
 import clsx from "clsx";
-import { LuiIcon } from "@linzjs/lui";
 import { v4 as uuidVersion4 } from "uuid";
 import { omit } from "lodash-es";
+import { FormError } from "./FormError";
 
 export const useGenerateOrDefaultId = (idFromProps?: string) => {
   const [id] = useState(idFromProps ? idFromProps : uuidVersion4());
@@ -56,23 +56,7 @@ export const TextAreaInput = (props: LuiTextAreaInputProps) => {
         </div>
       </label>
 
-      {/* Error message */}
-      {props.error && (
-        <span className="LuiTextAreaInput-error">
-          <LuiIcon alt="error" name="ic_error" className="LuiTextAreaInput-error-icon" size="sm" status="error" />
-          {props.error}
-        </span>
-      )}
-
-      {props.helpText && !props.error && (
-        <span
-          style={{
-            fontSize: "0.7rem",
-          }}
-        >
-          {props.helpText}
-        </span>
-      )}
+      <FormError error={props.error} helpText={props.helpText} />
     </div>
   );
 };

package/src/lui/TextInputFormatted.tsx

@@ -3,8 +3,8 @@ import "./TextInputFormatted.scss";
 import { DetailedHTMLProps, InputHTMLAttributes } from "react";
 
 import clsx from "clsx";
-import { LuiIcon } from "@linzjs/lui";
 import { omit } from "lodash-es";
+import { FormError } from "./FormError";
 
 export interface LuiTextInputProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
   // overrides value in base class to be string type only
@@ -35,22 +35,7 @@ export const TextInputFormatted = (props: LuiTextInputProps): JSX.Element => {
         <span className={"LuiTextInput-formatted"}>{props.formatted}</span>
       </span>
 
-      {props.error && (
-        <span className="LuiTextInput-error">
-          <LuiIcon alt="error" name="ic_error" className="LuiTextInput-error-icon" size="sm" status="error" />
-          {props.error}
-        </span>
-      )}
-
-      {props.helpText && !props.error && (
-        <span
-          style={{
-            fontSize: "0.7rem",
-          }}
-        >
-          {props.helpText}
-        </span>
-      )}
+      <FormError error={props.error} helpText={props.helpText} />
     </div>
   );
 };

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

@@ -1,14 +1,4 @@
-import {
-  forwardRef,
-  useRef,
-  useMemo,
-  useCallback,
-  useEffect,
-  KeyboardEvent,
-  FocusEvent,
-  MutableRefObject,
-  ForwardedRef,
-} from "react";
+import { forwardRef, useRef, useMemo, useCallback, useEffect, FocusEvent, MutableRefObject, ForwardedRef } from "react";
 import { createPortal } from "react-dom";
 import { MenuList } from "./MenuList";
 import { useBEM } from "../hooks";
@@ -120,14 +110,119 @@ export const ControlledMenuFr = (
     [isWithinMenu],
   );
 
+  const lastTabDownEl = useRef<Element>();
+  const lastEnterDownEl = useRef<Element>();
+  const handleKeyboardTabAndEnter = useCallback(
+    (isDown: boolean) => (ev: KeyboardEvent) => {
+      const thisDocument = anchorRef?.current ? anchorRef?.current.ownerDocument : document;
+      const activeElement = thisDocument.activeElement;
+      if (!anchorRef?.current || !activeElement) return;
+      if (ev.key !== "Tab" && ev.key !== "Enter") return;
+
+      if (ev.repeat) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        return;
+      }
+
+      const inputElsIterator = thisDocument.querySelectorAll<HTMLElement>(".szh-menu--state-open input,textarea");
+      let inputEls: HTMLElement[] = [];
+      inputElsIterator.forEach((el) => inputEls.push(el));
+      inputEls = inputEls.filter((el) => !(el as any).disabled);
+
+      if (inputEls.length === 0) return;
+      const firstInputEl = inputEls[0];
+      const lastInputEl = inputEls[inputEls.length - 1];
+      if (activeElement !== firstInputEl && activeElement !== lastInputEl) return;
+
+      const suppressAutoSaveEvents = activeElement.getAttribute("data-suppressAutoSaveEvents");
+      const invokeSave = (reason: string) => {
+        if (!saveButtonRef?.current || suppressAutoSaveEvents) return;
+        saveButtonRef.current?.setAttribute("data-reason", reason);
+        saveButtonRef?.current?.click();
+      };
+
+      const isTextArea = activeElement.nodeName === "TEXTAREA";
+      switch (activeElement.nodeName) {
+        case "TEXTAREA":
+        case "INPUT": {
+          if (activeElement === lastInputEl && activeElement === firstInputEl) {
+            if (ev.key === "Tab") {
+              // Can't forward/backwards tab out of popup
+              ev.preventDefault();
+              ev.stopPropagation();
+              if (isDown) {
+                lastTabDownEl.current = activeElement;
+              } else {
+                lastTabDownEl.current == activeElement &&
+                  invokeSave(ev.shiftKey ? CloseReason.TAB_BACKWARD : CloseReason.TAB_FORWARD);
+              }
+            }
+            if (ev.key === "Enter" && !isTextArea) {
+              ev.preventDefault();
+              ev.stopPropagation();
+              if (isDown) {
+                lastEnterDownEl.current = activeElement;
+              } else {
+                lastEnterDownEl.current == activeElement && invokeSave(CloseReason.CLICK);
+              }
+            }
+          } else if (activeElement === lastInputEl) {
+            if (ev.key === "Tab" && !ev.shiftKey) {
+              // Can't backward tab out of popup
+              ev.preventDefault();
+              ev.stopPropagation();
+
+              if (isDown) {
+                lastTabDownEl.current = activeElement;
+              } else {
+                lastTabDownEl.current == activeElement && invokeSave(CloseReason.TAB_FORWARD);
+              }
+            }
+            if (ev.key === "Enter" && !isTextArea) {
+              ev.preventDefault();
+              ev.stopPropagation();
+              if (isDown) {
+                lastEnterDownEl.current = activeElement;
+              } else {
+                lastEnterDownEl.current == activeElement && invokeSave(CloseReason.CLICK);
+              }
+            }
+          } else if (activeElement === firstInputEl) {
+            if (ev.key === "Tab" && ev.shiftKey) {
+              // Can't backward tab out of popup
+              ev.preventDefault();
+              ev.stopPropagation();
+
+              if (isDown) {
+                lastTabDownEl.current = activeElement;
+              } else {
+                lastTabDownEl.current == activeElement && invokeSave(CloseReason.TAB_BACKWARD);
+              }
+            }
+          }
+          break;
+        }
+      }
+    },
+    [anchorRef, saveButtonRef],
+  );
+
+  const handleKeydownTabAndEnter = useMemo(() => handleKeyboardTabAndEnter(true), [handleKeyboardTabAndEnter]);
+  const handleKeyupTabAndEnter = useMemo(() => handleKeyboardTabAndEnter(false), [handleKeyboardTabAndEnter]);
+
   useEffect(() => {
     if (isMenuOpen(state)) {
       const thisDocument = anchorRef?.current ? anchorRef?.current.ownerDocument : document;
+      thisDocument.addEventListener("keydown", handleKeydownTabAndEnter, true);
+      thisDocument.addEventListener("keyup", handleKeyupTabAndEnter, true);
       thisDocument.addEventListener("mousedown", handleScreenEventForSave, true);
       thisDocument.addEventListener("mouseup", handleScreenEventForCancel, true);
       thisDocument.addEventListener("click", handleScreenEventForCancel, true);
       thisDocument.addEventListener("dblclick", handleScreenEventForCancel, true);
       return () => {
+        thisDocument.addEventListener("keydown", handleKeydownTabAndEnter, true);
+        thisDocument.addEventListener("keyup", handleKeyupTabAndEnter, true);
         thisDocument.removeEventListener("mousedown", handleScreenEventForSave, true);
         thisDocument.removeEventListener("mouseup", handleScreenEventForCancel, true);
         thisDocument.removeEventListener("click", handleScreenEventForCancel, true);
@@ -135,7 +230,14 @@ export const ControlledMenuFr = (
       };
     }
     return () => {};
-  }, [handleScreenEventForSave, handleScreenEventForCancel, state, anchorRef]);
+  }, [
+    handleScreenEventForSave,
+    handleScreenEventForCancel,
+    state,
+    anchorRef,
+    handleKeydownTabAndEnter,
+    handleKeyupTabAndEnter,
+  ]);
 
   const itemSettings = useMemo(
     () => ({

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

@@ -1,4 +1,4 @@
-import { Ref, useContext, useMemo } from "react";
+import { KeyboardEvent, Ref, useContext, useMemo } from "react";
 import { useBEM, useItemState, useCombinedRef } from "../hooks";
 import { mergeProps, commonProps, safeCall, menuClass, menuItemClass, withHovering, Keys, RMEvent } from "../utils";
 import { BaseProps, ClickEvent, EventHandler, Hoverable, MenuItemTypeProp, RenderProp } from "../types";
@@ -106,7 +106,12 @@ const MenuItemFr = ({
       value,
       syntheticEvent: e,
     };
-    if (e.key !== undefined) event.key = e.key;
+
+    if (e.key !== undefined) {
+      const ke = e as KeyboardEvent;
+      event.key = ke.key;
+      event.shiftKey = ke.shiftKey;
+    }
     if (isCheckBox) event.checked = !isChecked;
     if (isRadio) event.name = radioGroup.name;
     safeCall(onClick, event);
@@ -114,6 +119,14 @@ const MenuItemFr = ({
     eventHandlers.handleClick(event, isCheckBox || isRadio);
   };
 
+  const handleKeyDown = (e: KeyboardEvent) => {
+    // if tab is allowed the handleKeyUp event can't process the tab
+    if (e.key === "Tab") {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
+
   /**
    * Keyboard events are triggered on up, otherwise sub-components get spaces and enters typed in them
    */
@@ -122,7 +135,10 @@ const MenuItemFr = ({
 
     switch (e.key) {
       case Keys.ENTER:
+      case Keys.TAB:
       case Keys.SPACE:
+        e.preventDefault();
+        e.stopPropagation();
         if (isAnchor) {
           menuItemRef?.current && menuItemRef.current.click();
         } else {
@@ -147,6 +163,7 @@ const MenuItemFr = ({
     {
       ...restStateProps,
       onPointerDown: setHover,
+      onKeyDown: handleKeyDown,
       onKeyUp: handleKeyUp,
       onClick: handleClick,
     },

package/src/react-menu3/types.ts

@@ -49,6 +49,8 @@ export interface Event {
    *  Indicates the key if the event is triggered by keyboard. Can be 'Enter', ' '(Space) or 'Escape'.
    */
   key?: string;
+
+  shiftKey?: boolean;
 }
 
 export interface MenuCloseEvent extends Event {

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

@@ -17,10 +17,12 @@ export interface RMEvent {
   checked?: boolean;
   name?: string;
   key?: string;
+  shiftKey?: boolean;
 }
 
 export const Keys = Object.freeze({
   ENTER: "Enter",
+  TAB: "Tab",
   ESC: "Escape",
   SPACE: " ",
   HOME: "Home",
@@ -47,6 +49,8 @@ export const CloseReason = Object.freeze({
   CANCEL: "cancel",
   BLUR: "blur",
   SCROLL: "scroll",
+  TAB_FORWARD: "tab_forward",
+  TAB_BACKWARD: "tab_backward",
 });
 
 export const FocusPositions = Object.freeze({

package/src/stories/grid/FormTest.tsx

@@ -6,6 +6,7 @@ import { wait } from "../../utils/util";
 import { CellEditorCommon } from "../../components/GridCell";
 import { useGridPopoverHook } from "../../components/GridPopoverHook";
 import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
+import { FormError } from "../../lui/FormError";
 
 export interface IFormTestRow {
   id: number;
@@ -37,10 +38,16 @@ export const FormTest = (props: CellEditorCommon): JSX.Element => {
     [nameType, numba],
   );
 
+  const invalid = useCallback(() => {
+    if (numba.length < 3) return "Number should be at least 3 characters";
+    return null;
+  }, [numba.length]);
+
   const [showModal, setShowModal] = useState<boolean>(false);
 
-  const { popoverWrapper, firstInputKeyboardEventHandlers, lastInputKeyboardEventHandlers } = useGridPopoverHook({
+  const { popoverWrapper, triggerSave } = useGridPopoverHook({
     className: props.className,
+    invalid,
     save,
   });
 
@@ -50,7 +57,7 @@ export const FormTest = (props: CellEditorCommon): JSX.Element => {
         <LuiAlertModal
           data-testid="WarningAlertWithButtons-modal"
           level="warning"
-          // If panel is popped out, append modal to poppped out window DOM, otherwise use default
+          // If panel is popped out, append modal to popped out window DOM, otherwise use default
           //appendToElement={() => (poppedOut && popoutElement) || document.body}
         >
           <h2>Header</h2>
@@ -73,6 +80,7 @@ export const FormTest = (props: CellEditorCommon): JSX.Element => {
               level="primary"
               onClick={() => {
                 setShowModal(false);
+                triggerSave().then();
               }}
               data-testid="WarningAlertWithButtons-ok"
             >
@@ -81,26 +89,21 @@ export const FormTest = (props: CellEditorCommon): JSX.Element => {
           </LuiAlertModalButtons>
         </LuiAlertModal>
       )}
-      <div style={{ display: "flex", flexDirection: "row" }} className={"FormTest Grid-popoverContainer"}>
-        <div className={"FormTest-textInput"}>
-          <LuiTextInput
-            label={"Name type"}
-            value={nameType}
-            onChange={(e) => setNameType(e.target.value)}
-            inputProps={firstInputKeyboardEventHandlers}
-          />
-        </div>
-        <div className={"FormTest-textInput"}>
-          <LuiTextInput
-            label={"Number"}
-            value={numba}
-            onChange={(e) => setNumba(e.target.value)}
-            inputProps={lastInputKeyboardEventHandlers}
-          />
-        </div>
-        <div className={"FormTest-textInput"}>
-          <LuiButton onClick={() => setShowModal(true)}>Show Modal</LuiButton>
+      <div className={"Grid-popoverContainer"}>
+        <div className="FormTest">
+          <div className={"FormTest-textInput"}>
+            <LuiTextInput label={"Name type"} value={nameType} onChange={(e) => setNameType(e.target.value)} />
+          </div>
+          <div className={"FormTest-textInput"}>
+            <LuiTextInput label={"Number"} value={numba} onChange={(e) => setNumba(e.target.value)} />
+          </div>
+          <div style={{ marginTop: 25 }}>
+            <LuiButton style={{ height: 48 }} onClick={() => setShowModal(true)}>
+              Show Modal
+            </LuiButton>
+          </div>
         </div>
+        <FormError error={invalid()} />
       </div>
     </>,
   );

package/src/stories/grid/GridPopoutBearing.stories.tsx

@@ -37,7 +37,7 @@ export default {
 
 interface ITestRow {
   id: number;
-  bearing1: number | null;
+  bearing1: string | number | null;
   bearingCorrection: number | null;
 }
 
@@ -85,8 +85,9 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
 
   const [rowData] = useState([
     { id: 1000, bearing1: 1.234, bearingCorrection: 90 },
-    { id: 1001, bearing1: 1.565, bearingCorrection: 240 },
+    { id: 1001, bearing1: "0E-12", bearingCorrection: 240 },
     { id: 1002, bearing1: null, bearingCorrection: 355.1 },
+    { id: 1003, bearing1: null, bearingCorrection: 0 },
   ] as ITestRow[]);
 
   return (

package/src/stories/grid/GridPopoutEditDropDown.stories.tsx

@@ -13,6 +13,7 @@ import { wait } from "../../utils/util";
 import { ColDefT, GridCell } from "../../components/GridCell";
 import { GridPopoverEditDropDown } from "../../components/gridPopoverEdit/GridPopoverEditDropDown";
 import { GridFormSubComponentTextInput } from "../../components/gridForm/GridFormSubComponentTextInput";
+import { GridPopoverMenu } from "../../components/gridPopoverEdit/GridPopoverMenu";
 
 export default {
   title: "Components / Grids",
@@ -280,11 +281,20 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
             onSelectedItem: async (selected) => {
               // eslint-disable-next-line no-console
               console.log("onSelectedItem", selected);
+              await wait(500);
               selected.selectedRows.forEach((row) => (row.sub = selected.subComponentValue ?? selected.value));
             },
           },
         },
       ),
+      GridPopoverMenu(
+        {},
+        {
+          editorParams: {
+            options: async () => [{ label: "Hello", action: async () => {}, supportsMultiEdit: true }],
+          },
+        },
+      ),
     ],
     [optionsFn, optionsObjects],
   );