@linzjs/step-ag-grid 2.3.1 → 2.4.1

package/dist/index.js

@@ -2840,7 +2840,8 @@ var GridFormDropDown = function (_props) {
     var _c = react.useState([]), filteredValues = _c[0], setFilteredValues = _c[1];
     var optionsInitialising = react.useRef(false);
     var _d = react.useState(null), options = _d[0], setOptions = _d[1];
-    var selectItemHandler = react.useCallback(function (value) { return __awaiter(void 0, void 0, void 0, function () {
+    var _e = react.useState([]), subComponentValues = _e[0], setSubComponentValues = _e[1];
+    var selectItemHandler = react.useCallback(function (value, subComponentValue) { return __awaiter(void 0, void 0, void 0, function () {
         var field;
         return __generator(this, function (_a) {
             switch (_a.label) {
@@ -2854,7 +2855,7 @@ var GridFormDropDown = function (_props) {
                                         hasChanged = selectedRows.some(function (row) { return row[field] !== value; });
                                         if (!hasChanged) return [3 /*break*/, 3];
                                         if (!props.onSelectedItem) return [3 /*break*/, 2];
-                                        return [4 /*yield*/, props.onSelectedItem({ selectedRows: selectedRows, value: value })];
+                                        return [4 /*yield*/, props.onSelectedItem({ selectedRows: selectedRows, value: value, subComponentValue: subComponentValue })];
                                     case 1:
                                         _a.sent();
                                         return [3 /*break*/, 3];
@@ -2996,10 +2997,59 @@ var GridFormDropDown = function (_props) {
                             return (jsxRuntime.jsx("div", __assign({ style: { display: "flex", width: "100%" } }, { children: jsxRuntime.jsx("input", { autoFocus: true, className: "free-text-input", style: { border: "0px" }, ref: ref, type: "text", placeholder: (_b = props.filterPlaceholder) !== null && _b !== void 0 ? _b : "Placeholder", "data-testid": "filteredMenu-free-text-input", defaultValue: filter, onChange: function (e) { return setFilter(e.target.value.toLowerCase()); }, onKeyDown: function (e) { return onFilterKeyDown(e); } }) })));
                         } })), jsxRuntime.jsx(MenuDivider, {}, "$$divider_filter")] }))), jsxRuntime.jsx(ComponentLoadingWrapper, __assign({ loading: !options, className: "GridFormDropDown-options" }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [options && options.length == (filteredValues === null || filteredValues === void 0 ? void 0 : filteredValues.length) && jsxRuntime.jsx(MenuItem, { children: "[Empty]" }), options === null || options === void 0 ? void 0 : options.map(function (item, index) {
                             var _a;
-                            return item.value === MenuSeparatorString ? (jsxRuntime.jsx(MenuDivider, {}, "$$divider_".concat(index))) : item.value === MenuHeaderString ? (jsxRuntime.jsx(MenuHeader, { children: item.label })) : filteredValues.includes(item.value) ? null : (jsxRuntime.jsx(MenuItem, __assign({ disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", value: item.value, onClick: function () { return selectItemHandler(item.value); } }, { children: (_a = item.label) !== null && _a !== void 0 ? _a : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value)) }), "".concat(props.field, "-").concat(index)));
+                            return item.value === MenuSeparatorString ? (jsxRuntime.jsx(MenuDivider, {}, "$$divider_".concat(index))) : item.value === MenuHeaderString ? (jsxRuntime.jsx(MenuHeader, { children: item.label })) : filteredValues.includes(item.value) ? null : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !item.subComponent ? (jsxRuntime.jsx(MenuItem, __assign({ disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", value: item.value, onClick: function () {
+                                        selectItemHandler(item.value);
+                                    } }, { children: (_a = item.label) !== null && _a !== void 0 ? _a : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value)) }), "".concat(props.field, "-").concat(index))) : (jsxRuntime.jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) {
+                                        return item.subComponent &&
+                                            item.subComponent({
+                                                setValue: function (value) {
+                                                    var localSubComponentValues = __spreadArray([], subComponentValues, true);
+                                                    var subComponentValueIndex = localSubComponentValues.findIndex(function (_a) {
+                                                        var optionValue = _a.optionValue;
+                                                        return optionValue === item.value;
+                                                    });
+                                                    if (subComponentValueIndex !== -1) {
+                                                        localSubComponentValues[subComponentValueIndex].subComponentValue = value;
+                                                    }
+                                                    else {
+                                                        localSubComponentValues.push({
+                                                            subComponentValue: value,
+                                                            optionValue: item.value
+                                                        });
+                                                    }
+                                                    setSubComponentValues(localSubComponentValues);
+                                                },
+                                                keyDown: function (key) {
+                                                    var subComponentItem = subComponentValues.find(function (_a) {
+                                                        var optionValue = _a.optionValue;
+                                                        return optionValue === item.value;
+                                                    });
+                                                    if (key === "Enter" && subComponentItem) {
+                                                        selectItemHandler(item.value, subComponentItem.subComponentValue);
+                                                        ref.closeMenu();
+                                                    }
+                                                }
+                                            }, ref);
+                                    } }), "".concat(props.field, "-").concat(index, "_subcomponent"))) }));
                         })] }) }))] }));
 };
 
+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 +3176,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 +3187,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 +3563,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 +3610,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);
@@ -3613,14 +3661,44 @@ var GridPopoverTextInput = function (colDef, params) {
     return GridCell(colDef, __assign({ editor: GridFormTextInput }, params));
 };
 
+var GridFormSubComponentTextInput = function (_a) {
+    var keyDown = _a.keyDown, placeholder = _a.placeholder, setValue = _a.setValue;
+    var placeholderText = placeholder || "Other...";
+    var _b = react.useState(""), inputValue = _b[0], setInputValue = _b[1];
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(TextInputFormatted, { value: inputValue, onChange: function (e) {
+                var value = e.target.value;
+                setValue(value);
+                setInputValue(value);
+            }, inputProps: {
+                onKeyDown: function (k) { return keyDown(k.key); },
+                placeholder: placeholderText,
+                onMouseEnter: function (e) {
+                    if (document.activeElement != e.currentTarget) {
+                        e.currentTarget.focus();
+                    }
+                }
+            } }) }));
+};
+
 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 +3706,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) {
@@ -3749,6 +3827,7 @@ exports.GridContextProvider = GridContextProvider;
 exports.GridFormDropDown = GridFormDropDown;
 exports.GridFormMultiSelect = GridFormMultiSelect;
 exports.GridFormPopoutMenu = GridFormPopoutMenu;
+exports.GridFormSubComponentTextInput = GridFormSubComponentTextInput;
 exports.GridHeaderSelect = GridHeaderSelect;
 exports.GridIcon = GridIcon;
 exports.GridLoadableCell = GridLoadableCell;