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

package/Tooltip.js

@@ -66,11 +66,11 @@
     // CONCATENATED MODULE: external "react"
     const r = require("react");
     var t =  e.n(r);
-    // CONCATENATED MODULE: external "prop-types"
-    const o = require("prop-types");
-    var a =  e.n(o);
     // CONCATENATED MODULE: external "lodash/throttle"
-    const l = require("lodash/throttle");
+    const o = require("lodash/throttle");
+    var a =  e.n(o);
+    // CONCATENATED MODULE: external "prop-types"
+    const l = require("prop-types");
     var i =  e.n(l);
     // CONCATENATED MODULE: external "@splunk/react-icons/InformationCircle"
     const u = require("@splunk/react-icons/InformationCircle");
@@ -79,8 +79,8 @@
     const c = require("@splunk/react-ui/Popover");
     var f =  e.n(c);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-    const v = require("@splunk/react-ui/ScreenReaderContent");
-    var p =  e.n(v);
+    const p = require("@splunk/react-ui/ScreenReaderContent");
+    var v =  e.n(p);
     // CONCATENATED MODULE: external "@splunk/react-ui/useControlled"
     const d = require("@splunk/react-ui/useControlled");
     var m =  e.n(d);
@@ -192,10 +192,10 @@
         }) : e[n] = r, e;
     }
     function D(e) {
-        var n = N(e, "string");
+        var n = M(e, "string");
         return "symbol" == L(n) ? n : n + "";
     }
-    function N(e, n) {
+    function M(e, n) {
         if ("object" != L(e) || !e) return e;
         var r = e[Symbol.toPrimitive];
         if (void 0 !== r) {
@@ -205,10 +205,10 @@
         }
         return ("string" === n ? String : Number)(e);
     }
-    function B(e, n) {
-        return K(e) || F(e, n) || H(e, n) || M();
+    function N(e, n) {
+        return K(e) || F(e, n) || H(e, n) || B();
     }
-    function M() {
+    function B() {
         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 H(e, n) {
@@ -278,21 +278,25 @@
     /** @public */
     /** @public */    var z = {
         /** @private */
-        appearance: a().string,
-        children: a().node,
-        closeDelay: a().number,
+        appearance: i().string,
         /** @private */
-        closeWhen: a().oneOf([ "default", "notOnClick" ]),
-        content: a().node,
-        contentRelationship: a().oneOf([ "label", "description" ]),
-        defaultPlacement: a().oneOf([ "above", "below", "left", "right" ]),
-        elementRef: a().oneOfType([ a().func, a().object ]),
-        inline: a().bool,
-        onRequestClose: a().func,
-        onRequestOpen: a().func,
-        open: a().bool,
-        openDelay: a().oneOfType([ a().oneOf([ "primary", "secondary" ]), a().number ]),
-        renderAnchor: a().func
+        append: i().bool,
+        children: i().node,
+        closeDelay: i().number,
+        /** @private */
+        closeWhen: i().oneOf([ "default", "notOnClick" ]),
+        content: i().node,
+        contentRelationship: i().oneOf([ "label", "description" ]),
+        defaultPlacement: i().oneOf([ "above", "below", "left", "right" ]),
+        elementRef: i().oneOfType([ i().func, i().object ]),
+        inline: i().bool,
+        onRequestClose: i().func,
+        onRequestOpen: i().func,
+        open: i().bool,
+        openDelay: i().oneOfType([ i().oneOf([ "primary", "secondary" ]), i().number ]),
+        /** @private */
+        prepend: i().bool,
+        renderAnchor: i().func
     };
     var G = {
         tension: 400
@@ -303,20 +307,20 @@
  * The Tooltip component wraps arbitrary content to be displayed when the target element is hovered
  * or focused.
  */    function X(e) {
-        var n = e.appearance, o = e.children, a = e.closeDelay, l = a === void 0 ? 300 : a, u = e.closeWhen, s = u === void 0 ? "default" : u, c = e.content, v = e.contentRelationship, d = e.defaultPlacement, g = d === void 0 ? "above" : d, O = e.elementRef, h = e.inline, S = h === void 0 ? true : h, C = e.onRequestClose, L = e.onRequestOpen, I = e.open, _ = e.openDelay, D = _ === void 0 ? "primary" : _, N = e.renderAnchor, M = W(e, [ "appearance", "children", "closeDelay", "closeWhen", "content", "contentRelationship", "defaultPlacement", "elementRef", "inline", "onRequestClose", "onRequestOpen", "open", "openDelay", "renderAnchor" ]);
+        var n = e.appearance, o = e.append, l = e.children, i = e.closeDelay, u = i === void 0 ? 300 : i, s = e.closeWhen, c = s === void 0 ? "default" : s, p = e.content, d = e.contentRelationship, g = e.defaultPlacement, O = g === void 0 ? "above" : g, h = e.elementRef, S = e.inline, C = S === void 0 ? true : S, L = e.onRequestClose, I = e.onRequestOpen, _ = e.open, D = e.openDelay, M = D === void 0 ? "primary" : D, B = e.renderAnchor, H = e.prepend, x = W(e, [ "appearance", "append", "children", "closeDelay", "closeWhen", "content", "contentRelationship", "defaultPlacement", "elementRef", "inline", "onRequestClose", "onRequestOpen", "open", "openDelay", "renderAnchor", "prepend" ]);
         // @docs-props-type TooltipPropsBase
-                var H = (0, r.useState)(false), x = B(H, 2), F = x[0], K = x[1];
-        var V = (0, r.useState)(null), U = B(V, 2), $ = U[0], z = U[1];
-        var X = (0, r.useState)(null), Y = B(X, 2), Z = Y[0], ee = Y[1];
-        var ne = (0, r.useState)(null), re = B(ne, 2), te = re[0], oe = re[1];
-        var ae = (0, r.useState)(null), le = B(ae, 2), ie = le[0], ue = le[1];
-        var se = (0, r.useState)((function() {
+                var F = (0, r.useState)(false), K = N(F, 2), V = K[0], U = K[1];
+        var $ = (0, r.useState)(null), z = N($, 2), X = z[0], Y = z[1];
+        var Z = (0, r.useState)(null), ee = N(Z, 2), ne = ee[0], re = ee[1];
+        var te = (0, r.useState)(null), oe = N(te, 2), ae = oe[0], le = oe[1];
+        var ie = (0, r.useState)(null), ue = N(ie, 2), se = ue[0], ce = ue[1];
+        var fe = (0, r.useState)((function() {
             return {
                 ariaId: (0, y.createDOMID)("aria-id"),
                 popoverId: (0, y.createDOMID)("popover")
             };
-        })), ce = B(se, 1), fe = ce[0], ve = fe.ariaId, pe = fe.popoverId;
-        var de = m()({
+        })), pe = N(fe, 1), ve = pe[0], de = ve.ariaId, me = ve.popoverId;
+        var be = m()({
             componentName: "Tooltip",
             /* eslint-disable-next-line prefer-rest-params */
             componentProps: arguments[0],
@@ -324,232 +328,234 @@
             defaultValuePropName: "defaultOpen",
             valuePropName: "open"
         });
-        var me = (0, r.useMemo)((function() {
-            var e = !!c;
-            return !!$ && de ? I : e && F;
-        }), [ $, c, de, F, I ]);
-        var be = (0, r.useRef)();
+        var ye = (0, r.useMemo)((function() {
+            var e = !!p;
+            return !!X && be ? _ : e && V;
+        }), [ X, p, be, V, _ ]);
+        var ge = (0, r.useRef)();
         (0, r.useEffect)((function() {
             return function() {
-                if (be.current !== undefined) {
-                    clearTimeout(be.current);
+                if (ge.current !== undefined) {
+                    clearTimeout(ge.current);
                 }
             };
         }), []);
-        var ye = (0, r.useCallback)((function(e, n) {
-            if (be.current !== undefined) {
-                clearTimeout(be.current);
+        var Oe = (0, r.useCallback)((function(e, n) {
+            if (ge.current !== undefined) {
+                clearTimeout(ge.current);
             }
-            be.current = setTimeout((function() {
-                if (!de) {
-                    K(false);
+            ge.current = setTimeout((function() {
+                if (!be) {
+                    U(false);
                 }
-                C === null || C === void 0 ? void 0 : C(e, n);
-            }), l);
-        }), [ l, de, C ]);
-        var ge = (0, r.useCallback)((function(e, n) {
-            var r = D === "primary" ? 300 : 750;
-            var t = typeof D === "number" ? D : r;
-            if (be.current !== undefined) {
-                clearTimeout(be.current);
+                L === null || L === void 0 ? void 0 : L(e, n);
+            }), u);
+        }), [ u, be, L ]);
+        var he = (0, r.useCallback)((function(e, n) {
+            var r = M === "primary" ? 300 : 750;
+            var t = typeof M === "number" ? M : r;
+            if (ge.current !== undefined) {
+                clearTimeout(ge.current);
             }
-            be.current = setTimeout((function() {
-                var r = me;
-                if (!de) {
-                    K(true);
+            ge.current = setTimeout((function() {
+                var r = ye;
+                if (!be) {
+                    U(true);
                 }
                 if (!r) {
-                    L === null || L === void 0 ? void 0 : L(e, n);
+                    I === null || I === void 0 ? void 0 : I(e, n);
                 }
             }), t);
-        }), [ de, me, L, D ]);
-        var Oe = (0, r.useCallback)((function(e) {
-            ge(e, {
+        }), [ be, ye, I, M ]);
+        var Se = (0, r.useCallback)((function(e) {
+            he(e, {
                 reason: "mouseEnterToggle"
             });
-        }), [ ge ]);
-        var he = (0, r.useCallback)((function(e) {
-            ge(e, {
+        }), [ he ]);
+        var Ce = (0, r.useCallback)((function(e) {
+            he(e, {
                 reason: "mouseEnterPopover"
             });
-        }), [ ge ]);
-        var Se = (0, r.useCallback)((function(e) {
-            ge(e, {
+        }), [ he ]);
+        var ke = (0, r.useCallback)((function(e) {
+            he(e, {
                 reason: "mouseEnterHitArea"
             });
-        }), [ ge ]);
-        var Ce = (0, r.useCallback)((function(e) {
+        }), [ he ]);
+        var Ee = (0, r.useCallback)((function(e) {
             var n = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "mouseLeaveToggle";
-            if (e.relatedTarget == null || e.relatedTarget !== te && e.relatedTarget !== ie) {
-                ye(e, {
+            if (e.relatedTarget == null || e.relatedTarget !== ae && e.relatedTarget !== se) {
+                Oe(e, {
                     reason: n
                 });
             }
-        }), [ ye, te, ie ]);
-        var ke = (0, r.useCallback)((function(e) {
-            Ce(e, "mouseLeavePopover");
-        }), [ Ce ]);
-        var Ee = (0, r.useCallback)((function(e) {
-            Ce(e, "mouseLeaveHitArea");
-        }), [ Ce ]);
+        }), [ Oe, ae, se ]);
         var Te = (0, r.useCallback)((function(e) {
-            ye(e, {
+            Ee(e, "mouseLeavePopover");
+        }), [ Ee ]);
+        var Pe = (0, r.useCallback)((function(e) {
+            Ee(e, "mouseLeaveHitArea");
+        }), [ Ee ]);
+        var je = (0, r.useCallback)((function(e) {
+            Oe(e, {
                 reason: "mouseStopHitArea"
             });
-        }), [ ye ]);
-        var Pe = i()(Te, 10);
-        var je = (0, r.useCallback)((function(e) {
+        }), [ Oe ]);
+        var we = a()(je, 10);
+        var Re = (0, r.useCallback)((function(e) {
             // Handle mouse events with native events due to current issues with how they
             // are handled by react. See https://github.com/facebook/react/issues/4251,
             // https://github.com/facebook/react/issues/19419, and SUI-1232.
             if (e) {
-                e.addEventListener("mouseenter", Oe);
-                e.addEventListener("mouseleave", Ce);
-            } else if ($) {
-                $.removeEventListener("mouseenter", Oe);
-                $.removeEventListener("mouseleave", Ce);
+                e.addEventListener("mouseenter", Se);
+                e.addEventListener("mouseleave", Ee);
+            } else if (X) {
+                X.removeEventListener("mouseenter", Se);
+                X.removeEventListener("mouseleave", Ee);
             }
-            z(e);
-        }), [ $, Oe, Ce ]);
-        var we = (0, r.useCallback)((function(e) {
+            Y(e);
+        }), [ X, Se, Ee ]);
+        var Le = (0, r.useCallback)((function(e) {
             if (e) {
-                e.addEventListener("mouseenter", he);
-                e.addEventListener("mouseleave", ke);
-            } else if (te) {
-                te.removeEventListener("mouseenter", he);
-                te.removeEventListener("mouseleave", ke);
+                e.addEventListener("mouseenter", Ce);
+                e.addEventListener("mouseleave", Te);
+            } else if (ae) {
+                ae.removeEventListener("mouseenter", Ce);
+                ae.removeEventListener("mouseleave", Te);
             }
-            oe(e);
-        }), [ he, ke, te ]);
-        var Re = (0, r.useCallback)((function(e) {
-            ue(e);
+            le(e);
+        }), [ Ce, Te, ae ]);
+        var qe = (0, r.useCallback)((function(e) {
+            ce(e);
         }), []);
-        var Le = (0, r.useCallback)((function(e) {
+        var Ie = (0, r.useCallback)((function(e) {
             // Handle mouse events with native events due to current issues with how they
             // are handled by react. See https://github.com/facebook/react/issues/4251,
             // https://github.com/facebook/react/issues/19419, and SUI-1232.
             if (e) {
-                e.addEventListener("mouseenter", Se);
-                e.addEventListener("mousemove", Pe);
-                e.addEventListener("mouseleave", Ee);
-            } else if (Z) {
-                Z.removeEventListener("mouseenter", Se);
-                Z.removeEventListener("mousemove", Pe);
-                Z.removeEventListener("mouseleave", Ee);
+                e.addEventListener("mouseenter", ke);
+                e.addEventListener("mousemove", we);
+                e.addEventListener("mouseleave", Pe);
+            } else if (ne) {
+                ne.removeEventListener("mouseenter", ke);
+                ne.removeEventListener("mousemove", we);
+                ne.removeEventListener("mouseleave", Pe);
             }
-            ee(e);
-        }), [ Se, Ee, Pe, Z ]);
-        var qe = (0, r.useCallback)((function(e) {
-            if (s !== "notOnClick") {
-                ye(e, {
+            re(e);
+        }), [ ke, Pe, we, ne ]);
+        var Ae = (0, r.useCallback)((function(e) {
+            if (c !== "notOnClick") {
+                Oe(e, {
                     reason: "toggleClick"
                 });
             }
-        }), [ s, ye ]);
-        var Ie = (0, r.useCallback)((function(e) {
-            ge(e, {
+        }), [ c, Oe ]);
+        var _e = (0, r.useCallback)((function(e) {
+            he(e, {
                 reason: "focusToggle"
             });
-        }), [ ge ]);
-        var Ae = (0, r.useCallback)((function(e) {
-            ye(e, {
+        }), [ he ]);
+        var De = (0, r.useCallback)((function(e) {
+            Oe(e, {
                 reason: "blurToggle"
             });
-        }), [ ye ]);
-        var _e = (0, r.useCallback)((function(e) {
-            ye(null, e);
-        }), [ ye ]);
-        var De = (0, r.useCallback)((function(e) {
-            je(e);
-            R(O, e);
-        }), [ O, je ]);
-        var Ne = (0, r.useCallback)((function() {
-            if (false) {}
-            var e = {
-                onBlur: Ae,
-                onFocus: Ie,
-                onClick: qe,
-                elementRef: De,
-                "data-test": "toggle"
+        }), [ Oe ]);
+        var Me = (0, r.useCallback)((function(e) {
+            Oe(null, e);
+        }), [ Oe ]);
+        var Ne = (0, r.useCallback)((function(e) {
+            Re(e);
+            R(h, e);
+        }), [ h, Re ]);
+        var Be = (0, r.useMemo)((function() {
+            return {
+                "data-test": "toggle",
+                elementRef: Ne,
+                onBlur: De,
+                onClick: Ae,
+                onFocus: _e
             };
-            if (v === "label") {
-                return N === null || N === void 0 ? void 0 : N(A(A({}, e), {}, {
-                    "aria-labelledby": ve,
-                    labelledBy: ve
-                }));
-            }
-            return N === null || N === void 0 ? void 0 : N(A(A({}, e), {}, {
-                "aria-describedby": ve,
-                describedBy: ve
-            }));
-        }), [ ve, o, v, Ae, qe, Ie, De, N ]);
-        var Be = (0, r.useCallback)((function() {
-            var e = S ? P : T;
-            var n;
-            if ( (0, r.isValidElement)(o)) {
-                var a;
-                if (v === "label") {
-                    a = {
-                        labelledBy: ve,
-                        "aria-labelledby": ve
-                    };
-                } else {
-                    a = {
-                        describedBy: ve,
-                        "aria-describedby": ve
-                    };
-                }
-                n =  (0, r.cloneElement)(o, a);
-            } else if (o) {
-                n = o;
+        }), [ De, Ae, _e, Ne ]);
+        var He = (0, r.useMemo)((function() {
+            return d === "label" ? {
+                "aria-labelledby": de,
+                labelledBy: de
+            } : {
+                "aria-describedby": de,
+                describedBy: de
+            };
+        }), [ d, de ]);
+        var xe = (0, r.useMemo)((function() {
+            return {
+                append: o,
+                prepend: H
+            };
+        }), [ o, H ]);
+        var Fe = (0, r.useMemo)((function() {
+            return A(A(A({}, He), Be), xe);
+        }), [ He, Be, xe ]);
+        var Ke = (0, r.useMemo)((function() {
+            return A(A({}, He), xe);
+        }), [ He, xe ]);
+        var We = (0, r.useCallback)((function() {
+            if (false) {}
+            return B === null || B === void 0 ? void 0 : B(A(A(A({}, Fe), He), xe));
+        }), [ He, Fe, l, xe, B ]);
+        var Ve = (0, r.useCallback)((function() {
+            var e;
+            if ( (0, r.isValidElement)(l)) {
+                e =  (0, r.cloneElement)(l, Ke);
+            } else if (l) {
+                e = l;
             } else {
-                n =  t().createElement(w, {
+                e =  t().createElement(w, {
                     appearance: "subtle",
-                    "aria-describedby": ve,
+                    "aria-describedby": de,
                     "aria-label": (0, b._)("More info"),
                     icon: Q
                 });
             }
+            var n = C ? P : T;
             
-            return t().createElement(e, {
-                onClick: qe,
-                onFocus: Ie,
-                onBlur: Ae,
-                ref: je,
-                "data-test": "toggle"
-            }, n);
-        }), [ ve, o, v, Ae, qe, Ie, je, S ]);
-        var Me = S ? E : k;
-        var He = !!c &&  t().createElement(p(), {
+            return t().createElement(n, {
+                "data-test": "toggle",
+                onClick: Ae,
+                onFocus: _e,
+                onBlur: De,
+                ref: Re
+            }, e);
+        }), [ l, C, Ae, _e, De, Re, Ke, de ]);
+        var Ue = C ? E : k;
+        var $e = !!p &&  t().createElement(v(), {
             "aria-hidden": "true",
-            id: ve
-        }, c);
-        var xe =  t().createElement(f(), {
+            id: de
+        }, p);
+        var ze =  t().createElement(f(), {
             role: "tooltip",
             align: "center",
-            anchor: $,
+            anchor: X,
             animationConfig: G,
             appearance: n,
             closeReasons: J,
-            defaultPlacement: g,
-            id: pe,
-            open: me,
-            onRequestClose: _e,
-            elementRef: we,
-            hitAreaRef: Le,
-            outerRef: Re
-        },  t().createElement(j, null, c));
-        if (N) {
+            defaultPlacement: O,
+            id: me,
+            open: ye,
+            onRequestClose: Me,
+            elementRef: Le,
+            hitAreaRef: Ie,
+            outerRef: qe
+        },  t().createElement(j, null, p));
+        if (B) {
             
-            return t().createElement(t().Fragment, null, Ne(), He, xe);
+            return t().createElement(t().Fragment, null, We(), $e, ze);
         }
         
-        return t().createElement(Me, q({
+        return t().createElement(Ue, q({
             "data-test": "tooltip",
-            "data-test-open": me,
-            "data-test-popover-id": pe,
-            ref: O
-        }, M), Be(), He, xe);
+            "data-test-open": ye,
+            "data-test-popover-id": me,
+            ref: h
+        }, x), Ve(), $e, ze);
     }
     X.propTypes = z;
     X.possibleOpenReasons = U;

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;
             };