@linzjs/step-ag-grid 2.4.7 → 2.4.9

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

@@ -1,8 +1,10 @@
 /// <reference types="react" />
+import "../../styles/GridFormSubComponentTextInput.scss";
 export interface GridFormSubComponentTextInput {
     setValue: (value: string) => void;
     keyDown: (key: string) => void;
     placeholder?: string;
     className?: string;
+    customHelpText?: string;
 }
-export declare const GridFormSubComponentTextInput: ({ keyDown, placeholder, setValue, className, }: GridFormSubComponentTextInput) => JSX.Element;
+export declare const GridFormSubComponentTextInput: ({ keyDown, placeholder, setValue, className, customHelpText, }: GridFormSubComponentTextInput) => JSX.Element;

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

@@ -2073,7 +2073,8 @@ var GridContextProvider = function (props) {
      */
     var sizeColumnsToFit = function () {
         gridApiOp(function (gridApi) {
-            gridApi.sizeColumnsToFit();
+            // Hide size columns to fit errors in tests
+            document.body.clientWidth && gridApi.sizeColumnsToFit();
         });
     };
     var stopEditing = function () { return gridApiOp(function (gridApi) { return gridApi.stopEditing(); }); };
@@ -2585,11 +2586,11 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$7 = ".AgGridGenericCellRenderer-icon{margin-right:4px}.AgGridGenericCellRenderer-ic_infoIcon{fill:#3a7cdf;margin-right:4px}.AgGridGenericCellRenderer-ic_warningIcon{fill:#ea6a2e;margin-right:4px}";
-styleInject(css_248z$7);
+var css_248z$8 = ".AgGridGenericCellRenderer-icon{margin-right:4px}.AgGridGenericCellRenderer-ic_infoIcon{fill:#3a7cdf;margin-right:4px}.AgGridGenericCellRenderer-ic_warningIcon{fill:#ea6a2e;margin-right:4px}";
+styleInject(css_248z$8);
 
-var css_248z$6 = ".GridLoadableCell-container{align-items:center;display:flex}";
-styleInject(css_248z$6);
+var css_248z$7 = ".GridLoadableCell-container{align-items:center;display:flex}";
+styleInject(css_248z$7);
 
 var GridLoadableCell = function (props) {
     if (props.isLoading) {
@@ -2813,11 +2814,11 @@ var GridRenderPopoutMenuCell = function (props) {
     return (jsx(GridLoadableCell, __assign({ isLoading: isLoading, className: disabled ? "GridPopoutMenu-burgerDisabled" : "GridPopoutMenu-burger" }, { children: jsx(LuiIcon, { name: "ic_more_vert", alt: "More actions", size: "md" }) })));
 };
 
-var css_248z$5 = ".GridMultiSelect-containerSmall .GridFormMultiSelect-options{max-height:130px;overflow-y:auto}.GridMultiSelect-containerMedium .GridFormMultiSelect-options{max-height:190px;overflow-y:auto}.GridMultiSelect-containerLarge .GridFormMultiSelect-options{max-height:320px;overflow-y:auto}.GridMultiSelect-containerUnlimited .GridFormMultiSelect-options{overflow-y:auto}";
-styleInject(css_248z$5);
+var css_248z$6 = ".GridMultiSelect-containerSmall .GridFormMultiSelect-options{max-height:130px;overflow-y:auto}.GridMultiSelect-containerMedium .GridFormMultiSelect-options{max-height:190px;overflow-y:auto}.GridMultiSelect-containerLarge .GridFormMultiSelect-options{max-height:320px;overflow-y:auto}.GridMultiSelect-containerUnlimited .GridFormMultiSelect-options{overflow-y:auto}";
+styleInject(css_248z$6);
 
-var css_248z$4 = ".GridPopoverEditDropDown-containerSmall .GridFormDropDown-options{max-height:120px;overflow-y:auto}.GridPopoverEditDropDown-containerMedium .GridFormDropDown-options{max-height:200px;overflow-y:auto}.GridPopoverEditDropDown-containerLarge .GridFormDropDown-options{max-height:400px;overflow-y:auto}.GridPopoverEditDropDown-containerUnlimited .GridFormDropDown-options{overflow-y:auto}";
-styleInject(css_248z$4);
+var css_248z$5 = ".GridPopoverEditDropDown-containerSmall .GridFormDropDown-options{max-height:120px;overflow-y:auto}.GridPopoverEditDropDown-containerMedium .GridFormDropDown-options{max-height:200px;overflow-y:auto}.GridPopoverEditDropDown-containerLarge .GridFormDropDown-options{max-height:400px;overflow-y:auto}.GridPopoverEditDropDown-containerUnlimited .GridFormDropDown-options{overflow-y:auto}";
+styleInject(css_248z$5);
 
 /* global setTimeout, clearTimeout */
 
@@ -2976,7 +2977,11 @@ var GridFormDropDown = function (_props) {
                     case 2:
                         optionsList = optionsConf === null || optionsConf === void 0 ? void 0 : optionsConf.map(function (item) {
                             if (item == null || typeof item == "string" || typeof item == "number") {
-                                item = { value: item, label: item, disabled: false };
+                                item = {
+                                    value: item,
+                                    label: item,
+                                    disabled: false
+                                };
                             }
                             return item;
                         });
@@ -3058,9 +3063,9 @@ var GridFormDropDown = function (_props) {
                             var _b;
                             var ref = _a.ref;
                             return (jsx("div", __assign({ style: { display: "flex", width: "100%" } }, { children: 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); } }) })));
-                        } })), 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, { children: "[Empty]" }), options === null || options === void 0 ? void 0 : options.map(function (item, index) {
+                        } })), 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, { children: "[Empty]" }, "".concat(props.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 })) : filteredValues.includes(item.value) ? null : (jsx(Fragment$1, { children: !item.subComponent ? (jsx(MenuItem, __assign({ disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", value: item.value, onClick: function () {
+                            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 : (jsx("div", { children: !item.subComponent ? (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))) : (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) {
                                         return item.subComponent &&
@@ -3087,13 +3092,14 @@ var GridFormDropDown = function (_props) {
                                                         var optionValue = _a.optionValue;
                                                         return optionValue === item.value;
                                                     });
-                                                    if (key === "Enter" && subComponentItem) {
+                                                    if ((key === "Enter" || key === "Tab") && subComponentItem) {
                                                         selectItemHandler(item.value, subComponentItem.subComponentValue);
                                                         ref.closeMenu();
                                                     }
-                                                }
+                                                },
+                                                key: "".concat(props.field, "-").concat(index, "_subcomponent_inner")
                                             }, ref);
-                                    } }), "".concat(props.field, "-").concat(index, "_subcomponent"))) }));
+                                    } }), "".concat(props.field, "-").concat(index, "_subcomponent"))) }, "menu-wrapper-".concat(index)));
                         })] }) }))] }));
 };
 
@@ -3259,8 +3265,8 @@ var GridPopoutEditMultiSelect = function (colDef, props) {
     return GridCell(colDef, __assign(__assign({ editor: GridFormMultiSelect }, props), { editorParams: __assign({ className: "GridMultiSelect-containerMedium" }, props.editorParams) }));
 };
 
-var css_248z$3 = ".GridPopoutMenu-burger{cursor:pointer}.GridPopoutMenu-burger svg{fill:#007198}.GridPopoutMenu-burgerDisabled svg{fill:#989189}";
-styleInject(css_248z$3);
+var css_248z$4 = ".GridPopoutMenu-burger{cursor:pointer}.GridPopoutMenu-burger svg{fill:#007198}.GridPopoutMenu-burgerDisabled svg{fill:#989189}";
+styleInject(css_248z$4);
 
 /** Menu configuration types **/
 var PopoutMenuSeparator = Object.freeze({ __isMenuSeparator__: true });
@@ -3422,11 +3428,11 @@ var convertDDToDMS = function (dd, showPositiveSymbol, addTrailingZeros) {
     return dmsString;
 };
 
-var css_248z$2 = ".GridFormEditBearing-input{width:320px}";
-styleInject(css_248z$2);
+var css_248z$3 = ".GridFormEditBearing-input{width:320px}";
+styleInject(css_248z$3);
 
-var css_248z$1 = ".LuiTextInput{margin-bottom:0}.LuiTextInput-formatted{color:#beb9b4;line-height:48px;position:absolute;right:14px;top:0}";
-styleInject(css_248z$1);
+var css_248z$2 = ".LuiTextInput{margin-bottom:0}.LuiTextInput-formatted{color:#beb9b4;line-height:48px;position:absolute;right:14px;top:0}";
+styleInject(css_248z$2);
 
 var TextInputFormatted = function (props) {
     return (jsxs("div", __assign({ className: clsx("LuiTextInput Grid-popoverContainer", props.error && "hasError", props.warning && "hasWarning", props.className) }, { children: [jsxs("span", __assign({ className: "LuiTextInput-inputWrapper" }, { children: [jsx("input", __assign({ type: "text", className: "LuiTextInput-input", min: "0", spellCheck: true, defaultValue: props.value, onChange: props.onChange }, props.inputProps)), jsx("span", __assign({ className: "LuiTextInput-formatted" }, { children: props.formatted }))] })), props.error && (jsxs("span", __assign({ className: "LuiTextInput-error" }, { children: [jsx(LuiIcon, { alt: "error", name: "ic_error", className: "LuiTextInput-error-icon", size: "sm", status: "error" }), props.error] }))), props.warning && (jsxs("span", __assign({ className: "LuiTextInput-warning" }, { children: [jsx(LuiIcon, { alt: "warning", name: "ic_warning", className: "LuiTextInput-warning-icon", size: "sm", status: "warning" }), props.warning] })))] })));
@@ -3723,27 +3729,36 @@ var GridPopoverTextInput = function (colDef, params) {
     return GridCell(colDef, __assign({ editor: GridFormTextInput }, params));
 };
 
+var css_248z$1 = ".GridFormSubComponentTextInput-full-width-input{padding:0;width:100%}";
+styleInject(css_248z$1);
+
 var GridFormSubComponentTextInput = function (_a) {
-    var keyDown = _a.keyDown, placeholder = _a.placeholder, setValue = _a.setValue, className = _a.className;
+    var keyDown = _a.keyDown, placeholder = _a.placeholder, setValue = _a.setValue, className = _a.className, customHelpText = _a.customHelpText;
     var placeholderText = placeholder || "Other...";
-    var inputClass = className || "";
+    var helpText = customHelpText || "Press enter or tab to save";
+    var inputClass = className || "GridFormSubComponentTextInput-full-width-input";
     var _b = useState(""), inputValue = _b[0], setInputValue = _b[1];
-    return (jsx(Fragment$1, { children: jsx(TextInputFormatted, { className: inputClass, 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();
+    return (jsxs("div", __assign({ style: {
+            display: "flex",
+            flexDirection: "column"
+        } }, { children: [jsx(TextInputFormatted, { className: inputClass, 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();
+                        }
+                    },
+                    style: {
+                        width: "100%"
                     }
-                },
-                style: {
-                    width: "100%"
-                }
-            } }) }));
+                } }), jsx("span", __assign({ style: {
+                    fontSize: "0.75rem"
+                } }, { children: helpText }))] })));
 };
 
 var GridSubComponentTextArea = function (props) {