@splunk/react-ui 4.28.0 → 4.28.1

package/CHANGELOG.md

@@ -1,6 +1,14 @@
 Change Log
 ============
 
+4.28.1 - March 21, 2024
+----------
+Bug Fixes:
+* Fixed `CollapsiblePanel` not calling its `onRequestOpen` and `onRequestClose` callbacks (SUI-6146).
+* Fixed documentation issues and discrepancies between the `onChange` callbacks of `CollapsiblePanel` and `SingleOpenPanelGroup` (SUI-6145).
+    * `CollapsiblePanel` and `SingleOpenPanelGroup` will both always provide the `panelId` to their `onChange` callback.
+    * `CollapsiblePanel` and `SingleOpenPanelGroup` will both provide an `action="open"|"closed"` value to the `onChange` callback.
+
 4.28.0 - March 20, 2024
 ----------
 New Features:

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
                 });
@@ -730,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",
@@ -741,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,
@@ -772,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
@@ -786,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"
@@ -812,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "4.28.0",
+  "version": "4.28.1",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -43,7 +43,7 @@
     "@dnd-kit/sortable": "7.0.2",
     "@dnd-kit/utilities": "3.2.1",
     "@splunk/react-icons": "^4.3.0",
-    "@splunk/themes": "^0.16.4",
+    "@splunk/themes": "^0.17.0",
     "@splunk/ui-utils": "^1.6.0",
     "commonmark": "^0.30.0",
     "commonmark-react-renderer": "^4.3.2",

package/types/src/CollapsiblePanel/CollapsiblePanel.d.ts

@@ -16,6 +16,7 @@ declare type CollapsiblePanelRequestOpenHandler = (data: {
 }) => void;
 /** @public */
 declare type CollapsiblePanelChangeHandler = (event: React.MouseEvent<HTMLButtonElement>, data: {
+    action: 'open' | 'close';
     panelId?: string | number;
     reason: 'toggleClick';
 }) => void;
@@ -66,9 +67,8 @@ interface CollapsiblePanelPropsBase {
      */
     onRequestOpen?: CollapsiblePanelRequestOpenHandler;
     /**
-     * Invoked on a change of the open panel. Callback is passed data, such as
-     * the `panelId` of the `CollapsiblePanel` that originated the expand request.
-     * `panelId` is `undefined` when the open panel is collapsed.
+     * Invoked on a change of the open panel.
+     * Callback is passed the `panelId` of the `CollapsiblePanel` that originated the expand request and the `action` ("open" or "close")
      */
     onChange?: CollapsiblePanelChangeHandler;
     /**
@@ -102,7 +102,7 @@ interface CollapsiblePanelDeprecatedControlledProps extends CollapsiblePanelProp
     defaultOpen?: never;
     onRequestOpen?: CollapsiblePanelRequestOpenHandler;
     onRequestClose?: CollapsiblePanelRequestCloseHandler;
-    onChange: never;
+    onChange?: never;
     open?: boolean;
 }
 interface CollapsiblePanelControlledProps extends CollapsiblePanelPropsBase {
@@ -133,6 +133,7 @@ declare class CollapsiblePanel extends Component<CollapsiblePanelProps, Collapsi
     constructor(props: Readonly<CollapsiblePanelProps>);
     componentDidMount(): void;
     componentDidUpdate(prevProps: Readonly<CollapsiblePanelProps>): void;
+    private isOpen;
     private handleRequestClose;
     private handleRequestOpen;
     private handleChange;

package/types/src/CollapsiblePanel/SingleOpenPanelGroup.d.ts

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import { ComponentProps } from '../utils/types';
 /** @public */
 declare type SingleOpenPanelGroupChangeHandler = (event: React.MouseEvent<HTMLButtonElement>, data: {
-    openPanelId?: string | number | null;
+    action: 'open' | 'close';
+    panelId?: string | number;
     reason: 'toggleClick';
 }) => void;
 interface SingleOpenPanelGroupPropsBase {
@@ -26,9 +27,8 @@ interface SingleOpenPanelGroupPropsBase {
      */
     inset?: boolean;
     /**
-     * Invoked on a change of the open panel. Callback is passed data, such as
-     * the `panelId` of the `CollapsiblePanel` that originated the expand request.
-     * `panelId` is `undefined` when the open panel is collapsed.
+     * Invoked on a change of the open panel.
+     * Callback is passed the `panelId` of the `CollapsiblePanel` that originated the expand request and the `action` ("open" or "close")
      */
     onChange?: SingleOpenPanelGroupChangeHandler;
     /**