@splunk/react-ui 4.24.0 → 4.26.0

package/Color.js

@@ -668,6 +668,8 @@
         palette: o().array,
         prepend: o().bool,
         /** @private */
+        required: o().bool,
+        /** @private */
         splunkTheme: o().object,
         value: o().string
     };
@@ -957,17 +959,17 @@
             key: "renderInput",
             value: function e(t) {
                 var a = t.textAppend, o = t.textPrepend, l = t.textInline, i = t.inDropdown;
-                var s = this.props.splunkTheme;
-                var u = this.state.displayValue;
-                var c = s.isPrisma;
-                var p = r.hasTransparent(this.props.palette) && g()(u) === "transparent";
-                var d = g()(u) === Fe;
-                var f = u;
-                if (!y()(u, "#")) {
-                    f = "#".concat(u);
+                var s = this.props, u = s.splunkTheme, c = s.required;
+                var p = this.state.displayValue;
+                var d = u.isPrisma;
+                var f = r.hasTransparent(this.props.palette) && g()(p) === "transparent";
+                var v = g()(p) === Fe;
+                var h = p;
+                if (!y()(p, "#")) {
+                    h = "#".concat(p);
                 }
-                f = p ? "transparent" : f;
-                f = d ? null : f;
+                h = f ? "transparent" : h;
+                h = v ? null : h;
                 
                 return n().createElement(Y, {
                     $inDropdown: i
@@ -977,17 +979,18 @@
                     autoCapitalize: "off",
                     autoComplete: "off",
                     autoCorrect: "off",
-                    spellCheck: false,
                     "aria-label": (0, _._)("Hexadecimal color value"),
-                    prepend: o,
                     inline: l,
+                    prepend: o,
                     onKeyDown: this.handleTextKeyDown,
                     onChange: this.handleTextChange,
-                    value: u
-                }), !c &&  n().createElement(J, {
+                    required: c,
+                    spellCheck: false,
+                    value: p
+                }), !d &&  n().createElement(J, {
                     "data-test": "textbox-swatch",
                     onClick: this.handleButtonClick,
-                    value: f,
+                    value: h,
                     tabIndex: -1,
                     style: {
                         marginLeft: "1px"

package/JSONTree.js

@@ -419,7 +419,7 @@
                 var t = this;
                 var o = r.withTooltip;
                 var a = this.state.open ? "[-]" : "[+]";
-                var i = this.state.open ? (0, K._)("Shift click to collapse all") : (0, K._)("Shift click to expand all");
+                var i = this.state.open ? (0, K._)("Collapse all") : (0, K._)("Shift click to expand all");
                 var l =  n().createElement(D, {
                     onClick: function e(r) {
                         t.handleExpandClick(r);

package/MIGRATION.mdx

@@ -5,6 +5,54 @@ import Table from '@splunk/react-ui/Table';
 
 This document lists migration guidance for new features and breaking changes.
 
+## 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

@@ -86,9 +86,9 @@
     var d =  e.n(f);
     // CONCATENATED MODULE: external "@splunk/react-ui/ModalLayer"
     const y = require("@splunk/react-ui/ModalLayer");
-    var m =  e.n(y);
+    var b =  e.n(y);
     // CONCATENATED MODULE: external "@splunk/ui-utils/focus"
-    const b = require("@splunk/ui-utils/focus");
+    const m = require("@splunk/ui-utils/focus");
     // CONCATENATED MODULE: external "@splunk/ui-utils/id"
     const v = require("@splunk/ui-utils/id");
     // CONCATENATED MODULE: external "@splunk/react-ui/ScrollContainerContext"
@@ -102,7 +102,7 @@
     // CONCATENATED MODULE: external "@splunk/themes"
     const w = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Modal/BodyStyles.ts
-    var k = x()(S()).withConfig({
+    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, 
@@ -120,8 +120,8 @@
         }
     }));
     // CONCATENATED MODULE: ./src/Modal/Body.tsx
-    function j() {
-        j = Object.assign || function(e) {
+    function k() {
+        k = Object.assign || function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var r = arguments[t];
                 for (var n in r) {
@@ -132,12 +132,12 @@
             }
             return e;
         };
-        return j.apply(this, arguments);
+        return k.apply(this, arguments);
     }
-    function C(e, t) {
-        return M(e) || E(e, t) || P(e, t) || I();
+    function I(e, t) {
+        return M(e) || E(e, t) || P(e, t) || C();
     }
-    function I() {
+    function C() {
         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 P(e, t) {
@@ -216,12 +216,12 @@
  */    function D(e) {
         var t = e.children, o = T(e, [ "children" ]);
         // @docs-props-type BodyPropsBase
-                var i = (0, r.useState)(), a = C(i, 2), l = a[0], c = a[1];
+                var i = (0, r.useState)(), a = I(i, 2), l = a[0], c = a[1];
         var s = (0, r.useCallback)((function(e) {
             c(e);
         }), []);
         
-        return n().createElement(k, j({
+        return n().createElement(j, k({
             "data-test": "body"
         }, o, {
             elementRef: s
@@ -320,7 +320,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,14 +349,12 @@
     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"
-    })([ "", ";align-items:center;justify-content:center;margin-right:", ";", " width:", ";height:", ";flex-shrink:0;" ], w.mixins.reset("inline-flex"), w.variables.spacingLarge, (0, 
+    })([ "", ";align-items:center;justify-content:center;margin-right:", ";background-color:", ";width:", ";height:", ";flex-shrink:0;" ], w.mixins.reset("inline-flex"), w.variables.spacingLarge, w.variables.transparent, (0, 
     w.pick)({
-        prisma: (0, g.css)([ "background-color:", ";" ], w.variables.transparent)
-    }), (0, w.pick)({
         comfortable: "40px",
         compact: "32px"
     }), (0, w.pick)({
@@ -366,19 +364,15 @@
     var Z = x().div.withConfig({
         displayName: "HeaderStyles__StyledTitle",
         componentId: "sc-1y722ut-3"
-    })([ "", ";font-size:20px;margin:0;overflow-wrap:break-word;font-weight:", ";", "" ], w.mixins.reset("block"), w.variables.fontWeightSemiBold, (0, 
+    })([ "", ";font-size:20px;margin:0;overflow-wrap:break-word;font-weight:", ";color:", ";", "" ], w.mixins.reset("block"), w.variables.fontWeightSemiBold, w.variables.contentColorActive, (0, 
     w.pick)({
         enterprise: (0, g.css)([ "line-height:22px;" ]),
-        prisma: (0, g.css)([ "color:", ";line-height:24px;" ], w.variables.contentColorActive)
+        prisma: (0, g.css)([ "line-height:24px;" ])
     }));
     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"), (0, 
-    w.pick)({
-        enterprise: w.variables.lineHeight,
-        prisma: "20px"
-    }));
+    })([ "", ";font-size:14px;overflow-wrap:break-word;line-height:", ";" ], w.mixins.reset("block"), w.variables.lineHeight);
     var te = x().div.withConfig({
         displayName: "HeaderStyles__StyledButtonsWrapper",
         componentId: "sc-1y722ut-5"
@@ -459,8 +453,8 @@
  */    function le(e) {
         var t = e.children, o = e.icon, i = e.onRequestClose, a = e.subtitle, l = e.title, c = oe(e, [ "children", "icon", "onRequestClose", "subtitle", "title" ]);
         // @docs-props-type StepPropsBase
-                var s = (0, r.useContext)(z), u = s.titleId, p = s.divider;
-        var f = p === "both" || p === "header";
+                var s = (0, r.useContext)(z), u = s.titleId, p = s.subtitleId, f = s.divider;
+        var d = f === "both" || f === "header";
         
         return n().createElement(n().Fragment, null,  n().createElement(J, ne({
             $close: !!i,
@@ -469,11 +463,12 @@
             id: u,
             "data-test": "title"
         }, l), a &&  n().createElement(ee, {
+            id: p,
             "data-test": "subtitle"
         }, a)) : t, i &&  n().createElement(te, null, i &&  n().createElement(re, null,  n().createElement(G(), {
             onClick: i,
             "data-test": "close"
-        })))), f &&  n().createElement(B(), {
+        })))), d &&  n().createElement(B(), {
             "aria-hidden": true
         }));
     }
@@ -525,12 +520,12 @@
         return fe.apply(this, arguments);
     }
     function de(e) {
-        return ve(e) || be(e) || me(e) || ye();
+        return ve(e) || me(e) || be(e) || ye();
     }
     function ye() {
         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 me(e, t) {
+    function be(e, t) {
         if (!e) return;
         if (typeof e === "string") return he(e, t);
         var r = Object.prototype.toString.call(e).slice(8, -1);
@@ -538,7 +533,7 @@
         if (r === "Map" || r === "Set") return Array.from(e);
         if (r === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)) return he(e, t);
     }
-    function be(e) {
+    function me(e) {
         if (typeof Symbol !== "undefined" && Symbol.iterator in Object(e)) return Array.from(e);
     }
     function ve(e) {
@@ -606,12 +601,12 @@
             Object.defineProperty(e, n.key, n);
         }
     }
-    function ke(e, t, r) {
+    function je(e, t, r) {
         if (t) we(e.prototype, t);
         if (r) we(e, r);
         return e;
     }
-    function je(e, t) {
+    function ke(e, t) {
         if (typeof t !== "function" && t !== null) {
             throw new TypeError("Super expression must either be null or a function");
         }
@@ -622,16 +617,16 @@
                 configurable: true
             }
         });
-        if (t) Ce(e, t);
+        if (t) Ie(e, t);
     }
-    function Ce(e, t) {
-        Ce = Object.setPrototypeOf || function e(t, r) {
+    function Ie(e, t) {
+        Ie = Object.setPrototypeOf || function e(t, r) {
             t.__proto__ = r;
             return t;
         };
-        return Ce(e, t);
+        return Ie(e, t);
     }
-    function Ie(e) {
+    function Ce(e) {
         var t = Ee();
         return function r() {
             var n = Me(e), o;
@@ -686,13 +681,14 @@
         }
         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 Fe = {
         divider: "both",
@@ -700,8 +696,8 @@
         open: false
     };
     var De =  function(e) {
-        je(o, e);
-        var t = Ie(o);
+        ke(o, e);
+        var t = Ce(o);
         // @docs-props-type ModalPropsBase
         // this timeout ensures that the Modal is finished rendering before setting the focus
                 function o(e) {
@@ -712,6 +708,7 @@
             Te(_e(i), "initialFocusTimeoutId", undefined);
             Te(_e(i), "initialFocus", null);
             Te(_e(i), "headerTitleId", void 0);
+            Te(_e(i), "headerSubtitleId", void 0);
             Te(_e(i), "getDefaultMotionStyle", (function() {
                 return {
                     top: 0
@@ -727,36 +724,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, b.getSortedTabbableElements)(i.el)[0];
+                                    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) {
@@ -765,7 +772,7 @@
             }));
             Te(_e(i), "handleModalKeyDown", (function(e) {
                 if (i.el !== null) {
-                    (0, b.handleTab)(i.el, e.nativeEvent);
+                    (0, m.handleTab)(i.el, e.nativeEvent);
                 }
             }));
             Te(_e(i), "handleRequestClose", (function(e) {
@@ -774,10 +781,11 @@
                 (t = (r = i.props).onRequestClose) === null || t === void 0 ? void 0 : t.call(r, e);
             }));
             Te(_e(i), "getProviderValue", p()((function(e) {
-                var t = e.titleId, r = e.divider;
+                var t = e.titleId, r = e.subtitleId, n = e.divider;
                 return {
                     titleId: t,
-                    divider: r
+                    subtitleId: r,
+                    divider: n
                 };
             })));
             Te(_e(i), "getModalStyles", p()((function(e) {
@@ -803,21 +811,24 @@
                     tabIndex: -1,
                     onKeyDown: i.handleModalKeyDown,
                     role: "dialog",
-                    "aria-labelledby": i.headerTitleId
+                    "aria-labelledby": i.headerTitleId,
+                    "aria-describedby": i.headerSubtitleId
                 }, d()(i.props, [].concat(de(s()(o.propTypes)), [ "style" ]))),  n().createElement(z.Provider, {
                     value: i.getProviderValue({
                         titleId: i.headerTitleId,
+                        subtitleId: i.headerSubtitleId,
                         divider: l
                     })
                 }, f));
             }));
             i.headerTitleId = (0, v.createDOMID)("titleId");
+            i.headerSubtitleId = (0, v.createDOMID)("subtitleId");
             return i;
         }
-        ke(o, [ {
+        je(o, [ {
             key: "componentDidMount",
             value: function e() {
-                this.handleInitialFocus();
+                this.handleFocus();
             }
         }, {
             key: "componentDidUpdate",
@@ -828,13 +839,13 @@
                     // so that focus won't jump around if "initialFocus" changes
                     clearTimeout(this.initialFocusTimeoutId);
                 }
-                this.handleInitialFocus();
+                this.handleFocus(t.open);
             }
         }, {
             key: "render",
             value: function e() {
                 
-                return n().createElement(m(), {
+                return n().createElement(b(), {
                     open: this.props.open,
                     getDefaultMotionStyle: this.getDefaultMotionStyle,
                     renderModal: this.renderModal,

package/RadioList.js

@@ -303,7 +303,8 @@
             value: b.toString(),
             checked: O,
             onChange: C,
-            "data-test": "input"
+            "data-test": "input",
+            required: x.required
         }),  o().createElement(f, {
             htmlFor: k,
             "data-test": "label"
@@ -413,19 +414,19 @@
         return a;
     }
     var N = {
-        direction: t().oneOf([ "row", "column" ]),
         children: t().node,
         defaultValue: t().any,
+        describedBy: t().string,
+        direction: t().oneOf([ "row", "column" ]),
         disabled: t().bool,
         elementRef: t().oneOfType([ t().func, t().object ]),
         error: t().bool,
+        labelledBy: t().string,
         name: t().string,
         onChange: t().func,
         /** @private. */
         required: t().bool,
-        value: t().any,
-        labelledBy: t().string,
-        describedBy: t().string
+        value: t().any
     };
     function R(e) {
         var r = e.children, i = e.defaultValue, t = e.describedBy, n = e.direction, c = n === void 0 ? "column" : n, u = e.disabled, b = u === void 0 ? false : u, p = e.error, v = p === void 0 ? false : p, f = e.labelledBy, y = e.name, g = e.onChange, m = e.required, h = e.value, k = B(e, [ "children", "defaultValue", "describedBy", "direction", "disabled", "error", "labelledBy", "name", "onChange", "required", "value" ]);
@@ -459,11 +460,12 @@
         
         return o().createElement(d.Provider, {
             value: {
-                value: _,
-                name: E,
-                onChange: D,
+                disabled: b,
                 error: v,
-                disabled: b
+                onChange: D,
+                name: E,
+                required: m,
+                value: _
             }
         },  o().createElement(S, j({
             flex: true,
@@ -473,8 +475,7 @@
             "data-test-value": _
         }, l()(k, [ "aria-labelledby", "aria-describedby" ]), {
             "aria-labelledby": M ? "".concat(M, " ").concat(f) : f,
-            "aria-describedby": T ? "".concat(T, " ").concat(t) : t,
-            "aria-required": m
+            "aria-describedby": T ? "".concat(T, " ").concat(t) : t
         }), r));
     }
     R.propTypes = N;