@splunk/react-ui 5.1.0 → 5.3.0

package/CollapsiblePanel.js

@@ -61,8 +61,8 @@
         e.r(n);
     // EXPORTS
         e.d(n, {
-        SingleOpenPanelGroup: () => /* reexport */ oe,
-        default: () => /* reexport */ we
+        SingleOpenPanelGroup: () => /* reexport */ ne,
+        default: () => /* reexport */ he
     });
     // CONCATENATED MODULE: external "react"
     const t = require("react");
@@ -78,145 +78,119 @@
     var c =  e.n(s);
     // CONCATENATED MODULE: external "@splunk/react-ui/usePrevious"
     const u = require("@splunk/react-ui/usePrevious");
-    var p =  e.n(u);
+    var d =  e.n(u);
     // CONCATENATED MODULE: external "@splunk/ui-utils/id"
-    const d = require("@splunk/ui-utils/id");
+    const p = require("@splunk/ui-utils/id");
     // CONCATENATED MODULE: external "styled-components"
     const f = require("styled-components");
     var b =  e.n(f);
-    // CONCATENATED MODULE: external "@splunk/react-ui/Box"
-    const v = require("@splunk/react-ui/Box");
+    // CONCATENATED MODULE: external "@splunk/react-icons/ChevronRight"
+    const v = require("@splunk/react-icons/ChevronRight");
     var y =  e.n(v);
-    // CONCATENATED MODULE: external "@splunk/react-ui/ButtonSimple"
-    const m = require("@splunk/react-ui/ButtonSimple");
+    // CONCATENATED MODULE: external "@splunk/react-ui/Box"
+    const m = require("@splunk/react-ui/Box");
     var g =  e.n(m);
-    // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const h = require("@splunk/react-ui/Clickable");
+    // CONCATENATED MODULE: external "@splunk/react-ui/ButtonSimple"
+    const h = require("@splunk/react-ui/ButtonSimple");
     var S =  e.n(h);
+    // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
+    const O = require("@splunk/react-ui/Clickable");
+    var C =  e.n(O);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const C = require("@splunk/themes");
-    // CONCATENATED MODULE: external "@splunk/react-icons/ChevronRight"
-    const O = require("@splunk/react-icons/ChevronRight");
-    var P =  e.n(O);
-    // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/ChevronRight"
-    const w = require("@splunk/react-icons/enterprise/ChevronRight");
-    var k =  e.n(w);
-    // CONCATENATED MODULE: ./src/CollapsiblePanel/icons/ExpandPanel.tsx
-    var I = {
-        className: l().string
-    };
-    var j = function e(n) {
-        var t = n.className;
-        var a = (0, C.useSplunkTheme)(), l = a.isEnterprise;
-        return l ?  r().createElement(k(), {
-            className: t,
-            hideDefaultTooltip: true,
-            screenReaderText: null
-        }) :  r().createElement(P(), {
-            className: t
-        });
-    };
-    j.propTypes = I;
-    /* harmony default export */    const x = j;
+    const P = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/CollapsiblePanel/CollapsiblePanelStyles.ts
-    var E = b()(y()).withConfig({
+    var w = b()(g()).withConfig({
         displayName: "CollapsiblePanelStyles__StyledBox",
         componentId: "sc-1phikbp-0"
     })([ "display:flex;flex-direction:column;flex-shrink:1;min-height:28px;background-color:", ";& + &{margin-top:1px;}" ], (0, 
-    C.pickVariant)("$appearance", {
+    P.pickVariant)("$appearance", {
         default: {
-            prisma: C.variables.backgroundColorSection,
+            prisma: P.variables.backgroundColorSection,
             enterprise: {
-                dark: C.variables.gray22,
-                light: C.variables.white
+                dark: P.variables.gray22,
+                light: P.variables.white
             }
         },
-        subtle: C.variables.transparent
+        subtle: P.variables.transparent
     }));
-    var _ = b()(y()).withConfig({
+    var k = b()(g()).withConfig({
         displayName: "CollapsiblePanelStyles__StyledSingleOpenPanelGroupBox",
         componentId: "sc-1phikbp-1"
-    })([ "", ";flex-direction:column;margin-bottom:0;" ], C.mixins.reset("flex"));
+    })([ "", ";flex-direction:column;margin-bottom:0;" ], P.mixins.reset("flex"));
     /*
     these styles are consistent for both regular and actions, but applied to different elements
     * in regular mode, they're on the SVG's span wrapper
     * in actionsMode, they're on the button
     applying them directly to the icon wrapper doesn't work because Enterprise has 1px border around the button
-*/    var N = (0, f.css)([ "min-width:16px;" ]);
-    var A = b().span.withConfig({
+*/    var I = (0, f.css)([ "min-width:16px;" ]);
+    var j = b().span.withConfig({
         displayName: "CollapsiblePanelStyles__StyledIconWrapper",
         componentId: "sc-1phikbp-2"
-    })([ "display:inline-block;flex:0 auto;", "" ], N);
-    var T = b().div.withConfig({
+    })([ "display:inline-block;flex:0 auto;", "" ], I);
+    var x = b().div.withConfig({
         displayName: "CollapsiblePanelStyles__StyledActions",
         componentId: "sc-1phikbp-3"
-    })([ "display:flex;flex-shrink:0;border-bottom:0;gap:", ";position:relative;padding:", " ", ";transition:background-color 0.2s,border 0.2s,box-shadow 0.2s;color:", ";background-color:", ";", "" ], C.variables.spacingSmall, C.variables.spacingXSmall, C.variables.spacingLarge, C.variables.contentColorActive, (0, 
-    C.pickVariant)("$appearance", {
-        default: C.variables.neutral100,
-        subtle: C.variables.transparent
+    })([ "display:flex;flex-shrink:0;border-bottom:0;gap:", ";position:relative;padding:", " ", ";transition:background-color 0.2s,border 0.2s,box-shadow 0.2s;color:", ";background-color:", ";", "" ], P.variables.spacingSmall, P.variables.spacingXSmall, P.variables.spacingLarge, P.variables.contentColorActive, (0, 
+    P.pickVariant)("$appearance", {
+        default: P.variables.neutral100,
+        subtle: P.variables.transparent
     }), (function(e) {
         var n = e.$disabled;
-        return n && (0, f.css)([ "color:", ";" ], C.variables.contentColorDisabled);
+        return n && (0, f.css)([ "color:", ";" ], P.variables.contentColorDisabled);
     }));
-    var $ = b()(g()).withConfig({
+    var E = b()(S()).withConfig({
         displayName: "CollapsiblePanelStyles__StyledToggleButton",
         componentId: "sc-1phikbp-4"
-    })([ "flex:0 auto;padding:0;min-width:28px;line-height:", ";" ], C.variables.lineHeight);
-    var q = b()(S()).withConfig({
+    })([ "flex:0 auto;padding:0;min-width:28px;line-height:", ";" ], P.variables.lineHeight);
+    var _ = b()(C()).withConfig({
         displayName: "CollapsiblePanelStyles__StyledTitleClickable",
         componentId: "sc-1phikbp-5"
-    })([ "width:100%;flex-shrink:0;border-bottom:0;gap:", ";cursor:pointer;position:relative;display:flex;transition:background-color 0.2s,border 0.2s,box-shadow 0.2s;padding:", " ", ";color:", ";background-color:", ";&[disabled],&[aria-disabled='true']{cursor:not-allowed;color:", ";}&:focus:not([disabled]),&:active:not([disabled],[aria-disabled='true']){box-shadow:", ";z-index:1;}&:hover:not([disabled],[aria-disabled='true']){background-color:", ";}" ], C.variables.spacingSmall, C.variables.spacingXSmall, C.variables.spacingLarge, C.variables.contentColorActive, (0, 
-    C.pickVariant)("$appearance", {
-        default: C.variables.neutral100,
-        subtle: C.variables.transparent
-    }), C.variables.contentColorDisabled, C.variables.focusShadowInset, C.mixins.overlayColors(C.variables.neutral100, C.variables.interactiveColorOverlayHover));
-    var D = b().span.withConfig({
+    })([ "width:100%;flex-shrink:0;border-bottom:0;gap:", ";cursor:pointer;position:relative;display:flex;transition:background-color 0.2s,border 0.2s,box-shadow 0.2s;padding:", " ", ";color:", ";background-color:", ";&[disabled],&[aria-disabled='true']{cursor:not-allowed;color:", ";}&:focus:not([disabled]),&:active:not([disabled],[aria-disabled='true']){box-shadow:", ";z-index:1;}&:hover:not([disabled],[aria-disabled='true']){background-color:", ";}" ], P.variables.spacingSmall, P.variables.spacingXSmall, P.variables.spacingLarge, P.variables.contentColorActive, (0, 
+    P.pickVariant)("$appearance", {
+        default: P.variables.neutral100,
+        subtle: P.variables.transparent
+    }), P.variables.contentColorDisabled, P.variables.focusShadowInset, P.mixins.overlayColors(P.variables.neutral100, P.variables.interactiveColorOverlayHover));
+    var A = b().span.withConfig({
         displayName: "CollapsiblePanelStyles__StyledHeadingContent",
         componentId: "sc-1phikbp-6"
-    })([ "display:flex;justify-content:space-between;flex:1 1 auto;font-weight:", ";line-height:", ";", "" ], C.variables.fontWeightSemiBold, C.variables.lineHeight, (function(e) {
+    })([ "display:flex;justify-content:space-between;flex:1 1 auto;font-weight:", ";line-height:", ";", "" ], P.variables.fontWeightSemiBold, P.variables.lineHeight, (function(e) {
         var n = e.$disabled;
-        return n && (0, f.css)([ "color:", ";" ], C.variables.contentColorDisabled);
+        return n && (0, f.css)([ "color:", ";" ], P.variables.contentColorDisabled);
     }));
-    var R = b().span.withConfig({
+    var $ = b().span.withConfig({
         displayName: "CollapsiblePanelStyles__StyledHeadingActions",
         componentId: "sc-1phikbp-7"
-    })([ "min-height:", ";flex:1 0 auto;" ], C.variables.inputHeight);
-    var B = b().span.withConfig({
+    })([ "min-height:", ";flex:1 0 auto;" ], P.variables.inputHeight);
+    var N = b().span.withConfig({
         displayName: "CollapsiblePanelStyles__StyledDescription",
         componentId: "sc-1phikbp-8"
-    })([ "color:", ";font-size:", ";margin-left:", ";line-height:1.8;", "" ], C.variables.contentColorDefault, C.variables.fontSizeSmall, C.variables.spacingSmall, (function(e) {
+    })([ "color:", ";font-size:", ";margin-left:", ";line-height:1.8;", "" ], P.variables.contentColorDefault, P.variables.fontSizeSmall, P.variables.spacingSmall, (function(e) {
         var n = e.$disabled;
-        return n && (0, f.css)([ "color:", ";" ], C.variables.contentColorDisabled);
+        return n && (0, f.css)([ "color:", ";" ], P.variables.contentColorDisabled);
     }));
-    var M = b().div.withConfig({
+    var q = b().div.withConfig({
         displayName: "CollapsiblePanelStyles__StyledInsetWrapper",
         componentId: "sc-1phikbp-9"
-    })([ "", ";gap:", ";", "" ], C.mixins.reset("block"), C.variables.spacingSmall, (function(e) {
+    })([ "", ";gap:", ";", "" ], P.mixins.reset("block"), P.variables.spacingSmall, (function(e) {
         var n = e.$inset;
-        return n && (0, f.css)([ "padding:", ";" ], C.variables.spacingLarge);
+        return n && (0, f.css)([ "padding:", ";" ], P.variables.spacingLarge);
     }));
-    var L = b()(x).withConfig({
+    var D = b()(y()).withConfig({
         displayName: "CollapsiblePanelStyles__StyledExpandPanelIcon",
         componentId: "sc-1phikbp-10"
-    })([ "transition:transform ", ";", " width:100%;vertical-align:", ";" ], (0, C.pick)({
-        enterprise: "300ms",
-        prisma: "200ms"
-    }), (function(e) {
-        var n = e.open;
+    })([ "transition:transform 200ms;", " width:100%;vertical-align:text-bottom;" ], (function(e) {
+        var n = e.$open;
         return n && (0, f.css)([ "transform:rotate(90deg);" ]);
-    }), (0, C.pick)({
-        enterprise: "baseline",
-        prisma: "text-bottom"
     }));
     // CONCATENATED MODULE: external "lodash/omit"
-    const W = require("lodash/omit");
-    var H =  e.n(W);
+    const T = require("lodash/omit");
+    var M =  e.n(T);
     // CONCATENATED MODULE: ./src/CollapsiblePanel/SingleOpenPanelGroupContext.tsx
-    var V =  (0, t.createContext)({});
-    /* harmony default export */    const G = V;
+    var R =  (0, t.createContext)({});
+    /* harmony default export */    const B = R;
     // CONCATENATED MODULE: ./src/CollapsiblePanel/SingleOpenPanelGroup.tsx
-    function U() {
-        return U = Object.assign ? Object.assign.bind() : function(e) {
+    function L() {
+        return L = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var t = arguments[n];
                 for (var r in t) {
@@ -224,41 +198,41 @@
                 }
             }
             return e;
-        }, U.apply(null, arguments);
+        }, L.apply(null, arguments);
     }
-    function z(e) {
-        return J(e) || F(e) || Y(e) || X();
+    function W(e) {
+        return G(e) || V(e) || X(e) || H();
     }
-    function X() {
+    function H() {
         throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
-    function F(e) {
+    function V(e) {
         if ("undefined" != typeof Symbol && null != e[Symbol.iterator] || null != e["@@iterator"]) return Array.from(e);
     }
-    function J(e) {
-        if (Array.isArray(e)) return Z(e);
+    function G(e) {
+        if (Array.isArray(e)) return F(e);
     }
-    function K(e, n) {
-        return ne(e) || ee(e, n) || Y(e, n) || Q();
+    function U(e, n) {
+        return K(e) || J(e, n) || X(e, n) || z();
     }
-    function Q() {
+    function z() {
         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 Y(e, n) {
+    function X(e, n) {
         if (e) {
-            if ("string" == typeof e) return Z(e, n);
+            if ("string" == typeof e) return F(e, n);
             var t = {}.toString.call(e).slice(8, -1);
-            return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? Z(e, n) : void 0;
+            return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? F(e, n) : void 0;
         }
     }
-    function Z(e, n) {
+    function F(e, n) {
         (null == n || n > e.length) && (n = e.length);
         for (var t = 0, r = Array(n); t < n; t++) {
             r[t] = e[t];
         }
         return r;
     }
-    function ee(e, n) {
+    function J(e, n) {
         var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != t) {
             var r, a, l, o, i = [], s = !0, c = !1;
@@ -280,32 +254,32 @@
             return i;
         }
     }
-    function ne(e) {
+    function K(e) {
         if (Array.isArray(e)) return e;
     }
-    function te(e, n) {
+    function Q(e, n) {
         if (null == e) return {};
-        var t, r, a = re(e, n);
+        var t, r, a = Y(e, n);
         if (Object.getOwnPropertySymbols) {
             var l = Object.getOwnPropertySymbols(e);
             for (r = 0; r < l.length; r++) {
-                t = l[r], n.includes(t) || {}.propertyIsEnumerable.call(e, t) && (a[t] = e[t]);
+                t = l[r], -1 === n.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (a[t] = e[t]);
             }
         }
         return a;
     }
-    function re(e, n) {
+    function Y(e, n) {
         if (null == e) return {};
         var t = {};
         for (var r in e) {
             if ({}.hasOwnProperty.call(e, r)) {
-                if (n.includes(r)) continue;
+                if (-1 !== n.indexOf(r)) continue;
                 t[r] = e[r];
             }
         }
         return t;
     }
-    /** @public */    var ae = {
+    /** @public */    var Z = {
         children: l().node,
         defaultOpenPanelId: l().any,
         elementRef: l().oneOfType([ l().func, l().object ]),
@@ -313,10 +287,10 @@
         onChange: l().func,
         openPanelId: l().any
     };
-    function le(e) {
-        var n = e.children, a = e.defaultOpenPanelId, l = e.elementRef, o = e.inset, i = o === void 0 ? true : o, s = e.onChange, u = e.openPanelId, p = te(e, [ "children", "defaultOpenPanelId", "elementRef", "inset", "onChange", "openPanelId" ]);
+    function ee(e) {
+        var n = e.children, a = e.defaultOpenPanelId, l = e.elementRef, o = e.inset, i = o === void 0 ? true : o, s = e.onChange, u = e.openPanelId, d = Q(e, [ "children", "defaultOpenPanelId", "elementRef", "inset", "onChange", "openPanelId" ]);
         // @docs-props-type SingleOpenPanelGroupPropsBase
-                var d = c()({
+                var p = c()({
             componentName: "SingleOpenPanelGroup",
             /* eslint-disable-next-line prefer-rest-params */
             componentProps: arguments[0],
@@ -324,48 +298,48 @@
             defaultValuePropName: "defaultOpenPanelId",
             valuePropName: "openPanelId"
         });
-        var f = !d ? a : undefined;
-        var b = (0, t.useState)(f), v = K(b, 2), y = v[0], m = v[1];
+        var f = !p ? a : undefined;
+        var b = (0, t.useState)(f), v = U(b, 2), y = v[0], m = v[1];
         var g = (0, t.useCallback)((function(e, n) {
             var t = n.panelId;
-            var r = d ? u : y;
+            var r = p ? u : y;
             var a = r === t ? null : t;
-            if (!d) {
+            if (!p) {
                 m(a);
             }
             s === null || s === void 0 ? void 0 : s(e, n);
-        }), [ d, u, y, s ]);
+        }), [ p, u, y, s ]);
         var h = t.Children.toArray(n).filter(t.isValidElement);
  // remove false, null, 0, etc
                 var S = (0, t.useMemo)((function() {
             return {
                 onChange: g,
-                openPanelId: d ? u : y,
+                openPanelId: p ? u : y,
                 inset: i
             };
-        }), [ g, i, d, u, y ]);
+        }), [ g, i, p, u, y ]);
         
-        return r().createElement(_, U({
+        return r().createElement(k, L({
             "data-test": "single-open-panel-group",
             "data-test-open-panel-id": u,
             elementRef: l
-        }, H().apply(void 0, [ p ].concat(z(Object.keys(ae))))),  r().createElement(G.Provider, {
+        }, M().apply(void 0, [ d ].concat(W(Object.keys(Z))))),  r().createElement(B.Provider, {
             value: S
         }, h));
     }
-    le.propTypes = ae;
-    /* harmony default export */    const oe = le;
+    ee.propTypes = Z;
+    /* harmony default export */    const ne = ee;
     // CONCATENATED MODULE: ./src/CollapsiblePanel/CollapsiblePanel.tsx
-    function ie(e) {
+    function te(e) {
         "@babel/helpers - typeof";
-        return ie = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return te = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
             return typeof e;
         } : function(e) {
             return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
-        }, ie(e);
+        }, te(e);
     }
-    function se() {
-        return se = Object.assign ? Object.assign.bind() : function(e) {
+    function re() {
+        return re = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var t = arguments[n];
                 for (var r in t) {
@@ -373,9 +347,9 @@
                 }
             }
             return e;
-        }, se.apply(null, arguments);
+        }, re.apply(null, arguments);
     }
-    function ce(e, n) {
+    function ae(e, n) {
         var t = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var r = Object.getOwnPropertySymbols(e);
@@ -385,60 +359,60 @@
         }
         return t;
     }
-    function ue(e) {
+    function le(e) {
         for (var n = 1; n < arguments.length; n++) {
             var t = null != arguments[n] ? arguments[n] : {};
-            n % 2 ? ce(Object(t), !0).forEach((function(n) {
-                pe(e, n, t[n]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ce(Object(t)).forEach((function(n) {
+            n % 2 ? ae(Object(t), !0).forEach((function(n) {
+                oe(e, n, t[n]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ae(Object(t)).forEach((function(n) {
                 Object.defineProperty(e, n, Object.getOwnPropertyDescriptor(t, n));
             }));
         }
         return e;
     }
-    function pe(e, n, t) {
-        return (n = de(n)) in e ? Object.defineProperty(e, n, {
+    function oe(e, n, t) {
+        return (n = ie(n)) in e ? Object.defineProperty(e, n, {
             value: t,
             enumerable: !0,
             configurable: !0,
             writable: !0
         }) : e[n] = t, e;
     }
-    function de(e) {
-        var n = fe(e, "string");
-        return "symbol" == ie(n) ? n : n + "";
+    function ie(e) {
+        var n = se(e, "string");
+        return "symbol" == te(n) ? n : n + "";
     }
-    function fe(e, n) {
-        if ("object" != ie(e) || !e) return e;
+    function se(e, n) {
+        if ("object" != te(e) || !e) return e;
         var t = e[Symbol.toPrimitive];
         if (void 0 !== t) {
             var r = t.call(e, n || "default");
-            if ("object" != ie(r)) return r;
+            if ("object" != te(r)) return r;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
         return ("string" === n ? String : Number)(e);
     }
-    function be(e, n) {
-        return he(e) || ge(e, n) || ye(e, n) || ve();
+    function ce(e, n) {
+        return be(e) || fe(e, n) || de(e, n) || ue();
     }
-    function ve() {
+    function ue() {
         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 ye(e, n) {
+    function de(e, n) {
         if (e) {
-            if ("string" == typeof e) return me(e, n);
+            if ("string" == typeof e) return pe(e, n);
             var t = {}.toString.call(e).slice(8, -1);
-            return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? me(e, n) : void 0;
+            return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? pe(e, n) : void 0;
         }
     }
-    function me(e, n) {
+    function pe(e, n) {
         (null == n || n > e.length) && (n = e.length);
         for (var t = 0, r = Array(n); t < n; t++) {
             r[t] = e[t];
         }
         return r;
     }
-    function ge(e, n) {
+    function fe(e, n) {
         var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != t) {
             var r, a, l, o, i = [], s = !0, c = !1;
@@ -460,32 +434,32 @@
             return i;
         }
     }
-    function he(e) {
+    function be(e) {
         if (Array.isArray(e)) return e;
     }
-    function Se(e, n) {
+    function ve(e, n) {
         if (null == e) return {};
-        var t, r, a = Ce(e, n);
+        var t, r, a = ye(e, n);
         if (Object.getOwnPropertySymbols) {
             var l = Object.getOwnPropertySymbols(e);
             for (r = 0; r < l.length; r++) {
-                t = l[r], n.includes(t) || {}.propertyIsEnumerable.call(e, t) && (a[t] = e[t]);
+                t = l[r], -1 === n.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (a[t] = e[t]);
             }
         }
         return a;
     }
-    function Ce(e, n) {
+    function ye(e, n) {
         if (null == e) return {};
         var t = {};
         for (var r in e) {
             if ({}.hasOwnProperty.call(e, r)) {
-                if (n.includes(r)) continue;
+                if (-1 !== n.indexOf(r)) continue;
                 t[r] = e[r];
             }
         }
         return t;
     }
-    /** @public */    var Oe = {
+    /** @public */    var me = {
         innerBodyStyles: l().object,
         actions: l().node,
         appearance: l().oneOf([ "default", "subtle" ]),
@@ -503,12 +477,12 @@
         renderChildrenWhenCollapsed: l().bool,
         title: l().node.isRequired
     };
-    function Pe(e) {
-        var n = e.innerBodyStyles, a = e.actions, l = e.appearance, o = l === void 0 ? "default" : l, s = e.children, u = e.defaultOpen, f = u === void 0 ? undefined : u, b = e.description, v = e.disabled, y = e.elementRef, m = e.headingLevel, g = e.onChange, h = e.open, S = e.overflow, C = S === void 0 ? "auto" : S, O = e.panelId, P = e.renderChildrenWhenCollapsed, w = e.title, k = e.inset, I = k === void 0 ? true : k, j = Se(e, [ "innerBodyStyles", "actions", "appearance", "children", "defaultOpen", "description", "disabled", "elementRef", "headingLevel", "onChange", "open", "overflow", "panelId", "renderChildrenWhenCollapsed", "title", "inset" ]);
+    function ge(e) {
+        var n = e.innerBodyStyles, a = e.actions, l = e.appearance, o = l === void 0 ? "default" : l, s = e.children, u = e.defaultOpen, f = u === void 0 ? undefined : u, b = e.description, v = e.disabled, y = e.elementRef, m = e.headingLevel, g = e.onChange, h = e.open, S = e.overflow, O = S === void 0 ? "auto" : S, C = e.panelId, P = e.renderChildrenWhenCollapsed, k = e.title, I = e.inset, T = I === void 0 ? true : I, M = ve(e, [ "innerBodyStyles", "actions", "appearance", "children", "defaultOpen", "description", "disabled", "elementRef", "headingLevel", "onChange", "open", "overflow", "panelId", "renderChildrenWhenCollapsed", "title", "inset" ]);
         // @docs-props-type CollapsiblePanelPropsBase
-                var x = (0, t.useContext)(G);
-        var _ = Object.keys(x).length !== 0;
-        var N = c()({
+                var R = (0, t.useContext)(B);
+        var L = Object.keys(R).length !== 0;
+        var W = c()({
             componentName: "CollapsiblePanel",
             /* eslint-disable-next-line prefer-rest-params */
             componentProps: arguments[0],
@@ -516,125 +490,127 @@
             defaultValuePropName: "defaultOpen",
             valuePropName: "open"
         });
-        var W = (0, t.useState)("container-".concat((0, d.createGUID)())), H = be(W, 1), V = H[0];
-        var U = (0, t.useState)("toggle-".concat((0, d.createGUID)())), z = be(U, 1), X = z[0];
-        var F = p()(h);
-        var J = !N ? f || false : undefined;
-        var K = (0, t.useState)(J), Q = be(K, 2), Y = Q[0], Z = Q[1];
-        var ee = (0, t.useState)(), ne = be(ee, 2), te = ne[0], re = ne[1];
-        var ae = (0, t.useState)(false), le = be(ae, 2), oe = le[0], ie = le[1];
-        /**
-   * SingleOpenPanelGroup already takes into account if it is controlled or not in determining openPanelId
-   * so context.openPanelId is used for both the controlled and uncontrolled case.
-   */        (0, t.useEffect)((function() {
-            var e;
-            if (_) {
-                e = x.openPanelId === O;
-            } else {
-                e = N ? h : Y;
+        var H = (0, t.useState)("container-".concat((0, p.createGUID)())), V = ce(H, 1), G = V[0];
+        var U = (0, t.useState)("toggle-".concat((0, p.createGUID)())), z = ce(U, 1), X = z[0];
+        var F = d()(h);
+        var J = !W ? f || false : undefined;
+        var K = (0, t.useState)(J), Q = ce(K, 2), Y = Q[0], Z = Q[1];
+        var ee = (0, t.useState)(false), ne = ce(ee, 2), te = ne[0], ae = ne[1];
+        var oe = (0, t.useMemo)((function() {
+            if (L) {
+                /**
+       * SingleOpenPanelGroup already takes into account if it is controlled or not in determining openPanelId
+       * so context.openPanelId is used for both the controlled and uncontrolled case.
+       */
+                return R.openPanelId === C;
             }
-            re(e);
-        }), [ x.openPanelId, _, N, h, Y, O ]);
+            return W ? h : Y;
+        }), [ R.openPanelId, L, W, h, Y, C ]);
+        // SUI-7877 Must initialize openPanel with value to avoid re-render animation bug
+                var ie = (0, t.useState)(oe), se = ce(ie, 2), ue = se[0], de = se[1];
+        (0, t.useEffect)((function() {
+            de(oe);
+        }), [ oe ]);
         // Only testing this in the scenario of a SingleOpenPanelGroup.
                 (0, t.useEffect)((function() {
             if (false) {}
-        }), [ f, _, h ]);
+        }), [ f, L, h ]);
         (0, t.useEffect)((function() {
             if (F != null && h !== F) {
-                ie(true);
+                ae(true);
             }
         }), [ h, F ]);
-        var ce = (0, t.useCallback)((function(e) {
+        var pe = (0, t.useCallback)((function(e) {
             var n;
-            if (!N) {
-                ie(true);
-                Z(!te);
+            if (!W) {
+                ae(true);
+                Z(!ue);
             }
-            var t = te ? "close" : "open";
+            var t = ue ? "close" : "open";
             g === null || g === void 0 ? void 0 : g(e, {
-                panelId: O,
+                panelId: C,
                 reason: "toggleClick",
                 action: t
             });
-            (n = x.onChange) === null || n === void 0 ? void 0 : n.call(x, e, {
-                panelId: O,
+            (n = R.onChange) === null || n === void 0 ? void 0 : n.call(R, e, {
+                panelId: C,
                 reason: "toggleClick",
                 action: t
             });
-        }), [ x, N, te, g, O ]);
-        var pe = (0, t.useCallback)((function() {
-            ie(false);
+        }), [ R, W, ue, g, C ]);
+        var fe = (0, t.useCallback)((function() {
+            ae(false);
         }), []);
-        var de = (0, d.createDOMID)("panel-toggle");
-        var fe = {
+        var be = (0, p.createDOMID)("panel-toggle");
+        var ye = {
             disabled: v,
-            onClick: ce,
+            onClick: pe,
             id: X,
-            "aria-controls": V,
-            "aria-expanded": te,
+            "aria-controls": G,
+            "aria-expanded": ue,
             "data-test": "toggle"
         };
-        var ve = (0, t.useMemo)((function() {
+        var me = (0, t.useMemo)((function() {
             return {
-                overflow: oe ? "hidden" : C
+                overflow: te ? "hidden" : O
             };
-        }), [ oe, C ]);
-        var ye = (0, t.useMemo)((function() {
-            return ue({
+        }), [ te, O ]);
+        var ge = (0, t.useMemo)((function() {
+            return le({
                 tableLayout: "fixed"
             }, n);
         }), [ n ]);
         
-        return r().createElement(E, se({
+        return r().createElement(w, re({
             "data-test": "collapsible-panel",
             elementRef: y,
             $appearance: o
-        }, j), a != null ?  r().createElement(T, {
+        }, M), a != null ?  r().createElement(x, {
             $appearance: o,
             $disabled: !!v
-        },  r().createElement($, se({
+        },  r().createElement(E, re({
             appearance: "secondary",
-            "aria-labelledby": de
-        }, fe),  r().createElement(L, {
-            open: !!te
-        })),  r().createElement(D, {
+            "aria-labelledby": be
+        }, ye),  r().createElement(D, {
+            $open: !!ue
+        })),  r().createElement(A, {
             $disabled: !!v,
             "data-test": "title",
-            id: de
-        }, w),  r().createElement(R, null, a)) : 
+            id: be
+        }, k),  r().createElement($, null, a)) : 
         
         /* Clickable component is not allowed to have role="heading" so it is wrapped with a span */
         r().createElement("span", {
             "data-test": "heading",
             role: m ? "heading" : undefined,
             "aria-level": m
-        },  r().createElement(q, se({
+        },  r().createElement(_, re({
             $appearance: o
-        }, fe),  r().createElement(A, null,  r().createElement(L, {
-            open: !!te
-        })),  r().createElement(D, {
+        }, ye),  r().createElement(j, null,  r().createElement(D, {
+            $open: !!ue
+        })),  r().createElement(A, {
             $disabled: !!v
         },  r().createElement("span", {
             "data-test": "title"
-        }, w), b &&  r().createElement(B, {
+        }, k), b &&  r().createElement(N, {
             $disabled: !!v,
             "data-test": "description"
         }, b)))),  r().createElement(i(), {
-            outerId: V,
+            outerId: G,
             "aria-labelledby": X,
             "data-test": "body",
-            outerStyle: ve,
-            innerStyle: ye,
-            open: te,
-            onAnimationEnd: pe,
+            outerStyle: me,
+            innerStyle: ge,
+            open: ue,
+            onAnimationEnd: fe,
             role: a != null ? "region" : undefined,
             renderChildrenWhenCollapsed: P
-        },  r().createElement(M, {
-            $inset: I
+        },  r().createElement(q, {
+            $inset: T
         }, s)));
     }
-    Pe.propTypes = Oe;
-    /* harmony default export */    const we = Pe;
+    ge.propTypes = me;
+    /* harmony default export */    const he = ge;
     // CONCATENATED MODULE: ./src/CollapsiblePanel/index.ts
     module.exports = n;
     /******/})();