@splunk/react-ui 5.0.0-rc.2 → 5.0.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"
@@ -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);
+                Y(e);
+            }), []);
+            var ve = (0, e.useCallback)((function(e) {
+                G(e);
                 w(c, e);
             }), [ c ]);
-            var ve = (0, e.useCallback)((function() {
-                ae(document.documentElement.scrollTop);
-            }), []);
             var de = (0, e.useCallback)((function() {
-                ae(document.documentElement.scrollTop);
+                ie(document.documentElement.scrollTop);
+            }), []);
+            var me = (0, e.useCallback)((function() {
+                ie(document.documentElement.scrollTop);
             }), []);
-            var me = (0, e.useCallback)((function(e) {
+            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(M["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,13 +558,13 @@
                     }
                 };
             }), [ 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);
@@ -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
@@ -962,7 +963,7 @@
                     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 = M.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;

package/Select.js

@@ -1579,15 +1579,15 @@
                 return c;
             }), [ Re, je, l, s, f, Jn, S, _e, $n, Bn, Kn, Fn, Xn, _n, E, N, Yn, U, ce, Ue, be ]);
             var et = function e(t) {
-                var r = t.anchorWidth, l = t.maxHeight, o = t.placement;
-                var i = tn({
+                var r = t.anchorWidth, l = t.maxHeight, o = t.placement, i = t.toggleId;
+                var u = tn({
                     anchorWidth: r,
                     isMultiple: N,
                     maxHeight: l,
                     menuStyle: B
                 });
-                var u = Jn.length > 0 && !Qn && !S ? 0 : undefined;
-                var c = {
+                var c = Jn.length > 0 && !Qn && !S ? 0 : undefined;
+                var s = {
                     "aria-multiselectable": N || undefined,
                     childrenStart: !!S &&  n().createElement(fn, {
                         activeItemId: je,
@@ -1613,6 +1613,8 @@
                     }),
                     focusMode: S ? "never" : undefined,
                     isLoading: E,
+                    labelledBy: "".concat(Rn !== null && Rn !== void 0 ? Rn : "", " ").concat(i !== null && i !== void 0 ? i : "").trim(),
+                    // NVDA ignores aria-labelledby attribute on popover, but reads it on menu
                     menuId: Pe,
                     onScrollBottom: U ? Nn : undefined,
                     placement: o !== null && o !== void 0 ? o : undefined,
@@ -1621,17 +1623,17 @@
                     animateLoading: a,
                     loadingMessage: L,
                     onScroll: X,
-                    style: i,
-                    tabIndex: u
+                    style: u,
+                    tabIndex: c
                 };
                 if (ve) {
                     
                     return n().createElement(D.VirtualizedResultsMenu, Ne({
                         virtualization: ve
-                    }, c), Zn);
+                    }, s), Zn);
                 }
                 
-                return n().createElement(_(), c, Zn);
+                return n().createElement(_(), s, Zn);
             };
             var nt = (0, e.useMemo)((function() {
                 

package/TransitionOpen.js

@@ -369,8 +369,11 @@
                 U(true);
             }
         }), [ w, H ]);
-        // equivalent to componentWillUnmount
+        // equivalent to componentDidMount and componentWillUnmount
                 (0, r.useEffect)((function() {
+            // we need to set this to true on every mount because React.StrictMode will call the effect twice
+            // and we need to ensure that allowAnimationUpdates is true while the component is mounted
+            L.current = true;
             return function() {
                 L.current = false;
             };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "5.0.0-rc.2",
+  "version": "5.0.0",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -26,7 +26,6 @@
     "storybook:build": "yarn sb build",
     "stylelint": "stylelint \"src/**/*.{ts,tsx,js,jsx}\" --config stylelint.config.js",
     "test": "jest",
-    "test:ci": "JEST_JUNIT_OUTPUT_DIR=./test-reports JEST_JUNIT_OUTPUT_NAME=unit-results.xml JEST_JUNIT_CLASSNAME=unit yarn run test --ci --reporters=default jest-junit --coverage --coverageDirectory=coverage_report/coverage_maps_unit --coverageReporters=cobertura",
     "test:watch": "jest --watch",
     "test:cypress": "yarn cypress open --component",
     "test:cypress:ci": "yarn cypress run --component",
@@ -45,9 +44,9 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@react-spring/web": "^9.7.5",
-    "@splunk/react-icons": "5.0.0-rc.2",
-    "@splunk/themes": "1.0.0-rc.2",
-    "@splunk/ui-utils": "^1.8.0",
+    "@splunk/react-icons": "^5.0.0",
+    "@splunk/themes": "^1.0.0",
+    "@splunk/ui-utils": "^1.9.0",
     "decimal.js-light": "^2.2.3",
     "lodash": "^4.17.14",
     "moment": "^2.29.4",
@@ -61,9 +60,9 @@
     "@babel/core": "^7.2.0",
     "@babel/plugin-transform-runtime": "^7.18.6",
     "@splunk/babel-preset": "^4.0.0",
-    "@splunk/docs-gen": "1.0.0-rc.2",
+    "@splunk/docs-gen": "^1.0.0",
     "@splunk/eslint-config": "^5.0.0",
-    "@splunk/react-docs": "1.0.0-rc.2",
+    "@splunk/react-docs": "^1.0.0",
     "@splunk/stylelint-config": "^5.0.0",
     "@splunk/test-runner-utils": "^0.4.1",
     "@splunk/webpack-configs": "^7.0.2",
@@ -80,7 +79,7 @@
     "@testing-library/react": "^16.3.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.6.1",
-    "@types/jest": "^26.0.0",
+    "@types/jest": "^29.5.14",
     "@types/lodash": "^4.14.156",
     "@types/node": "^10.17.26",
     "@types/prismjs": "^1.26.3",
@@ -102,7 +101,7 @@
     "babel-plugin-transform-require-context": "^0.1.1",
     "core-js": "^3.6.4",
     "cross-env": "^6.0.3",
-    "cypress": "^12.17.1",
+    "cypress": "^13.17.0",
     "cypress-real-events": "^1.9.1",
     "eslint": "^8.57.1",
     "eslint-config-airbnb": "^19.0.4",
@@ -121,7 +120,8 @@
     "fs-readdir-recursive": "^1.0.0",
     "glob": "^7.1.6",
     "http-server": "^14.1.1",
-    "jest": "^26.6.3",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-image-snapshot": "^5.1.0",
     "jest-junit": "^10.0.0",
     "jest-stare": "^2.4.1",

package/types/src/Dropdown/Dropdown.d.ts

@@ -8,6 +8,7 @@ type DropdownChildrenRenderer = (data: {
     maxHeight: number | null;
     maxWidth: number | null;
     placement: DropdownPlacementStatus | null;
+    toggleId?: string;
 }) => React.ReactNode;
 /** @public */
 type DropdownPlacement = 'above' | 'below' | 'left' | 'right' | 'vertical' | 'horizontal';

package/types/src/Popover/Popover.d.ts

@@ -9,6 +9,7 @@ type PopoverChildrenRenderer = (data: {
     maxHeight: number | null;
     maxWidth: number | null;
     placement: PopoverPlacementStatus | null;
+    toggleId?: string;
 }) => React.ReactNode;
 /** @public */
 type PopoverPlacement = 'above' | 'below' | 'left' | 'right' | 'vertical' | 'horizontal';
@@ -143,6 +144,11 @@ interface PopoverPropsBase {
      * Disable this for a `Popover` that has shows on hover, such as a tooltip.
      */
     takeFocus?: boolean;
+    /**
+     * Id of the toggle is added to aria-labelledby attribute of inner results menu
+     * @private
+     */
+    toggleId?: string;
 }
 type PopoverProps = ComponentProps<PopoverPropsBase, 'div'>;
 /**
@@ -150,7 +156,7 @@ type PopoverProps = ComponentProps<PopoverPropsBase, 'div'>;
  * this only when the other components don't provide sufficient functionality or control. A controlled
  * `Dropdown` covers use cases where you might consider using `Popover` directly.
  */
-declare function Popover({ align, anchor, animation, animationConfig, appearance, autoCloseWhenOffScreen, canCoverAnchor, children, closeReasons, defaultPlacement, elementRef, hideArrow, hitAreaRef, id, onRequestClose, open, outerRef, pointTo, repositionMode, retainFocus, takeFocus, ...otherProps }: PopoverProps): React.JSX.Element;
+declare function Popover({ align, anchor, animation, animationConfig, appearance, autoCloseWhenOffScreen, canCoverAnchor, children, closeReasons, defaultPlacement, elementRef, hideArrow, hitAreaRef, id, onRequestClose, open, outerRef, pointTo, repositionMode, retainFocus, takeFocus, toggleId, ...otherProps }: PopoverProps): React.JSX.Element;
 declare namespace Popover {
     var propTypes: {
         align: PropTypes.Requireable<string>;

package/types/src/ResultsMenu/ResultsMenu.d.ts

@@ -36,6 +36,7 @@ interface ResultsMenuPropsBase {
      * children, so therefore it may be necessary to scroll to see the animation.
      */
     isLoading?: boolean;
+    labelledBy?: string;
     loadingMessage?: React.ReactNode;
     menuId?: string;
     noOptionsMessage?: React.ReactNode;
@@ -66,7 +67,7 @@ declare const propTypes: {
     placement: PropTypes.Requireable<string>;
 };
 type ResultsMenuProps = ComponentProps<ResultsMenuPropsBase, 'div'>;
-declare function ResultsMenu({ animateLoading, 'aria-multiselectable': ariaMultiselectable, children, childrenStart, elementRef, focusMode, footerMessage, isLoading, loadingMessage, menuId, noOptionsMessage, onScroll, onScrollBottom, placement, style, tabIndex, ...otherProps }: ResultsMenuProps): React.JSX.Element;
+declare function ResultsMenu({ animateLoading, 'aria-multiselectable': ariaMultiselectable, children, childrenStart, elementRef, focusMode, footerMessage, isLoading, labelledBy, loadingMessage, menuId, noOptionsMessage, onScroll, onScrollBottom, placement, style, tabIndex, ...otherProps }: ResultsMenuProps): React.JSX.Element;
 declare namespace ResultsMenu {
     var propTypes: {
         animateLoading: PropTypes.Requireable<boolean>;