@splunk/react-ui 4.28.2 → 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/Multiselect.js

@@ -404,7 +404,7 @@
         if (n) T(e, n);
         return e;
     }
-    function N(e, t) {
+    function B(e, t) {
         if (typeof t !== "function" && t !== null) {
             throw new TypeError("Super expression must either be null or a function");
         }
@@ -415,14 +415,14 @@
                 configurable: true
             }
         });
-        if (t) B(e, t);
+        if (t) N(e, t);
     }
-    function B(e, t) {
-        B = Object.setPrototypeOf || function e(t, n) {
+    function N(e, t) {
+        N = Object.setPrototypeOf || function e(t, n) {
             t.__proto__ = n;
             return t;
         };
-        return B(e, t);
+        return N(e, t);
     }
     function L(e) {
         var t = $();
@@ -519,7 +519,7 @@
  * [PureComponent](https://reactjs.org/docs/react-api.html#reactpurecomponent)
  * so any elements passed to it must also be pure.
  */    var G =  function(e) {
-        N(n, e);
+        B(n, e);
         var t = L(n);
         function n() {
             var e;
@@ -638,7 +638,7 @@
     const Te = require("@splunk/react-icons/Magnifier");
     var qe =  e.n(Te);
     // CONCATENATED MODULE: ./src/Select/icons/Search.tsx
-    var Ne = function e() {
+    var Be = function e() {
         var t = (0, Ae.useSplunkTheme)(), n = t.isEnterprise, o = t.isCompact;
         var a = (0, u._)("Search");
         var i = o ? "20px" : "24px";
@@ -655,7 +655,7 @@
         });
         return l;
     };
-    /* harmony default export */    const Be = Ne;
+    /* harmony default export */    const Ne = Be;
     // CONCATENATED MODULE: external "styled-components"
     const Le = require("styled-components");
     var Fe =  e.n(Le);
@@ -1217,12 +1217,12 @@
             Object.defineProperty(e, r.key, r);
         }
     }
-    function Nt(e, t, n) {
+    function Bt(e, t, n) {
         if (t) qt(e.prototype, t);
         if (n) qt(e, n);
         return e;
     }
-    function Bt(e, t) {
+    function Nt(e, t) {
         if (typeof t !== "function" && t !== null) {
             throw new TypeError("Super expression must either be null or a function");
         }
@@ -1427,9 +1427,9 @@
         return "".concat(Wt(e), "-").concat(e, "-").concat(t);
     }
     var rn =  function(e) {
-        Bt(o, e);
+        Nt(o, e);
         var t = Ft(o);
-        Nt(o, null, [ {
+        Bt(o, null, [ {
             key: "validateAppearance",
             // @docs-props-type CompactPropsBase
             value: function e(t) {
@@ -2056,7 +2056,7 @@
             a.activeItemId = (0, be.createDOMID)("active-item");
             return a;
         }
-        Nt(o, [ {
+        Bt(o, [ {
             key: "componentDidUpdate",
             value: function e(t, n) {
                 if (false) {}
@@ -2186,7 +2186,7 @@
                     inputRef: s,
                     inputId: l,
                     canClear: true,
-                    startAdornment:  r().createElement(ht, null,  r().createElement(Be, null))
+                    startAdornment:  r().createElement(ht, null,  r().createElement(Ne, null))
                 })), c && n && p === "buttongroup" && v);
             }
         }, {
@@ -2537,10 +2537,10 @@
     var Tn =  e.n(Dn);
     // CONCATENATED MODULE: external "@splunk/react-ui/Chip"
     const qn = require("@splunk/react-ui/Chip");
-    var Nn =  e.n(qn);
+    var Bn =  e.n(qn);
     // CONCATENATED MODULE: external "@splunk/react-ui/Popover"
-    const Bn = require("@splunk/react-ui/Popover");
-    var Ln =  e.n(Bn);
+    const Nn = require("@splunk/react-ui/Popover");
+    var Ln =  e.n(Nn);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
     const Fn = require("@splunk/react-ui/ScreenReaderContent");
     var Kn =  e.n(Fn);
@@ -2599,14 +2599,14 @@
         enterprise: Ae.variables.spacingHalf,
         prisma: Ae.variables.spacingSmall
     }));
-    var Un = Fe().div.withConfig({
-        displayName: "NormalStyles__StyledInputWrapper",
+    var Un = Fe().span.withConfig({
+        displayName: "NormalStyles__StyledButtonsWrapper",
         componentId: "sc-1uwwpco-1"
-    })([ "flex:1 0 auto;max-width:100%;" ]);
+    })([ "display:contents;" ]);
     var Gn = Fe().input.withConfig({
         displayName: "NormalStyles__StyledInput",
         componentId: "sc-1uwwpco-2"
-    })([ "", ";min-width:100%;max-width:100%;line-height:12px;", "" ], Ae.mixins.reset("block"), (0, 
+    })([ "", ";flex:1 0 auto;max-width:100%;line-height:12px;", "" ], Ae.mixins.reset("block"), (0, 
     Ae.pick)({
         enterprise: {
             comfortable: (0, Le.css)([ "padding:", ";" ], Ae.variables.spacingQuarter),
@@ -3238,7 +3238,7 @@
                     if (o != null) {
                         var a = o.children, i = o.icon, l = o.label, s = o.selectedAppearance, c = o.selectedBackgroundColor, u = o.selectedForegroundColor, p = o.value;
                         
-                        return r().createElement(Nn(), {
+                        return r().createElement(Bn(), {
                             "aria-selected": true,
                             disabled: n.props.disabled,
                             icon: i,
@@ -3253,7 +3253,7 @@
                         },  r().createElement(r().Fragment, null, a || l));
                     }
                     
-                    return r().createElement(Nn(), {
+                    return r().createElement(Bn(), {
                         "aria-selected": true,
                         disabled: n.props.disabled,
                         key: (0, be.createGUID)(),
@@ -3389,18 +3389,15 @@
                     $popoverOpen: this.state.open,
                     flex: true,
                     elementRef: this.handleMount,
-                    role: "listbox",
+                    role: "group",
                     "aria-disabled": v || undefined,
-                    "aria-labelledby": m,
+                    "aria-labelledby": m
+                }, k),  r().createElement(Un, {
+                    role: "listbox",
                     "aria-invalid": h,
                     "aria-multiselectable": "true"
-                }, k), this.renderButtons(_), !v &&  r().createElement(Un, {
+                }, this.renderButtons(_)), !v &&  r().createElement(Gn, sr({
                     role: "combobox",
-                    "aria-owns": this.state.open ? this.popoverId : undefined,
-                    "aria-haspopup": true,
-                    "aria-expanded": this.state.open,
-                    "aria-controls": this.state.open ? this.popoverId : undefined
-                },  r().createElement(Gn, sr({
                     "data-test": "textbox",
                     id: y,
                     ref: this.handleInputMount,
@@ -3413,12 +3410,16 @@
                     autoComplete: "off",
                     autoCorrect: "off",
                     spellCheck: false,
-                    "aria-autocomplete": "list",
                     style: A,
                     placeholder: I.length ? "" : g,
                     required: O,
-                    "aria-activedescendant": this.state.open && this.availableOptionCount > 0 ? this.activeItemId : undefined
-                }, x))), !v &&  r().createElement(Ln(), {
+                    "aria-activedescendant": this.state.open && this.availableOptionCount > 0 ? this.activeItemId : undefined,
+                    "aria-autocomplete": "list",
+                    "aria-controls": this.state.open ? this.popoverId : undefined,
+                    "aria-owns": this.state.open ? this.popoverId : undefined,
+                    "aria-expanded": this.state.open,
+                    "aria-haspopup": true
+                }, x)),  r().createElement(Ln(), {
                     open: this.state.open && !!this.state.el,
                     autoCloseWhenOffScreen: true,
                     anchor: this.state.el,
@@ -3557,7 +3558,7 @@
         };
         return qr(e);
     }
-    function Nr(e, t, n) {
+    function Br(e, t, n) {
         if (t in e) {
             Object.defineProperty(e, t, {
                 value: n,
@@ -3570,7 +3571,7 @@
         }
         return e;
     }
-    var Br = {
+    var Nr = {
         allowNewValues: a().bool,
         animateLoading: a().bool,
         children: a().node,
@@ -3655,12 +3656,12 @@
         } ]);
         return n;
     }(n.Component);
-    Nr(Kr, "propTypes", Br);
-    Nr(Kr, "defaultProps", Lr);
-    Nr(Kr, "componentType", "Multiselect");
-    Nr(Kr, "Option", J);
-    Nr(Kr, "Heading", p.Heading);
-    Nr(Kr, "Divider", p.Divider);
+    Br(Kr, "propTypes", Nr);
+    Br(Kr, "defaultProps", Lr);
+    Br(Kr, "componentType", "Multiselect");
+    Br(Kr, "Option", J);
+    Br(Kr, "Heading", p.Heading);
+    Br(Kr, "Divider", p.Divider);
     /* harmony default export */    const $r = Kr;
     // CONCATENATED MODULE: ./src/Multiselect/index.ts
     module.exports = t;