@splunk/react-ui 4.28.2 → 4.30.0

package/Date.js

@@ -62,7 +62,7 @@
     // EXPORTS
         e.d(t, {
         DateWithoutTheme: () => /* reexport */ Y,
-        default: () => /* reexport */ Z
+        default: () => /* reexport */ N
     });
     // CONCATENATED MODULE: external "react"
     const n = require("react");
@@ -562,7 +562,7 @@
                     value: this.getTextInputValue(),
                     startAdornment: p,
                     $disabled: n
-                }, d, s()(this.props, "className", "defaultValue", "elementRef", "inputOnly", "multiline", "locale", "onChange", "onClick", "onFocus", "onKeyDown", "onSelect", "spellCheck", "value")), f);
+                }, d, s()(this.props, "defaultValue", "elementRef", "inputOnly", "multiline", "locale", "onChange", "onClick", "onFocus", "onKeyDown", "onSelect", "spellCheck", "value")), f);
             }
         } ]);
         return n;
@@ -577,10 +577,10 @@
         }
     }));
     var $ = (0, b.withSplunkTheme)(Y);
-    var N = $;
-    N.propTypes = Y.propTypes;
-    N.momentFormat = Y.momentFormat;
-    /* harmony default export */    const Z = N;
+    var Z = $;
+    Z.propTypes = Y.propTypes;
+    Z.momentFormat = Y.momentFormat;
+    /* harmony default export */    const N = Z;
     // CONCATENATED MODULE: ./src/Date/index.ts
     module.exports = t;
     /******/})();

package/DualListbox.js

@@ -414,7 +414,7 @@
         enterprise: (0, _.css)([ "&:hover{background:", ";}" ], N.variables.backgroundColorHover)
     }));
     var X = D()(U()).withConfig({
-        displayName: "OptionStyles__StyledSwtich",
+        displayName: "OptionStyles__StyledSwitch",
         componentId: "q275d9-1"
     })([ "padding-left:", ";" ], N.variables.spacingSmall);
     var G = D().div.withConfig({

package/Link.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,16 +64,16 @@
         default: () => /* reexport */ J
     });
     // 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/ScreenReaderContent"
     const a = require("@splunk/react-ui/ScreenReaderContent");
-    var u =  e.n(a);
+    var l =  e.n(a);
     // CONCATENATED MODULE: external "@splunk/react-ui/Dropdown"
-    const l = require("@splunk/react-ui/Dropdown");
+    const u = require("@splunk/react-ui/Dropdown");
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
     const c = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "styled-components"
@@ -99,9 +99,9 @@
     })([ "", " margin:0 0 0 4px;" ], h);
     function w() {
         var e = (0, v.useSplunkTheme)(), t = e.isEnterprise;
-        return t ?  n().createElement(m, {
+        return t ?  r().createElement(m, {
             screenReaderText: null
-        }) :  n().createElement(g, null);
+        }) :  r().createElement(g, null);
     }
     /* harmony default export */    const O = w;
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
@@ -139,10 +139,10 @@
     function _() {
         _ = Object.assign || function(e) {
             for (var t = 1; t < arguments.length; t++) {
-                var r = arguments[t];
-                for (var n in r) {
-                    if (Object.prototype.hasOwnProperty.call(r, n)) {
-                        e[n] = r[n];
+                var n = arguments[t];
+                for (var r in n) {
+                    if (Object.prototype.hasOwnProperty.call(n, r)) {
+                        e[r] = n[r];
                     }
                 }
             }
@@ -152,30 +152,30 @@
     }
     function P(e, t) {
         if (e == null) return {};
-        var r = C(e, t);
-        var n, o;
+        var n = C(e, t);
+        var r, o;
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (o = 0; o < i.length; o++) {
-                n = i[o];
-                if (t.indexOf(n) >= 0) continue;
-                if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
-                r[n] = e[n];
+                r = i[o];
+                if (t.indexOf(r) >= 0) continue;
+                if (!Object.prototype.propertyIsEnumerable.call(e, r)) continue;
+                n[r] = e[r];
             }
         }
-        return r;
+        return n;
     }
     function C(e, t) {
         if (e == null) return {};
-        var r = {};
-        var n = Object.keys(e);
+        var n = {};
+        var r = Object.keys(e);
         var o, i;
-        for (i = 0; i < n.length; i++) {
-            o = n[i];
+        for (i = 0; i < r.length; i++) {
+            o = r[i];
             if (t.indexOf(o) >= 0) continue;
-            r[o] = e[o];
+            n[o] = e[o];
         }
-        return r;
+        return n;
     }
     function E(e, t) {
         if (!(e instanceof t)) {
@@ -183,17 +183,17 @@
         }
     }
     function q(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 R(e, t, r) {
+    function R(e, t, n) {
         if (t) q(e.prototype, t);
-        if (r) q(e, r);
+        if (n) q(e, n);
         return e;
     }
     function T(e, t) {
@@ -210,21 +210,21 @@
         if (t) I(e, t);
     }
     function I(e, t) {
-        I = Object.setPrototypeOf || function e(t, r) {
-            t.__proto__ = r;
+        I = Object.setPrototypeOf || function e(t, n) {
+            t.__proto__ = n;
             return t;
         };
         return I(e, t);
     }
     function N(e) {
         var t = z();
-        return function r() {
-            var n = A(e), o;
+        return function n() {
+            var r = A(e), o;
             if (t) {
                 var i = A(this).constructor;
-                o = Reflect.construct(n, arguments, i);
+                o = Reflect.construct(r, arguments, i);
             } else {
-                o = n.apply(this, arguments);
+                o = r.apply(this, arguments);
             }
             return M(this, o);
         };
@@ -258,24 +258,26 @@
         };
         return A(e);
     }
-    function F(e, t, r) {
+    function L(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 L = {
+    var F = {
         disabled: false,
         openInNewContext: false
     };
     var B = {
+        /** @private */
+        allowDisabledLink: i().bool,
         children: i().node,
         disabled: i().bool,
         elementRef: i().oneOfType([ i().func, i().object ]),
@@ -287,22 +289,22 @@
  * `Link` is a simple method for configuring `Button` for inline links. For more complex behaviors,
  * see the `Button` documentation.
  */    var H =  function(e) {
-        T(r, e);
-        var t = N(r);
-        function r() {
+        T(n, e);
+        var t = N(n);
+        function n() {
             var e;
-            E(this, r);
-            for (var n = arguments.length, o = new Array(n), i = 0; i < n; i++) {
+            E(this, n);
+            for (var r = arguments.length, o = new Array(r), i = 0; i < r; i++) {
                 o[i] = arguments[i];
             }
             e = t.call.apply(t, [ this ].concat(o));
-            F(D(e), "component", null);
-            F(D(e), "handleMount", (function(t) {
+            L(D(e), "component", null);
+            L(D(e), "handleMount", (function(t) {
                 e.component = t;
             }));
             return e;
         }
-        R(r, [ {
+        R(n, [ {
             key: "focus",
             /**
      * Place focus on the link.
@@ -314,26 +316,26 @@
         }, {
             key: "render",
             value: function e() {
-                var t = this.props, r = t.children, o = t.openInNewContext, i = P(t, [ "children", "openInNewContext" ]);
+                var t = this.props, n = t.children, o = t.openInNewContext, i = P(t, [ "children", "openInNewContext" ]);
                 var a = false;
-                var l;
+                var u;
                 if (o) {
                     a = true;
-                    l = typeof o === "string" ? o : G;
+                    u = typeof o === "string" ? o : G;
                 }
                 
-                return n().createElement(k, _({
+                return r().createElement(k, _({
                     "data-test": "link",
                     ref: this.handleMount,
                     openInNewContext: a
-                }, i), r, o &&  n().createElement(n().Fragment, null,  n().createElement(O, null),  n().createElement(u(), null, l)));
+                }, i), n, o &&  r().createElement(r().Fragment, null,  r().createElement(O, null),  r().createElement(l(), null, u)));
             }
         } ]);
-        return r;
-    }(r.Component);
-    F(H, "propTypes", B);
-    F(H, "defaultProps", L);
-    F(H, l.legacyRefMode, true);
+        return n;
+    }(n.Component);
+    L(H, "propTypes", B);
+    L(H, "defaultProps", F);
+    L(H, u.legacyRefMode, true);
     /* harmony default export */    const J = H;
     // CONCATENATED MODULE: ./src/Link/index.ts
     module.exports = t;

package/MIGRATION.mdx

@@ -5,6 +5,62 @@ import Table from '@splunk/react-ui/Table';
 
 This document lists migration guidance for new features and breaking changes.
 
+## 4.30.0
+
+### Deprecated `NavigationProvider`'s `prefix` prop
+
+#### Change
+
+`NavigationProvider`'s `prefix` prop has been deprecated and will be removed in the next major version.
+
+#### Context
+
+`NavigationProvider` allows global control over navigation via `Clickable`, `Link`, and any other component that implements the `to` prop.
+
+One of the supported props is `prefix`, which allows links to be prefixed. This is helpful when your application might be nested inside a path; for example, it could be used to set the locale prefix to a URL.
+
+The new `transformUrl` function can be used to replicate the functionality of `prefix` as well as perform other URL transformations. Therefore, `prefix` is being deprecated to avoid supporting multiple ways to modify the URL.
+
+#### Migration steps
+
+Replace `prefix` with the `transformUrl` function:
+
+```jsx
+    const prefix = '/my-prefix'
+
+    <NavigationProvider transformUrl={(url, { isInternal, isRootRelative}) => {
+        return isInternal && isRootRelative ? `${prefix}${url}` : url;
+    }>
+        <Link label="My page" to="/my-page" />
+    </NavigationProvider>
+```
+
+Note: `prefix` only applied to internal, relative URLs, whereas `transformUrl` applies to all URLs.
+However, `transformUrl` provides info about whether a URL is internal or relative that can be used to replicate this behavior.
+
+## 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 +217,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
@@ -384,4 +507,21 @@ Ensure the toggle `ref` is an `HTMLElement`, `Clickable`, `Button`, or `Link`.
 Previously, `Tooltip` closed as soon as a user stopped hovering over the toggle. To allow the `Tooltip` to remain open when hovering/focusing on the toggle or the content area, the `Popover`’s `pointerEvent` prop has been removed. `Tooltip` now has two props: `possibleOpenReasons` and `possibleCloseReasons`, which provide more control over when the `Tooltip` can be opened and closed. 
 
 #### Migration steps
-Replace all usage of `Popover`’s `pointerEvents` prop with `possibleOpenReasons` and `possibleCloseReasons`.
+Replace all usage of `Popover`’s `pointerEvents` prop with `possibleOpenReasons` and `possibleCloseReasons`.
+
+## 4.30.0
+
+### Deprecated `Text`'s `appearance` prop
+
+#### Change
+
+`Text`'s `appearance` prop has been deprecated and will be removed in the next major version.
+
+#### Context
+
+`Text`'s `appearance` prop allowed the values "default" and "search". 
+With the new `Search` component optimized for user interaction, Text's `appearance` prop has become unnecessary. 
+
+#### Migration steps
+
+Replace all usage of `Text`'s `appearance="search"` value with the `Search` component. Remove all usage of `Text`'s `appearance="default"` value. 

package/Markdown.js

@@ -766,7 +766,8 @@
         linkRenderer: i().func,
         listRenderer: i().func,
         paragraphRenderer: i().func,
-        text: i().string.isRequired
+        text: i().string.isRequired,
+        rendererOptions: i().object
     };
     var ze = new c.Parser;
     /**
@@ -774,11 +775,11 @@
  * The component prefers @splunk/react-ui components over plain HTML components. For example
  * links are rendered as the `@splunk/react-ui/Link` component instead of plain `<a>` tag.
  */    function Ge(e) {
-        var r = e.blockquoteRenderer, n = e.codeBlockRenderer, o = e.codeRenderer, i = e.elementRef, a = e.headingRenderer, c = e.imageRenderer, u = e.itemRenderer, s = e.linkRenderer, p = e.listRenderer, d = e.paragraphRenderer, y = e.text, v = Ae(e, [ "blockquoteRenderer", "codeBlockRenderer", "codeRenderer", "elementRef", "headingRenderer", "imageRenderer", "itemRenderer", "linkRenderer", "listRenderer", "paragraphRenderer", "text" ]);
+        var r = e.blockquoteRenderer, n = e.codeBlockRenderer, o = e.codeRenderer, i = e.elementRef, a = e.headingRenderer, c = e.imageRenderer, u = e.itemRenderer, s = e.linkRenderer, p = e.listRenderer, d = e.paragraphRenderer, y = e.text, v = e.rendererOptions, b = Ae(e, [ "blockquoteRenderer", "codeBlockRenderer", "codeRenderer", "elementRef", "headingRenderer", "imageRenderer", "itemRenderer", "linkRenderer", "listRenderer", "paragraphRenderer", "text", "rendererOptions" ]);
         // @docs-props-type MarkdownPropsBase
         // keep this option object inside the constructor, otherwise the renderers
         // below will confuse the doc-gen
-                var b = {
+                var g = {
             escapeHtml: true,
             renderers: {
                 CodeBlock: n || B,
@@ -792,20 +793,20 @@
         };
  // not setting MarkdownBlockquote as the default
                 if (r) {
-            b.renderers.Blockquote = r;
+            g.renderers.Blockquote = r;
         }
  // not setting MarkdownImage as the default
                 if (c) {
-            b.renderers.Image = c;
+            g.renderers.Image = c;
         }
-        var g = new (l())(He({}, b));
-        var O = ze.parse(y);
-        var m = g.render(O);
+        var O = new (l())(He(He({}, g), v));
+        var m = ze.parse(y);
+        var h = O.render(m);
         
         return t().createElement(f(), Be({
             "data-test": "markdown",
             elementRef: i
-        }, v), m);
+        }, b), h);
     }
     Ge.propTypes = Fe;
     /* harmony default export */    const Je = Ge;

package/Menu.js

@@ -331,7 +331,7 @@
         componentId: "sc-4kc053-2"
     })([ "position:absolute;", " color:", ";" ], (0, b.pick)({
         prisma: (0, d.css)([ "right:16px;" ]),
-        enterprise: (0, d.css)([ "top:5px;right:3px;left:8px;" ])
+        enterprise: (0, d.css)([ "right:3px;left:8px;" ])
     }), (0, b.pick)({
         prisma: b.variables.contentColorActive,
         enterprise: b.variables.accentColorL10
@@ -452,7 +452,7 @@
     var ae = v().span.withConfig({
         displayName: "ItemStyles__StyledTitleAndDescriptionWrapper",
         componentId: "sc-4kc053-7"
-    })([ "max-width:100%;width:100%;align-self:center;word-break:break-word;white-space:normal;", "" ], (function(e) {
+    })([ "display:flex;flex-wrap:wrap;flex-direction:column;max-width:100%;width:100%;align-self:center;word-break:break-word;white-space:normal;", "" ], (function(e) {
         var r = e.$truncate;
         return r && (0, d.css)([ "white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" ]);
     }));
@@ -865,7 +865,7 @@
                     openInNewContext: k
                 }, P, l()(x, "onFocus"), {
                     elementRef: this.handleMount
-                }), I === "left" && _, o && s === "checkbox" &&  n().createElement(ne, {
+                }), o && s === "checkbox" &&  n().createElement(ne, {
                     interactive: false,
                     selected: c,
                     selectedLabel: "Selected",
@@ -877,12 +877,12 @@
                     "data-test": "description"
                 }, p),  n().createElement(ie, null, u &&  n().createElement(re, null, u),  n().createElement(ae, {
                     $truncate: h
-                },  n().createElement(oe, {
+                }, I === "left" && _,  n().createElement(oe, {
                     $truncate: h,
                     "data-test": "label"
                 }, this.renderLabel(), k &&  n().createElement(ge, null)), E &&  n().createElement(X, {
                     "data-test": "description"
-                }, p)), I === "right" && _));
+                }, p), I === "right" && _)));
             }
         } ]);
         return t;