@linzjs/step-ag-grid 6.1.0 → 7.0.0

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

@@ -1,6 +1,6 @@
 import { useMemo, useLayoutEffect, useEffect, createContext, memo, forwardRef, useRef, useContext, useState, useCallback, useReducer, cloneElement, useImperativeHandle, Fragment } from 'react';
 import { unstable_batchedUpdates, flushSync, createPortal } from 'react-dom';
-import { findIndex, debounce, isEmpty, delay, sortBy, last, difference, castArray, remove, flatten, xorBy, fromPairs, pick, omit, toPairs, isEqual } from 'lodash-es';
+import { findIndex, debounce, negate, isEmpty, delay, sortBy, last, difference, castArray, remove, flatten, xorBy, pick, groupBy, toPairs, omit } from 'lodash-es';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { AgGridReact } from 'ag-grid-react';
 import { LuiMiniSpinner, LuiIcon, LuiCheckboxInput, LuiButton } from '@linzjs/lui';
@@ -178,7 +178,22 @@ function commonProps(isDisabled, isHovering) {
         tabIndex: isHovering ? 0 : -1
     };
 }
-var indexOfNode = function (nodeList, node) { return findIndex(nodeList, node); };
+var indexOfNode = function (nodeList, node) { return findIndex(nodeList, node); };
+var focusFirstInput = function (container) {
+    if (!(container instanceof Element))
+        return false;
+    var inputs = container.querySelectorAll("input[type='text'],textarea");
+    var input = inputs[0];
+    if (input instanceof HTMLElement) {
+        input.focus();
+        // Text areas should start at end
+        if (input instanceof HTMLTextAreaElement) {
+            input.selectionStart = input.value.length;
+        }
+        return true;
+    }
+    return false;
+};
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -353,8 +368,9 @@ var useItems = function (menuRef, focusRef) {
                 if (index >= items.length)
                     index = 0;
                 newItem = items[index];
+                focusFirstInput(newItem);
                 break;
-            case HoverActionTypes.DECREASE:
+            case HoverActionTypes.DECREASE: {
                 sortItems();
                 index = hoverIndex;
                 if (index < 0)
@@ -363,7 +379,9 @@ var useItems = function (menuRef, focusRef) {
                 if (index < 0)
                     index = items.length - 1;
                 newItem = items[index];
+                focusFirstInput(newItem);
                 break;
+            }
             default:
                 if (process.env.NODE_ENV !== "production")
                     throw new Error("[React-Menu] Unknown hover action type: ".concat(actionType));
@@ -1199,26 +1217,13 @@ var MenuList = function (_a) {
         else if (captureFocus) {
             // Use a timeout here because if set focus immediately, page might scroll unexpectedly.
             var id_1 = setTimeout(function () {
-                var _a, _b, _c;
+                var _a, _b;
                 // If focus has already been set to a children element, don't set focus on menu or item
                 if (!menuRef.current.contains(document.activeElement)) {
                     // Handle popover portal focus
                     var popupElement = (_a = focusRef.current) === null || _a === void 0 ? void 0 : _a.nextSibling;
-                    if (popupElement instanceof Element) {
-                        var input = popupElement.querySelectorAll("input,textarea")[0];
-                        if (input) {
-                            input.focus();
-                            // Text areas should start at end
-                            if (input instanceof HTMLTextAreaElement) {
-                                input.selectionStart = input.value.length;
-                            }
-                        }
-                        else {
-                            (_b = focusRef.current) === null || _b === void 0 ? void 0 : _b.focus();
-                        }
-                    }
-                    else {
-                        (_c = focusRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+                    if (!focusFirstInput(popupElement)) {
+                        (_b = focusRef.current) === null || _b === void 0 ? void 0 : _b.focus();
                     }
                     setItemFocus();
                 }
@@ -1276,10 +1281,7 @@ var MenuList = function (_a) {
     return (jsxs("ul", __assign({ role: "menu", "aria-label": ariaLabel }, mergeProps({ onKeyDown: onKeyDown, onAnimationEnd: onAnimationEnd }, restProps), commonProps(isDisabled), { ref: useCombinedRef(externalRef, menuRef), className: useBEM({ block: menuClass, modifiers: modifiers, className: menuClassName }), style: __assign(__assign(__assign(__assign({}, menuStyle), overflowStyle), dontShrinkOps), { margin: 0, display: state === "closed" ? "none" : undefined, position: "absolute", left: menuPosition.x, top: menuPosition.y }) }, { children: [jsx("div", { ref: focusRef, tabIndex: -1, style: { position: "absolute", left: 0, top: 0 } }), arrow && (jsx("div", { className: _arrowClass, style: __assign(__assign({}, arrowStyle), { position: "absolute", left: arrowPosition.x, top: arrowPosition.y }), ref: arrowRef })), jsx(MenuListContext.Provider, __assign({ value: listContext }, { children: jsx(MenuListItemContext.Provider, __assign({ value: itemContext }, { children: jsx(HoverItemContext.Provider, __assign({ value: hoverItem }, { children: children })) })) }))] })));
 };
 
-// Typed version of lodash !isEmpty
-var isNotEmpty = function (obj) {
-    return !isEmpty(obj);
-};
+var isNotEmpty = negate(isEmpty);
 var wait = function (timeoutMs) {
     return new Promise(function (resolve) {
         setTimeout(resolve, timeoutMs);
@@ -1290,15 +1292,16 @@ var isFloat = function (value) {
     return regexp.test(value);
 };
 var hasParentClass = function (className, child) {
-    var node = child;
-    while (node) {
+    for (var node = child; node; node = node.parentNode) {
         // When nodes are in portals they aren't type node anymore hence treating it as any here
         if (node.classList && node.classList.contains(className)) {
             return true;
         }
-        node = node.parentNode;
     }
     return false;
+};
+var stringByteLengthIsInvalid = function (str, maxBytes) {
+    return new TextEncoder().encode(str).length > maxBytes;
 };
 
 var EventHandlersContext = createContext({
@@ -1394,7 +1397,8 @@ var ControlledMenuFr = function (_a, externalRef) {
         if (activeElement !== firstInputEl && activeElement !== lastInputEl)
             return;
         var isTextArea = activeElement.nodeName === "TEXTAREA";
-        var suppressEnterAutoSave = activeElement.getAttribute("data-disableEnterAutoSave") || isTextArea;
+        var suppressEnterAutoSave = activeElement.getAttribute("data-disableenterautoSave") || isTextArea;
+        var allowTabToSave = activeElement.getAttribute("data-allowtabtoSave");
         var invokeSave = function (reason) {
             var _a, _b;
             if (!(saveButtonRef === null || saveButtonRef === void 0 ? void 0 : saveButtonRef.current))
@@ -1405,7 +1409,7 @@ var ControlledMenuFr = function (_a, externalRef) {
         switch (activeElement.nodeName) {
             case "TEXTAREA":
             case "INPUT": {
-                if (activeElement === lastInputEl && activeElement === firstInputEl) {
+                if ((activeElement === lastInputEl && activeElement === firstInputEl) || allowTabToSave) {
                     if (ev.key === "Tab") {
                         // Can't forward/backwards tab out of popup
                         ev.preventDefault();
@@ -2424,7 +2428,8 @@ var GridSubComponentContext = createContext({
             console.error("GridSubComponentContext triggerSave no context");
             return [2 /*return*/];
         });
-    }); }
+    }); },
+    context: null
 });
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
@@ -2822,11 +2827,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) {
@@ -3000,11 +3005,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:220px;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:220px;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 */
 
@@ -3094,14 +3099,16 @@ var GridFormDropDown = function (props) {
     var optionsInitialising = useRef(false);
     var _d = useState(null), options = _d[0], setOptions = _d[1];
     var subComponentIsValid = useRef(false);
-    var _e = useState(), subSelectedValue = _e[0], setSubSelectedValue = _e[1];
+    var subComponentInitialValue = useRef(null);
+    var _e = useState(null), subSelectedValue = _e[0], setSubSelectedValue = _e[1];
     var _f = useState(null), selectedSubComponent = _f[0], setSelectedSubComponent = _f[1];
     var selectItemHandler = useCallback(function (value, subComponentValue) { return __awaiter(void 0, void 0, void 0, function () {
         var hasChanged;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    hasChanged = selectedRows.some(function (row) { return row[field] !== value; });
+                    hasChanged = selectedRows.some(function (row) { return row[field] !== value; }) ||
+                        (subComponentValue !== undefined && subComponentInitialValue.current !== JSON.stringify(subComponentValue));
                     if (!hasChanged) return [3 /*break*/, 3];
                     if (!props.onSelectedItem) return [3 /*break*/, 2];
                     return [4 /*yield*/, props.onSelectedItem({ selectedRows: selectedRows, value: value, subComponentValue: subComponentValue })];
@@ -3277,15 +3284,10 @@ var GridFormDropDown = function (props) {
                             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) {
                                             if (item.subComponent) {
-                                                if (selectedSubComponent === item) {
-                                                    // toggle selection off
-                                                    setSelectedSubComponent(null);
-                                                    subComponentIsValid.current = true;
-                                                }
-                                                else {
-                                                    // toggle selection on
-                                                    setSelectedSubComponent(item);
-                                                }
+                                                // toggle selection
+                                                setSelectedSubComponent(selectedSubComponent === item ? null : item);
+                                                subComponentIsValid.current = true;
+                                                subComponentInitialValue.current = null;
                                                 e.keepOpen = true;
                                             }
                                             else {
@@ -3296,10 +3298,15 @@ var GridFormDropDown = function (props) {
                                                     : CloseReason.CLICK).then();
                                             }
                                         } }, { children: [(_a = item.label) !== null && _a !== void 0 ? _a : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value)), item.subComponent ? "..." : ""] }), "".concat(fieldToString(field), "-").concat(index)), item.subComponent && selectedSubComponent === item && (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) { return (jsx(GridSubComponentContext.Provider, __assign({ value: {
+                                                context: { options: options },
                                                 data: data,
                                                 value: subSelectedValue,
                                                 setValue: function (value) {
                                                     setSubSelectedValue(value);
+                                                    if (subComponentInitialValue.current === null) {
+                                                        // copy the default value of the sub-component so we can change detect on save
+                                                        subComponentInitialValue.current = JSON.stringify(value);
+                                                    }
                                                 },
                                                 setValid: function (valid) {
                                                     subComponentIsValid.current = valid;
@@ -3314,154 +3321,326 @@ 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');
+	}
+
+	// Escape characters with special meaning either inside or outside character sets.
+	// Use a simple backslash escape when it’s always valid, and a `\xnn` escape when the simpler form would be disallowed by Unicode patterns’ stricter grammar.
+	return string
+		.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&')
+		.replace(/-/g, '\\x2d');
+}
+
+const regexpCache = new Map();
+
+const sanitizeArray = (input, inputName) => {
+	if (!Array.isArray(input)) {
+		switch (typeof input) {
+			case 'string':
+				input = [input];
+				break;
+			case 'undefined':
+				input = [];
+				break;
+			default:
+				throw new TypeError(`Expected '${inputName}' to be a string or an array, but got a type of '${typeof input}'`);
+		}
+	}
+
+	return input.filter(string => {
+		if (typeof string !== 'string') {
+			if (typeof string === 'undefined') {
+				return false;
+			}
+
+			throw new TypeError(`Expected '${inputName}' to be an array of strings, but found a type of '${typeof string}' in the array`);
+		}
+
+		return true;
+	});
+};
+
+const makeRegexp = (pattern, options) => {
+	options = {
+		caseSensitive: false,
+		...options,
+	};
+
+	const cacheKey = pattern + JSON.stringify(options);
+
+	if (regexpCache.has(cacheKey)) {
+		return regexpCache.get(cacheKey);
+	}
+
+	const negated = pattern[0] === '!';
+
+	if (negated) {
+		pattern = pattern.slice(1);
+	}
+
+	pattern = escapeStringRegexp(pattern).replace(/\\\*/g, '[\\s\\S]*');
+
+	const regexp = new RegExp(`^${pattern}$`, options.caseSensitive ? '' : 'i');
+	regexp.negated = negated;
+	regexpCache.set(cacheKey, regexp);
+
+	return regexp;
+};
+
+const baseMatcher = (inputs, patterns, options, firstMatchOnly) => {
+	inputs = sanitizeArray(inputs, 'inputs');
+	patterns = sanitizeArray(patterns, 'patterns');
+
+	if (patterns.length === 0) {
+		return [];
+	}
+
+	patterns = patterns.map(pattern => makeRegexp(pattern, options));
+
+	const {allPatterns} = options || {};
+	const result = [];
+
+	for (const input of inputs) {
+		// String is included only if it matches at least one non-negated pattern supplied.
+		// Note: the `allPatterns` option requires every non-negated pattern to be matched once.
+		// Matching a negated pattern excludes the string.
+		let matches;
+		const didFit = [...patterns].fill(false);
+
+		for (const [index, pattern] of patterns.entries()) {
+			if (pattern.test(input)) {
+				didFit[index] = true;
+				matches = !pattern.negated;
+
+				if (!matches) {
+					break;
+				}
+			}
+		}
+
+		if (
+			!(
+				matches === false
+				|| (matches === undefined && patterns.some(pattern => !pattern.negated))
+				|| (allPatterns && didFit.some((yes, index) => !yes && !patterns[index].negated))
+			)
+		) {
+			result.push(input);
+
+			if (firstMatchOnly) {
+				break;
+			}
+		}
+	}
+
+	return result;
+};
+
+function isMatch(inputs, patterns, options) {
+	return baseMatcher(inputs, patterns, options, true).length > 0;
+}
+
+/**
+ * Text matching with wildcards and multiple matchers.
+ *
+ * "L" => L*
+ * "L*" => L*
+ * "*L*" => *L*
+ * "*L" => *L
+ * "A B" => A* and B*
+ * "A B, C" => (A* and B*) or C*
+ *
+ * Returns ture if there's a text match.
+ */
+var textMatch = function (text, filter) {
+    if (text == null)
+        return true;
+    var superFilters = filter
+        .split(",")
+        .map(function (sf) { return sf.trim(); })
+        .filter(function (sf) { return sf; });
+    var values = text.replaceAll(",", " ").trim().split(/\s+/);
+    return (isEmpty(superFilters) || // Not filtered
+        superFilters.some(function (superFilter) {
+            var subFilters = superFilter.split(/\s+/).map(function (s) { return s.replaceAll(/([!?])/g, "\\$1"); });
+            return subFilters.every(function (subFilter) { return values.some(function (value) { return isMatch(value, subFilter); }); });
+        }));
+};
+
 var GridFormMultiSelect = function (props) {
     var _a = useGridPopoverContext(), selectedRows = _a.selectedRows, data = _a.data;
-    var initialiseValues = useMemo(function () {
-        var r = props.initialSelectedValues && props.initialSelectedValues(selectedRows);
-        // convert array of strings to object<value,null>
-        return Array.isArray(r) ? fromPairs(r.map(function (v) { return [v, null]; })) : r;
-    }, [props, selectedRows]);
-    var subComponentIsValid = useRef({});
-    var _b = useState(function () { return initialiseValues !== null && initialiseValues !== void 0 ? initialiseValues : {}; }), selectedValues = _b[0], setSelectedValues = _b[1];
-    var _c = useState(""), filter = _c[0], setFilter = _c[1];
-    var _d = useState([]), filteredValues = _d[0], setFilteredValues = _d[1];
+    var subComponentIsValidRef = useRef({});
     var optionsInitialising = useRef(false);
-    var _e = useState(), options = _e[0], setOptions = _e[1];
+    var _b = useState(""), filter = _b[0], setFilter = _b[1];
+    var _c = useState(""), initialValues = _c[0], setInitialValues = _c[1];
+    var _d = useState(), options = _d[0], setOptions = _d[1];
     var invalid = useCallback(function () {
-        var validations = pick(subComponentIsValid.current, Object.keys(selectedValues));
-        return Object.values(validations).some(function (v) { return !v; });
-    }, [selectedValues]);
+        if (!options)
+            return true;
+        var selectedValues = options.filter(function (o) { return o.checked; }).map(function (o) { return o.value; });
+        var subValidations = pick(subComponentIsValidRef.current, selectedValues);
+        if (Object.values(subValidations).some(function (v) { return !v; }))
+            return true;
+        return (props.invalid &&
+            props.invalid(selectedRows, options.filter(function (o) { return o.checked; })));
+    }, [options, props, selectedRows]);
     var save = useCallback(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
-        var validations, notValid, menuOptionSubValueResult;
         return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!props.onSave) return [3 /*break*/, 2];
-                    if (!options) {
-                        console.error("options not initialised");
-                        return [2 /*return*/, false];
-                    }
-                    validations = pick(subComponentIsValid.current, Object.keys(selectedValues));
-                    notValid = Object.values(validations).some(function (v) { return !v; });
-                    if (notValid)
-                        return [2 /*return*/, false];
-                    menuOptionSubValueResult = toPairs(selectedValues).map(function (_a) {
-                        var value = _a[0], subValue = _a[1];
-                        var o = __assign({}, options.find(function (o) { return o.value == value; }));
-                        o.subValue = subValue;
-                        return o;
-                    });
-                    if (isEqual(initialiseValues, selectedValues)) {
-                        // No changes to save
-                        return [2 /*return*/, true];
-                    }
-                    return [4 /*yield*/, props.onSave(selectedRows, menuOptionSubValueResult)];
-                case 1: return [2 /*return*/, _a.sent()];
-                case 2: return [2 /*return*/, true];
-            }
+            if (!options || !props.onSave)
+                return [2 /*return*/, true];
+            // Any changes to save?
+            if (initialValues === JSON.stringify(options))
+                return [2 /*return*/, true];
+            return [2 /*return*/, props.onSave(selectedRows, options.filter(function (o) { return o.checked; }))];
         });
-    }); }, [initialiseValues, options, props, selectedValues]);
+    }); }, [initialValues, options, props]);
     // Load up options list if it's async function
     useEffect(function () {
-        var _a;
         if (options || optionsInitialising.current)
             return;
         optionsInitialising.current = true;
-        var optionsConf = (_a = props.options) !== null && _a !== void 0 ? _a : [];
         (function () { return __awaiter(void 0, void 0, void 0, function () {
-            var optionsList;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            var optionsList, _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
                     case 0:
-                        if (!(typeof optionsConf == "function")) return [3 /*break*/, 2];
-                        return [4 /*yield*/, optionsConf(selectedRows)];
+                        if (!(typeof props.options === "function")) return [3 /*break*/, 2];
+                        return [4 /*yield*/, props.options(selectedRows)];
                     case 1:
-                        optionsConf = _a.sent();
-                        _a.label = 2;
+                        _a = _b.sent();
+                        return [3 /*break*/, 3];
                     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 };
-                            }
-                            return item;
-                        });
-                        if (props.filtered) {
-                            // This is needed otherwise when filter input is rendered and sets autofocus
-                            // the mouse up of the double click edit triggers the cell to cancel editing
-                            delay(function () { return setOptions(optionsList); }, 100);
-                        }
-                        else {
-                            setOptions(optionsList);
-                        }
+                        _a = props.options;
+                        _b.label = 3;
+                    case 3:
+                        optionsList = _a;
+                        setInitialValues(JSON.stringify(optionsList));
+                        setOptions(optionsList);
                         optionsInitialising.current = false;
                         return [2 /*return*/];
                 }
             });
         }); })();
-    }, [props.filtered, props.options, options, selectedRows]);
-    useEffect(function () {
-        if (!props.filtered || options == null)
+    }, [options, props, selectedRows]);
+    /**
+     * Groups options into their header groups
+     */
+    var headerGroups = useMemo(function () {
+        return options &&
+            groupBy(options.filter(function (o) { return textMatch(o.label, filter) && o.value; }), "filter");
+    }, [filter, options]);
+    var headers = useMemo(function () { var _a; return (_a = props.headers) !== null && _a !== void 0 ? _a : [{ header: "" }]; }, [props.headers]);
+    var _e = useGridPopoverHook({
+        className: props.className,
+        invalid: invalid,
+        save: save
+    }), popoverWrapper = _e.popoverWrapper, triggerSave = _e.triggerSave;
+    return popoverWrapper(jsx(ComponentLoadingWrapper, __assign({ loading: !options, className: "GridFormMultiSelect-container" }, { children: options && (jsxs(Fragment$1, { children: [props.filtered && (jsx(FilterInput, __assign({}, { headerGroups: headerGroups, options: options, setOptions: setOptions, filter: filter, setFilter: setFilter }, { filterHelpText: props.filterHelpText, onSelectFilter: props.onSelectFilter, filterPlaceholder: props.filterPlaceholder }))), headerGroups && (jsx("div", __assign({ className: "GridFormMultiSelect-options" }, { children: headers.map(function (header) {
+                        var subOptions = headerGroups["".concat(header.filter)];
+                        return (!isEmpty(subOptions) && (jsxs(Fragment$1, { children: [header.header && jsx(MenuHeader, { children: header.header }), subOptions.map(function (item, index) {
+                                    return item.value === MenuSeparatorString ? (jsx(MenuDivider, {}, "div_".concat(index))) : (jsxs(Fragment, { children: [jsx(MenuRadioItem, { item: item, options: options, setOptions: setOptions }), item.checked && item.subComponent && (jsx(MenuSubComponent, __assign({}, { item: item, options: options, setOptions: setOptions, data: data, triggerSave: triggerSave }, { subComponentIsValid: subComponentIsValidRef.current })))] }, "val_".concat(item.value)));
+                                })] })));
+                    }) })))] })) })));
+};
+var FilterInput = function (props) {
+    var options = props.options, setOptions = props.setOptions, onSelectFilter = props.onSelectFilter, filter = props.filter, setFilter = props.setFilter, headerGroups = props.headerGroups, filterPlaceholder = props.filterPlaceholder, filterHelpText = props.filterHelpText;
+    var toggleSelectAllVisible = useCallback(function () {
+        if (!options || !headerGroups)
             return;
-        setFilteredValues(options
-            .map(function (option) {
-            if (option.label != null && typeof option.label !== "string") {
-                console.error("Cannot filter non-string labels", option);
-                return undefined;
-            }
-            var str = option.label || "";
-            return str.toLowerCase().indexOf(filter.trim()) === -1 ? option.value : undefined;
-        })
-            .filter(function (r) { return r !== undefined; }));
-    }, [props.filtered, filter, options]);
-    var toggleValue = useCallback(function (item) {
-        var _a;
-        if ("".concat(item.value) in selectedValues) {
-            setSelectedValues(omit(selectedValues, ["".concat(item.value)]));
+        if (isEmpty(filter.trim())) {
+            // Toggle off if any items are checked otherwise on
+            var anyChecked_1 = options.some(function (o) { return o.checked; });
+            options.forEach(function (o) { return (o.checked = !anyChecked_1); });
         }
         else {
-            setSelectedValues(__assign(__assign({}, selectedValues), (_a = {}, _a["".concat(item.value)] = null, _a)));
+            // Toggle on if any filtered items are checked otherwise off
+            var anyChecked_2 = Object.values(headerGroups).some(function (headerOptions) {
+                return headerOptions.some(function (o) { return o.checked === false; });
+            });
+            Object.values(headerGroups).forEach(function (headerOptions) {
+                headerOptions.forEach(function (o) {
+                    if (o.checked !== undefined)
+                        o.checked = anyChecked_2;
+                });
+            });
         }
-    }, [selectedValues]);
-    var _f = useGridPopoverHook({
-        className: props.className,
-        invalid: invalid,
-        save: save
-    }), popoverWrapper = _f.popoverWrapper, triggerSave = _f.triggerSave;
-    return popoverWrapper(jsx(ComponentLoadingWrapper, __assign({ loading: !options, className: "GridFormMultiSelect-container" }, { children: jsxs(Fragment$1, { children: [options && props.filtered && (jsxs(Fragment$1, { 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%" }, className: "GridFormMultiSelect-filter" }, { 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: "", onChange: function (e) { return setFilter(e.target.value.toLowerCase()); } }) })));
-                            } }), "filter"), jsx(MenuDivider, {}, "$$divider_filter")] })), jsx("div", __assign({ className: "GridFormMultiSelect-options" }, { children: options === null || options === void 0 ? void 0 : options.map(function (item, index) {
-                        var _a;
-                        return item.value === MenuSeparatorString ? (jsx(MenuDivider, {}, "$$divider_".concat(index))) : filteredValues.includes(item.value) ? null : (jsxs("div", { children: [jsx(MenuItem, __assign({ onClick: function (e) {
-                                        // Global react-menu MenuItem handler handles tabs
-                                        if (e.key !== "Tab") {
-                                            e.keepOpen = true;
-                                            toggleValue(item);
-                                        }
-                                    } }, { children: jsx(LuiCheckboxInput, { isChecked: "".concat(item.value) in selectedValues, value: "".concat(item.value), label: (_a = item.label) !== null && _a !== void 0 ? _a : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value)), inputProps: {
-                                            onClick: function (e) {
-                                                e.preventDefault();
-                                                e.stopPropagation();
-                                                return false;
-                                            }
-                                        }, onChange: function () {
-                                            /*Do nothing, change handled by menuItem*/
-                                        } }) })), "".concat(item.value) in selectedValues && item.subComponent && (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (_) {
-                                        return item.subComponent && (jsx(GridSubComponentContext.Provider, __assign({ value: {
-                                                data: data,
-                                                value: selectedValues["".concat(item.value)],
-                                                setValue: function (value) {
-                                                    var _a;
-                                                    setSelectedValues(__assign(__assign({}, selectedValues), (_a = {}, _a["".concat(item.value)] = value, _a)));
-                                                },
-                                                setValid: function (valid) {
-                                                    subComponentIsValid.current["".concat(item.value)] = valid;
-                                                },
-                                                triggerSave: triggerSave
-                                            } }, { children: jsx(item.subComponent, {}) })));
-                                    } }), "".concat(item.value, "_subcomponent")))] }, "".concat(index)));
-                    }) }))] }) })));
+        setOptions(__spreadArray([], options, true));
+    }, [filter, headerGroups, options, setOptions]);
+    var addCustomFilterValue = useCallback(function () {
+        if (!options || !onSelectFilter)
+            return;
+        var preFilterOptions = JSON.stringify(options);
+        onSelectFilter(filter.trim(), options);
+        // Detect if options list changed and update
+        if (preFilterOptions === JSON.stringify(options))
+            return;
+        setOptions(__spreadArray([], options, true));
+        setFilter("");
+    }, [filter, onSelectFilter, options, setFilter, setOptions]);
+    var handleKeyUp = useCallback(function (e) {
+        if (e.key === "Enter") {
+            e.stopPropagation();
+            e.preventDefault();
+            if (e.ctrlKey)
+                toggleSelectAllVisible();
+            else if (onSelectFilter)
+                addCustomFilterValue();
+        }
+    }, [addCustomFilterValue, onSelectFilter, toggleSelectAllVisible]);
+    return (jsxs(Fragment$1, { children: [jsx(FocusableItem, __assign({ className: "filter-item" }, { children: function (_) { return (jsxs("div", __assign({ style: { width: "100%" }, className: "GridFormMultiSelect-filter" }, { children: [jsx("input", { className: "LuiTextInput-input", type: "text", placeholder: filterPlaceholder !== null && filterPlaceholder !== void 0 ? filterPlaceholder : "Placeholder", "data-testid": "filteredMenu-free-text-input", value: filter, "data-disableenterautosave": true, "data-allowtabtoSave": true, onChange: function (e) { return setFilter(e.target.value); }, onKeyUp: handleKeyUp }), filterHelpText && (jsx(FormError, { error: null, helpText: typeof filterHelpText === "function" ? filterHelpText(filter.trim(), options) : filterHelpText }))] }))); } }), "filter"), jsx(MenuDivider, {}, "$$divider_filter"), headerGroups && !toPairs(headerGroups).some(function (_a) {
+                _a[0]; var options = _a[1];
+                return !isEmpty(options);
+            }) && (jsx("div", __assign({ className: "szh-menu__item" }, { children: "[No items match the filter]" })))] }));
+};
+var MenuRadioItem = function (props) {
+    var _a, _b;
+    var item = props.item, options = props.options, setOptions = props.setOptions;
+    var toggleValue = useCallback(function (item) {
+        item.checked = !item.checked;
+        setOptions(__spreadArray([], options, true));
+    }, [options, setOptions]);
+    return (jsx(MenuItem, __assign({ onClick: function (e) {
+            // Global react-menu MenuItem handler handles tabs
+            if (e.key !== "Tab") {
+                e.keepOpen = true;
+                toggleValue(item);
+            }
+        } }, { children: jsx(LuiCheckboxInput, { isChecked: (_a = item.checked) !== null && _a !== void 0 ? _a : false, value: "".concat(item.value), label: (_b = item.label) !== null && _b !== void 0 ? _b : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value)), inputProps: {
+                onClick: function (e) {
+                    // Click is handled by MenuItem onClick
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+            }, onChange: function () {
+                /*Do nothing, change handled by menuItem*/
+            } }) })));
+};
+var MenuSubComponent = function (props) {
+    var data = props.data, item = props.item, options = props.options, setOptions = props.setOptions, subComponentIsValid = props.subComponentIsValid, triggerSave = props.triggerSave;
+    return (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (_) {
+            return item.subComponent && (jsx(GridSubComponentContext.Provider, __assign({ value: {
+                    context: { options: options },
+                    data: data,
+                    value: item.subValue,
+                    setValue: function (value) {
+                        item.subValue = value;
+                        setOptions(__spreadArray([], options, true));
+                    },
+                    setValid: function (valid) {
+                        subComponentIsValid["".concat(item.value)] = valid;
+                    },
+                    triggerSave: triggerSave
+                } }, { children: jsx(item.subComponent, {}) })));
+        } }), "".concat(item.value, "_subcomponent")));
 };
 
 var GridPopoutEditMultiSelect = function (colDef, props) {
@@ -3596,6 +3775,7 @@ var GridFormPopoverMenu = function (props) {
     return popoverWrapper(jsx(ComponentLoadingWrapper, __assign({ loading: !options, className: "GridFormPopupMenu" }, { children: jsx(Fragment$1, { children: options === null || options === void 0 ? void 0 : options.map(function (item, index) {
                 return item.label === PopoutMenuSeparator ? (jsx(MenuDivider, {}, "$$divider_".concat(index))) : (!item.hidden && (jsxs(Fragment, { children: [jsx(MenuItem, __assign({ onClick: function (e) { return onMenuItemClick(e, item); }, disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "" }, { children: item.label }), "".concat(item.label)), item.subComponent && subComponentSelected === item && (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (_) {
                                 return item.subComponent && (jsx(GridSubComponentContext.Provider, __assign({ value: {
+                                        context: {},
                                         data: data,
                                         value: subSelectedValue,
                                         setValue: function (value) {
@@ -3704,12 +3884,6 @@ styleInject(css_248z$2);
 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 FormError = function (props) {
-    return (jsxs(Fragment$1, { children: [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.helpText && !props.error && (jsx("span", __assign({ style: {
-                    fontSize: "0.7rem"
-                } }, { children: props.helpText })))] }));
-};
-
 var TextInputFormatted = function (props) {
     return (jsxs("div", __assign({ className: clsx("LuiTextInput Grid-popoverContainer", props.error && "hasError", props.className) }, { children: [jsxs("span", __assign({ className: "LuiTextInput-inputWrapper" }, { children: [jsx("input", __assign({ type: "text", spellCheck: true, defaultValue: props.value }, omit(props, ["error", "value", "helpText", "formatted", "className"]), { className: "LuiTextInput-input", onMouseEnter: function (e) {
                             e.currentTarget.focus();
@@ -3905,12 +4079,13 @@ var TextAreaInput = function (props) {
                             } }, { children: props.value })) }))] })), jsx(FormError, { error: props.error, helpText: props.helpText })] })));
 };
 
-var TextInputValidator = function (props, value, data) {
+var TextInputValidator = function (props, value, data, context) {
     if (value == null)
         return null;
     // This can happen because subcomponent is invoked without type safety
     if (typeof value !== "string") {
         console.error("Value is not a string", value);
+        return null;
     }
     if (props.required && value.length === 0) {
         return "Some text is required";
@@ -3918,11 +4093,11 @@ var TextInputValidator = function (props, value, data) {
     if (props.maxLength && value.length > props.maxLength) {
         return "Text must be no longer than ".concat(props.maxLength, " characters");
     }
-    if (props.maxBytes && new TextEncoder().encode(value).length > props.maxBytes) {
+    if (props.maxBytes && stringByteLengthIsInvalid(value, props.maxBytes)) {
         return "Text must be no longer than ".concat(props.maxLength, " bytes");
     }
     if (props.invalid) {
-        return props.invalid(value, data);
+        return props.invalid(value, data, context);
     }
     return null;
 };
@@ -3930,30 +4105,30 @@ var TextInputValidator = function (props, value, data) {
 var GridFormTextArea = function (props) {
     var _a, _b;
     var _c = useGridPopoverContext(), field = _c.field, initialVale = _c.value, data = _c.data;
-    var _d = useState(initialVale != null ? "".concat(initialVale) : ""), value = _d[0], setValue = _d[1];
+    var initValue = useMemo(function () { return (initialVale == null ? "" : "".concat(initialVale)); }, [initialVale]);
+    var _d = useState(initValue), value = _d[0], setValue = _d[1];
     var helpText = (_a = props.helpText) !== null && _a !== void 0 ? _a : "Press tab to save";
-    var invalid = useCallback(function () { return TextInputValidator(props, value, data); }, [props, value, data]);
+    var invalid = useCallback(function () { return TextInputValidator(props, value, data, {}); }, [props, value, data]);
     var save = useCallback(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
+        var trimmedValue;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    if (initialVale === (value !== null && value !== void 0 ? value : ""))
+                    if (invalid())
+                        return [2 /*return*/, false];
+                    trimmedValue = value.trim();
+                    // No change, so don't save
+                    if (initValue === trimmedValue)
                         return [2 /*return*/, true];
                     if (!props.onSave) return [3 /*break*/, 2];
-                    return [4 /*yield*/, props.onSave(selectedRows, value)];
+                    return [4 /*yield*/, props.onSave(selectedRows, trimmedValue)];
                 case 1: return [2 /*return*/, _a.sent()];
                 case 2:
-                    if (field == null) {
-                        console.error("ColDef has no field set");
-                        return [2 /*return*/, false];
-                    }
-                    selectedRows.forEach(function (row) {
-                        row[field] = value;
-                    });
+                    selectedRows.forEach(function (row) { return (row[field] = trimmedValue); });
                     return [2 /*return*/, true];
             }
         });
-    }); }, [initialVale, value, props, field]);
+    }); }, [invalid, value, initValue, props, field]);
     var popoverWrapper = useGridPopoverHook({
         className: props.className,
         invalid: invalid,
@@ -3970,7 +4145,7 @@ var GridFormTextInput = function (props) {
     var helpText = (_a = props.helpText) !== null && _a !== void 0 ? _a : "Press enter or tab to save";
     var initValue = useMemo(function () { return (initialVale == null ? "" : "".concat(initialVale)); }, [initialVale]);
     var _d = useState(initValue), value = _d[0], setValue = _d[1];
-    var invalid = useCallback(function () { return TextInputValidator(props, value, data); }, [data, props, value]);
+    var invalid = useCallback(function () { return TextInputValidator(props, value, data, {}); }, [data, props, value]);
     var save = useCallback(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
         var trimmedValue;
         return __generator(this, function (_a) {
@@ -3979,19 +4154,14 @@ var GridFormTextInput = function (props) {
                     if (invalid())
                         return [2 /*return*/, false];
                     trimmedValue = value.trim();
+                    // No change, so don't save
                     if (initValue === trimmedValue)
                         return [2 /*return*/, true];
                     if (!props.onSave) return [3 /*break*/, 2];
                     return [4 /*yield*/, props.onSave(selectedRows, trimmedValue)];
                 case 1: return [2 /*return*/, _a.sent()];
                 case 2:
-                    if (field == null) {
-                        console.error("ColDef has no field set");
-                        return [2 /*return*/, false];
-                    }
-                    selectedRows.forEach(function (row) {
-                        row[field] = trimmedValue;
-                    });
+                    selectedRows.forEach(function (row) { return (row[field] = trimmedValue); });
                     return [2 /*return*/, true];
             }
         });
@@ -4010,32 +4180,30 @@ var GridPopoverTextInput = function (colDef, params) {
 
 var GridFormSubComponentTextInput = function (props) {
     var _a;
-    var _b = useContext(GridSubComponentContext), value = _b.value, setValue = _b.setValue, setValid = _b.setValid, data = _b.data;
+    var _b = useContext(GridSubComponentContext), value = _b.value, setValue = _b.setValue, setValid = _b.setValid, data = _b.data, context = _b.context;
     var helpText = (_a = props.helpText) !== null && _a !== void 0 ? _a : "Press enter or tab to save";
     // If is not initialised yet as it's just been created then set the default value
     useEffect(function () {
         if (value == null)
             setValue(props.defaultValue);
     }, [props.defaultValue, setValue, value]);
-    var invalid = useCallback(function () { return TextInputValidator(props, value, data); }, [data, props, value]);
+    var invalid = useCallback(function () { return TextInputValidator(props, value, data, context); }, [context, data, props, value]);
     useEffect(function () {
         setValid(value != null && invalid() == null);
     }, [setValid, invalid, value]);
-    return (jsx(TextInputFormatted, { value: value, error: invalid(), onChange: function (e) { return setValue(e.target.value); }, helpText: helpText, autoFocus: true, placeholder: props.placeholder, style: {
-            width: "100%"
-        } }));
+    return (jsx(TextInputFormatted, { value: value, error: invalid(), onChange: function (e) { return setValue(e.target.value); }, helpText: helpText, autoFocus: true, placeholder: props.placeholder, style: { width: "100%" } }));
 };
 
 var GridFormSubComponentTextArea = function (props) {
     var _a;
-    var _b = useContext(GridSubComponentContext), value = _b.value, data = _b.data, setValue = _b.setValue, setValid = _b.setValid;
+    var _b = useContext(GridSubComponentContext), value = _b.value, data = _b.data, setValue = _b.setValue, setValid = _b.setValid, context = _b.context;
     var helpText = (_a = props.helpText) !== null && _a !== void 0 ? _a : "Press tab to save";
     // If is not initialised yet as it's just been created then set the default value
     useEffect(function () {
         if (value == null)
             setValue(props.defaultValue);
     }, [props.defaultValue, setValue, value]);
-    var invalid = useCallback(function () { return TextInputValidator(props, value, data); }, [data, props, value]);
+    var invalid = useCallback(function () { return TextInputValidator(props, value, data, context); }, [data, props, value, context]);
     useEffect(function () {
         setValid(value != null && invalid() == null);
     }, [setValid, invalid, value]);
@@ -4115,16 +4283,17 @@ var useStateDeferred = function (initialValue) {
 var minimumInProgressTimeMs = 950;
 var ActionButton = function (_a) {
     var _b, _c, _d;
-    var icon = _a.icon, name = _a.name, inProgressName = _a.inProgressName, dataTestId = _a.dataTestId, className = _a.className, title = _a.title, onAction = _a.onAction, externalSetInProgress = _a.externalSetInProgress, _e = _a.size, size = _e === void 0 ? "sm" : _e, _f = _a.level, level = _f === void 0 ? "tertiary" : _f, ariaLabel = _a["aria-label"];
-    var _g = useState(false), inProgress = _g[0], setInProgress = _g[1];
+    var icon = _a.icon, name = _a.name, inProgressName = _a.inProgressName, dataTestId = _a.dataTestId, className = _a.className, title = _a.title, onAction = _a.onAction, externalSetInProgress = _a.externalSetInProgress, _e = _a.size, size = _e === void 0 ? "sm" : _e, _f = _a.iconPosition, iconPosition = _f === void 0 ? "left" : _f, _g = _a.level, level = _g === void 0 ? "tertiary" : _g, ariaLabel = _a["aria-label"];
+    var _h = useState(false), inProgress = _h[0], setInProgress = _h[1];
     var lastInProgress = usePrevious(inProgress !== null && inProgress !== void 0 ? inProgress : false);
-    var _h = useStateDeferred(inProgress), localInProgress = _h[0], setLocalInProgress = _h[1], setLocalInProgressDeferred = _h[2];
+    var _j = useStateDeferred(inProgress), localInProgress = _j[0], setLocalInProgress = _j[1], setLocalInProgressDeferred = _j[2];
     useEffect(function () {
         if (inProgress == lastInProgress)
             return;
         inProgress ? setLocalInProgress(true) : setLocalInProgressDeferred(false, minimumInProgressTimeMs);
     }, [inProgress, lastInProgress, setLocalInProgress, setLocalInProgressDeferred]);
-    return (jsxs(LuiButton, __assign({ "data-testid": dataTestId, type: "button", level: level, title: (_b = title !== null && title !== void 0 ? title : ariaLabel) !== null && _b !== void 0 ? _b : name, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : name, className: clsx("lui-button-icon", "ActionButton", className, localInProgress && "ActionButton-inProgress"), size: "lg", style: name == null ? { padding: "8px 5px" } : {}, onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
+    var buttonText = (jsxs("span", __assign({ className: "ActionButton-minimalArea" }, { children: [jsx("span", __assign({ className: "ActionButton-minimalAreaDisplay" }, { children: (_b = (localInProgress ? inProgressName : name)) !== null && _b !== void 0 ? _b : name })), jsx("span", __assign({ className: "ActionButton-minimalAreaExpand" }, { children: name }))] })));
+    return (jsxs(LuiButton, __assign({ "data-testid": dataTestId, type: "button", level: level, title: (_c = title !== null && title !== void 0 ? title : ariaLabel) !== null && _c !== void 0 ? _c : name, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : name, className: clsx("lui-button-icon-right", "ActionButton", className, localInProgress && "ActionButton-inProgress"), size: "lg", style: name == null ? { padding: "8px 5px" } : {}, onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
             var promise, isPromise;
             return __generator(this, function (_a) {
                 switch (_a.label) {
@@ -4146,13 +4315,19 @@ var ActionButton = function (_a) {
                     case 3: return [2 /*return*/];
                 }
             });
-        }); }, disabled: localInProgress }, { children: [localInProgress ? (jsx(LuiMiniSpinner, { size: 16, divProps: {
+        }); }, disabled: localInProgress }, { children: [iconPosition === "right" && buttonText, localInProgress ? (jsx(LuiMiniSpinner, { size: 16, divProps: {
                     "data-testid": "loading-spinner",
-                    style: { margin: 0, paddingRight: 5, paddingLeft: 3, paddingBottom: 0, paddingTop: 0 },
+                    style: {
+                        margin: 0,
+                        paddingRight: 5,
+                        paddingLeft: 3,
+                        paddingBottom: 0,
+                        paddingTop: 0
+                    },
                     role: "status",
                     "aria-label": "Loading"
-                } })) : (jsx(LuiIcon, { name: icon, alt: (_c = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : name) !== null && _c !== void 0 ? _c : "", size: size })), jsxs("span", __assign({ className: "ActionButton-minimalArea" }, { children: [jsx("span", __assign({ className: "ActionButton-minimalAreaDisplay" }, { children: (_d = (localInProgress ? inProgressName : name)) !== null && _d !== void 0 ? _d : name })), jsx("span", __assign({ className: "ActionButton-minimalAreaExpand" }, { children: name }))] }))] })));
+                } })) : (jsx(LuiIcon, { name: icon, alt: (_d = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : name) !== null && _d !== void 0 ? _d : "", size: size, spanProps: { style: iconPosition === "right" ? { transform: "scaleX(-1)" } : {} } })), iconPosition === "left" && buttonText] })));
 };
 
-export { ActionButton, ComponentLoadingWrapper, ControlledMenu, FocusableItem, GenericCellEditorComponentWrapper, GenericMultiEditCellClass, Grid, GridCell, GridCellRenderer, GridContext, GridContextProvider, GridFormDropDown, GridFormMultiSelect, GridFormPopoverMenu, GridFormSubComponentTextArea, GridFormSubComponentTextInput, GridHeaderSelect, GridIcon, GridLoadableCell, GridPopoutEditMultiSelect, GridPopoverContext, GridPopoverContextProvider, GridPopoverEditBearing, GridPopoverEditBearingCorrection, GridPopoverEditDropDown, GridPopoverMenu, GridPopoverMessage, GridPopoverTextArea, GridPopoverTextInput, GridRenderPopoutMenuCell, GridRendererGenericCell, GridSubComponentContext, GridUpdatingContext, GridUpdatingContextProvider, Menu, MenuButton, MenuDivider, MenuGroup, MenuHeader, MenuHeaderItem, MenuHeaderString, MenuItem, MenuRadioGroup, MenuSeparator, MenuSeparatorString, PopoutMenuSeparator, SubMenu, TextAreaInput, TextInputFormatted, bearingCorrectionValueFormatter, bearingNumberParser, bearingStringValidator, bearingValueFormatter, convertDDToDMS, hasParentClass, isFloat, isNotEmpty, useGridPopoverContext, useGridPopoverHook, useMenuState, usePostSortRowsHook, wait };
+export { ActionButton, ComponentLoadingWrapper, ControlledMenu, FocusableItem, GenericCellEditorComponentWrapper, GenericMultiEditCellClass, Grid, GridCell, GridCellRenderer, GridContext, GridContextProvider, GridFormDropDown, GridFormMultiSelect, GridFormPopoverMenu, GridFormSubComponentTextArea, GridFormSubComponentTextInput, GridHeaderSelect, GridIcon, GridLoadableCell, GridPopoutEditMultiSelect, GridPopoverContext, GridPopoverContextProvider, GridPopoverEditBearing, GridPopoverEditBearingCorrection, GridPopoverEditDropDown, GridPopoverMenu, GridPopoverMessage, GridPopoverTextArea, GridPopoverTextInput, GridRenderPopoutMenuCell, GridRendererGenericCell, GridSubComponentContext, GridUpdatingContext, GridUpdatingContextProvider, Menu, MenuButton, MenuDivider, MenuGroup, MenuHeader, MenuHeaderItem, MenuHeaderString, MenuItem, MenuRadioGroup, MenuSeparator, MenuSeparatorString, PopoutMenuSeparator, SubMenu, TextAreaInput, TextInputFormatted, bearingCorrectionValueFormatter, bearingNumberParser, bearingStringValidator, bearingValueFormatter, convertDDToDMS, hasParentClass, isFloat, isNotEmpty, stringByteLengthIsInvalid, useGridPopoverContext, useGridPopoverHook, useMenuState, usePostSortRowsHook, wait };
 //# sourceMappingURL=step-ag-grid.esm.js.map