@linzjs/step-ag-grid 7.0.2 → 7.0.3

package/dist/index.js

@@ -3084,6 +3084,13 @@ function defer() {
   return deferred;
 }
 
+var css_248z$4 = ".helpText{color:#6b6966;font-size:.75rem;font-weight:400}";
+styleInject(css_248z$4);
+
+var FormError = function (props) {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.error && (jsxRuntime.jsx("span", __assign({ className: "LuiTextInput-error", style: { paddingLeft: 0 } }, { children: props.error }))), props.helpText && !props.error && jsxRuntime.jsx("span", __assign({ className: "helpText" }, { children: props.helpText }))] }));
+};
+
 var MenuSeparatorString = "_____MENU_SEPARATOR_____";
 var MenuSeparator = Object.freeze({ value: MenuSeparatorString });
 var MenuHeaderString = "_____MENU_HEADER_____";
@@ -3094,6 +3101,7 @@ var fieldToString = function (field) {
     return typeof field == "symbol" ? field.toString() : "".concat(field);
 };
 var GridFormDropDown = function (props) {
+    var stopEditing = react.useContext(GridContext).stopEditing;
     var _a = useGridPopoverContext(), selectedRows = _a.selectedRows, field = _a.field, updateValue = _a.updateValue, data = _a.data;
     // Save triggers during async action processing which triggers another selectItem(), this ref blocks that
     var _b = react.useState(""), filter = _b[0], setFilter = _b[1];
@@ -3140,22 +3148,27 @@ var GridFormDropDown = function (props) {
     }); }, [selectItemHandler, updateValue]);
     var selectFilterHandler = react.useCallback(function (value) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
-            return [2 /*return*/, updateValue(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
-                    var _a;
-                    return __generator(this, function (_b) {
-                        switch (_b.label) {
-                            case 0:
-                                _a = props.onSelectFilter;
-                                if (!_a) return [3 /*break*/, 2];
-                                return [4 /*yield*/, props.onSelectFilter({ selectedRows: selectedRows, value: value })];
-                            case 1:
-                                _a = (_b.sent());
-                                _b.label = 2;
-                            case 2:
-                                return [2 /*return*/, true];
-                        }
-                    });
-                }); }, 0)];
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, updateValue(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
+                        var _a;
+                        return __generator(this, function (_b) {
+                            switch (_b.label) {
+                                case 0:
+                                    _a = props.onSelectFilter;
+                                    if (!_a) return [3 /*break*/, 2];
+                                    return [4 /*yield*/, props.onSelectFilter({ selectedRows: selectedRows, value: value })];
+                                case 1:
+                                    _a = (_b.sent());
+                                    _b.label = 2;
+                                case 2:
+                                    return [2 /*return*/, true];
+                            }
+                        });
+                    }); }, 0)];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
         });
     }); }, [props, updateValue]);
     // Load up options list if it's async function
@@ -3211,7 +3224,7 @@ var GridFormDropDown = function (props) {
                     return undefined;
                 }
                 var str = option.label || "";
-                return str.toLowerCase().indexOf(filter) === -1 ? option.value : undefined;
+                return str.toLowerCase().indexOf(filter.toLowerCase()) === -1 ? option.value : undefined;
             })
                 .filter(function (r) { return r !== undefined; }));
         }
@@ -3232,56 +3245,65 @@ var GridFormDropDown = function (props) {
      * Saves are wrapped in updateValue and triggered by blur events
      */
     var save = react.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var activeOptions;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     if (!options)
                         return [2 /*return*/, true];
-                    activeOptions = options.filter(function (option) { return !filteredValues.includes(option.value); });
-                    if (!(activeOptions.length === 1)) return [3 /*break*/, 2];
-                    return [4 /*yield*/, selectItemHandler(activeOptions[0].value)];
-                case 1:
-                    _a.sent();
-                    return [3 /*break*/, 6];
-                case 2:
-                    if (!(activeOptions.length === 0 && props.onSelectFilter)) return [3 /*break*/, 4];
-                    return [4 /*yield*/, selectFilterHandler(filter)];
-                case 3:
-                    _a.sent();
-                    return [3 /*break*/, 6];
-                case 4:
                     // Handler for sub-selected value
                     if (!selectedSubComponent)
                         return [2 /*return*/, true];
                     if (selectedSubComponent.subComponent && !subComponentIsValid.current)
                         return [2 /*return*/, false];
                     return [4 /*yield*/, selectItemHandler(selectedSubComponent.value, subSelectedValue)];
-                case 5:
+                case 1:
                     _a.sent();
-                    _a.label = 6;
-                case 6: return [2 /*return*/, true];
+                    return [2 /*return*/, true];
             }
         });
-    }); }, [
-        filter,
-        filteredValues,
-        options,
-        props.onSelectFilter,
-        selectFilterHandler,
-        selectItemHandler,
-        selectedSubComponent,
-        subSelectedValue,
-    ]);
+    }); }, [options, selectItemHandler, selectedSubComponent, subSelectedValue]);
     var popoverWrapper = useGridPopoverHook({
         className: props.className,
         invalid: function () { return !!(selectedSubComponent && !subComponentIsValid.current); },
         save: save
     }).popoverWrapper;
+    var enterKeyPressedRef = react.useRef(false);
+    var handleKeyDown = react.useCallback(function (e) {
+        if (e.key === "Enter") {
+            e.stopPropagation();
+            e.preventDefault();
+            enterKeyPressedRef.current = true;
+        }
+    }, []);
+    var handleKeyUp = react.useCallback(function (e) { return __awaiter(void 0, void 0, void 0, function () {
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    if (!options)
+                        return [2 /*return*/];
+                    if (!(e.key === "Enter")) return [3 /*break*/, 3];
+                    e.stopPropagation();
+                    e.preventDefault();
+                    if (!enterKeyPressedRef.current)
+                        return [2 /*return*/];
+                    _a = props.onSelectFilter;
+                    if (!_a) return [3 /*break*/, 2];
+                    return [4 /*yield*/, selectFilterHandler(filter)];
+                case 1:
+                    _a = (_b.sent());
+                    _b.label = 2;
+                case 2:
+                    stopEditing();
+                    _b.label = 3;
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); }, [filter, options, props.onSelectFilter, selectFilterHandler, stopEditing]);
     return popoverWrapper(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.filtered && (jsxRuntime.jsxs("div", __assign({ className: "GridFormDropDown-filter" }, { children: [jsxRuntime.jsx(FocusableItem, __assign({ className: "filter-item" }, { children: function (_a) {
                             var _b;
                             var ref = _a.ref;
-                            return (jsxRuntime.jsx("div", __assign({ style: { display: "flex", width: "100%" } }, { children: jsxRuntime.jsx("input", { autoFocus: true, className: "LuiTextInput-input", 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()); } }) })));
+                            return (jsxRuntime.jsxs("div", __assign({ style: { display: "flex", flexDirection: "column", width: "100%" } }, { children: [jsxRuntime.jsx("input", { autoFocus: true, className: "LuiTextInput-input", ref: ref, type: "text", placeholder: (_b = props.filterPlaceholder) !== null && _b !== void 0 ? _b : "Placeholder", "data-testid": "filteredMenu-free-text-input", defaultValue: filter, "data-disableenterautosave": true, "data-allowtabtoSave": true, onChange: function (e) { return setFilter(e.target.value); }, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp }), props.filterHelpText && isNotEmpty(filter) && (jsxRuntime.jsx(FormError, { error: null, helpText: props.filterHelpText }))] })));
                         } })), 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, __assign({ className: "GridPopoverEditDropDown-noOptions" }, { children: "No Options" }), "".concat(fieldToString(field), "-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 }, "$$header_".concat(index))) : filteredValues.includes(item.value) ? null : (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs(MenuItem, __assign({ disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", value: item.value, onClick: function (e) {
@@ -3323,13 +3345,6 @@ var GridFormDropDown = function (props) {
                         })] }) }))] }));
 };
 
-var css_248z$4 = ".helpText{color:#6b6966;font-size:.75rem;font-weight:400}";
-styleInject(css_248z$4);
-
-var FormError = function (props) {
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.error && (jsxRuntime.jsx("span", __assign({ className: "LuiTextInput-error", style: { paddingLeft: 0 } }, { children: props.error }))), props.helpText && !props.error && jsxRuntime.jsx("span", __assign({ className: "helpText" }, { children: props.helpText }))] }));
-};
-
 function escapeStringRegexp(string) {
 	if (typeof string !== 'string') {
 		throw new TypeError('Expected a string');