@linzjs/step-ag-grid 2.2.2 → 2.3.1

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: {
@@ -3002,27 +3002,39 @@ var GridFormDropDown = function (_props) {
 
 var GridFormMultiSelect = function (props) {
     var selectedRows = props.selectedRows;
-    var _a = react.useState(""), filter = _a[0], setFilter = _a[1];
-    var _b = react.useState([]), filteredValues = _b[0], setFilteredValues = _b[1];
+    var initialiseValues = react.useMemo(function () { return props.initialSelectedValues && props.initialSelectedValues(selectedRows); }, [props, selectedRows]);
+    var subComponentIsValid = react.useRef({});
+    var _a = react.useState(initialiseValues && !Array.isArray(initialiseValues)
+        ? lodashEs.pickBy(initialiseValues, function (value) { return typeof value !== "boolean"; })
+        : {}), subSelectedValues = _a[0], setSubSelectedValues = _a[1];
+    var _b = react.useState(function () {
+        return initialiseValues ? (Array.isArray(initialiseValues) ? initialiseValues : Object.keys(initialiseValues)) : [];
+    }), selectedValues = _b[0], setSelectedValues = _b[1];
+    var _c = react.useState(""), filter = _c[0], setFilter = _c[1];
+    var _d = react.useState([]), filteredValues = _d[0], setFilteredValues = _d[1];
     var optionsInitialising = react.useRef(false);
-    var _c = react.useState(), options = _c[0], setOptions = _c[1];
-    var subSelectedValues = react.useRef({});
-    var _d = react.useState(function () {
-        return props.initialSelectedValues ? props.initialSelectedValues(selectedRows) : [];
-    }), selectedValues = _d[0], setSelectedValues = _d[1];
+    var _e = react.useState(), options = _e[0], setOptions = _e[1];
     var save = react.useCallback(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
-        var values;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
+        var validations, notValid, selectedOptions, selectedResults;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
                 case 0:
-                    values = lodashEs.fromPairs(selectedValues.map(function (value) { var _a; return [value, (_a = subSelectedValues.current[value]) !== null && _a !== void 0 ? _a : true]; }));
                     if (!props.onSave) return [3 /*break*/, 2];
-                    return [4 /*yield*/, props.onSave({ selectedRows: selectedRows, values: values })];
-                case 1: return [2 /*return*/, _a.sent()];
+                    validations = lodashEs.pick(subComponentIsValid.current, selectedValues);
+                    notValid = Object.values(validations).some(function (v) { return !v; });
+                    if (notValid)
+                        return [2 /*return*/, false];
+                    selectedOptions = (_a = selectedValues.map(function (row) { return (options !== null && options !== void 0 ? options : []).find(function (opt) { return opt.value == row; }); })) !== null && _a !== void 0 ? _a : [];
+                    selectedResults = selectedOptions.map(function (selectedOption) {
+                        return (__assign(__assign({}, selectedOption), { subValue: subSelectedValues["".concat(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value)] }));
+                    });
+                    return [4 /*yield*/, props.onSave(selectedRows, selectedResults)];
+                case 1: return [2 /*return*/, _b.sent()];
                 case 2: return [2 /*return*/, true];
             }
         });
-    }); }, [props, selectedValues]);
+    }); }, [options, props, selectedValues, subSelectedValues]);
     // Load up options list if it's async function
     react.useEffect(function () {
         var _a;
@@ -3075,7 +3087,7 @@ var GridFormMultiSelect = function (props) {
         })
             .filter(function (r) { return r !== undefined; }));
     }, [props.filtered, filter, options]);
-    var _e = useGridPopoverHook({ className: props.className, save: save }), popoverWrapper = _e.popoverWrapper, triggerSave = _e.triggerSave;
+    var _f = useGridPopoverHook({ className: props.className, save: save }), popoverWrapper = _f.popoverWrapper, triggerSave = _f.triggerSave;
     return popoverWrapper(jsxRuntime.jsx(ComponentLoadingWrapper, __assign({ loading: !options, className: "GridFormMultiSelect-container" }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [options && props.filtered && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FocusableItem, __assign({ className: "filter-item" }, { children: function (_a) {
                                 var _b;
                                 var ref = _a.ref;
@@ -3117,16 +3129,23 @@ var GridFormMultiSelect = function (props) {
                                         } }) }), "".concat(index)), selectedValues.includes(item.value) && item.subComponent && (jsxRuntime.jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) {
                                         return item.subComponent &&
                                             item.subComponent({
+                                                ref: ref,
+                                                value: subSelectedValues["".concat(item.value)],
                                                 setValue: function (value) {
-                                                    subSelectedValues.current[item.value] = value;
-                                                }
-                                            }, ref);
+                                                    subSelectedValues["".concat(item.value)] = value;
+                                                    setSubSelectedValues(__assign({}, subSelectedValues));
+                                                },
+                                                setValid: function (valid) {
+                                                    subComponentIsValid.current["".concat(item.value)] = valid;
+                                                },
+                                                triggerSave: triggerSave
+                                            });
                                     } }), "".concat(item.value, "_subcomponent")))] }, "".concat(index)));
                     }) }))] }) })));
 };
 
 var GridPopoutEditMultiSelect = function (colDef, props) {
-    return GridCell(__assign({ initialWidth: 65, maxWidth: 150 }, colDef), __assign(__assign({ editor: GridFormMultiSelect }, props), { editorParams: __assign({ className: "GridMultiSelect-containerMedium" }, props.editorParams) }));
+    return GridCell(colDef, __assign(__assign({ editor: GridFormMultiSelect }, props), { editorParams: __assign({ className: "GridMultiSelect-containerMedium" }, props.editorParams) }));
 };
 
 var css_248z$3 = ".GridPopoutMenu-burger{cursor:pointer}.GridPopoutMenu-burger svg{fill:#007198}.GridPopoutMenu-burgerDisabled svg{fill:#989189}";
@@ -3300,7 +3319,7 @@ var css_248z$1 = ".LuiTextInput{margin-bottom:0}.LuiTextInput-formatted{color:#b
 styleInject(css_248z$1);
 
 var TextInputFormatted = function (props) {
-    return (jsxRuntime.jsxs("div", __assign({ className: clsx("LuiTextInput Grid-popoverContainer", props.error && "hasError", props.warning && "hasWarning", props.className) }, { children: [jsxRuntime.jsxs("span", __assign({ className: "LuiTextInput-inputWrapper" }, { children: [jsxRuntime.jsx("input", __assign({ type: "text", className: "LuiTextInput-input", min: "0", value: props.value, onChange: props.onChange }, props.inputProps)), jsxRuntime.jsx("span", __assign({ className: "LuiTextInput-formatted" }, { children: props.formatted }))] })), props.error && (jsxRuntime.jsxs("span", __assign({ className: "LuiTextInput-error" }, { children: [jsxRuntime.jsx(lui.LuiIcon, { alt: "error", name: "ic_error", className: "LuiTextInput-error-icon", size: "sm", status: "error" }), props.error] }))), props.warning && (jsxRuntime.jsxs("span", __assign({ className: "LuiTextInput-warning" }, { children: [jsxRuntime.jsx(lui.LuiIcon, { alt: "warning", name: "ic_warning", className: "LuiTextInput-warning-icon", size: "sm", status: "warning" }), props.warning] })))] })));
+    return (jsxRuntime.jsxs("div", __assign({ className: clsx("LuiTextInput Grid-popoverContainer", props.error && "hasError", props.warning && "hasWarning", props.className) }, { children: [jsxRuntime.jsxs("span", __assign({ className: "LuiTextInput-inputWrapper" }, { children: [jsxRuntime.jsx("input", __assign({ type: "text", className: "LuiTextInput-input", min: "0", spellCheck: true, defaultValue: props.value, onChange: props.onChange }, props.inputProps)), jsxRuntime.jsx("span", __assign({ className: "LuiTextInput-formatted" }, { children: props.formatted }))] })), props.error && (jsxRuntime.jsxs("span", __assign({ className: "LuiTextInput-error" }, { children: [jsxRuntime.jsx(lui.LuiIcon, { alt: "error", name: "ic_error", className: "LuiTextInput-error-icon", size: "sm", status: "error" }), props.error] }))), props.warning && (jsxRuntime.jsxs("span", __assign({ className: "LuiTextInput-warning" }, { children: [jsxRuntime.jsx(lui.LuiIcon, { alt: "warning", name: "ic_warning", className: "LuiTextInput-warning-icon", size: "sm", status: "warning" }), props.warning] })))] })));
 };
 
 var GridFormEditBearing = function (_props) {
@@ -3382,7 +3401,7 @@ var GridPopoverEditBearingCorrection = function (colDef, props) {
 };
 
 var GridPopoverEditDropDown = function (colDef, props) {
-    return GridCell(__assign({ initialWidth: 65, maxWidth: 150 }, colDef), __assign(__assign({ editor: GridFormDropDown }, props), { editorParams: __assign({ 
+    return GridCell(colDef, __assign(__assign({ editor: GridFormDropDown }, props), { editorParams: __assign({ 
             // Defaults to medium size container
             className: "GridPopoverEditDropDown-containerMedium" }, props.editorParams) }));
 };
@@ -3410,7 +3429,7 @@ var GridFormMessage = function (_props) {
 };
 
 var GridPopoverMessage = function (colDef, props) {
-    return GridCell(__assign(__assign({ maxWidth: 140 }, colDef), { cellRendererParams: __assign({ singleClickEdit: true }, colDef.cellRendererParams) }), __assign({ editor: GridFormMessage }, props));
+    return GridCell(__assign(__assign({}, colDef), { cellRendererParams: __assign({ singleClickEdit: true }, colDef.cellRendererParams) }), __assign({ editor: GridFormMessage }, props));
 };
 
 // Unique ID creation requires a high quality random # generator. In the browser we therefore
@@ -3531,9 +3550,7 @@ var GridFormTextArea = function (_props) {
     return popoverWrapper(jsxRuntime.jsx("div", __assign({ style: { display: "flex", flexDirection: "row", width: (_b = props.width) !== null && _b !== void 0 ? _b : 240 } }, { children: jsxRuntime.jsx(TextAreaInput, { value: value, onChange: function (e) { return setValue(e.target.value); }, error: invalid(), inputProps: { placeholder: props.placeholder } }) })));
 };
 
-var GridPopoverTextArea = function (colDef, params) {
-    return GridCell(__assign({ maxWidth: 260 }, colDef), __assign({ editor: GridFormTextArea }, params));
-};
+var GridPopoverTextArea = function (colDef, params) { return GridCell(colDef, __assign({ editor: GridFormTextArea }, params)); };
 
 var GridFormTextInput = function (_props) {
     var _a;
@@ -3578,7 +3595,12 @@ var GridFormTextInput = function (_props) {
         });
     }); }, [invalid, value, initValue, props]);
     var _c = useGridPopoverHook({ className: props.className, save: save }), popoverWrapper = _c.popoverWrapper, triggerSave = _c.triggerSave;
-    return popoverWrapper(jsxRuntime.jsx("div", __assign({ style: { display: "flex", flexDirection: "row", width: (_a = props.width) !== null && _a !== void 0 ? _a : 240 }, className: "FormTest" }, { children: jsxRuntime.jsx(TextInputFormatted, { value: value, onChange: function (e) { return setValue(e.target.value); }, error: invalid(), formatted: props.units, inputProps: {
+    return popoverWrapper(jsxRuntime.jsx("div", __assign({ style: { display: "flex", flexDirection: "row", width: (_a = props.width) !== null && _a !== void 0 ? _a : 240 }, className: "FormTest" }, { children: jsxRuntime.jsx(TextInputFormatted, { value: value, onChange: function (e) { return setValue(e.target.value); }, error: invalid(), formatted: props.units, onMouseEnter: function (e) {
+                if (document.activeElement != e.currentTarget) {
+                    e.currentTarget.focus();
+                    e.currentTarget.selectionStart = e.currentTarget.value.length;
+                }
+            }, inputProps: {
                 style: { width: "100%" },
                 placeholder: props.placeholder,
                 onKeyDown: function (e) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
@@ -3588,15 +3610,38 @@ var GridFormTextInput = function (_props) {
 };
 
 var GridPopoverTextInput = function (colDef, params) {
-    return GridCell(__assign({ maxWidth: 140 }, colDef), __assign({ editor: GridFormTextInput }, params));
+    return GridCell(colDef, __assign({ editor: GridFormTextInput }, params));
 };
 
 var GridSubComponentTextArea = function (props) {
-    var _a = react.useState(""), value = _a[0], setValue = _a[1];
+    var value = props.value, setValue = props.setValue, setValid = props.setValid, triggerSave = props.triggerSave;
+    var validate = react.useCallback(function (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.validate) {
+            return props.validate(value);
+        }
+        return null;
+    }, [props]);
     react.useEffect(function () {
-        props.setValue(value);
-    }, [props, value]);
-    return (jsxRuntime.jsx("div", __assign({ className: "FreeTextInput LuiDeprecatedForms" }, { children: jsxRuntime.jsx("textarea", { autoFocus: true, maxLength: 10000, spellCheck: true, className: "free-text-input", onChange: function (e) { return setValue(e.target.value); }, defaultValue: value }) })));
+        setValid(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) {
+                    e.currentTarget.focus();
+                    e.currentTarget.selectionStart = e.currentTarget.value.length;
+                }
+            }, onChange: function (e) { return setValue(e.target.value); }, error: validate(value), inputProps: {
+                autoFocus: true,
+                placeholder: props.placeholder,
+                onKeyDown: function (e) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+                    return [2 /*return*/, e.key === "Enter" && triggerSave().then()];
+                }); }); }
+            } }) })));
 };
 
 var css_248z = ".ActionButton{align-items:center;display:flex}.ActionButton .LuiIcon{margin:0 4px!important}.ActionButton-minimalArea{position:relative}.ActionButton-minimalAreaDisplay{position:absolute}.ActionButton-minimalAreaExpand{visibility:hidden}.ActionButton-inProgress{background-color:#e2f3f7!important;color:#007198!important;cursor:progress}.ActionButton-inProgress svg *{fill:#0000!important}";