@linzjs/step-ag-grid 2.4.0 → 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,7 +2997,40 @@ 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"))) }));
                         })] }) }))] }));
 };
 
@@ -3627,6 +3661,25 @@ 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 _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
@@ -3774,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;