@splunk/react-ui 4.25.0 → 4.26.0

package/Breadcrumbs.js

@@ -61,7 +61,8 @@
         e.r(r);
     // EXPORTS
         e.d(r, {
-        Item: () => /* reexport */ h,
+        BreadcrumbsContext: () => /* reexport */ E,
+        Item: () => /* reexport */ O,
         default: () => /* reexport */ q
     });
     // CONCATENATED MODULE: external "react"
@@ -74,14 +75,14 @@
     const l = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "styled-components"
     const i = require("styled-components");
-    var s =  e.n(i);
+    var c =  e.n(i);
     // CONCATENATED MODULE: external "@splunk/themes"
     const u = require("@splunk/themes");
     // CONCATENATED MODULE: external "@splunk/react-ui/Link"
-    const c = require("@splunk/react-ui/Link");
-    var f =  e.n(c);
+    const s = require("@splunk/react-ui/Link");
+    var f =  e.n(s);
     // CONCATENATED MODULE: ./src/Breadcrumbs/ItemStyles.ts
-    var d = s()(f()).withConfig({
+    var d = c()(f()).withConfig({
         displayName: "ItemStyles__StyledLink",
         componentId: "sc-1ywtawf-0"
     })([ "display:flex;align-items:center;gap:", ";white-space:nowrap;color:", ";&:where(:hover,:focus):not([disabled],[aria-disabled='true']){color:", ";}" ], u.variables.spacingXSmall, u.variables.contentColorDefault, u.variables.contentColorActive);
@@ -102,7 +103,7 @@
     }
     function b(e, r) {
         if (e == null) return {};
-        var t = m(e, r);
+        var t = v(e, r);
         var n, a;
         if (Object.getOwnPropertySymbols) {
             var o = Object.getOwnPropertySymbols(e);
@@ -115,7 +116,7 @@
         }
         return t;
     }
-    function m(e, r) {
+    function v(e, r) {
         if (e == null) return {};
         var t = {};
         var n = Object.keys(e);
@@ -127,7 +128,7 @@
         }
         return t;
     }
-    var v = Object.freeze({
+    var m = Object.freeze({
         allowDisabledLink: true,
         disabled: true,
         to: ""
@@ -138,6 +139,7 @@
         endAdornment: o().node,
         isCurrent: o().bool,
         label: o().string.isRequired,
+        onClick: o().func,
         startAdornment: o().node,
         to: o().string.isRequired
     };
@@ -145,42 +147,56 @@
         enableCurrentPage: false,
         isCurrent: false
     };
-    function O(e) {
-        var r = e.enableCurrentPage, t = e.endAdornment, a = e.isCurrent, o = e.label, l = e.startAdornment, i = e.to, s = b(e, [ "enableCurrentPage", "endAdornment", "isCurrent", "label", "startAdornment", "to" ]);
+    function C(e) {
+        var r = e.enableCurrentPage, a = e.endAdornment, o = e.isCurrent, l = e.label, i = e.onClick, c = e.startAdornment, u = e.to, s = b(e, [ "enableCurrentPage", "endAdornment", "isCurrent", "label", "onClick", "startAdornment", "to" ]);
         // @docs-props-type ItemPropsBase
-                var u = {
-            to: i
+                var f = (0, t.useContext)(E), v = f.onClick;
+        var y = {
+            to: u
         };
-        if (a) {
-            u["aria-current"] = "page";
+        var g = (0, t.useCallback)((function(e) {
+            i === null || i === void 0 ? void 0 : i(e, {
+                label: l,
+                to: u
+            });
+            v === null || v === void 0 ? void 0 : v(e, {
+                label: l,
+                to: u
+            });
+        }), [ i, v, l, u ]);
+        if (o) {
+            y["aria-current"] = "page";
             if (!r) {
-                Object.assign(u, v);
+                Object.assign(y, m);
             }
         }
+        var C = i || v ? {
+            onClick: g
+        } : {};
         
         return n().createElement(d, p({
             "data-test": "item"
-        }, u, s), l && l, o, t && t);
+        }, C, y, s), c && c, l, a && a);
     }
-    O.propTypes = y;
-    O.defaultProps = g;
-    /* harmony default export */    const h = O;
+    C.propTypes = y;
+    C.defaultProps = g;
+    /* harmony default export */    const O = C;
     // CONCATENATED MODULE: ./src/Breadcrumbs/BreadcrumbsStyles.ts
-    var C = s().ol.withConfig({
+    var h = c().ol.withConfig({
         displayName: "BreadcrumbsStyles__StyledList",
         componentId: "sc-1maeyfk-0"
     })([ "", " flex-wrap:wrap;" ], u.mixins.reset("flex"));
-    var w = s().li.withConfig({
+    var k = c().li.withConfig({
         displayName: "BreadcrumbsStyles__StyledListItem",
         componentId: "sc-1maeyfk-1"
     })([ "display:flex;min-width:max-content;a[aria-current]{font-weight:", ";color:", ";cursor:default;}" ], u.variables.fontWeightSemiBold, u.variables.contentColorActive);
-    var P = s().span.withConfig({
+    var P = c().span.withConfig({
         displayName: "BreadcrumbsStyles__StyledSeparator",
         componentId: "sc-1maeyfk-2"
     })([ "cursor:default;padding:0 ", ";color:", ";" ], u.variables.spacingSmall, u.variables.contentColorDefault);
     // CONCATENATED MODULE: ./src/Breadcrumbs/Breadcrumbs.tsx
-    function S() {
-        S = Object.assign || function(e) {
+    function w() {
+        w = Object.assign || function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var t = arguments[r];
                 for (var n in t) {
@@ -191,11 +207,11 @@
             }
             return e;
         };
-        return S.apply(this, arguments);
+        return w.apply(this, arguments);
     }
-    function j(e, r) {
+    function S(e, r) {
         if (e == null) return {};
-        var t = _(e, r);
+        var t = j(e, r);
         var n, a;
         if (Object.getOwnPropertySymbols) {
             var o = Object.getOwnPropertySymbols(e);
@@ -208,7 +224,7 @@
         }
         return t;
     }
-    function _(e, r) {
+    function j(e, r) {
         if (e == null) return {};
         var t = {};
         var n = Object.keys(e);
@@ -220,44 +236,51 @@
         }
         return t;
     }
-    var k = {
+    var x = {
         children: o().node.isRequired,
         elementRef: o().oneOfType([ o().func, o().object ]),
-        enableCurrentPage: o().bool
+        enableCurrentPage: o().bool,
+        onClick: o().func
     };
-    var x = {
+    var _ = {
         enableCurrentPage: false
     };
+    var E =  n().createContext({});
     function I(e) {
-        var r = e.children, a = e.elementRef, o = e.enableCurrentPage, i = j(e, [ "children", "elementRef", "enableCurrentPage" ]);
+        var r = e.children, a = e.elementRef, o = e.enableCurrentPage, i = e.onClick, c = S(e, [ "children", "elementRef", "enableCurrentPage", "onClick" ]);
         // @docs-props-type BreadcrumbsPropsBase
-                var s;
-        var u = t.Children.toArray(r).filter(t.isValidElement).map((function(e, a) {
+                var u;
+        var s = t.Children.toArray(r).filter(t.isValidElement).map((function(e, a) {
             if (false) {}
             if (false) {}
- // Set the last child as the current Breadcrumb.Item
+ // Set the last child as the current Breadcrumbs.Item
                         var l = a === t.Children.count(r) - 1;
             var i =  (0, t.cloneElement)(e, {
                 isCurrent: l,
                 enableCurrentPage: o
             });
             
-            return n().createElement(w, {
+            return n().createElement(k, {
                 key: e.props.to
             }, i, !l &&  n().createElement(P, {
                 "aria-hidden": "true"
             }, "/"));
         }));
+        var f = {
+            onClick: i
+        };
         
-        return n().createElement("nav", S({
+        return n().createElement(E.Provider, {
+            value: f
+        },  n().createElement("nav", w({
             "data-test": "breadcrumbs",
-            "aria-label": (0, l._)("Breadcrumb"),
+            "aria-label": (0, l._)("Breadcrumbs"),
             ref: a
-        }, i),  n().createElement(C, null, u));
+        }, c),  n().createElement(h, null, s)));
     }
-    I.propTypes = k;
-    I.defaultProps = x;
-    I.Item = h;
+    I.propTypes = x;
+    I.defaultProps = _;
+    I.Item = O;
     /* harmony default export */    const q = I;
     // CONCATENATED MODULE: ./src/Breadcrumbs/index.ts
     module.exports = r;

package/CHANGELOG.md

@@ -1,14 +1,31 @@
 Change Log
 ============
 
+4.26.0 - Feb 21, 2024
+----------
+New Features: 
+* `Modal` automatically returns focus to the invoking element after close when a ref is provided to the new prop `returnFocus` (SUI-2834).
+* `Breadcrumbs` and `Breadcrumbs.Item` now support `onClick` prop (SUI-5911).
+
+Bug Fixes:
+* `TextArea`'s test selector is now `data-test="text-area"` rather than `data-test="text"` (SUI-5964).
+* The icon in `Modal.Header` is now aligned with the top of the title (SUI-5930).
+* `TextArea` renders at the correct size when `minRows={1}` (SUI-6010).
+* `TextArea` has consistent height when rendering rows regardless if value is present.
+* Fixed spurious deprecation warnings for `canClear` and `placeholder` props in `TextArea`.
+* Fixed regression in `TextArea` where placeholder text could be cut off. 
+
+API Changes:
+* Corrected the type of `Modal`'s `initialFocus` prop to include `React.Component & { focus: () => void }` instead of  `React.Component & { focus: () => {} }`.
+
 4.25.0 - Feb 6, 2024
 ----------
 New Features: 
-* Modal supports `subtitle` and `icon` props in Enterprise themes (SUI-5924).
+* `Modal` supports `subtitle` and `icon` props in Enterprise themes (SUI-5924).
 * `Button` now supports a new `"dimmed"` value for the `disabled` prop (SUI-5819).
 
 Bug Fixes:
-* Modal `subtitle` is used as the accessible description for the dialog (SUI-5264).
+* `Modal`'s `subtitle` is used as the accessible description for the dialog (SUI-5264).
 * `Color`'s `required` attribute is correctly applied when inside a `ControlGroup` in Prisma themes (SUI-5386).
 * `RadioList`'s `required` attribute is correctly applied when inside a `ControlGroup` (SUI-5386).
 
@@ -30,6 +47,7 @@ New Features:
 Bug Fixes:
 * The system color picker for `Color` no longer closes unexpectedly during color selection in Safari (SUI-5831).
 * `ComboBox`'s options are no longer clickable while closing (SUI-5825).
+* Improved the row drag and drop experience and performance by adopting `@dnd-kit` in `Table` component (SUI-5134).
 
 Deprecations:
 * `JSONTree`'s `expandChildren="withShiftModifier"` value has been deprecated and will be removed in a future major version. Use the `expandChildrenOnShiftKey` prop instead (SUI-5771).
@@ -87,7 +105,7 @@ Docs:
 4.20.0 - September 5, 2023
 ----------
 New Features:
-* New `Breacrumbs` component (SUI-1819).
+* New `Breadcrumbs` component (SUI-1819).
 * `Code` now supports `language="splunk-spl"` (SUI-5737).
 
 Bug Fixes:

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

@@ -208,12 +208,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 +229,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 +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,7 +349,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"
@@ -681,20 +681,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 +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, 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 +828,7 @@
         je(o, [ {
             key: "componentDidMount",
             value: function e() {
-                this.handleInitialFocus();
+                this.handleFocus();
             }
         }, {
             key: "componentDidUpdate",
@@ -828,7 +839,7 @@
                     // so that focus won't jump around if "initialFocus" changes
                     clearTimeout(this.initialFocusTimeoutId);
                 }
-                this.handleInitialFocus();
+                this.handleFocus(t.open);
             }
         }, {
             key: "render",
@@ -845,12 +856,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;
     /******/})();