@splunk/react-ui 4.34.0 → 4.36.0

package/ResultsMenu.js

@@ -61,7 +61,7 @@
         e.r(t);
     // EXPORTS
         e.d(t, {
-        VirtualizedResultsMenu: () => /* reexport */ Ae,
+        VirtualizedResultsMenu: () => /* reexport */ Re,
         default: () => /* reexport */ V
     });
     // CONCATENATED MODULE: external "react"
@@ -88,21 +88,21 @@
     var m =  e.n(p);
     // CONCATENATED MODULE: external "styled-components"
     const h = require("styled-components");
-    var b =  e.n(h);
+    var y =  e.n(h);
     // CONCATENATED MODULE: external "@splunk/react-ui/WaitSpinner"
-    const y = require("@splunk/react-ui/WaitSpinner");
-    var g =  e.n(y);
+    const b = require("@splunk/react-ui/WaitSpinner");
+    var g =  e.n(b);
     // CONCATENATED MODULE: external "@splunk/themes"
     const S = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/ResultsMenu/ResultsMenuStyles.ts
-    var E = b().div.withConfig({
+    var E = y().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, h.css)([ "border-radius:", ";background-color:", ";" ], S.variables.borderRadius, S.variables.backgroundColorPopup)
     }));
-    var O = b().div.withConfig({
+    var O = y().div.withConfig({
         displayName: "ResultsMenuStyles__StyledFooter",
         componentId: "avbhl8-1"
     })([ "padding:", ";color:", ";", "" ], (0, S.pick)({
@@ -124,7 +124,7 @@
             enterprise: (0, h.css)([ "border-top:", ";" ], S.variables.border)
         });
     }));
-    var M = b().li.withConfig({
+    var M = y().li.withConfig({
         displayName: "ResultsMenuStyles__StyledLoading",
         componentId: "avbhl8-2"
     })([ "", ";padding:", ";gap:", ";" ], S.mixins.reset("flex"), (0, S.pick)({
@@ -134,18 +134,18 @@
         },
         enterprise: "6px 10px"
     }), S.variables.spacingXSmall);
-    var w = b()(m()).withConfig({
+    var w = y()(m()).withConfig({
         displayName: "ResultsMenuStyles__StyledMenu",
         componentId: "avbhl8-3"
     })([ "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({
+    var k = y()(g()).withConfig({
         displayName: "ResultsMenuStyles__StyledWait",
         componentId: "avbhl8-4"
     })([ "flex:0 0 auto;" ]);
-    var k = b().div.withConfig({
+    var x = y().div.withConfig({
         displayName: "ResultsMenuStyles__StyledLoadingMessage",
         componentId: "avbhl8-5"
     })([ "flex:1 0 0;color:", ";" ], (0, S.pick)({
@@ -185,8 +185,8 @@
         }
         return T(e);
     }
-    function C() {
-        C = Object.assign || function(e) {
+    function I() {
+        I = Object.assign || function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var r = arguments[t];
                 for (var n in r) {
@@ -197,14 +197,14 @@
             }
             return e;
         };
-        return C.apply(this, arguments);
+        return I.apply(this, arguments);
     }
-    function I(e, t) {
+    function P(e, t) {
         if (!(e instanceof t)) {
             throw new TypeError("Cannot call a class as a function");
         }
     }
-    function P(e, t) {
+    function C(e, t) {
         for (var r = 0; r < t.length; r++) {
             var n = t[r];
             n.enumerable = n.enumerable || false;
@@ -214,8 +214,8 @@
         }
     }
     function R(e, t, r) {
-        if (t) P(e.prototype, t);
-        if (r) P(e, r);
+        if (t) C(e.prototype, t);
+        if (r) C(e, r);
         return e;
     }
     function A(e, t) {
@@ -296,10 +296,9 @@
     var N = {
         animateLoading: i().bool,
         children: i().node,
-        /** @private */
-        controlledExternally: i().bool,
         childrenStart: i().node,
         elementRef: i().oneOfType([ i().func, i().object ]),
+        focusMode: i().oneOf([ "roving", "normal", "never" ]),
         footerMessage: i().node,
         isLoading: i().bool,
         loadingMessage: i().node,
@@ -307,16 +306,15 @@
         onScroll: i().func,
         onScrollBottom: i().func,
         placement: i().string,
-        menuId: i().string,
-        disableFocusControl: i().bool
+        menuId: i().string
     };
-    var z = {
+    var U = {
         animateLoading: false,
         isLoading: false,
         loadingMessage: (0, d._)("Loading..."),
         noOptionsMessage: (0, d._)("No matches")
     };
-    var U = c()((function(e) {
+    var z = c()((function(e) {
         return {
             height: e
         };
@@ -327,7 +325,7 @@
         var t = L(o);
         function o(e) {
             var n;
-            I(this, o);
+            P(this, o);
             n = t.call(this, e);
             D(q(n), "scrollBottomOffset", void 0);
             D(q(n), "itemMinHeight", void 0);
@@ -395,7 +393,7 @@
             D(q(n), "createMenuContextValue", (function() {
                 return {
                     role: "listbox",
-                    preventFocus: n.props.controlledExternally
+                    preventFocus: n.props.focusMode === "never"
                 };
             }));
             n.state = {
@@ -453,38 +451,38 @@
         }, {
             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, 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));
+                var t = this.props, i = t.animateLoading, u = t.children, l = t.childrenStart, c = t.focusMode, s = t.isLoading, d = t.loadingMessage, v = t.noOptionsMessage, h = t.onScrollBottom, y = t.placement, b = t.style, g = t.tabIndex, S = t.menuId, O = t["aria-multiselectable"];
+                var j = f()(this.props, a()(o.propTypes));
                 // Assumption: that you cannot be filtered if you are a result
-                                var I = r.Children.toArray(u).filter(r.isValidElement).some((function(e) {
+                                var T = r.Children.toArray(u).filter(r.isValidElement).some((function(e) {
                     var t = e.type;
                     return !(t === p.Divider && t.filterFirst || (t === p.Divider || t === p.Heading) && (t.filterLast || t.filterConsecutive));
                 }));
                 var P = this.checkFullHeight();
-                var R = U(this.state.scrollBottomTriggered ? this.state.numberOfItemsLoaded * this.itemMinHeight || 0 : 0);
+                var C = z(this.state.scrollBottomTriggered ? this.state.numberOfItemsLoaded * this.itemMinHeight || 0 : 0);
                 /* eslint-disable jsx-a11y/aria-role */                
-                return n().createElement(E, C({
+                return n().createElement(E, I({
+                    "data-test": "results-menu",
                     key: "wrapper",
                     ref: this.handleMount,
                     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, {
+                }, f()(j, "tabIndex", "aria-multiselectable", "menuId"), {
+                    style: b
+                }), y !== "above" && l, y === "above" && this.renderFooterMessage(),  n().createElement(p.MenuContext.Provider, {
                     value: this.createMenuContextValue()
                 },  n().createElement(w, {
                     key: "menu",
-                    controlledExternally: l,
                     elementRef: this.handleMenuMount,
                     onScroll: this.handleScroll,
                     stopScrollPropagation: true,
                     tabIndex: g,
-                    "aria-multiselectable": j,
+                    "aria-multiselectable": O,
                     id: S,
-                    disableFocusControl: O,
-                    $removeBottomRadius: !!this.props.footerMessage && b !== "above"
-                }, !I && v && !s &&  n().createElement(m().Item, {
+                    focusMode: c,
+                    $removeBottomRadius: !!this.props.footerMessage && y !== "above"
+                }, !T && v && !s &&  n().createElement(m().Item, {
                     "data-test": "no-results-message",
                     disabled: true
                 }, v), u, h && !P && 
@@ -492,14 +490,14 @@
                 // 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: R
-                }), s &&  n().createElement(M, null, i &&  n().createElement(x, null),  n().createElement(k, null, d)))), b !== "above" && this.renderFooterMessage(), b === "above" && c);
+                    style: C
+                }), s &&  n().createElement(M, null, i &&  n().createElement(k, null),  n().createElement(x, null, d)))), y !== "above" && this.renderFooterMessage(), y === "above" && l);
             }
         } ]);
         return o;
     }(r.Component);
     D($, "propTypes", N);
-    D($, "defaultProps", z);
+    D($, "defaultProps", U);
     /* harmony default export */    const V = $;
     // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
     const W = require("@splunk/ui-utils/keyboard");
@@ -734,7 +732,7 @@
         if (Array.isArray(e)) return he(e);
     }
     function ve(e, t) {
-        return ye(e) || be(e, t) || me(e, t) || pe();
+        return be(e) || ye(e, t) || me(e, t) || pe();
     }
     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.");
@@ -754,7 +752,7 @@
         }
         return n;
     }
-    function be(e, t) {
+    function ye(e, t) {
         if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(e))) return;
         var r = [];
         var n = true;
@@ -777,7 +775,7 @@
         }
         return r;
     }
-    function ye(e) {
+    function be(e) {
         if (Array.isArray(e)) return e;
     }
     function ge(e, t) {
@@ -849,11 +847,8 @@
         return e;
     }
     var we = Oe(Oe({}, f()(N, "onDownKeyPress", "onEndKeyPress", "onHomeKeyPress", "onUpKeyPress")), {}, {
-        virtualization: i().number.isRequired
+        virtualization: i().number
     });
-    var xe = {
-        virtualization: 0
-    };
     var ke = [];
     /**
  * A wrapper for `ResultsMenu` which virtualizes the `children`. The received `children` array will be split into **"panes"** each with `virtualization` entries
@@ -873,33 +868,37 @@
  * @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 je(e) {
-        var t = e.virtualization, o = e.elementRef, i = e.children, u = ge(e, [ "virtualization", "elementRef", "children" ]);
+ */    function xe(e) {
+        var t = e.virtualization, o = t === void 0 ? 2 : t, i = e.elementRef, u = e.children, a = 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
+                var l = (0, r.useRef)(o);
+ // 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
         // the IntersectionObserver to fix the issue, but in `__DEV__` an error is thrown.
-                var a = (0, r.useState)(t), l = ve(a, 2), c = l[0], s = l[1];
+                var c = (0, r.useState)(o), s = ve(c, 2), f = s[0], d = s[1];
+        (0, r.useEffect)((function() {
+            if (false) {}
+        }), [ o ]);
  // `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 X(i, c);
-        })), d = ve(f, 1), v = d[0];
+                var v = (0, r.useState)((function() {
+            return X(u, f);
+        })), p = ve(v, 1), m = p[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 p = (0, r.useRef)(v);
-        var m = (0, r.useRef)(0);
-        var h = (0, r.useRef)(null);
+                var h = (0, r.useRef)(m);
+        var y = (0, r.useRef)(0);
+        var b = (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 b = (0, r.useRef)();
-        var y = (0, r.useRef)(ke);
-        var g = (0, r.useRef)(ke);
-        var S = (0, r.useCallback)((function() {
+                var g = (0, r.useRef)();
+        var S = (0, r.useRef)(ke);
+        var E = (0, r.useRef)(ke);
+        var O = (0, r.useCallback)((function() {
             var e;
-            var t = p.current, r = t === void 0 ? [] : t;
-            var n = m.current;
+            var t = h.current, r = t === void 0 ? [] : t;
+            var n = y.current;
             /**
      * create onMount for an child of the menu which will be used to trigger pane
      * changes upon intersection with the menu's visible bounds
@@ -910,7 +909,7 @@
                         return;
                     }
                     t.current.push(e);
-                    (r = b.current) === null || r === void 0 ? void 0 : r.observe(e);
+                    (r = g.current) === null || r === void 0 ? void 0 : r.observe(e);
                 };
             };
             /**
@@ -920,59 +919,59 @@
                 if (!t) {
                     return;
                 }
-                var n = g.current.indexOf(t);
+                var n = E.current.indexOf(t);
                 if (n >= 0) {
-                    g.current.splice(n, 1);
+                    E.current.splice(n, 1);
                 }
-                var o = y.current.indexOf(t);
+                var o = S.current.indexOf(t);
                 if (o) {
-                    y.current.splice(o, 1);
+                    S.current.splice(o, 1);
                 }
-                (r = b.current) === null || r === void 0 ? void 0 : r.unobserve(t);
+                (r = g.current) === null || r === void 0 ? void 0 : r.unobserve(t);
             };
-            return [].concat(ce(ae(r[n - 1], o(g), i, {
+            return [].concat(ce(ae(r[n - 1], o(E), i, {
                 trackFirstElement: true
-            })), ce((e = r[n]) !== null && e !== void 0 ? e : []), ce(ae(r[n + 1], o(y), i, {
+            })), ce((e = r[n]) !== null && e !== void 0 ? e : []), ce(ae(r[n + 1], o(S), i, {
                 trackLastElement: true
             })));
         }), []);
-        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, p.current.length - 1));
-            if (t === m.current) {
+        var M = (0, r.useState)(O), w = ve(M, 2), k = w[0], x = w[1];
+        var T = (0, r.useCallback)((function(e) {
+            var t = y.current;
+            y.current = Math.max(0, Math.min(e, h.current.length - 1));
+            if (t === y.current) {
                 // no change in current pane
                 return;
             }
-            w(S);
-        }), [ S ]);
+            x(O);
+        }), [ O ]);
  // Link an IntersectionObserver instance with the menu children to be observed
-                var k = (0, r.useCallback)((function(e) {
+                var I = (0, r.useCallback)((function(e) {
             var t;
-            j(o, e);
-            h.current = e;
+            j(i, e);
+            b.current = e;
  // This is overly defensive and could probably be removed
-                        (t = b.current) === null || t === void 0 ? void 0 : t.disconnect();
+                        (t = g.current) === null || t === void 0 ? void 0 : t.disconnect();
             if (!e) {
                 return;
             }
-            g.current = [];
-            y.current = [];
+            E.current = [];
+            S.current = [];
  // Run the observation flow
-                        b.current = new IntersectionObserver((function(t) {
+                        g.current = new IntersectionObserver((function(t) {
                 var r;
-                var n = m.current;
+                var n = y.current;
                 var o = e.firstElementChild;
                 if (!!o && o.scrollHeight < e.clientHeight) {
                     var i;
                     // 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 && p.current.length > 1 && t.some((function(e) {
+                if (((r = o) === null || r === void 0 ? void 0 : r.scrollTop) === 0 && n === 0 && h.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
-                    s((function(e) {
+                    d((function(e) {
                         return e + 10;
                     }));
                     if (false) {}
@@ -984,20 +983,20 @@
                         // don't process if the pane changed or the entry isn't intersecting
                         return;
                     }
-                    if (g.current.includes(e.target)) {
+                    if (E.current.includes(e.target)) {
                         u = true;
-                        x(n - 1);
-                    } else if (y.current.includes(e.target)) {
+                        T(n - 1);
+                    } else if (S.current.includes(e.target)) {
                         u = true;
-                        x(n + 1);
+                        T(n + 1);
                     }
                 }));
             }), {
                 root: e
             });
-        }), [ o, x ]);
-        var T = (0, r.useCallback)((function(e) {
-            var t = h.current;
+        }), [ i, T ]);
+        var P = (0, r.useCallback)((function(e) {
+            var t = b.current;
             if (!t) {
                 return;
             }
@@ -1005,8 +1004,8 @@
             var r = (0, W.keycode)(e);
             if (r === "home") {
                 var n;
-                if (m.current !== 0) {
-                    x(0);
+                if (y.current !== 0) {
+                    T(0);
                 }
                 var o = (0, K.getSortedTabbableElements)(t, {
                     ignoreTabIndex: true
@@ -1015,11 +1014,11 @@
                 i === null || i === void 0 ? void 0 : (n = i.focus) === null || n === void 0 ? void 0 : n.call(i);
                 return;
             }
-            var u = p.current.length - 1;
+            var u = h.current.length - 1;
             if (r === "end") {
                 var a;
-                if (m.current !== u) {
-                    x(u);
+                if (y.current !== u) {
+                    T(u);
                 }
                 var l = (0, K.getSortedTabbableElements)(t, {
                     ignoreTabIndex: true
@@ -1034,51 +1033,50 @@
             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, {
+            var p = v ? s.indexOf(v) : -1;
+            (0, K.handleFocus)(r, s, p, {
                 enableLoop: false,
                 // VirtualizedResultsMenu does not support looping focus
                 orientation: "vertical",
                 enableTab: false,
                 enableHomeEnd: false
             });
-        }), [ x ]);
+        }), [ T ]);
         (0, r.useEffect)((function() {
-            s((function(e) {
+            d((function(e) {
                 if (false) {}
-                return t;
+                return o;
             }));
-        }), [ t ]);
+        }), [ o ]);
         (0, r.useEffect)((function() {
-            p.current = X(i, c);
-            w(S);
-        }), [ i, c, S ]);
+            h.current = X(u, f);
+            x(O);
+        }), [ u, f, O ]);
         (0, r.useEffect)((function() {
             return function() {
                 var e;
-                return (e = b.current) === null || e === void 0 ? void 0 : e.disconnect();
+                return (e = g.current) === null || e === void 0 ? void 0 : e.disconnect();
             };
         }), []);
         (0, r.useEffect)((function() {
-            var e = h.current;
+            var e = b.current;
             if (e) {
-                e.addEventListener("keydown", T);
+                e.addEventListener("keydown", P);
             }
             return function() {
-                e === null || e === void 0 ? void 0 : e.removeEventListener("keydown", T);
+                e === null || e === void 0 ? void 0 : e.removeEventListener("keydown", P);
             };
-        }), [ T ]);
+        }), [ P ]);
         
         return n().createElement(V, le({
-            elementRef: k,
-            disableFocusControl: true
-        }, u), M);
+            elementRef: I,
+            focusMode: "normal"
+        }, a), k);
     }
-    je.propTypes = we;
-    je.defaultProps = xe;
+    xe.propTypes = we;
     // CONCATENATED MODULE: ./src/utils/ssrDocument.ts
     /* eslint-disable @typescript-eslint/no-empty-function */
-    var Te = {
+    var je = {
         body: {
             appendChild: function e() {
                 return [];
@@ -1132,14 +1130,14 @@
             search: ""
         }
     };
-    function Ce() {
-        var e = typeof document !== "undefined" ? document : Te;
+    function Te() {
+        var e = typeof document !== "undefined" ? document : je;
         return e;
     }
     // CONCATENATED MODULE: ./src/utils/ssrWindow.ts
     /* eslint-disable @typescript-eslint/no-empty-function */
     var Ie = {
-        document: Te,
+        document: je,
         navigator: {
             userAgent: ""
         },
@@ -1199,8 +1197,8 @@
     }
     // CONCATENATED MODULE: ./src/ResultsMenu/VirtualizedResultsMenu/index.ts
     // In environments without IntersectionObserver support this should just export ResultsMenu
-    var Re = "IntersectionObserver" in Pe() ? je : V;
-    /* harmony default export */    const Ae = Re;
+    var Ce = "IntersectionObserver" in Pe() ? xe : V;
+    /* harmony default export */    const Re = Ce;
     // CONCATENATED MODULE: ./src/ResultsMenu/index.ts
     module.exports = t;
     /******/})();