@linzjs/step-ag-grid 2.2.0 → 2.2.2

package/package.json

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

package/src/components/GridPopoverHook.tsx

@@ -3,6 +3,7 @@ import { GridContext } from "../contexts/GridContext";
 import { GridBaseRow } from "./Grid";
 import { ControlledMenu } from "../react-menu3";
 import { GridPopoverContext } from "../contexts/GridPopoverContext";
+import { MenuCloseEvent } from "../react-menu3/types";
 
 export interface GridPopoverHookProps<RowType> {
   className: string | undefined;
@@ -45,10 +46,14 @@ export const useGridPopoverHook = <RowType extends GridBaseRow>(props: GridPopov
               anchorRef={anchorRef}
               saveButtonRef={saveButtonRef}
               menuClassName={"step-ag-grid-react-menu"}
-              onClose={(event: { reason: string }) => triggerSave(event.reason).then()}
+              onClose={(event: MenuCloseEvent) => {
+                if (event.reason === "blur") return;
+                triggerSave(event.reason).then();
+              }}
               viewScroll={"auto"}
               dontShrinkIfDirectionIsTop={true}
               className={props.className}
+              closeMenuExclusionClassName={"ReactModal__Content"}
             >
               {saving && ( // This is the overlay that prevents editing when the editor is saving
                 <div

package/src/index.ts

@@ -27,6 +27,9 @@ export { GridPopoverEditDropDown } from "./components/gridPopoverEdit/GridPopove
 export { GridPopoverMessage } from "./components/gridPopoverEdit/GridPopoverMessage";
 export { GridPopoverTextArea } from "./components/gridPopoverEdit/GridPopoverTextArea";
 export { GridPopoverTextInput } from "./components/gridPopoverEdit/GridPopoverTextInput";
+export * from "./components/gridForm/GridFormDropDown";
+export * from "./components/gridForm/GridFormMultiSelect";
+export * from "./components/gridForm/GridFormPopoutMenu";
 
 export { GridHeaderSelect } from "./components/gridHeader/GridHeaderSelect";
 

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

@@ -40,6 +40,7 @@ export const ControlledMenuFr = (
     onItemClick,
     onClose,
     saveButtonRef,
+    closeMenuExclusionClassName,
     ...restProps
   }: ControlledMenuProps & { saveButtonRef?: MutableRefObject<HTMLButtonElement | null> },
   externalRef: ForwardedRef<HTMLUListElement>,
@@ -75,14 +76,16 @@ export const ControlledMenuFr = (
     ],
   );
 
-  const clickIsWithinMenu = useCallback((ev: MouseEvent) => {
-    return hasParentClass("szh-menu--state-open", ev.target as Node);
-  }, []);
+  const clickIsWithinMenu = useCallback(
+    (ev: MouseEvent) =>
+      hasParentClass("szh-menu--state-open", ev.target as Node) ||
+      (closeMenuExclusionClassName && hasParentClass(closeMenuExclusionClassName, ev.target as Node)),
+    [closeMenuExclusionClassName],
+  );
 
   const handleScreenEventForSave = useCallback(
     (ev: MouseEvent) => {
       if (!clickIsWithinMenu(ev)) {
-        //!ev.currentTarget.contains(ev.relatedTarget || document.activeElement)) {
         ev.preventDefault();
         ev.stopPropagation();
         // FIXME There's an issue in React17

package/src/react-menu3/types.ts

@@ -439,4 +439,9 @@ export interface ControlledMenuProps extends RootMenuProps, ExtraMenuProps {
    * Event fired when menu is about to close.
    */
   onClose?: EventHandler<MenuCloseEvent>;
+
+  /**
+   * When clicking outside the menu to close, anything with this class will not cause a close.
+   */
+  closeMenuExclusionClassName?: string;
 }

package/src/stories/grid/FormTest.tsx

@@ -1,7 +1,7 @@
 import "./FormTest.scss";
 
 import { useCallback, useState } from "react";
-import { LuiTextInput } from "@linzjs/lui";
+import { LuiAlertModal, LuiAlertModalButtons, LuiButton, LuiTextInput } from "@linzjs/lui";
 import { wait } from "../../utils/util";
 import { CellEditorCommon, CellParams } from "../../components/GridCell";
 import { useGridPopoverHook } from "../../components/GridPopoverHook";
@@ -35,19 +35,59 @@ export const FormTest = <RowType extends GridBaseRow>(_props: CellEditorCommon):
     // Close form
     return true;
   }, [nameType, numba, plan, props.selectedRows]);
+
+  const [showModal, setShowModal] = useState<boolean>(false);
+
   const { popoverWrapper } = useGridPopoverHook({ className: _props.className, save });
 
   return popoverWrapper(
-    <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)} />
-      </div>
-      <div className={"FormTest-textInput"}>
-        <LuiTextInput label={"Number"} value={numba} onChange={(e) => setNumba(e.target.value)} />
-      </div>
-      <div className={"FormTest-textInput"}>
-        <LuiTextInput label={"Plan"} value={plan} onChange={(e) => setPlan(e.target.value)} />
+    <>
+      {showModal && (
+        <LuiAlertModal
+          data-testid="WarningAlertWithButtons-modal"
+          level="warning"
+          // If panel is popped out, append modal to poppped out window DOM, otherwise use default
+          //appendToElement={() => (poppedOut && popoutElement) || document.body}
+        >
+          <h2>Header</h2>
+          <p className="WarningAlertWithButtons-new-line">
+            This modal was added to help fix a bug where the onBlur for the context menu was prematurely closing the
+            editor and therefore this modal.
+          </p>
+          <LuiAlertModalButtons>
+            <LuiButton
+              level="secondary"
+              onClick={() => {
+                setShowModal(false);
+              }}
+              data-testid="WarningAlertWithButtons-cancel"
+            >
+              Cancel
+            </LuiButton>
+
+            <LuiButton
+              level="primary"
+              onClick={() => {
+                setShowModal(false);
+              }}
+              data-testid="WarningAlertWithButtons-ok"
+            >
+              OK
+            </LuiButton>
+          </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)} />
+        </div>
+        <div className={"FormTest-textInput"}>
+          <LuiTextInput label={"Number"} value={numba} onChange={(e) => setNumba(e.target.value)} />
+        </div>
+        <div className={"FormTest-textInput"}>
+          <LuiButton onClick={() => setShowModal(true)}>Show Modal</LuiButton>
+        </div>
       </div>
-    </div>,
+    </>,
   );
 };