@splunk/react-ui 4.32.0 → 4.34.0

package/CollapsiblePanel.js

@@ -61,15 +61,15 @@
         e.r(t);
     // EXPORTS
         e.d(t, {
-        SingleOpenPanelGroup: () => /* reexport */ se,
-        default: () => /* reexport */ we
+        SingleOpenPanelGroup: () => /* reexport */ ce,
+        default: () => /* reexport */ je
     });
     // CONCATENATED MODULE: external "react"
     const n = require("react");
     var r =  e.n(n);
     // CONCATENATED MODULE: external "lodash/has"
-    const o = require("lodash/has");
-    var a =  e.n(o);
+    const a = require("lodash/has");
+    var o =  e.n(a);
     // CONCATENATED MODULE: external "lodash/keys"
     const i = require("lodash/keys");
     var l =  e.n(i);
@@ -80,223 +80,233 @@
     const p = require("prop-types");
     var u =  e.n(p);
     // CONCATENATED MODULE: external "@splunk/react-ui/TransitionOpen"
-    const f = require("@splunk/react-ui/TransitionOpen");
-    var d =  e.n(f);
+    const d = require("@splunk/react-ui/TransitionOpen");
+    var f =  e.n(d);
     // CONCATENATED MODULE: external "@splunk/ui-utils/id"
     const b = require("@splunk/ui-utils/id");
+    // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
+    const v = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "@splunk/react-ui/usePrevious"
-    const v = require("@splunk/react-ui/usePrevious");
-    var m =  e.n(v);
+    const m = require("@splunk/react-ui/usePrevious");
+    var y =  e.n(m);
     // CONCATENATED MODULE: external "styled-components"
-    const y = require("styled-components");
-    var h =  e.n(y);
+    const h = require("styled-components");
+    var g =  e.n(h);
     // CONCATENATED MODULE: external "@splunk/react-ui/Box"
-    const g = require("@splunk/react-ui/Box");
-    var k =  e.n(g);
+    const k = require("@splunk/react-ui/Box");
+    var C =  e.n(k);
     // CONCATENATED MODULE: external "@splunk/react-ui/ButtonSimple"
-    const C = require("@splunk/react-ui/ButtonSimple");
-    var x =  e.n(C);
+    const x = require("@splunk/react-ui/ButtonSimple");
+    var O =  e.n(x);
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const O = require("@splunk/react-ui/Clickable");
-    var S =  e.n(O);
+    const S = require("@splunk/react-ui/Clickable");
+    var I =  e.n(S);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const I = require("@splunk/themes");
+    const P = require("@splunk/themes");
     // CONCATENATED MODULE: external "@splunk/react-icons/ChevronRight"
-    const P = require("@splunk/react-icons/ChevronRight");
-    var w =  e.n(P);
+    const w = require("@splunk/react-icons/ChevronRight");
+    var j =  e.n(w);
     // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/ChevronRight"
-    const j = require("@splunk/react-icons/enterprise/ChevronRight");
-    var E =  e.n(j);
-    // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const _ = require("@splunk/ui-utils/i18n");
+    const E = require("@splunk/react-icons/enterprise/ChevronRight");
+    var _ =  e.n(E);
     // CONCATENATED MODULE: ./src/CollapsiblePanel/icons/ExpandPanel.tsx
     var q = {
-        className: u().string,
-        open: u().bool
+        className: u().string
     };
     var R = function e(t) {
-        var n = t.className, o = t.open;
-        var a = (0, I.useSplunkTheme)(), i = a.isEnterprise;
-        var l = o ? (0, _._)("Panel is open") : (0, _._)("Panel is closed");
-        return i ?  r().createElement(E(), {
+        var n = t.className;
+        var a = (0, P.useSplunkTheme)(), o = a.isEnterprise;
+        return o ?  r().createElement(_(), {
             className: n,
             hideDefaultTooltip: true,
-            screenReaderText: l
-        }) :  r().createElement(w(), {
-            "aria-label": l,
+            screenReaderText: null
+        }) :  r().createElement(j(), {
             className: n
         });
     };
     R.propTypes = q;
     /* harmony default export */    const A = R;
     // CONCATENATED MODULE: ./src/CollapsiblePanel/CollapsiblePanelStyles.ts
-    var T = h()(k()).withConfig({
+    var D = g()(C()).withConfig({
         displayName: "CollapsiblePanelStyles__StyledBox",
         componentId: "sc-1phikbp-0"
-    })([ "display:flex;flex-direction:column;flex-shrink:1;min-height:", ";", ";& + &{margin-top:", ";}" ], (0, 
-    I.pick)({
-        enterprise: (0, y.css)([ "calc(", " + 12px)" ], I.variables.lineHeight),
+    })([ "display:flex;flex-direction:column;flex-shrink:1;", ";", ";& + &{margin-top:", ";}" ], (0, 
+    P.pick)({
+        enterprise: (0, h.css)([ "min-height:calc(", " + 12px);" ], P.variables.lineHeight),
         prisma: {
-            comfortable: "56px",
-            compact: "48px"
+            comfortable: (0, h.css)([ "min-height:56px;" ]),
+            compact: (0, h.css)([ "min-height:48px;" ])
         }
-    }), (0, I.pick)({
-        prisma: (0, y.css)([ "background-color:", ";" ], I.variables.backgroundColorSection)
-    }), (0, I.pick)({
+    }), (0, P.pick)({
+        prisma: (0, h.css)([ "background-color:", ";" ], P.variables.backgroundColorSection)
+    }), (0, P.pick)({
         enterprise: "2px",
         prisma: "1px"
     }));
-    var D = h()(k()).withConfig({
+    var T = g()(C()).withConfig({
         displayName: "CollapsiblePanelStyles__StyledSingleOpenPanelGroupBox",
         componentId: "sc-1phikbp-1"
-    })([ "", ";flex-direction:column;margin-bottom:0;", "" ], I.mixins.reset("flex"), (0, 
-    I.pick)({
-        enterprise: (0, y.css)([ "background:", ";" ], I.variables.backgroundColor)
+    })([ "", ";flex-direction:column;margin-bottom:0;", "" ], P.mixins.reset("flex"), (0, 
+    P.pick)({
+        enterprise: (0, h.css)([ "background:", ";" ], P.variables.backgroundColor)
     }));
     /*
     these styles are consistent for both regular and titleWithActions, but applied to different elements
     * in regular mode, they're on the SVG's span wrapper
     * in titleWithActionsMode, 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, y.css)([ "min-width:", ";" ], (0, I.pick)({
+*/    var N = (0, h.css)([ "min-width:", ";" ], (0, P.pick)({
         enterprise: "20px",
         prisma: "35px"
     }));
-    var W = h().span.withConfig({
+    var X = g().span.withConfig({
         displayName: "CollapsiblePanelStyles__StyledIconWrapper",
         componentId: "sc-1phikbp-2"
     })([ "display:inline-block;flex:0 auto;", "" ], N);
-    var B = h().div.withConfig({
+    var W = g().div.withConfig({
         displayName: "CollapsiblePanelStyles__StyledTitleWithActions",
         componentId: "sc-1phikbp-3"
     })([ "display:flex;flex-shrink:0;border-bottom:0;position:relative;padding:", ";transition:background-color 0.2s,border 0.2s,box-shadow 0.2s;color:", ";", " ", "" ], (0, 
-    I.pick)({
-        enterprise: (0, y.css)([ "", " ", " ", " ", "" ], I.variables.spacingXSmall, I.variables.spacingSmall, I.variables.spacingXSmall, I.variables.spacingXSmall),
+    P.pick)({
+        enterprise: (0, h.css)([ "", " ", " ", " ", "" ], P.variables.spacingXSmall, P.variables.spacingSmall, P.variables.spacingXSmall, P.variables.spacingXSmall),
         prisma: {
             comfortable: "8px 10px 8px 11px",
             compact: "8px 10px 8px 11px"
         }
-    }), (0, I.pick)({
-        enterprise: I.variables.textColor,
-        prisma: I.variables.contentColorActive
-    }), (0, I.pick)({
-        prisma: (0, y.css)([ "background-color:", ";" ], I.variables.interactiveColorBackground),
+    }), (0, P.pick)({
+        enterprise: P.variables.textColor,
+        prisma: P.variables.contentColorActive
+    }), (0, P.pick)({
+        prisma: (0, h.css)([ "background-color:", ";" ], P.variables.interactiveColorBackground),
         enterprise: {
-            dark: (0, y.css)([ "background-color:", ";" ], I.variables.gray45),
-            light: (0, y.css)([ "background-color:", ";" ], I.variables.gray96)
+            dark: (0, h.css)([ "background-color:", ";" ], P.variables.gray45),
+            light: (0, h.css)([ "background-color:", ";" ], P.variables.gray96)
         }
     }), (function(e) {
         var t = e.$disabled;
-        return t && (0, y.css)([ "cursor:default;color:", ";" ], (0, I.pick)({
-            enterprise: I.variables.contentColorDefault,
-            prisma: I.variables.contentColorDisabled
+        return t && (0, h.css)([ "cursor:default;color:", ";" ], (0, P.pick)({
+            enterprise: P.variables.contentColorDefault,
+            prisma: P.variables.contentColorDisabled
         }));
     }));
-    var $ = h()(x()).withConfig({
+    var B = g()(O()).withConfig({
         displayName: "CollapsiblePanelStyles__StyledToggleButton",
         componentId: "sc-1phikbp-4"
     })([ "flex:0 auto;padding:0;", "" ], N);
-    var M = h()(S()).withConfig({
+    var L = g()(I()).withConfig({
         displayName: "CollapsiblePanelStyles__StyledTitleClickable",
         componentId: "sc-1phikbp-5"
-    })([ "width:100%;flex-shrink:0;border-bottom:0;cursor:pointer;position:relative;display:flex;transition:background-color 0.2s,border 0.2s,box-shadow 0.2s;padding:", ";color:", ";", " ", " &[disabled]{cursor:default;color:", ";}&:focus:not([disabled]),&:active:not([disabled]){color:", ";box-shadow:", ";}&:hover:not([disabled]){color:", ";background-color:", ";}" ], (0, 
-    I.pick)({
+    })([ "width:100%;flex-shrink:0;border-bottom:0;cursor:pointer;position:relative;display:flex;transition:background-color 0.2s,border 0.2s,box-shadow 0.2s;padding:", ";color:", ";", " ", " &[disabled]{cursor:default;color:", ";}&:focus:not([disabled]),&:active:not([disabled]){color:", ";box-shadow:", ";z-index:1;}&:hover:not([disabled]){color:", ";background-color:", ";}" ], (0, 
+    P.pick)({
         enterprise: "6px 30px 6px 5px",
         prisma: {
             comfortable: "18px 20px 18px 11px",
             compact: "14px 20px 14px 11px"
         }
-    }), (0, I.pick)({
-        enterprise: I.variables.textColor,
-        prisma: I.variables.contentColorActive
-    }), (0, I.pick)({
-        prisma: (0, y.css)([ "background-color:", ";" ], I.variables.interactiveColorBackground)
-    }), (0, I.pickVariant)("$open", {
+    }), (0, P.pick)({
+        enterprise: P.variables.textColor,
+        prisma: P.variables.contentColorActive
+    }), (0, P.pick)({
+        prisma: (0, h.css)([ "background-color:", ";" ], P.variables.interactiveColorBackground)
+    }), (0, P.pickVariant)("$open", {
         false: {
             enterprise: {
-                dark: (0, y.css)([ "background-color:", ";" ], I.variables.gray45),
-                light: (0, y.css)([ "background-color:", ";" ], I.variables.gray96)
+                dark: (0, h.css)([ "background-color:", ";" ], P.variables.gray45),
+                light: (0, h.css)([ "background-color:", ";" ], P.variables.gray96)
             }
         }
-    }), (0, I.pick)({
-        enterprise: I.variables.contentColorDefault,
-        prisma: I.variables.contentColorDisabled
-    }), (0, I.pick)({
-        enterprise: I.variables.textColor,
-        prisma: I.variables.contentColorActive
-    }), I.variables.focusShadowInset, (0, I.pick)({
-        enterprise: I.variables.textColor,
-        prisma: I.variables.contentColorActive
-    }), (0, I.pick)({
+    }), (0, P.pick)({
+        enterprise: P.variables.contentColorDefault,
+        prisma: P.variables.contentColorDisabled
+    }), (0, P.pick)({
+        enterprise: P.variables.textColor,
+        prisma: P.variables.contentColorActive
+    }), P.variables.focusShadow, (0, P.pick)({
+        enterprise: P.variables.textColor,
+        prisma: P.variables.contentColorActive
+    }), (0, P.pick)({
         enterprise: {
-            light: I.variables.gray92,
-            dark: I.variables.gray30
+            light: P.variables.gray92,
+            dark: P.variables.gray30
         },
-        prisma: I.mixins.overlayColors(I.variables.interactiveColorBackground, I.variables.interactiveColorOverlayHover)
+        prisma: P.mixins.overlayColors(P.variables.interactiveColorBackground, P.variables.interactiveColorOverlayHover)
     }));
-    var H = h().span.withConfig({
+    var $ = g().span.withConfig({
         displayName: "CollapsiblePanelStyles__StyledHeadingContent",
         componentId: "sc-1phikbp-6"
     })([ "display:flex;justify-content:space-between;margin-left:", ";flex:1 1 auto;", " ", "" ], (0, 
-    I.pick)({
+    P.pick)({
         enterprise: "5px",
         prisma: "6px"
-    }), (0, I.pick)({
-        prisma: (0, y.css)([ "font-weight:", ";" ], I.variables.fontWeightSemiBold)
+    }), (0, P.pick)({
+        prisma: (0, h.css)([ "font-weight:", ";" ], P.variables.fontWeightSemiBold)
     }), (function(e) {
         var t = e.$titleWithActions;
-        return t && (0, y.css)([ "min-height:", ";" ], (0, I.pick)({
+        return t && (0, h.css)([ "min-height:", ";" ], (0, P.pick)({
             prisma: {
-                comfortable: "40px",
-                compact: "32px"
+                comfortable: P.variables.spacingXXXLarge,
+                compact: P.variables.spacingXXLarge
             }
         }));
     }));
-    var L = h().span.withConfig({
-        displayName: "CollapsiblePanelStyles__StyledDescription",
+    var M = g().span.withConfig({
+        displayName: "CollapsiblePanelStyles__StyledHeadingActions",
         componentId: "sc-1phikbp-7"
-    })([ "font-size:", ";margin-left:", ";" ], I.variables.fontSizeSmall, (0, I.pick)({
-        enterprise: I.variables.spacingHalf,
-        prisma: I.variables.spacingLarge
+    })([ "min-height:", ";flex:1 0 auto;" ], (0, P.pick)({
+        prisma: {
+            comfortable: P.variables.spacingXXXLarge,
+            compact: P.variables.spacingXXLarge
+        }
     }));
-    var G = h().div.withConfig({
-        displayName: "CollapsiblePanelStyles__StyledInsetWrapper",
+    var G = g().span.withConfig({
+        displayName: "CollapsiblePanelStyles__StyledDescription",
         componentId: "sc-1phikbp-8"
-    })([ "", ";padding:", ";" ], I.mixins.reset("block"), (0, I.pickVariant)("$inset", {
-        true: (0, I.pick)({
+    })([ "font-size:", ";margin-left:", ";" ], P.variables.fontSizeSmall, (0, P.pick)({
+        enterprise: P.variables.spacingSmall,
+        prisma: P.variables.spacingLarge
+    }));
+    var H = g().div.withConfig({
+        displayName: "CollapsiblePanelStyles__StyledInsetWrapper",
+        componentId: "sc-1phikbp-9"
+    })([ "", ";padding:", ";" ], P.mixins.reset("block"), (0, P.pickVariant)("$inset", {
+        true: (0, P.pick)({
             enterprise: {
-                compact: I.variables.spacingQuarter,
-                comfortable: I.variables.spacingHalf
+                compact: P.variables.spacingXSmall,
+                comfortable: P.variables.spacingSmall
             },
             prisma: {
-                compact: I.variables.spacingMedium,
-                comfortable: I.variables.spacingXLarge
+                compact: P.variables.spacingMedium,
+                comfortable: P.variables.spacingXLarge
             }
         }),
         false: 0
     }));
-    var U = h()(A).withConfig({
+    var U = g()(A).withConfig({
         displayName: "CollapsiblePanelStyles__StyledExpandPanelIcon",
-        componentId: "sc-1phikbp-9"
+        componentId: "sc-1phikbp-10"
     })([ "transition:transform ", ";", ";", " width:100%;vertical-align:", ";" ], (0, 
-    I.pick)({
+    P.pick)({
         enterprise: "300ms",
         prisma: "200ms"
-    }), (0, I.pick)({
-        prisma: (0, y.css)([ "color:", ";[disabled] &{color:inherit;}" ], I.variables.contentColorDefault)
+    }), (0, P.pick)({
+        enterprise: (0, h.css)([ "[disabled] &{color:", ";}" ], (0, P.pick)({
+            dark: P.variables.contentColorDefault,
+            light: P.variables.contentColorDisabled
+        })),
+        prisma: (0, h.css)([ "color:", ";[disabled] &{color:inherit;}" ], P.variables.contentColorDefault)
     }), (function(e) {
         var t = e.open;
-        return t && (0, y.css)([ "transform:rotate(90deg);" ]);
-    }), (0, I.pick)({
+        return t && (0, h.css)([ "transform:rotate(90deg);" ]);
+    }), (0, P.pick)({
         enterprise: "baseline",
         prisma: "text-bottom"
     }));
     // CONCATENATED MODULE: ./src/CollapsiblePanel/SingleOpenPanelGroupContext.tsx
-    var X =  (0, n.createContext)({});
-    /* harmony default export */    const V = X;
+    var z =  (0, n.createContext)({});
+    /* harmony default export */    const V = z;
     // CONCATENATED MODULE: ./src/CollapsiblePanel/SingleOpenPanelGroup.tsx
-    function z() {
-        z = Object.assign || function(e) {
+    function F() {
+        F = Object.assign || function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var n = arguments[t];
                 for (var r in n) {
@@ -307,75 +317,75 @@
             }
             return e;
         };
-        return z.apply(this, arguments);
+        return F.apply(this, arguments);
     }
-    function Q(e) {
-        return K(e) || J(e) || ee(e) || F();
+    function J(e) {
+        return Y(e) || Q(e) || te(e) || K();
     }
-    function F() {
+    function K() {
         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 J(e) {
+    function Q(e) {
         if (typeof Symbol !== "undefined" && Symbol.iterator in Object(e)) return Array.from(e);
     }
-    function K(e) {
-        if (Array.isArray(e)) return te(e);
+    function Y(e) {
+        if (Array.isArray(e)) return ne(e);
     }
-    function Y(e, t) {
-        return re(e) || ne(e, t) || ee(e, t) || Z();
+    function Z(e, t) {
+        return ae(e) || re(e, t) || te(e, t) || ee();
     }
-    function Z() {
+    function ee() {
         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 ee(e, t) {
+    function te(e, t) {
         if (!e) return;
-        if (typeof e === "string") return te(e, t);
+        if (typeof e === "string") return ne(e, t);
         var n = Object.prototype.toString.call(e).slice(8, -1);
         if (n === "Object" && e.constructor) n = e.constructor.name;
         if (n === "Map" || n === "Set") return Array.from(e);
-        if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return te(e, t);
+        if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return ne(e, t);
     }
-    function te(e, t) {
+    function ne(e, t) {
         if (t == null || t > e.length) t = e.length;
         for (var n = 0, r = new Array(t); n < t; n++) {
             r[n] = e[n];
         }
         return r;
     }
-    function ne(e, t) {
+    function re(e, t) {
         if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(e))) return;
         var n = [];
         var r = true;
-        var o = false;
-        var a = undefined;
+        var a = false;
+        var o = undefined;
         try {
             for (var i = e[Symbol.iterator](), l; !(r = (l = i.next()).done); r = true) {
                 n.push(l.value);
                 if (t && n.length === t) break;
             }
         } catch (e) {
-            o = true;
-            a = e;
+            a = true;
+            o = e;
         } finally {
             try {
                 if (!r && i["return"] != null) i["return"]();
             } finally {
-                if (o) throw a;
+                if (a) throw o;
             }
         }
         return n;
     }
-    function re(e) {
+    function ae(e) {
         if (Array.isArray(e)) return e;
     }
     function oe(e, t) {
         if (e == null) return {};
-        var n = ae(e, t);
-        var r, o;
+        var n = ie(e, t);
+        var r, a;
         if (Object.getOwnPropertySymbols) {
-            var a = Object.getOwnPropertySymbols(e);
-            for (o = 0; o < a.length; o++) {
-                r = a[o];
+            var o = Object.getOwnPropertySymbols(e);
+            for (a = 0; a < o.length; a++) {
+                r = o[a];
                 if (t.indexOf(r) >= 0) continue;
                 if (!Object.prototype.propertyIsEnumerable.call(e, r)) continue;
                 n[r] = e[r];
@@ -383,19 +393,19 @@
         }
         return n;
     }
-    function ae(e, t) {
+    function ie(e, t) {
         if (e == null) return {};
         var n = {};
         var r = Object.keys(e);
-        var o, a;
-        for (a = 0; a < r.length; a++) {
-            o = r[a];
-            if (t.indexOf(o) >= 0) continue;
-            n[o] = e[o];
+        var a, o;
+        for (o = 0; o < r.length; o++) {
+            a = r[o];
+            if (t.indexOf(a) >= 0) continue;
+            n[a] = e[a];
         }
         return n;
     }
-    /** @public */    var ie = {
+    /** @public */    var le = {
         children: u().node,
         defaultOpenPanelId: u().any,
         elementRef: u().oneOfType([ u().func, u().object ]),
@@ -403,26 +413,26 @@
         onChange: u().func,
         openPanelId: u().any
     };
-    function le(e) {
+    function se(e) {
         // @docs-props-type SingleOpenPanelGroupPropsBase
-        var t = e.children, o = e.defaultOpenPanelId, i = e.elementRef, l = e.inset, s = l === void 0 ? false : l, p = e.onChange, u = e.openPanelId, f = oe(e, [ "children", "defaultOpenPanelId", "elementRef", "inset", "onChange", "openPanelId" ]);
-        var d = a()(e, "openPanelId");
-        var b = m()(o);
-        var v = !d ? o : undefined;
-        var y = (0, n.useState)(v), h = Y(y, 2), g = h[0], k = h[1];
+        var t = e.children, a = e.defaultOpenPanelId, i = e.elementRef, l = e.inset, s = l === void 0 ? false : l, p = e.onChange, u = e.openPanelId, d = oe(e, [ "children", "defaultOpenPanelId", "elementRef", "inset", "onChange", "openPanelId" ]);
+        var f = o()(e, "openPanelId");
+        var b = y()(a);
+        var v = !f ? a : undefined;
+        var m = (0, n.useState)(v), h = Z(m, 2), g = h[0], k = h[1];
         var C = function e() {
-            var t = d ? u : g;
+            var t = f ? u : g;
             return t;
         };
         var x = (0, n.useCallback)((function(e, t) {
             var n = t.panelId;
             var r = C();
-            var o = r === n ? null : n;
-            if (!d) {
-                k(o);
+            var a = r === n ? null : n;
+            if (!f) {
+                k(a);
             }
             p === null || p === void 0 ? void 0 : p(e, t);
-        }), [ u, d, g, C, p ]);
+        }), [ u, f, g, C, p ]);
         (0, n.useEffect)((function() {
             if (false) {}
  // In this functional component, we want the dependencies to be [], but when we do that
@@ -431,46 +441,46 @@
                 }), []);
         (0, n.useEffect)((function() {
             if (false) {}
-        }), [ b, d ]);
+        }), [ b, f ]);
         (0, n.useEffect)((function() {
             if (false) {}
-        }), [ b, o ]);
+        }), [ b, a ]);
         var O = n.Children.toArray(t).filter(n.isValidElement);
  // remove false, null, 0, etc
                 var S = (0, n.useMemo)((function() {
             return {
                 onChange: x,
-                openPanelId: d ? u : g,
+                openPanelId: f ? u : g,
                 inset: s
             };
-        }), [ x, d, s, u, g ]);
+        }), [ x, f, s, u, g ]);
         
-        return r().createElement(D, z({
+        return r().createElement(T, F({
             "data-test": "single-open-panel-group",
             "data-test-open-panel-id": u,
             elementRef: i
-        }, c().apply(void 0, [ f ].concat(Q(Object.keys(ie))))),  r().createElement(V.Provider, {
+        }, c().apply(void 0, [ d ].concat(J(Object.keys(le))))),  r().createElement(V.Provider, {
             value: S
         }, O));
     }
-    le.propTypes = ie;
-    /* harmony default export */    const se = le;
+    se.propTypes = le;
+    /* harmony default export */    const ce = se;
     // CONCATENATED MODULE: ./src/CollapsiblePanel/CollapsiblePanel.tsx
-    function ce(e) {
+    function pe(e) {
         "@babel/helpers - typeof";
         if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-            ce = function e(t) {
+            pe = function e(t) {
                 return typeof t;
             };
         } else {
-            ce = function e(t) {
+            pe = function e(t) {
                 return t && typeof Symbol === "function" && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
             };
         }
-        return ce(e);
+        return pe(e);
     }
-    function pe() {
-        pe = Object.assign || function(e) {
+    function ue() {
+        ue = Object.assign || function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var n = arguments[t];
                 for (var r in n) {
@@ -481,9 +491,9 @@
             }
             return e;
         };
-        return pe.apply(this, arguments);
+        return ue.apply(this, arguments);
     }
-    function ue(e, t) {
+    function de(e, t) {
         var n = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var r = Object.getOwnPropertySymbols(e);
@@ -498,25 +508,25 @@
         for (var t = 1; t < arguments.length; t++) {
             var n = arguments[t] != null ? arguments[t] : {};
             if (t % 2) {
-                ue(Object(n), true).forEach((function(t) {
-                    Oe(e, t, n[t]);
+                de(Object(n), true).forEach((function(t) {
+                    Se(e, t, n[t]);
                 }));
             } else if (Object.getOwnPropertyDescriptors) {
                 Object.defineProperties(e, Object.getOwnPropertyDescriptors(n));
             } else {
-                ue(Object(n)).forEach((function(t) {
+                de(Object(n)).forEach((function(t) {
                     Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(n, t));
                 }));
             }
         }
         return e;
     }
-    function de(e, t) {
+    function be(e, t) {
         if (!(e instanceof t)) {
             throw new TypeError("Cannot call a class as a function");
         }
     }
-    function be(e, t) {
+    function ve(e, t) {
         for (var n = 0; n < t.length; n++) {
             var r = t[n];
             r.enumerable = r.enumerable || false;
@@ -525,12 +535,12 @@
             Object.defineProperty(e, r.key, r);
         }
     }
-    function ve(e, t, n) {
-        if (t) be(e.prototype, t);
-        if (n) be(e, n);
+    function me(e, t, n) {
+        if (t) ve(e.prototype, t);
+        if (n) ve(e, n);
         return e;
     }
-    function me(e, t) {
+    function ye(e, t) {
         if (typeof t !== "function" && t !== null) {
             throw new TypeError("Super expression must either be null or a function");
         }
@@ -541,41 +551,41 @@
                 configurable: true
             }
         });
-        if (t) ye(e, t);
+        if (t) he(e, t);
     }
-    function ye(e, t) {
-        ye = Object.setPrototypeOf || function e(t, n) {
+    function he(e, t) {
+        he = Object.setPrototypeOf || function e(t, n) {
             t.__proto__ = n;
             return t;
         };
-        return ye(e, t);
+        return he(e, t);
     }
-    function he(e) {
-        var t = Ce();
+    function ge(e) {
+        var t = xe();
         return function n() {
-            var r = xe(e), o;
+            var r = Oe(e), a;
             if (t) {
-                var a = xe(this).constructor;
-                o = Reflect.construct(r, arguments, a);
+                var o = Oe(this).constructor;
+                a = Reflect.construct(r, arguments, o);
             } else {
-                o = r.apply(this, arguments);
+                a = r.apply(this, arguments);
             }
-            return ge(this, o);
+            return ke(this, a);
         };
     }
-    function ge(e, t) {
-        if (t && (ce(t) === "object" || typeof t === "function")) {
+    function ke(e, t) {
+        if (t && (pe(t) === "object" || typeof t === "function")) {
             return t;
         }
-        return ke(e);
+        return Ce(e);
     }
-    function ke(e) {
+    function Ce(e) {
         if (e === void 0) {
             throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
         }
         return e;
     }
-    function Ce() {
+    function xe() {
         if (typeof Reflect === "undefined" || !Reflect.construct) return false;
         if (Reflect.construct.sham) return false;
         if (typeof Proxy === "function") return true;
@@ -586,13 +596,13 @@
             return false;
         }
     }
-    function xe(e) {
-        xe = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
+    function Oe(e) {
+        Oe = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
             return t.__proto__ || Object.getPrototypeOf(t);
         };
-        return xe(e);
+        return Oe(e);
     }
-    function Oe(e, t, n) {
+    function Se(e, t, n) {
         if (t in e) {
             Object.defineProperty(e, t, {
                 value: n,
@@ -605,8 +615,9 @@
         }
         return e;
     }
-    var Se = {
+    var Ie = {
         innerBodyStyles: u().object,
+        actions: u().node,
         children: u().node,
         defaultOpen: u().bool,
         description: u().string,
@@ -624,43 +635,43 @@
         title: u().node.isRequired,
         titleWithActions: u().bool
     };
-    var Ie = {
+    var Pe = {
         disabled: false,
         overflow: "auto",
         renderChildrenWhenCollapsed: false,
         titleWithActions: false,
         inset: false
     };
-    var Pe =  function(e) {
-        me(n, e);
-        var t = he(n);
+    var we =  function(e) {
+        ye(n, e);
+        var t = ge(n);
         // @docs-props-type CollapsiblePanelPropsBase
                 function n(e) {
             var r;
-            de(this, n);
+            be(this, n);
             r = t.call(this, e);
-            Oe(ke(r), "controlledExternally", void 0);
-            Oe(ke(r), "containerId", void 0);
-            Oe(ke(r), "toggleId", void 0);
-            Oe(ke(r), "handleRequestClose", (function(e) {
-                var t = r.props, n = t.panelId, o = t.onRequestClose;
-                o === null || o === void 0 ? void 0 : o({
+            Se(Ce(r), "controlledExternally", void 0);
+            Se(Ce(r), "containerId", void 0);
+            Se(Ce(r), "toggleId", void 0);
+            Se(Ce(r), "handleRequestClose", (function(e) {
+                var t = r.props, n = t.panelId, a = t.onRequestClose;
+                a === null || a === void 0 ? void 0 : a({
                     event: e,
                     panelId: n,
                     reason: "toggleClick"
                 });
             }));
-            Oe(ke(r), "handleRequestOpen", (function(e) {
-                var t = r.props, n = t.panelId, o = t.onRequestOpen;
-                o === null || o === void 0 ? void 0 : o({
+            Se(Ce(r), "handleRequestOpen", (function(e) {
+                var t = r.props, n = t.panelId, a = t.onRequestOpen;
+                a === null || a === void 0 ? void 0 : a({
                     event: e,
                     panelId: n,
                     reason: "toggleClick"
                 });
             }));
-            Oe(ke(r), "handleChange", (function(e) {
+            Se(Ce(r), "handleChange", (function(e) {
                 var t, n;
-                var o = r.props, a = o.panelId, i = o.onChange;
+                var a = r.props, o = a.panelId, i = a.onChange;
                 var l = r.isOpen();
                 if (!r.isControlled()) {
                     r.setState({
@@ -670,12 +681,12 @@
                 }
                 var s = l ? "close" : "open";
                 i === null || i === void 0 ? void 0 : i(e, {
-                    panelId: a,
+                    panelId: o,
                     reason: "toggleClick",
                     action: s
                 });
                 (t = (n = r.context).onChange) === null || t === void 0 ? void 0 : t.call(n, e, {
-                    panelId: a,
+                    panelId: o,
                     reason: "toggleClick",
                     action: s
                 });
@@ -686,12 +697,12 @@
                     r.handleRequestOpen(e);
                 }
             }));
-            Oe(ke(r), "handleAnimationEnd", (function() {
+            Se(Ce(r), "handleAnimationEnd", (function() {
                 r.setState({
                     animating: false
                 });
             }));
-            r.controlledExternally = a()(e, "open");
+            r.controlledExternally = o()(e, "open");
             r.state = fe(fe({}, !r.isControlled() ? {
                 open: e.defaultOpen || false
             } : undefined), {}, {
@@ -699,12 +710,13 @@
             });
             if (false) {}
             if (false) {}
+            if (false) {}
             r.containerId = "container-".concat((0, b.createGUID)());
             r.toggleId = "toggle-".concat((0, b.createGUID)());
             return r;
         }
  // Only testing this in the scenario of a SingleOpenPanelGroup.
-                ve(n, [ {
+                me(n, [ {
             key: "componentDidMount",
             value: function e() {
                 if (false) {}
@@ -740,68 +752,73 @@
         }, {
             key: "render",
             value: function e() {
-                var t = this.props, o = t.innerBodyStyles, a = t.children, i = t.description, s = t.disabled, p = t.elementRef, u = t.headingLevel, f = t.overflow, b = t.renderChildrenWhenCollapsed, v = t.title, m = t.titleWithActions, y = t.inset;
-                var h = this.state.animating;
-                var g = this.isOpen();
-                var k = {
-                    disabled: s,
+                var t = this.props, a = t.innerBodyStyles, o = t.actions, i = t.children, s = t.description, p = t.disabled, u = t.elementRef, d = t.headingLevel, m = t.overflow, y = t.renderChildrenWhenCollapsed, h = t.title, g = t.titleWithActions, k = t.inset;
+                var C = this.state.animating;
+                var x = (0, b.createDOMID)("panel-toggle");
+                var O = this.isOpen();
+                var S = {
+                    disabled: p,
                     onClick: this.handleChange,
                     id: this.toggleId,
                     "aria-controls": this.containerId,
-                    "aria-expanded": g,
-                    $open: !!g,
+                    "aria-expanded": O,
+                    $open: !!O,
                     "data-test": "toggle"
                 };
                 
-                return r().createElement(T, pe({
+                return r().createElement(D, ue({
                     "data-test": "collapsible-panel",
-                    elementRef: p
-                }, c()(this.props, l()(n.propTypes))), m ?  r().createElement(B, {
-                    $disabled: s
-                },  r().createElement($, pe({}, k, {
-                    appearance: "pill"
-                }),  r().createElement(U, {
-                    open: !!g
-                })),  r().createElement(H, {
-                    $titleWithActions: m,
-                    "data-test": "title"
-                }, v)) : 
+                    elementRef: u
+                }, c()(this.props, l()(n.propTypes))), g || o != null ?  r().createElement(W, {
+                    $disabled: p
+                },  r().createElement(B, ue({
+                    appearance: "pill",
+                    "aria-label": (0, v._)("Panel"),
+                    "aria-labelledby": x
+                }, S),  r().createElement(U, {
+                    open: !!O
+                })),  r().createElement($, {
+                    $titleWithActions: g,
+                    "data-test": "title",
+                    id: o != null ? x : undefined
+                }, h), o != null &&  r().createElement(M, null, o)) : 
                 
                 /* Clickable component is not allowed to have role="heading" so it is wrapped with a span */
                 r().createElement("span", {
                     "data-test": "heading",
-                    role: u ? "heading" : undefined,
-                    "aria-level": u
-                },  r().createElement(M, k,  r().createElement(W, null,  r().createElement(U, {
-                    open: !!g
-                })),  r().createElement(H, null,  r().createElement("span", {
+                    role: d ? "heading" : undefined,
+                    "aria-level": d
+                },  r().createElement(L, S,  r().createElement(X, null,  r().createElement(U, {
+                    open: !!O
+                })),  r().createElement($, null,  r().createElement("span", {
                     "data-test": "title"
-                }, v), i &&  r().createElement(L, {
+                }, h), s &&  r().createElement(G, {
                     "data-test": "description"
-                }, i)))),  r().createElement(d(), {
+                }, s)))),  r().createElement(f(), {
                     outerId: this.containerId,
                     "aria-labelledby": this.toggleId,
                     "data-test": "body",
                     outerStyle: {
-                        overflow: h ? "hidden" : f
+                        overflow: C ? "hidden" : m
                     },
                     innerStyle: fe({
                         tableLayout: "fixed"
-                    }, o),
-                    open: g,
+                    }, a),
+                    open: O,
                     onAnimationEnd: this.handleAnimationEnd,
-                    renderChildrenWhenCollapsed: b
-                },  r().createElement(G, {
-                    $inset: y
-                }, a)));
+                    role: o != null ? "region" : undefined,
+                    renderChildrenWhenCollapsed: y
+                },  r().createElement(H, {
+                    $inset: k
+                }, i)));
             }
         } ]);
         return n;
     }(n.Component);
-    Oe(Pe, "propTypes", Se);
-    Oe(Pe, "defaultProps", Ie);
-    Oe(Pe, "contextType", V);
-    /* harmony default export */    const we = Pe;
+    Se(we, "propTypes", Ie);
+    Se(we, "defaultProps", Pe);
+    Se(we, "contextType", V);
+    /* harmony default export */    const je = we;
     // CONCATENATED MODULE: ./src/CollapsiblePanel/index.ts
     module.exports = t;
     /******/})();