@splunk/react-ui 5.2.0 → 5.3.0

package/Multiselect.js

@@ -41,7 +41,7 @@
  */            function c(e) {
                 var n = e.componentProps, r = e.componentName, o = r === void 0 ? "this component" : r, a = e.defaultValuePropName, i = a === void 0 ? "defaultValue" : a, u = e.valuePropName, c = u === void 0 ? "value" : u;
                 var s = (0, t.useRef)(l()(n, c));
-                var f = (0, t.useRef)(n[i]);
+                var d = (0, t.useRef)(n[i]);
                 (0, t.useEffect)((function() {
                     if (false) {}
                 }), [ o, n, i, c ]);
@@ -169,15 +169,15 @@
         const c = require("@splunk/react-ui/useControlled");
         var s =  r.n(c);
         // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-        const f = require("@splunk/ui-utils/i18n");
+        const d = require("@splunk/ui-utils/i18n");
         // CONCATENATED MODULE: ./src/Select/OptionBase.tsx
-        function d(e) {
+        function f(e) {
             "@babel/helpers - typeof";
-            return d = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+            return f = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
                 return typeof e;
             } : function(e) {
                 return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
-            }, d(e);
+            }, f(e);
         }
         function p() {
             return p = Object.assign ? Object.assign.bind() : function(e) {
@@ -221,14 +221,14 @@
         }
         function y(e) {
             var n = g(e, "string");
-            return "symbol" == d(n) ? n : n + "";
+            return "symbol" == f(n) ? n : n + "";
         }
         function g(e, n) {
-            if ("object" != d(e) || !e) return e;
+            if ("object" != f(e) || !e) return e;
             var r = e[Symbol.toPrimitive];
             if (void 0 !== r) {
                 var t = r.call(e, n || "default");
-                if ("object" != d(t)) return t;
+                if ("object" != f(t)) return t;
                 throw new TypeError("@@toPrimitive must return a primitive value.");
             }
             return ("string" === n ? String : Number)(e);
@@ -286,15 +286,15 @@
         /**
  * An option within a `Multiselect`.
  */        function w(r) {
-            var t = r.children, o = r.descriptionPosition, a = o === void 0 ? "bottom" : o, l = r.disabled, i = r.elementRef, c = r.icon, s = r.label, f = r.multiple, d = r.onClick, v = r.role, m = v === void 0 ? "option" : v, y = r.value, g = h(r, [ "children", "descriptionPosition", "disabled", "elementRef", "icon", "label", "multiple", "onClick", "role", "value" ]);
+            var t = r.children, o = r.descriptionPosition, a = o === void 0 ? "bottom" : o, l = r.disabled, i = r.elementRef, c = r.icon, s = r.label, d = r.multiple, f = r.onClick, v = r.role, m = v === void 0 ? "option" : v, y = r.value, g = h(r, [ "children", "descriptionPosition", "disabled", "elementRef", "icon", "label", "multiple", "onClick", "role", "value" ]);
             // @docs-props-type OptionPropsBase
                         var O = (0, e.useCallback)((function(e) {
                 if (!l) {
-                    d === null || d === void 0 ? void 0 : d(e, {
+                    f === null || f === void 0 ? void 0 : f(e, {
                         value: y
                     });
                 }
-            }), [ l, d, y ]);
+            }), [ l, f, y ]);
             var S = y.toString();
             var w = b({
                 descriptionPosition: a,
@@ -307,7 +307,7 @@
                 elementRef: i
             }, w, {
                 selectable: true,
-                selectableAppearance: f ? "checkbox" : "checkmark",
+                selectableAppearance: d ? "checkbox" : "checkmark",
                 startAdornment: c,
                 onClick: O,
                 role: m,
@@ -386,7 +386,7 @@
         /**
  * An option within a `Multiselect`.
  */        function E(e) {
-            var r = e.compact, t = e.children, o = e.description, a = e.descriptionPosition, l = a === void 0 ? "bottom" : a, i = e.disabled, u = e.elementRef, c = e.hidden, s = e.icon, f = e.label, d = e.matchRanges, p = e.role, v = e.selected, b = e.truncate, m = e.value, y = x(e, [ "compact", "children", "description", "descriptionPosition", "disabled", "elementRef", "hidden", "icon", "label", "matchRanges", "role", "selected", "truncate", "value" ]);
+            var r = e.compact, t = e.children, o = e.description, a = e.descriptionPosition, l = a === void 0 ? "bottom" : a, i = e.disabled, u = e.elementRef, c = e.hidden, s = e.icon, d = e.label, f = e.matchRanges, p = e.role, v = e.selected, b = e.truncate, m = e.value, y = x(e, [ "compact", "children", "description", "descriptionPosition", "disabled", "elementRef", "hidden", "icon", "label", "matchRanges", "role", "selected", "truncate", "value" ]);
             // @docs-props-type OptionPropsBase
             // selectedAppearance, selectedBackgroundColor, and selectedForegroundColor are not used directly by the Option component.
             // They are consumed by the parent component (Multiselect-Normal) to render the Chip, so they are not included in the above prop list.
@@ -398,15 +398,15 @@
                 elementRef: u,
                 hidden: c,
                 icon: s,
-                label: f,
-                matchRanges: d,
+                label: d,
+                matchRanges: f,
                 role: p,
                 selected: v,
                 truncate: b,
                 value: m
             }, y, {
                 multiple: r
-            }), t || f);
+            }), t || d);
         }
         E.propTypes = P;
         /* harmony default export */        const M = E;
@@ -432,8 +432,8 @@
         const K = require("lodash/uniq");
         var H =  r.n(K);
         // CONCATENATED MODULE: external "lodash/without"
-        const z = require("lodash/without");
-        var $ =  r.n(z);
+        const $ = require("lodash/without");
+        var z =  r.n($);
         // CONCATENATED MODULE: external "@splunk/react-icons/CaretSmallDown"
         const W = require("@splunk/react-icons/CaretSmallDown");
         var U =  r.n(W);
@@ -465,16 +465,16 @@
         // CONCATENATED MODULE: external "@splunk/ui-utils/scroll"
         const se = require("@splunk/ui-utils/scroll");
         // CONCATENATED MODULE: ./src/Select/SelectAllOption.tsx
-        function fe(e) {
+        function de(e) {
             "@babel/helpers - typeof";
-            return fe = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+            return de = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
                 return typeof e;
             } : function(e) {
                 return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
-            }, fe(e);
+            }, de(e);
         }
-        function de() {
-            return de = Object.assign ? Object.assign.bind() : function(e) {
+        function fe() {
+            return fe = Object.assign ? Object.assign.bind() : function(e) {
                 for (var n = 1; n < arguments.length; n++) {
                     var r = arguments[n];
                     for (var t in r) {
@@ -482,7 +482,7 @@
                     }
                 }
                 return e;
-            }, de.apply(null, arguments);
+            }, fe.apply(null, arguments);
         }
         function pe(e, n) {
             if (null == e) return {};
@@ -537,14 +537,14 @@
         }
         function ge(e) {
             var n = he(e, "string");
-            return "symbol" == fe(n) ? n : n + "";
+            return "symbol" == de(n) ? n : n + "";
         }
         function he(e, n) {
-            if ("object" != fe(e) || !e) return e;
+            if ("object" != de(e) || !e) return e;
             var r = e[Symbol.toPrimitive];
             if (void 0 !== r) {
                 var t = r.call(e, n || "default");
-                if ("object" != fe(t)) return t;
+                if ("object" != de(t)) return t;
                 throw new TypeError("@@toPrimitive must return a primitive value.");
             }
             return ("string" === n ? String : Number)(e);
@@ -555,16 +555,17 @@
             value: i().string
         });
         function Se(e) {
-            var r = e.active, t = e.elementRef, o = e.id, a = e.label, l = e.onClick, i = e.selected, u = e.totalCount, c = e.value, s = c === void 0 ? "selectAll" : c, f = pe(e, [ "active", "elementRef", "id", "label", "onClick", "selected", "totalCount", "value" ]);
+            var r = e.active, t = e.elementRef, o = e.id, a = e.label, l = e.onClick, i = e.selected, u = e.totalCount, c = e.value, s = c === void 0 ? "selectAll" : c, d = pe(e, [ "active", "elementRef", "id", "label", "onClick", "selected", "totalCount", "value" ]);
+            // @docs-props-type SelectAllOptionPropsBase
             // When toggle is changed the total count is not displayed anymore so the count is now shown in the Select all menu item
-                        var d = u != null ? " (".concat(u === null || u === void 0 ? void 0 : u.toString(), ")") : "";
+                        var f = u != null ? " (".concat(u === null || u === void 0 ? void 0 : u.toString(), ")") : "";
             
-            return n().createElement(C, de({
+            return n().createElement(C, fe({
                 active: r,
                 elementRef: t,
                 "aria-keyshortcuts": "Control+A",
                 "data-test": "select-all",
-                description: "".concat(d, " Ctrl-a"),
+                description: "".concat(f, " Ctrl-a"),
                 descriptionPosition: "right",
                 id: o,
                 key: "selectAll",
@@ -574,7 +575,7 @@
                 selected: i,
                 role: "menuitemcheckbox",
                 value: s
-            }, f));
+            }, d));
         }
         Se.propTypes = Oe;
         /* harmony default export */        const we = Se;
@@ -731,10 +732,10 @@
             return e;
         }
         var He = Ke();
-        /* harmony default export */        const ze = /* unused pure expression or super */ null && He;
+        /* harmony default export */        const $e = /* unused pure expression or super */ null && He;
         // CONCATENATED MODULE: ./src/utils/ssrWindow.ts
         /* eslint-disable @typescript-eslint/no-empty-function */
-        var $e = {
+        var ze = {
             document: _e,
             navigator: {
                 userAgent: ""
@@ -790,7 +791,7 @@
             }
         };
         function We() {
-            var e = typeof window !== "undefined" ? window : $e;
+            var e = typeof window !== "undefined" ? window : ze;
             return e;
         }
         var Ue = We();
@@ -913,7 +914,7 @@
                 return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
             }, sn(e);
         }
-        function fn(e, n) {
+        function dn(e, n) {
             var r = Object.keys(e);
             if (Object.getOwnPropertySymbols) {
                 var t = Object.getOwnPropertySymbols(e);
@@ -923,12 +924,12 @@
             }
             return r;
         }
-        function dn(e) {
+        function fn(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var r = null != arguments[n] ? arguments[n] : {};
-                n % 2 ? fn(Object(r), !0).forEach((function(n) {
+                n % 2 ? dn(Object(r), !0).forEach((function(n) {
                     pn(e, n, r[n]);
-                })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : fn(Object(r)).forEach((function(n) {
+                })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : dn(Object(r)).forEach((function(n) {
                     Object.defineProperty(e, n, Object.getOwnPropertyDescriptor(r, n));
                 }));
             }
@@ -1011,10 +1012,10 @@
         // preserve separate widths for single vs. multi mode
                 var gn = T()((function(e) {
             var n = e.anchorWidth, r = e.isMultiple, t = e.maxHeight, o = e.menuStyle;
-            return r ? dn({
+            return r ? fn({
                 width: Math.max(n !== null && n !== void 0 ? n : 0, 200),
                 maxHeight: t
-            }, o) : dn({
+            }, o) : fn({
                 minWidth: n !== null && n !== void 0 ? n : undefined,
                 maxWidth: Math.max(n !== null && n !== void 0 ? n : 0, 300),
                 maxHeight: t
@@ -1028,13 +1029,13 @@
             return "".concat(sn(e), "-").concat(e, "-").concat(n);
         }
         var wn = [ "append", "error", "prepend" ];
-        var Cn = (0, f._)("No matches");
-        var kn = (0, f._)("Select...");
+        var Cn = (0, d._)("No matches");
+        var kn = (0, d._)("Select...");
         var xn =  n().createElement(G(), null);
         var jn = function e(r) {
-            var t = r.activeItemId, o = r.filterA11yId, a = r.filterKeyword, l = r.hasChildren, i = r.inputId, u = r.inputRef, c = r.menuListboxId, s = r.multiple, d = r.onClearAll, p = r.onSelectAll, v = r.onTextBlur, b = r.onTextChange, m = r.onTextFocus, y = r.onTextKeyDown, g = r.optionSelection, h = r.placement, O = r.selectAllAppearance, S = r.textHasFocus;
-            var w = (0, f._)("Select all options".concat(g.current === "all" ? " disabled" : ""));
-            var C = (0, f._)("Clear all options".concat(g.current === "none" ? " disabled" : ""));
+            var t = r.activeItemId, o = r.filterA11yId, a = r.filterKeyword, l = r.hasChildren, i = r.inputId, u = r.inputRef, c = r.menuListboxId, s = r.multiple, f = r.onClearAll, p = r.onSelectAll, v = r.onTextBlur, b = r.onTextChange, m = r.onTextFocus, y = r.onTextKeyDown, g = r.optionSelection, h = r.placement, O = r.selectAllAppearance, S = r.textHasFocus;
+            var w = (0, d._)("Select all options".concat(g.current === "all" ? " disabled" : ""));
+            var C = (0, d._)("Clear all options".concat(g.current === "none" ? " disabled" : ""));
             // only visually disable these as opposed to fully disabling to avoid losing keyboard focus - see SUI-2731
                         var k =  n().createElement(De, {
                 key: "selectAll"
@@ -1045,20 +1046,20 @@
                 onClick: p,
                 "data-test": "select-all",
                 tag: "button"
-            }, a ? (0, f._)("Select all Matches") : (0, f._)("Select all")),  n().createElement(Ve, {
+            }, a ? (0, d._)("Select all Matches") : (0, d._)("Select all")),  n().createElement(Ve, {
                 disabled: g.current === "none",
                 appearance: "standalone",
                 "aria-label": C,
-                onClick: d,
+                onClick: f,
                 "data-test": "clear-all",
                 tag: "button"
-            }, a ? (0, f._)("Clear all Matches") : (0, f._)("Clear all")));
+            }, a ? (0, d._)("Clear all Matches") : (0, d._)("Clear all")));
             
             return n().createElement("div", {
                 key: "controls"
             }, o &&  n().createElement(te(), {
                 id: o
-            }, (0, f._)("Type to filter")), h === "above" &&  n().createElement(qe, null),  n().createElement(Be, {
+            }, (0, d._)("Type to filter")), h === "above" &&  n().createElement(qe, null),  n().createElement(Be, {
                 key: "filter",
                 "data-test": "filter"
             },  n().createElement(ae(), {
@@ -1071,12 +1072,12 @@
                 onKeyDown: y,
                 onFocus: m,
                 onBlur: v,
-                placeholder: (0, f._)("filter"),
+                placeholder: (0, d._)("filter"),
                 role: "combobox",
                 "aria-expanded": "true",
                 "aria-controls": c,
                 "aria-owns": S && l ? t : undefined,
-                "aria-label": (0, f._)("Filter"),
+                "aria-label": (0, d._)("Filter"),
                 "aria-autocomplete": "list",
                 "aria-activedescendant": S && l ? t : undefined,
                 inputRef: u,
@@ -1097,7 +1098,7 @@
             return a;
         };
         var En =  n().forwardRef((function(r, t) {
-            var o = r.appearance, a = o === void 0 ? "default" : o, l = r.append, i = r.children, u = r.currentValues, c = u === void 0 ? [] : u, s = r.describedBy, d = r.disabled, p = r.elementRef, v = r.error, b = r.inline, m = r.labelText, y = r.labelledBy, g = r.multiple, h = r.onClick, O = r.placeholder, S = r.prefixLabel, w = r.prepend, C = r.required, k = r.suffixLabel, x = r.toggle, j = r.toggleContent, P = un(r, [ "appearance", "append", "children", "currentValues", "describedBy", "disabled", "elementRef", "error", "inline", "labelText", "labelledBy", "multiple", "onClick", "placeholder", "prefixLabel", "prepend", "required", "suffixLabel", "toggle", "toggleContent" ]);
+            var o = r.appearance, a = o === void 0 ? "default" : o, l = r.append, i = r.children, u = r.currentValues, c = u === void 0 ? [] : u, s = r.describedBy, f = r.disabled, p = r.elementRef, v = r.error, b = r.inline, m = r.labelText, y = r.labelledBy, g = r.multiple, h = r.onClick, O = r.placeholder, S = r.prefixLabel, w = r.prepend, C = r.required, k = r.suffixLabel, x = r.toggle, j = r.toggleContent, P = un(r, [ "appearance", "append", "children", "currentValues", "describedBy", "disabled", "elementRef", "error", "inline", "labelText", "labelledBy", "multiple", "onClick", "placeholder", "prefixLabel", "prepend", "required", "suffixLabel", "toggle", "toggleContent" ]);
             var E;
             var M;
             var R = [];
@@ -1122,8 +1123,8 @@
                     R.push(n.toString());
                 }
                 if (r < t.length - 1) {
-                    e.push((0, f._)(", "));
-                    R.push((0, f._)(", "));
+                    e.push((0, d._)(", "));
+                    R.push((0, d._)(", "));
                 }
                 return e;
             }), []);
@@ -1152,7 +1153,7 @@
                 R = M;
             }
             var N = Object.keys(P).includes("aria-labelledby");
-            var V = dn({
+            var V = fn({
                 "aria-describedby": s,
                 "aria-label": y || N ? undefined : "".concat(m ? "".concat(m, ", ") : "").concat(R.join("")),
                 // aria-labelledby takes precedence over aria-label, so existence of both is redundant
@@ -1163,7 +1164,7 @@
                 prepend: w,
                 onClick: h,
                 role: "combobox",
-                disabled: d ? "disabled" : undefined,
+                disabled: f ? "disabled" : undefined,
                 elementRef: p,
                 error: v,
                 ref: t
@@ -1204,7 +1205,7 @@
             }, "(", c.length, ")"));
         }));
         function Mn(r) {
-            var t = r.allowKeyMatching, o = t === void 0 ? true : t, a = r.animateLoading, l = r.appearance, i = l === void 0 ? "default" : l, c = r.append, s = r.allowNewValues, d = r.children, p = r.defaultPlacement, v = p === void 0 ? "vertical" : p, b = r.defaultValues, m = r.describedBy, y = r.disabled, g = r.elementRef, h = r.error, O = r.filter, S = r.footerMessage, w = r.inline, k = r.inputId, x = r.inputRef, j = r.isLoadingOptions, P = r.labelledBy, E = r.labelText, M = r.loadingMessage, R = r.menuStyle, A = R === void 0 ? {} : R, I = r.multiple, N = r.name, D = r.noOptionsMessage, L = D === void 0 ? Cn : D, T = r.onChange, F = r.onScroll, _ = r.onScrollBottom, K = r.onFilterChange, z = r.onClick, W = r.onClose, U = r.onOpen, X = r.required, G = r.placeholder, J = G === void 0 ? kn : G, Y = r.prefixLabel, Z = r.prepend, re = r.repositionMode, te = re === void 0 ? "flip" : re, oe = r.selectAllAppearance, ae = oe === void 0 ? "buttongroup" : oe, le = r.showSelectedValuesFirst, fe = r.suffixLabel, de = r.tabConfirmsNewValue, pe = r.values, ve = r.virtualization, be = r.toggle, me = r.toggleContent, ye = me === void 0 ? "optionChildren" : me, ge = un(r, [ "allowKeyMatching", "animateLoading", "appearance", "append", "allowNewValues", "children", "defaultPlacement", "defaultValues", "describedBy", "disabled", "elementRef", "error", "filter", "footerMessage", "inline", "inputId", "inputRef", "isLoadingOptions", "labelledBy", "labelText", "loadingMessage", "menuStyle", "multiple", "name", "noOptionsMessage", "onChange", "onScroll", "onScrollBottom", "onFilterChange", "onClick", "onClose", "onOpen", "required", "placeholder", "prefixLabel", "prepend", "repositionMode", "selectAllAppearance", "showSelectedValuesFirst", "suffixLabel", "tabConfirmsNewValue", "values", "virtualization", "toggle", "toggleContent" ]);
+            var t = r.allowKeyMatching, o = t === void 0 ? true : t, a = r.animateLoading, l = r.appearance, i = l === void 0 ? "default" : l, c = r.append, s = r.allowNewValues, f = r.children, p = r.defaultPlacement, v = p === void 0 ? "vertical" : p, b = r.defaultValues, m = r.describedBy, y = r.disabled, g = r.elementRef, h = r.error, O = r.filter, S = r.footerMessage, w = r.inline, k = r.inputId, x = r.inputRef, j = r.isLoadingOptions, P = r.labelledBy, E = r.labelText, M = r.loadingMessage, R = r.menuStyle, A = R === void 0 ? {} : R, I = r.multiple, N = r.name, D = r.noOptionsMessage, L = D === void 0 ? Cn : D, T = r.onChange, F = r.onScroll, _ = r.onScrollBottom, K = r.onFilterChange, $ = r.onClick, W = r.onClose, U = r.onOpen, X = r.required, G = r.placeholder, J = G === void 0 ? kn : G, Y = r.prefixLabel, Z = r.prepend, re = r.repositionMode, te = re === void 0 ? "flip" : re, oe = r.selectAllAppearance, ae = oe === void 0 ? "buttongroup" : oe, le = r.showSelectedValuesFirst, de = r.suffixLabel, fe = r.tabConfirmsNewValue, pe = r.values, ve = r.virtualization, be = r.toggle, me = r.toggleContent, ye = me === void 0 ? "optionChildren" : me, ge = un(r, [ "allowKeyMatching", "animateLoading", "appearance", "append", "allowNewValues", "children", "defaultPlacement", "defaultValues", "describedBy", "disabled", "elementRef", "error", "filter", "footerMessage", "inline", "inputId", "inputRef", "isLoadingOptions", "labelledBy", "labelText", "loadingMessage", "menuStyle", "multiple", "name", "noOptionsMessage", "onChange", "onScroll", "onScrollBottom", "onFilterChange", "onClick", "onClose", "onOpen", "required", "placeholder", "prefixLabel", "prepend", "repositionMode", "selectAllAppearance", "showSelectedValuesFirst", "suffixLabel", "tabConfirmsNewValue", "values", "virtualization", "toggle", "toggleContent" ]);
             // @docs-props-type SelectBasePropsBase
                         var he = (0, Le["default"])({
                 componentName: "SelectBase",
@@ -1225,7 +1226,7 @@
             var Re = (0, e.useState)(""), Ae = nn(Re, 2), Ie = Ae[0], Be = Ae[1];
             var Ne = (0, e.useState)(false), Ve = nn(Ne, 2), De = Ve[0], qe = Ve[1];
             var Te = (0, e.useState)(false), _e = nn(Te, 2), Ke = _e[0], He = _e[1];
-            var ze = (0, e.useState)([]), $e = nn(ze, 2), Ue = $e[0], Xe = $e[1];
+            var $e = (0, e.useState)([]), ze = nn($e, 2), Ue = ze[0], Xe = ze[1];
             var Qe = (0, e.useState)(b || []), Ye = nn(Qe, 2), Ze = Ye[0], rn = Ye[1];
  // previous state
                         var tn = ie()(Ee);
@@ -1235,8 +1236,8 @@
             var ln = (0, e.useRef)(null);
             var cn = (0, e.useRef)([]);
             var sn = (0, e.useRef)([]);
-            var fn = (0, e.useRef)(tn);
-            var dn = (0, e.useRef)();
+            var dn = (0, e.useRef)(tn);
+            var fn = (0, e.useRef)();
             var pn = (0, e.useRef)({});
             var vn = (0, e.useRef)(0);
             var bn = (0, e.useRef)([]);
@@ -1285,7 +1286,7 @@
             var Nn = (0, e.useCallback)((function() {
                 qe(false);
                 Me(0);
-                fn.current = null;
+                dn.current = null;
                 W === null || W === void 0 ? void 0 : W();
             }), [ W ]);
             var Vn = (0, e.useCallback)((function(e, n) {
@@ -1342,7 +1343,7 @@
                 }
                 var t = (r = An()) !== null && r !== void 0 ? r : [];
                 var o = H()(t.concat(bn.current));
-                o = n().Children.toArray(d).filter((function(e) {
+                o = n().Children.toArray(f).filter((function(e) {
                     return On(e) && q()(o, e.props.value) && (!e.props.disabled || q()(t, e.props.value));
                 })).map((function(e) {
                     return e.props.value;
@@ -1355,7 +1356,7 @@
                     name: N,
                     reason: "selectAll"
                 });
-            }), [ d, An, he, I, N, T ]);
+            }), [ f, An, he, I, N, T ]);
             var Ln = (0, e.useCallback)((function(e) {
                 var r;
                 // this doesn't make sense if we can't select multiple values
@@ -1363,9 +1364,9 @@
                     return;
                 }
                 var t = (r = An()) !== null && r !== void 0 ? r : [];
-                var o = $().apply(void 0, [ t ].concat(Je(bn.current)));
+                var o = z().apply(void 0, [ t ].concat(Je(bn.current)));
                 // this will unselect all selected values unless those values are disabled or hidden by the filter
-                                var a = n().Children.toArray(d).filter((function(e) {
+                                var a = n().Children.toArray(f).filter((function(e) {
                     return On(e) && (q()(t, e.props.value) && e.props.disabled || q()(o, e.props.value));
                 })).map((function(e) {
                     return e.props.value;
@@ -1378,7 +1379,7 @@
                     name: N,
                     reason: "clearAll"
                 });
-            }), [ d, An, he, I, N, T ]);
+            }), [ f, An, he, I, N, T ]);
             var Tn = (0, e.useCallback)((function(e) {
                 if (De && !j) {
                     _ === null || _ === void 0 ? void 0 : _(e);
@@ -1387,9 +1388,9 @@
             var Fn = (0, e.useCallback)((function(n) {
                 var r = n.key;
                 if (r === "Tab") {
-                    if (de && dn.current && vn.current <= 1) {
+                    if (fe && fn.current && vn.current <= 1) {
                         n.preventDefault();
-                        Vn(n, dn.current);
+                        Vn(n, fn.current);
                     }
                 }
                 if (n.shiftKey || n.metaKey || n.ctrlKey) {
@@ -1406,9 +1407,9 @@
                 if (r === "ArrowDown") {
                     n.preventDefault();
                     Me(Math.min(Ee + 1, ae === "checkbox" ? vn.current : vn.current - 1));
-                    if (d && _) {
+                    if (f && _) {
                         var t;
-                        var o = e.Children.toArray(d).length - (2 + ((t = An()) !== null && t !== void 0 ? t : []).length);
+                        var o = e.Children.toArray(f).length - (2 + ((t = An()) !== null && t !== void 0 ? t : []).length);
                         if (Ee === o) {
                             Tn(n);
                         }
@@ -1418,8 +1419,8 @@
                     n.preventDefault();
                     Me(Math.max(Ee - 1, 0));
                 }
-                if (r === "Enter" && dn.current && De) {
-                    if (dn.current === "selectAll") {
+                if (r === "Enter" && fn.current && De) {
+                    if (fn.current === "selectAll") {
                         if (xn.current === "all") {
                             Ln(n);
                         } else {
@@ -1427,10 +1428,10 @@
                         }
                     } else {
                         n.preventDefault();
-                        Vn(n, dn.current);
+                        Vn(n, fn.current);
                     }
                 }
-            }), [ Ee, d, An, Ln, Tn, qn, _, De, ae, de, Vn ]);
+            }), [ Ee, f, An, Ln, Tn, qn, _, De, ae, fe, Vn ]);
             var _n = (0, e.useCallback)((function(e, n) {
                 var r = n.value;
                 e.preventDefault();
@@ -1470,8 +1471,8 @@
                         }
                         var u = t[l];
                         var c = u.value, s = u.label;
-                        var f = pn.current[Sn(c, s)];
-                        f === null || f === void 0 ? void 0 : (a = f.focus) === null || a === void 0 ? void 0 : a.call(f);
+                        var d = pn.current[Sn(c, s)];
+                        d === null || d === void 0 ? void 0 : (a = d.focus) === null || a === void 0 ? void 0 : a.call(d);
                     }
                     cn.current = t;
                     an.current = o;
@@ -1492,14 +1493,14 @@
                     keyword: r
                 });
             }), [ K ]);
-            var zn = (0, e.useCallback)((function() {
+            var $n = (0, e.useCallback)((function() {
                 He(true);
             }), []);
-            var $n = (0, e.useCallback)((function() {
+            var zn = (0, e.useCallback)((function() {
                 He(false);
             }), []);
             var Wn = (0, e.useCallback)((function(e) {
-                if (fn.current !== Ee) {
+                if (dn.current !== Ee) {
                     (0, se.scrollIntoViewIfNeeded)(e);
                 }
             }), [ Ee ]);
@@ -1521,7 +1522,7 @@
                 var e;
                 return (e = An()) !== null && e !== void 0 ? e : [];
             }), [ An ]);
-            var Jn = e.Children.toArray(d);
+            var Jn = e.Children.toArray(f);
             var Qn = Gn.some((function(e) {
                 var n = B()(Jn, (function(n) {
                     return On(n) && n.props.value === e;
@@ -1533,7 +1534,7 @@
                 vn.current = 0;
                 yn.current = undefined;
                 wn.current = 0;
-                dn.current = undefined;
+                fn.current = undefined;
                 sn.current = [];
                 var r = function e(n, r) {
                     return function(e) {
@@ -1545,13 +1546,13 @@
                 var l = false;
                 // used to avoid overwriting the selected item ref in multiple mode
                                 var i;
-                var c = e.Children.toArray(d).reduce((function(c, s, f) {
+                var c = e.Children.toArray(f).reduce((function(c, s, d) {
                     // ignore Headings and Dividers
                     if (!On(s)) {
                         c.push(s);
                         return c;
                     }
-                    var d = s.props, p = d.disabled, v = d.hidden, b = d.label, m = d.value;
+                    var f = s.props, p = f.disabled, v = f.hidden, b = f.label, m = f.value;
  // Find out if the search string exactly matches a value
                                         if (m === Ie) {
                         t = true;
@@ -1571,7 +1572,7 @@
                     // Format the Menu.Item
                                         var C =  (0, e.cloneElement)(s, {
                         elementRef: r(S, g),
-                        key: s.key || f,
+                        key: s.key || d,
                         onClick: _n,
                         onKeyDown: h ? function(e) {
                             return Kn(e, w);
@@ -1616,11 +1617,11 @@
                                 a += 1;
                                 l = true;
                             }
-                            var f = String(e);
-                            var d = Sn(e, f);
+                            var d = String(e);
+                            var f = Sn(e, d);
                             c.splice(i ? 0 : s + 1, 0,  n().createElement(C, {
-                                elementRef: r(d),
-                                label: f,
+                                elementRef: r(f),
+                                label: d,
                                 value: e,
                                 key: "missing-value-".concat(e),
                                 onClick: _n,
@@ -1696,7 +1697,7 @@
                         return n;
                     }
                     if (!r.props.disabled) {
-                        dn.current = r.props.value;
+                        fn.current = r.props.value;
                     }
                     var o =  (0, e.cloneElement)(r, {
                         active: t,
@@ -1709,21 +1710,21 @@
                 xn.current = wn.current === 0 && "none" || h && "all" || "some";
                 // add select all option
                                 if (ae === "checkbox" && I && vn.current > 0) {
-                    var S = Ee === 0 && Ke;
+                    var S = Ee === 0 && !!O;
                     var w;
                     if (xn.current === "all") {
                         if (Ie === "") {
-                            w = (0, f._)("Clear all");
+                            w = (0, d._)("Clear all");
                         } else {
-                            w = (0, f._)("Clear all matches");
+                            w = (0, d._)("Clear all matches");
                         }
                     } else if (Ie === "") {
-                        w = (0, f._)("Select all");
+                        w = (0, d._)("Select all");
                     } else {
-                        w = (0, f._)("Select all matches");
+                        w = (0, d._)("Select all matches");
                     }
                     if (S) {
-                        dn.current = "selectAll";
+                        fn.current = "selectAll";
                     }
                     c.unshift( n().createElement(we, {
                         key: "select-all-option",
@@ -1734,7 +1735,7 @@
                         label: w,
                         selected: xn.current === "all" || xn.current !== "none" && "some",
                         totalCount: !!be && Gn.length || undefined,
-                        tabIndex: Ke ? -1 : undefined
+                        tabIndex: O ? -1 : undefined
                     }),  n().createElement(u.Divider, {
                         key: "selectAllDivider"
                     }));
@@ -1746,7 +1747,7 @@
                     return e;
                 }), []);
                 return c;
-            }), [ Ee, ke, o, s, d, Gn, O, Ie, Wn, Ln, _n, Kn, Un, qn, j, I, Yn, _, ae, Ke, be ]);
+            }), [ Ee, ke, o, s, f, Gn, O, Ie, Wn, Ln, _n, Kn, Un, qn, j, I, Yn, _, ae, Ke, be ]);
             var er = function e(r) {
                 var t = r.anchorWidth, o = r.maxHeight, l = r.placement, i = r.toggleId;
                 var u = gn({
@@ -1771,9 +1772,9 @@
                         multiple: I,
                         onClearAll: Ln,
                         onSelectAll: qn,
-                        onTextBlur: $n,
+                        onTextBlur: zn,
                         onTextChange: Hn,
-                        onTextFocus: zn,
+                        onTextFocus: $n,
                         onTextKeyDown: Fn,
                         optionSelection: xn,
                         placement: l,
@@ -1819,16 +1820,16 @@
                     labelText: E,
                     labelledBy: P,
                     multiple: I,
-                    onClick: z,
+                    onClick: $,
                     placeholder: J,
                     prefixLabel: Y,
                     prepend: Z,
                     required: X,
-                    suffixLabel: fe,
+                    suffixLabel: de,
                     toggle: be,
                     toggleContent: ye
-                }, ge), d);
-            }), [ i, c, An, I, m, y, h, Xn, w, E, P, z, J, Y, Z, X, fe, be, ye, ge, d ]);
+                }, ge), f);
+            }), [ i, c, An, I, m, y, h, Xn, w, E, P, $, J, Y, Z, X, de, be, ye, ge, f ]);
             
             return n().createElement(Q(), {
                 closeReasons: hn,
@@ -1909,6 +1910,7 @@
         var Ln = {
             allowNewValues: i().bool,
             animateLoading: i().bool,
+            append: i().bool,
             children: i().node,
             controlledFilter: i().bool,
             defaultPlacement: i().oneOf([ "above", "below", "vertical" ]),
@@ -1935,6 +1937,7 @@
             onScroll: i().func,
             onScrollBottom: i().func,
             placeholder: i().string,
+            prepend: i().bool,
             repositionMode: i().oneOf([ "none", "flip" ]),
             selectAllAppearance: i().oneOf([ "buttongroup", "checkbox", "none" ]),
             showSelectedValuesFirst: i().oneOf([ "nextOpen", "immediately", "never" ]),
@@ -1945,26 +1948,26 @@
         };
         // TS: not typed controlled/uncontrolled, handled by Multiselect wrapper component
                 var Tn = {};
-        var Fn = (0, f._)("No matches");
-        var _n = (0, f._)("Select...");
+        var Fn = (0, d._)("No matches");
+        var _n = (0, d._)("Select...");
         function Kn(r) {
-            var t = r.allowNewValues, o = r.animateLoading, a = r.children, l = r.controlledFilter, i = r.defaultPlacement, u = i === void 0 ? "vertical" : i, c = r.defaultValues, s = r.describedBy, f = r.disabled, d = r.elementRef, p = r.error, v = r.filter, b = r.footerMessage, m = r.inline, y = r.inputId, g = r.inputRef, h = r.isLoadingOptions, O = r.labelledBy, S = r.loadingMessage, w = r.menuStyle, k = w === void 0 ? Tn : w, x = r.name, j = r.noOptionsMessage, P = j === void 0 ? Fn : j, E = r.onChange, M = r.onClose, R = r.onFilterChange, A = r.onOpen, I = r.onScroll, B = r.onScrollBottom, N = r.placeholder, V = N === void 0 ? _n : N, D = r.repositionMode, q = r.selectAllAppearance, L = r.showSelectedValuesFirst, T = L === void 0 ? "nextOpen" : L, F = r.tabConfirmsNewValue, _ = r.values, K = r.virtualization, H = Dn(r, [ "allowNewValues", "animateLoading", "children", "controlledFilter", "defaultPlacement", "defaultValues", "describedBy", "disabled", "elementRef", "error", "filter", "footerMessage", "inline", "inputId", "inputRef", "isLoadingOptions", "labelledBy", "loadingMessage", "menuStyle", "name", "noOptionsMessage", "onChange", "onClose", "onFilterChange", "onOpen", "onScroll", "onScrollBottom", "placeholder", "repositionMode", "selectAllAppearance", "showSelectedValuesFirst", "tabConfirmsNewValue", "values", "virtualization" ]);
+            var t = r.allowNewValues, o = r.animateLoading, a = r.append, l = r.children, i = r.controlledFilter, u = r.defaultPlacement, c = u === void 0 ? "vertical" : u, s = r.defaultValues, d = r.describedBy, f = r.disabled, p = r.elementRef, v = r.error, b = r.filter, m = r.footerMessage, y = r.inline, g = r.inputId, h = r.inputRef, O = r.isLoadingOptions, S = r.labelledBy, w = r.loadingMessage, k = r.menuStyle, x = k === void 0 ? Tn : k, j = r.name, P = r.noOptionsMessage, E = P === void 0 ? Fn : P, M = r.onChange, R = r.onClose, A = r.onFilterChange, I = r.onOpen, B = r.onScroll, N = r.onScrollBottom, V = r.placeholder, D = V === void 0 ? _n : V, q = r.prepend, L = r.repositionMode, T = r.selectAllAppearance, F = r.showSelectedValuesFirst, _ = F === void 0 ? "nextOpen" : F, K = r.tabConfirmsNewValue, H = r.values, $ = r.virtualization, z = Dn(r, [ "allowNewValues", "animateLoading", "append", "children", "controlledFilter", "defaultPlacement", "defaultValues", "describedBy", "disabled", "elementRef", "error", "filter", "footerMessage", "inline", "inputId", "inputRef", "isLoadingOptions", "labelledBy", "loadingMessage", "menuStyle", "name", "noOptionsMessage", "onChange", "onClose", "onFilterChange", "onOpen", "onScroll", "onScrollBottom", "placeholder", "prepend", "repositionMode", "selectAllAppearance", "showSelectedValuesFirst", "tabConfirmsNewValue", "values", "virtualization" ]);
             // @docs-props-type CompactPropsBase
                         Nn({
                 componentName: "Multiselect",
                 deprecatedPropValue: "buttongroup",
                 propName: "selectAllAppearance",
-                propValue: q
+                propValue: T
             });
-            var z = true;
-            if (v != null) {
-                z = v;
+            var W = true;
+            if (b != null) {
+                W = b;
                 if (false) {}
             } else {
-                z = l ? "controlled" : true;
+                W = i ? "controlled" : true;
             }
-            var $ = {
-                children: e.Children.toArray(a).map((function(e) {
+            var U = {
+                children: e.Children.toArray(l).map((function(e) {
                     if (On(e)) {
                         var r;
                         var t = (r = e.key) !== null && r !== void 0 ? r : "".concat(e.props.label, "-").concat(e.props.value);
@@ -1977,46 +1980,48 @@
                     }
                     return e;
                 })),
-                filter: z
+                filter: W
             };
-            if (c != null) {
-                $.defaultValues = c;
+            if (s != null) {
+                U.defaultValues = s;
             }
-            if (_ != null) {
-                $.values = _;
+            if (H != null) {
+                U.values = H;
             }
             
             return n().createElement(Rn, Vn({
                 allowNewValues: t,
                 animateLoading: o,
-                describedBy: s,
+                append: a,
+                describedBy: d,
                 disabled: f,
-                defaultPlacement: u,
-                elementRef: d,
-                error: p,
-                footerMessage: b,
-                inline: m,
-                inputId: y,
-                inputRef: g,
-                isLoadingOptions: h,
-                labelledBy: O,
-                loadingMessage: S,
-                menuStyle: k,
-                name: x,
-                noOptionsMessage: P,
-                onChange: E,
-                onClose: M,
-                onFilterChange: R,
-                onOpen: A,
-                onScroll: I,
-                onScrollBottom: B,
-                placeholder: V,
-                repositionMode: D,
-                selectAllAppearance: q,
-                showSelectedValuesFirst: T,
-                tabConfirmsNewValue: F,
-                virtualization: K
-            }, H, $, {
+                defaultPlacement: c,
+                elementRef: p,
+                error: v,
+                footerMessage: m,
+                inline: y,
+                inputId: g,
+                inputRef: h,
+                isLoadingOptions: O,
+                labelledBy: S,
+                loadingMessage: w,
+                menuStyle: x,
+                name: j,
+                noOptionsMessage: E,
+                onChange: M,
+                onClose: R,
+                onFilterChange: A,
+                onOpen: I,
+                onScroll: B,
+                onScrollBottom: N,
+                placeholder: D,
+                prepend: q,
+                repositionMode: L,
+                selectAllAppearance: T,
+                showSelectedValuesFirst: _,
+                tabConfirmsNewValue: K,
+                virtualization: $
+            }, z, U, {
                 multiple: true
             }));
         }
@@ -2026,8 +2031,8 @@
         Kn.Heading = u.Heading;
         /* harmony default export */        const Hn = Kn;
         // CONCATENATED MODULE: external "lodash/defer"
-        const zn = require("lodash/defer");
-        var $n =  r.n(zn);
+        const $n = require("lodash/defer");
+        var zn =  r.n($n);
         // CONCATENATED MODULE: external "lodash/get"
         const Wn = require("lodash/get");
         var Un =  r.n(Wn);
@@ -2058,10 +2063,16 @@
         const cr = require("@splunk/react-ui/Chip");
         var sr =  r.n(cr);
         // CONCATENATED MODULE: ./src/Multiselect/NormalStyles.ts
-        var fr = ke()(ur()).withConfig({
+        var dr = ke()(ur()).withConfig({
             displayName: "NormalStyles__StyledBox",
             componentId: "sc-1uwwpco-0"
-        })([ "display:flex;align-items:center;flex-wrap:wrap;gap:", ";border-radius:", ";min-width:200px;min-height:", ";max-height:300px;overflow-y:auto;border:", " solid ", ";padding-inline:", ";background-color:", ";", " ", " ", " ", " ", " &[data-inline]{width:400px;}" ], Me.variables.spacingXSmall, Me.variables.borderRadius, Me.variables.inputHeight, Me.variables.inputBorderWidth, Me.variables.interactiveColorBorder, Me.variables.spacingXSmall, Me.variables.interactiveColorBackground, (function(e) {
+        })([ "display:flex;align-items:center;flex-wrap:wrap;gap:", ";border-radius:", ";min-width:200px;min-height:", ";max-height:300px;overflow-y:auto;border:", " solid ", ";padding-inline:", ";background-color:", ";", " ", " ", " ", " ", " ", " ", " &[data-inline]{width:400px;}" ], Me.variables.spacingXSmall, Me.variables.borderRadius, Me.variables.inputHeight, Me.variables.inputBorderWidth, Me.variables.interactiveColorBorder, Me.variables.spacingXSmall, Me.variables.interactiveColorBackground, (function(e) {
+            var n = e.$append;
+            return n && (0, Ce.css)([ "border-start-end-radius:0;border-end-end-radius:0;border-inline-end:none;" ]);
+        }), (function(e) {
+            var n = e.$prepend;
+            return n && (0, Ce.css)([ "border-start-start-radius:0;border-end-start-radius:0;" ]);
+        }), (function(e) {
             var n = e.$hasFocus;
             return n && (0, Ce.css)([ "box-shadow:", ";" ], Me.variables.focusShadow);
         }), (function(e) {
@@ -2077,7 +2088,7 @@
             var n = e.$popoverOpen;
             return n && (0, Ce.css)([ "position:relative;z-index:calc(", " - 2);" ], Me.variables.zindexFixedNavbar);
         }));
-        var dr = ke().span.withConfig({
+        var fr = ke().span.withConfig({
             displayName: "NormalStyles__StyledButtonsWrapper",
             componentId: "sc-1uwwpco-1"
         })([ "display:contents;" ]);
@@ -2237,6 +2248,7 @@
         var Nr = {
             allowNewValues: i().bool,
             animateLoading: i().bool,
+            append: i().bool,
             children: i().node,
             controlledFilter: i().bool,
             defaultPlacement: i().oneOf([ "above", "below", "vertical" ]),
@@ -2262,6 +2274,7 @@
             onScroll: i().func,
             onScrollBottom: i().func,
             placeholder: i().string,
+            prepend: i().bool,
             /** @private. */
             required: i().bool,
             repositionMode: i().oneOf([ "none", "flip" ]),
@@ -2285,12 +2298,12 @@
         }));
         // TS: not typed controlled/uncontrolled, handled by Multiselect wrapper component
                 var qr = {};
-        var Lr = (0, f._)("No matches");
-        var Tr = (0, f._)("Select...");
+        var Lr = (0, d._)("No matches");
+        var Tr = (0, d._)("Select...");
         function Fr(r) {
-            var t = r.allowNewValues, o = r.animateLoading, l = r.children, i = r.controlledFilter, u = r.defaultPlacement, c = u === void 0 ? "vertical" : u, d = r.defaultValues, p = r.describedBy, v = r.disabled, b = r.elementRef, m = r.error, y = r.footerMessage, g = r.inline, h = r.inputId, O = r.inputRef, S = r.isLoadingOptions, w = r.labelledBy, C = r.loadingMessage, k = r.menuStyle, x = k === void 0 ? qr : k, j = r.name, P = r.noOptionsMessage, E = P === void 0 ? Lr : P, R = r.onChange, A = r.onClose, I = r.onFilterChange, B = r.onScroll, N = r.onScrollBottom, V = r.onOpen, D = r.placeholder, q = D === void 0 ? Tr : D, L = r.required, T = r.repositionMode, F = r.tabConfirmsNewValue, _ = r.values, K = Pr(r, [ "allowNewValues", "animateLoading", "children", "controlledFilter", "defaultPlacement", "defaultValues", "describedBy", "disabled", "elementRef", "error", "footerMessage", "inline", "inputId", "inputRef", "isLoadingOptions", "labelledBy", "loadingMessage", "menuStyle", "name", "noOptionsMessage", "onChange", "onClose", "onFilterChange", "onScroll", "onScrollBottom", "onOpen", "placeholder", "required", "repositionMode", "tabConfirmsNewValue", "values" ]);
+            var t = r.allowNewValues, o = r.animateLoading, l = r.append, i = r.children, u = r.controlledFilter, c = r.defaultPlacement, f = c === void 0 ? "vertical" : c, p = r.defaultValues, v = r.describedBy, b = r.disabled, m = r.elementRef, y = r.error, g = r.footerMessage, h = r.inline, O = r.inputId, S = r.inputRef, w = r.isLoadingOptions, C = r.labelledBy, k = r.loadingMessage, x = r.menuStyle, j = x === void 0 ? qr : x, P = r.name, E = r.noOptionsMessage, R = E === void 0 ? Lr : E, A = r.onChange, I = r.onClose, B = r.onFilterChange, N = r.onScroll, V = r.onScrollBottom, D = r.onOpen, q = r.placeholder, L = q === void 0 ? Tr : q, T = r.prepend, F = r.required, _ = r.repositionMode, K = r.tabConfirmsNewValue, H = r.values, $ = Pr(r, [ "allowNewValues", "animateLoading", "append", "children", "controlledFilter", "defaultPlacement", "defaultValues", "describedBy", "disabled", "elementRef", "error", "footerMessage", "inline", "inputId", "inputRef", "isLoadingOptions", "labelledBy", "loadingMessage", "menuStyle", "name", "noOptionsMessage", "onChange", "onClose", "onFilterChange", "onScroll", "onScrollBottom", "onOpen", "placeholder", "prepend", "required", "repositionMode", "tabConfirmsNewValue", "values" ]);
             // @docs-props-type NormalPropsBase
-                        var H = s()({
+                        var W = s()({
                 componentName: "Multiselect",
                 /* eslint-disable-next-line prefer-rest-params */
                 componentProps: arguments[0],
@@ -2299,219 +2312,219 @@
                 valuePropName: "values"
             });
             if (false) {}
-            var z = (0, e.useState)(0), W = Sr(z, 2), U = W[0], X = W[1];
-            var G = (0, e.useState)(null), J = Sr(G, 2), Q = J[0], Y = J[1];
-            var Z = (0, e.useState)(""), ee = Sr(Z, 2), re = ee[0], oe = ee[1];
-            var ae = (0, e.useState)(false), le = Sr(ae, 2), ie = le[0], fe = le[1];
-            var de = (0, e.useState)(false), pe = Sr(de, 2), ve = pe[0], be = pe[1];
-            var me = (0, e.useState)(d || []), ye = Sr(me, 2), ge = ye[0], he = ye[1];
-            var Oe = (0, e.useState)(""), Se = Sr(Oe, 2), we = Se[0], Ce = Se[1];
-            var ke = H && _ ? _ : ge;
-            var xe = ke.slice(0);
-            var je = ke.indexOf(re) >= 0;
-            var Pe = (0, e.useRef)(null);
-            var Ee = (0, e.useRef)(null);
-            var Me = (0, e.useRef)(undefined);
-            var Re = (0, e.useRef)(0);
-            var Ae = (0, e.useState)((function() {
+            var U = (0, e.useState)(0), X = Sr(U, 2), G = X[0], J = X[1];
+            var Q = (0, e.useState)(null), Y = Sr(Q, 2), Z = Y[0], ee = Y[1];
+            var re = (0, e.useState)(""), oe = Sr(re, 2), ae = oe[0], le = oe[1];
+            var ie = (0, e.useState)(false), de = Sr(ie, 2), fe = de[0], pe = de[1];
+            var ve = (0, e.useState)(false), be = Sr(ve, 2), me = be[0], ye = be[1];
+            var ge = (0, e.useState)(p || []), he = Sr(ge, 2), Oe = he[0], Se = he[1];
+            var we = (0, e.useState)(""), Ce = Sr(we, 2), ke = Ce[0], xe = Ce[1];
+            var je = W && H ? H : Oe;
+            var Pe = je.slice(0);
+            var Ee = je.indexOf(ae) >= 0;
+            var Me = (0, e.useRef)(null);
+            var Re = (0, e.useRef)(null);
+            var Ae = (0, e.useRef)(undefined);
+            var Ie = (0, e.useRef)(0);
+            var Be = (0, e.useState)((function() {
                 return {
                     activeItemId: (0, ce.createDOMID)("active-item"),
                     popoverId: (0, ce.createDOMID)("popover")
                 };
-            })), Ie = Sr(Ae, 1), Be = Ie[0], Ne = Be.activeItemId, Ve = Be.popoverId;
+            })), Ne = Sr(Be, 1), Ve = Ne[0], De = Ve.activeItemId, qe = Ve.popoverId;
             (0, e.useEffect)((function() {
-                if (H) {
-                    oe("");
-                    X(0);
+                if (W) {
+                    le("");
+                    J(0);
                 }
-            }), [ _, H ]);
+            }), [ H, W ]);
             // Tracks the prev activeIndex so its known if scrolling is needed in handleActiveOptionMount - can't use usePrevious b/c the value needs wiped on Menu close
                         (0, e.useEffect)((function() {
-                Ee.current = U;
-            }), [ U ]);
-            var De = (0, e.useCallback)((function(e) {
+                Re.current = G;
+            }), [ G ]);
+            var Le = (0, e.useCallback)((function(e) {
                 var n = e.resetFilterKeyword;
-                if (!ve) {
-                    oe((function(e) {
+                if (!me) {
+                    le((function(e) {
                         return n ? "" : e;
                     }));
-                    fe(true);
-                    be(true);
-                    V === null || V === void 0 ? void 0 : V();
-                }
-            }), [ ve, V ]);
-            var qe = (0, e.useCallback)((function() {
-                if (ie) {
-                    De({
+                    pe(true);
+                    ye(true);
+                    D === null || D === void 0 ? void 0 : D();
+                }
+            }), [ me, D ]);
+            var Te = (0, e.useCallback)((function() {
+                if (fe) {
+                    Le({
                         resetFilterKeyword: false
                     });
                 } else {
                     var e;
-                    (e = Pe.current) === null || e === void 0 ? void 0 : e.focus();
+                    (e = Me.current) === null || e === void 0 ? void 0 : e.focus();
                 }
-            }), [ ie, De ]);
-            var Le = (0, e.useCallback)((function(e, n) {
-                if (!ve) {
+            }), [ fe, Le ]);
+            var Fe = (0, e.useCallback)((function(e, n) {
+                if (!me) {
                     return;
                 }
-                var r = (ke || []).concat([ n ]);
-                if (!H) {
-                    he(r);
-                    X(0);
-                    be(true);
-                    oe("");
+                var r = (je || []).concat([ n ]);
+                if (!W) {
+                    Se(r);
+                    J(0);
+                    ye(true);
+                    le("");
                 }
-                R === null || R === void 0 ? void 0 : R(e, {
+                A === null || A === void 0 ? void 0 : A(e, {
                     values: r,
-                    name: j
+                    name: P
                 });
-            }), [ ve, ke, H, R, j ]);
-            var Te = (0, e.useCallback)((function(e, n) {
-                var r = $()(ke, n);
-                if (!H) {
-                    he(r);
+            }), [ me, je, W, A, P ]);
+            var _e = (0, e.useCallback)((function(e, n) {
+                var r = z()(je, n);
+                if (!W) {
+                    Se(r);
                 }
-                R === null || R === void 0 ? void 0 : R(e, {
+                A === null || A === void 0 ? void 0 : A(e, {
                     values: r,
-                    name: j
+                    name: P
                 });
-            }), [ ke, H, j, R ]);
-            var Fe = (0, e.useCallback)((function(e) {
-                if (ve && !S) {
-                    N === null || N === void 0 ? void 0 : N(e);
-                    Ce("".concat(Re.current, " options, loading more options"));
+            }), [ je, W, P, A ]);
+            var Ke = (0, e.useCallback)((function(e) {
+                if (me && !w) {
+                    V === null || V === void 0 ? void 0 : V(e);
+                    xe("".concat(Ie.current, " options, loading more options"));
                 }
-            }), [ ve, S, N ]);
-            var _e = (0, e.useCallback)((function(e, n) {
+            }), [ me, w, V ]);
+            var He = (0, e.useCallback)((function(e, n) {
                 var r = n.value;
-                $n()((function() {
-                    return Te(e, r);
+                zn()((function() {
+                    return _e(e, r);
                 }));
-            }), [ Te ]);
-            var Ke = (0, e.useCallback)((function(e) {
-                if (re !== "") {
-                    I === null || I === void 0 ? void 0 : I(e, {
+            }), [ _e ]);
+            var $e = (0, e.useCallback)((function(e) {
+                if (ae !== "") {
+                    B === null || B === void 0 ? void 0 : B(e, {
                         keyword: ""
                     });
                 }
-                De({
+                Le({
                     resetFilterKeyword: true
                 });
-            }), [ re, I, De ]);
-            var He = (0, e.useCallback)((function(n) {
+            }), [ ae, B, Le ]);
+            var ze = (0, e.useCallback)((function(n) {
                 var r;
                 var t = n.key;
-                if (t === "Tab" && ve) {
-                    if (F && Me.current !== undefined && Re.current <= 1) {
+                if (t === "Tab" && me) {
+                    if (K && Ae.current !== undefined && Ie.current <= 1) {
                         var o;
                         n.preventDefault();
-                        Le(n, Me.current);
-                        (o = Pe.current) === null || o === void 0 ? void 0 : o.focus();
+                        Fe(n, Ae.current);
+                        (o = Me.current) === null || o === void 0 ? void 0 : o.focus();
                     } else {
-                        be(false);
+                        ye(false);
                     }
                 }
                 if (n.shiftKey || n.metaKey || n.ctrlKey) {
                     return;
                 }
-                if (t === "End" && ve) {
+                if (t === "End" && me) {
                     n.preventDefault();
-                    X(Re.current - 1);
+                    J(Ie.current - 1);
                 }
-                if (t === "Home" && ve) {
+                if (t === "Home" && me) {
                     n.preventDefault();
-                    X(0);
+                    J(0);
                 }
                 if (t === "ArrowDown") {
                     n.preventDefault();
-                    if (ve) {
-                        X((function(e) {
-                            return Math.min(e + 1, Re.current - 1);
+                    if (me) {
+                        J((function(e) {
+                            return Math.min(e + 1, Ie.current - 1);
                         }));
                     } else {
-                        X(0);
-                        be(true);
+                        J(0);
+                        ye(true);
                     }
-                    if (l && N) {
-                        var a = e.Children.toArray(l).length - (2 + ((ke === null || ke === void 0 ? void 0 : ke.length) || 0));
-                        if (U === a) {
-                            Fe(n);
+                    if (i && V) {
+                        var a = e.Children.toArray(i).length - (2 + ((je === null || je === void 0 ? void 0 : je.length) || 0));
+                        if (G === a) {
+                            Ke(n);
                         }
                     }
                 }
                 if (t === "ArrowUp") {
                     n.preventDefault();
-                    if (ve) {
-                        X((function(e) {
+                    if (me) {
+                        J((function(e) {
                             return Math.max(e - 1, 0);
                         }));
                     } else {
-                        X(0);
-                        be(true);
+                        J(0);
+                        ye(true);
                     }
                 }
-                if (t === "Enter" && Me.current !== undefined && ve) {
-                    Le(n, Me.current);
+                if (t === "Enter" && Ae.current !== undefined && me) {
+                    Fe(n, Ae.current);
                 }
-                if (t === "Backspace" && ((r = Pe.current) === null || r === void 0 ? void 0 : r.value) === "" && ke.length) {
-                    Te(n, Zn()(ke));
+                if (t === "Backspace" && ((r = Me.current) === null || r === void 0 ? void 0 : r.value) === "" && je.length) {
+                    _e(n, Zn()(je));
                 }
-            }), [ ve, ke, F, Le, l, N, U, Fe, Te ]);
-            var ze = (0, e.useCallback)((function(e) {
-                oe(e.target.value);
-                be(true);
-                X(0);
-                I === null || I === void 0 ? void 0 : I(e, {
+            }), [ me, je, K, Fe, i, V, G, Ke, _e ]);
+            var We = (0, e.useCallback)((function(e) {
+                le(e.target.value);
+                ye(true);
+                J(0);
+                B === null || B === void 0 ? void 0 : B(e, {
                     keyword: e.target.value
                 });
-            }), [ I ]);
-            var $e = (0, e.useCallback)((function(e, n) {
+            }), [ B ]);
+            var Ue = (0, e.useCallback)((function(e, n) {
                 var r;
                 var t = n.value;
                 e.stopPropagation();
-                Le(e, t);
-                (r = Pe.current) === null || r === void 0 ? void 0 : r.focus();
-            }), [ Le ]);
-            var We = (0, e.useCallback)((function(e) {
-                var n = document.getElementById(Ve);
+                Fe(e, t);
+                (r = Me.current) === null || r === void 0 ? void 0 : r.focus();
+            }), [ Fe ]);
+            var Xe = (0, e.useCallback)((function(e) {
+                var n = document.getElementById(qe);
                 var r = e.relatedTarget || document.activeElement;
  // IE11 doesn't support relatedTarget but sets activeElement
                                 var t = n && r && n.contains(r);
  // TS: target as Node is an unsafe assumption
-                                oe(t ? re : "");
-                fe(false);
+                                le(t ? ae : "");
+                pe(false);
                 if (!t) {
-                    I === null || I === void 0 ? void 0 : I(e, {
+                    B === null || B === void 0 ? void 0 : B(e, {
                         keyword: ""
                     });
                 }
-            }), [ re, I, Ve ]);
-            var Ue = (0, e.useCallback)((function(e) {
+            }), [ ae, B, qe ]);
+            var Je = (0, e.useCallback)((function(e) {
                 var n = e.reason, r = e.event;
-                if (n === "escapeKey" || n === "offScreen" || n === "clickAway" && r !== undefined && !(Q === null || Q === void 0 ? void 0 : Q.contains(r.target))) {
-                    be(false);
-                    Ee.current = null;
-                    A === null || A === void 0 ? void 0 : A();
+                if (n === "escapeKey" || n === "offScreen" || n === "clickAway" && r !== undefined && !(Z === null || Z === void 0 ? void 0 : Z.contains(r.target))) {
+                    ye(false);
+                    Re.current = null;
+                    I === null || I === void 0 ? void 0 : I();
                 }
                 if (n === "escapeKey") {
                     var t;
-                    (t = Pe.current) === null || t === void 0 ? void 0 : t.focus();
+                    (t = Me.current) === null || t === void 0 ? void 0 : t.focus();
                 }
-            }), [ Q, A ]);
-            var Xe = (0, e.useCallback)((function(e) {
-                Y(e);
-                Ge(b, e);
-            }), [ b ]);
-            var Je = (0, e.useCallback)((function(e) {
-                Pe.current = e;
-                Ge(O, e);
-            }), [ O ]);
+            }), [ Z, I ]);
             var Qe = (0, e.useCallback)((function(e) {
-                if (Ee.current !== U) {
+                ee(e);
+                Ge(m, e);
+            }), [ m ]);
+            var Ye = (0, e.useCallback)((function(e) {
+                Me.current = e;
+                Ge(S, e);
+            }), [ S ]);
+            var Ze = (0, e.useCallback)((function(e) {
+                if (Re.current !== G) {
                     (0, se.scrollIntoViewIfNeeded)(e);
                 }
-            }), [ U ]);
-            var Ye = (0, e.useCallback)((function(e) {
+            }), [ G ]);
+            var en = (0, e.useCallback)((function(e) {
                 // selectedOptions may contain items or unmatched values at this point
                 return e.map((function(e) {
                     var r = e;
@@ -2522,11 +2535,11 @@
                         
                         return n().createElement(vr, {
                             "aria-selected": true,
-                            disabled: v,
+                            disabled: b,
                             icon: a,
                             key: s.toString(),
                             "data-test": "selected-option",
-                            onRequestRemove: _e,
+                            onRequestRemove: He,
                             role: "option",
                             value: s,
                             appearance: i,
@@ -2537,16 +2550,16 @@
                     
                     return n().createElement(vr, {
                         "aria-selected": true,
-                        disabled: v,
+                        disabled: b,
                         key: (0, ce.createGUID)(),
                         "data-test": "selected-option",
-                        onRequestRemove: _e,
+                        onRequestRemove: He,
                         role: "option",
                         value: r
                     }, r);
                 }));
-            }), [ v, _e ]);
-            var Ze = function e(r) {
+            }), [ b, He ]);
+            var nn = function e(r) {
                 return r.map((function(e) {
                     var r = e;
  // TS: faking props here
@@ -2555,63 +2568,63 @@
                         
                         return n().createElement("span", {
                             key: t.value.toString()
-                        }, t.children || t.label, (0, lr.sprintf)((0, f._)(" selected")));
+                        }, t.children || t.label, (0, lr.sprintf)((0, d._)(" selected")));
                     }
                     
                     return n().createElement("span", {
                         key: (0, ce.createGUID)()
-                    },  n().createElement(n().Fragment, null, r, (0, lr.sprintf)((0, f._)(" selected"))));
+                    },  n().createElement(n().Fragment, null, r, (0, lr.sprintf)((0, d._)(" selected"))));
                 }));
             };
             // Map Options to selected values
-                        if (ke && ke.length) {
-                e.Children.toArray(l).filter(e.isValidElement).filter((function(e) {
+                        if (je && je.length) {
+                e.Children.toArray(i).filter(e.isValidElement).filter((function(e) {
                     return e.type === M;
                 })).forEach((function(e) {
                     if (e.type === M) {
-                        var n = ke.indexOf(e.props.value);
+                        var n = je.indexOf(e.props.value);
                         if (n !== -1) {
-                            xe[n] = e;
+                            Pe[n] = e;
                         }
                     }
                 }));
             }
             // Filter the items
-                        var en = (0, ue.stringToKeywords)(re);
-            var nn = i ? e.Children.toArray(l) : e.Children.toArray(l).filter((function(e) {
+                        var rn = (0, ue.stringToKeywords)(ae);
+            var tn = u ? e.Children.toArray(i) : e.Children.toArray(i).filter((function(e) {
                 if (Un()(e, [ "props", "label" ], false)) {
-                    return (0, ue.testPhrase)(e.props.label, en);
+                    return (0, ue.testPhrase)(e.props.label, rn);
                 }
                 return true;
  // Keep all headers and non-interactive options
                         }));
-            Re.current = 0;
-            Me.current = undefined;
-            var rn = e.Children.map(nn, (function(n, r) {
+            Ie.current = 0;
+            Ae.current = undefined;
+            var on = e.Children.map(tn, (function(n, r) {
                 var t = n.props;
                 if (!t || !a()(t, "value")) {
                     // ignore Headings and Dividers
                     return n;
                 }
                 var o = n;
-                var l = o.props, u = l.children, c = l.label, s = l.matchRanges, f = l.value;
+                var l = o.props, i = l.children, c = l.label, s = l.matchRanges, d = l.value;
  // find out if the search string exactly matches a value
-                                if (f === re) {
-                    je = true;
+                                if (d === ae) {
+                    Ee = true;
                 }
                 // remove items that are already selected
-                                var d = ke.indexOf(f);
-                if (d >= 0) {
+                                var f = je.indexOf(d);
+                if (f >= 0) {
                     return null;
                 }
                 // highlight matched text
-                                var p = u === undefined || Gn()(u);
-                var v = p && !i && !s && en && (0, ue.keywordLocations)(c, en);
+                                var p = i === undefined || Gn()(i);
+                var v = p && !u && !s && rn && (0, ue.keywordLocations)(c, rn);
                 // clone item
                                 var b =  (0, e.cloneElement)(o, {
                     // eslint-disable-next-line react/no-array-index-key
                     key: r,
-                    onClick: $e,
+                    onClick: Ue,
                     matchRanges: p && (s || v) || undefined
                 });
                 return b;
@@ -2619,18 +2632,18 @@
                 return e !== null;
             })) || [];
             // Add the option to add the new value
-                        if (t && !je && re) {
-                rn.unshift( n().createElement(M, {
-                    label: "".concat(re),
-                    description: (0, f._)("(New value)"),
+                        if (t && !Ee && ae) {
+                on.unshift( n().createElement(M, {
+                    label: "".concat(ae),
+                    description: (0, d._)("(New value)"),
                     descriptionPosition: "right",
-                    value: re,
+                    value: ae,
                     key: "newValue",
-                    onClick: $e
+                    onClick: Ue
                 }));
             }
             // highlight the selected Item
-                        var tn = e.Children.map(rn, (function(n) {
+                        var an = e.Children.map(on, (function(n) {
                 var r = n.props;
                 if (!r || !a()(r, "value")) {
                     // ignore Headings and Dividers
@@ -2638,117 +2651,119 @@
                 }
                 var t = n;
                 var o = t.props, l = o.disabled, i = o.value;
-                var u = Re.current === U;
-                Re.current += 1;
+                var u = Ie.current === G;
+                Ie.current += 1;
                 if (!u) {
                     return t;
                 }
                 if (!l) {
-                    Me.current = i;
+                    Ae.current = i;
                 }
                 var c =  (0, e.cloneElement)(t, {
                     active: u,
-                    id: Ne,
+                    id: De,
                     elementRef: function e(n) {
-                        Qe(n);
+                        Ze(n);
                         Ge(t.props.elementRef, n);
                     }
                 });
                 return c;
             }));
-            var on = function e(r) {
+            var ln = function e(r) {
                 var t = r.anchorWidth, a = r.maxHeight, l = r.placement;
                 var i = Dr({
                     anchorWidth: t,
                     maxHeight: a,
-                    menuStyle: x
+                    menuStyle: j
                 });
                 
                 return n().createElement(ne(), {
                     focusMode: "never",
                     placement: l !== null && l !== void 0 ? l : undefined,
-                    isLoading: S,
-                    onScrollBottom: N ? Fe : undefined,
-                    noOptionsMessage: E,
-                    footerMessage: y,
+                    isLoading: w,
+                    onScrollBottom: V ? Ke : undefined,
+                    noOptionsMessage: R,
+                    footerMessage: g,
                     animateLoading: o,
-                    loadingMessage: C,
-                    onScroll: B,
+                    loadingMessage: k,
+                    onScroll: N,
                     style: i
-                }, tn);
+                }, an);
             };
-            var an = Vr("".concat(re.length * .8, "em"));
-            var ln = Rr(Rr({}, tr()(K, (function(e, n) {
+            var un = Vr("".concat(ae.length * .8, "em"));
+            var cn = Rr(Rr({}, tr()($, (function(e, n) {
                 return n === "role" || n.indexOf("aria-") === 0;
             }))), {}, {
-                "aria-describedby": p,
-                "aria-labelledby": w,
-                "aria-invalid": m || undefined
+                "aria-describedby": v,
+                "aria-labelledby": C,
+                "aria-invalid": y || undefined
             });
-            var un = Rr({}, tr()(K, (function(e, n) {
+            var sn = Rr({}, tr()($, (function(e, n) {
                 return n === "aria-label" || n === "aria-describedby";
             })));
             
-            return n().createElement(n().Fragment, null,  n().createElement(fr, mr({
+            return n().createElement(n().Fragment, null,  n().createElement(dr, mr({
                 key: "control",
-                "data-test-values": JSON.stringify(ke),
-                "data-test-disabled": v ? "disabled" : undefined,
-                inline: g,
-                $hasFocus: ie
-            }, nr().apply(void 0, [ K ].concat(yr(Qn()(ln)))), {
-                onClick: v ? undefined : qe,
-                $disabled: v,
-                $error: m,
-                "data-test-popover-id": Ve,
-                $popoverOpen: ve,
+                $append: l,
+                "data-test-values": JSON.stringify(je),
+                "data-test-disabled": b ? "disabled" : undefined,
+                inline: h,
+                $hasFocus: fe
+            }, nr().apply(void 0, [ $ ].concat(yr(Qn()(cn)))), {
+                onClick: b ? undefined : Te,
+                $disabled: b,
+                $error: y,
+                "data-test-popover-id": qe,
+                $popoverOpen: me,
+                $prepend: T,
                 flex: true,
-                elementRef: Xe,
+                elementRef: Qe,
                 role: "group",
-                "aria-disabled": v || undefined,
-                "aria-labelledby": w
-            }, un),  n().createElement(dr, {
+                "aria-disabled": b || undefined,
+                "aria-labelledby": C
+            }, sn),  n().createElement(fr, {
                 role: "listbox",
-                "aria-invalid": m,
+                "aria-invalid": y,
                 "aria-multiselectable": "true"
-            }, Ye(xe)), !v &&  n().createElement(pr, mr({
+            }, en(Pe)), !b &&  n().createElement(pr, mr({
                 role: "combobox",
                 "data-test": "textbox",
-                id: h,
-                ref: Je,
-                onBlur: We,
-                onFocus: Ke,
-                onChange: ze,
-                onKeyDown: He,
-                value: re,
+                id: O,
+                ref: Ye,
+                onBlur: Xe,
+                onFocus: $e,
+                onChange: We,
+                onKeyDown: ze,
+                value: ae,
                 autoCapitalize: "off",
                 autoComplete: "off",
                 autoCorrect: "off",
                 spellCheck: false,
-                style: an,
-                placeholder: ke.length ? "" : q,
-                required: L,
-                "aria-activedescendant": ve && Re.current > 0 ? Ne : undefined,
+                style: un,
+                placeholder: je.length ? "" : L,
+                required: F,
+                "aria-activedescendant": me && Ie.current > 0 ? De : undefined,
                 "aria-autocomplete": "list",
-                "aria-controls": ve ? Ve : undefined,
-                "aria-owns": ve ? Ve : undefined,
-                "aria-expanded": ve,
+                "aria-controls": me ? qe : undefined,
+                "aria-owns": me ? qe : undefined,
+                "aria-expanded": me,
                 "aria-haspopup": true
-            }, ln)),  n().createElement(ar(), {
-                open: ve && !!Q,
+            }, cn)),  n().createElement(ar(), {
+                open: me && !!Z,
                 autoCloseWhenOffScreen: true,
-                anchor: Q,
-                onRequestClose: Ue,
+                anchor: Z,
+                onRequestClose: Je,
                 canCoverAnchor: false,
-                defaultPlacement: c,
-                repositionMode: T,
-                id: Ve
-            }, on)),  n().createElement(te(), {
+                defaultPlacement: f,
+                repositionMode: _,
+                id: qe
+            }, ln)),  n().createElement(te(), {
                 role: "status",
                 "aria-relevant": "text"
-            }, we),  n().createElement(te(), {
+            }, ke),  n().createElement(te(), {
                 role: "alert",
                 "aria-relevant": "additions"
-            }, Ze(xe)));
+            }, nn(Pe)));
         }
         Fr.propTypes = Nr;
         Fr.Option = M;
@@ -2775,7 +2790,7 @@
                 return e;
             }, Hr.apply(null, arguments);
         }
-        function zr(e, n) {
+        function $r(e, n) {
             var r = Object.keys(e);
             if (Object.getOwnPropertySymbols) {
                 var t = Object.getOwnPropertySymbols(e);
@@ -2785,12 +2800,12 @@
             }
             return r;
         }
-        function $r(e) {
+        function zr(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var r = null != arguments[n] ? arguments[n] : {};
-                n % 2 ? zr(Object(r), !0).forEach((function(n) {
+                n % 2 ? $r(Object(r), !0).forEach((function(n) {
                     Wr(e, n, r[n]);
-                })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : zr(Object(r)).forEach((function(n) {
+                })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : $r(Object(r)).forEach((function(n) {
                     Object.defineProperty(e, n, Object.getOwnPropertyDescriptor(r, n));
                 }));
             }
@@ -2845,6 +2860,7 @@
         /** @public */        var Qr = {
             allowNewValues: i().bool,
             animateLoading: i().bool,
+            append: i().bool,
             children: i().node,
             compact: i().bool,
             controlledFilter: i().bool,
@@ -2872,6 +2888,7 @@
             onScroll: i().func,
             onScrollBottom: i().func,
             placeholder: i().string,
+            prepend: i().bool,
             repositionMode: i().oneOf([ "none", "flip" ]),
             selectAllAppearance: i().oneOf([ "buttongroup", "checkbox", "none" ]),
             showSelectedValuesFirst: i().oneOf([ "nextOpen", "immediately", "never" ]),
@@ -2880,12 +2897,12 @@
             /** @private */
             virtualization: i().number
         };
-        var Yr = (0, f._)("No matches");
-        var Zr = (0, f._)("Select...");
+        var Yr = (0, d._)("No matches");
+        var Zr = (0, d._)("Select...");
         function et(r) {
-            var t = r.allowNewValues, o = r.animateLoading, a = r.compact, l = r.children, i = r.controlledFilter, u = r.defaultPlacement, c = u === void 0 ? "vertical" : u, f = r.defaultValues, d = r.describedBy, p = r.disabled, v = r.elementRef, b = r.error, m = r.filter, y = r.footerMessage, g = r.inline, h = r.inputId, O = r.inputRef, S = r.isLoadingOptions, w = r.labelledBy, C = r.loadingMessage, k = r.menuStyle, x = r.name, j = r.noOptionsMessage, P = j === void 0 ? Yr : j, E = r.onChange, M = r.onClose, R = r.onFilterChange, A = r.onOpen, I = r.onScroll, B = r.onScrollBottom, N = r.placeholder, V = N === void 0 ? Zr : N, D = r.repositionMode, q = D === void 0 ? "flip" : D, L = r.selectAllAppearance, T = r.showSelectedValuesFirst, F = r.tabConfirmsNewValue, _ = r.values, K = r.virtualization, H = Gr(r, [ "allowNewValues", "animateLoading", "compact", "children", "controlledFilter", "defaultPlacement", "defaultValues", "describedBy", "disabled", "elementRef", "error", "filter", "footerMessage", "inline", "inputId", "inputRef", "isLoadingOptions", "labelledBy", "loadingMessage", "menuStyle", "name", "noOptionsMessage", "onChange", "onClose", "onFilterChange", "onOpen", "onScroll", "onScrollBottom", "placeholder", "repositionMode", "selectAllAppearance", "showSelectedValuesFirst", "tabConfirmsNewValue", "values", "virtualization" ]);
+            var t = r.allowNewValues, o = r.animateLoading, a = r.append, l = r.compact, i = r.children, u = r.controlledFilter, c = r.defaultPlacement, d = c === void 0 ? "vertical" : c, f = r.defaultValues, p = r.describedBy, v = r.disabled, b = r.elementRef, m = r.error, y = r.filter, g = r.footerMessage, h = r.inline, O = r.inputId, S = r.inputRef, w = r.isLoadingOptions, C = r.labelledBy, k = r.loadingMessage, x = r.menuStyle, j = r.name, P = r.noOptionsMessage, E = P === void 0 ? Yr : P, M = r.onChange, R = r.onClose, A = r.onFilterChange, I = r.onOpen, B = r.onScroll, N = r.onScrollBottom, V = r.placeholder, D = V === void 0 ? Zr : V, q = r.prepend, L = r.repositionMode, T = L === void 0 ? "flip" : L, F = r.selectAllAppearance, _ = r.showSelectedValuesFirst, K = r.tabConfirmsNewValue, H = r.values, $ = r.virtualization, z = Gr(r, [ "allowNewValues", "animateLoading", "append", "compact", "children", "controlledFilter", "defaultPlacement", "defaultValues", "describedBy", "disabled", "elementRef", "error", "filter", "footerMessage", "inline", "inputId", "inputRef", "isLoadingOptions", "labelledBy", "loadingMessage", "menuStyle", "name", "noOptionsMessage", "onChange", "onClose", "onFilterChange", "onOpen", "onScroll", "onScrollBottom", "placeholder", "prepend", "repositionMode", "selectAllAppearance", "showSelectedValuesFirst", "tabConfirmsNewValue", "values", "virtualization" ]);
             // @docs-props-type MultiselectPropsBase
-                        var z = s()({
+                        var W = s()({
                 componentName: "Multiselect",
                 /* eslint-disable-next-line prefer-rest-params */
                 componentProps: arguments[0],
@@ -2893,76 +2910,78 @@
                 defaultValuePropName: "defaultValues",
                 valuePropName: "values"
             });
-            /* eslint-disable-next-line prefer-rest-params */            var $ = arguments[0];
+            /* eslint-disable-next-line prefer-rest-params */            var U = arguments[0];
             (0, e.useEffect)((function() {
-                if (a !== true) {
+                if (l !== true) {
                     if (false) {}
                     if (false) {}
                 }
-            }), [ a, $ ]);
+            }), [ l, U ]);
             // Compact uses Button, which defaults `inline` to true, explicitly pass a boolean to prevent the underlying Button from applying its default.
-                        var W = !!g;
-            var U = $r({
+                        var X = !!h;
+            var G = zr({
                 allowNewValues: t,
                 animateLoading: o,
-                children: l,
-                controlledFilter: i,
-                defaultPlacement: c,
-                describedBy: d,
-                disabled: p,
-                elementRef: v,
-                error: b,
-                footerMessage: y,
-                inline: W,
-                inputId: h,
-                inputRef: O,
-                isLoadingOptions: S,
-                labelledBy: w,
-                loadingMessage: C,
-                menuStyle: k,
-                name: x,
-                noOptionsMessage: P,
-                onClose: M,
-                onChange: E,
-                onFilterChange: R,
-                onOpen: A,
-                onScroll: I,
-                onScrollBottom: B,
-                placeholder: V,
-                repositionMode: q,
-                showSelectedValuesFirst: T,
-                tabConfirmsNewValue: F,
-                virtualization: K
-            }, H);
-            var X = (0, e.useMemo)((function() {
+                append: a,
+                children: i,
+                controlledFilter: u,
+                defaultPlacement: d,
+                describedBy: p,
+                disabled: v,
+                elementRef: b,
+                error: m,
+                footerMessage: g,
+                inline: X,
+                inputId: O,
+                inputRef: S,
+                isLoadingOptions: w,
+                labelledBy: C,
+                loadingMessage: k,
+                menuStyle: x,
+                name: j,
+                noOptionsMessage: E,
+                onClose: R,
+                onChange: M,
+                onFilterChange: A,
+                onOpen: I,
+                onScroll: B,
+                onScrollBottom: N,
+                placeholder: D,
+                prepend: q,
+                repositionMode: T,
+                showSelectedValuesFirst: _,
+                tabConfirmsNewValue: K,
+                virtualization: $
+            }, z);
+            var J = (0, e.useMemo)((function() {
                 return {
                     defaultValues: f
                 };
             }), [ f ]);
-            var G = (0, e.useMemo)((function() {
+            var Q = (0, e.useMemo)((function() {
                 return {
-                    values: _
+                    values: H
                 };
-            }), [ _ ]);
-            var J = (0, e.useMemo)((function() {
-                return z ? G : X;
-            }), [ X, z, G ]);
-            var Q = {
-                filter: m,
-                selectAllAppearance: L,
-                showSelectedValuesFirst: T,
-                virtualization: K
+            }), [ H ]);
+            var Y = (0, e.useMemo)((function() {
+                return W ? Q : J;
+            }), [ J, W, Q ]);
+            var Z = {
+                filter: y,
+                selectAllAppearance: F,
+                showSelectedValuesFirst: _,
+                virtualization: $
             };
-            if (a) {
+            if (l) {
                 
                 return n().createElement(Hn, Hr({
                     "data-test": "multiselect"
-                }, J, Q, U));
+                }, Y, Z, G));
             }
             
             return n().createElement(_r, Hr({
                 "data-test": "multiselect"
-            }, J, U));
+            }, Y, G));
         }
         // TODO: SUI-3402, this can be removed when ControlGroup no longer needs to inspect componentType
                 et.componentType = "Multiselect";