@splunk/react-ui 5.7.0 → 5.7.1

package/CHANGELOG.md

@@ -1,6 +1,11 @@
 Change Log
 ============
 
+5.7.1 - January 6, 2026
+----------
+Bug Fixes:
+* `TransitionOpen` now adjusts to change in content size (SUI-8518).
+
 5.7.0 - December 10, 2025
 ----------
 New Features:

package/TransitionOpen.js

@@ -9,26 +9,26 @@
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
         /******/ e.n = t => {
-            /******/ var r = t && t.__esModule ? 
+            /******/ var n = t && t.__esModule ? 
             /******/ () => t["default"]
             /******/ : () => t
             /******/;
-            e.d(r, {
-                a: r
+            e.d(n, {
+                a: n
             });
-            /******/            return r;
+            /******/            return n;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (t, r) => {
-            /******/ for (var n in r) {
-                /******/ if (e.o(r, n) && !e.o(t, n)) {
-                    /******/ Object.defineProperty(t, n, {
+        /******/ e.d = (t, n) => {
+            /******/ for (var r in n) {
+                /******/ if (e.o(n, r) && !e.o(t, r)) {
+                    /******/ Object.defineProperty(t, r, {
                         enumerable: true,
-                        get: r[n]
+                        get: n[r]
                     });
                     /******/                }
                 /******/            }
@@ -64,8 +64,8 @@
         default: () => /* reexport */ H
     });
     // CONCATENATED MODULE: external "react"
-    const r = require("react");
-    var n =  e.n(r);
+    const n = require("react");
+    var r =  e.n(n);
     // CONCATENATED MODULE: external "prop-types"
     const o = require("prop-types");
     var i =  e.n(o);
@@ -128,9 +128,9 @@
     function g() {
         return g = Object.assign ? Object.assign.bind() : function(e) {
             for (var t = 1; t < arguments.length; t++) {
-                var r = arguments[t];
-                for (var n in r) {
-                    ({}).hasOwnProperty.call(r, n) && (e[n] = r[n]);
+                var n = arguments[t];
+                for (var r in n) {
+                    ({}).hasOwnProperty.call(n, r) && (e[r] = n[r]);
                 }
             }
             return e;
@@ -145,32 +145,32 @@
     function j(e, t) {
         if (e) {
             if ("string" == typeof e) return w(e, t);
-            var r = {}.toString.call(e).slice(8, -1);
-            return "Object" === r && e.constructor && (r = e.constructor.name), "Map" === r || "Set" === r ? Array.from(e) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? w(e, t) : void 0;
+            var n = {}.toString.call(e).slice(8, -1);
+            return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? w(e, t) : void 0;
         }
     }
     function w(e, t) {
         (null == t || t > e.length) && (t = e.length);
-        for (var r = 0, n = Array(t); r < t; r++) {
-            n[r] = e[r];
+        for (var n = 0, r = Array(t); n < t; n++) {
+            r[n] = e[n];
         }
-        return n;
+        return r;
     }
     function P(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 = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
+        if (null != n) {
+            var r, o, i, a, u = [], l = !0, s = !1;
             try {
-                if (i = (r = r.call(e)).next, 0 === t) {
-                    if (Object(r) !== r) return;
+                if (i = (n = n.call(e)).next, 0 === t) {
+                    if (Object(n) !== n) return;
                     l = !1;
-                } else for (;!(l = (n = i.call(r)).done) && (u.push(n.value), u.length !== t); l = !0) {
+                } else for (;!(l = (r = i.call(n)).done) && (u.push(r.value), u.length !== t); l = !0) {
                 }
             } catch (e) {
                 s = !0, o = e;
             } finally {
                 try {
-                    if (!l && null != r["return"] && (a = r["return"](), Object(a) !== a)) return;
+                    if (!l && null != n["return"] && (a = n["return"](), Object(a) !== a)) return;
                 } finally {
                     if (s) throw o;
                 }
@@ -181,56 +181,56 @@
     function k(e) {
         if (Array.isArray(e)) return e;
     }
-    function F(e, t) {
+    function x(e, t) {
         if (null == e) return {};
-        var r, n, o = x(e, t);
+        var n, r, o = C(e, t);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < i.length; n++) {
-                r = i[n], -1 === t.indexOf(r) && {}.propertyIsEnumerable.call(e, r) && (o[r] = e[r]);
+            for (r = 0; r < i.length; r++) {
+                n = i[r], -1 === t.indexOf(n) && {}.propertyIsEnumerable.call(e, n) && (o[n] = e[n]);
             }
         }
         return o;
     }
-    function x(e, t) {
+    function C(e, t) {
         if (null == e) return {};
-        var r = {};
-        for (var n in e) {
-            if ({}.hasOwnProperty.call(e, n)) {
-                if (-1 !== t.indexOf(n)) continue;
-                r[n] = e[n];
+        var n = {};
+        for (var r in e) {
+            if ({}.hasOwnProperty.call(e, r)) {
+                if (-1 !== t.indexOf(r)) continue;
+                n[r] = e[r];
             }
         }
-        return r;
+        return n;
     }
-    function C(e, t) {
-        var r = Object.keys(e);
+    function F(e, t) {
+        var n = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
-            var n = Object.getOwnPropertySymbols(e);
-            t && (n = n.filter((function(t) {
+            var r = Object.getOwnPropertySymbols(e);
+            t && (r = r.filter((function(t) {
                 return Object.getOwnPropertyDescriptor(e, t).enumerable;
-            }))), r.push.apply(r, n);
+            }))), n.push.apply(n, r);
         }
-        return r;
+        return n;
     }
     function N(e) {
         for (var t = 1; t < arguments.length; t++) {
-            var r = null != arguments[t] ? arguments[t] : {};
-            t % 2 ? C(Object(r), !0).forEach((function(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));
+            var n = null != arguments[t] ? arguments[t] : {};
+            t % 2 ? F(Object(n), !0).forEach((function(t) {
+                A(e, t, n[t]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : F(Object(n)).forEach((function(t) {
+                Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(n, t));
             }));
         }
         return e;
     }
-    function A(e, t, r) {
+    function A(e, t, n) {
         return (t = T(t)) in e ? Object.defineProperty(e, t, {
-            value: r,
+            value: n,
             enumerable: !0,
             configurable: !0,
             writable: !0
-        }) : e[t] = r, e;
+        }) : e[t] = n, e;
     }
     function T(e) {
         var t = E(e, "string");
@@ -238,10 +238,10 @@
     }
     function E(e, t) {
         if ("object" != h(e) || !e) return e;
-        var r = e[Symbol.toPrimitive];
-        if (void 0 !== r) {
-            var n = r.call(e, t || "default");
-            if ("object" != h(n)) return n;
+        var n = e[Symbol.toPrimitive];
+        if (void 0 !== n) {
+            var r = n.call(e, t || "default");
+            if ("object" != h(r)) return r;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
         return ("string" === t ? String : Number)(e);
@@ -266,40 +266,40 @@
         takeFocus: i().bool
     };
     var q = function e(t) {
-        var r;
+        var n;
         switch (t) {
           case "slideFromTop":
           case "slideFromBottom":
           case "expandHeight":
           case "none":
-            r = "height";
+            n = "height";
             break;
 
           case "slideFromLeft":
           case "slideFromRight":
           case "expandWidth":
-            r = "width";
+            n = "width";
             break;
 
           default:
  // Intentionally left empty.
                 }
-        return r;
+        return n;
     };
     var M = function e(t) {
-        var r = t.animation, n = t.open, o = t.value;
+        var n = t.animation, r = t.open, o = t.value;
         var i = {
-            value: n ? o : 0
+            value: r ? o : 0
         };
         var a = {
-            value: n ? 0 : o
+            value: r ? 0 : o
         };
         var u = {
             precision: 1
         };
  // Only use precision when not using transform, otherwise transform animation will break
         // Expansion doesn't require a valid value; the subsequent render animates it.
-                if (r === "expandWidth" || r === "expandHeight" || r === "none") {
+                if (n === "expandWidth" || n === "expandHeight" || n === "none") {
             return {
                 to: i,
                 config: u
@@ -309,7 +309,7 @@
                 if (!o) {
             return null;
         }
-        if (r !== "slideFromTop" && r !== "slideFromLeft") {
+        if (n !== "slideFromTop" && n !== "slideFromLeft") {
             // Return the standard transition if not using a transform.
             return {
                 to: i,
@@ -319,9 +319,9 @@
         }
         // 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 l = n === "slideFromTop" ? "Y" : "X";
+        var s = "translate".concat(l, "(").concat(r ? 0 : -o, "px)");
+        var c = "translate".concat(l, "(").concat(r ? -o : 0, "px)");
         return {
             to: N({
                 transform: s
@@ -331,21 +331,21 @@
             }, a)
         };
     };
-    var W = function e(t) {
-        var r = t.animation, n = t.el, o = t.takeFocusProp;
+    var _ = function e(t) {
+        var n = t.animation, r = t.el, o = t.takeFocusProp;
         var i = 0;
-        if (n) {
+        if (r) {
             if (o) {
-                (0, s.takeFocus)(n, "container");
+                (0, s.takeFocus)(r, "container");
             }
-            var a = q(r);
+            var a = q(n);
             switch (a) {
               case "height":
-                i = n.offsetHeight;
+                i = r.offsetHeight;
                 break;
 
               case "width":
-                i = n.offsetWidth;
+                i = r.offsetWidth;
                 break;
 
               default:
@@ -354,24 +354,26 @@
         }
         return i;
     };
-    var _ = {};
     var R = {};
+    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 ? _ : h, j = e.onAnimationEnd, w = e.onAnimationStart, P = e.open, k = e.outerClassName, x = e.outerId, C = e.outerStyle, T = C === void 0 ? R : C, E = e.renderChildrenWhenCollapsed, I = e.retainFocus, D = e.takeFocus, H = F(e, [ "animation", "animateOnMount", "children", "className", "elementRef", "id", "innerClassName", "innerStyle", "onAnimationEnd", "onAnimationStart", "open", "outerClassName", "outerId", "outerStyle", "renderChildrenWhenCollapsed", "retainFocus", "takeFocus" ]);
+        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.onAnimationStart, P = e.open, k = e.outerClassName, C = e.outerId, F = e.outerStyle, T = F === void 0 ? W : F, E = e.renderChildrenWhenCollapsed, I = e.retainFocus, D = e.takeFocus, H = x(e, [ "animation", "animateOnMount", "children", "className", "elementRef", "id", "innerClassName", "innerStyle", "onAnimationEnd", "onAnimationStart", "open", "outerClassName", "outerId", "outerStyle", "renderChildrenWhenCollapsed", "retainFocus", "takeFocus" ]);
         // @docs-props-type TransitionOpenPropsBase
                 var L = l()(P);
-        var $ = (0, r.useRef)(true);
-        var B = (0, r.useState)(i ? P : false), K = O(B, 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() {
+        var $ = (0, n.useRef)(true);
+        var B = (0, n.useState)(i ? P : false), K = O(B, 2), U = K[0], X = K[1];
+        var Y = (0, n.useState)(null), z = O(Y, 2), G = z[0], J = z[1];
+        var Q = (0, n.useState)(0), V = O(Q, 2), Z = V[0], ee = V[1];
+        var te = (0, n.useState)(P), ne = O(te, 2), re = ne[0], oe = ne[1];
+        (0, n.useLayoutEffect)((function() {
             // prevOpen starts undefined, and we don't want to make the comparison in that situation
             if (L !== undefined && P !== L) {
                 X(true);
+                oe(P);
             }
         }), [ P, L ]);
         // equivalent to componentDidMount and componentWillUnmount
-                (0, r.useEffect)((function() {
+                (0, n.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
             $.current = true;
@@ -379,70 +381,68 @@
                 $.current = false;
             };
         }), []);
-        var te = (0, r.useCallback)((function(e) {
+        var ie = (0, n.useCallback)((function(e) {
             J(e);
-            ee(W({
+            ee(_({
                 animation: o,
                 el: e,
                 takeFocusProp: D
             }));
             b(d, e);
         }), [ o, D, d ]);
-        var re = (0, r.useCallback)((function() {
+        var ae = (0, n.useCallback)((function() {
             w === null || w === void 0 ? void 0 : w();
         }), [ w ]);
-        var ne = (0, r.useCallback)((function() {
+        var ue = (0, n.useCallback)((function() {
             if ($.current) {
                 X(false);
             }
             j === null || j === void 0 ? void 0 : j();
         }), [ j ]);
-        var oe = (0, r.useCallback)((function(e) {
+        var le = (0, n.useCallback)((function(e) {
             if (G) {
                 (0, s.handleTab)(G, e);
             }
         }), [ G ]);
-        var ie = (0, a.useAnimation)(N(N({}, M({
+        var se = (0, a.useAnimation)(N(N({}, M({
             animation: o,
-            open: P,
+            open: re,
             value: Z
         })), {}, {
             immediate: o === "none",
-            onRest: ne,
-            onStart: re
-        })), ae = ie.value, ue = ie.transform;
-        var le;
-        /* 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 (o.startsWith("slideFrom") || U || E) {
-            le = q(o);
+            onRest: ue,
+            onStart: ae
+        })), ce = se.value, fe = se.transform;
+        var de;
+        if (U || E) {
+            de = q(o);
         }
         // if renderChildrenWhenCollapsed is true, we hide the content by setting the height of the wrapper to 0
-                var se = E && !P && !U ? 0 : ae;
-        var ce = (0, r.useMemo)((function() {
-            return N(N({}, T), le && A({}, le, se));
-        }), [ le, se, T ]);
-        var fe = (0, r.useMemo)((function() {
+                var me = E && !re && !U ? 0 : ce;
+        var pe = (0, n.useMemo)((function() {
+            return N(N({}, T), de && A({}, de, me));
+        }), [ de, me, T ]);
+        var ve = (0, n.useMemo)((function() {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             return N(N({}, S), {}, {
-                transform: ue
+                transform: fe
             });
-        }), [ S, ue ]);
+        }), [ S, fe ]);
         
-        return n().createElement(v, {
-            $hideOverflow: !P || U || false,
+        return r().createElement(v, {
+            $hideOverflow: !re || U || false,
             className: (0, c.toClassName)(f, k),
-            style: ce,
-            id: x
-        }, (P || U || E) &&  n().createElement(y, g({
+            style: pe,
+            id: C
+        }, (re || U || E) &&  r().createElement(y, g({
             "data-test": "transition-open"
         }, H, {
-            ref: te,
+            ref: ie,
             tabIndex: -1,
             className: p,
             id: m,
-            onKeyDown: I ? oe : undefined,
-            style: fe
+            onKeyDown: I ? le : undefined,
+            style: ve
         }), u));
     }
     D.propTypes = I;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "5.7.0",
+  "version": "5.7.1",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -45,7 +45,7 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@react-spring/web": "^9.7.5",
-    "@splunk/react-icons": "^5.6.0",
+    "@splunk/react-icons": "^5.7.0",
     "@splunk/themes": "^1.4.1",
     "@splunk/ui-utils": "^1.12.0",
     "decimal.js-light": "^2.5.1",
@@ -63,7 +63,7 @@
     "@babel/core": "^7.28.0",
     "@babel/plugin-transform-runtime": "^7.28.0",
     "@splunk/babel-preset": "^4.0.0",
-    "@splunk/docs-gen": "^1.2.0",
+    "@splunk/docs-gen": "^1.3.0",
     "@splunk/eslint-config": "^5.0.0",
     "@splunk/react-docs": "^1.4.0",
     "@splunk/stylelint-config": "^5.0.0",

package/types/src/TransitionOpen/TransitionOpen.d.ts

@@ -39,7 +39,7 @@ interface TransitionOpenPropsBase {
     takeFocus?: boolean;
 }
 type TransitionOpenProps = ComponentProps<TransitionOpenPropsBase, 'div'>;
-declare function TransitionOpen({ animation, animateOnMount, children, className, elementRef, id, innerClassName, innerStyle, onAnimationEnd, onAnimationStart, open, outerClassName, outerId, outerStyle, renderChildrenWhenCollapsed, retainFocus, takeFocus: takeFocusProp, ...otherProps }: TransitionOpenProps): React.JSX.Element;
+declare function TransitionOpen({ animation, animateOnMount, children, className, elementRef, id, innerClassName, innerStyle, onAnimationEnd, onAnimationStart, open: openProp, outerClassName, outerId, outerStyle, renderChildrenWhenCollapsed, retainFocus, takeFocus: takeFocusProp, ...otherProps }: TransitionOpenProps): React.JSX.Element;
 declare namespace TransitionOpen {
     var propTypes: {
         animation: PropTypes.Requireable<string>;