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

package/Multiselect.js

@@ -136,7 +136,7 @@
                 r.d(t, {
             Divider: () => /* reexport */ u.Divider,
             Heading: () => /* reexport */ u.Heading,
-            Option: () => /* reexport */ E,
+            Option: () => /* reexport */ M,
             default: () => /* reexport */ Hr
         });
         // EXTERNAL MODULE: external "react"
@@ -370,7 +370,7 @@
         };
         /**
  * An option within a `Multiselect`.
- */        function M(e) {
+ */        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, g = 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.
@@ -393,8 +393,8 @@
                 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);
@@ -537,10 +537,10 @@
             componentId: "sc-16cj7sk-7"
         })([ "border-color:", ";" ], he.variables.borderColor);
         // EXTERNAL MODULE: ./src/useControlled/index.ts + 1 modules
-                var Me = r(2907);
+                var Ee = r(2907);
         // CONCATENATED MODULE: ./src/utils/fuzzyMatch.ts
         // A utility for matching keyboard characters to list values
-        var Ee = function e(n, r) {
+        var Me = function e(n, r) {
             return n ? n.label.charAt(r).toLowerCase() : "";
         };
         var Re = function e(n, r) {
@@ -550,7 +550,7 @@
             var t = null;
             var o = false;
             var l = n.filter((function(e) {
-                var n = Ee(e, r.index);
+                var n = Me(e, r.index);
                 if (n === r.value) {
                     o = true;
                     return true;
@@ -558,7 +558,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 = Me(t, r.index);
                     if (!l) {
                         t = e;
                     } else if (n > r.value) {
@@ -1021,8 +1021,8 @@
         };
         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 E;
+            var M;
             var R = [];
             // Generate buttonLabels
                         var A = e.Children.toArray(i);
@@ -1037,7 +1037,7 @@
                     R.push(u);
                     // if not in multiple mode, add the icon
                                         if (!y && c.length === 1) {
-                        M = i;
+                        E = i;
                     }
                 } else if (y) {
                     // only add values that don't match an option in "multiple" mode to preserve old behaviour
@@ -1050,29 +1050,29 @@
                 }
                 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({
                     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 = yn({
                     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 || !y && 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 L = rn({
@@ -1108,7 +1108,7 @@
                     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(Se, null, E), M || O,  n().createElement(we, null,  n().createElement(U(), null)));
             }
             // Using Button's secondary appearance as Select's default appearance.
                         var D = l === "default" ? "secondary" : l;
@@ -1116,9 +1116,9 @@
             return n().createElement(Oe, $e({}, L, {
                 $multiple: y,
                 appearance: D,
-                label: E,
+                label: M,
                 error: v,
-                icon: M,
+                icon: E,
                 inline: b,
                 isMenu: true,
                 onClick: h
@@ -1127,9 +1127,9 @@
             }, "(", 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, 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, E = r.labelText, M = 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" ]);
             // @docs-props-type SelectBasePropsBase
-                        var he = (0, Me["default"])({
+                        var he = (0, Ee["default"])({
                 componentName: "SelectBase",
                 /* eslint-disable-next-line prefer-rest-params */
                 componentProps: arguments[0],
@@ -1144,7 +1144,7 @@
                     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 xe = (0, e.useState)(0), je = We(xe, 2), Pe = je[0], Me = 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];
@@ -1167,7 +1167,7 @@
             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 ]);
@@ -1201,13 +1201,13 @@
                         kn.current.focus();
                     } else {
                         var e;
-                        Ee((e = xn.current) !== null && e !== void 0 ? e : 0);
+                        Me((e = xn.current) !== null && e !== void 0 ? e : 0);
                     }
                 }
             }), [ U, qe, Qe, Te, O ]);
             var Tn = (0, e.useCallback)((function() {
                 He(false);
-                Ee(0);
+                Me(0);
                 yn.current = null;
                 W === null || W === void 0 ? void 0 : W();
             }), [ W ]);
@@ -1328,7 +1328,7 @@
                 }
                 if (r === "ArrowDown") {
                     n.preventDefault();
-                    Ee(Math.min(Pe + 1, le === "checkbox" ? wn.current : wn.current - 1));
+                    Me(Math.min(Pe + 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);
@@ -1339,7 +1339,7 @@
                 }
                 if (r === "ArrowUp") {
                     n.preventDefault();
-                    Ee(Math.max(Pe - 1, 0));
+                    Me(Math.max(Pe - 1, 0));
                 }
                 if (r === "Enter" && On.current && qe) {
                     if (On.current === "selectAll") {
@@ -1410,7 +1410,7 @@
                 var r = n.value;
                 Le(r);
                 He(true);
-                Ee(0);
+                Me(0);
                 H === null || H === void 0 ? void 0 : H(e, {
                     keyword: r
                 });
@@ -1671,15 +1671,15 @@
                 return c;
             }), [ Pe, Ce, o, s, f, Gn, O, Te, Wn, Dn, _n, Hn, Un, Vn, j, I, Yn, _, le, Ue, be ]);
             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,
@@ -1705,25 +1705,27 @@
                     }),
                     focusMode: O ? "never" : undefined,
                     isLoading: j,
+                    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: ke,
                     onScrollBottom: _ ? qn : 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) {
                     
                     return n().createElement(ee.VirtualizedResultsMenu, $e({
                         virtualization: ve
-                    }, c), Zn);
+                    }, s), Zn);
                 }
                 
-                return n().createElement(ne(), c, Zn);
+                return n().createElement(ne(), s, Zn);
             };
             var nr = (0, e.useMemo)((function() {
                 
@@ -1737,7 +1739,7 @@
                     elementRef: Xn,
                     error: h,
                     inline: w,
-                    labelText: M,
+                    labelText: E,
                     labelledBy: P,
                     multiple: I,
                     onClick: z,
@@ -1749,7 +1751,7 @@
                     toggle: be,
                     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 ]);
+            }), [ i, c, An, I, m, g, h, Xn, w, E, P, z, J, Y, Z, X, se, be, ge, ye, f ]);
             
             return n().createElement(Q(), {
                 closeReasons: sn,
@@ -1847,9 +1849,9 @@
         // 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, 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, E = r.onChange, M = r.onClose, R = r.onFilterChange, A = r.onOpen, I = r.onScroll, B = r.onScrollBottom, T = r.placeholder, L = T === void 0 ? En : 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" ]);
             // @docs-props-type CompactPropsBase
                         if (false) {}
             var z = true;
@@ -1900,8 +1902,8 @@
                 menuStyle: k,
                 name: x,
                 noOptionsMessage: P,
-                onChange: M,
-                onClose: E,
+                onChange: E,
+                onClose: M,
                 onFilterChange: R,
                 onOpen: A,
                 onScroll: I,
@@ -1916,11 +1918,11 @@
                 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);
@@ -2184,7 +2186,7 @@
         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, 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, E = 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" ]);
             // @docs-props-type NormalPropsBase
                         var K = s()({
                 componentName: "Multiselect",
@@ -2207,8 +2209,8 @@
             var xe = Ce.indexOf(re) >= 0;
             var je = (0, e.useRef)(null);
             var Pe = (0, e.useRef)(null);
-            var Me = (0, e.useRef)(undefined);
-            var Ee = (0, e.useRef)(0);
+            var Ee = (0, e.useRef)(undefined);
+            var Me = (0, e.useRef)(0);
             var Re = (0, e.useState)((function() {
                 return {
                     activeItemId: (0, ce.createDOMID)("active-item"),
@@ -2221,6 +2223,10 @@
                     X(0);
                 }
             }), [ _, K ]);
+            // 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() {
+                Pe.current = U;
+            }), [ U ]);
             var Ne = (0, e.useCallback)((function(e) {
                 var n = e.resetFilterKeyword;
                 if (!pe) {
@@ -2271,7 +2277,7 @@
             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"));
+                    we("".concat(Me.current, " options, loading more options"));
                 }
             }), [ pe, S, T ]);
             var He = (0, e.useCallback)((function(e, n) {
@@ -2294,10 +2300,10 @@
                 var r;
                 var t = n.key;
                 if (t === "Tab" && pe) {
-                    if (F && Me.current !== undefined && Ee.current <= 1) {
+                    if (F && Ee.current !== undefined && Me.current <= 1) {
                         var o;
                         n.preventDefault();
-                        De(n, Me.current);
+                        De(n, Ee.current);
                         (o = je.current) === null || o === void 0 ? void 0 : o.focus();
                     } else {
                         ve(false);
@@ -2308,7 +2314,7 @@
                 }
                 if (t === "End" && pe) {
                     n.preventDefault();
-                    X(Ee.current - 1);
+                    X(Me.current - 1);
                 }
                 if (t === "Home" && pe) {
                     n.preventDefault();
@@ -2318,7 +2324,7 @@
                     n.preventDefault();
                     if (pe) {
                         X((function(e) {
-                            return Math.min(e + 1, Ee.current - 1);
+                            return Math.min(e + 1, Me.current - 1);
                         }));
                     } else {
                         X(0);
@@ -2342,8 +2348,8 @@
                         ve(true);
                     }
                 }
-                if (t === "Enter" && Me.current !== undefined && pe) {
-                    De(n, Me.current);
+                if (t === "Enter" && Ee.current !== undefined && pe) {
+                    De(n, Ee.current);
                 }
                 if (t === "Backspace" && ((r = je.current) === null || r === void 0 ? void 0 : r.value) === "" && Ce.length) {
                     qe(n, Fn()(Ce));
@@ -2458,9 +2464,9 @@
             // Map Options to selected values
                         if (Ce && Ce.length) {
                 e.Children.toArray(l).filter(e.isValidElement).filter((function(e) {
-                    return e.type === E;
+                    return e.type === M;
                 })).forEach((function(e) {
-                    if (e.type === E) {
+                    if (e.type === M) {
                         var n = Ce.indexOf(e.props.value);
                         if (n !== -1) {
                             ke[n] = e;
@@ -2477,8 +2483,8 @@
                 return true;
  // Keep all headers and non-interactive options
                         }));
-            Ee.current = 0;
-            Me.current = undefined;
+            Me.current = 0;
+            Ee.current = undefined;
             var rn = e.Children.map(nn, (function(n, r) {
                 var t = n.props;
                 if (!t || !i()(t, "value")) {
@@ -2512,7 +2518,7 @@
             })) || [];
             // Add the option to add the new value
                         if (t && !xe && re) {
-                rn.unshift( n().createElement(E, {
+                rn.unshift( n().createElement(M, {
                     label: "".concat(re),
                     description: (0, d._)("(New value)"),
                     descriptionPosition: "right",
@@ -2530,13 +2536,13 @@
                 }
                 var t = n;
                 var o = t.props, l = o.disabled, a = o.value;
-                var u = Ee.current === U;
-                Ee.current += 1;
+                var u = Me.current === U;
+                Me.current += 1;
                 if (!u) {
                     return t;
                 }
                 if (!l) {
-                    Me.current = a;
+                    Ee.current = a;
                 }
                 var c =  (0, e.cloneElement)(t, {
                     active: u,
@@ -2561,7 +2567,7 @@
                     placement: a !== null && a !== void 0 ? a : undefined,
                     isLoading: S,
                     onScrollBottom: T ? _e : undefined,
-                    noOptionsMessage: M,
+                    noOptionsMessage: E,
                     footerMessage: g,
                     animateLoading: o,
                     loadingMessage: C,
@@ -2619,7 +2625,7 @@
                 style: ln,
                 placeholder: Ce.length ? "" : V,
                 required: D,
-                "aria-activedescendant": pe && Ee.current > 0 ? Te : undefined,
+                "aria-activedescendant": pe && Me.current > 0 ? Te : undefined,
                 "aria-autocomplete": "list",
                 "aria-controls": pe ? Le : undefined,
                 "aria-owns": pe ? Le : undefined,
@@ -2643,18 +2649,18 @@
             }, Ze(ke)));
         }
         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) {
@@ -2698,14 +2704,14 @@
         }
         function Tr(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);
@@ -2775,7 +2781,7 @@
         var qr = (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, 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, E = r.onChange, M = 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" ]);
             // @docs-props-type MultiselectPropsBase
                         var z = s()({
                 componentName: "Multiselect",
@@ -2814,8 +2820,8 @@
                 menuStyle: k,
                 name: x,
                 noOptionsMessage: P,
-                onClose: E,
-                onChange: M,
+                onClose: M,
+                onChange: E,
                 onFilterChange: R,
                 onOpen: A,
                 onScroll: I,
@@ -2853,13 +2859,13 @@
                 }, 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;