@linzjs/step-ag-grid 6.1.0 → 7.0.0

package/dist/index.js

@@ -180,7 +180,22 @@ function commonProps(isDisabled, isHovering) {
         tabIndex: isHovering ? 0 : -1
     };
 }
-var indexOfNode = function (nodeList, node) { return lodashEs.findIndex(nodeList, node); };
+var indexOfNode = function (nodeList, node) { return lodashEs.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.
@@ -355,8 +370,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)
@@ -365,7 +381,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));
@@ -1201,26 +1219,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();
                 }
@@ -1278,10 +1283,7 @@ var MenuList = function (_a) {
     return (jsxRuntime.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: [jsxRuntime.jsx("div", { ref: focusRef, tabIndex: -1, style: { position: "absolute", left: 0, top: 0 } }), arrow && (jsxRuntime.jsx("div", { className: _arrowClass, style: __assign(__assign({}, arrowStyle), { position: "absolute", left: arrowPosition.x, top: arrowPosition.y }), ref: arrowRef })), jsxRuntime.jsx(MenuListContext.Provider, __assign({ value: listContext }, { children: jsxRuntime.jsx(MenuListItemContext.Provider, __assign({ value: itemContext }, { children: jsxRuntime.jsx(HoverItemContext.Provider, __assign({ value: hoverItem }, { children: children })) })) }))] })));
 };
 
-// Typed version of lodash !isEmpty
-var isNotEmpty = function (obj) {
-    return !lodashEs.isEmpty(obj);
-};
+var isNotEmpty = lodashEs.negate(lodashEs.isEmpty);
 var wait = function (timeoutMs) {
     return new Promise(function (resolve) {
         setTimeout(resolve, timeoutMs);
@@ -1292,15 +1294,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 = react.createContext({
@@ -1396,7 +1399,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))
@@ -1407,7 +1411,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();
@@ -2426,7 +2430,8 @@ var GridSubComponentContext = react.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}
@@ -2824,11 +2829,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) {
@@ -3002,11 +3007,11 @@ var GridRenderPopoutMenuCell = function (props) {
     return (jsxRuntime.jsx(GridLoadableCell, __assign({ isLoading: isLoading, className: disabled ? "GridPopoutMenu-burgerDisabled" : "GridPopoutMenu-burger" }, { children: jsxRuntime.jsx(lui.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 */
 
@@ -3096,14 +3101,16 @@ var GridFormDropDown = function (props) {
     var optionsInitialising = react.useRef(false);
     var _d = react.useState(null), options = _d[0], setOptions = _d[1];
     var subComponentIsValid = react.useRef(false);
-    var _e = react.useState(), subSelectedValue = _e[0], setSubSelectedValue = _e[1];
+    var subComponentInitialValue = react.useRef(null);
+    var _e = react.useState(null), subSelectedValue = _e[0], setSubSelectedValue = _e[1];
     var _f = react.useState(null), selectedSubComponent = _f[0], setSelectedSubComponent = _f[1];
     var selectItemHandler = react.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 })];
@@ -3279,15 +3286,10 @@ var GridFormDropDown = function (props) {
                             var _a;
                             return item.value === MenuSeparatorString ? (jsxRuntime.jsx(MenuDivider, {}, "$$divider_".concat(index))) : item.value === MenuHeaderString ? (jsxRuntime.jsx(MenuHeader, { children: item.label }, "$$header_".concat(index))) : filteredValues.includes(item.value) ? null : (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs(MenuItem, __assign({ disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", value: item.value, onClick: function (e) {
                                             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 {
@@ -3298,10 +3300,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 && (jsxRuntime.jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) { return (jsxRuntime.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;
@@ -3316,154 +3323,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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.error && (jsxRuntime.jsx("span", __assign({ className: "LuiTextInput-error", style: { paddingLeft: 0 } }, { children: props.error }))), props.helpText && !props.error && jsxRuntime.jsx("span", __assign({ className: "helpText" }, { children: props.helpText }))] }));
+};
+
+function escapeStringRegexp(string) {
+	if (typeof string !== 'string') {
+		throw new TypeError('Expected a string');
+	}
+
+	// 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 (lodashEs.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 = react.useMemo(function () {
-        var r = props.initialSelectedValues && props.initialSelectedValues(selectedRows);
-        // convert array of strings to object<value,null>
-        return Array.isArray(r) ? lodashEs.fromPairs(r.map(function (v) { return [v, null]; })) : r;
-    }, [props, selectedRows]);
-    var subComponentIsValid = react.useRef({});
-    var _b = react.useState(function () { return initialiseValues !== null && initialiseValues !== void 0 ? initialiseValues : {}; }), selectedValues = _b[0], setSelectedValues = _b[1];
-    var _c = react.useState(""), filter = _c[0], setFilter = _c[1];
-    var _d = react.useState([]), filteredValues = _d[0], setFilteredValues = _d[1];
+    var subComponentIsValidRef = react.useRef({});
     var optionsInitialising = react.useRef(false);
-    var _e = react.useState(), options = _e[0], setOptions = _e[1];
+    var _b = react.useState(""), filter = _b[0], setFilter = _b[1];
+    var _c = react.useState(""), initialValues = _c[0], setInitialValues = _c[1];
+    var _d = react.useState(), options = _d[0], setOptions = _d[1];
     var invalid = react.useCallback(function () {
-        var validations = lodashEs.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 = lodashEs.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 = react.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 = lodashEs.pick(subComponentIsValid.current, Object.keys(selectedValues));
-                    notValid = Object.values(validations).some(function (v) { return !v; });
-                    if (notValid)
-                        return [2 /*return*/, false];
-                    menuOptionSubValueResult = lodashEs.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 (lodashEs.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
     react.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
-                            lodashEs.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]);
-    react.useEffect(function () {
-        if (!props.filtered || options == null)
+    }, [options, props, selectedRows]);
+    /**
+     * Groups options into their header groups
+     */
+    var headerGroups = react.useMemo(function () {
+        return options &&
+            lodashEs.groupBy(options.filter(function (o) { return textMatch(o.label, filter) && o.value; }), "filter");
+    }, [filter, options]);
+    var headers = react.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(jsxRuntime.jsx(ComponentLoadingWrapper, __assign({ loading: !options, className: "GridFormMultiSelect-container" }, { children: options && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.filtered && (jsxRuntime.jsx(FilterInput, __assign({}, { headerGroups: headerGroups, options: options, setOptions: setOptions, filter: filter, setFilter: setFilter }, { filterHelpText: props.filterHelpText, onSelectFilter: props.onSelectFilter, filterPlaceholder: props.filterPlaceholder }))), headerGroups && (jsxRuntime.jsx("div", __assign({ className: "GridFormMultiSelect-options" }, { children: headers.map(function (header) {
+                        var subOptions = headerGroups["".concat(header.filter)];
+                        return (!lodashEs.isEmpty(subOptions) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [header.header && jsxRuntime.jsx(MenuHeader, { children: header.header }), subOptions.map(function (item, index) {
+                                    return item.value === MenuSeparatorString ? (jsxRuntime.jsx(MenuDivider, {}, "div_".concat(index))) : (jsxRuntime.jsxs(react.Fragment, { children: [jsxRuntime.jsx(MenuRadioItem, { item: item, options: options, setOptions: setOptions }), item.checked && item.subComponent && (jsxRuntime.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 = react.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 = react.useCallback(function (item) {
-        var _a;
-        if ("".concat(item.value) in selectedValues) {
-            setSelectedValues(lodashEs.omit(selectedValues, ["".concat(item.value)]));
+        if (lodashEs.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(jsxRuntime.jsx(ComponentLoadingWrapper, __assign({ loading: !options, className: "GridFormMultiSelect-container" }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [options && props.filtered && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FocusableItem, __assign({ className: "filter-item" }, { children: function (_a) {
-                                var _b;
-                                var ref = _a.ref;
-                                return (jsxRuntime.jsx("div", __assign({ style: { display: "flex", width: "100%" }, className: "GridFormMultiSelect-filter" }, { children: jsxRuntime.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"), jsxRuntime.jsx(MenuDivider, {}, "$$divider_filter")] })), jsxRuntime.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 ? (jsxRuntime.jsx(MenuDivider, {}, "$$divider_".concat(index))) : filteredValues.includes(item.value) ? null : (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(MenuItem, __assign({ onClick: function (e) {
-                                        // Global react-menu MenuItem handler handles tabs
-                                        if (e.key !== "Tab") {
-                                            e.keepOpen = true;
-                                            toggleValue(item);
-                                        }
-                                    } }, { children: jsxRuntime.jsx(lui.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 && (jsxRuntime.jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (_) {
-                                        return item.subComponent && (jsxRuntime.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: jsxRuntime.jsx(item.subComponent, {}) })));
-                                    } }), "".concat(item.value, "_subcomponent")))] }, "".concat(index)));
-                    }) }))] }) })));
+        setOptions(__spreadArray([], options, true));
+    }, [filter, headerGroups, options, setOptions]);
+    var addCustomFilterValue = react.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 = react.useCallback(function (e) {
+        if (e.key === "Enter") {
+            e.stopPropagation();
+            e.preventDefault();
+            if (e.ctrlKey)
+                toggleSelectAllVisible();
+            else if (onSelectFilter)
+                addCustomFilterValue();
+        }
+    }, [addCustomFilterValue, onSelectFilter, toggleSelectAllVisible]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FocusableItem, __assign({ className: "filter-item" }, { children: function (_) { return (jsxRuntime.jsxs("div", __assign({ style: { width: "100%" }, className: "GridFormMultiSelect-filter" }, { children: [jsxRuntime.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 && (jsxRuntime.jsx(FormError, { error: null, helpText: typeof filterHelpText === "function" ? filterHelpText(filter.trim(), options) : filterHelpText }))] }))); } }), "filter"), jsxRuntime.jsx(MenuDivider, {}, "$$divider_filter"), headerGroups && !lodashEs.toPairs(headerGroups).some(function (_a) {
+                _a[0]; var options = _a[1];
+                return !lodashEs.isEmpty(options);
+            }) && (jsxRuntime.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 = react.useCallback(function (item) {
+        item.checked = !item.checked;
+        setOptions(__spreadArray([], options, true));
+    }, [options, setOptions]);
+    return (jsxRuntime.jsx(MenuItem, __assign({ onClick: function (e) {
+            // Global react-menu MenuItem handler handles tabs
+            if (e.key !== "Tab") {
+                e.keepOpen = true;
+                toggleValue(item);
+            }
+        } }, { children: jsxRuntime.jsx(lui.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 (jsxRuntime.jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (_) {
+            return item.subComponent && (jsxRuntime.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: jsxRuntime.jsx(item.subComponent, {}) })));
+        } }), "".concat(item.value, "_subcomponent")));
 };
 
 var GridPopoutEditMultiSelect = function (colDef, props) {
@@ -3598,6 +3777,7 @@ var GridFormPopoverMenu = function (props) {
     return popoverWrapper(jsxRuntime.jsx(ComponentLoadingWrapper, __assign({ loading: !options, className: "GridFormPopupMenu" }, { children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: options === null || options === void 0 ? void 0 : options.map(function (item, index) {
                 return item.label === PopoutMenuSeparator ? (jsxRuntime.jsx(MenuDivider, {}, "$$divider_".concat(index))) : (!item.hidden && (jsxRuntime.jsxs(react.Fragment, { children: [jsxRuntime.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 && (jsxRuntime.jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (_) {
                                 return item.subComponent && (jsxRuntime.jsx(GridSubComponentContext.Provider, __assign({ value: {
+                                        context: {},
                                         data: data,
                                         value: subSelectedValue,
                                         setValue: function (value) {
@@ -3706,12 +3886,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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.error && (jsxRuntime.jsxs("span", __assign({ className: "LuiTextInput-error" }, { children: [jsxRuntime.jsx(lui.LuiIcon, { alt: "error", name: "ic_error", className: "LuiTextInput-error-icon", size: "sm", status: "error" }), props.error] }))), props.helpText && !props.error && (jsxRuntime.jsx("span", __assign({ style: {
-                    fontSize: "0.7rem"
-                } }, { children: props.helpText })))] }));
-};
-
 var TextInputFormatted = function (props) {
     return (jsxRuntime.jsxs("div", __assign({ className: clsx("LuiTextInput Grid-popoverContainer", props.error && "hasError", props.className) }, { children: [jsxRuntime.jsxs("span", __assign({ className: "LuiTextInput-inputWrapper" }, { children: [jsxRuntime.jsx("input", __assign({ type: "text", spellCheck: true, defaultValue: props.value }, lodashEs.omit(props, ["error", "value", "helpText", "formatted", "className"]), { className: "LuiTextInput-input", onMouseEnter: function (e) {
                             e.currentTarget.focus();
@@ -3907,12 +4081,13 @@ var TextAreaInput = function (props) {
                             } }, { children: props.value })) }))] })), jsxRuntime.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";
@@ -3920,11 +4095,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;
 };
@@ -3932,30 +4107,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 = react.useState(initialVale != null ? "".concat(initialVale) : ""), value = _d[0], setValue = _d[1];
+    var initValue = react.useMemo(function () { return (initialVale == null ? "" : "".concat(initialVale)); }, [initialVale]);
+    var _d = react.useState(initValue), value = _d[0], setValue = _d[1];
     var helpText = (_a = props.helpText) !== null && _a !== void 0 ? _a : "Press tab to save";
-    var invalid = react.useCallback(function () { return TextInputValidator(props, value, data); }, [props, value, data]);
+    var invalid = react.useCallback(function () { return TextInputValidator(props, value, data, {}); }, [props, value, data]);
     var save = react.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,
@@ -3972,7 +4147,7 @@ var GridFormTextInput = function (props) {
     var helpText = (_a = props.helpText) !== null && _a !== void 0 ? _a : "Press enter or tab to save";
     var initValue = react.useMemo(function () { return (initialVale == null ? "" : "".concat(initialVale)); }, [initialVale]);
     var _d = react.useState(initValue), value = _d[0], setValue = _d[1];
-    var invalid = react.useCallback(function () { return TextInputValidator(props, value, data); }, [data, props, value]);
+    var invalid = react.useCallback(function () { return TextInputValidator(props, value, data, {}); }, [data, props, value]);
     var save = react.useCallback(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
         var trimmedValue;
         return __generator(this, function (_a) {
@@ -3981,19 +4156,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];
             }
         });
@@ -4012,32 +4182,30 @@ var GridPopoverTextInput = function (colDef, params) {
 
 var GridFormSubComponentTextInput = function (props) {
     var _a;
-    var _b = react.useContext(GridSubComponentContext), value = _b.value, setValue = _b.setValue, setValid = _b.setValid, data = _b.data;
+    var _b = react.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
     react.useEffect(function () {
         if (value == null)
             setValue(props.defaultValue);
     }, [props.defaultValue, setValue, value]);
-    var invalid = react.useCallback(function () { return TextInputValidator(props, value, data); }, [data, props, value]);
+    var invalid = react.useCallback(function () { return TextInputValidator(props, value, data, context); }, [context, data, props, value]);
     react.useEffect(function () {
         setValid(value != null && invalid() == null);
     }, [setValid, invalid, value]);
-    return (jsxRuntime.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 (jsxRuntime.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 = react.useContext(GridSubComponentContext), value = _b.value, data = _b.data, setValue = _b.setValue, setValid = _b.setValid;
+    var _b = react.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
     react.useEffect(function () {
         if (value == null)
             setValue(props.defaultValue);
     }, [props.defaultValue, setValue, value]);
-    var invalid = react.useCallback(function () { return TextInputValidator(props, value, data); }, [data, props, value]);
+    var invalid = react.useCallback(function () { return TextInputValidator(props, value, data, context); }, [data, props, value, context]);
     react.useEffect(function () {
         setValid(value != null && invalid() == null);
     }, [setValid, invalid, value]);
@@ -4117,16 +4285,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 = react.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 = react.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];
     react.useEffect(function () {
         if (inProgress == lastInProgress)
             return;
         inProgress ? setLocalInProgress(true) : setLocalInProgressDeferred(false, minimumInProgressTimeMs);
     }, [inProgress, lastInProgress, setLocalInProgress, setLocalInProgressDeferred]);
-    return (jsxRuntime.jsxs(lui.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 = (jsxRuntime.jsxs("span", __assign({ className: "ActionButton-minimalArea" }, { children: [jsxRuntime.jsx("span", __assign({ className: "ActionButton-minimalAreaDisplay" }, { children: (_b = (localInProgress ? inProgressName : name)) !== null && _b !== void 0 ? _b : name })), jsxRuntime.jsx("span", __assign({ className: "ActionButton-minimalAreaExpand" }, { children: name }))] })));
+    return (jsxRuntime.jsxs(lui.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) {
@@ -4148,12 +4317,18 @@ var ActionButton = function (_a) {
                     case 3: return [2 /*return*/];
                 }
             });
-        }); }, disabled: localInProgress }, { children: [localInProgress ? (jsxRuntime.jsx(lui.LuiMiniSpinner, { size: 16, divProps: {
+        }); }, disabled: localInProgress }, { children: [iconPosition === "right" && buttonText, localInProgress ? (jsxRuntime.jsx(lui.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"
-                } })) : (jsxRuntime.jsx(lui.LuiIcon, { name: icon, alt: (_c = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : name) !== null && _c !== void 0 ? _c : "", size: size })), jsxRuntime.jsxs("span", __assign({ className: "ActionButton-minimalArea" }, { children: [jsxRuntime.jsx("span", __assign({ className: "ActionButton-minimalAreaDisplay" }, { children: (_d = (localInProgress ? inProgressName : name)) !== null && _d !== void 0 ? _d : name })), jsxRuntime.jsx("span", __assign({ className: "ActionButton-minimalAreaExpand" }, { children: name }))] }))] })));
+                } })) : (jsxRuntime.jsx(lui.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] })));
 };
 
 exports.ActionButton = ActionButton;
@@ -4213,6 +4388,7 @@ exports.convertDDToDMS = convertDDToDMS;
 exports.hasParentClass = hasParentClass;
 exports.isFloat = isFloat;
 exports.isNotEmpty = isNotEmpty;
+exports.stringByteLengthIsInvalid = stringByteLengthIsInvalid;
 exports.useGridPopoverContext = useGridPopoverContext;
 exports.useGridPopoverHook = useGridPopoverHook;
 exports.useMenuState = useMenuState;