@linzjs/step-ag-grid 2.3.0 → 2.4.0

package/dist/index.js

@@ -1305,12 +1305,12 @@ var ControlledMenuFr = function (_a, externalRef) {
         reposition,
         viewScroll,
     ]);
-    var clickIsWithinMenu = react.useCallback(function (ev) {
-        return hasParentClass("szh-menu--state-open", ev.target) ||
-            (closeMenuExclusionClassName && hasParentClass(closeMenuExclusionClassName, ev.target));
+    var isWithinMenu = react.useCallback(function (target) {
+        return hasParentClass("szh-menu--state-open", target) ||
+            (closeMenuExclusionClassName && hasParentClass(closeMenuExclusionClassName, target));
     }, [closeMenuExclusionClassName]);
     var handleScreenEventForSave = react.useCallback(function (ev) {
-        if (!clickIsWithinMenu(ev)) {
+        if (!isWithinMenu(ev.target)) {
             ev.preventDefault();
             ev.stopPropagation();
             // FIXME There's an issue in React17
@@ -1332,13 +1332,13 @@ var ControlledMenuFr = function (_a, externalRef) {
                 setTimeout(function () { return (skipOpen.current = false); }, 300);
             }
         }
-    }, [clickIsWithinMenu, onClose, saveButtonRef, skipOpen]);
+    }, [isWithinMenu, onClose, saveButtonRef, skipOpen]);
     var handleScreenEventForCancel = react.useCallback(function (ev) {
-        if (!clickIsWithinMenu(ev)) {
+        if (!isWithinMenu(ev.target)) {
             ev.preventDefault();
             ev.stopPropagation();
         }
-    }, [clickIsWithinMenu]);
+    }, [isWithinMenu]);
     react.useEffect(function () {
         if (isMenuOpen(state)) {
             var thisDocument_1 = (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) ? anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current.ownerDocument : document;
@@ -1391,7 +1391,9 @@ var ControlledMenuFr = function (_a, externalRef) {
         }
     };
     var onBlur = function (e) {
-        if (isMenuOpen(state) && !e.currentTarget.contains(e.relatedTarget || document.activeElement)) {
+        if (isMenuOpen(state) &&
+            !e.currentTarget.contains(e.relatedTarget || document.activeElement) &&
+            !isWithinMenu(e.relatedTarget)) {
             safeCall(onClose, { reason: CloseReason.BLUR });
             // If a user clicks on the menu button when a menu is open, we need to close the menu.
             // However, a blur event will be fired prior to the click event on menu button,
@@ -2711,8 +2713,6 @@ var useGridPopoverHook = function (props) {
     }); }, [props, stopEditing, propsRef]);
     var popoverWrapper = react.useCallback(function (children) {
         return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: anchorRef.current && (jsxRuntime.jsxs(ControlledMenu, __assign({ state: isOpen ? "open" : "closed", portal: true, unmountOnClose: true, anchorRef: anchorRef, saveButtonRef: saveButtonRef, menuClassName: "step-ag-grid-react-menu", onClose: function (event) {
-                    if (event.reason === "blur")
-                        return;
                     triggerSave(event.reason).then();
                 }, viewScroll: "auto", dontShrinkIfDirectionIsTop: true, className: props.className, closeMenuExclusionClassName: "ReactModal__Content" }, { children: [saving && ( // This is the overlay that prevents editing when the editor is saving
                     jsxRuntime.jsx("div", { style: {
@@ -3000,6 +3000,22 @@ var GridFormDropDown = function (_props) {
                         })] }) }))] }));
 };
 
+var GridSubComponentContext = react.createContext({
+    value: "GridSubComponentContext value no context",
+    setValue: function () {
+        console.error("GridSubComponentContext setValue no context");
+    },
+    setValid: function () {
+        console.error("GridSubComponentContext setValid no context");
+    },
+    triggerSave: function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            console.error("GridSubComponentContext triggerSave no context");
+            return [2 /*return*/];
+        });
+    }); }
+});
+
 var GridFormMultiSelect = function (props) {
     var selectedRows = props.selectedRows;
     var initialiseValues = react.useMemo(function () { return props.initialSelectedValues && props.initialSelectedValues(selectedRows); }, [props, selectedRows]);
@@ -3126,10 +3142,8 @@ var GridFormMultiSelect = function (props) {
                                             }
                                         }, onChange: function () {
                                             /*Do nothing, change handled by menuItem*/
-                                        } }) }), "".concat(index)), selectedValues.includes(item.value) && item.subComponent && (jsxRuntime.jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) {
-                                        return item.subComponent &&
-                                            item.subComponent({
-                                                ref: ref,
+                                        } }) }), "".concat(index)), selectedValues.includes(item.value) && item.subComponent && (jsxRuntime.jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (_) {
+                                        return item.subComponent && (jsxRuntime.jsx(GridSubComponentContext.Provider, __assign({ value: {
                                                 value: subSelectedValues["".concat(item.value)],
                                                 setValue: function (value) {
                                                     subSelectedValues["".concat(item.value)] = value;
@@ -3139,7 +3153,7 @@ var GridFormMultiSelect = function (props) {
                                                     subComponentIsValid.current["".concat(item.value)] = valid;
                                                 },
                                                 triggerSave: triggerSave
-                                            });
+                                            } }, { children: jsxRuntime.jsx(item.subComponent, {}) })));
                                     } }), "".concat(item.value, "_subcomponent")))] }, "".concat(index)));
                     }) }))] }) })));
 };
@@ -3515,8 +3529,8 @@ var GridFormTextArea = function (_props) {
         if (props.required && value.length == 0) {
             return "Some text is required";
         }
-        if (props.maxlength && value.length > props.maxlength) {
-            return "Text must be no longer than ".concat(props.maxlength, " characters");
+        if (props.maxLength && value.length > props.maxLength) {
+            return "Text must be no longer than ".concat(props.maxLength, " characters");
         }
         if (props.validate) {
             return props.validate(value);
@@ -3562,8 +3576,8 @@ var GridFormTextInput = function (_props) {
         if (props.required && trimmedValue.length == 0) {
             return "Some text is required";
         }
-        if (props.maxlength && trimmedValue.length > props.maxlength) {
-            return "Text must be no longer than ".concat(props.maxlength, " characters");
+        if (props.maxLength && trimmedValue.length > props.maxLength) {
+            return "Text must be no longer than ".concat(props.maxLength, " characters");
         }
         if (props.validate) {
             return props.validate(trimmedValue, props.data);
@@ -3614,13 +3628,24 @@ var GridPopoverTextInput = function (colDef, params) {
 };
 
 var GridSubComponentTextArea = function (props) {
-    var value = props.value, setValue = props.setValue, setValid = props.setValid, triggerSave = props.triggerSave;
+    var _a = react.useContext(GridSubComponentContext), value = _a.value, setValue = _a.setValue, setValid = _a.setValid, triggerSave = _a.triggerSave;
+    // If is not initialised yet as it's just been created then set the default value
+    react.useEffect(function () {
+        if (value == null)
+            setValue(props.defaultValue);
+    }, [props.defaultValue, setValue, value]);
     var validate = react.useCallback(function (value) {
+        if (value == null)
+            return null;
+        // This can happen because subcomponent is invoked without type safety
+        if (typeof value !== "string") {
+            console.error("Value is not a string", value);
+        }
         if (props.required && value.length === 0) {
             return "Some text is required";
         }
-        if (props.maxlength && value.length > props.maxlength) {
-            return "Text must be no longer than ".concat(props.maxlength, " characters");
+        if (props.maxLength && value.length > props.maxLength) {
+            return "Text must be no longer than ".concat(props.maxLength, " characters");
         }
         if (props.validate) {
             return props.validate(value);
@@ -3628,7 +3653,7 @@ var GridSubComponentTextArea = function (props) {
         return null;
     }, [props]);
     react.useEffect(function () {
-        setValid(validate(value) == null);
+        setValid(value != null && validate(value) == null);
     }, [setValid, validate, value]);
     return (jsxRuntime.jsx("div", __assign({ className: "FreeTextInput LuiDeprecatedForms" }, { children: jsxRuntime.jsx(TextInputFormatted, { className: "free-text-input", value: value, onMouseEnter: function (e) {
                 if (document.activeElement != e.currentTarget) {