@linzjs/step-ag-grid 4.0.3 → 5.0.0

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,14 +38,18 @@ 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, triggerSave } =
-    useGridPopoverHook({
-      className: props.className,
-      invalid: () => numba.length < 3,
-      save,
-    });
+  const { popoverWrapper, triggerSave } = useGridPopoverHook({
+    className: props.className,
+    invalid,
+    save,
+  });
 
   return popoverWrapper(
     <>
@@ -84,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/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],
   );

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

@@ -81,7 +81,7 @@ const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridPro
               {
                 value: "other",
                 label: "Other",
-                subComponent: () => <GridFormSubComponentTextArea maxLength={5} defaultValue={""} />,
+                subComponent: () => <GridFormSubComponentTextArea required={true} maxLength={5} defaultValue={""} />,
               },
             ],
             initialSelectedValues: () => ({

package/src/stories/grid/GridReadOnly.stories.tsx

@@ -109,7 +109,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
                     alert(`Single-edit: ${selectedRows.length} rows`);
                     await wait(1500);
                   },
-                  supportsMultiEdit: false,
+                  disabled: selectedItems.length > 1,
                 },
                 {
                   label: "Multi-edit",
@@ -117,36 +117,36 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
                     alert(`Multi-edit: ${selectedRows.length} rows`);
                     await wait(1500);
                   },
-                  supportsMultiEdit: true,
                 },
                 {
                   label: "Disabled item",
                   disabled: "Disabled for test",
-                  supportsMultiEdit: true,
                 },
                 {
                   label: "Developer Only",
                   hidden: selectedItems.some((x) => x.position != "Developer"),
-                  supportsMultiEdit: true,
                 },
                 {
                   label: "Other (TextInput)",
-                  supportsMultiEdit: true,
-                  action: (_, menuOptionResult) => {
-                    alert(`Sub selected value was ${JSON.stringify(menuOptionResult.subValue)}`);
+                  action: async (_, menuOptionResult) => {
+                    // eslint-disable-next-line no-console
+                    console.log(`Sub selected value was ${JSON.stringify(menuOptionResult.subValue)}`);
+                    await wait(500);
                   },
                   subComponent: () => (
-                    <GridFormSubComponentTextInput placeholder={"Other"} maxLength={2} required defaultValue={""} />
+                    <GridFormSubComponentTextInput placeholder={"Other"} maxLength={5} required defaultValue={""} />
                   ),
                 },
                 {
                   label: "Other (TextArea)",
                   supportsMultiEdit: true,
-                  action: (_, menuOptionResult) => {
-                    alert(`Sub selected value was ${JSON.stringify(menuOptionResult.subValue)}`);
+                  action: async (_, menuOptionResult) => {
+                    // eslint-disable-next-line no-console
+                    console.log(`Sub selected value was ${JSON.stringify(menuOptionResult.subValue)}`);
+                    await wait(500);
                   },
                   subComponent: () => (
-                    <GridFormSubComponentTextArea placeholder={"Other"} maxLength={2} required defaultValue={""} />
+                    <GridFormSubComponentTextArea placeholder={"Other"} maxLength={5} required defaultValue={""} />
                   ),
                 },
               ] as MenuOption<ITestRow>[];

package/src/styles/GridFormDropDown.scss

@@ -4,7 +4,7 @@
 }
 
 .GridPopoverEditDropDown-containerMedium .GridFormDropDown-options {
-  max-height: 200px;
+  max-height: 220px;
   overflow-y: auto;
 }