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

package/ResultsMenu.js

@@ -15,12 +15,12 @@
                         var a = n(23);
             var i =  n.n(a);
             // EXTERNAL MODULE: external "styled-components"
-                        var u = n(232);
-            var l =  n.n(u);
+                        var l = n(232);
+            var u =  n.n(l);
             // EXTERNAL MODULE: external "@splunk/themes"
                         var c = n(3563);
             // CONCATENATED MODULE: ./src/ScreenReaderContent/ScreenReaderContentStyles.ts
-            var s = l().span.withConfig({
+            var s = u().span.withConfig({
                 displayName: "ScreenReaderContentStyles__Styled",
                 componentId: "sc-1lnohwp-0"
             })([ "", ";" ], c.mixins.screenReaderContent());
@@ -191,10 +191,10 @@
         var a =  n.n(o);
         // CONCATENATED MODULE: external "@splunk/react-ui/Divider"
         const i = require("@splunk/react-ui/Divider");
-        var u =  n.n(i);
+        var l =  n.n(i);
         // CONCATENATED MODULE: external "@splunk/react-ui/Menu"
-        const l = require("@splunk/react-ui/Menu");
-        var c =  n.n(l);
+        const u = require("@splunk/react-ui/Menu");
+        var c =  n.n(u);
         // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
         const s = require("@splunk/ui-utils/i18n");
         // EXTERNAL MODULE: external "styled-components"
@@ -234,6 +234,8 @@
             displayName: "ResultsMenuStyles__StyledLoadingMessage",
             componentId: "avbhl8-6"
         })([ "flex:1 0 0;color:", ";" ], p.variables.contentColorDefault);
+        // EXTERNAL MODULE: ./src/ScreenReaderContent/index.ts + 2 modules
+                var w = n(6165);
         // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
         /**
  * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
@@ -241,7 +243,7 @@
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-        function w(e, r) {
+        function M(e, r) {
             if (e) {
                 if (typeof e === "function") {
                     e(r);
@@ -253,8 +255,6 @@
                                 }
             }
         }
-        // EXTERNAL MODULE: ./src/ScreenReaderContent/index.ts + 2 modules
-                var M = n(6165);
         // CONCATENATED MODULE: ./src/ResultsMenu/ResultsMenu.tsx
         function C() {
             return C = Object.assign ? Object.assign.bind() : function(e) {
@@ -290,23 +290,23 @@
         function P(e, r) {
             var n = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
             if (null != n) {
-                var t, o, a, i, u = [], l = !0, c = !1;
+                var t, o, a, i, l = [], u = !0, c = !1;
                 try {
                     if (a = (n = n.call(e)).next, 0 === r) {
                         if (Object(n) !== n) return;
-                        l = !1;
-                    } else for (;!(l = (t = a.call(n)).done) && (u.push(t.value), u.length !== r); l = !0) {
+                        u = !1;
+                    } else for (;!(u = (t = a.call(n)).done) && (l.push(t.value), l.length !== r); u = !0) {
                     }
                 } catch (e) {
                     c = !0, o = e;
                 } finally {
                     try {
-                        if (!l && null != n["return"] && (i = n["return"](), Object(i) !== i)) return;
+                        if (!u && null != n["return"] && (i = n["return"](), Object(i) !== i)) return;
                     } finally {
                         if (c) throw o;
                     }
                 }
-                return u;
+                return l;
             }
         }
         function x(e) {
@@ -355,143 +355,144 @@
                 var N = 400;
         var D = 28;
         function H(n) {
-            var t = n.animateLoading, o = n["aria-multiselectable"], a = n.children, i = n.childrenStart, c = n.elementRef, s = n.focusMode, f = n.footerMessage, v = n.isLoading, d = n.loadingMessage, m = d === void 0 ? _ : d, p = n.menuId, R = n.noOptionsMessage, k = R === void 0 ? q : R, I = n.onScroll, P = n.onScrollBottom, x = n.placement, A = n.style, L = n.tabIndex, H = T(n, [ "animateLoading", "aria-multiselectable", "children", "childrenStart", "elementRef", "focusMode", "footerMessage", "isLoading", "loadingMessage", "menuId", "noOptionsMessage", "onScroll", "onScrollBottom", "placement", "style", "tabIndex" ]);
+            var t = n.animateLoading, o = n["aria-multiselectable"], a = n.children, i = n.childrenStart, c = n.elementRef, s = n.focusMode, f = n.footerMessage, v = n.isLoading, d = n.labelledBy, m = n.loadingMessage, p = m === void 0 ? _ : m, R = n.menuId, k = n.noOptionsMessage, I = k === void 0 ? q : k, P = n.onScroll, x = n.onScrollBottom, A = n.placement, L = n.style, H = n.tabIndex, F = T(n, [ "animateLoading", "aria-multiselectable", "children", "childrenStart", "elementRef", "focusMode", "footerMessage", "isLoading", "labelledBy", "loadingMessage", "menuId", "noOptionsMessage", "onScroll", "onScrollBottom", "placement", "style", "tabIndex" ]);
             // @docs-props-type ResultsMenuPropsBase
-                        var F = (0, e.useState)(undefined), U = j(F, 2), z = U[0], B = U[1];
-            var V = (0, e.useState)(null), K = j(V, 2), W = K[0], $ = K[1];
-            var G = (0, e.useState)(null), X = j(G, 2), J = X[0], Q = X[1];
-            var Y = (0, e.useState)(0), Z = j(Y, 2), ee = Z[0], re = Z[1];
-            var ne = (0, e.useState)(0), te = j(ne, 2), oe = te[0], ae = te[1];
-            var ie = (0, e.useState)(false), ue = j(ie, 2), le = ue[0], ce = ue[1];
-            var se = (0, e.useCallback)((function(e) {
-                Q(e);
-            }), []);
+                        var B = (0, e.useState)(undefined), U = j(B, 2), z = U[0], V = U[1];
+            var K = (0, e.useState)(null), W = j(K, 2), $ = W[0], G = W[1];
+            var X = (0, e.useState)(null), J = j(X, 2), Q = J[0], Y = J[1];
+            var Z = (0, e.useState)(0), ee = j(Z, 2), re = ee[0], ne = ee[1];
+            var te = (0, e.useState)(0), oe = j(te, 2), ae = oe[0], ie = oe[1];
+            var le = (0, e.useState)(false), ue = j(le, 2), ce = ue[0], se = ue[1];
             var fe = (0, e.useCallback)((function(e) {
-                $(e);
-                w(c, e);
-            }), [ c ]);
-            var ve = (0, e.useCallback)((function() {
-                ae(document.documentElement.scrollTop);
+                Y(e);
             }), []);
+            var ve = (0, e.useCallback)((function(e) {
+                G(e);
+                M(c, e);
+            }), [ c ]);
             var de = (0, e.useCallback)((function() {
-                ae(document.documentElement.scrollTop);
+                ie(document.documentElement.scrollTop);
             }), []);
-            var me = (0, e.useCallback)((function(e) {
+            var me = (0, e.useCallback)((function() {
+                ie(document.documentElement.scrollTop);
+            }), []);
+            var pe = (0, e.useCallback)((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 = oe;
-            }), [ oe ]);
-            var pe = (0, e.useCallback)((function() {
-                return !!J && J.scrollHeight === J.offsetHeight;
-            }), [ J ]);
-            var be = (0, e.useCallback)((function(e) {
-                if (!le) {
-                    ce(true);
-                    P === null || P === void 0 ? void 0 : P(e);
-                }
-            }), [ le, P ]);
+                document.documentElement.scrollTop = ae;
+            }), [ ae ]);
+            var be = (0, e.useCallback)((function() {
+                return !!Q && Q.scrollHeight === Q.offsetHeight;
+            }), [ Q ]);
             var ye = (0, e.useCallback)((function(e) {
-                if (P && e.target && J) {
-                    var r = J.scrollHeight - J.offsetHeight - N;
+                if (!ce) {
+                    se(true);
+                    x === null || x === void 0 ? void 0 : x(e);
+                }
+            }), [ ce, x ]);
+            var ge = (0, e.useCallback)((function(e) {
+                if (x && e.target && Q) {
+                    var r = Q.scrollHeight - Q.offsetHeight - N;
                     // Adding 1 due to border of menu item.
-                                        if (J.scrollTop + 1 >= r) {
-                        be(e);
+                                        if (Q.scrollTop + 1 >= r) {
+                        ye(e);
                     }
                 }
-                I === null || I === void 0 ? void 0 : I(e);
-            }), [ be, J, I, P ]);
-            var ge = (0, e.useCallback)((function() {
+                P === null || P === void 0 ? void 0 : P(e);
+            }), [ ye, Q, P, x ]);
+            var he = (0, e.useCallback)((function() {
                 var r = e.Children.count(a);
                 // If menu is full length, load more items.
-                                if (pe()) {
-                    be(null);
+                                if (be()) {
+                    ye(null);
                 }
                 // Avoid triggering this logic if this.state.childrenCount is null
                 // because that's not a real change in the number of children
                 // and thus we want to avoid resetting the value of scrollBottomTriggered
                                 if (z != null && r !== z) {
-                    re(r - (z !== null && z !== void 0 ? z : 0));
-                    ce(false);
+                    ne(r - (z !== null && z !== void 0 ? z : 0));
+                    se(false);
                 }
                 if (r !== z) {
-                    B(r);
+                    V(r);
                 }
-            }), [ pe, a, z, be ]);
+            }), [ be, a, z, ye ]);
             (0, e.useEffect)((function() {
-                if (!W || !J) {
+                if (!$ || !Q) {
                     return;
                 }
                 // If onScrollBottom is defined, determine if it should be triggered.
-                                if (P && a) {
-                    ge();
+                                if (x && a) {
+                    he();
                 }
-            }), [ W, J, a, P, ge ]);
+            }), [ $, Q, a, x, he ]);
             // Assumption: that you cannot be filtered if you are a result
-                        var he = e.Children.toArray(a).filter(e.isValidElement).some((function(e) {
+                        var Se = e.Children.toArray(a).filter(e.isValidElement).some((function(e) {
                 var r = e.type;
                 return !(r.as === "Divider" && r.filterFirst || (r.as === "Divider" || r.as === "Heading") && (r.filterLast || r.filterConsecutive));
             }));
-            var Se = pe();
-            var Ee = (0, e.useMemo)((function() {
+            var Ee = be();
+            var Oe = (0, e.useMemo)((function() {
                 return {
-                    height: le ? ee * D : 0
+                    height: ce ? re * D : 0
                 };
-            }), [ le, ee ]);
-            var Oe = !he && !!k && !v;
-            var we = (0, e.useCallback)((function() {
+            }), [ ce, re ]);
+            var we = !Se && !!I && !v;
+            var Me = (0, e.useCallback)((function() {
                 return {
                     role: "listbox",
                     preventFocus: s === "never"
                 };
             }), [ s ]);
-            var Me = (0, e.useCallback)((function() {
+            var Ce = (0, e.useCallback)((function() {
                 var n = !!e.Children.toArray(a).length;
-                return f && n &&  r().createElement(r().Fragment, null, x !== "above" &&  r().createElement(u(), null),  r().createElement(g, {
+                return f && n &&  r().createElement(r().Fragment, null, A !== "above" &&  r().createElement(l(), null),  r().createElement(g, {
                     "data-test": "footer-message",
                     key: "footer"
-                }, f), x === "above" &&  r().createElement(u(), null));
-            }), [ f, a, x ]);
+                }, f), A === "above" &&  r().createElement(l(), null));
+            }), [ f, a, A ]);
             
             return r().createElement(y, C({
                 "data-test": "results-menu",
                 key: "wrapper",
-                ref: fe,
-                onWheel: P ? me : undefined,
-                onMouseEnter: P ? ve : undefined,
-                onMouseLeave: P ? de : undefined
-            }, H, {
-                style: A
-            }), x !== "above" && i, x === "above" && Me(),  r().createElement(l.MenuContext.Provider, {
-                value: we()
+                ref: ve,
+                onWheel: x ? pe : undefined,
+                onMouseEnter: x ? de : undefined,
+                onMouseLeave: x ? me : undefined
+            }, F, {
+                style: L
+            }), A !== "above" && i, A === "above" && Ce(),  r().createElement(u.MenuContext.Provider, {
+                value: Me()
             },  r().createElement(b, {
                 "aria-multiselectable": o,
-                elementRef: se,
+                "aria-labelledby": d,
+                elementRef: fe,
                 focusMode: s,
-                id: p,
+                id: R,
                 key: "menu",
-                onScroll: ye,
+                onScroll: ge,
                 stopScrollPropagation: true,
-                tabIndex: L
-            }, Oe &&  r().createElement(S, {
+                tabIndex: H
+            }, we &&  r().createElement(S, {
                 "data-test": "no-results-message",
                 disabled: true
-            }, k), a, P && !Se && 
+            }, I), a, x && !Ee && 
             
             // Bottom spacer fills in the space of new items being loaded by using the minimum possible height x menuItems.
             r().createElement("div", {
                 "data-test": "results-menu-bottom-spacer",
-                style: Ee
-            }), v &&  r().createElement(h, null, t &&  r().createElement(E, null),  r().createElement(O, null, m)))),  r().createElement(M["default"], {
+                style: Oe
+            }), v &&  r().createElement(h, null, t &&  r().createElement(E, null),  r().createElement(O, null, p)))),  r().createElement(w["default"], {
                 "aria-live": "polite"
-            }, Oe && k), x !== "above" && Me(), x === "above" && i);
+            }, we && I), A !== "above" && Ce(), A === "above" && i);
         }
         H.propTypes = L;
         /* harmony default export */        const F = H;
         // CONCATENATED MODULE: external "lodash/omit"
-        const U = require("lodash/omit");
-        var z =  n.n(U);
+        const B = require("lodash/omit");
+        var U =  n.n(B);
         // CONCATENATED MODULE: external "@splunk/ui-utils/focus"
-        const B = require("@splunk/ui-utils/focus");
+        const z = require("@splunk/ui-utils/focus");
         // CONCATENATED MODULE: ./src/ResultsMenu/VirtualizedResultsMenu/groupChildren.ts
         // Cheap(er than processing potentially thousands of array elements) memoization
         var V = {
@@ -557,16 +558,16 @@
                     }
                 };
             }), [ o, a ]);
-            var u = e.Children.only(t);
-            if (!u) {
+            var l = e.Children.only(t);
+            if (!l) {
                 if (false) {}
                 return null;
             }
             
-            return (0, e.cloneElement)(u, {
+            return (0, e.cloneElement)(l, {
                 elementRef: function e(r) {
                     i.current = r;
-                    w(n, r);
+                    M(n, r);
                 }
             });
         }));
@@ -587,7 +588,7 @@
                 if (t >= 0 && t < a) {
                     return;
                 }
-                if (e.type !== l.Divider && e.type !== l.Heading) {
+                if (e.type !== u.Divider && e.type !== u.Heading) {
                     t = a;
                     o = r;
                 }
@@ -600,15 +601,15 @@
  * - 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 J = function e(n, t, o) {
-            var a = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {}, i = a.trackFirstElement, u = a.trackLastElement;
+            var a = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {}, i = a.trackFirstElement, l = a.trackLastElement;
             if (!Array.isArray(n)) {
                 return [];
             }
-            var l = X(n, Math.floor(n.length / 2));
+            var u = X(n, Math.floor(n.length / 2));
             var c = i && X(n, 0);
-            var s = u && X(n, n.length - 1);
+            var s = l && X(n, n.length - 1);
             return n.map((function(e, n) {
-                if (n === l || n === c || n === s) {
+                if (n === u || n === c || n === s) {
                     
                     return r().createElement(G, {
                         key: (0, W.createGUID)(),
@@ -652,7 +653,7 @@
             if (Array.isArray(e)) return ie(e);
         }
         function te(e, r) {
-            return le(e) || ue(e, r) || ae(e, r) || oe();
+            return ue(e) || le(e, r) || ae(e, r) || oe();
         }
         function oe() {
             throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
@@ -671,29 +672,29 @@
             }
             return t;
         }
-        function ue(e, r) {
+        function le(e, r) {
             var n = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
             if (null != n) {
-                var t, o, a, i, u = [], l = !0, c = !1;
+                var t, o, a, i, l = [], u = !0, c = !1;
                 try {
                     if (a = (n = n.call(e)).next, 0 === r) {
                         if (Object(n) !== n) return;
-                        l = !1;
-                    } else for (;!(l = (t = a.call(n)).done) && (u.push(t.value), u.length !== r); l = !0) {
+                        u = !1;
+                    } else for (;!(u = (t = a.call(n)).done) && (l.push(t.value), l.length !== r); u = !0) {
                     }
                 } catch (e) {
                     c = !0, o = e;
                 } finally {
                     try {
-                        if (!l && null != n["return"] && (i = n["return"](), Object(i) !== i)) return;
+                        if (!u && null != n["return"] && (i = n["return"](), Object(i) !== i)) return;
                     } finally {
                         if (c) throw o;
                     }
                 }
-                return u;
+                return l;
             }
         }
-        function le(e) {
+        function ue(e) {
             if (Array.isArray(e)) return e;
         }
         function ce(e, r) {
@@ -762,7 +763,7 @@
             return ("string" === r ? String : Number)(e);
         }
         // TODO(SUI-5920): add transitions to this component in React 18
-                var be = ve(ve({}, z()(L, "onDownKeyPress", "onEndKeyPress", "onHomeKeyPress", "onUpKeyPress")), {}, {
+                var be = ve(ve({}, U()(L, "onDownKeyPress", "onEndKeyPress", "onHomeKeyPress", "onUpKeyPress")), {}, {
             virtualization: a().number
         });
         var ye = [];
@@ -785,7 +786,7 @@
  * @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 ge(n) {
-            var t = n.virtualization, o = t === void 0 ? 2 : t, a = n.elementRef, i = n.children, u = n.focusMode, l = u === void 0 ? "normal" : u, c = ce(n, [ "virtualization", "elementRef", "children", "focusMode" ]);
+            var t = n.virtualization, o = t === void 0 ? 2 : t, a = n.elementRef, i = n.children, l = n.focusMode, u = l === void 0 ? "normal" : l, c = ce(n, [ "virtualization", "elementRef", "children", "focusMode" ]);
             // @docs-props-type VirtualizedResultsMenuPropsBase
                         var s = (0, e.useRef)(o);
             // If a user tries to set virtualization to a value smaller than the number of options
@@ -843,7 +844,7 @@
             // `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 O = (0, e.useRef)(E);
-            var M = (0, e.useRef)(0);
+            var w = (0, e.useRef)(0);
             var C = (0, e.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.
@@ -853,7 +854,7 @@
             var I = (0, e.useCallback)((function() {
                 var e;
                 var r = O.current, n = r === void 0 ? [] : r;
-                var t = M.current;
+                var t = w.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
@@ -892,9 +893,9 @@
             }), []);
             var P = (0, e.useState)(I), x = te(P, 2), T = x[0], A = x[1];
             var L = (0, e.useCallback)((function(e) {
-                var r = M.current;
-                M.current = Math.max(0, Math.min(e, O.current.length - 1));
-                if (r === M.current) {
+                var r = w.current;
+                w.current = Math.max(0, Math.min(e, O.current.length - 1));
+                if (r === w.current) {
                     // no change in current pane
                     return;
                 }
@@ -903,7 +904,7 @@
             // Link an IntersectionObserver instance with the menu children to be observed
                         var _ = (0, e.useCallback)((function(e) {
                 var r;
-                w(a, e);
+                M(a, e);
                 C.current = e;
                 // This is overly defensive and could probably be removed
                                 (r = j.current) === null || r === void 0 ? void 0 : r.disconnect();
@@ -915,7 +916,7 @@
                 // Run the observation flow
                                 j.current = new IntersectionObserver((function(r) {
                     var n;
-                    var t = M.current;
+                    var t = w.current;
                     var o = e.firstElementChild;
                     if (!!o && o.scrollHeight < e.clientHeight) {
                         var a;
@@ -958,11 +959,11 @@
                 e.preventDefault();
                 var n = e.key;
                 if (n === "Home") {
-                    var t = M.current === 0;
+                    var t = w.current === 0;
                     if (t) {
                         var o;
                         // if the first pane is already rendered, find the first element and focus it
-                                                var a = (0, B.getSortedTabbableElements)(r, {
+                                                var a = (0, z.getSortedTabbableElements)(r, {
                             ignoreTabIndex: true
                         });
                         var i = a[0];
@@ -975,13 +976,13 @@
                     }
                     return;
                 }
-                var u = O.current.length - 1;
+                var l = O.current.length - 1;
                 if (n === "End") {
-                    var l = M.current === u;
-                    if (l) {
+                    var u = w.current === l;
+                    if (u) {
                         var c;
                         // if the last pane is already rendered, find the first element and focus it
-                                                var s = (0, B.getSortedTabbableElements)(r, {
+                                                var s = (0, z.getSortedTabbableElements)(r, {
                             ignoreTabIndex: true
                         });
                         var f = s[s.length - 1];
@@ -990,18 +991,18 @@
                         // if it's not rendered, set up focusing it after the next render
                         b.current = true;
                         // then call changePane() to trigger the render
-                                                L(u);
+                                                L(l);
                     }
                     return;
                 }
-                var v = (0, B.getSortedTabbableElements)(r, {
+                var v = (0, z.getSortedTabbableElements)(r, {
                     ignoreTabIndex: true
                 });
                 var d = (e === null || e === void 0 ? void 0 : e.target) instanceof Element ? e.target : null;
                 var m = r === null || r === void 0 ? void 0 : r.querySelector(":focus");
                 var y = d || m;
                 var g = y ? v.indexOf(y) : -1;
-                (0, B.handleFocus)(n, v, g, {
+                (0, z.handleFocus)(n, v, g, {
                     enableLoop: false,
                     // VirtualizedResultsMenu does not support looping focus
                     orientation: "vertical",
@@ -1026,7 +1027,7 @@
                 };
             }), []);
             (0, e.useEffect)((function() {
-                if (l === "never") {
+                if (u === "never") {
                     return undefined;
                 }
                 var e = C.current;
@@ -1036,11 +1037,11 @@
                 return function() {
                     e === null || e === void 0 ? void 0 : e.removeEventListener("keydown", q);
                 };
-            }), [ q, l ]);
+            }), [ q, u ]);
             
             return r().createElement(F, Y({
                 elementRef: _,
-                focusMode: l
+                focusMode: u
             }, c), T);
         }
         ge.propTypes = be;