@linzjs/step-ag-grid 7.0.2 → 7.0.4

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/src/contexts/GridPopoverContext.d.ts

@@ -1,12 +1,5 @@
 import { RefObject } from "react";
 import { GridBaseRow } from "../components/Grid";
-export interface PropsType {
-    value: any;
-    data: any;
-    field: string;
-    selectedRows: any[];
-    updateValue: (saveFn: (selectedRows: any[]) => Promise<boolean>) => Promise<boolean>;
-}
 export interface GridPopoverContextType<RowType extends GridBaseRow> {
     anchorRef: RefObject<Element>;
     saving: boolean;
@@ -16,6 +9,7 @@ export interface GridPopoverContextType<RowType extends GridBaseRow> {
     data: RowType;
     selectedRows: RowType[];
     updateValue: (saveFn: (selectedRows: any[]) => Promise<boolean>, tabDirection: 1 | 0 | -1) => Promise<boolean>;
+    formatValue: (value: any) => any;
 }
 export declare const GridPopoverContext: import("react").Context<GridPopoverContextType<any>>;
 export declare const useGridPopoverContext: <RowType extends GridBaseRow>() => GridPopoverContextType<RowType>;

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

@@ -2361,7 +2361,8 @@ var GridPopoverContext = createContext({
     selectedRows: [],
     updateValue: function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
         return [2 /*return*/, false];
-    }); }); }
+    }); }); },
+    formatValue: function () { return "! No gridPopoverContextProvider !"; }
 });
 var useGridPopoverContext = function () {
     return useContext(GridPopoverContext);
@@ -2410,7 +2411,8 @@ var GridPopoverContextProvider = function (_a) {
             field: field,
             data: props.data,
             value: props.value,
-            updateValue: updateValue
+            updateValue: updateValue,
+            formatValue: props.formatValue
         } }, { children: children })));
 };
 
@@ -2852,13 +2854,9 @@ var GridRendererGenericCell = function (props) {
     var warningText = warningFn ? warningFn(props) : undefined;
     var infoFn = cellRendererParams === null || cellRendererParams === void 0 ? void 0 : cellRendererParams.info;
     var infoText = infoFn ? infoFn(props) : undefined;
-    var defaultFormatter = function (props) { return props.value; };
-    var formatter = (_a = colDef.valueFormatter) !== null && _a !== void 0 ? _a : defaultFormatter;
-    if (typeof formatter === "string") {
-        console.error("valueFormatter must be a function");
-        return jsx("span", { children: "valueFormatter must be a function" });
-    }
-    var formatted = formatter(props);
+    var defaultFormatter = function (value) { return value; };
+    var formatter = (_a = props.formatValue) !== null && _a !== void 0 ? _a : defaultFormatter;
+    var formatted = formatter(props.value);
     return (jsx(GridLoadableCell, __assign({ isLoading: checkUpdating((_c = (_b = colDef.field) !== null && _b !== void 0 ? _b : colDef.colId) !== null && _c !== void 0 ? _c : "", props.data.id) }, { children: jsxs(Fragment$1, { children: [typeof warningText === "string" && jsx(GridIcon, { icon: "ic_warning", title: warningText }), typeof infoText === "string" && jsx(GridIcon, { icon: "ic_info", title: infoText }), jsx("span", __assign({ title: formatted }, { children: formatted }))] }) })));
 };
 
@@ -2892,7 +2890,7 @@ var GridCell = function (props, custom) {
         // Default value formatter, otherwise react freaks out on objects
         valueFormatter: function (params) {
             if (params.value == null)
-                return "-";
+                return "–";
             var types = ["number", "boolean", "string"];
             if (types.includes(typeof params.value))
                 return "".concat(params.value);
@@ -3082,6 +3080,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 +3097,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 +3144,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 +3220,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 +3241,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 +3341,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');
@@ -3803,14 +3816,14 @@ var GridPopoverMenu = function (colDef, custom) {
 var bearingValueFormatter = function (params) {
     var value = typeof params.value == "string" ? parseFloat(params.value) : params.value;
     if (value == null) {
-        return "-";
+        return "–";
     }
     return convertDDToDMS(value, false, false);
 };
 var bearingCorrectionValueFormatter = function (params) {
     var value = params.value;
     if (value == null) {
-        return "-";
+        return "–";
     }
     if (typeof value === "string") {
         return convertDDToDMS(bearingNumberParser(value), true, true);
@@ -3892,7 +3905,7 @@ var TextInputFormatted = function (props) {
 };
 
 var GridFormEditBearing = function (props) {
-    var _a = useGridPopoverContext(), field = _a.field, initialValue = _a.value;
+    var _a = useGridPopoverContext(), field = _a.field, initialValue = _a.value, formatValue = _a.formatValue;
     // This clears out any scientific precision
     var defaultValue = useMemo(function () { return (initialValue == null ? "" : parseFloat(parseFloat(initialValue).toFixed(10)).toString()); }, [initialValue]);
     var _b = useState(defaultValue), value = _b[0], setValue = _b[1];
@@ -3931,11 +3944,11 @@ var GridFormEditBearing = function (props) {
     }).popoverWrapper;
     return popoverWrapper(jsx("div", __assign({ className: "GridFormEditBearing-input Grid-popoverContainer" }, { children: jsx(TextInputFormatted, { value: defaultValue, onChange: function (e) {
                 setValue(e.target.value.trim());
-            }, autoFocus: true, placeholder: props.placeHolder, formatted: bearingStringValidator(value, props.range) ? "?" : convertDDToDMS(bearingNumberParser(value)), error: bearingStringValidator(value, props.range), helpText: "Press enter or tab to save" }) })));
+            }, autoFocus: true, placeholder: props.placeHolder, formatted: bearingStringValidator(value, props.range) ? "?" : formatValue(bearingNumberParser(value)), error: bearingStringValidator(value, props.range), helpText: "Press enter or tab to save" }) })));
 };
 
 var GridPopoverEditBearingLike = function (colDef, props) {
-    return GridCell(__assign({ initialWidth: 65, maxWidth: 150, valueFormatter: bearingValueFormatter }, colDef), __assign({ editor: GridFormEditBearing }, props));
+    return GridCell(__assign({ initialWidth: 65, maxWidth: 150 }, colDef), __assign({ editor: GridFormEditBearing }, props));
 };
 var GridPopoverEditBearing = function (colDef, props) {
     return GridPopoverEditBearingLike(__assign({ valueFormatter: bearingValueFormatter }, colDef), {