@linzjs/step-ag-grid 2.2.1 → 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.1",
+  "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,7 +46,10 @@ 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}

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