@linzjs/step-ag-grid 2.2.1 → 2.3.0

package/dist/index.js

@@ -2710,7 +2710,11 @@ 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) { 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
+        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: {
                             position: "absolute",
                             left: 0,
@@ -2998,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;
@@ -3071,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;
@@ -3113,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}";
@@ -3296,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) {
@@ -3378,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) }));
 };
@@ -3406,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
@@ -3527,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;
@@ -3574,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) {
@@ -3584,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}";