@splunk/react-ui 4.28.1 → 4.29.0

package/MIGRATION.mdx

@@ -5,6 +5,29 @@ import Table from '@splunk/react-ui/Table';
 
 This document lists migration guidance for new features and breaking changes.
 
+## 4.29.0
+
+### Deprecated `WaitSpinner`'s `children` prop
+
+#### Change
+
+`WaitSpinner`'s `children` prop has been deprecated and will be removed in the next major version.
+
+#### Context
+
+`WaitSpinner` does not support `children` and the prop was not applied in the render of the component. This was properly documented in the TypeScript API as: `children?: never;`. But due to a documentation bug this was not as explicit in the PropTypes documentation.
+
+#### Migration steps
+
+Remove all usage of `WaitSpinner`'s `children` prop. To render a message beside the wait spinner, render a sibling text element and set `screenReaderText` to `null`.
+
+Example with a sibling text element:
+
+```jsx
+    <WaitSpinner screenReaderText={null} />
+    <p>Loading logs</p>
+```
+
 ## 4.27.0
 
 ### New `SingleOpenPanelGroup` API for `CollapsiblePanel`
@@ -161,6 +184,73 @@ No styling is needed.
 <Heading level="ss"> is equivalent to <StyledSHeading level={5} variant="title5"/>
 ```
 
+## 4.17.1
+
+### `TextArea`'s `canClear` prop has been deprecated
+
+#### Context
+The clear button causes styling issues in TextArea that made it undesirable to support. When the scrollbar appears in a TextArea the clear button is positioned outside, which causes excessive negative space between the input border and scrollbar. This feature is supported in `Text` and `Search` but those components do not run into the styling issues because they do not have scrollbars.
+
+Additionally, when entering text into a `TextArea` users can clear the contents using "Select all" via keyboard shortcut or mouse selection. These are natively supported actions and don't require a custom control. It was uncommon to see a clear button in other text areas when doing competitive analysis of other design systems.
+
+#### Migration Step
+
+Remove the `canClear` prop from `TextArea`. If supporting a one-click clear action is critical, there are two possible methods to add this feature: 
+
+1) Use the `endAdornment` prop:
+
+```jsx
+const [text, setText] = useState('I am clearable content.');
+    const handleChange = (e, { value }) => {
+        setText(value);
+    };
+
+    const handleClearClick = () => {
+        setText('');
+    };
+
+    return (
+        <TextArea
+            onChange={handleChange}
+            value={text}
+            endAdornment={
+                <StyledButton
+                    appearance="secondary"
+                    aria-label="Clear text"
+                    icon={<Cross />}
+                    onClick={handleClearClick}
+                />
+        />
+    );
+/>
+```
+
+2) Render a clear action outside of the TextArea:
+
+```jsx
+    const [text, setText] = useState('I am clearable content.');
+    const handleChange = (e, { value }) => {
+        setText(value);
+    };
+
+    const handleClearClick = () => {
+        setText('');
+    };
+
+    return (
+        <>
+            <TextArea onChange={handleChange} value={text} />
+            <StyledButton
+                appearance="secondary"
+                label="Clear text"
+                icon={<Cross />}
+                onClick={handleClearClick}
+            />
+        </>
+    );
+```
+
+
 ## 4.17.0
 
 ### `Typography` `weight` prop

package/Modal.js

@@ -692,6 +692,7 @@
     }
     var qe = {
         children: i().node,
+        closeOnClickAway: i().bool,
         divider: i().oneOf([ "header", "footer", "both", "none" ]),
         elementRef: i().oneOfType([ i().func, i().object ]),
         initialFocus: i().oneOfType([ i().object, i().oneOf([ "first", "container" ]) ]),
@@ -700,6 +701,8 @@
         returnFocus: i().oneOfType([ i().func, i().object ])
     };
     var Fe = {
+        // TODO: Set to `false` in next major version
+        closeOnClickAway: true,
         divider: "both",
         initialFocus: "first",
         open: false
@@ -860,13 +863,16 @@
         }, {
             key: "render",
             value: function e() {
+                var t = this.props.closeOnClickAway;
+                var r = t ? "interactive" : "visible";
                 
                 return n().createElement(b(), {
-                    open: this.props.open,
                     getDefaultMotionStyle: this.getDefaultMotionStyle,
-                    renderModal: this.renderModal,
                     getMotionStyle: this.getMotionStyle,
-                    onRequestClose: this.handleRequestClose
+                    onRequestClose: this.handleRequestClose,
+                    open: this.props.open,
+                    renderModal: this.renderModal,
+                    scrim: r
                 });
             }
         } ]);

package/ModalLayer.js

@@ -9,26 +9,26 @@
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
         /******/ e.n = t => {
-            /******/ var r = t && t.__esModule ? 
+            /******/ var n = t && t.__esModule ? 
             /******/ () => t["default"]
             /******/ : () => t
             /******/;
-            e.d(r, {
-                a: r
+            e.d(n, {
+                a: n
             });
-            /******/            return r;
+            /******/            return n;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (t, r) => {
-            /******/ for (var n in r) {
-                /******/ if (e.o(r, n) && !e.o(t, n)) {
-                    /******/ Object.defineProperty(t, n, {
+        /******/ e.d = (t, n) => {
+            /******/ for (var r in n) {
+                /******/ if (e.o(n, r) && !e.o(t, r)) {
+                    /******/ Object.defineProperty(t, r, {
                         enumerable: true,
-                        get: r[n]
+                        get: n[r]
                     });
                     /******/                }
                 /******/            }
@@ -64,66 +64,66 @@
         default: () => /* reexport */ E
     });
     // CONCATENATED MODULE: external "react"
-    const r = require("react");
-    var n =  e.n(r);
+    const n = require("react");
+    var r =  e.n(n);
     // CONCATENATED MODULE: external "prop-types"
     const o = require("prop-types");
     var i =  e.n(o);
     // CONCATENATED MODULE: external "@splunk/react-ui/Animation"
     const a = require("@splunk/react-ui/Animation");
     // CONCATENATED MODULE: external "@splunk/react-ui/Layer"
-    const l = require("@splunk/react-ui/Layer");
-    var u =  e.n(l);
+    const c = require("@splunk/react-ui/Layer");
+    var l =  e.n(c);
     // CONCATENATED MODULE: external "styled-components"
-    const c = require("styled-components");
-    var s =  e.n(c);
+    const u = require("styled-components");
+    var s =  e.n(u);
     // CONCATENATED MODULE: external "react-spring"
     const f = require("react-spring");
     // CONCATENATED MODULE: external "@splunk/themes"
     const p = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/ModalLayer/ModalLayerStyles.ts
-    var y = (0, c.css)([ "", ";position:fixed;top:0;right:0;bottom:0;left:0;" ], p.mixins.reset("block"));
+    var y = (0, u.css)([ "", ";position:fixed;top:0;right:0;bottom:0;left:0;" ], p.mixins.reset("block"));
     var d = s()(f.animated.div).withConfig({
         displayName: "ModalLayerStyles__StyledClickAwayOverlay",
         componentId: "sc-1sa3n1j-0"
     })([ "", ";background-color:", ";z-index:", ";" ], y, p.variables.backgroundColorScrim, p.variables.zindexModalBackdrop);
     // CONCATENATED MODULE: ./src/ModalLayer/ModalLayer.tsx
-    function b(e) {
+    function v(e) {
         "@babel/helpers - typeof";
         if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-            b = function e(t) {
+            v = function e(t) {
                 return typeof t;
             };
         } else {
-            b = function e(t) {
+            v = function e(t) {
                 return t && typeof Symbol === "function" && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
             };
         }
-        return b(e);
+        return v(e);
     }
-    function v(e, t) {
-        var r = Object.keys(e);
+    function b(e, t) {
+        var n = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
-            var n = Object.getOwnPropertySymbols(e);
-            if (t) n = n.filter((function(t) {
+            var r = Object.getOwnPropertySymbols(e);
+            if (t) r = r.filter((function(t) {
                 return Object.getOwnPropertyDescriptor(e, t).enumerable;
             }));
-            r.push.apply(r, n);
+            n.push.apply(n, r);
         }
-        return r;
+        return n;
     }
     function m(e) {
         for (var t = 1; t < arguments.length; t++) {
-            var r = arguments[t] != null ? arguments[t] : {};
+            var n = arguments[t] != null ? arguments[t] : {};
             if (t % 2) {
-                v(Object(r), true).forEach((function(t) {
-                    _(e, t, r[t]);
+                b(Object(n), true).forEach((function(t) {
+                    R(e, t, n[t]);
                 }));
             } else if (Object.getOwnPropertyDescriptors) {
-                Object.defineProperties(e, Object.getOwnPropertyDescriptors(r));
+                Object.defineProperties(e, Object.getOwnPropertyDescriptors(n));
             } else {
-                v(Object(r)).forEach((function(t) {
-                    Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t));
+                b(Object(n)).forEach((function(t) {
+                    Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(n, t));
                 }));
             }
         }
@@ -135,17 +135,17 @@
         }
     }
     function h(e, t) {
-        for (var r = 0; r < t.length; r++) {
-            var n = t[r];
-            n.enumerable = n.enumerable || false;
-            n.configurable = true;
-            if ("value" in n) n.writable = true;
-            Object.defineProperty(e, n.key, n);
+        for (var n = 0; n < t.length; n++) {
+            var r = t[n];
+            r.enumerable = r.enumerable || false;
+            r.configurable = true;
+            if ("value" in r) r.writable = true;
+            Object.defineProperty(e, r.key, r);
         }
     }
-    function g(e, t, r) {
+    function g(e, t, n) {
         if (t) h(e.prototype, t);
-        if (r) h(e, r);
+        if (n) h(e, n);
         return e;
     }
     function w(e, t) {
@@ -162,27 +162,27 @@
         if (t) j(e, t);
     }
     function j(e, t) {
-        j = Object.setPrototypeOf || function e(t, r) {
-            t.__proto__ = r;
+        j = Object.setPrototypeOf || function e(t, n) {
+            t.__proto__ = n;
             return t;
         };
         return j(e, t);
     }
     function S(e) {
         var t = A();
-        return function r() {
-            var n = C(e), o;
+        return function n() {
+            var r = _(e), o;
             if (t) {
-                var i = C(this).constructor;
-                o = Reflect.construct(n, arguments, i);
+                var i = _(this).constructor;
+                o = Reflect.construct(r, arguments, i);
             } else {
-                o = n.apply(this, arguments);
+                o = r.apply(this, arguments);
             }
             return P(this, o);
         };
     }
     function P(e, t) {
-        if (t && (b(t) === "object" || typeof t === "function")) {
+        if (t && (v(t) === "object" || typeof t === "function")) {
             return t;
         }
         return k(e);
@@ -204,82 +204,82 @@
             return false;
         }
     }
-    function C(e) {
-        C = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
+    function _(e) {
+        _ = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
             return t.__proto__ || Object.getPrototypeOf(t);
         };
-        return C(e);
+        return _(e);
     }
-    function _(e, t, r) {
+    function R(e, t, n) {
         if (t in e) {
             Object.defineProperty(e, t, {
-                value: r,
+                value: n,
                 enumerable: true,
                 configurable: true,
                 writable: true
             });
         } else {
-            e[t] = r;
+            e[t] = n;
         }
         return e;
     }
-    var R = {
+    var q = {
         childrenInAnimation: i().bool,
         getDefaultMotionStyle: i().func,
         getMotionStyle: i().func,
         onRequestClose: i().func,
         open: i().bool,
         renderModal: i().func.isRequired,
-        useLayerForClickAway: i().bool
+        scrim: i().oneOf([ "visible", "hidden", "interactive" ])
     };
-    var q = {
+    var M = {
         childrenInAnimation: false,
         open: false,
-        useLayerForClickAway: true
+        scrim: "interactive"
     };
-    var M =  function(e) {
-        w(r, e);
-        var t = S(r);
-        function r(e) {
+    var C =  function(e) {
+        w(n, e);
+        var t = S(n);
+        function n(e) {
             var o;
-            O(this, r);
+            O(this, n);
             o = t.call(this, e);
-            _(k(o), "allowAnimationUpdates", true);
-            _(k(o), "handleClickAway", (function(e) {
-                var t, r;
-                (t = (r = o.props).onRequestClose) === null || t === void 0 ? void 0 : t.call(r, {
+            R(k(o), "allowAnimationUpdates", true);
+            R(k(o), "handleClickAway", (function(e) {
+                var t, n;
+                (t = (n = o.props).onRequestClose) === null || t === void 0 ? void 0 : t.call(n, {
                     reason: "clickAway",
                     event: e
                 });
             }));
-            _(k(o), "handleAnimationEnd", (function() {
+            R(k(o), "handleAnimationEnd", (function() {
                 if (o.allowAnimationUpdates) {
                     o.setState({
                         animating: false
                     });
                 }
             }));
-            _(k(o), "renderLayer", (function() {
-                var e = o.props, t = e.getDefaultMotionStyle, r = e.getMotionStyle, i = e.renderModal, l = e.useLayerForClickAway;
-                var u = o.props.open || o.state.animating;
+            R(k(o), "renderLayer", (function() {
+                var e = o.props, t = e.getDefaultMotionStyle, n = e.getMotionStyle, i = e.renderModal, c = e.scrim;
+                var l = o.props.open || o.state.animating;
                 
-                return n().createElement(a.Spring, {
+                return r().createElement(a.Spring, {
                     from: m(m({}, t === null || t === void 0 ? void 0 : t()), {}, {
                         overlayOpacity: 0,
                         opacity: 0
                     }),
-                    to: m(m({}, r === null || r === void 0 ? void 0 : r()), {}, {
+                    to: m(m({}, n === null || n === void 0 ? void 0 : n()), {}, {
                         overlayOpacity: o.props.open ? 1 : 0,
                         opacity: o.props.open ? 1 : 0
                     }),
                     onRest: o.handleAnimationEnd
                 }, (function(e) {
                     
-                    return n().createElement("div", null, 
+                    return r().createElement("div", null, 
                     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                    i(e), u && l &&  n().createElement(d, {
+                    i(e), l && (c === "visible" || "interactive") &&  r().createElement(d, {
                         "data-test": "modal-overlay",
-                        onMouseDown: o.handleClickAway,
+                        onMouseDown: c === "interactive" ? o.handleClickAway : undefined,
                         key: "clickAway",
                         style: {
                             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -294,7 +294,7 @@
             };
             return o;
         }
-        g(r, [ {
+        g(n, [ {
             key: "componentWillUnmount",
             value: function e() {
                 this.allowAnimationUpdates = false;
@@ -305,18 +305,18 @@
             value: function e() {
                 var t = this.props.open || this.state.animating || this.props.childrenInAnimation;
                 
-                return n().createElement(u(), {
+                return r().createElement(l(), {
                     open: t,
                     closeReasons: [ "escapeKey" ],
                     onRequestClose: this.props.onRequestClose
                 }, t && this.renderLayer());
             }
         } ]);
-        return r;
-    }(r.Component);
-    _(M, "propTypes", R);
-    _(M, "defaultProps", q);
-    _(M, "getDerivedStateFromProps", (function(e, t) {
+        return n;
+    }(n.Component);
+    R(C, "propTypes", q);
+    R(C, "defaultProps", M);
+    R(C, "getDerivedStateFromProps", (function(e, t) {
         if (e.open !== t.prevOpen) {
             return {
                 animating: true,
@@ -325,7 +325,7 @@
         }
         return null;
     }));
-    /* harmony default export */    const E = M;
+    /* harmony default export */    const E = C;
     // CONCATENATED MODULE: ./src/ModalLayer/index.ts
     module.exports = t;
     /******/})();