@splunk/react-ui 5.0.0-rc.2 → 5.1.0

package/Multiselect.js

@@ -2,18 +2,33 @@
     // webpackBootstrap
     /******/ "use strict";
     /******/    var e = {
-        /***/ 2907: 
+        /***/ 3639: 
         /***/ (e, n, r) => {
             // EXPORTS
             r.d(n, {
-                default: () => /* reexport */ i
+                default: () => /* reexport */ s
             });
+            // UNUSED EXPORTS: isAllowedType, isPrimitive
             // EXTERNAL MODULE: external "react"
                         var t = r(9497);
+            // CONCATENATED MODULE: external "lodash/isEqual"
+            const o = require("lodash/isEqual");
             // EXTERNAL MODULE: external "lodash/has"
-                        var o = r(5919);
-            var l =  r.n(o);
+                        var l = r(5919);
+            var a =  r.n(l);
             // CONCATENATED MODULE: ./src/useControlled/useControlled.tsx
+            function i(e) {
+                return e === null || e === undefined || typeof e === "boolean" || typeof e === "string" || typeof e === "number";
+            }
+            function u(e) {
+                if (i(e)) {
+                    return true;
+                }
+                if (Array.isArray(e)) {
+                    return e.every(i);
+                }
+                return false;
+            }
             /**
  * This is a private component not intended for use outside @splunk/react-ui
  *
@@ -23,10 +38,9 @@
  * are not happening.
  *
  * Return the controlled state of the component.
- */
-            function a(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));
+ */            function c(e) {
+                var n = e.componentProps, r = e.componentName, o = r === void 0 ? "this component" : r, l = e.defaultValuePropName, i = l === void 0 ? "defaultValue" : l, u = e.valuePropName, c = u === void 0 ? "value" : u;
+                var s = (0, t.useRef)(a()(n, c));
                 var d = (0, t.useRef)(n[i]);
                 (0, t.useEffect)((function() {
                     if (false) {}
@@ -34,10 +48,11 @@
                 (0, t.useEffect)((function() {
                     if (false) {}
                     if (false) {}
+                    if (false) {}
                 }), [ o, n, i, c ]);
                 return s.current;
             }
-            /* harmony default export */            const i = a;
+            /* harmony default export */            const s = c;
         } // CONCATENATED MODULE: ./src/useControlled/index.ts
         /***/ ,
         /***/ 5919: 
@@ -136,17 +151,17 @@
                 r.d(t, {
             Divider: () => /* reexport */ u.Divider,
             Heading: () => /* reexport */ u.Heading,
-            Option: () => /* reexport */ E,
-            default: () => /* reexport */ Hr
+            Option: () => /* reexport */ M,
+            default: () => /* reexport */ Kr
         });
         // EXTERNAL MODULE: external "react"
                 var e = r(9497);
         var n =  r.n(e);
-        // CONCATENATED MODULE: external "prop-types"
-        const o = require("prop-types");
-        var l =  r.n(o);
         // EXTERNAL MODULE: external "lodash/has"
-                var a = r(5919);
+                var o = r(5919);
+        var l =  r.n(o);
+        // CONCATENATED MODULE: external "prop-types"
+        const a = require("prop-types");
         var i =  r.n(a);
         // CONCATENATED MODULE: external "@splunk/react-ui/Menu"
         const u = require("@splunk/react-ui/Menu");
@@ -197,18 +212,18 @@
             return e;
         }
         function m(e, n, r) {
-            return (n = g(n)) in e ? Object.defineProperty(e, n, {
+            return (n = y(n)) in e ? Object.defineProperty(e, n, {
                 value: r,
                 enumerable: !0,
                 configurable: !0,
                 writable: !0
             }) : e[n] = r, e;
         }
-        function g(e) {
-            var n = y(e, "string");
+        function y(e) {
+            var n = g(e, "string");
             return "symbol" == f(n) ? n : n + "";
         }
-        function y(e, n) {
+        function g(e, n) {
             if ("object" != f(e) || !e) return e;
             var r = e[Symbol.toPrimitive];
             if (void 0 !== r) {
@@ -242,52 +257,52 @@
         }
         var S = {
             /** @private */
-            active: l().bool,
-            children: l().node,
-            description: l().string,
-            descriptionPosition: l().oneOf([ "right", "bottom" ]),
-            disabled: l().bool,
-            elementRef: l().oneOfType([ l().func, l().object ]),
-            hidden: l().bool,
-            icon: l().node,
-            label: l().string.isRequired,
+            active: i().bool,
+            children: i().node,
+            description: i().string,
+            descriptionPosition: i().oneOf([ "right", "bottom" ]),
+            disabled: i().bool,
+            elementRef: i().oneOfType([ i().func, i().object ]),
+            hidden: i().bool,
+            icon: i().node,
+            label: i().string.isRequired,
             /**
    * @private Passed down from <BaseSelect>
    */
-            multiple: l().bool,
-            matchRanges: l().arrayOf(l().shape({
-                start: l().number.isRequired,
-                end: l().number.isRequired
+            multiple: i().bool,
+            matchRanges: i().arrayOf(i().shape({
+                start: i().number.isRequired,
+                end: i().number.isRequired
             })),
             /** @private */
-            onClick: l().func,
+            onClick: i().func,
             /** @private */
-            role: l().oneOf([ "menuitemcheckbox", "option" ]),
+            role: i().oneOf([ "menuitemcheckbox", "option" ]),
             /** @private */
-            selected: l().oneOfType([ l().bool, l().oneOf([ "some" ]) ]),
-            truncate: l().bool,
-            value: l().oneOfType([ l().string, l().number, l().bool ]).isRequired
+            selected: i().oneOfType([ i().bool, i().oneOf([ "some" ]) ]),
+            truncate: i().bool,
+            value: i().oneOfType([ i().string, i().number, i().bool ]).isRequired
         };
         /**
  * An option within a `Multiselect`.
  */        function w(r) {
-            var t = r.children, o = r.descriptionPosition, l = o === void 0 ? "bottom" : o, a = 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, g = r.value, y = h(r, [ "children", "descriptionPosition", "disabled", "elementRef", "icon", "label", "multiple", "onClick", "role", "value" ]);
+            var t = r.children, o = r.descriptionPosition, l = o === void 0 ? "bottom" : o, a = 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 (!a) {
                     f === null || f === void 0 ? void 0 : f(e, {
-                        value: g
+                        value: y
                     });
                 }
-            }), [ a, f, g ]);
-            var S = g.toString();
+            }), [ a, f, y ]);
+            var S = y.toString();
             var w = b({
                 descriptionPosition: l,
                 disabled: a ? "disabled" : undefined
-            }, y);
+            }, g);
             
             return n().createElement(u.Item, p({
-                "data-test-value": g,
+                "data-test-value": y,
                 "data-test": "option",
                 elementRef: i
             }, w, {
@@ -339,39 +354,39 @@
         }
         var P = {
             /** @private */
-            active: l().bool,
-            children: l().node,
+            active: i().bool,
+            children: i().node,
             /**
    * @private this is passed down from Multiselect.
    */
-            compact: l().bool,
-            description: l().string,
-            descriptionPosition: l().oneOf([ "right", "bottom" ]),
-            disabled: l().bool,
-            elementRef: l().oneOfType([ l().func, l().object ]),
-            hidden: l().bool,
-            icon: l().node,
-            label: l().string.isRequired,
-            matchRanges: l().arrayOf(l().shape({
-                start: l().number.isRequired,
-                end: l().number.isRequired
+            compact: i().bool,
+            description: i().string,
+            descriptionPosition: i().oneOf([ "right", "bottom" ]),
+            disabled: i().bool,
+            elementRef: i().oneOfType([ i().func, i().object ]),
+            hidden: i().bool,
+            icon: i().node,
+            label: i().string.isRequired,
+            matchRanges: i().arrayOf(i().shape({
+                start: i().number.isRequired,
+                end: i().number.isRequired
             })),
             /** @private */
-            onClick: l().func,
+            onClick: i().func,
             /** @private */
-            role: l().oneOf([ "menuitemcheckbox", "option" ]),
+            role: i().oneOf([ "menuitemcheckbox", "option" ]),
             /** @private */
-            selected: l().bool,
-            selectedAppearance: l().oneOf([ "info", "success", "warning", "error" ]),
-            selectedBackgroundColor: l().string,
-            selectedForegroundColor: l().string,
-            truncate: l().bool,
-            value: l().oneOfType([ l().string, l().number, l().bool ]).isRequired
+            selected: i().bool,
+            selectedAppearance: i().oneOf([ "info", "success", "warning", "error" ]),
+            selectedBackgroundColor: i().string,
+            selectedForegroundColor: i().string,
+            truncate: i().bool,
+            value: i().oneOfType([ i().string, i().number, i().bool ]).isRequired
         };
         /**
  * An option within a `Multiselect`.
- */        function M(e) {
-            var r = e.compact, t = e.children, o = e.description, l = e.descriptionPosition, a = l === void 0 ? "bottom" : l, 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, g = x(e, [ "compact", "children", "description", "descriptionPosition", "disabled", "elementRef", "hidden", "icon", "label", "matchRanges", "role", "selected", "truncate", "value" ]);
+ */        function E(e) {
+            var r = e.compact, t = e.children, o = e.description, l = e.descriptionPosition, a = l === void 0 ? "bottom" : l, 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.
@@ -389,12 +404,12 @@
                 selected: v,
                 truncate: b,
                 value: m
-            }, g, {
+            }, y, {
                 multiple: r
             }), t || d);
         }
-        M.propTypes = P;
-        /* harmony default export */        const E = M;
+        E.propTypes = P;
+        /* harmony default export */        const M = E;
         // CONCATENATED MODULE: external "lodash/castArray"
         const R = require("lodash/castArray");
         var A =  r.n(R);
@@ -402,20 +417,20 @@
         const I = require("lodash/find");
         var B =  r.n(I);
         // CONCATENATED MODULE: external "lodash/forEachRight"
-        const T = require("lodash/forEachRight");
-        var L =  r.n(T);
+        const N = require("lodash/forEachRight");
+        var L =  r.n(N);
         // CONCATENATED MODULE: external "lodash/includes"
-        const N = require("lodash/includes");
-        var V =  r.n(N);
+        const V = require("lodash/includes");
+        var q =  r.n(V);
         // CONCATENATED MODULE: external "lodash/memoize"
         const D = require("lodash/memoize");
-        var q =  r.n(D);
+        var T =  r.n(D);
         // CONCATENATED MODULE: external "lodash/pick"
         const F = require("lodash/pick");
         var _ =  r.n(F);
         // CONCATENATED MODULE: external "lodash/uniq"
-        const H = require("lodash/uniq");
-        var K =  r.n(H);
+        const K = require("lodash/uniq");
+        var H =  r.n(K);
         // CONCATENATED MODULE: external "lodash/without"
         const z = require("lodash/without");
         var $ =  r.n(z);
@@ -434,11 +449,11 @@
         // CONCATENATED MODULE: external "@splunk/react-ui/ResultsMenu"
         const ee = require("@splunk/react-ui/ResultsMenu");
         var ne =  r.n(ee);
-        // CONCATENATED MODULE: external "@splunk/react-ui/Text"
-        const re = require("@splunk/react-ui/Text");
-        var te =  r.n(re);
         // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-        const oe = require("@splunk/react-ui/ScreenReaderContent");
+        const re = require("@splunk/react-ui/ScreenReaderContent");
+        var te =  r.n(re);
+        // CONCATENATED MODULE: external "@splunk/react-ui/Text"
+        const oe = require("@splunk/react-ui/Text");
         var le =  r.n(oe);
         // CONCATENATED MODULE: external "@splunk/react-ui/usePrevious"
         const ae = require("@splunk/react-ui/usePrevious");
@@ -447,18 +462,20 @@
         const ue = require("@splunk/ui-utils/filter");
         // CONCATENATED MODULE: external "@splunk/ui-utils/id"
         const ce = require("@splunk/ui-utils/id");
+        // CONCATENATED MODULE: external "@splunk/ui-utils/scroll"
+        const se = require("@splunk/ui-utils/scroll");
         // CONCATENATED MODULE: ./src/Select/SelectAllOption.tsx
-        var se = {
-            active: l().bool,
-            changedToggle: l().bool,
-            elementRef: l().oneOfType([ l().func, l().object ]),
-            id: l().string,
-            onClick: l().func,
-            selectAllLabel: l().string,
-            selected: l().oneOfType([ l().bool, l().oneOf([ "some" ]) ]),
-            totalCount: l().number
+        var de = {
+            active: i().bool,
+            changedToggle: i().bool,
+            elementRef: i().oneOfType([ i().func, i().object ]),
+            id: i().string,
+            onClick: i().func,
+            selectAllLabel: i().string,
+            selected: i().oneOfType([ i().bool, i().oneOf([ "some" ]) ]),
+            totalCount: i().number
         };
-        function de(e) {
+        function fe(e) {
             var r = e.active, t = e.elementRef, o = e.id, l = e.onClick, a = e.selectAllLabel, i = e.totalCount, u = e.changedToggle, c = e.selected;
             // When toggle is changed the total count is not displayed anymore so the count is now shown in the Select all menu item
                         var s = u ? " (".concat(i === null || i === void 0 ? void 0 : i.toString(), ")") : "";
@@ -481,21 +498,21 @@
                 value: "selectAll"
             });
         }
-        de.propTypes = se;
-        /* harmony default export */        const fe = de;
+        fe.propTypes = de;
+        /* harmony default export */        const pe = fe;
         // CONCATENATED MODULE: external "styled-components"
-        const pe = require("styled-components");
-        var ve =  r.n(pe);
+        const ve = require("styled-components");
+        var be =  r.n(ve);
         // CONCATENATED MODULE: external "@splunk/react-ui/Button"
-        const be = require("@splunk/react-ui/Button");
-        var me =  r.n(be);
+        const me = require("@splunk/react-ui/Button");
+        var ye =  r.n(me);
         // CONCATENATED MODULE: external "@splunk/react-ui/Divider"
         const ge = require("@splunk/react-ui/Divider");
-        var ye =  r.n(ge);
+        var he =  r.n(ge);
         // CONCATENATED MODULE: external "@splunk/themes"
-        const he = require("@splunk/themes");
+        const Oe = require("@splunk/themes");
         // CONCATENATED MODULE: ./src/Select/SelectBaseStyles.ts
-        var Oe = ve()(me()).withConfig({
+        var Se = be()(ye()).withConfig({
             displayName: "SelectBaseStyles__StyledButton",
             componentId: "sc-16cj7sk-0"
         })([ "&[data-inline]{width:", ";}", "" ], (function(e) {
@@ -505,52 +522,52 @@
             var n = e.$multiple;
             return !n && "flex-grow: 0;";
         }));
-        var Se = ve().span.withConfig({
+        var we = be().span.withConfig({
             displayName: "SelectBaseStyles__StyledLinkIcon",
             componentId: "sc-16cj7sk-1"
-        })([ "padding-right:", ";" ], he.variables.spacingXSmall);
-        var we = ve().span.withConfig({
+        })([ "padding-right:", ";" ], Oe.variables.spacingXSmall);
+        var Ce = be().span.withConfig({
             displayName: "SelectBaseStyles__StyledLinkCaret",
             componentId: "sc-16cj7sk-2"
-        })([ "padding-left:", ";" ], he.variables.spacingXSmall);
-        var Ce = ve().div.withConfig({
+        })([ "padding-left:", ";" ], Oe.variables.spacingXSmall);
+        var ke = be().div.withConfig({
             displayName: "SelectBaseStyles__StyledFilter",
             componentId: "sc-16cj7sk-3"
-        })([ "padding:", " ", " ", ";min-width:160px;" ], he.variables.spacingLarge, he.variables.spacingLarge, he.variables.spacingSmall);
-        var ke = ve().span.withConfig({
+        })([ "padding:", " ", " ", ";min-width:160px;" ], Oe.variables.spacingLarge, Oe.variables.spacingLarge, Oe.variables.spacingSmall);
+        var xe = be().span.withConfig({
             displayName: "SelectBaseStyles__StyledCount",
             componentId: "sc-16cj7sk-4"
-        })([ "padding-right:", ";" ], he.variables.spacingXSmall);
-        var xe = ve()(Z()).withConfig({
+        })([ "padding-right:", ";" ], Oe.variables.spacingXSmall);
+        var je = be()(Z()).withConfig({
             displayName: "SelectBaseStyles__StyledControlsLink",
             componentId: "sc-16cj7sk-5"
         })([ "", ";" ], (function(e) {
             var n = e.$disabled;
-            return n && (0, pe.css)([ "color:", ";" ], he.variables.contentColorDisabled);
+            return n && (0, ve.css)([ "color:", ";" ], Oe.variables.contentColorDisabled);
         }));
-        var je = ve().div.withConfig({
+        var Pe = be().div.withConfig({
             displayName: "SelectBaseStyles__StyledToggleAllControls",
             componentId: "sc-16cj7sk-6"
-        })([ "", ";gap:", ";padding:", " ", " ", ";" ], he.mixins.reset("flex"), he.variables.spacingMedium, he.variables.spacingXSmall, he.variables.spacingLarge, he.variables.spacingSmall);
-        var Pe = ve()(ye()).withConfig({
+        })([ "", ";gap:", ";padding:", " ", " ", ";" ], Oe.mixins.reset("flex"), Oe.variables.spacingMedium, Oe.variables.spacingXSmall, Oe.variables.spacingLarge, Oe.variables.spacingSmall);
+        var Ee = be()(he()).withConfig({
             displayName: "SelectBaseStyles__StyledControlsDivider",
             componentId: "sc-16cj7sk-7"
-        })([ "border-color:", ";" ], he.variables.borderColor);
-        // EXTERNAL MODULE: ./src/useControlled/index.ts + 1 modules
-                var Me = r(2907);
+        })([ "border-color:", ";" ], Oe.variables.borderColor);
+        // EXTERNAL MODULE: ./src/useControlled/index.ts + 2 modules
+                var Me = r(3639);
         // CONCATENATED MODULE: ./src/utils/fuzzyMatch.ts
         // A utility for matching keyboard characters to list values
-        var Ee = function e(n, r) {
+        var Re = function e(n, r) {
             return n ? n.label.charAt(r).toLowerCase() : "";
         };
-        var Re = function e(n, r) {
+        var Ae = function e(n, r) {
             if (!n.length) {
                 return n;
             }
             var t = null;
             var o = false;
             var l = n.filter((function(e) {
-                var n = Ee(e, r.index);
+                var n = Re(e, r.index);
                 if (n === r.value) {
                     o = true;
                     return true;
@@ -558,7 +575,7 @@
                 // If we haven't found a match yet, keep track of the next closest match.
                 // Secondary matching looks for the closest character of a higher value, and failing that, closest of a lower value.
                                 if (!o) {
-                    var l = Ee(t, r.index);
+                    var l = Re(t, r.index);
                     if (!l) {
                         t = e;
                     } else if (n > r.value) {
@@ -575,24 +592,6 @@
             }));
             return l.length === 0 && t ? [ t ] : l;
         };
-        // CONCATENATED MODULE: ./src/utils/scrollIntoViewIfNeeded.ts
-        // A utility that attempts to move an element into view by scrolling it's derived parent.
-        var Ae = function e(n) {
-            if (!n) {
-                return;
-            }
-            var r = n.offsetParent;
-            if (!r) {
-                return;
-            }
-            // Below the bottom of the container.
-                        if (r.scrollTop + r.clientHeight < n.offsetTop + n.clientHeight) {
-                r.scrollTop = n.offsetTop + n.clientHeight - r.clientHeight;
-                // Above the top of the container.
-                        } else if (r.scrollTop > n.offsetTop) {
-                r.scrollTop = n.offsetTop;
-            }
-        };
         // CONCATENATED MODULE: ./src/utils/ssrDocument.ts
         /* eslint-disable @typescript-eslint/no-empty-function */
         var Ie = {
@@ -653,11 +652,11 @@
             var e = typeof document !== "undefined" ? document : Ie;
             return e;
         }
-        var Te = Be();
-        /* harmony default export */        const Le = /* unused pure expression or super */ null && Te;
+        var Ne = Be();
+        /* harmony default export */        const Le = /* unused pure expression or super */ null && Ne;
         // CONCATENATED MODULE: ./src/utils/ssrWindow.ts
         /* eslint-disable @typescript-eslint/no-empty-function */
-        var Ne = {
+        var Ve = {
             document: Ie,
             navigator: {
                 userAgent: ""
@@ -712,12 +711,12 @@
                 clearTimeout(n);
             }
         };
-        function Ve() {
-            var e = typeof window !== "undefined" ? window : Ne;
+        function qe() {
+            var e = typeof window !== "undefined" ? window : Ve;
             return e;
         }
-        var De = Ve();
-        /* harmony default export */        const qe = /* unused pure expression or super */ null && De;
+        var De = qe();
+        /* harmony default export */        const Te = /* unused pure expression or super */ null && De;
         // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
         /**
  * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
@@ -739,12 +738,12 @@
         }
         // CONCATENATED MODULE: ./src/Select/SelectBase.tsx
         function _e(e) {
-            return ze(e) || Ke(e) || Xe(e) || He();
+            return ze(e) || He(e) || Xe(e) || Ke();
         }
-        function He() {
+        function Ke() {
             throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
         }
-        function Ke(e) {
+        function He(e) {
             if ("undefined" != typeof Symbol && null != e[Symbol.iterator] || null != e["@@iterator"]) return Array.from(e);
         }
         function ze(e) {
@@ -880,59 +879,59 @@
             return ("string" === n ? String : Number)(e);
         }
         var an = {
-            allowKeyMatching: l().bool,
-            allowNewValues: l().bool,
-            animateLoading: l().bool,
-            appearance: l().oneOf([ "default", "link", "subtle" ]),
-            append: l().bool,
-            children: l().node,
-            defaultPlacement: l().oneOf([ "above", "below", "vertical" ]),
-            defaultValues: l().array,
-            describedBy: l().string,
-            disabled: l().bool,
-            elementRef: l().oneOfType([ l().func, l().object ]),
-            error: l().bool,
-            filter: l().oneOf([ false, true, "controlled" ]),
-            footerMessage: l().node,
-            inline: l().bool,
-            inputId: l().string,
-            inputRef: l().oneOfType([ l().func, l().object ]),
-            isLoadingOptions: l().bool,
-            labelledBy: l().string,
-            labelText: l().string,
-            loadingMessage: l().node,
-            menuStyle: l().object,
-            multiple: l().bool,
-            name: l().string,
-            noOptionsMessage: l().node,
-            onChange: l().func,
-            onClick: l().func,
-            onClose: l().func,
-            onFilterChange: l().func,
-            onOpen: l().func,
-            onScroll: l().func,
-            onScrollBottom: l().func,
+            allowKeyMatching: i().bool,
+            allowNewValues: i().bool,
+            animateLoading: i().bool,
+            appearance: i().oneOf([ "default", "link", "subtle" ]),
+            append: i().bool,
+            children: i().node,
+            defaultPlacement: i().oneOf([ "above", "below", "vertical" ]),
+            defaultValues: i().array,
+            describedBy: i().string,
+            disabled: i().bool,
+            elementRef: i().oneOfType([ i().func, i().object ]),
+            error: i().bool,
+            filter: i().oneOf([ false, true, "controlled" ]),
+            footerMessage: i().node,
+            inline: i().bool,
+            inputId: i().string,
+            inputRef: i().oneOfType([ i().func, i().object ]),
+            isLoadingOptions: i().bool,
+            labelledBy: i().string,
+            labelText: i().string,
+            loadingMessage: i().node,
+            menuStyle: i().object,
+            multiple: i().bool,
+            name: i().string,
+            noOptionsMessage: i().node,
+            onChange: i().func,
+            onClick: i().func,
+            onClose: i().func,
+            onFilterChange: i().func,
+            onOpen: i().func,
+            onScroll: i().func,
+            onScrollBottom: i().func,
             /** @private. */
-            required: l().bool,
-            placeholder: l().string,
-            prefixLabel: l().string,
-            prepend: l().bool,
-            repositionMode: l().oneOf([ "none", "flip" ]),
-            selectAllAppearance: l().oneOf([ "buttongroup", "checkbox" ]),
-            showSelectedValuesFirst: l().oneOf([ "nextOpen", "immediately", "never" ]),
-            suffixLabel: l().string,
-            tabConfirmsNewValue: l().bool,
-            toggle: l().node,
-            toggleContent: l().oneOf([ "optionChildren", "optionLabel" ]),
-            values: l().array,
+            required: i().bool,
+            placeholder: i().string,
+            prefixLabel: i().string,
+            prepend: i().bool,
+            repositionMode: i().oneOf([ "none", "flip" ]),
+            selectAllAppearance: i().oneOf([ "buttongroup", "checkbox" ]),
+            showSelectedValuesFirst: i().oneOf([ "nextOpen", "immediately", "never" ]),
+            suffixLabel: i().string,
+            tabConfirmsNewValue: i().bool,
+            toggle: i().node,
+            toggleContent: i().oneOf([ "optionChildren", "optionLabel" ]),
+            values: i().array,
             /** @private. */
-            virtualization: l().number
+            virtualization: i().number
         };
-        var un = q()((function(e) {
+        var un = T()((function(e) {
             return [ e ];
         }));
         // preserve separate widths for single vs. multi mode
-                var cn = q()((function(e) {
+                var cn = T()((function(e) {
             var n = e.anchorWidth, r = e.isMultiple, t = e.maxHeight, o = e.menuStyle;
             return r ? rn({
                 width: Math.max(n !== null && n !== void 0 ? n : 0, 200),
@@ -945,7 +944,7 @@
         }));
         var sn = [ "clickAway", "escapeKey", "offScreen", "tabKey", "toggleClick" ];
         function dn(e) {
-            return e && i()(e.props, "value");
+            return e && l()(e.props, "value");
         }
         function fn(e, n) {
             return "".concat(en(e), "-").concat(e, "-").concat(n);
@@ -954,22 +953,22 @@
         var vn = (0, d._)("No matches");
         var bn = (0, d._)("Select...");
         var mn =  n().createElement(G(), null);
-        var gn = function e(r) {
-            var t = r.activeItemId, o = r.filterA11yId, l = r.filterKeyword, a = 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, g = r.onTextKeyDown, y = r.optionSelection, h = r.placement, O = r.selectAllAppearance, S = r.textHasFocus;
-            var w = (0, d._)("Select all options".concat(y.current === "all" ? " disabled" : ""));
-            var C = (0, d._)("Clear all options".concat(y.current === "none" ? " disabled" : ""));
+        var yn = function e(r) {
+            var t = r.activeItemId, o = r.filterA11yId, l = r.filterKeyword, a = 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(je, {
+                        var k =  n().createElement(Pe, {
                 key: "selectAll"
-            },  n().createElement(xe, {
-                disabled: y.current === "all",
+            },  n().createElement(je, {
+                disabled: g.current === "all",
                 appearance: "standalone",
                 "aria-label": w,
                 onClick: p,
                 "data-test": "select-all",
                 tag: "button"
-            }, l ? (0, d._)("Select all Matches") : (0, d._)("Select all")),  n().createElement(xe, {
-                disabled: y.current === "none",
+            }, l ? (0, d._)("Select all Matches") : (0, d._)("Select all")),  n().createElement(je, {
+                disabled: g.current === "none",
                 appearance: "standalone",
                 "aria-label": C,
                 onClick: f,
@@ -979,19 +978,19 @@
             
             return n().createElement("div", {
                 key: "controls"
-            }, o &&  n().createElement(le(), {
+            }, o &&  n().createElement(te(), {
                 id: o
-            }, (0, d._)("Type to filter")), h === "above" &&  n().createElement(Pe, null),  n().createElement(Ce, {
+            }, (0, d._)("Type to filter")), h === "above" &&  n().createElement(Ee, null),  n().createElement(ke, {
                 key: "filter",
                 "data-test": "filter"
-            },  n().createElement(te(), {
+            },  n().createElement(le(), {
                 value: l,
                 autoCapitalize: "off",
                 autoComplete: "off",
                 autoCorrect: "off",
                 spellCheck: false,
                 onChange: b,
-                onKeyDown: g,
+                onKeyDown: y,
                 onFocus: m,
                 onBlur: v,
                 placeholder: (0, d._)("filter"),
@@ -1006,9 +1005,9 @@
                 inputId: i,
                 canClear: true,
                 startAdornment: mn
-            })), s && a && O === "buttongroup" && k, h === "below" &&  n().createElement(Pe, null));
+            })), s && a && O === "buttongroup" && k, h === "below" &&  n().createElement(Ee, null));
         };
-        var yn = function e(n) {
+        var gn = function e(n) {
             var r = n.prefixLabel, t = n.label, o = n.suffixLabel;
             var l = t;
             if (r) {
@@ -1020,9 +1019,9 @@
             return l;
         };
         var hn =  n().forwardRef((function(r, t) {
-            var o = r.appearance, l = o === void 0 ? "default" : o, a = 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, g = r.labelledBy, y = 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 = Ye(r, [ "appearance", "append", "children", "currentValues", "describedBy", "disabled", "elementRef", "error", "inline", "labelText", "labelledBy", "multiple", "onClick", "placeholder", "prefixLabel", "prepend", "required", "suffixLabel", "toggle", "toggleContent" ]);
-            var M;
+            var o = r.appearance, l = o === void 0 ? "default" : o, a = 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 = Ye(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 = [];
             // Generate buttonLabels
                         var A = e.Children.toArray(i);
@@ -1036,10 +1035,10 @@
                     e.push(s);
                     R.push(u);
                     // if not in multiple mode, add the icon
-                                        if (!y && c.length === 1) {
-                        M = i;
+                                        if (!g && c.length === 1) {
+                        E = i;
                     }
-                } else if (y) {
+                } else if (g) {
                     // only add values that don't match an option in "multiple" mode to preserve old behaviour
                     e.push(n);
                     R.push(n.toString());
@@ -1050,36 +1049,36 @@
                 }
                 return e;
             }), []);
-            E = I;
+            M = I;
             // only apply prefix / suffix if the label is not empty
-                        if (E.length > 0) {
+                        if (M.length > 0) {
                 // If there's more than one item selected, read out the selected total
                 // rather than reading out each selected item
-                R = yn({
+                R = gn({
                     prefixLabel: S,
-                    label: E.length > 1 ? [ "".concat(c.length, " items selected") ] : R,
+                    label: M.length > 1 ? [ "".concat(c.length, " items selected") ] : R,
                     suffixLabel: k
                 });
-                E = yn({
+                M = gn({
                     prefixLabel: S,
-                    label: E,
+                    label: M,
                     suffixLabel: k
                 });
             }
             // single <Select> behaviour is to show the placeholder if all parts of the label
             // are empty strings so we replicate this behaviour here
-                        if (E.length === 0 || !y && E.every((function(e) {
+                        if (M.length === 0 || !g && M.every((function(e) {
                 return e === "";
             }))) {
-                E = un(O);
-                R = E;
+                M = un(O);
+                R = M;
             }
-            var T = Object.keys(P).includes("aria-labelledby");
+            var N = Object.keys(P).includes("aria-labelledby");
             var L = rn({
                 "aria-describedby": s,
-                "aria-label": g || T ? undefined : "".concat(m ? "".concat(m, ", ") : "").concat(R.join("")),
+                "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
-                "aria-labelledby": g,
+                "aria-labelledby": y,
                 "aria-required": C,
                 "data-select-appearance": l,
                 append: a,
@@ -1091,11 +1090,11 @@
                 error: v,
                 ref: t
             }, P);
-            if (y) {
+            if (g) {
                 L["data-test-values"] = JSON.stringify(c);
             } else {
-                var N = We(c, 1), V = N[0];
-                L["data-test-value"] = V;
+                var V = We(c, 1), q = V[0];
+                L["data-test-value"] = q;
             }
             if (x) {
                 
@@ -1108,28 +1107,28 @@
                     appearance: "standalone"
                 }, L, {
                     "data-select-appearance": "link"
-                }), !!M &&  n().createElement(Se, null, M), E || O,  n().createElement(we, null,  n().createElement(U(), null)));
+                }), !!E &&  n().createElement(we, null, E), M || O,  n().createElement(Ce, null,  n().createElement(U(), null)));
             }
             // Using Button's secondary appearance as Select's default appearance.
                         var D = l === "default" ? "secondary" : l;
             
-            return n().createElement(Oe, $e({}, L, {
-                $multiple: y,
+            return n().createElement(Se, $e({}, L, {
+                $multiple: g,
                 appearance: D,
-                label: E,
+                label: M,
                 error: v,
-                icon: M,
+                icon: E,
                 inline: b,
                 isMenu: true,
                 onClick: h
-            }, _()(P, pn)), !!c.length && y &&  n().createElement(ke, {
+            }, _()(P, pn)), !!c.length && g &&  n().createElement(xe, {
                 "data-role": "count"
             }, "(", c.length, ")"));
         }));
         function On(r) {
-            var t = r.allowKeyMatching, o = t === void 0 ? true : t, l = r.animateLoading, a = r.appearance, i = a === void 0 ? "default" : a, c = r.append, s = r.allowNewValues, f = r.children, p = r.defaultPlacement, v = p === void 0 ? "vertical" : p, b = r.defaultValues, m = r.describedBy, g = r.disabled, y = 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, M = r.labelText, E = r.loadingMessage, R = r.menuStyle, A = R === void 0 ? {} : R, I = r.multiple, T = r.name, N = r.noOptionsMessage, D = N === void 0 ? vn : N, q = r.onChange, F = r.onScroll, _ = r.onScrollBottom, H = r.onFilterChange, z = r.onClick, W = r.onClose, U = r.onOpen, X = r.required, G = r.placeholder, J = G === void 0 ? bn : G, Y = r.prefixLabel, Z = r.prepend, re = r.repositionMode, te = re === void 0 ? "flip" : re, oe = r.selectAllAppearance, le = oe === void 0 ? "buttongroup" : oe, ae = r.showSelectedValuesFirst, se = r.suffixLabel, de = r.tabConfirmsNewValue, pe = r.values, ve = r.virtualization, be = r.toggle, me = r.toggleContent, ge = me === void 0 ? "optionChildren" : me, ye = Ye(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, l = r.animateLoading, a = r.appearance, i = a === void 0 ? "default" : a, 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, V = r.noOptionsMessage, D = V === void 0 ? vn : V, 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 ? bn : G, Y = r.prefixLabel, Z = r.prepend, re = r.repositionMode, te = re === void 0 ? "flip" : re, oe = r.selectAllAppearance, le = oe === void 0 ? "buttongroup" : oe, ae = r.showSelectedValuesFirst, de = r.suffixLabel, fe = r.tabConfirmsNewValue, ve = r.values, be = r.virtualization, me = r.toggle, ye = r.toggleContent, ge = ye === void 0 ? "optionChildren" : ye, he = Ye(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, Me["default"])({
+                        var Oe = (0, Me["default"])({
                 componentName: "SelectBase",
                 /* eslint-disable-next-line prefer-rest-params */
                 componentProps: arguments[0],
@@ -1138,27 +1137,27 @@
                 valuePropName: "values"
             });
             // states
-                        var Oe = (0, e.useState)((function() {
+                        var Se = (0, e.useState)((function() {
                 return {
                     activeItemId: (0, ce.createDOMID)("active-item"),
                     menuListboxId: (0, ce.createDOMID)("menu-listbox")
                 };
-            })), Se = We(Oe, 1), we = Se[0], Ce = we.activeItemId, ke = we.menuListboxId;
-            var xe = (0, e.useState)(0), je = We(xe, 2), Pe = je[0], Ee = je[1];
-            var Ie = (0, e.useState)(""), Be = We(Ie, 2), Te = Be[0], Le = Be[1];
-            var Ne = (0, e.useState)(false), De = We(Ne, 2), qe = De[0], He = De[1];
-            var Ke = (0, e.useState)(false), ze = We(Ke, 2), Ue = ze[0], Xe = ze[1];
+            })), we = We(Se, 1), Ce = we[0], ke = Ce.activeItemId, xe = Ce.menuListboxId;
+            var je = (0, e.useState)(0), Pe = We(je, 2), Ee = Pe[0], Re = Pe[1];
+            var Ie = (0, e.useState)(""), Be = We(Ie, 2), Ne = Be[0], Le = Be[1];
+            var Ve = (0, e.useState)(false), De = We(Ve, 2), Te = De[0], Ke = De[1];
+            var He = (0, e.useState)(false), ze = We(He, 2), Ue = ze[0], Xe = ze[1];
             var Ge = (0, e.useState)([]), Je = We(Ge, 2), Qe = Je[0], Ze = Je[1];
             var en = (0, e.useState)(b || []), nn = We(en, 2), rn = nn[0], tn = nn[1];
  // previous state
-                        var on = ie()(Pe);
+                        var on = ie()(Ee);
             // refs
                         var ln = (0, e.useRef)(null);
             var an = (0, e.useRef)(null);
             var un = (0, e.useRef)(null);
             var pn = (0, e.useRef)([]);
             var mn = (0, e.useRef)([]);
-            var yn = (0, e.useRef)(on);
+            var gn = (0, e.useRef)(on);
             var On = (0, e.useRef)();
             var Sn = (0, e.useRef)({});
             var wn = (0, e.useRef)(0);
@@ -1167,48 +1166,48 @@
             var xn = (0, e.useRef)();
             var jn = (0, e.useRef)(0);
             var Pn = (0, e.useRef)("none");
-            var Mn = (0, e.useState)(O ? (0, ce.createDOMID)("filter") : undefined), En = We(Mn, 1), Rn = En[0];
+            var En = (0, e.useState)(O ? (0, ce.createDOMID)("filter") : undefined), Mn = We(En, 1), Rn = Mn[0];
             (0, e.useEffect)((function() {
                 if (false) {}
             }), [ i, c, h, Z ]);
             var An = (0, e.useCallback)((function() {
-                var e = he ? pe : rn;
+                var e = Oe ? ve : rn;
                 return I || e == null ? e : e.slice(0, 1);
-            }), [ he, I, pe, rn ]);
+            }), [ Oe, I, ve, rn ]);
             var In = (0, e.useCallback)((function() {
                 var e;
                 // in non-multiple mode, don't move values to the top of the list
                                 return I && ae !== "never" ? (e = An()) !== null && e !== void 0 ? e : [] : [];
             }), [ An, I, ae ]);
             var Bn = (0, e.useCallback)((function(e) {
-                var n = Te;
-                He(true);
+                var n = Ne;
+                Ke(true);
                 Ze(In());
                 // SUI-3234: preserve existing behavior difference between <Select> and <Multiselect.Compact>
                                 if (I) {
                     Le("");
                 }
-                if (n !== Te) {
-                    H === null || H === void 0 ? void 0 : H(e, {
-                        keyword: Te
+                if (n !== Ne) {
+                    K === null || K === void 0 ? void 0 : K(e, {
+                        keyword: Ne
                     });
                 }
-            }), [ Te, In, I, H ]);
+            }), [ Ne, In, I, K ]);
             (0, e.useEffect)((function() {
-                if (qe) {
+                if (Te) {
                     U === null || U === void 0 ? void 0 : U();
                     if (kn.current && !O) {
                         kn.current.focus();
                     } else {
                         var e;
-                        Ee((e = xn.current) !== null && e !== void 0 ? e : 0);
+                        Re((e = xn.current) !== null && e !== void 0 ? e : 0);
                     }
                 }
-            }), [ U, qe, Qe, Te, O ]);
-            var Tn = (0, e.useCallback)((function() {
-                He(false);
-                Ee(0);
-                yn.current = null;
+            }), [ U, Te, Qe, Ne, O ]);
+            var Nn = (0, e.useCallback)((function() {
+                Ke(false);
+                Re(0);
+                gn.current = null;
                 W === null || W === void 0 ? void 0 : W();
             }), [ W ]);
             var Ln = (0, e.useCallback)((function(e, n) {
@@ -1226,59 +1225,59 @@
                     // non-multiple mode must always have a value
                     l = [ n ];
                 }
-                var a = !he;
+                var a = !Oe;
                 if (a) {
                     tn(l);
                 }
                 if (I) {
                     // in uncontrolled multiple mode, keep the menu open
                     if (a) {
-                        He(true);
+                        Ke(true);
                     }
                 } else {
                     var i;
                     // non-multiple mode only supports a single selection
                     // so close the menu once a selection is made
-                                        Tn({
+                                        Nn({
                         reason: "contentClick"
                     });
                     (i = ln.current) === null || i === void 0 ? void 0 : i.focus();
                 }
-                q === null || q === void 0 ? void 0 : q(e, {
+                T === null || T === void 0 ? void 0 : T(e, {
                     values: l,
-                    name: T,
+                    name: N,
                     reason: "valueToggle"
                 });
-            }), [ An, Tn, he, I, T, q ]);
-            var Nn = function e() {
+            }), [ An, Nn, Oe, I, N, T ]);
+            var Vn = function e() {
                 an.current = null;
                 pn.current = [];
                 if (un.current) {
                     clearTimeout(un.current);
                 }
             };
-            var Vn = (0, e.useCallback)((function(e) {
+            var qn = (0, e.useCallback)((function(e) {
                 var r;
                 // this doesn't make sense if we can't select multiple values
                                 if (!I) {
                     return;
                 }
                 var t = (r = An()) !== null && r !== void 0 ? r : [];
-                var o = K()(t.concat(Cn.current));
+                var o = H()(t.concat(Cn.current));
                 o = n().Children.toArray(f).filter((function(e) {
-                    return dn(e) && V()(o, e.props.value) && (!e.props.disabled || V()(t, e.props.value));
+                    return dn(e) && q()(o, e.props.value) && (!e.props.disabled || q()(t, e.props.value));
                 })).map((function(e) {
                     return e.props.value;
                 }));
-                if (!he) {
+                if (!Oe) {
                     tn(o);
                 }
-                q === null || q === void 0 ? void 0 : q(e, {
+                T === null || T === void 0 ? void 0 : T(e, {
                     values: o,
-                    name: T,
+                    name: N,
                     reason: "selectAll"
                 });
-            }), [ f, An, he, I, T, q ]);
+            }), [ f, An, Oe, I, N, T ]);
             var Dn = (0, e.useCallback)((function(e) {
                 var r;
                 // this doesn't make sense if we can't select multiple values
@@ -1289,28 +1288,28 @@
                 var o = $().apply(void 0, [ t ].concat(_e(Cn.current)));
                 // this will unselect all selected values unless those values are disabled or hidden by the filter
                                 var l = n().Children.toArray(f).filter((function(e) {
-                    return dn(e) && (V()(t, e.props.value) && e.props.disabled || V()(o, e.props.value));
+                    return dn(e) && (q()(t, e.props.value) && e.props.disabled || q()(o, e.props.value));
                 })).map((function(e) {
                     return e.props.value;
                 }));
-                if (!he) {
+                if (!Oe) {
                     tn(l);
                 }
-                q === null || q === void 0 ? void 0 : q(e, {
+                T === null || T === void 0 ? void 0 : T(e, {
                     values: l,
-                    name: T,
+                    name: N,
                     reason: "clearAll"
                 });
-            }), [ f, An, he, I, T, q ]);
-            var qn = (0, e.useCallback)((function(e) {
-                if (qe && !j) {
+            }), [ f, An, Oe, I, N, T ]);
+            var Tn = (0, e.useCallback)((function(e) {
+                if (Te && !j) {
                     _ === null || _ === void 0 ? void 0 : _(e);
                 }
-            }), [ qe, j, _ ]);
+            }), [ Te, j, _ ]);
             var Fn = (0, e.useCallback)((function(n) {
                 var r = n.key;
                 if (r === "Tab") {
-                    if (de && On.current && wn.current <= 1) {
+                    if (fe && On.current && wn.current <= 1) {
                         n.preventDefault();
                         Ln(n, On.current);
                     }
@@ -1321,48 +1320,48 @@
                         if (Pn.current === "all") {
                             Dn(n);
                         } else {
-                            Vn(n);
+                            qn(n);
                         }
                     }
                     return;
                 }
                 if (r === "ArrowDown") {
                     n.preventDefault();
-                    Ee(Math.min(Pe + 1, le === "checkbox" ? wn.current : wn.current - 1));
+                    Re(Math.min(Ee + 1, le === "checkbox" ? wn.current : wn.current - 1));
                     if (f && _) {
                         var t;
                         var o = e.Children.toArray(f).length - (2 + ((t = An()) !== null && t !== void 0 ? t : []).length);
-                        if (Pe === o) {
-                            qn(n);
+                        if (Ee === o) {
+                            Tn(n);
                         }
                     }
                 }
                 if (r === "ArrowUp") {
                     n.preventDefault();
-                    Ee(Math.max(Pe - 1, 0));
+                    Re(Math.max(Ee - 1, 0));
                 }
-                if (r === "Enter" && On.current && qe) {
+                if (r === "Enter" && On.current && Te) {
                     if (On.current === "selectAll") {
                         if (Pn.current === "all") {
                             Dn(n);
                         } else {
-                            Vn(n);
+                            qn(n);
                         }
                     } else {
                         n.preventDefault();
                         Ln(n, On.current);
                     }
                 }
-            }), [ Pe, f, An, Dn, qn, Vn, _, qe, le, de, Ln ]);
+            }), [ Ee, f, An, Dn, Tn, qn, _, Te, le, fe, Ln ]);
             var _n = (0, e.useCallback)((function(e, n) {
                 var r = n.value;
                 e.preventDefault();
-                if (!qe) {
+                if (!Te) {
                     return;
                 }
                 Ln(e, r);
-            }), [ qe, Ln ]);
-            var Hn = (0, e.useCallback)((function(e, n) {
+            }), [ Te, Ln ]);
+            var Kn = (0, e.useCallback)((function(e, n) {
                 var r = e.nativeEvent.key;
                 // Checking for a single character to avoid complications from double-byte languages and emojis.
                                 if (r.length === 1) {
@@ -1373,13 +1372,13 @@
                     };
                     if (!an.current) {
                         if (r === " ") {
-                            Nn();
+                            Vn();
                             return;
                         }
-                        t = Re(mn.current, o);
+                        t = Ae(mn.current, o);
                     } else if (pn.current.length > 1) {
                         o.index = an.current.index + 1;
-                        t = Re(pn.current, o);
+                        t = Ae(pn.current, o);
                     }
                     if (t.length) {
                         var l;
@@ -1401,20 +1400,20 @@
                     if (un.current) {
                         clearTimeout(un.current);
                     }
-                    un.current = setTimeout(Nn, 500);
+                    un.current = setTimeout(Vn, 500);
                     e.preventDefault();
                     e.stopPropagation();
                 }
             }), []);
-            var Kn = (0, e.useCallback)((function(e, n) {
+            var Hn = (0, e.useCallback)((function(e, n) {
                 var r = n.value;
                 Le(r);
-                He(true);
-                Ee(0);
-                H === null || H === void 0 ? void 0 : H(e, {
+                Ke(true);
+                Re(0);
+                K === null || K === void 0 ? void 0 : K(e, {
                     keyword: r
                 });
-            }), [ H ]);
+            }), [ K ]);
             var zn = (0, e.useCallback)((function() {
                 Xe(true);
             }), []);
@@ -1422,10 +1421,10 @@
                 Xe(false);
             }), []);
             var Wn = (0, e.useCallback)((function(e) {
-                if (yn.current !== Pe) {
-                    Ae(e);
+                if (gn.current !== Ee) {
+                    (0, se.scrollIntoViewIfNeeded)(e);
                 }
-            }), [ Pe ]);
+            }), [ Ee ]);
             var Un = (0, e.useCallback)((function(e, n, r) {
                 if (r) {
                     kn.current = e;
@@ -1438,8 +1437,8 @@
             }), [ Sn ]);
             var Xn = (0, e.useCallback)((function(e) {
                 ln.current = e;
-                Fe(y, e);
-            }), [ y, ln ]);
+                Fe(g, e);
+            }), [ g, ln ]);
             var Gn = (0, e.useMemo)((function() {
                 var e;
                 return (e = An()) !== null && e !== void 0 ? e : [];
@@ -1476,11 +1475,11 @@
                     }
                     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 === Te) {
+                                        if (m === Ne) {
                         t = true;
                     }
-                    var g = Gn && Gn.indexOf(m) >= 0;
-                    var y = !!g && !p && !i;
+                    var y = Gn && Gn.indexOf(m) >= 0;
+                    var g = !!y && !p && !i;
                     var h = o && !I && !O && !j && !_;
                     var S = fn(m, b);
                     var w = -1;
@@ -1493,17 +1492,17 @@
                     }
                     // Format the Menu.Item
                                         var C =  (0, e.cloneElement)(s, {
-                        elementRef: r(S, y),
+                        elementRef: r(S, g),
                         key: s.key || d,
                         onClick: _n,
                         onKeyDown: h ? function(e) {
-                            return Hn(e, w);
+                            return Kn(e, w);
                         } : undefined,
-                        selected: g,
+                        selected: y,
                         multiple: I,
                         role: "option"
                     });
-                    if (y) {
+                    if (g) {
                         i = true;
                     }
                     if (Yn && Yn.indexOf(m) >= 0) {
@@ -1527,7 +1526,7 @@
                             return dn(n) && n.props && n.props.value === e;
                         }));
                         if (!o) {
-                            if (e === Te) {
+                            if (e === Ne) {
                                 t = true;
                             }
                             var i = Yn && Yn.indexOf(e) >= 0;
@@ -1558,7 +1557,7 @@
                 }
                 var p = O === "controlled";
                 // Filter the items
-                                var v = (0, ue.stringToKeywords)(Te);
+                                var v = (0, ue.stringToKeywords)(Ne);
                 c = p ? c : c.filter((function(e) {
                     if (dn(e)) {
                         return (0, ue.testPhrase)(e.props.label, v);
@@ -1577,21 +1576,21 @@
                     });
                 }));
                 // Add the option to add the new value
-                                if (s && !t && Te) {
+                                if (s && !t && Ne) {
                     var b = a ? l + 1 : l;
-                    var m = "".concat(Te, " (new value)");
-                    var g = fn(Te, m);
+                    var m = "".concat(Ne, " (new value)");
+                    var y = fn(Ne, m);
                     c.splice(b, 0,  n().createElement(C, {
-                        elementRef: r(g),
+                        elementRef: r(y),
                         label: m,
-                        value: Te,
+                        value: Ne,
                         key: "newValue",
                         multiple: I,
                         onClick: _n
                     }));
                 }
                 // When selectAll is a menu item, add an offset so that activeItem accounts for the extra selectAll option.
-                                var y = le === "checkbox" && I && c.length > 1 ? 1 : 0;
+                                var g = le === "checkbox" && I && c.length > 1 ? 1 : 0;
                 var h = true;
                 // Highlight the selected Items and remove hidden
                                 c = c.reduce((function(n, r) {
@@ -1607,8 +1606,8 @@
                     if (r.props.selected && !r.props.disabled && xn.current == null) {
                         xn.current = wn.current;
                     }
-                    var t = y === Pe;
-                    y += 1;
+                    var t = g === Ee;
+                    g += 1;
                     wn.current += 1;
                     jn.current += r.props.selected ? 1 : 0;
                     if (r.key !== "newValue" && !r.props.disabled && !r.props.selected) {
@@ -1624,7 +1623,7 @@
                     var o =  (0, e.cloneElement)(r, {
                         active: t,
                         elementRef: Wn,
-                        id: Ce
+                        id: ke
                     });
                     n.push(o);
                     return n;
@@ -1634,26 +1633,26 @@
                                 if (le === "checkbox" && I && wn.current > 0) {
                     var S;
                     if (Pn.current === "all") {
-                        if (Te === "") {
+                        if (Ne === "") {
                             S = (0, d._)("Clear all");
                         } else {
                             S = (0, d._)("Clear all matches");
                         }
-                    } else if (Te === "") {
+                    } else if (Ne === "") {
                         S = (0, d._)("Select all");
                     } else {
                         S = (0, d._)("Select all matches");
                     }
-                    if (Pe === 0 && Ue) {
+                    if (Ee === 0 && Ue) {
                         On.current = "selectAll";
                     }
-                    c.unshift( n().createElement(fe, {
+                    c.unshift( n().createElement(pe, {
                         key: "select-all-option",
-                        active: Pe === 0,
-                        changedToggle: !!be,
+                        active: Ee === 0,
+                        changedToggle: !!me,
                         elementRef: Wn,
-                        id: Pe === 0 ? Ce : undefined,
-                        onClick: Pn.current === "all" ? Dn : Vn,
+                        id: Ee === 0 ? ke : undefined,
+                        onClick: Pn.current === "all" ? Dn : qn,
                         selectAllLabel: S,
                         selected: Pn.current === "all" || Pn.current !== "none" && "some",
                         totalCount: Gn.length,
@@ -1669,33 +1668,33 @@
                     return e;
                 }), []);
                 return c;
-            }), [ Pe, Ce, o, s, f, Gn, O, Te, Wn, Dn, _n, Hn, Un, Vn, j, I, Yn, _, le, Ue, be ]);
+            }), [ Ee, ke, o, s, f, Gn, O, Ne, Wn, Dn, _n, Kn, Un, qn, j, I, Yn, _, le, Ue, me ]);
             var er = function e(r) {
-                var t = r.anchorWidth, o = r.maxHeight, a = r.placement;
-                var i = cn({
+                var t = r.anchorWidth, o = r.maxHeight, a = r.placement, i = r.toggleId;
+                var u = cn({
                     anchorWidth: t,
                     isMultiple: I,
                     maxHeight: o,
                     menuStyle: A
                 });
-                var u = Gn.length > 0 && !Qn && !O ? 0 : undefined;
-                var c = {
+                var c = Gn.length > 0 && !Qn && !O ? 0 : undefined;
+                var s = {
                     "aria-multiselectable": I || undefined,
-                    childrenStart: !!O &&  n().createElement(gn, {
-                        activeItemId: Ce,
+                    childrenStart: !!O &&  n().createElement(yn, {
+                        activeItemId: ke,
                         filterA11yId: Rn,
-                        filterKeyword: Te,
+                        filterKeyword: Ne,
                         hasChildren: Zn.some((function(e) {
                             return dn(e);
                         })),
                         inputId: k,
                         inputRef: x,
-                        menuListboxId: ke,
+                        menuListboxId: xe,
                         multiple: I,
                         onClearAll: Dn,
-                        onSelectAll: Vn,
+                        onSelectAll: qn,
                         onTextBlur: $n,
-                        onTextChange: Kn,
+                        onTextChange: Hn,
                         onTextFocus: zn,
                         onTextKeyDown: Fn,
                         optionSelection: Pn,
@@ -1705,25 +1704,27 @@
                     }),
                     focusMode: O ? "never" : undefined,
                     isLoading: j,
-                    menuId: ke,
-                    onScrollBottom: _ ? qn : undefined,
+                    labelledBy: "".concat(Rn !== null && Rn !== void 0 ? Rn : "", " ").concat(i !== null && i !== void 0 ? i : "").trim(),
+                    // NVDA ignores aria-labelledby attribute on popover, but reads it on menu
+                    menuId: xe,
+                    onScrollBottom: _ ? Tn : undefined,
                     placement: a !== null && a !== void 0 ? a : undefined,
                     noOptionsMessage: D,
                     footerMessage: S,
                     animateLoading: l,
-                    loadingMessage: E,
+                    loadingMessage: M,
                     onScroll: F,
-                    style: i,
-                    tabIndex: u
+                    style: u,
+                    tabIndex: c
                 };
-                if (ve) {
+                if (be) {
                     
                     return n().createElement(ee.VirtualizedResultsMenu, $e({
-                        virtualization: ve
-                    }, c), Zn);
+                        virtualization: be
+                    }, s), Zn);
                 }
                 
-                return n().createElement(ne(), c, Zn);
+                return n().createElement(ne(), s, Zn);
             };
             var nr = (0, e.useMemo)((function() {
                 
@@ -1733,11 +1734,11 @@
                     currentValues: An(),
                     "data-test": I ? "multiselect" : "select",
                     describedBy: m,
-                    disabled: g,
+                    disabled: y,
                     elementRef: Xn,
                     error: h,
                     inline: w,
-                    labelText: M,
+                    labelText: E,
                     labelledBy: P,
                     multiple: I,
                     onClick: z,
@@ -1745,11 +1746,11 @@
                     prefixLabel: Y,
                     prepend: Z,
                     required: X,
-                    suffixLabel: se,
-                    toggle: be,
+                    suffixLabel: de,
+                    toggle: me,
                     toggleContent: ge
-                }, ye), f);
-            }), [ i, c, An, I, m, g, h, Xn, w, M, P, z, J, Y, Z, X, se, be, ge, ye, f ]);
+                }, he), f);
+            }), [ i, c, An, I, m, y, h, Xn, w, E, P, z, J, Y, Z, X, de, me, ge, he, f ]);
             
             return n().createElement(Q(), {
                 closeReasons: sn,
@@ -1757,12 +1758,12 @@
                 "aria-labelledby": Rn,
                 toggle: nr,
                 onRequestOpen: Bn,
-                onRequestClose: Tn,
-                open: qe,
+                onRequestClose: Nn,
+                open: Te,
                 openWithArrowKeys: true,
                 repositionMode: te,
                 defaultPlacement: v,
-                canCoverAnchor: Ve().innerHeight < 500,
+                canCoverAnchor: qe().innerHeight < 500,
                 retainFocus: false,
                 takeFocus: Gn.length === 0 || Gn.length > 0 && !Qn || !!O
             }, er);
@@ -1808,48 +1809,48 @@
             return r;
         }
         var xn = {
-            allowNewValues: l().bool,
-            animateLoading: l().bool,
-            children: l().node,
-            controlledFilter: l().bool,
-            defaultPlacement: l().oneOf([ "above", "below", "vertical" ]),
-            defaultValues: l().array,
-            describedBy: l().string,
-            disabled: l().bool,
-            elementRef: l().oneOfType([ l().func, l().object ]),
-            error: l().bool,
-            filter: l().oneOf([ false, true, "controlled" ]),
-            footerMessage: l().node,
-            inline: l().bool,
-            inputId: l().string,
-            inputRef: l().oneOfType([ l().func, l().object ]),
-            isLoadingOptions: l().bool,
-            labelledBy: l().string,
-            loadingMessage: l().node,
-            menuStyle: l().object,
-            name: l().string,
-            noOptionsMessage: l().node,
-            onChange: l().func,
-            onClose: l().func,
-            onFilterChange: l().func,
-            onOpen: l().func,
-            onScroll: l().func,
-            onScrollBottom: l().func,
-            placeholder: l().string,
-            repositionMode: l().oneOf([ "none", "flip" ]),
-            selectAllAppearance: l().oneOf([ "buttongroup", "checkbox" ]),
-            showSelectedValuesFirst: l().oneOf([ "nextOpen", "immediately", "never" ]),
-            tabConfirmsNewValue: l().bool,
-            values: l().array,
+            allowNewValues: i().bool,
+            animateLoading: i().bool,
+            children: i().node,
+            controlledFilter: i().bool,
+            defaultPlacement: i().oneOf([ "above", "below", "vertical" ]),
+            defaultValues: i().array,
+            describedBy: i().string,
+            disabled: i().bool,
+            elementRef: i().oneOfType([ i().func, i().object ]),
+            error: i().bool,
+            filter: i().oneOf([ false, true, "controlled" ]),
+            footerMessage: i().node,
+            inline: i().bool,
+            inputId: i().string,
+            inputRef: i().oneOfType([ i().func, i().object ]),
+            isLoadingOptions: i().bool,
+            labelledBy: i().string,
+            loadingMessage: i().node,
+            menuStyle: i().object,
+            name: i().string,
+            noOptionsMessage: i().node,
+            onChange: i().func,
+            onClose: i().func,
+            onFilterChange: i().func,
+            onOpen: i().func,
+            onScroll: i().func,
+            onScrollBottom: i().func,
+            placeholder: i().string,
+            repositionMode: i().oneOf([ "none", "flip" ]),
+            selectAllAppearance: i().oneOf([ "buttongroup", "checkbox" ]),
+            showSelectedValuesFirst: i().oneOf([ "nextOpen", "immediately", "never" ]),
+            tabConfirmsNewValue: i().bool,
+            values: i().array,
             /** @private */
-            virtualization: l().number
+            virtualization: i().number
         };
         // TS: not typed controlled/uncontrolled, handled by Multiselect wrapper component
                 var jn = {};
         var Pn = (0, d._)("No matches");
-        var Mn = (0, d._)("Select...");
-        function En(r) {
-            var t = r.allowNewValues, o = r.animateLoading, l = r.children, a = r.controlledFilter, i = r.defaultPlacement, u = i === void 0 ? "vertical" : i, c = r.defaultValues, s = r.describedBy, d = r.disabled, f = r.elementRef, p = r.error, v = r.filter, b = r.footerMessage, m = r.inline, g = r.inputId, y = r.inputRef, h = r.isLoadingOptions, O = r.labelledBy, S = r.loadingMessage, w = r.menuStyle, k = w === void 0 ? jn : w, x = r.name, j = r.noOptionsMessage, P = j === void 0 ? Pn : j, M = r.onChange, E = r.onClose, R = r.onFilterChange, A = r.onOpen, I = r.onScroll, B = r.onScrollBottom, T = r.placeholder, L = T === void 0 ? Mn : T, N = r.repositionMode, V = r.selectAllAppearance, D = r.showSelectedValuesFirst, q = D === void 0 ? "nextOpen" : D, F = r.tabConfirmsNewValue, _ = r.values, H = r.virtualization, K = Cn(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 En = (0, d._)("Select...");
+        function Mn(r) {
+            var t = r.allowNewValues, o = r.animateLoading, l = r.children, a = r.controlledFilter, i = r.defaultPlacement, u = i === void 0 ? "vertical" : i, c = r.defaultValues, s = r.describedBy, d = r.disabled, f = 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 ? jn : w, x = r.name, j = r.noOptionsMessage, P = j === void 0 ? Pn : j, E = r.onChange, M = r.onClose, R = r.onFilterChange, A = r.onOpen, I = r.onScroll, B = r.onScrollBottom, N = r.placeholder, L = N === void 0 ? En : N, V = r.repositionMode, q = r.selectAllAppearance, D = r.showSelectedValuesFirst, T = D === void 0 ? "nextOpen" : D, F = r.tabConfirmsNewValue, _ = r.values, K = r.virtualization, H = Cn(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" ]);
             // @docs-props-type CompactPropsBase
                         if (false) {}
             var z = true;
@@ -1892,56 +1893,56 @@
                 error: p,
                 footerMessage: b,
                 inline: m,
-                inputId: g,
-                inputRef: y,
+                inputId: y,
+                inputRef: g,
                 isLoadingOptions: h,
                 labelledBy: O,
                 loadingMessage: S,
                 menuStyle: k,
                 name: x,
                 noOptionsMessage: P,
-                onChange: M,
-                onClose: E,
+                onChange: E,
+                onClose: M,
                 onFilterChange: R,
                 onOpen: A,
                 onScroll: I,
                 onScrollBottom: B,
                 placeholder: L,
-                repositionMode: N,
-                selectAllAppearance: V,
-                showSelectedValuesFirst: q,
+                repositionMode: V,
+                selectAllAppearance: q,
+                showSelectedValuesFirst: T,
                 tabConfirmsNewValue: F,
-                virtualization: H
-            }, K, $, {
+                virtualization: K
+            }, H, $, {
                 multiple: true
             }));
         }
-        En.propTypes = xn;
-        En.Option = E;
-        En.Divider = u.Divider;
-        En.Heading = u.Heading;
-        /* harmony default export */        const Rn = En;
+        Mn.propTypes = xn;
+        Mn.Option = M;
+        Mn.Divider = u.Divider;
+        Mn.Heading = u.Heading;
+        /* harmony default export */        const Rn = Mn;
         // CONCATENATED MODULE: external "lodash/defer"
         const An = require("lodash/defer");
         var In =  r.n(An);
         // CONCATENATED MODULE: external "lodash/get"
         const Bn = require("lodash/get");
-        var Tn =  r.n(Bn);
+        var Nn =  r.n(Bn);
         // CONCATENATED MODULE: external "lodash/isString"
         const Ln = require("lodash/isString");
-        var Nn =  r.n(Ln);
+        var Vn =  r.n(Ln);
         // CONCATENATED MODULE: external "lodash/keys"
-        const Vn = require("lodash/keys");
-        var Dn =  r.n(Vn);
+        const qn = require("lodash/keys");
+        var Dn =  r.n(qn);
         // CONCATENATED MODULE: external "lodash/last"
-        const qn = require("lodash/last");
-        var Fn =  r.n(qn);
+        const Tn = require("lodash/last");
+        var Fn =  r.n(Tn);
         // CONCATENATED MODULE: external "lodash/omit"
         const _n = require("lodash/omit");
-        var Hn =  r.n(_n);
+        var Kn =  r.n(_n);
         // CONCATENATED MODULE: external "lodash/pickBy"
-        const Kn = require("lodash/pickBy");
-        var zn =  r.n(Kn);
+        const Hn = require("lodash/pickBy");
+        var zn =  r.n(Hn);
         // CONCATENATED MODULE: external "@splunk/react-ui/Popover"
         const $n = require("@splunk/react-ui/Popover");
         var Wn =  r.n($n);
@@ -1954,40 +1955,40 @@
         const Jn = require("@splunk/react-ui/Chip");
         var Qn =  r.n(Jn);
         // CONCATENATED MODULE: ./src/Multiselect/NormalStyles.ts
-        var Yn = ve()(Gn()).withConfig({
+        var Yn = be()(Gn()).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;}" ], he.variables.spacingXSmall, he.variables.borderRadius, he.variables.inputHeight, he.variables.inputBorderWidth, he.variables.interactiveColorBorder, he.variables.spacingXSmall, he.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;}" ], Oe.variables.spacingXSmall, Oe.variables.borderRadius, Oe.variables.inputHeight, Oe.variables.inputBorderWidth, Oe.variables.interactiveColorBorder, Oe.variables.spacingXSmall, Oe.variables.interactiveColorBackground, (function(e) {
             var n = e.$hasFocus;
-            return n && (0, pe.css)([ "box-shadow:", ";" ], he.variables.focusShadow);
+            return n && (0, ve.css)([ "box-shadow:", ";" ], Oe.variables.focusShadow);
         }), (function(e) {
             var n = e.$error;
-            return n && (0, pe.css)([ "border-color:", ";&:hover:not([disabled]){border-color:", ";}" ], he.variables.interactiveColorAccentError, he.variables.interactiveColorAccentErrorStrong);
+            return n && (0, ve.css)([ "border-color:", ";&:hover:not([disabled]){border-color:", ";}" ], Oe.variables.interactiveColorAccentError, Oe.variables.interactiveColorAccentErrorStrong);
         }), (function(e) {
             var n = e.$disabled;
-            return n && (0, pe.css)([ "border-color:", ";background-color:", ";cursor:not-allowed;" ], he.variables.interactiveColorBorderDisabled, he.variables.interactiveColorBackgroundDisabled);
+            return n && (0, ve.css)([ "border-color:", ";background-color:", ";cursor:not-allowed;" ], Oe.variables.interactiveColorBorderDisabled, Oe.variables.interactiveColorBackgroundDisabled);
         }), (function(e) {
             var n = e.$disabled, r = e.$hasFocus;
-            return !n && !r && (0, pe.css)([ "&:hover{border-color:", ";}" ], he.variables.interactiveColorBorderHover);
+            return !n && !r && (0, ve.css)([ "&:hover{border-color:", ";}" ], Oe.variables.interactiveColorBorderHover);
         }), (function(e) {
             var n = e.$popoverOpen;
-            return n && (0, pe.css)([ "position:relative;z-index:calc(", " - 2);" ], he.variables.zindexFixedNavbar);
+            return n && (0, ve.css)([ "position:relative;z-index:calc(", " - 2);" ], Oe.variables.zindexFixedNavbar);
         }));
-        var Zn = ve().span.withConfig({
+        var Zn = be().span.withConfig({
             displayName: "NormalStyles__StyledButtonsWrapper",
             componentId: "sc-1uwwpco-1"
         })([ "display:contents;" ]);
-        var er = ve().input.withConfig({
+        var er = be().input.withConfig({
             displayName: "NormalStyles__StyledInput",
             componentId: "sc-1uwwpco-2"
-        })([ "", ";flex:1 0 auto;max-width:100%;" ], he.mixins.reset("block"));
-        var nr = ve()(Qn()).withConfig({
+        })([ "", ";flex:1 0 auto;max-width:100%;" ], Oe.mixins.reset("block"));
+        var nr = be()(Qn()).withConfig({
             displayName: "NormalStyles__StyledChip",
             componentId: "sc-1uwwpco-3"
         })([ "line-height:1.1429;height:auto;", ";&:not([disabled]):focus{box-shadow:", ";}" ], (0, 
-        he.pick)({
-            compact: (0, pe.css)([ "padding-block:2px;" ])
-        }), he.variables.focusShadowInset);
+        Oe.pick)({
+            compact: (0, ve.css)([ "padding-block:2px;" ])
+        }), Oe.variables.focusShadowInset);
         // CONCATENATED MODULE: ./src/Multiselect/Normal.tsx
         function rr(e) {
             "@babel/helpers - typeof";
@@ -2097,18 +2098,18 @@
             }
             return r;
         }
-        function gr(e) {
+        function yr(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var r = null != arguments[n] ? arguments[n] : {};
                 n % 2 ? mr(Object(r), !0).forEach((function(n) {
-                    yr(e, n, r[n]);
+                    gr(e, n, r[n]);
                 })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : mr(Object(r)).forEach((function(n) {
                     Object.defineProperty(e, n, Object.getOwnPropertyDescriptor(r, n));
                 }));
             }
             return e;
         }
-        function yr(e, n, r) {
+        function gr(e, n, r) {
             return (n = hr(n)) in e ? Object.defineProperty(e, n, {
                 value: r,
                 enumerable: !0,
@@ -2131,49 +2132,49 @@
             return ("string" === n ? String : Number)(e);
         }
         var Sr = {
-            allowNewValues: l().bool,
-            animateLoading: l().bool,
-            children: l().node,
-            controlledFilter: l().bool,
-            defaultPlacement: l().oneOf([ "above", "below", "vertical" ]),
-            defaultValues: l().array,
-            describedBy: l().string,
-            disabled: l().bool,
-            elementRef: l().oneOfType([ l().func, l().object ]),
-            error: l().bool,
-            footerMessage: l().node,
-            inline: l().bool,
-            inputId: l().string,
-            inputRef: l().oneOfType([ l().func, l().object ]),
-            isLoadingOptions: l().bool,
-            labelledBy: l().string,
-            loadingMessage: l().node,
-            menuStyle: l().object,
-            name: l().string,
-            noOptionsMessage: l().node,
-            onChange: l().func,
-            onClose: l().func,
-            onFilterChange: l().func,
-            onOpen: l().func,
-            onScroll: l().func,
-            onScrollBottom: l().func,
-            placeholder: l().string,
+            allowNewValues: i().bool,
+            animateLoading: i().bool,
+            children: i().node,
+            controlledFilter: i().bool,
+            defaultPlacement: i().oneOf([ "above", "below", "vertical" ]),
+            defaultValues: i().array,
+            describedBy: i().string,
+            disabled: i().bool,
+            elementRef: i().oneOfType([ i().func, i().object ]),
+            error: i().bool,
+            footerMessage: i().node,
+            inline: i().bool,
+            inputId: i().string,
+            inputRef: i().oneOfType([ i().func, i().object ]),
+            isLoadingOptions: i().bool,
+            labelledBy: i().string,
+            loadingMessage: i().node,
+            menuStyle: i().object,
+            name: i().string,
+            noOptionsMessage: i().node,
+            onChange: i().func,
+            onClose: i().func,
+            onFilterChange: i().func,
+            onOpen: i().func,
+            onScroll: i().func,
+            onScrollBottom: i().func,
+            placeholder: i().string,
             /** @private. */
-            required: l().bool,
-            repositionMode: l().oneOf([ "none", "flip" ]),
-            tabConfirmsNewValue: l().bool,
-            values: l().array
+            required: i().bool,
+            repositionMode: i().oneOf([ "none", "flip" ]),
+            tabConfirmsNewValue: i().bool,
+            values: i().array
         };
-        var wr = q()((function(e) {
+        var wr = T()((function(e) {
             return {
                 flexBasis: e,
                 width: e
             };
         }));
         // export for testing purpose
-                var Cr = q()((function(e) {
+                var Cr = T()((function(e) {
             var n = e.anchorWidth, r = n === void 0 ? 0 : n, t = e.maxHeight, o = e.menuStyle;
-            return gr({
+            return yr({
                 maxHeight: t,
                 overflow: "auto",
                 width: Math.max(r, 200)
@@ -2184,9 +2185,9 @@
         var xr = (0, d._)("No matches");
         var jr = (0, d._)("Select...");
         function Pr(r) {
-            var t = r.allowNewValues, o = r.animateLoading, l = r.children, a = r.controlledFilter, u = r.defaultPlacement, c = u === void 0 ? "vertical" : u, f = r.defaultValues, p = r.describedBy, v = r.disabled, b = r.elementRef, m = r.error, g = r.footerMessage, y = r.inline, h = r.inputId, O = r.inputRef, S = r.isLoadingOptions, w = r.labelledBy, C = r.loadingMessage, k = r.menuStyle, x = k === void 0 ? kr : k, j = r.name, P = r.noOptionsMessage, M = P === void 0 ? xr : P, R = r.onChange, A = r.onClose, I = r.onFilterChange, B = r.onScroll, T = r.onScrollBottom, L = r.onOpen, N = r.placeholder, V = N === void 0 ? jr : N, D = r.required, q = r.repositionMode, F = r.tabConfirmsNewValue, _ = r.values, H = vr(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, a = r.children, i = r.controlledFilter, u = r.defaultPlacement, c = u === void 0 ? "vertical" : u, f = 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 ? kr : k, j = r.name, P = r.noOptionsMessage, E = P === void 0 ? xr : P, R = r.onChange, A = r.onClose, I = r.onFilterChange, B = r.onScroll, N = r.onScrollBottom, L = r.onOpen, V = r.placeholder, q = V === void 0 ? jr : V, D = r.required, T = r.repositionMode, F = r.tabConfirmsNewValue, _ = r.values, K = vr(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" ]);
             // @docs-props-type NormalPropsBase
-                        var K = s()({
+                        var H = s()({
                 componentName: "Multiselect",
                 /* eslint-disable-next-line prefer-rest-params */
                 componentProps: arguments[0],
@@ -2197,161 +2198,165 @@
             if (false) {}
             var z = (0, e.useState)(0), W = ur(z, 2), U = W[0], X = W[1];
             var G = (0, e.useState)(null), J = ur(G, 2), Q = J[0], Y = J[1];
-            var Z = (0, e.useState)(""), ee = ur(Z, 2), re = ee[0], te = ee[1];
-            var oe = (0, e.useState)(false), ae = ur(oe, 2), ie = ae[0], se = ae[1];
-            var de = (0, e.useState)(false), fe = ur(de, 2), pe = fe[0], ve = fe[1];
-            var be = (0, e.useState)(f || []), me = ur(be, 2), ge = me[0], ye = me[1];
-            var he = (0, e.useState)(""), Oe = ur(he, 2), Se = Oe[0], we = Oe[1];
-            var Ce = K && _ ? _ : ge;
-            var ke = Ce.slice(0);
-            var xe = Ce.indexOf(re) >= 0;
-            var je = (0, e.useRef)(null);
+            var Z = (0, e.useState)(""), ee = ur(Z, 2), re = ee[0], oe = ee[1];
+            var le = (0, e.useState)(false), ae = ur(le, 2), ie = ae[0], de = ae[1];
+            var fe = (0, e.useState)(false), pe = ur(fe, 2), ve = pe[0], be = pe[1];
+            var me = (0, e.useState)(f || []), ye = ur(me, 2), ge = ye[0], he = ye[1];
+            var Oe = (0, e.useState)(""), Se = ur(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 Ee = (0, e.useRef)(0);
-            var Re = (0, e.useState)((function() {
+            var Re = (0, e.useRef)(0);
+            var Ae = (0, e.useState)((function() {
                 return {
                     activeItemId: (0, ce.createDOMID)("active-item"),
                     popoverId: (0, ce.createDOMID)("popover")
                 };
-            })), Ie = ur(Re, 1), Be = Ie[0], Te = Be.activeItemId, Le = Be.popoverId;
+            })), Ie = ur(Ae, 1), Be = Ie[0], Ne = Be.activeItemId, Le = Be.popoverId;
             (0, e.useEffect)((function() {
-                if (K) {
-                    te("");
+                if (H) {
+                    oe("");
                     X(0);
                 }
-            }), [ _, K ]);
-            var Ne = (0, e.useCallback)((function(e) {
+            }), [ _, H ]);
+            // 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 Ve = (0, e.useCallback)((function(e) {
                 var n = e.resetFilterKeyword;
-                if (!pe) {
-                    te((function(e) {
+                if (!ve) {
+                    oe((function(e) {
                         return n ? "" : e;
                     }));
-                    se(true);
-                    ve(true);
+                    de(true);
+                    be(true);
                     L === null || L === void 0 ? void 0 : L();
                 }
-            }), [ pe, L ]);
-            var Ve = (0, e.useCallback)((function() {
+            }), [ ve, L ]);
+            var qe = (0, e.useCallback)((function() {
                 if (ie) {
-                    Ne({
+                    Ve({
                         resetFilterKeyword: false
                     });
                 } else {
                     var e;
-                    (e = je.current) === null || e === void 0 ? void 0 : e.focus();
+                    (e = Pe.current) === null || e === void 0 ? void 0 : e.focus();
                 }
-            }), [ ie, Ne ]);
+            }), [ ie, Ve ]);
             var De = (0, e.useCallback)((function(e, n) {
-                if (!pe) {
+                if (!ve) {
                     return;
                 }
-                var r = (Ce || []).concat([ n ]);
-                if (!K) {
-                    ye(r);
+                var r = (ke || []).concat([ n ]);
+                if (!H) {
+                    he(r);
                     X(0);
-                    ve(true);
-                    te("");
+                    be(true);
+                    oe("");
                 }
                 R === null || R === void 0 ? void 0 : R(e, {
                     values: r,
                     name: j
                 });
-            }), [ pe, Ce, K, R, j ]);
-            var qe = (0, e.useCallback)((function(e, n) {
-                var r = $()(Ce, n);
-                if (!K) {
-                    ye(r);
+            }), [ ve, ke, H, R, j ]);
+            var Te = (0, e.useCallback)((function(e, n) {
+                var r = $()(ke, n);
+                if (!H) {
+                    he(r);
                 }
                 R === null || R === void 0 ? void 0 : R(e, {
                     values: r,
                     name: j
                 });
-            }), [ Ce, K, j, R ]);
+            }), [ ke, H, j, R ]);
             var _e = (0, e.useCallback)((function(e) {
-                if (pe && !S) {
-                    T === null || T === void 0 ? void 0 : T(e);
-                    we("".concat(Ee.current, " options, loading more options"));
+                if (ve && !S) {
+                    N === null || N === void 0 ? void 0 : N(e);
+                    Ce("".concat(Re.current, " options, loading more options"));
                 }
-            }), [ pe, S, T ]);
-            var He = (0, e.useCallback)((function(e, n) {
+            }), [ ve, S, N ]);
+            var Ke = (0, e.useCallback)((function(e, n) {
                 var r = n.value;
                 In()((function() {
-                    return qe(e, r);
+                    return Te(e, r);
                 }));
-            }), [ qe ]);
-            var Ke = (0, e.useCallback)((function(e) {
+            }), [ Te ]);
+            var He = (0, e.useCallback)((function(e) {
                 if (re !== "") {
                     I === null || I === void 0 ? void 0 : I(e, {
                         keyword: ""
                     });
                 }
-                Ne({
+                Ve({
                     resetFilterKeyword: true
                 });
-            }), [ re, I, Ne ]);
+            }), [ re, I, Ve ]);
             var ze = (0, e.useCallback)((function(n) {
                 var r;
                 var t = n.key;
-                if (t === "Tab" && pe) {
-                    if (F && Me.current !== undefined && Ee.current <= 1) {
+                if (t === "Tab" && ve) {
+                    if (F && Me.current !== undefined && Re.current <= 1) {
                         var o;
                         n.preventDefault();
                         De(n, Me.current);
-                        (o = je.current) === null || o === void 0 ? void 0 : o.focus();
+                        (o = Pe.current) === null || o === void 0 ? void 0 : o.focus();
                     } else {
-                        ve(false);
+                        be(false);
                     }
                 }
                 if (n.shiftKey || n.metaKey || n.ctrlKey) {
                     return;
                 }
-                if (t === "End" && pe) {
+                if (t === "End" && ve) {
                     n.preventDefault();
-                    X(Ee.current - 1);
+                    X(Re.current - 1);
                 }
-                if (t === "Home" && pe) {
+                if (t === "Home" && ve) {
                     n.preventDefault();
                     X(0);
                 }
                 if (t === "ArrowDown") {
                     n.preventDefault();
-                    if (pe) {
+                    if (ve) {
                         X((function(e) {
-                            return Math.min(e + 1, Ee.current - 1);
+                            return Math.min(e + 1, Re.current - 1);
                         }));
                     } else {
                         X(0);
-                        ve(true);
+                        be(true);
                     }
-                    if (l && T) {
-                        var a = e.Children.toArray(l).length - (2 + ((Ce === null || Ce === void 0 ? void 0 : Ce.length) || 0));
-                        if (U === a) {
+                    if (a && N) {
+                        var l = e.Children.toArray(a).length - (2 + ((ke === null || ke === void 0 ? void 0 : ke.length) || 0));
+                        if (U === l) {
                             _e(n);
                         }
                     }
                 }
                 if (t === "ArrowUp") {
                     n.preventDefault();
-                    if (pe) {
+                    if (ve) {
                         X((function(e) {
                             return Math.max(e - 1, 0);
                         }));
                     } else {
                         X(0);
-                        ve(true);
+                        be(true);
                     }
                 }
-                if (t === "Enter" && Me.current !== undefined && pe) {
+                if (t === "Enter" && Me.current !== undefined && ve) {
                     De(n, Me.current);
                 }
-                if (t === "Backspace" && ((r = je.current) === null || r === void 0 ? void 0 : r.value) === "" && Ce.length) {
-                    qe(n, Fn()(Ce));
+                if (t === "Backspace" && ((r = Pe.current) === null || r === void 0 ? void 0 : r.value) === "" && ke.length) {
+                    Te(n, Fn()(ke));
                 }
-            }), [ pe, Ce, F, De, l, T, U, _e, qe ]);
+            }), [ ve, ke, F, De, a, N, U, _e, Te ]);
             var $e = (0, e.useCallback)((function(e) {
-                te(e.target.value);
-                ve(true);
+                oe(e.target.value);
+                be(true);
                 X(0);
                 I === null || I === void 0 ? void 0 : I(e, {
                     keyword: e.target.value
@@ -2362,7 +2367,7 @@
                 var t = n.value;
                 e.stopPropagation();
                 De(e, t);
-                (r = je.current) === null || r === void 0 ? void 0 : r.focus();
+                (r = Pe.current) === null || r === void 0 ? void 0 : r.focus();
             }), [ De ]);
             var Ue = (0, e.useCallback)((function(e) {
                 var n = document.getElementById(Le);
@@ -2370,8 +2375,8 @@
  // IE11 doesn't support relatedTarget but sets activeElement
                                 var t = n && r && n.contains(r);
  // TS: target as Node is an unsafe assumption
-                                te(t ? re : "");
-                se(false);
+                                oe(t ? re : "");
+                de(false);
                 if (!t) {
                     I === null || I === void 0 ? void 0 : I(e, {
                         keyword: ""
@@ -2381,13 +2386,13 @@
             var Xe = (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))) {
-                    ve(false);
-                    Pe.current = null;
+                    be(false);
+                    Ee.current = null;
                     A === null || A === void 0 ? void 0 : A();
                 }
                 if (n === "escapeKey") {
                     var t;
-                    (t = je.current) === null || t === void 0 ? void 0 : t.focus();
+                    (t = Pe.current) === null || t === void 0 ? void 0 : t.focus();
                 }
             }), [ Q, A ]);
             var Ge = (0, e.useCallback)((function(e) {
@@ -2395,12 +2400,12 @@
                 Fe(b, e);
             }), [ b ]);
             var Je = (0, e.useCallback)((function(e) {
-                je.current = e;
+                Pe.current = e;
                 Fe(O, e);
             }), [ O ]);
             var Qe = (0, e.useCallback)((function(e) {
-                if (Pe.current !== U) {
-                    Ae(e);
+                if (Ee.current !== U) {
+                    (0, se.scrollIntoViewIfNeeded)(e);
                 }
             }), [ U ]);
             var Ye = (0, e.useCallback)((function(e) {
@@ -2418,7 +2423,7 @@
                             icon: l,
                             key: s.toString(),
                             "data-test": "selected-option",
-                            onRequestRemove: He,
+                            onRequestRemove: Ke,
                             role: "option",
                             value: s,
                             appearance: i,
@@ -2432,12 +2437,12 @@
                         disabled: v,
                         key: (0, ce.createGUID)(),
                         "data-test": "selected-option",
-                        onRequestRemove: He,
+                        onRequestRemove: Ke,
                         role: "option",
                         value: r
                     }, r);
                 }));
-            }), [ v, He ]);
+            }), [ v, Ke ]);
             var Ze = function e(r) {
                 return r.map((function(e) {
                     var r = e;
@@ -2456,49 +2461,49 @@
                 }));
             };
             // Map Options to selected values
-                        if (Ce && Ce.length) {
-                e.Children.toArray(l).filter(e.isValidElement).filter((function(e) {
-                    return e.type === E;
+                        if (ke && ke.length) {
+                e.Children.toArray(a).filter(e.isValidElement).filter((function(e) {
+                    return e.type === M;
                 })).forEach((function(e) {
-                    if (e.type === E) {
-                        var n = Ce.indexOf(e.props.value);
+                    if (e.type === M) {
+                        var n = ke.indexOf(e.props.value);
                         if (n !== -1) {
-                            ke[n] = e;
+                            xe[n] = e;
                         }
                     }
                 }));
             }
             // Filter the items
                         var en = (0, ue.stringToKeywords)(re);
-            var nn = a ? e.Children.toArray(l) : e.Children.toArray(l).filter((function(e) {
-                if (Tn()(e, [ "props", "label" ], false)) {
+            var nn = i ? e.Children.toArray(a) : e.Children.toArray(a).filter((function(e) {
+                if (Nn()(e, [ "props", "label" ], false)) {
                     return (0, ue.testPhrase)(e.props.label, en);
                 }
                 return true;
  // Keep all headers and non-interactive options
                         }));
-            Ee.current = 0;
+            Re.current = 0;
             Me.current = undefined;
             var rn = e.Children.map(nn, (function(n, r) {
                 var t = n.props;
-                if (!t || !i()(t, "value")) {
+                if (!t || !l()(t, "value")) {
                     // ignore Headings and Dividers
                     return n;
                 }
                 var o = n;
-                var l = o.props, u = l.children, c = l.label, s = l.matchRanges, d = l.value;
+                var a = o.props, u = a.children, c = a.label, s = a.matchRanges, d = a.value;
  // find out if the search string exactly matches a value
                                 if (d === re) {
-                    xe = true;
+                    je = true;
                 }
                 // remove items that are already selected
-                                var f = Ce.indexOf(d);
+                                var f = ke.indexOf(d);
                 if (f >= 0) {
                     return null;
                 }
                 // highlight matched text
-                                var p = u === undefined || Nn()(u);
-                var v = p && !a && !s && en && (0, ue.keywordLocations)(c, en);
+                                var p = u === undefined || Vn()(u);
+                var v = p && !i && !s && en && (0, ue.keywordLocations)(c, en);
                 // clone item
                                 var b =  (0, e.cloneElement)(o, {
                     // eslint-disable-next-line react/no-array-index-key
@@ -2511,8 +2516,8 @@
                 return e !== null;
             })) || [];
             // Add the option to add the new value
-                        if (t && !xe && re) {
-                rn.unshift( n().createElement(E, {
+                        if (t && !je && re) {
+                rn.unshift( n().createElement(M, {
                     label: "".concat(re),
                     description: (0, d._)("(New value)"),
                     descriptionPosition: "right",
@@ -2524,23 +2529,23 @@
             // highlight the selected Item
                         var tn = e.Children.map(rn, (function(n) {
                 var r = n.props;
-                if (!r || !i()(r, "value")) {
+                if (!r || !l()(r, "value")) {
                     // ignore Headings and Dividers
                     return n;
                 }
                 var t = n;
-                var o = t.props, l = o.disabled, a = o.value;
-                var u = Ee.current === U;
-                Ee.current += 1;
+                var o = t.props, a = o.disabled, i = o.value;
+                var u = Re.current === U;
+                Re.current += 1;
                 if (!u) {
                     return t;
                 }
-                if (!l) {
-                    Me.current = a;
+                if (!a) {
+                    Me.current = i;
                 }
                 var c =  (0, e.cloneElement)(t, {
                     active: u,
-                    id: Te,
+                    id: Ne,
                     elementRef: function e(n) {
                         Qe(n);
                         Fe(t.props.elementRef, n);
@@ -2560,9 +2565,9 @@
                     focusMode: "never",
                     placement: a !== null && a !== void 0 ? a : undefined,
                     isLoading: S,
-                    onScrollBottom: T ? _e : undefined,
-                    noOptionsMessage: M,
-                    footerMessage: g,
+                    onScrollBottom: N ? _e : undefined,
+                    noOptionsMessage: E,
+                    footerMessage: y,
                     animateLoading: o,
                     loadingMessage: C,
                     onScroll: B,
@@ -2570,29 +2575,29 @@
                 }, tn);
             };
             var ln = wr("".concat(re.length * .8, "em"));
-            var an = gr(gr({}, zn()(H, (function(e, n) {
+            var an = yr(yr({}, zn()(K, (function(e, n) {
                 return n === "role" || n.indexOf("aria-") === 0;
             }))), {}, {
                 "aria-describedby": p,
                 "aria-labelledby": w,
                 "aria-invalid": m || undefined
             });
-            var un = gr({}, zn()(H, (function(e, n) {
+            var un = yr({}, zn()(K, (function(e, n) {
                 return n === "aria-label" || n === "aria-describedby";
             })));
             
             return n().createElement(n().Fragment, null,  n().createElement(Yn, tr({
                 key: "control",
-                "data-test-values": JSON.stringify(Ce),
+                "data-test-values": JSON.stringify(ke),
                 "data-test-disabled": v ? "disabled" : undefined,
-                inline: y,
+                inline: g,
                 $hasFocus: ie
-            }, Hn().apply(void 0, [ H ].concat(or(Dn()(an)))), {
-                onClick: v ? undefined : Ve,
+            }, Kn().apply(void 0, [ K ].concat(or(Dn()(an)))), {
+                onClick: v ? undefined : qe,
                 $disabled: v,
                 $error: m,
                 "data-test-popover-id": Le,
-                $popoverOpen: pe,
+                $popoverOpen: ve,
                 flex: true,
                 elementRef: Ge,
                 role: "group",
@@ -2602,13 +2607,13 @@
                 role: "listbox",
                 "aria-invalid": m,
                 "aria-multiselectable": "true"
-            }, Ye(ke)), !v &&  n().createElement(er, tr({
+            }, Ye(xe)), !v &&  n().createElement(er, tr({
                 role: "combobox",
                 "data-test": "textbox",
                 id: h,
                 ref: Je,
                 onBlur: Ue,
-                onFocus: Ke,
+                onFocus: He,
                 onChange: $e,
                 onKeyDown: ze,
                 value: re,
@@ -2617,44 +2622,44 @@
                 autoCorrect: "off",
                 spellCheck: false,
                 style: ln,
-                placeholder: Ce.length ? "" : V,
+                placeholder: ke.length ? "" : q,
                 required: D,
-                "aria-activedescendant": pe && Ee.current > 0 ? Te : undefined,
+                "aria-activedescendant": ve && Re.current > 0 ? Ne : undefined,
                 "aria-autocomplete": "list",
-                "aria-controls": pe ? Le : undefined,
-                "aria-owns": pe ? Le : undefined,
-                "aria-expanded": pe,
+                "aria-controls": ve ? Le : undefined,
+                "aria-owns": ve ? Le : undefined,
+                "aria-expanded": ve,
                 "aria-haspopup": true
             }, an)),  n().createElement(Wn(), {
-                open: pe && !!Q,
+                open: ve && !!Q,
                 autoCloseWhenOffScreen: true,
                 anchor: Q,
                 onRequestClose: Xe,
                 canCoverAnchor: false,
                 defaultPlacement: c,
-                repositionMode: q,
+                repositionMode: T,
                 id: Le
-            }, on)),  n().createElement(le(), {
+            }, on)),  n().createElement(te(), {
                 role: "status",
                 "aria-relevant": "text"
-            }, Se),  n().createElement(le(), {
+            }, we),  n().createElement(te(), {
                 role: "alert",
                 "aria-relevant": "additions"
-            }, Ze(ke)));
+            }, Ze(xe)));
         }
         Pr.propTypes = Sr;
-        Pr.Option = E;
+        Pr.Option = M;
         Pr.Divider = u.Divider;
         Pr.Heading = u.Heading;
-        /* harmony default export */        const Mr = Pr;
+        /* harmony default export */        const Er = Pr;
         // CONCATENATED MODULE: ./src/Multiselect/Multiselect.tsx
-        function Er(e) {
+        function Mr(e) {
             "@babel/helpers - typeof";
-            return Er = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+            return Mr = "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;
-            }, Er(e);
+            }, Mr(e);
         }
         function Rr() {
             return Rr = Object.assign ? Object.assign.bind() : function(e) {
@@ -2689,30 +2694,30 @@
             return e;
         }
         function Br(e, n, r) {
-            return (n = Tr(n)) in e ? Object.defineProperty(e, n, {
+            return (n = Nr(n)) in e ? Object.defineProperty(e, n, {
                 value: r,
                 enumerable: !0,
                 configurable: !0,
                 writable: !0
             }) : e[n] = r, e;
         }
-        function Tr(e) {
+        function Nr(e) {
             var n = Lr(e, "string");
-            return "symbol" == Er(n) ? n : n + "";
+            return "symbol" == Mr(n) ? n : n + "";
         }
         function Lr(e, n) {
-            if ("object" != Er(e) || !e) return e;
+            if ("object" != Mr(e) || !e) return e;
             var r = e[Symbol.toPrimitive];
             if (void 0 !== r) {
                 var t = r.call(e, n || "default");
-                if ("object" != Er(t)) return t;
+                if ("object" != Mr(t)) return t;
                 throw new TypeError("@@toPrimitive must return a primitive value.");
             }
             return ("string" === n ? String : Number)(e);
         }
-        function Nr(e, n) {
+        function Vr(e, n) {
             if (null == e) return {};
-            var r, t, o = Vr(e, n);
+            var r, t, o = qr(e, n);
             if (Object.getOwnPropertySymbols) {
                 var l = Object.getOwnPropertySymbols(e);
                 for (t = 0; t < l.length; t++) {
@@ -2721,7 +2726,7 @@
             }
             return o;
         }
-        function Vr(e, n) {
+        function qr(e, n) {
             if (null == e) return {};
             var r = {};
             for (var t in e) {
@@ -2735,47 +2740,47 @@
         /** @public */
         /** @public */
         /** @public */        var Dr = {
-            allowNewValues: l().bool,
-            animateLoading: l().bool,
-            children: l().node,
-            compact: l().bool,
-            controlledFilter: l().bool,
-            defaultPlacement: l().oneOf([ "above", "below", "vertical" ]),
-            defaultValues: l().array,
-            describedBy: l().string,
-            disabled: l().bool,
-            elementRef: l().oneOfType([ l().func, l().object ]),
-            error: l().bool,
-            filter: l().oneOf([ false, true, "controlled" ]),
-            footerMessage: l().node,
-            inline: l().bool,
-            inputId: l().string,
-            inputRef: l().oneOfType([ l().func, l().object ]),
-            isLoadingOptions: l().bool,
-            labelledBy: l().string,
-            loadingMessage: l().node,
-            menuStyle: l().object,
-            name: l().string,
-            noOptionsMessage: l().node,
-            onChange: l().func,
-            onClose: l().func,
-            onFilterChange: l().func,
-            onOpen: l().func,
-            onScroll: l().func,
-            onScrollBottom: l().func,
-            placeholder: l().string,
-            repositionMode: l().oneOf([ "none", "flip" ]),
-            selectAllAppearance: l().oneOf([ "buttongroup", "checkbox" ]),
-            showSelectedValuesFirst: l().oneOf([ "nextOpen", "immediately", "never" ]),
-            tabConfirmsNewValue: l().bool,
-            values: l().array,
+            allowNewValues: i().bool,
+            animateLoading: i().bool,
+            children: i().node,
+            compact: i().bool,
+            controlledFilter: i().bool,
+            defaultPlacement: i().oneOf([ "above", "below", "vertical" ]),
+            defaultValues: i().array,
+            describedBy: i().string,
+            disabled: i().bool,
+            elementRef: i().oneOfType([ i().func, i().object ]),
+            error: i().bool,
+            filter: i().oneOf([ false, true, "controlled" ]),
+            footerMessage: i().node,
+            inline: i().bool,
+            inputId: i().string,
+            inputRef: i().oneOfType([ i().func, i().object ]),
+            isLoadingOptions: i().bool,
+            labelledBy: i().string,
+            loadingMessage: i().node,
+            menuStyle: i().object,
+            name: i().string,
+            noOptionsMessage: i().node,
+            onChange: i().func,
+            onClose: i().func,
+            onFilterChange: i().func,
+            onOpen: i().func,
+            onScroll: i().func,
+            onScrollBottom: i().func,
+            placeholder: i().string,
+            repositionMode: i().oneOf([ "none", "flip" ]),
+            selectAllAppearance: i().oneOf([ "buttongroup", "checkbox" ]),
+            showSelectedValuesFirst: i().oneOf([ "nextOpen", "immediately", "never" ]),
+            tabConfirmsNewValue: i().bool,
+            values: i().array,
             /** @private */
-            virtualization: l().number
+            virtualization: i().number
         };
-        var qr = (0, d._)("No matches");
+        var Tr = (0, d._)("No matches");
         var Fr = (0, d._)("Select...");
         function _r(r) {
-            var t = r.allowNewValues, o = r.animateLoading, l = r.compact, a = r.children, i = r.controlledFilter, u = r.defaultPlacement, c = u === void 0 ? "vertical" : u, d = r.defaultValues, f = r.describedBy, p = r.disabled, v = r.elementRef, b = r.error, m = r.filter, g = r.footerMessage, y = 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 ? qr : j, M = r.onChange, E = r.onClose, R = r.onFilterChange, A = r.onOpen, I = r.onScroll, B = r.onScrollBottom, T = r.placeholder, L = T === void 0 ? Fr : T, N = r.repositionMode, V = N === void 0 ? "flip" : N, D = r.selectAllAppearance, q = r.showSelectedValuesFirst, F = r.tabConfirmsNewValue, _ = r.values, H = r.virtualization, K = Nr(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, l = r.compact, a = r.children, i = r.controlledFilter, u = r.defaultPlacement, c = u === void 0 ? "vertical" : u, d = r.defaultValues, f = 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 ? Tr : j, E = r.onChange, M = r.onClose, R = r.onFilterChange, A = r.onOpen, I = r.onScroll, B = r.onScrollBottom, N = r.placeholder, L = N === void 0 ? Fr : N, V = r.repositionMode, q = V === void 0 ? "flip" : V, D = r.selectAllAppearance, T = r.showSelectedValuesFirst, F = r.tabConfirmsNewValue, _ = r.values, K = r.virtualization, H = Vr(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" ]);
             // @docs-props-type MultiselectPropsBase
                         var z = s()({
                 componentName: "Multiselect",
@@ -2793,7 +2798,7 @@
                 }
             }), [ l, $ ]);
             // Compact uses Button, which defaults `inline` to true, explicitly pass a boolean to prevent the underlying Button from applying its default.
-                        var W = !!y;
+                        var W = !!g;
             var U = Ir({
                 allowNewValues: t,
                 animateLoading: o,
@@ -2804,7 +2809,7 @@
                 disabled: p,
                 elementRef: v,
                 error: b,
-                footerMessage: g,
+                footerMessage: y,
                 inline: W,
                 inputId: h,
                 inputRef: O,
@@ -2814,20 +2819,19 @@
                 menuStyle: k,
                 name: x,
                 noOptionsMessage: P,
-                onClose: E,
-                onChange: M,
+                onClose: M,
+                onChange: E,
                 onFilterChange: R,
                 onOpen: A,
                 onScroll: I,
                 onScrollBottom: B,
                 placeholder: L,
-                repositionMode: V,
-                showSelectedValuesFirst: q,
+                repositionMode: q,
+                showSelectedValuesFirst: T,
                 tabConfirmsNewValue: F,
-                virtualization: H
-            }, K);
-            // Memoized what ends up setting defaultValues otherwise useControlled in SelectBase (in Compact/Normal components) can trigger "default props changed after render" warning even though nothing changed on subsequent renders
-                        var X = (0, e.useMemo)((function() {
+                virtualization: K
+            }, H);
+            var X = (0, e.useMemo)((function() {
                 return {
                     defaultValues: d
                 };
@@ -2843,8 +2847,8 @@
             var Q = {
                 filter: m,
                 selectAllAppearance: D,
-                showSelectedValuesFirst: q,
-                virtualization: H
+                showSelectedValuesFirst: T,
+                virtualization: K
             };
             if (l) {
                 
@@ -2853,17 +2857,17 @@
                 }, J, Q, U));
             }
             
-            return n().createElement(Mr, Rr({
+            return n().createElement(Er, Rr({
                 "data-test": "multiselect"
             }, J, U));
         }
         // TODO: SUI-3402, this can be removed when ControlGroup no longer needs to inspect componentType
                 _r.componentType = "Multiselect";
-        _r.Option = E;
+        _r.Option = M;
         _r.Heading = u.Heading;
         _r.Divider = u.Divider;
         _r.propTypes = Dr;
-        /* harmony default export */        const Hr = _r;
+        /* harmony default export */        const Kr = _r;
     }) // CONCATENATED MODULE: ./src/Multiselect/index.ts
     ();
     module.exports = t;