@splunk/react-ui 4.25.0 → 4.27.0

package/Color.js

@@ -331,7 +331,9 @@
     var le = j().ul.withConfig({
         displayName: "PaletteStyles__StyledSwatches",
         componentId: "qgv9v9-1"
-    })([ "", ";margin-bottom:", ";" ], P.mixins.reset("block"), P.variables.spacingQuarter);
+    })([ "", ";", "" ], P.mixins.reset("block"), (0, P.pick)({
+        enterprise: (0, I.css)([ "margin-bottom:", ";" ], P.variables.spacingQuarter)
+    }));
     var ie = j().li.withConfig({
         displayName: "PaletteStyles__StyledSwatch",
         componentId: "qgv9v9-2"

package/ControlGroup.js

@@ -677,6 +677,7 @@
                 
                 return n().createElement(O, E({
                     "data-test": "control-group",
+                    "data-test-required": m,
                     $error: Q
                 }, B),  n().createElement(T.Provider, {
                     value: this.getContextValue()

package/MIGRATION.mdx

@@ -5,6 +5,84 @@ import Table from '@splunk/react-ui/Table';
 
 This document lists migration guidance for new features and breaking changes.
 
+## 4.27.0
+
+### New `SingleOpenPanelGroup` API for `CollapsiblePanel`
+
+#### Change
+A new API, `SingleOpenPanelGroup`, has been added to `CollapsiblePanel`. 
+
+#### Context
+`Accordion` and `CollapsiblePanel` have similar style and behavior. Their only behavioral difference was that `Accordion` would only allow one panel to be open at a time, whereas `CollapsiblePanel` would allow multiple panels to be open at a time.
+
+Although they looked and behaved similarly, the APIs of `Accordion` and `CollapsiblePanel` were inconsistent. `inset` was supported in `Accordion` but not `CollapsiblePanel`; while actions were supported in `CollapsiblePanel` but not `Accordion`. Lastly, the components had different numbers of event handlers with different signatures. 
+
+These differences could lead to confusion on which component to use. It could also lead to using one component for a certain feature and then adding custom code to duplicate the functionality from the other component. 
+
+Given these behavioral and technical differences, `Accordion` will be deprecated in the next major version and `CollapsiblePanel` will support all the features of `Accordion` through its `SingleOpenPanelGroup` API. You will still be able to use `Accordion` in the next major version, but we recommend following the migration steps below at your earliest convenience.
+
+#### Migration steps
+Replace usage of `Accordion` with the `SingleOpenPanelGroup` component exported from `CollapsiblePanel`. See the `SingleOpenPanelGroup` examples in `CollapsiblePanel`'s documentation.
+
+### Deprecated `onRequestClose` and `onRequestOpen` callbacks and added new `onChange` callback for `CollapsiblePanel`
+
+#### Change
+`CollapsiblePanel`'s `onRequestClose` and `onRequestOpen` callbacks have been deprecated and will be removed in the next major version. A new callback `onChange` has been added to `CollapsiblePanel`. 
+
+#### Context
+An `onChange` callback is more consistent with other components in `@splunk/react-ui`. 
+
+#### Migration steps
+Replace `onRequestClose` and `onRequestOpen` callbacks with the new `onChange` callback when using a controlled `CollapsiblePanel`. See the Controlled example in `CollapsiblePanel`'s documentation.
+
+## 4.26.0
+
+### New `returnFocus` prop for `Modal`
+
+#### Change
+A new prop, `returnFocus`, has been added to `Modal`. `returnFocus` is optional for backwards compatibility but will be required in the next major version. 
+
+#### Context
+Failing to return focus back to the invoking element (or another logical place) is a WCAG violation. Currently, 
+developers must remember to manually return focus. The `returnFocus` prop will be required in the next major version
+and ensure focus is returned back to the invoking element. 
+
+#### Migration steps
+Previously it was required to add code to manually return focus in `onRequestClose` for the `Modal` and `Modal.Header`. 
+This code can now be removed and replaced by passing the invoking element's ref to the new `returnFocus` prop on `Modal`. 
+
+For example, this code snippet:
+```jsx
+    const handleRequestClose = () => {
+        setOpen(false);
+        modalToggle?.current?.focus();
+    };
+
+    return (
+        <>
+            <Button onClick={handleRequestOpen} ref={modalToggle} label="Open modal" />
+            <Modal onRequestClose={handleRequestClose} open={open}>
+                <Modal.Body>Just a basic Modal.</Modal.Body>
+            </Modal>
+        </>
+    );
+```
+can be converted to this code:
+```jsx
+    const handleRequestClose = () => {
+        setOpen(false);
+    };
+
+    return (
+        <>
+            <Button onClick={handleRequestOpen} ref={modalToggle} label="Open modal" />
+            <Modal returnFocus={modalToggle} onRequestClose={handleRequestClose} open={open}>
+                <Modal.Body>Just a basic Modal.</Modal.Body>
+            </Modal>
+        </>
+    );
+```
+
 ## 4.23.0
 
 ### Deprecated `JSONTree`'s `expandChildren="withShiftModifier"` value

package/Modal.js

@@ -105,8 +105,7 @@
     var j = x()(S()).withConfig({
         displayName: "BodyStyles__StyledBox",
         componentId: "lv54z7-0"
-    })([ "background-color:", ";", " flex:0 1 auto;overflow:auto;@media all and (-ms-high-contrast:none){*::-ms-backdrop,&{max-height:calc(100vh - 180px);}}" ], (0, 
-    w.pick)({
+    })([ "background-color:", ";", " flex:0 1 auto;overflow:auto;" ], (0, w.pick)({
         enterprise: w.variables.backgroundColor,
         prisma: w.variables.backgroundColorDialog
     }), (0, w.pick)({
@@ -208,12 +207,12 @@
         }
         return r;
     }
-    var D = {
+    var F = {
         children: i().node
     };
     /**
  * A styled container for `Modal` body content.
- */    function F(e) {
+ */    function D(e) {
         var t = e.children, o = T(e, [ "children" ]);
         // @docs-props-type BodyPropsBase
                 var i = (0, r.useState)(), a = I(i, 2), l = a[0], c = a[1];
@@ -229,8 +228,8 @@
             value: l
         }, t));
     }
-    F.propTypes = D;
-    /* harmony default export */    const R = F;
+    D.propTypes = F;
+    /* harmony default export */    const R = D;
     // CONCATENATED MODULE: external "@splunk/react-ui/Divider"
     const A = require("@splunk/react-ui/Divider");
     var B =  e.n(A);
@@ -320,7 +319,7 @@
     var J = x()(S()).withConfig({
         displayName: "HeaderStyles__StyledBox",
         componentId: "sc-1y722ut-0"
-    })([ "", ";flex:0 0 auto;position:relative;min-height:", ";background-color:", ";padding:", ";align-items:center;padding-right:", ";" ], w.mixins.reset("flex"), (0, 
+    })([ "", ";flex:0 0 auto;position:relative;min-height:", ";background-color:", ";padding:", ";align-items:flex-start;padding-right:", ";" ], w.mixins.reset("flex"), (0, 
     w.pick)({
         enterprise: "30px",
         prisma: {
@@ -349,7 +348,7 @@
     var Q = x().div.withConfig({
         displayName: "HeaderStyles__StyledTitleWrapper",
         componentId: "sc-1y722ut-1"
-    })([ "", ";flex-direction:column;" ], w.mixins.reset("flex"));
+    })([ "", ";flex-direction:column;align-self:center;" ], w.mixins.reset("flex"));
     var Y = x().div.withConfig({
         displayName: "HeaderStyles__StyledIcon",
         componentId: "sc-1y722ut-2"
@@ -364,15 +363,25 @@
     var Z = x().div.withConfig({
         displayName: "HeaderStyles__StyledTitle",
         componentId: "sc-1y722ut-3"
-    })([ "", ";font-size:20px;margin:0;overflow-wrap:break-word;font-weight:", ";color:", ";", "" ], w.mixins.reset("block"), w.variables.fontWeightSemiBold, w.variables.contentColorActive, (0, 
+    })([ "", ";", " margin:0;overflow-wrap:break-word;" ], w.mixins.reset("block"), (0, 
     w.pick)({
-        enterprise: (0, g.css)([ "line-height:22px;" ]),
-        prisma: (0, g.css)([ "line-height:24px;" ])
+        enterprise: (0, g.css)([ "", "" ], w.mixins.typography({
+            size: 20,
+            weight: "semiBold",
+            color: "active",
+            lineHeight: 22
+        })),
+        prisma: (0, g.css)([ "", "" ], w.mixins.typography({
+            size: 20,
+            weight: "semiBold",
+            color: "active",
+            lineHeight: 24
+        }))
     }));
     var ee = x().div.withConfig({
         displayName: "HeaderStyles__StyledSubtitle",
         componentId: "sc-1y722ut-4"
-    })([ "", ";font-size:14px;overflow-wrap:break-word;line-height:", ";" ], w.mixins.reset("block"), w.variables.lineHeight);
+    })([ "", ";overflow-wrap:break-word;" ], w.mixins.reset("block"));
     var te = x().div.withConfig({
         displayName: "HeaderStyles__StyledButtonsWrapper",
         componentId: "sc-1y722ut-5"
@@ -681,20 +690,21 @@
         }
         return e;
     }
-    /** @public */    var qe = {
+    var qe = {
         children: i().node,
         divider: i().oneOf([ "header", "footer", "both", "none" ]),
         elementRef: i().oneOfType([ i().func, i().object ]),
         initialFocus: i().oneOfType([ i().object, i().oneOf([ "first", "container" ]) ]),
         onRequestClose: i().func,
-        open: i().bool
+        open: i().bool,
+        returnFocus: i().oneOfType([ i().func, i().object ])
     };
-    var De = {
+    var Fe = {
         divider: "both",
         initialFocus: "first",
         open: false
     };
-    var Fe =  function(e) {
+    var De =  function(e) {
         ke(o, e);
         var t = Ce(o);
         // @docs-props-type ModalPropsBase
@@ -723,36 +733,46 @@
                     top: 0
                 };
             }));
-            Te(_e(i), "handleInitialFocus", (function() {
-                var e = i.props, t = e.initialFocus, r = e.open;
-                if (r) {
+            Te(_e(i), "handleFocus", (function(e) {
+                var t = i.props, r = t.initialFocus, n = t.open;
+                if (n) {
                     i.initialFocusTimeoutId = l()((function() {
                         var e;
  // not using the takeFocus() util here because it
                         // doesn't work for all values of "initialFocus"
                         // and it has a nested defer() call, which we want to avoid
-                                                if (i.initialFocus !== t) {
-                            if (t === "first") {
+                                                if (i.initialFocus !== r) {
+                            if (r === "first") {
                                 if (i.el) {
                                     /* eslint-disable prefer-destructuring */
                                     /* prefer-desturucting leads to harder-to-read syntax in this case */
                                     e = (0, m.getSortedTabbableElements)(i.el)[0];
                                     /* eslint-enable prefer-destructuring */                                }
-                            } else if (t === "container") {
+                            } else if (r === "container") {
                                 e = i.el;
-                            } else if (Oe(t) === "object") {
-                                e = t;
+                            } else if (Oe(r) === "object") {
+                                e = r;
                             }
  // Typescript isn't happy with optional chaining here
                                                         if (e != null && "focus" in e) {
                                 e.focus();
                             }
-                            i.initialFocus = t;
+                            i.initialFocus = r;
                         }
                     }));
                 } else {
                     i.initialFocus = null;
                     clearTimeout(i.initialFocusTimeoutId);
+                    if (e) {
+                        /**
+           * We return focus to the invoking element here instead of in `handleRequestClose` because users can
+           * close the modal by updating the value of the `open` prop without calling `onRequestClose`
+           */
+                        l()((function() {
+                            var e, t, r;
+                            (e = i.props.returnFocus) === null || e === void 0 ? void 0 : (t = e.current) === null || t === void 0 ? void 0 : (r = t.focus) === null || r === void 0 ? void 0 : r.call(t);
+                        }));
+                    }
                 }
             }));
             Te(_e(i), "handleModalMount", (function(e) {
@@ -817,7 +837,7 @@
         je(o, [ {
             key: "componentDidMount",
             value: function e() {
-                this.handleInitialFocus();
+                this.handleFocus();
             }
         }, {
             key: "componentDidUpdate",
@@ -828,7 +848,7 @@
                     // so that focus won't jump around if "initialFocus" changes
                     clearTimeout(this.initialFocusTimeoutId);
                 }
-                this.handleInitialFocus();
+                this.handleFocus(t.open);
             }
         }, {
             key: "render",
@@ -845,12 +865,12 @@
         } ]);
         return o;
     }(r.Component);
-    Te(Fe, "propTypes", qe);
-    Te(Fe, "defaultProps", De);
-    Te(Fe, "Header", ce);
-    Te(Fe, "Body", R);
-    Te(Fe, "Footer", V);
-    /* harmony default export */    const Re = Fe;
+    Te(De, "propTypes", qe);
+    Te(De, "defaultProps", Fe);
+    Te(De, "Header", ce);
+    Te(De, "Body", R);
+    Te(De, "Footer", V);
+    /* harmony default export */    const Re = De;
     // CONCATENATED MODULE: ./src/Modal/index.ts
     module.exports = t;
     /******/})();