@splunk/react-ui 4.32.0 → 4.34.0

package/ResultsMenu.js

@@ -61,8 +61,8 @@
         e.r(t);
     // EXPORTS
         e.d(t, {
-        VirtualizedResultsMenu: () => /* reexport */ Le,
-        default: () => /* reexport */ $
+        VirtualizedResultsMenu: () => /* reexport */ Ae,
+        default: () => /* reexport */ V
     });
     // CONCATENATED MODULE: external "react"
     const r = require("react");
@@ -82,27 +82,27 @@
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
     const d = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "@splunk/ui-utils/userAgent"
-    const p = require("@splunk/ui-utils/userAgent");
+    const v = require("@splunk/ui-utils/userAgent");
     // CONCATENATED MODULE: external "@splunk/react-ui/Menu"
-    const v = require("@splunk/react-ui/Menu");
-    var m =  e.n(v);
+    const p = require("@splunk/react-ui/Menu");
+    var m =  e.n(p);
     // CONCATENATED MODULE: external "styled-components"
-    const y = require("styled-components");
-    var h =  e.n(y);
+    const h = require("styled-components");
+    var b =  e.n(h);
     // CONCATENATED MODULE: external "@splunk/react-ui/WaitSpinner"
-    const b = require("@splunk/react-ui/WaitSpinner");
-    var g =  e.n(b);
+    const y = require("@splunk/react-ui/WaitSpinner");
+    var g =  e.n(y);
     // CONCATENATED MODULE: external "@splunk/themes"
     const S = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/ResultsMenu/ResultsMenuStyles.ts
-    var O = h().div.withConfig({
+    var E = b().div.withConfig({
         displayName: "ResultsMenuStyles__Styled",
         componentId: "avbhl8-0"
     })([ "", ";flex-direction:column;max-height:calc(100vh - 20px);", "" ], S.mixins.reset("flex"), (0, 
     S.pick)({
-        prisma: (0, y.css)([ "border-radius:", ";background-color:", ";" ], S.variables.borderRadius, S.variables.backgroundColorPopup)
+        prisma: (0, h.css)([ "border-radius:", ";background-color:", ";" ], S.variables.borderRadius, S.variables.backgroundColorPopup)
     }));
-    var E = h().div.withConfig({
+    var O = b().div.withConfig({
         displayName: "ResultsMenuStyles__StyledFooter",
         componentId: "avbhl8-1"
     })([ "padding:", ";color:", ";", "" ], (0, S.pick)({
@@ -117,14 +117,14 @@
     }), (function(e) {
         var t = e.$placement;
         return t === "above" ? (0, S.pick)({
-            prisma: (0, y.css)([ "border-bottom:1px solid ", ";" ], S.variables.neutral200),
-            enterprise: (0, y.css)([ "border-bottom:", ";" ], S.variables.border)
+            prisma: (0, h.css)([ "border-bottom:1px solid ", ";" ], S.variables.neutral200),
+            enterprise: (0, h.css)([ "border-bottom:", ";" ], S.variables.border)
         }) : (0, S.pick)({
-            prisma: (0, y.css)([ "border-top:1px solid ", ";" ], S.variables.neutral200),
-            enterprise: (0, y.css)([ "border-top:", ";" ], S.variables.border)
+            prisma: (0, h.css)([ "border-top:1px solid ", ";" ], S.variables.neutral200),
+            enterprise: (0, h.css)([ "border-top:", ";" ], S.variables.border)
         });
     }));
-    var M = h().li.withConfig({
+    var M = b().li.withConfig({
         displayName: "ResultsMenuStyles__StyledLoading",
         componentId: "avbhl8-2"
     })([ "", ";padding:", ";gap:", ";" ], S.mixins.reset("flex"), (0, S.pick)({
@@ -134,15 +134,18 @@
         },
         enterprise: "6px 10px"
     }), S.variables.spacingXSmall);
-    var w = h()(m()).withConfig({
+    var w = b()(m()).withConfig({
         displayName: "ResultsMenuStyles__StyledMenu",
         componentId: "avbhl8-3"
-    })([ "overflow:auto;flex-direction:column;" ]);
-    var P = h()(g()).withConfig({
+    })([ "overflow:auto;flex-direction:column;", "" ], (function(e) {
+        var t = e.$removeBottomRadius;
+        return t && (0, h.css)([ "border-bottom-left-radius:0;border-bottom-right-radius:0;" ]);
+    }));
+    var x = b()(g()).withConfig({
         displayName: "ResultsMenuStyles__StyledWait",
         componentId: "avbhl8-4"
     })([ "flex:0 0 auto;" ]);
-    var x = h().div.withConfig({
+    var k = b().div.withConfig({
         displayName: "ResultsMenuStyles__StyledLoadingMessage",
         componentId: "avbhl8-5"
     })([ "flex:1 0 0;color:", ";" ], (0, S.pick)({
@@ -169,21 +172,21 @@
         }
     }
     // CONCATENATED MODULE: ./src/ResultsMenu/ResultsMenu.tsx
-    function k(e) {
+    function T(e) {
         "@babel/helpers - typeof";
         if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-            k = function e(t) {
+            T = function e(t) {
                 return typeof t;
             };
         } else {
-            k = function e(t) {
+            T = function e(t) {
                 return t && typeof Symbol === "function" && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
             };
         }
-        return k(e);
+        return T(e);
     }
-    function I() {
-        I = Object.assign || function(e) {
+    function C() {
+        C = Object.assign || function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var r = arguments[t];
                 for (var n in r) {
@@ -194,14 +197,14 @@
             }
             return e;
         };
-        return I.apply(this, arguments);
+        return C.apply(this, arguments);
     }
-    function R(e, t) {
+    function I(e, t) {
         if (!(e instanceof t)) {
             throw new TypeError("Cannot call a class as a function");
         }
     }
-    function T(e, t) {
+    function P(e, t) {
         for (var r = 0; r < t.length; r++) {
             var n = t[r];
             n.enumerable = n.enumerable || false;
@@ -210,9 +213,9 @@
             Object.defineProperty(e, n.key, n);
         }
     }
-    function C(e, t, r) {
-        if (t) T(e.prototype, t);
-        if (r) T(e, r);
+    function R(e, t, r) {
+        if (t) P(e.prototype, t);
+        if (r) P(e, r);
         return e;
     }
     function A(e, t) {
@@ -235,32 +238,32 @@
         };
         return _(e, t);
     }
-    function K(e) {
-        var t = H();
+    function L(e) {
+        var t = F();
         return function r() {
-            var n = q(e), o;
+            var n = H(e), o;
             if (t) {
-                var i = q(this).constructor;
+                var i = H(this).constructor;
                 o = Reflect.construct(n, arguments, i);
             } else {
                 o = n.apply(this, arguments);
             }
-            return L(this, o);
+            return B(this, o);
         };
     }
-    function L(e, t) {
-        if (t && (k(t) === "object" || typeof t === "function")) {
+    function B(e, t) {
+        if (t && (T(t) === "object" || typeof t === "function")) {
             return t;
         }
-        return B(e);
+        return q(e);
     }
-    function B(e) {
+    function q(e) {
         if (e === void 0) {
             throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
         }
         return e;
     }
-    function H() {
+    function F() {
         if (typeof Reflect === "undefined" || !Reflect.construct) return false;
         if (Reflect.construct.sham) return false;
         if (typeof Proxy === "function") return true;
@@ -271,11 +274,11 @@
             return false;
         }
     }
-    function q(e) {
-        q = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
+    function H(e) {
+        H = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
             return t.__proto__ || Object.getPrototypeOf(t);
         };
-        return q(e);
+        return H(e);
     }
     function D(e, t, r) {
         if (t in e) {
@@ -290,7 +293,7 @@
         }
         return e;
     }
-    var F = {
+    var N = {
         animateLoading: i().bool,
         children: i().node,
         /** @private */
@@ -301,65 +304,55 @@
         isLoading: i().bool,
         loadingMessage: i().node,
         noOptionsMessage: i().node,
-        /** @private */
-        onDownKeyPress: i().func,
-        /** @private */
-        onEndKeyPress: i().func,
-        /** @private */
-        onHomeKeyPress: i().func,
         onScroll: i().func,
         onScrollBottom: i().func,
-        /** @private */
-        onUpKeyPress: i().func,
         placement: i().string,
-        menuId: i().string
+        menuId: i().string,
+        disableFocusControl: i().bool
     };
-    var N = {
+    var z = {
         animateLoading: false,
         isLoading: false,
         loadingMessage: (0, d._)("Loading..."),
         noOptionsMessage: (0, d._)("No matches")
     };
-    var U = {
-        role: "listbox"
-    };
-    var z = c()((function(e) {
+    var U = c()((function(e) {
         return {
             height: e
         };
     }));
     // @docs-props-type ResultsMenuPropsBase
-        var W =  function(e) {
+        var $ =  function(e) {
         A(o, e);
-        var t = K(o);
+        var t = L(o);
         function o(e) {
             var n;
-            R(this, o);
+            I(this, o);
             n = t.call(this, e);
-            D(B(n), "scrollBottomOffset", void 0);
-            D(B(n), "itemMinHeight", void 0);
-            D(B(n), "handleMenuMount", (function(e) {
+            D(q(n), "scrollBottomOffset", void 0);
+            D(q(n), "itemMinHeight", void 0);
+            D(q(n), "handleMenuMount", (function(e) {
                 n.setState({
                     menuEl: e
                 });
             }));
-            D(B(n), "handleMount", (function(e) {
+            D(q(n), "handleMount", (function(e) {
                 n.setState({
                     containerEl: e
                 });
                 j(n.props.elementRef, e);
             }));
-            D(B(n), "handleMouseEnter", (function() {
+            D(q(n), "handleMouseEnter", (function() {
                 n.setState({
                     windowTop: document.documentElement.scrollTop
                 });
             }));
-            D(B(n), "handleMouseLeave", (function() {
+            D(q(n), "handleMouseLeave", (function() {
                 n.setState({
                     windowTop: document.documentElement.scrollTop
                 });
             }));
-            D(B(n), "handleScroll", (function(e) {
+            D(q(n), "handleScroll", (function(e) {
                 var t, r;
                 if (n.props.onScrollBottom != null) {
                     if (e.target && n.state.menuEl) {
@@ -372,12 +365,12 @@
                 }
                 (t = (r = n.props).onScroll) === null || t === void 0 ? void 0 : t.call(r, e);
             }));
-            D(B(n), "handleWheelMenu", (function(e) {
+            D(q(n), "handleWheelMenu", (function(e) {
                 // Safety net to ensure window doesn't scroll if menu is scrolled pass the numberOfItemsLoaded at high velocity.
                 e.stopPropagation();
                 document.documentElement.scrollTop = n.state.windowTop;
             }));
-            D(B(n), "handleScrollBottomOnFullMenu", (function() {
+            D(q(n), "handleScrollBottomOnFullMenu", (function() {
                 var e = r.Children.count(n.props.children);
                 var t = n.state.childrenCount;
  // If menu is full length, load more items.
@@ -399,6 +392,12 @@
                     });
                 }
             }));
+            D(q(n), "createMenuContextValue", (function() {
+                return {
+                    role: "listbox",
+                    preventFocus: n.props.controlledExternally
+                };
+            }));
             n.state = {
                 containerEl: null,
                 menuEl: null,
@@ -411,12 +410,12 @@
             n.itemMinHeight = 28;
             return n;
         }
-        C(o, [ {
+        R(o, [ {
             key: "componentDidUpdate",
             value: function e() {
                 var t, r;
                 var n = this.state, o = n.containerEl, i = n.menuEl;
-                if (!p.isIE11 || !o || !i) {
+                if (!v.isIE11 || !o || !i) {
                     return;
                 }
  // If onScrollBottom is defined, determine if it should be triggered.
@@ -445,7 +444,7 @@
         }, {
             key: "renderFooterMessage",
             value: function e() {
-                return this.props.footerMessage && !!r.Children.toArray(this.props.children).length &&  n().createElement(E, {
+                return this.props.footerMessage && !!r.Children.toArray(this.props.children).length &&  n().createElement(O, {
                     $placement: this.props.placement,
                     "data-test": "footer-message",
                     key: "footer"
@@ -454,56 +453,58 @@
         }, {
             key: "render",
             value: function e() {
-                var t = this.props, i = t.animateLoading, u = t.children, l = t.controlledExternally, c = t.childrenStart, s = t.isLoading, d = t.loadingMessage, p = t.noOptionsMessage, y = t.onDownKeyPress, h = t.onEndKeyPress, b = t.onHomeKeyPress, g = t.onScrollBottom, S = t.onUpKeyPress, E = t.placement, j = t.style, k = t.tabIndex, R = t.menuId, T = t["aria-multiselectable"];
-                var C = f()(this.props, a()(o.propTypes));
+                var t = this.props, i = t.animateLoading, u = t.children, l = t.controlledExternally, c = t.childrenStart, s = t.isLoading, d = t.loadingMessage, v = t.noOptionsMessage, h = t.onScrollBottom, b = t.placement, y = t.style, g = t.tabIndex, S = t.menuId, O = t.disableFocusControl, j = t["aria-multiselectable"];
+                var T = f()(this.props, a()(o.propTypes));
                 // Assumption: that you cannot be filtered if you are a result
-                                var A = r.Children.toArray(u).filter(r.isValidElement).some((function(e) {
+                                var I = r.Children.toArray(u).filter(r.isValidElement).some((function(e) {
                     var t = e.type;
-                    return !(t === v.Divider && t.filterFirst || (t === v.Divider || t === v.Heading) && (t.filterLast || t.filterConsecutive));
+                    return !(t === p.Divider && t.filterFirst || (t === p.Divider || t === p.Heading) && (t.filterLast || t.filterConsecutive));
                 }));
-                var _ = this.checkFullHeight();
-                var K = z(this.state.scrollBottomTriggered ? this.state.numberOfItemsLoaded * this.itemMinHeight || 0 : 0);
+                var P = this.checkFullHeight();
+                var R = U(this.state.scrollBottomTriggered ? this.state.numberOfItemsLoaded * this.itemMinHeight || 0 : 0);
                 /* eslint-disable jsx-a11y/aria-role */                
-                return n().createElement(O, I({
+                return n().createElement(E, C({
                     key: "wrapper",
                     ref: this.handleMount,
-                    onWheel: g ? this.handleWheelMenu : undefined,
-                    onMouseEnter: g ? this.handleMouseEnter : undefined,
-                    onMouseLeave: g ? this.handleMouseLeave : undefined
-                }, f()(C, "tabIndex", "aria-multiselectable", "menuId"), {
-                    style: j
-                }), E !== "above" && c, E === "above" && this.renderFooterMessage(),  n().createElement(v.MenuContext.Provider, {
-                    value: U
+                    onWheel: h ? this.handleWheelMenu : undefined,
+                    onMouseEnter: h ? this.handleMouseEnter : undefined,
+                    onMouseLeave: h ? this.handleMouseLeave : undefined
+                }, f()(T, "tabIndex", "aria-multiselectable", "menuId"), {
+                    style: y
+                }), b !== "above" && c, b === "above" && this.renderFooterMessage(),  n().createElement(p.MenuContext.Provider, {
+                    value: this.createMenuContextValue()
                 },  n().createElement(w, {
                     key: "menu",
                     controlledExternally: l,
                     elementRef: this.handleMenuMount,
-                    onDownKeyPress: y,
-                    onEndKeyPress: h,
-                    onHomeKeyPress: b,
                     onScroll: this.handleScroll,
-                    onUpKeyPress: S,
                     stopScrollPropagation: true,
-                    tabIndex: k,
-                    "aria-multiselectable": T,
-                    id: R
-                }, !A && p && !s &&  n().createElement(m().Item, {
+                    tabIndex: g,
+                    "aria-multiselectable": j,
+                    id: S,
+                    disableFocusControl: O,
+                    $removeBottomRadius: !!this.props.footerMessage && b !== "above"
+                }, !I && v && !s &&  n().createElement(m().Item, {
                     "data-test": "no-results-message",
                     disabled: true
-                }, p), u, g && !_ && 
+                }, v), u, h && !P && 
                 
                 // Bottom spacer fills in the space of new items being loaded by using the minimum possible height x menuItems.
                 n().createElement("div", {
                     "data-test": "results-menu-bottom-spacer",
-                    style: K
-                }), s &&  n().createElement(M, null, i &&  n().createElement(P, null),  n().createElement(x, null, d)))), E !== "above" && this.renderFooterMessage(), E === "above" && c);
+                    style: R
+                }), s &&  n().createElement(M, null, i &&  n().createElement(x, null),  n().createElement(k, null, d)))), b !== "above" && this.renderFooterMessage(), b === "above" && c);
             }
         } ]);
         return o;
     }(r.Component);
-    D(W, "propTypes", F);
-    D(W, "defaultProps", N);
-    /* harmony default export */    const $ = W;
+    D($, "propTypes", N);
+    D($, "defaultProps", z);
+    /* harmony default export */    const V = $;
+    // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
+    const W = require("@splunk/ui-utils/keyboard");
+    // CONCATENATED MODULE: external "@splunk/ui-utils/focus"
+    const K = require("@splunk/ui-utils/focus");
     // CONCATENATED MODULE: ./src/ResultsMenu/VirtualizedResultsMenu/groupChildren.ts
     // Cheap(er than processing potentially thousands of array elements) memoization
     var G = {
@@ -523,7 +524,7 @@
  * @param {number} groupSize The size of each group to be created
  * @returns A 2d array where each inner-array is a group of size `groupSize` of children
  * and the order of the `children` received equals the order of the flattened result
- */    var V = function e(t, n) {
+ */    var X = function e(t, n) {
         if (G.children === t && G.groupSize === n) {
             return G.result;
         }
@@ -547,13 +548,13 @@
         return G.result;
     };
     // CONCATENATED MODULE: external "@splunk/ui-utils/id"
-    const X = require("@splunk/ui-utils/id");
+    const J = require("@splunk/ui-utils/id");
     // CONCATENATED MODULE: ./src/utils/getMenuChildNode.tsx
     // TODO(SUI-5919): fix the ref handling in the other components so this isn't needed
     /**
  * @private Get the HTML <anchor> or <button> node for a received derivative of Menu.Item
  */
-    var J = function e(t) {
+    var Q = function e(t) {
         var r, n, o, i;
         if (t.el) {
             return t.el;
@@ -574,28 +575,28 @@
         return null;
     };
     // CONCATENATED MODULE: ./src/ResultsMenu/VirtualizedResultsMenu/VirtualizedItem.ts
-    function Q(e, t) {
-        return re(e) || te(e, t) || Z(e, t) || Y();
+    function Y(e, t) {
+        return ne(e) || re(e, t) || ee(e, t) || Z();
     }
-    function Y() {
+    function Z() {
         throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
-    function Z(e, t) {
+    function ee(e, t) {
         if (!e) return;
-        if (typeof e === "string") return ee(e, t);
+        if (typeof e === "string") return te(e, t);
         var r = Object.prototype.toString.call(e).slice(8, -1);
         if (r === "Object" && e.constructor) r = e.constructor.name;
         if (r === "Map" || r === "Set") return Array.from(e);
-        if (r === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)) return ee(e, t);
+        if (r === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)) return te(e, t);
     }
-    function ee(e, t) {
+    function te(e, t) {
         if (t == null || t > e.length) t = e.length;
         for (var r = 0, n = new Array(t); r < t; r++) {
             n[r] = e[r];
         }
         return n;
     }
-    function te(e, t) {
+    function re(e, t) {
         if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(e))) return;
         var r = [];
         var n = true;
@@ -618,17 +619,17 @@
         }
         return r;
     }
-    function re(e) {
+    function ne(e) {
         if (Array.isArray(e)) return e;
     }
-    var ne = {
+    var oe = {
         children: i().node,
         onMount: i().func.isRequired,
         onUnmount: i().func.isRequired
     };
-    /** @private Used by `VirtualizedResultsMenu` */    var oe =  n().forwardRef((function(e, t) {
+    /** @private Used by `VirtualizedResultsMenu` */    var ie =  n().forwardRef((function(e, t) {
         var n = e.children, o = e.onMount, i = e.onUnmount;
-        var u = (0, r.useState)(), a = Q(u, 2), l = a[0], c = a[1];
+        var u = (0, r.useState)(), a = Y(u, 2), l = a[0], c = a[1];
         (0, r.useEffect)((function() {
             if (l) {
                 o(l);
@@ -652,12 +653,12 @@
                     return;
                 }
                 j(t, r);
-                j(c, J(n));
+                j(c, Q(n));
             }
         });
     }));
-    oe.propTypes = ne;
-    oe.as = "Item";
+    ie.propTypes = oe;
+    ie.as = "Item";
     // CONCATENATED MODULE: ./src/ResultsMenu/VirtualizedResultsMenu/injectVirtualizedItem.tsx
     /**
  * Find the index of an array element which is nearest to targetIndex and is a Menu.Item component
@@ -665,7 +666,7 @@
  * @param {Number} targetIndex The target index. This is the ideal value to return.
  * @returns The index in the array of the nearest `Menu.Item` component to `targetIndex`, or -1 if no element is a `Menu.Item` component
  */
-    var ie = function e(t, r) {
+    var ue = function e(t, r) {
         var n = -1;
         var o = -1;
         t.forEach((function(e, t) {
@@ -673,7 +674,7 @@
             if (n >= 0 && n < i) {
                 return;
             }
-            if (e.type !== v.Divider && e.type !== v.Heading) {
+            if (e.type !== p.Divider && e.type !== p.Heading) {
                 n = i;
                 o = t;
             }
@@ -685,19 +686,19 @@
  * with a VirtualizedItem instance.
  * - If `trackFirstElement` the **FIRST** non-divider/heading item will also be replaced.
  * - If `trackLastElement` the **LAST** non-divider/heading item will also be replaced.
- */    var ue = function e(t, r, o) {
+ */    var ae = function e(t, r, o) {
         var i = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {}, u = i.trackFirstElement, a = i.trackLastElement;
         if (!Array.isArray(t)) {
             return [];
         }
-        var l = ie(t, Math.floor(t.length / 2));
-        var c = u && ie(t, 0);
-        var s = a && ie(t, t.length - 1);
+        var l = ue(t, Math.floor(t.length / 2));
+        var c = u && ue(t, 0);
+        var s = a && ue(t, t.length - 1);
         return t.map((function(e, t) {
             if (t === l || t === c || t === s) {
                 
-                return n().createElement(oe, {
-                    key: (0, X.createGUID)(),
+                return n().createElement(ie, {
+                    key: (0, J.createGUID)(),
                     onMount: r,
                     onUnmount: o
                 }, e);
@@ -705,31 +706,9 @@
             return e;
         }));
     };
-    // CONCATENATED MODULE: ./src/utils/navigateList.ts
-    // A utility for keyboard navigation of lists
-    function ae(e, t, r) {
-        for (var n = 0; n < e.length; n += 1) {
-            var o;
-            var i = (n + r) % e.length;
-            if (((o = e[i].current) === null || o === void 0 ? void 0 : o.props.disabled) !== true) {
-                return e[i];
-            }
-        }
-        return e[t];
-    }
-    function le(e, t, r) {
-        for (var n = e.length; n > 0; n -= 1) {
-            var o;
-            var i = (n + r) % e.length;
-            if (((o = e[i].current) === null || o === void 0 ? void 0 : o.props.disabled) !== true) {
-                return e[i];
-            }
-        }
-        return e[t];
-    }
     // CONCATENATED MODULE: ./src/ResultsMenu/VirtualizedResultsMenu/VirtualizedResultsMenu.tsx
-    function ce() {
-        ce = Object.assign || function(e) {
+    function le() {
+        le = Object.assign || function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var r = arguments[t];
                 for (var n in r) {
@@ -740,27 +719,27 @@
             }
             return e;
         };
-        return ce.apply(this, arguments);
+        return le.apply(this, arguments);
     }
-    function se(e) {
-        return pe(e) || de(e) || ye(e) || fe();
+    function ce(e) {
+        return de(e) || fe(e) || me(e) || se();
     }
-    function fe() {
+    function se() {
         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 de(e) {
+    function fe(e) {
         if (typeof Symbol !== "undefined" && Symbol.iterator in Object(e)) return Array.from(e);
     }
-    function pe(e) {
+    function de(e) {
         if (Array.isArray(e)) return he(e);
     }
     function ve(e, t) {
-        return ge(e) || be(e, t) || ye(e, t) || me();
+        return ye(e) || be(e, t) || me(e, t) || pe();
     }
-    function me() {
+    function pe() {
         throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
-    function ye(e, t) {
+    function me(e, t) {
         if (!e) return;
         if (typeof e === "string") return he(e, t);
         var r = Object.prototype.toString.call(e).slice(8, -1);
@@ -798,12 +777,12 @@
         }
         return r;
     }
-    function ge(e) {
+    function ye(e) {
         if (Array.isArray(e)) return e;
     }
-    function Se(e, t) {
+    function ge(e, t) {
         if (e == null) return {};
-        var r = Oe(e, t);
+        var r = Se(e, t);
         var n, o;
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
@@ -816,7 +795,7 @@
         }
         return r;
     }
-    function Oe(e, t) {
+    function Se(e, t) {
         if (e == null) return {};
         var r = {};
         var n = Object.keys(e);
@@ -839,12 +818,12 @@
         }
         return r;
     }
-    function Me(e) {
+    function Oe(e) {
         for (var t = 1; t < arguments.length; t++) {
             var r = arguments[t] != null ? arguments[t] : {};
             if (t % 2) {
                 Ee(Object(r), true).forEach((function(t) {
-                    we(e, t, r[t]);
+                    Me(e, t, r[t]);
                 }));
             } else if (Object.getOwnPropertyDescriptors) {
                 Object.defineProperties(e, Object.getOwnPropertyDescriptors(r));
@@ -856,7 +835,7 @@
         }
         return e;
     }
-    function we(e, t, r) {
+    function Me(e, t, r) {
         if (t in e) {
             Object.defineProperty(e, t, {
                 value: r,
@@ -869,23 +848,13 @@
         }
         return e;
     }
-    var Pe = Me(Me({}, f()(F, "onDownKeyPress", "onEndKeyPress", "onHomeKeyPress", "onUpKeyPress")), {}, {
+    var we = Oe(Oe({}, f()(N, "onDownKeyPress", "onEndKeyPress", "onHomeKeyPress", "onUpKeyPress")), {}, {
         virtualization: i().number.isRequired
     });
     var xe = {
         virtualization: 0
     };
-    var je = [];
-    var ke = function e(t, r) {
-        var n = r.itemRefs, o = r.focusedItemKey;
-        var i = ae(n, o, o + 1);
-        return [ n.indexOf(i) < o ? o : i, false ];
-    };
-    var Ie = function e(t, r) {
-        var n = r.itemRefs, o = r.focusedItemKey;
-        var i = le(n, o, o - 1);
-        return [ n.indexOf(i) > o ? o : i, false ];
-    };
+    var ke = [];
     /**
  * A wrapper for `ResultsMenu` which virtualizes the `children`. The received `children` array will be split into **"panes"** each with `virtualization` entries
  * and, at any given time, 3 or fewer of these panes will be rendered in the DOM.
@@ -904,8 +873,8 @@
  * @throws in `__DEV__` when `virtualization` is too small as compared to the menu height (`virtualization` must be greater than the number of visible items in the rendered menu)
  * @throws in `__DEV__` when `virtualization` is less than or equal to 1 (`virtualization` must be ≥ 2)
  * @throws in `__DEV__` when `virtualization` is changed during the lifecycle of the `VirtualizedResultsMenu` component
- */    function Re(e) {
-        var t = e.virtualization, o = e.elementRef, i = e.children, u = Se(e, [ "virtualization", "elementRef", "children" ]);
+ */    function je(e) {
+        var t = e.virtualization, o = e.elementRef, i = e.children, u = ge(e, [ "virtualization", "elementRef", "children" ]);
         // @docs-props-type VirtualizedResultsMenuPropsBase
         // If a user tries to set virtualization to a value smaller than the number of options
         // visible at a given moment then the menu will flicker endlessly. This state is set in
@@ -914,21 +883,22 @@
  // `useRef` will recompute its initial value every render cycle.
         // To avoid the array processing we can provide an initialization function to useState and init the ref with the result
                 var f = (0, r.useState)((function() {
-            return V(i, c);
-        })), d = ve(f, 1), p = d[0];
+            return X(i, c);
+        })), d = ve(f, 1), v = d[0];
  // NOSONAR
         // `windowPanes` is an array of arrays, each of length `virtualization`. Each "pane" is just a subset of
         // `children` which will be rendered in a chunk, and at most 3 of these panes will render at any given time.
-                var v = (0, r.useRef)(p);
+                var p = (0, r.useRef)(v);
         var m = (0, r.useRef)(0);
+        var h = (0, r.useRef)(null);
  // An IntersectionObserver is used to detect when pane changes are needed.
         // When loadPrevPaneRef or loadNextPaneRef entries intersect the menu, the currentPaneId will be updated.
-                var y = (0, r.useRef)();
-        var h = (0, r.useRef)(je);
-        var b = (0, r.useRef)(je);
-        var g = (0, r.useCallback)((function() {
+                var b = (0, r.useRef)();
+        var y = (0, r.useRef)(ke);
+        var g = (0, r.useRef)(ke);
+        var S = (0, r.useCallback)((function() {
             var e;
-            var t = v.current, r = t === void 0 ? [] : t;
+            var t = p.current, r = t === void 0 ? [] : t;
             var n = m.current;
             /**
      * create onMount for an child of the menu which will be used to trigger pane
@@ -940,7 +910,7 @@
                         return;
                     }
                     t.current.push(e);
-                    (r = y.current) === null || r === void 0 ? void 0 : r.observe(e);
+                    (r = b.current) === null || r === void 0 ? void 0 : r.observe(e);
                 };
             };
             /**
@@ -950,45 +920,46 @@
                 if (!t) {
                     return;
                 }
-                var n = b.current.indexOf(t);
+                var n = g.current.indexOf(t);
                 if (n >= 0) {
-                    b.current.splice(n, 1);
+                    g.current.splice(n, 1);
                 }
-                var o = h.current.indexOf(t);
+                var o = y.current.indexOf(t);
                 if (o) {
-                    h.current.splice(o, 1);
+                    y.current.splice(o, 1);
                 }
-                (r = y.current) === null || r === void 0 ? void 0 : r.unobserve(t);
+                (r = b.current) === null || r === void 0 ? void 0 : r.unobserve(t);
             };
-            return [].concat(se(ue(r[n - 1], o(b), i, {
+            return [].concat(ce(ae(r[n - 1], o(g), i, {
                 trackFirstElement: true
-            })), se((e = r[n]) !== null && e !== void 0 ? e : []), se(ue(r[n + 1], o(h), i, {
+            })), ce((e = r[n]) !== null && e !== void 0 ? e : []), ce(ae(r[n + 1], o(y), i, {
                 trackLastElement: true
             })));
         }), []);
-        var S = (0, r.useState)(g), O = ve(S, 2), E = O[0], M = O[1];
-        var w = (0, r.useCallback)((function(e) {
+        var E = (0, r.useState)(S), O = ve(E, 2), M = O[0], w = O[1];
+        var x = (0, r.useCallback)((function(e) {
             var t = m.current;
-            m.current = Math.max(0, Math.min(e, v.current.length - 1));
+            m.current = Math.max(0, Math.min(e, p.current.length - 1));
             if (t === m.current) {
                 // no change in current pane
                 return;
             }
-            M(g);
-        }), [ g ]);
+            w(S);
+        }), [ S ]);
  // Link an IntersectionObserver instance with the menu children to be observed
-                var P = (0, r.useCallback)((function(e) {
+                var k = (0, r.useCallback)((function(e) {
             var t;
             j(o, e);
+            h.current = e;
  // This is overly defensive and could probably be removed
-                        (t = y.current) === null || t === void 0 ? void 0 : t.disconnect();
+                        (t = b.current) === null || t === void 0 ? void 0 : t.disconnect();
             if (!e) {
                 return;
             }
-            b.current = [];
-            h.current = [];
+            g.current = [];
+            y.current = [];
  // Run the observation flow
-                        y.current = new IntersectionObserver((function(t) {
+                        b.current = new IntersectionObserver((function(t) {
                 var r;
                 var n = m.current;
                 var o = e.firstElementChild;
@@ -997,7 +968,7 @@
                     // If the first element doesn't require a scrollbar then it's likely a filter input
                                         o = (i = o) === null || i === void 0 ? void 0 : i.nextElementSibling;
                 }
-                if (((r = o) === null || r === void 0 ? void 0 : r.scrollTop) === 0 && n === 0 && v.current.length > 1 && t.some((function(e) {
+                if (((r = o) === null || r === void 0 ? void 0 : r.scrollTop) === 0 && n === 0 && p.current.length > 1 && t.some((function(e) {
                     return e.isIntersecting;
                 }))) {
                     // The menu hasn't scrolled, is on pane 0, and already has an intersection, the `virtualization` prop is too small
@@ -1013,46 +984,65 @@
                         // don't process if the pane changed or the entry isn't intersecting
                         return;
                     }
-                    if (b.current.includes(e.target)) {
+                    if (g.current.includes(e.target)) {
                         u = true;
-                        w(n - 1);
-                    } else if (h.current.includes(e.target)) {
+                        x(n - 1);
+                    } else if (y.current.includes(e.target)) {
                         u = true;
-                        w(n + 1);
+                        x(n + 1);
                     }
                 }));
             }), {
                 root: e
             });
-        }), [ o, w ]);
-        var x = (0, r.useCallback)((function(e, t) {
-            var r, n;
-            var o = t.itemRefs;
-            var i = v.current.length - 1;
-            if (m.current === i) {
-                return [ le(o, o.length - 1, o.length - 1), true ];
+        }), [ o, x ]);
+        var T = (0, r.useCallback)((function(e) {
+            var t = h.current;
+            if (!t) {
+                return;
+            }
+            e.preventDefault();
+            var r = (0, W.keycode)(e);
+            if (r === "home") {
+                var n;
+                if (m.current !== 0) {
+                    x(0);
+                }
+                var o = (0, K.getSortedTabbableElements)(t, {
+                    ignoreTabIndex: true
+                });
+                var i = o[0];
+                i === null || i === void 0 ? void 0 : (n = i.focus) === null || n === void 0 ? void 0 : n.call(i);
+                return;
             }
-            w(i);
- // When we are rendering the last set of records a buffer will exist containing the next-to-last pane.
-            // This means the desired index for focus will be the length of the buffer + the length of the last set
-            // of records (less 1 because of array indexing)
-                        var u = (r = v.current[i - 1].length) !== null && r !== void 0 ? r : 0;
-            var a = v.current[i].length;
- // If the last child is non-interactive (Heading or Divider) then `Menu` will focus on the "next" interactive
-            // element, which would be at the _start_ of the list. The IntersectionObserver would then change to the
-            // `lastPaneId - 1` pane and the focus would be incorrect. Call `findClosestMenuItem` to avoid that.
-                        var l = Math.max(u + a - 1, 0);
-            var c = ie([].concat(se((n = v.current[i - 1]) !== null && n !== void 0 ? n : []), se(v.current[i])), l);
-            return [ c, true ];
-        }), [ w ]);
-        var k = (0, r.useCallback)((function(e, t) {
-            var r = t.itemRefs;
-            if (m.current === 0) {
-                return [ ae(r, 0, 0), true ];
+            var u = p.current.length - 1;
+            if (r === "end") {
+                var a;
+                if (m.current !== u) {
+                    x(u);
+                }
+                var l = (0, K.getSortedTabbableElements)(t, {
+                    ignoreTabIndex: true
+                });
+                var c = l[l.length - 1];
+                c === null || c === void 0 ? void 0 : (a = c.focus) === null || a === void 0 ? void 0 : a.call(c);
+                return;
             }
-            w(0);
-            return [ 0, true ];
-        }), [ w ]);
+            var s = (0, K.getSortedTabbableElements)(t, {
+                ignoreTabIndex: true
+            });
+            var f = (e === null || e === void 0 ? void 0 : e.target) instanceof Element ? e.target : null;
+            var d = t === null || t === void 0 ? void 0 : t.querySelector(":focus");
+            var v = f || d;
+            var b = v ? s.indexOf(v) : -1;
+            (0, K.handleFocus)(r, s, b, {
+                enableLoop: false,
+                // VirtualizedResultsMenu does not support looping focus
+                orientation: "vertical",
+                enableTab: false,
+                enableHomeEnd: false
+            });
+        }), [ x ]);
         (0, r.useEffect)((function() {
             s((function(e) {
                 if (false) {}
@@ -1060,27 +1050,32 @@
             }));
         }), [ t ]);
         (0, r.useEffect)((function() {
-            v.current = V(i, c);
-            M(g);
-        }), [ i, c, g ]);
+            p.current = X(i, c);
+            w(S);
+        }), [ i, c, S ]);
         (0, r.useEffect)((function() {
             return function() {
                 var e;
-                return (e = y.current) === null || e === void 0 ? void 0 : e.disconnect();
+                return (e = b.current) === null || e === void 0 ? void 0 : e.disconnect();
             };
         }), []);
+        (0, r.useEffect)((function() {
+            var e = h.current;
+            if (e) {
+                e.addEventListener("keydown", T);
+            }
+            return function() {
+                e === null || e === void 0 ? void 0 : e.removeEventListener("keydown", T);
+            };
+        }), [ T ]);
         
-        return n().createElement($, ce({
-            elementRef: P
-        }, u, {
-            onEndKeyPress: x,
-            onHomeKeyPress: k,
-            onUpKeyPress: Ie,
-            onDownKeyPress: ke
-        }), E);
+        return n().createElement(V, le({
+            elementRef: k,
+            disableFocusControl: true
+        }, u), M);
     }
-    Re.propTypes = Pe;
-    Re.defaultProps = xe;
+    je.propTypes = we;
+    je.defaultProps = xe;
     // CONCATENATED MODULE: ./src/utils/ssrDocument.ts
     /* eslint-disable @typescript-eslint/no-empty-function */
     var Te = {
@@ -1143,7 +1138,7 @@
     }
     // CONCATENATED MODULE: ./src/utils/ssrWindow.ts
     /* eslint-disable @typescript-eslint/no-empty-function */
-    var Ae = {
+    var Ie = {
         document: Te,
         navigator: {
             userAgent: ""
@@ -1198,14 +1193,14 @@
             clearTimeout(t);
         }
     };
-    function _e() {
-        var e = typeof window !== "undefined" ? window : Ae;
+    function Pe() {
+        var e = typeof window !== "undefined" ? window : Ie;
         return e;
     }
     // CONCATENATED MODULE: ./src/ResultsMenu/VirtualizedResultsMenu/index.ts
     // In environments without IntersectionObserver support this should just export ResultsMenu
-    var Ke = "IntersectionObserver" in _e() ? Re : $;
-    /* harmony default export */    const Le = Ke;
+    var Re = "IntersectionObserver" in Pe() ? je : V;
+    /* harmony default export */    const Ae = Re;
     // CONCATENATED MODULE: ./src/ResultsMenu/index.ts
     module.exports = t;
     /******/})();