@splunk/react-ui 4.26.0 → 4.28.0

package/CollapsiblePanel.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 o in r) {
-                /******/ if (e.o(r, o) && !e.o(t, o)) {
-                    /******/ Object.defineProperty(t, o, {
+        /******/ 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[o]
+                        get: n[r]
                     });
                     /******/                }
                 /******/            }
@@ -61,297 +61,479 @@
         e.r(t);
     // EXPORTS
         e.d(t, {
-        default: () => /* reexport */ te
+        SingleOpenPanelGroup: () => /* reexport */ se,
+        default: () => /* reexport */ we
     });
     // CONCATENATED MODULE: external "react"
-    const r = require("react");
-    var o =  e.n(r);
-    // CONCATENATED MODULE: external "prop-types"
-    const n = require("prop-types");
-    var i =  e.n(n);
+    const n = require("react");
+    var r =  e.n(n);
     // CONCATENATED MODULE: external "lodash/has"
-    const a = require("lodash/has");
-    var l =  e.n(a);
+    const o = require("lodash/has");
+    var a =  e.n(o);
     // CONCATENATED MODULE: external "lodash/keys"
-    const s = require("lodash/keys");
-    var c =  e.n(s);
+    const i = require("lodash/keys");
+    var l =  e.n(i);
     // CONCATENATED MODULE: external "lodash/omit"
-    const p = require("lodash/omit");
-    var d =  e.n(p);
-    // CONCATENATED MODULE: external "@splunk/ui-utils/id"
-    const u = require("@splunk/ui-utils/id");
+    const s = require("lodash/omit");
+    var c =  e.n(s);
+    // CONCATENATED MODULE: external "prop-types"
+    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 b =  e.n(f);
-    // CONCATENATED MODULE: external "styled-components"
-    const v = require("styled-components");
+    var d =  e.n(f);
+    // CONCATENATED MODULE: external "@splunk/ui-utils/id"
+    const b = require("@splunk/ui-utils/id");
+    // CONCATENATED MODULE: external "@splunk/react-ui/usePrevious"
+    const v = require("@splunk/react-ui/usePrevious");
     var m =  e.n(v);
+    // CONCATENATED MODULE: external "styled-components"
+    const y = require("styled-components");
+    var h =  e.n(y);
     // CONCATENATED MODULE: external "@splunk/react-ui/Box"
-    const h = require("@splunk/react-ui/Box");
-    var y =  e.n(h);
-    // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const g = require("@splunk/react-ui/Clickable");
+    const g = require("@splunk/react-ui/Box");
     var k =  e.n(g);
+    // CONCATENATED MODULE: external "@splunk/react-ui/ButtonSimple"
+    const C = require("@splunk/react-ui/ButtonSimple");
+    var x =  e.n(C);
+    // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
+    const S = require("@splunk/react-ui/Clickable");
+    var O =  e.n(S);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const C = require("@splunk/themes");
+    const I = require("@splunk/themes");
+    // CONCATENATED MODULE: external "@splunk/react-icons/ChevronRight"
+    const P = require("@splunk/react-icons/ChevronRight");
+    var w =  e.n(P);
+    // 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");
+    // CONCATENATED MODULE: ./src/CollapsiblePanel/icons/ExpandPanel.tsx
+    var q = {
+        className: u().string,
+        open: u().bool
+    };
+    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(), {
+            className: n,
+            hideDefaultTooltip: true,
+            screenReaderText: l
+        }) :  r().createElement(w(), {
+            "aria-label": l,
+            className: n
+        });
+    };
+    R.propTypes = q;
+    /* harmony default export */    const A = R;
     // CONCATENATED MODULE: ./src/CollapsiblePanel/CollapsiblePanelStyles.ts
-    var x = m()(y()).withConfig({
+    var T = h()(k()).withConfig({
         displayName: "CollapsiblePanelStyles__StyledBox",
         componentId: "sc-1phikbp-0"
-    })([ "display:flex;flex-direction:column;min-height:", ";", ";& + &{margin-top:", ";}" ], (0, 
-    C.pick)({
-        enterprise: (0, v.css)([ "calc(", " + 12px)" ], C.variables.lineHeight),
+    })([ "display:flex;flex-direction:column;flex-shrink:1;min-height:", ";", ";& + &{margin-top:", ";}" ], (0, 
+    I.pick)({
+        enterprise: (0, y.css)([ "calc(", " + 12px)" ], I.variables.lineHeight),
         prisma: {
             comfortable: "56px",
             compact: "48px"
         }
-    }), (0, C.pick)({
-        prisma: (0, v.css)([ "background-color:", ";" ], C.variables.backgroundColorSection)
-    }), (0, C.pick)({
+    }), (0, I.pick)({
+        prisma: (0, y.css)([ "background-color:", ";" ], I.variables.backgroundColorSection)
+    }), (0, I.pick)({
         enterprise: "2px",
         prisma: "1px"
     }));
-    var O = m().span.withConfig({
-        displayName: "CollapsiblePanelStyles__StyledIcon",
+    var D = h()(k()).withConfig({
+        displayName: "CollapsiblePanelStyles__StyledSingleOpenPanelGroupBox",
         componentId: "sc-1phikbp-1"
-    })([ "position:absolute;left:", ";transition:transform ", ";", ";" ], (0, C.pick)({
-        enterprise: "12px",
-        prisma: "20px"
-    }), (0, C.pick)({
-        enterprise: "300ms",
-        prisma: "200ms"
-    }), (0, C.pick)({
-        prisma: (0, v.css)([ "color:", ";display:flex;top:", ";[disabled] > &{color:inherit;}" ], C.variables.contentColorDefault, (0, 
-        C.pick)({
-            comfortable: "20px",
-            compact: "16px"
-        }))
+    })([ "", ";flex-direction:column;margin-bottom:0;", "" ], I.mixins.reset("flex"), (0, 
+    I.pick)({
+        enterprise: (0, y.css)([ "background:", ";" ], I.variables.backgroundColor)
     }));
-    var S = m().div.withConfig({
-        displayName: "CollapsiblePanelStyles__StyledTitleWithActions",
+    /*
+    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)({
+        enterprise: "20px",
+        prisma: "35px"
+    }));
+    var W = h().span.withConfig({
+        displayName: "CollapsiblePanelStyles__StyledIconWrapper",
         componentId: "sc-1phikbp-2"
-    })([ "flex-shrink:0;border-bottom:0;position:relative;padding:", ";transition:background-color 0.2s,border 0.2s,box-shadow 0.2s;color:", ";", " ", "" ], (0, 
-    C.pick)({
-        enterprise: (0, v.css)([ "", " ", " ", " 30px" ], C.variables.spacingXSmall, C.variables.spacingSmall, C.variables.spacingXSmall),
+    })([ "display:inline-block;flex:0 auto;", "" ], N);
+    var B = h().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),
         prisma: {
-            comfortable: "8px 10px 8px 52px",
-            compact: "8px 10px 8px 52px"
+            comfortable: "8px 10px 8px 11px",
+            compact: "8px 10px 8px 11px"
         }
-    }), (0, C.pick)({
-        enterprise: C.variables.textColor,
-        prisma: C.variables.contentColorActive
-    }), (0, C.pick)({
-        prisma: (0, v.css)([ "background-color:", ";" ], C.variables.interactiveColorBackground),
+    }), (0, I.pick)({
+        enterprise: I.variables.textColor,
+        prisma: I.variables.contentColorActive
+    }), (0, I.pick)({
+        prisma: (0, y.css)([ "background-color:", ";" ], I.variables.interactiveColorBackground),
         enterprise: {
-            dark: (0, v.css)([ "background-color:", ";" ], C.variables.gray45),
-            light: (0, v.css)([ "background-color:", ";" ], C.variables.gray96)
+            dark: (0, y.css)([ "background-color:", ";" ], I.variables.gray45),
+            light: (0, y.css)([ "background-color:", ";" ], I.variables.gray96)
         }
     }), (function(e) {
         var t = e.$disabled;
-        return t && (0, v.css)([ "cursor:default;color:", ";" ], (0, C.pick)({
-            enterprise: C.variables.contentColorDefault,
-            prisma: C.variables.contentColorDisabled
+        return t && (0, y.css)([ "cursor:default;color:", ";" ], (0, I.pick)({
+            enterprise: I.variables.contentColorDefault,
+            prisma: I.variables.contentColorDisabled
         }));
     }));
-    var w = m()(k()).withConfig({
-        displayName: "CollapsiblePanelStyles__StyledClickableIcon",
-        componentId: "sc-1phikbp-3"
-    })([ "position:absolute;left:", ";padding:", ";top:8px;& > svg{transition:transform ", ";}", ";", " &:focus:not([disabled]),&:active:not([disabled]){color:", ";box-shadow:", ";}&:hover:not([disabled]){color:", ";background-color:", ";}" ], (0, 
-    C.pick)({
-        enterprise: "4px",
-        prisma: "8px"
-    }), (0, C.pick)({
-        enterprise: {
-            comfortable: "2px 8px",
-            compact: "0px 8px"
-        },
-        prisma: {
-            comfortable: "14px",
-            compact: "8px"
-        }
-    }), (0, C.pick)({
-        enterprise: "300ms",
-        prisma: "200ms"
-    }), (0, C.pick)({
-        prisma: (0, v.css)([ "color:", ";display:flex;[disabled] > &{color:inherit;}" ], C.variables.contentColorDefault)
-    }), (0, C.pickVariant)("$open", {
-        true: (0, v.css)([ "& > svg{transform:rotate(90deg);}" ])
-    }), (0, C.pick)({
-        enterprise: C.variables.textColor,
-        prisma: C.variables.contentColorActive
-    }), C.variables.focusShadowInset, (0, C.pick)({
-        enterprise: C.variables.textColor,
-        prisma: C.variables.contentColorActive
-    }), (0, C.pick)({
-        enterprise: {
-            light: C.variables.gray92,
-            dark: C.variables.gray30
-        },
-        prisma: C.mixins.overlayColors(C.variables.interactiveColorBackground, C.variables.interactiveColorOverlayHover)
-    }));
-    var P = m()(k()).withConfig({
-        displayName: "CollapsiblePanelStyles__StyledTitleClickable",
+    var $ = h()(x()).withConfig({
+        displayName: "CollapsiblePanelStyles__StyledToggleButton",
         componentId: "sc-1phikbp-4"
-    })([ "width:100%;flex-shrink:0;border-bottom:0;cursor:pointer;position:relative;display:block;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, 
-    C.pick)({
-        enterprise: "6px 30px",
+    })([ "flex:0 auto;padding:0;", "" ], N);
+    var M = h()(O()).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)({
+        enterprise: "6px 30px 6px 5px",
         prisma: {
-            comfortable: "18px 20px 18px 52px",
-            compact: "14px 20px 14px 52px"
+            comfortable: "18px 20px 18px 11px",
+            compact: "14px 20px 14px 11px"
         }
-    }), (0, C.pick)({
-        enterprise: C.variables.textColor,
-        prisma: C.variables.contentColorActive
-    }), (0, C.pick)({
-        prisma: (0, v.css)([ "background-color:", ";" ], C.variables.interactiveColorBackground)
-    }), (0, C.pickVariant)("$open", {
-        true: (0, v.css)([ "", "{transform:rotate(90deg);}" ], 
-        /* sc-sel */
-        O),
+    }), (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", {
         false: {
             enterprise: {
-                dark: (0, v.css)([ "background-color:", ";" ], C.variables.gray45),
-                light: (0, v.css)([ "background-color:", ";" ], C.variables.gray96)
+                dark: (0, y.css)([ "background-color:", ";" ], I.variables.gray45),
+                light: (0, y.css)([ "background-color:", ";" ], I.variables.gray96)
             }
         }
-    }), (0, C.pick)({
-        enterprise: C.variables.contentColorDefault,
-        prisma: C.variables.contentColorDisabled
-    }), (0, C.pick)({
-        enterprise: C.variables.textColor,
-        prisma: C.variables.contentColorActive
-    }), C.variables.focusShadowInset, (0, C.pick)({
-        enterprise: C.variables.textColor,
-        prisma: C.variables.contentColorActive
-    }), (0, C.pick)({
+    }), (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)({
         enterprise: {
-            light: C.variables.gray92,
-            dark: C.variables.gray30
+            light: I.variables.gray92,
+            dark: I.variables.gray30
         },
-        prisma: C.mixins.overlayColors(C.variables.interactiveColorBackground, C.variables.interactiveColorOverlayHover)
+        prisma: I.mixins.overlayColors(I.variables.interactiveColorBackground, I.variables.interactiveColorOverlayHover)
     }));
-    var I = m().span.withConfig({
+    var H = h().span.withConfig({
         displayName: "CollapsiblePanelStyles__StyledHeadingContent",
-        componentId: "sc-1phikbp-5"
-    })([ "display:flex;justify-content:space-between;", " ", "" ], (0, C.pick)({
-        prisma: (0, v.css)([ "font-weight:", ";" ], C.variables.fontWeightSemiBold)
+        componentId: "sc-1phikbp-6"
+    })([ "display:flex;justify-content:space-between;margin-left:", ";flex:1 1 auto;", " ", "" ], (0, 
+    I.pick)({
+        enterprise: "5px",
+        prisma: "6px"
+    }), (0, I.pick)({
+        prisma: (0, y.css)([ "font-weight:", ";" ], I.variables.fontWeightSemiBold)
     }), (function(e) {
         var t = e.$titleWithActions;
-        return t && (0, v.css)([ "min-height:", ";" ], (0, C.pick)({
+        return t && (0, y.css)([ "min-height:", ";" ], (0, I.pick)({
             prisma: {
                 comfortable: "40px",
                 compact: "32px"
             }
         }));
     }));
-    var j = m().span.withConfig({
+    var L = h().span.withConfig({
         displayName: "CollapsiblePanelStyles__StyledDescription",
-        componentId: "sc-1phikbp-6"
-    })([ "font-size:", ";margin-left:", ";" ], C.variables.fontSizeSmall, (0, C.pick)({
-        enterprise: C.variables.spacingHalf,
-        prisma: C.variables.spacingLarge
+        componentId: "sc-1phikbp-7"
+    })([ "font-size:", ";margin-left:", ";" ], I.variables.fontSizeSmall, (0, I.pick)({
+        enterprise: I.variables.spacingHalf,
+        prisma: I.variables.spacingLarge
     }));
-    // CONCATENATED MODULE: external "@splunk/react-icons/ChevronRight"
-    const _ = require("@splunk/react-icons/ChevronRight");
-    var E =  e.n(_);
-    // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/ChevronRight"
-    const q = require("@splunk/react-icons/enterprise/ChevronRight");
-    var R =  e.n(q);
-    // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const D = require("@splunk/ui-utils/i18n");
-    // CONCATENATED MODULE: ./src/CollapsiblePanel/icons/ExpandPanel.tsx
-    var A = {
-        open: i().bool
-    };
-    var T = function e(t) {
-        var r = t.open;
-        var n = (0, C.useSplunkTheme)(), i = n.isEnterprise;
-        var a = r ? (0, D._)("Panel is open") : (0, D._)("Panel is closed");
-        return i ?  o().createElement(R(), {
-            hideDefaultTooltip: true,
-            screenReaderText: a
-        }) :  o().createElement(E(), {
-            "aria-label": a
-        });
+    var G = h().div.withConfig({
+        displayName: "CollapsiblePanelStyles__StyledInsetWrapper",
+        componentId: "sc-1phikbp-8"
+    })([ "", ";padding:", ";" ], I.mixins.reset("block"), (0, I.pickVariant)("$inset", {
+        true: (0, I.pick)({
+            enterprise: {
+                compact: I.variables.spacingQuarter,
+                comfortable: I.variables.spacingHalf
+            },
+            prisma: {
+                compact: I.variables.spacingMedium,
+                comfortable: I.variables.spacingXLarge
+            }
+        }),
+        false: 0
+    }));
+    var U = h()(A).withConfig({
+        displayName: "CollapsiblePanelStyles__StyledExpandPanelIcon",
+        componentId: "sc-1phikbp-9"
+    })([ "transition:transform ", ";", ";", " width:100%;vertical-align:", ";" ], (0, 
+    I.pick)({
+        enterprise: "300ms",
+        prisma: "200ms"
+    }), (0, I.pick)({
+        prisma: (0, y.css)([ "color:", ";[disabled] &{color:inherit;}" ], I.variables.contentColorDefault)
+    }), (function(e) {
+        var t = e.open;
+        return t && (0, y.css)([ "transform:rotate(90deg);" ]);
+    }), (0, I.pick)({
+        enterprise: "baseline",
+        prisma: "text-bottom"
+    }));
+    // CONCATENATED MODULE: ./src/CollapsiblePanel/SingleOpenPanelGroupContext.tsx
+    var X =  (0, n.createContext)({});
+    /* harmony default export */    const V = X;
+    // CONCATENATED MODULE: ./src/CollapsiblePanel/SingleOpenPanelGroup.tsx
+    function z() {
+        z = Object.assign || function(e) {
+            for (var t = 1; t < arguments.length; t++) {
+                var n = arguments[t];
+                for (var r in n) {
+                    if (Object.prototype.hasOwnProperty.call(n, r)) {
+                        e[r] = n[r];
+                    }
+                }
+            }
+            return e;
+        };
+        return z.apply(this, arguments);
+    }
+    function Q(e) {
+        return K(e) || J(e) || ee(e) || F();
+    }
+    function F() {
+        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) {
+        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, t) {
+        return re(e) || ne(e, t) || ee(e, t) || Z();
+    }
+    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 ee(e, t) {
+        if (!e) return;
+        if (typeof e === "string") return te(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);
+    }
+    function te(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) {
+        if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(e))) return;
+        var n = [];
+        var r = true;
+        var o = false;
+        var a = 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;
+        } finally {
+            try {
+                if (!r && i["return"] != null) i["return"]();
+            } finally {
+                if (o) throw a;
+            }
+        }
+        return n;
+    }
+    function re(e) {
+        if (Array.isArray(e)) return e;
+    }
+    function oe(e, t) {
+        if (e == null) return {};
+        var n = ae(e, t);
+        var r, o;
+        if (Object.getOwnPropertySymbols) {
+            var a = Object.getOwnPropertySymbols(e);
+            for (o = 0; o < a.length; o++) {
+                r = a[o];
+                if (t.indexOf(r) >= 0) continue;
+                if (!Object.prototype.propertyIsEnumerable.call(e, r)) continue;
+                n[r] = e[r];
+            }
+        }
+        return n;
+    }
+    function ae(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];
+        }
+        return n;
+    }
+    /** @public */    var ie = {
+        children: u().node,
+        defaultOpenPanelId: u().any,
+        elementRef: u().oneOfType([ u().func, u().object ]),
+        inset: u().bool,
+        onChange: u().func,
+        openPanelId: u().any
     };
-    T.propTypes = A;
-    /* harmony default export */    const W = T;
+    function le(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 C = function e() {
+            var t = d ? u : g;
+            return t;
+        };
+        var x = (0, n.useCallback)((function(e, t) {
+            var n = t.panelId, r = t.reason;
+            var o = C();
+            var a = o === n ? null : n;
+            if (!d) {
+                k(a);
+            }
+            p === null || p === void 0 ? void 0 : p(e, {
+                openPanelId: a,
+                reason: r
+            });
+        }), [ u, d, g, C, p ]);
+        (0, n.useEffect)((function() {
+            if (false) {}
+ // In this functional component, we want the dependencies to be [], but when we do that
+            // we get a linting error.
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+                }), []);
+        (0, n.useEffect)((function() {
+            if (false) {}
+        }), [ b, d ]);
+        (0, n.useEffect)((function() {
+            if (false) {}
+        }), [ b, o ]);
+        var S = n.Children.toArray(t).filter(n.isValidElement);
+ // remove false, null, 0, etc
+                var O = (0, n.useMemo)((function() {
+            return {
+                onChange: x,
+                openPanelId: d ? u : g,
+                inset: s
+            };
+        }), [ x, d, s, u, g ]);
+        
+        return r().createElement(D, z({
+            "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, {
+            value: O
+        }, S));
+    }
+    le.propTypes = ie;
+    /* harmony default export */    const se = le;
     // CONCATENATED MODULE: ./src/CollapsiblePanel/CollapsiblePanel.tsx
-    function B(e) {
+    function ce(e) {
         "@babel/helpers - typeof";
         if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-            B = function e(t) {
+            ce = function e(t) {
                 return typeof t;
             };
         } else {
-            B = function e(t) {
+            ce = function e(t) {
                 return t && typeof Symbol === "function" && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
             };
         }
-        return B(e);
+        return ce(e);
     }
-    function $() {
-        $ = Object.assign || function(e) {
+    function pe() {
+        pe = Object.assign || function(e) {
             for (var t = 1; t < arguments.length; t++) {
-                var r = arguments[t];
-                for (var o in r) {
-                    if (Object.prototype.hasOwnProperty.call(r, o)) {
-                        e[o] = r[o];
+                var n = arguments[t];
+                for (var r in n) {
+                    if (Object.prototype.hasOwnProperty.call(n, r)) {
+                        e[r] = n[r];
                     }
                 }
             }
             return e;
         };
-        return $.apply(this, arguments);
+        return pe.apply(this, arguments);
     }
-    function N(e, t) {
-        var r = Object.keys(e);
+    function ue(e, t) {
+        var n = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
-            var o = Object.getOwnPropertySymbols(e);
-            if (t) o = o.filter((function(t) {
+            var r = Object.getOwnPropertySymbols(e);
+            if (t) r = r.filter((function(t) {
                 return Object.getOwnPropertyDescriptor(e, t).enumerable;
             }));
-            r.push.apply(r, o);
+            n.push.apply(n, r);
         }
-        return r;
+        return n;
     }
-    function H(e) {
+    function fe(e) {
         for (var t = 1; t < arguments.length; t++) {
-            var r = arguments[t] != null ? arguments[t] : {};
+            var n = arguments[t] != null ? arguments[t] : {};
             if (t % 2) {
-                N(Object(r), true).forEach((function(t) {
-                    Q(e, t, r[t]);
+                ue(Object(n), true).forEach((function(t) {
+                    Se(e, t, n[t]);
                 }));
             } else if (Object.getOwnPropertyDescriptors) {
-                Object.defineProperties(e, Object.getOwnPropertyDescriptors(r));
+                Object.defineProperties(e, Object.getOwnPropertyDescriptors(n));
             } else {
-                N(Object(r)).forEach((function(t) {
-                    Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t));
+                ue(Object(n)).forEach((function(t) {
+                    Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(n, t));
                 }));
             }
         }
         return e;
     }
-    function L(e, t) {
+    function de(e, t) {
         if (!(e instanceof t)) {
             throw new TypeError("Cannot call a class as a function");
         }
     }
-    function M(e, t) {
-        for (var r = 0; r < t.length; r++) {
-            var o = t[r];
-            o.enumerable = o.enumerable || false;
-            o.configurable = true;
-            if ("value" in o) o.writable = true;
-            Object.defineProperty(e, o.key, o);
+    function be(e, t) {
+        for (var n = 0; n < t.length; n++) {
+            var r = t[n];
+            r.enumerable = r.enumerable || false;
+            r.configurable = true;
+            if ("value" in r) r.writable = true;
+            Object.defineProperty(e, r.key, r);
         }
     }
-    function U(e, t, r) {
-        if (t) M(e.prototype, t);
-        if (r) M(e, r);
+    function ve(e, t, n) {
+        if (t) be(e.prototype, t);
+        if (n) be(e, n);
         return e;
     }
-    function z(e, t) {
+    function me(e, t) {
         if (typeof t !== "function" && t !== null) {
             throw new TypeError("Super expression must either be null or a function");
         }
@@ -362,41 +544,41 @@
                 configurable: true
             }
         });
-        if (t) G(e, t);
+        if (t) ye(e, t);
     }
-    function G(e, t) {
-        G = Object.setPrototypeOf || function e(t, r) {
-            t.__proto__ = r;
+    function ye(e, t) {
+        ye = Object.setPrototypeOf || function e(t, n) {
+            t.__proto__ = n;
             return t;
         };
-        return G(e, t);
+        return ye(e, t);
     }
-    function V(e) {
-        var t = J();
-        return function r() {
-            var o = K(e), n;
+    function he(e) {
+        var t = Ce();
+        return function n() {
+            var r = xe(e), o;
             if (t) {
-                var i = K(this).constructor;
-                n = Reflect.construct(o, arguments, i);
+                var a = xe(this).constructor;
+                o = Reflect.construct(r, arguments, a);
             } else {
-                n = o.apply(this, arguments);
+                o = r.apply(this, arguments);
             }
-            return X(this, n);
+            return ge(this, o);
         };
     }
-    function X(e, t) {
-        if (t && (B(t) === "object" || typeof t === "function")) {
+    function ge(e, t) {
+        if (t && (ce(t) === "object" || typeof t === "function")) {
             return t;
         }
-        return F(e);
+        return ke(e);
     }
-    function F(e) {
+    function ke(e) {
         if (e === void 0) {
             throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
         }
         return e;
     }
-    function J() {
+    function Ce() {
         if (typeof Reflect === "undefined" || !Reflect.construct) return false;
         if (Reflect.construct.sham) return false;
         if (typeof Proxy === "function") return true;
@@ -407,102 +589,136 @@
             return false;
         }
     }
-    function K(e) {
-        K = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
+    function xe(e) {
+        xe = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
             return t.__proto__ || Object.getPrototypeOf(t);
         };
-        return K(e);
+        return xe(e);
     }
-    function Q(e, t, r) {
+    function Se(e, t, n) {
         if (t in e) {
             Object.defineProperty(e, t, {
-                value: r,
+                value: n,
                 enumerable: true,
                 configurable: true,
                 writable: true
             });
         } else {
-            e[t] = r;
+            e[t] = n;
         }
         return e;
     }
-    /** @public */    var Y = {
-        innerBodyStyles: i().object,
-        children: i().node,
-        defaultOpen: i().bool,
-        description: i().string,
-        disabled: i().bool,
-        elementRef: i().oneOfType([ i().func, i().object ]),
-        headingLevel: i().number,
-        onRequestClose: i().func,
-        onRequestOpen: i().func,
-        open: i().bool,
-        overflow: i().string,
-        panelId: i().any,
-        renderChildrenWhenCollapsed: i().bool,
-        title: i().node.isRequired,
-        titleWithActions: i().bool
+    var Oe = {
+        innerBodyStyles: u().object,
+        children: u().node,
+        defaultOpen: u().bool,
+        description: u().string,
+        disabled: u().bool,
+        elementRef: u().oneOfType([ u().func, u().object ]),
+        headingLevel: u().number,
+        inset: u().bool,
+        onRequestClose: u().func,
+        onRequestOpen: u().func,
+        onChange: u().func,
+        open: u().bool,
+        overflow: u().string,
+        panelId: u().any,
+        renderChildrenWhenCollapsed: u().bool,
+        title: u().node.isRequired,
+        titleWithActions: u().bool
     };
-    var Z = {
+    var Ie = {
         disabled: false,
         overflow: "auto",
         renderChildrenWhenCollapsed: false,
-        titleWithActions: false
+        titleWithActions: false,
+        inset: false
     };
-    var ee =  function(e) {
-        z(r, e);
-        var t = V(r);
+    var Pe =  function(e) {
+        me(n, e);
+        var t = he(n);
         // @docs-props-type CollapsiblePanelPropsBase
-                function r(e) {
-            var o;
-            L(this, r);
-            o = t.call(this, e);
-            Q(F(o), "controlledExternally", void 0);
-            Q(F(o), "containerId", void 0);
-            Q(F(o), "toggleId", void 0);
-            Q(F(o), "handleRequestClose", (function(e) {
-                var t = o.props, r = t.panelId, n = t.onRequestClose;
-                n === null || n === void 0 ? void 0 : n({
+                function n(e) {
+            var r;
+            de(this, n);
+            r = t.call(this, e);
+            Se(ke(r), "controlledExternally", void 0);
+            Se(ke(r), "containerId", void 0);
+            Se(ke(r), "toggleId", void 0);
+            Se(ke(r), "handleRequestClose", (function(e) {
+                var t = r.props, n = t.panelId, o = t.onRequestClose;
+                o === null || o === void 0 ? void 0 : o({
                     event: e,
-                    panelId: r,
+                    panelId: n,
                     reason: "toggleClick"
                 });
-                o.setState(H({
+                r.setState(fe({
                     animating: true
-                }, !o.isControlled() ? {
+                }, !r.isControlled() ? {
                     open: false
                 } : {}));
             }));
-            Q(F(o), "handleRequestOpen", (function(e) {
-                var t = o.props, r = t.panelId, n = t.onRequestOpen;
-                n === null || n === void 0 ? void 0 : n({
+            Se(ke(r), "handleRequestOpen", (function(e) {
+                var t = r.props, n = t.panelId, o = t.onRequestOpen;
+                o === null || o === void 0 ? void 0 : o({
                     event: e,
-                    panelId: r,
+                    panelId: n,
                     reason: "toggleClick"
                 });
-                o.setState(H({
+                r.setState(fe({
                     animating: true
-                }, !o.isControlled() ? {
+                }, !r.isControlled() ? {
                     open: true
                 } : {}));
             }));
-            Q(F(o), "handleAnimationEnd", (function() {
-                o.setState({
+            Se(ke(r), "handleChange", (function(e) {
+                var t = r.props, n = t.panelId, o = t.open, a = t.onChange;
+                var i = r.isControlled() ? o : !r.state.open;
+                a === null || a === void 0 ? void 0 : a(e, {
+                    panelId: n,
+                    reason: "toggleClick"
+                });
+                if (!r.isControlled()) {
+                    r.setState({
+                        animating: true,
+                        open: i
+                    });
+                }
+                if (r.context.onChange) {
+                    r.context.onChange(e, {
+                        panelId: n,
+                        reason: "toggleClick"
+                    });
+                }
+ // Maintains backwards compatibility until the `handleRequestClose` and `handleRequestOpen` handlers are removed in SUI-5
+                                var l = r.props.open ? r.handleRequestClose : r.handleRequestOpen;
+ // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+                                l;
+            }));
+            Se(ke(r), "handleAnimationEnd", (function() {
+                r.setState({
                     animating: false
                 });
             }));
-            o.controlledExternally = l()(e, "open");
-            o.state = H({
-                animating: false
-            }, !o.isControlled() ? {
+            r.controlledExternally = a()(e, "open");
+            r.state = fe(fe({}, !r.isControlled() ? {
                 open: e.defaultOpen || false
-            } : undefined);
+            } : undefined), {}, {
+                animating: false
+            });
             if (false) {}
-            o.containerId = "container-".concat((0, u.createGUID)());
-            o.toggleId = "toggle-".concat((0, u.createGUID)());
-            return o;
+            if (false) {}
+            r.containerId = "container-".concat((0, b.createGUID)());
+            r.toggleId = "toggle-".concat((0, b.createGUID)());
+            return r;
         }
-        U(r, [ {
+ // Only testing this in the scenario of a SingleOpenPanelGroup.
+                ve(n, [ {
+            key: "componentDidMount",
+            value: function e() {
+                if (false) {}
+            }
+        }, {
             key: "componentDidUpdate",
             value: function e(t) {
                 if (this.props.open !== t.open) {
@@ -514,7 +730,8 @@
                 if (false) {}
                 if (false) {}
             }
-        }, {
+ // Using all three handlers: `handleRequestClose` and `handleRequestOpen` and `handleChange` to test interoperability and maintain backwards compatibility until the open/close handlers are removed in SUI-5
+                }, {
             key: "isControlled",
             value: function e() {
                 return this.controlledExternally;
@@ -522,70 +739,83 @@
         }, {
             key: "render",
             value: function e() {
-                var t = this.props, n = t.innerBodyStyles, i = t.children, a = t.description, l = t.disabled, s = t.elementRef, p = t.headingLevel, u = t.overflow, f = t.renderChildrenWhenCollapsed, v = t.title, m = t.titleWithActions;
+                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 y = this.isControlled() ? this.props.open : this.state.open;
-                
-                return o().createElement(x, $({
-                    "data-test": "collapsible-panel",
-                    elementRef: s
-                }, d()(this.props, c()(r.propTypes))), m ?  o().createElement(S, {
-                    $disabled: l
-                },  o().createElement(w, {
-                    disabled: l,
-                    onClick: y ? this.handleRequestClose : this.handleRequestOpen,
+                var g;
+                if (this.context.openPanelId !== undefined) {
+                    // SingleOpenPanelGroup controlled & uncontrolled
+                    /**
+         * SingleOpenPanelGroup already takes into account if it is controlled or not in determining openPanelId
+         * so this.context.openPanelId is used for both the controlled and uncontrolled case.
+         */
+                    var k = this.context.openPanelId === this.props.panelId;
+                    g = k;
+                } else if (this.isControlled()) {
+                    // CollapsiblePanel controlled
+                    g = this.props.open;
+                } else {
+                    // CollapsiblePanel uncontrolled
+                    g = this.state.open;
+                }
+                var C = {
+                    disabled: s,
+                    onClick: this.handleChange,
                     id: this.toggleId,
                     "aria-controls": this.containerId,
-                    "aria-expanded": y,
-                    $open: !!y,
+                    "aria-expanded": g,
+                    $open: !!g,
                     "data-test": "toggle"
-                },  o().createElement(W, {
-                    open: y
-                })),  o().createElement(I, {
+                };
+                
+                return r().createElement(T, pe({
+                    "data-test": "collapsible-panel",
+                    elementRef: p
+                }, c()(this.props, l()(n.propTypes))), m ?  r().createElement(B, {
+                    $disabled: s
+                },  r().createElement($, pe({}, C, {
+                    appearance: "pill"
+                }),  r().createElement(U, {
+                    open: !!g
+                })),  r().createElement(H, {
                     $titleWithActions: m,
                     "data-test": "title"
                 }, v)) : 
                 
                 /* Clickable component is not allowed to have role="heading" so it is wrapped with a span */
-                o().createElement("span", {
+                r().createElement("span", {
                     "data-test": "heading",
-                    role: p ? "heading" : undefined,
-                    "aria-level": p
-                },  o().createElement(P, {
-                    disabled: l,
-                    onClick: y ? this.handleRequestClose : this.handleRequestOpen,
-                    id: this.toggleId,
-                    "aria-controls": this.containerId,
-                    "aria-expanded": y,
-                    $open: !!y,
-                    "data-test": "toggle"
-                },  o().createElement(O, null,  o().createElement(W, {
-                    open: y
-                })),  o().createElement(I, null,  o().createElement("span", {
+                    role: u ? "heading" : undefined,
+                    "aria-level": u
+                },  r().createElement(M, C,  r().createElement(W, null,  r().createElement(U, {
+                    open: !!g
+                })),  r().createElement(H, null,  r().createElement("span", {
                     "data-test": "title"
-                }, v), a &&  o().createElement(j, {
+                }, v), i &&  r().createElement(L, {
                     "data-test": "description"
-                }, a)))),  o().createElement(b(), {
+                }, i)))),  r().createElement(d(), {
                     outerId: this.containerId,
                     "aria-labelledby": this.toggleId,
                     "data-test": "body",
                     outerStyle: {
-                        overflow: h ? "hidden" : u
+                        overflow: h ? "hidden" : f
                     },
-                    innerStyle: H({
+                    innerStyle: fe({
                         tableLayout: "fixed"
-                    }, n),
-                    open: y,
+                    }, o),
+                    open: g,
                     onAnimationEnd: this.handleAnimationEnd,
-                    renderChildrenWhenCollapsed: f
-                }, i));
+                    renderChildrenWhenCollapsed: b
+                },  r().createElement(G, {
+                    $inset: y
+                }, a)));
             }
         } ]);
-        return r;
-    }(r.Component);
-    Q(ee, "propTypes", Y);
-    Q(ee, "defaultProps", Z);
-    /* harmony default export */    const te = ee;
+        return n;
+    }(n.Component);
+    Se(Pe, "propTypes", Oe);
+    Se(Pe, "defaultProps", Ie);
+    Se(Pe, "contextType", V);
+    /* harmony default export */    const we = Pe;
     // CONCATENATED MODULE: ./src/CollapsiblePanel/index.ts
     module.exports = t;
     /******/})();