@linzjs/step-ag-grid 7.0.2 → 7.0.3

package/dist/src/components/gridForm/GridFormDropDown.d.ts

@@ -27,6 +27,7 @@ export interface GridFormPopoutDropDownProps<RowType extends GridBaseRow> extend
     className?: "GridPopoverEditDropDown-containerSmall" | "GridPopoverEditDropDown-containerMedium" | "GridPopoverEditDropDown-containerLarge" | "GridPopoverEditDropDown-containerUnlimited" | string | undefined;
     filtered?: "local" | "reload";
     filterPlaceholder?: string;
+    filterHelpText?: string;
     onSelectedItem?: (props: GridPopoutEditDropDownSelectedItem<RowType>) => Promise<void>;
     onSelectFilter?: (props: GridPopoutEditDropDownSelectedItem<RowType>) => Promise<void>;
     options: SelectOption[] | ((selectedRows: RowType[], filter?: string) => Promise<SelectOption[]> | SelectOption[]);

package/dist/step-ag-grid.esm.js

@@ -3082,6 +3082,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 (jsxs(Fragment$1, { children: [props.error && (jsx("span", __assign({ className: "LuiTextInput-error", style: { paddingLeft: 0 } }, { children: props.error }))), props.helpText && !props.error && jsx("span", __assign({ className: "helpText" }, { children: props.helpText }))] }));
+};
+
 var MenuSeparatorString = "_____MENU_SEPARATOR_____";
 var MenuSeparator = Object.freeze({ value: MenuSeparatorString });
 var MenuHeaderString = "_____MENU_HEADER_____";
@@ -3092,6 +3099,7 @@ var fieldToString = function (field) {
     return typeof field == "symbol" ? field.toString() : "".concat(field);
 };
 var GridFormDropDown = function (props) {
+    var stopEditing = 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 = useState(""), filter = _b[0], setFilter = _b[1];
@@ -3138,22 +3146,27 @@ var GridFormDropDown = function (props) {
     }); }, [selectItemHandler, updateValue]);
     var selectFilterHandler = 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
@@ -3209,7 +3222,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; }));
         }
@@ -3230,56 +3243,65 @@ var GridFormDropDown = function (props) {
      * Saves are wrapped in updateValue and triggered by blur events
      */
     var save = 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 = useRef(false);
+    var handleKeyDown = useCallback(function (e) {
+        if (e.key === "Enter") {
+            e.stopPropagation();
+            e.preventDefault();
+            enterKeyPressedRef.current = true;
+        }
+    }, []);
+    var handleKeyUp = 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(jsxs(Fragment$1, { children: [props.filtered && (jsxs("div", __assign({ className: "GridFormDropDown-filter" }, { children: [jsx(FocusableItem, __assign({ className: "filter-item" }, { children: function (_a) {
                             var _b;
                             var ref = _a.ref;
-                            return (jsx("div", __assign({ style: { display: "flex", width: "100%" } }, { children: 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 (jsxs("div", __assign({ style: { display: "flex", flexDirection: "column", width: "100%" } }, { children: [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) && (jsx(FormError, { error: null, helpText: props.filterHelpText }))] })));
                         } })), jsx(MenuDivider, {}, "$$divider_filter")] }))), jsx(ComponentLoadingWrapper, __assign({ loading: !options, className: "GridFormDropDown-options" }, { children: jsxs(Fragment$1, { children: [options && options.length == (filteredValues === null || filteredValues === void 0 ? void 0 : filteredValues.length) && (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 ? (jsx(MenuDivider, {}, "$$divider_".concat(index))) : item.value === MenuHeaderString ? (jsx(MenuHeader, { children: item.label }, "$$header_".concat(index))) : filteredValues.includes(item.value) ? null : (jsxs("div", { children: [jsxs(MenuItem, __assign({ disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", value: item.value, onClick: function (e) {
@@ -3321,13 +3343,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 (jsxs(Fragment$1, { children: [props.error && (jsx("span", __assign({ className: "LuiTextInput-error", style: { paddingLeft: 0 } }, { children: props.error }))), props.helpText && !props.error && jsx("span", __assign({ className: "helpText" }, { children: props.helpText }))] }));
-};
-
 function escapeStringRegexp(string) {
 	if (typeof string !== 'string') {
 		throw new TypeError('Expected a string');