@splunk/react-ui 4.27.0 → 4.28.1

package/CollapsiblePanel.js

@@ -97,8 +97,8 @@
     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);
+    const O = require("@splunk/react-ui/Clickable");
+    var S =  e.n(O);
     // CONCATENATED MODULE: external "@splunk/themes"
     const I = require("@splunk/themes");
     // CONCATENATED MODULE: external "@splunk/react-icons/ChevronRight"
@@ -196,7 +196,7 @@
         displayName: "CollapsiblePanelStyles__StyledToggleButton",
         componentId: "sc-1phikbp-4"
     })([ "flex:0 auto;padding:0;", "" ], N);
-    var M = h()(O()).withConfig({
+    var M = h()(S()).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, 
@@ -415,16 +415,13 @@
             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;
+            var n = t.panelId;
+            var r = C();
+            var o = r === n ? null : n;
             if (!d) {
-                k(a);
+                k(o);
             }
-            p === null || p === void 0 ? void 0 : p(e, {
-                openPanelId: a,
-                reason: r
-            });
+            p === null || p === void 0 ? void 0 : p(e, t);
         }), [ u, d, g, C, p ]);
         (0, n.useEffect)((function() {
             if (false) {}
@@ -438,9 +435,9 @@
         (0, n.useEffect)((function() {
             if (false) {}
         }), [ b, o ]);
-        var S = n.Children.toArray(t).filter(n.isValidElement);
+        var O = n.Children.toArray(t).filter(n.isValidElement);
  // remove false, null, 0, etc
-                var O = (0, n.useMemo)((function() {
+                var S = (0, n.useMemo)((function() {
             return {
                 onChange: x,
                 openPanelId: d ? u : g,
@@ -453,8 +450,8 @@
             "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));
+            value: S
+        }, O));
     }
     le.propTypes = ie;
     /* harmony default export */    const se = le;
@@ -502,7 +499,7 @@
             var n = arguments[t] != null ? arguments[t] : {};
             if (t % 2) {
                 ue(Object(n), true).forEach((function(t) {
-                    Se(e, t, n[t]);
+                    Oe(e, t, n[t]);
                 }));
             } else if (Object.getOwnPropertyDescriptors) {
                 Object.defineProperties(e, Object.getOwnPropertyDescriptors(n));
@@ -595,7 +592,7 @@
         };
         return xe(e);
     }
-    function Se(e, t, n) {
+    function Oe(e, t, n) {
         if (t in e) {
             Object.defineProperty(e, t, {
                 value: n,
@@ -608,7 +605,7 @@
         }
         return e;
     }
-    var Oe = {
+    var Se = {
         innerBodyStyles: u().object,
         children: u().node,
         defaultOpen: u().bool,
@@ -642,60 +639,54 @@
             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) {
+            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({
                     event: e,
                     panelId: n,
                     reason: "toggleClick"
                 });
-                r.setState(fe({
-                    animating: true
-                }, !r.isControlled() ? {
-                    open: false
-                } : {}));
             }));
-            Se(ke(r), "handleRequestOpen", (function(e) {
+            Oe(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: n,
                     reason: "toggleClick"
                 });
-                r.setState(fe({
-                    animating: true
-                }, !r.isControlled() ? {
-                    open: true
-                } : {}));
             }));
-            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"
-                });
+            Oe(ke(r), "handleChange", (function(e) {
+                var t, n;
+                var o = r.props, a = o.panelId, i = o.onChange;
+                var l = r.isOpen();
                 if (!r.isControlled()) {
                     r.setState({
                         animating: true,
-                        open: i
-                    });
-                }
-                if (r.context.onChange) {
-                    r.context.onChange(e, {
-                        panelId: n,
-                        reason: "toggleClick"
+                        open: !l
                     });
                 }
+                var s = l ? "close" : "open";
+                i === null || i === void 0 ? void 0 : i(e, {
+                    panelId: a,
+                    reason: "toggleClick",
+                    action: s
+                });
+                (t = (n = r.context).onChange) === null || t === void 0 ? void 0 : t.call(n, e, {
+                    panelId: a,
+                    reason: "toggleClick",
+                    action: s
+                });
  // 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;
+                                if (l) {
+                    r.handleRequestClose(e);
+                } else {
+                    r.handleRequestOpen(e);
+                }
             }));
-            Se(ke(r), "handleAnimationEnd", (function() {
+            Oe(ke(r), "handleAnimationEnd", (function() {
                 r.setState({
                     animating: false
                 });
@@ -707,6 +698,7 @@
                 animating: false
             });
             if (false) {}
+            if (false) {}
             r.containerId = "container-".concat((0, b.createGUID)());
             r.toggleId = "toggle-".concat((0, b.createGUID)());
             return r;
@@ -729,6 +721,11 @@
                 if (false) {}
                 if (false) {}
             }
+        }, {
+            key: "isOpen",
+            value: function e() {
+                return this.isControlled() ? this.props.open : this.state.open;
+            }
  // 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",
@@ -740,23 +737,13 @@
             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;
-                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 = {
+                var g = this.context.openPanelId !== undefined ? 
+                /**
+       * 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.
+       */
+                this.context.openPanelId === this.props.panelId : this.isOpen();
+                var k = {
                     disabled: s,
                     onClick: this.handleChange,
                     id: this.toggleId,
@@ -771,7 +758,7 @@
                     elementRef: p
                 }, c()(this.props, l()(n.propTypes))), m ?  r().createElement(B, {
                     $disabled: s
-                },  r().createElement($, pe({}, C, {
+                },  r().createElement($, pe({}, k, {
                     appearance: "pill"
                 }),  r().createElement(U, {
                     open: !!g
@@ -785,7 +772,7 @@
                     "data-test": "heading",
                     role: u ? "heading" : undefined,
                     "aria-level": u
-                },  r().createElement(M, C,  r().createElement(W, null,  r().createElement(U, {
+                },  r().createElement(M, k,  r().createElement(W, null,  r().createElement(U, {
                     open: !!g
                 })),  r().createElement(H, null,  r().createElement("span", {
                     "data-test": "title"
@@ -811,9 +798,9 @@
         } ]);
         return n;
     }(n.Component);
-    Se(Pe, "propTypes", Oe);
-    Se(Pe, "defaultProps", Ie);
-    Se(Pe, "contextType", V);
+    Oe(Pe, "propTypes", Se);
+    Oe(Pe, "defaultProps", Ie);
+    Oe(Pe, "contextType", V);
     /* harmony default export */    const we = Pe;
     // CONCATENATED MODULE: ./src/CollapsiblePanel/index.ts
     module.exports = t;