@splunk/react-ui 5.3.0 → 5.5.0

package/TransitionOpen.js

@@ -72,8 +72,8 @@
     // CONCATENATED MODULE: external "@splunk/react-ui/Animation"
     const a = require("@splunk/react-ui/Animation");
     // CONCATENATED MODULE: external "@splunk/react-ui/usePrevious"
-    const u = require("@splunk/react-ui/usePrevious");
-    var l =  e.n(u);
+    const l = require("@splunk/react-ui/usePrevious");
+    var u =  e.n(l);
     // CONCATENATED MODULE: external "@splunk/ui-utils/focus"
     const s = require("@splunk/ui-utils/focus");
     // CONCATENATED MODULE: external "@splunk/ui-utils/style"
@@ -137,7 +137,7 @@
         }, g.apply(null, arguments);
     }
     function O(e, t) {
-        return k(e) || P(e, t) || j(e, t) || S();
+        return P(e) || F(e, t) || j(e, t) || S();
     }
     function S() {
         throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
@@ -156,34 +156,34 @@
         }
         return n;
     }
-    function P(e, t) {
+    function F(e, t) {
         var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != r) {
-            var n, o, i, a, u = [], l = !0, s = !1;
+            var n, o, i, a, l = [], u = !0, s = !1;
             try {
                 if (i = (r = r.call(e)).next, 0 === t) {
                     if (Object(r) !== r) return;
-                    l = !1;
-                } else for (;!(l = (n = i.call(r)).done) && (u.push(n.value), u.length !== t); l = !0) {
+                    u = !1;
+                } else for (;!(u = (n = i.call(r)).done) && (l.push(n.value), l.length !== t); u = !0) {
                 }
             } catch (e) {
                 s = !0, o = e;
             } finally {
                 try {
-                    if (!l && null != r["return"] && (a = r["return"](), Object(a) !== a)) return;
+                    if (!u && null != r["return"] && (a = r["return"](), Object(a) !== a)) return;
                 } finally {
                     if (s) throw o;
                 }
             }
-            return u;
+            return l;
         }
     }
-    function k(e) {
+    function P(e) {
         if (Array.isArray(e)) return e;
     }
-    function x(e, t) {
+    function k(e, t) {
         if (null == e) return {};
-        var r, n, o = F(e, t);
+        var r, n, o = x(e, t);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (n = 0; n < i.length; n++) {
@@ -192,7 +192,7 @@
         }
         return o;
     }
-    function F(e, t) {
+    function x(e, t) {
         if (null == e) return {};
         var r = {};
         for (var n in e) {
@@ -217,26 +217,26 @@
         for (var t = 1; t < arguments.length; t++) {
             var r = null != arguments[t] ? arguments[t] : {};
             t % 2 ? C(Object(r), !0).forEach((function(t) {
-                T(e, t, r[t]);
+                A(e, t, r[t]);
             })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : C(Object(r)).forEach((function(t) {
                 Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t));
             }));
         }
         return e;
     }
-    function T(e, t, r) {
-        return (t = E(t)) in e ? Object.defineProperty(e, t, {
+    function A(e, t, r) {
+        return (t = T(t)) in e ? Object.defineProperty(e, t, {
             value: r,
             enumerable: !0,
             configurable: !0,
             writable: !0
         }) : e[t] = r, e;
     }
-    function E(e) {
-        var t = A(e, "string");
+    function T(e) {
+        var t = E(e, "string");
         return "symbol" == h(t) ? t : t + "";
     }
-    function A(e, t) {
+    function E(e, t) {
         if ("object" != h(e) || !e) return e;
         var r = e[Symbol.toPrimitive];
         if (void 0 !== r) {
@@ -256,6 +256,7 @@
         innerClassName: i().string,
         innerStyle: i().object,
         onAnimationEnd: i().func,
+        onAnimationStart: i().func,
         open: i().bool,
         outerClassName: i().string,
         outerId: i().string,
@@ -293,7 +294,7 @@
         var a = {
             value: n ? 0 : o
         };
-        var u = {
+        var l = {
             precision: 1
         };
  // Only use precision when not using transform, otherwise transform animation will break
@@ -301,7 +302,7 @@
                 if (r === "expandWidth" || r === "expandHeight" || r === "none") {
             return {
                 to: i,
-                config: u
+                config: l
             };
         }
         // Slide transitions require a valid value, render without transition first.
@@ -313,14 +314,14 @@
             return {
                 to: i,
                 from: a,
-                config: u
+                config: l
             };
         }
         // The top and left directions require an additional transform of their inner content to match the outer dimension animation.
         // This is needed to achieve a clipping effect from the outer div, rather than the consumer providing their own.
-                var l = r === "slideFromTop" ? "Y" : "X";
-        var s = "translate".concat(l, "(").concat(n ? 0 : -o, "px)");
-        var c = "translate".concat(l, "(").concat(n ? -o : 0, "px)");
+                var u = r === "slideFromTop" ? "Y" : "X";
+        var s = "translate".concat(u, "(").concat(n ? 0 : -o, "px)");
+        var c = "translate".concat(u, "(").concat(n ? -o : 0, "px)");
         return {
             to: N({
                 transform: s
@@ -330,7 +331,7 @@
             }, a)
         };
     };
-    var _ = function e(t) {
+    var R = function e(t) {
         var r = t.animation, n = t.el, o = t.takeFocusProp;
         var i = 0;
         if (n) {
@@ -353,90 +354,97 @@
         }
         return i;
     };
-    var R = {};
+    var _ = {};
     var W = {};
     function D(e) {
-        var t = e.animation, o = t === void 0 ? "expandHeight" : t, i = e.animateOnMount, u = e.children, f = e.className, d = e.elementRef, m = e.id, p = e.innerClassName, h = e.innerStyle, S = h === void 0 ? R : h, j = e.onAnimationEnd, w = e.open, P = e.outerClassName, k = e.outerId, F = e.outerStyle, C = F === void 0 ? W : F, E = e.renderChildrenWhenCollapsed, A = e.retainFocus, I = e.takeFocus, D = x(e, [ "animation", "animateOnMount", "children", "className", "elementRef", "id", "innerClassName", "innerStyle", "onAnimationEnd", "open", "outerClassName", "outerId", "outerStyle", "renderChildrenWhenCollapsed", "retainFocus", "takeFocus" ]);
+        var t = e.animation, o = t === void 0 ? "expandHeight" : t, i = e.animateOnMount, l = e.children, f = e.className, d = e.elementRef, m = e.id, p = e.innerClassName, h = e.innerStyle, S = h === void 0 ? _ : h, j = e.onAnimationEnd, w = e.onAnimationStart, F = e.open, P = e.outerClassName, x = e.outerId, C = e.outerStyle, T = C === void 0 ? W : C, E = e.renderChildrenWhenCollapsed, I = e.retainFocus, D = e.takeFocus, H = k(e, [ "animation", "animateOnMount", "children", "className", "elementRef", "id", "innerClassName", "innerStyle", "onAnimationEnd", "onAnimationStart", "open", "outerClassName", "outerId", "outerStyle", "renderChildrenWhenCollapsed", "retainFocus", "takeFocus" ]);
         // @docs-props-type TransitionOpenPropsBase
-                var H = l()(w);
-        var L = (0, r.useRef)(true);
-        var $ = (0, r.useState)(i ? w : false), B = O($, 2), K = B[0], U = B[1];
-        var X = (0, r.useState)(null), Y = O(X, 2), z = Y[0], G = Y[1];
-        var J = (0, r.useState)(0), Q = O(J, 2), V = Q[0], Z = Q[1];
+                var L = u()(F);
+        var B = (0, r.useRef)(true);
+        var $ = (0, r.useState)(i ? F : false), K = O($, 2), U = K[0], X = K[1];
+        var Y = (0, r.useState)(null), z = O(Y, 2), G = z[0], J = z[1];
+        var Q = (0, r.useState)(0), V = O(Q, 2), Z = V[0], ee = V[1];
         (0, r.useEffect)((function() {
             // prevOpen starts undefined, and we don't want to make the comparison in that situation
-            if (H !== undefined && w !== H) {
-                U(true);
+            if (L !== undefined && F !== L) {
+                X(true);
             }
-        }), [ w, H ]);
+        }), [ F, L ]);
         // 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;
+            B.current = true;
             return function() {
-                L.current = false;
+                B.current = false;
             };
         }), []);
-        var ee = (0, r.useCallback)((function(e) {
-            G(e);
-            Z(_({
+        var te = (0, r.useCallback)((function(e) {
+            J(e);
+            ee(R({
                 animation: o,
                 el: e,
-                takeFocusProp: I
+                takeFocusProp: D
             }));
             b(d, e);
-        }), [ o, I, d ]);
-        var te = (0, r.useCallback)((function() {
-            if (L.current) {
-                U(false);
+        }), [ o, D, d ]);
+        var re = (0, r.useCallback)((function() {
+            w === null || w === void 0 ? void 0 : w();
+        }), [ w ]);
+        var ne = (0, r.useCallback)((function() {
+            if (B.current) {
+                X(false);
             }
             j === null || j === void 0 ? void 0 : j();
         }), [ j ]);
-        var re = (0, r.useCallback)((function(e) {
-            if (z) {
-                (0, s.handleTab)(z, e);
+        var oe = (0, r.useCallback)((function(e) {
+            if (G) {
+                (0, s.handleTab)(G, e);
             }
-        }), [ z ]);
-        var ne = (0, a.useAnimation)(N(N({}, M({
+        }), [ G ]);
+        var ie = (0, a.useAnimation)(N(N({}, M({
             animation: o,
-            open: w,
-            value: V
+            open: F,
+            value: Z
         })), {}, {
             immediate: o === "none",
-            onRest: te
-        })), oe = ne.value, ie = ne.transform;
-        var ae;
-        if (K || E) {
-            ae = q(o);
+            onRest: ne,
+            onStart: re
+        })), ae = ie.value, le = ie.transform;
+        var ue;
+        var se = [ "slideFromTop", "slideFromRight", "slideFromBottom", "slideFromLeft" ].includes(o);
+        /* to avoid setting and unsetting dimension which causes flickering
+     we always set the dimension if it is a slide animation
+     else only set it when animating || renderChildrenWhenCollapsed */        if (se || U || E) {
+            ue = q(o);
         }
         // if renderChildrenWhenCollapsed is true, we hide the content by setting the height of the wrapper to 0
-                var ue = E && !w && !K ? 0 : oe;
-        var le = (0, r.useMemo)((function() {
-            return N(N({}, C), ae && T({}, ae, ue));
-        }), [ ae, ue, C ]);
-        var se = (0, r.useMemo)((function() {
+                var ce = E && !F && !U ? 0 : ae;
+        var fe = (0, r.useMemo)((function() {
+            return N(N({}, T), ue && A({}, ue, ce));
+        }), [ ue, ce, T ]);
+        var de = (0, r.useMemo)((function() {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             return N(N({}, S), {}, {
-                transform: ie
+                transform: le
             });
-        }), [ S, ie ]);
+        }), [ S, le ]);
         
         return n().createElement(v, {
-            $hideOverflow: !w || K || false,
+            $hideOverflow: !F || U || false,
             className: (0, c.toClassName)(f, P),
-            style: le,
-            id: k
-        }, (w || K || E) &&  n().createElement(y, g({
+            style: fe,
+            id: x
+        }, (F || U || E) &&  n().createElement(y, g({
             "data-test": "transition-open"
-        }, D, {
-            ref: ee,
+        }, H, {
+            ref: te,
             tabIndex: -1,
             className: p,
             id: m,
-            onKeyDown: A ? re : undefined,
-            style: se
-        }), u));
+            onKeyDown: I ? oe : undefined,
+            style: de
+        }), l));
     }
     D.propTypes = I;
     /* harmony default export */    const H = D;