@splunk/react-ui 4.29.0 → 4.30.0

package/CollapsiblePanel.js

@@ -721,10 +721,15 @@
                 if (false) {}
                 if (false) {}
             }
-        }, {
+            /**
+     * SingleOpenPanelGroup already takes into account if it is controlled or not in determining openPanelId
+     * so this.context.openPanelId is used for both the controlled and uncontrolled case.
+     */        }, {
             key: "isOpen",
             value: function e() {
-                return this.isControlled() ? this.props.open : this.state.open;
+                var e = this.isControlled() ? this.props.open : this.state.open;
+                var t = this.context.openPanelId !== undefined ? this.context.openPanelId === this.props.panelId : e;
+                return t;
             }
  // Using all three handlers: `handleRequestClose` and `handleRequestOpen` and `handleChange` to test interoperability and maintain backwards compatibility until the open/close handlers are removed in SUI-5
                 }, {
@@ -737,12 +742,7 @@
             value: function e() {
                 var t = this.props, o = t.innerBodyStyles, a = t.children, i = t.description, s = t.disabled, p = t.elementRef, u = t.headingLevel, f = t.overflow, b = t.renderChildrenWhenCollapsed, v = t.title, m = t.titleWithActions, y = t.inset;
                 var h = this.state.animating;
-                var g = this.context.openPanelId !== undefined ? 
-                /**
-       * SingleOpenPanelGroup already takes into account if it is controlled or not in determining openPanelId
-       * so this.context.openPanelId is used for both the controlled and uncontrolled case.
-       */
-                this.context.openPanelId === this.props.panelId : this.isOpen();
+                var g = this.isOpen();
                 var k = {
                     disabled: s,
                     onClick: this.handleChange,

package/ComboBox.js

@@ -527,6 +527,7 @@
         menuStyle: i().object,
         name: i().string,
         noOptionsMessage: i().node,
+        onBlur: i().func,
         onChange: i().func,
         onClose: i().func,
         onFocus: i().func,
@@ -534,6 +535,7 @@
         onOpen: i().func,
         onScroll: i().func,
         onScrollBottom: i().func,
+        onSelect: i().func,
         placeholder: i().string,
         prepend: i().bool,
         size: i().oneOf([ "small", "medium", "large" ]),
@@ -714,43 +716,42 @@
                     (t = (n = i.props).onScrollBottom) === null || t === void 0 ? void 0 : t.call(n, e);
                 }
             }));
-            ce(ae(i), "renderMenu", (function(e) {
-                var t = e.anchorWidth, r = e.maxHeight;
-                var a = i.props, l = a.children, u = a.controlledFilter, s = a.isLoadingOptions, f = a.menuStyle, p = a.onScrollBottom, d = a.virtualization;
-                var v = i.state, y = v.activeIndex, g = v.typedValue;
-                var S = i.getValue();
-                var C = n.Children.toArray(l).filter(n.isValidElement);
-                var w = b()(C, (function(e) {
+            ce(ae(i), "prepareOptions", (function() {
+                var e = i.props, t = e.children, r = e.controlledFilter;
+                var a = i.state, l = a.activeIndex, u = a.typedValue;
+                var s = i.getValue();
+                var f = n.Children.toArray(t).filter(n.isValidElement);
+                var p = b()(f, (function(e) {
                     if (e.type === I.Heading) {
                         return false;
                     }
                     if (e.props.label === undefined) {
-                        return e.props.value === S;
+                        return e.props.value === s;
                     }
-                    if (e.props.label !== undefined && g !== undefined) {
-                        return e.props.label === S;
+                    if (e.props.label !== undefined && u !== undefined) {
+                        return e.props.label === s;
                     }
-                    return e.props.value === S;
+                    return e.props.value === s;
                 }));
-                if (!w && S) {
-                    C.unshift( o().createElement(X, {
+                if (!p && s) {
+                    f.unshift( o().createElement(X, {
                         description: (0, O._)("(New value)"),
                         descriptionPosition: "right",
                         key: "currentValueOption",
-                        value: S,
-                        "data-test-current-value-option": S
+                        value: s,
+                        "data-test-current-value-option": s
                     }));
                 }
  // Highlight Active
                                 i.availableOptionCount = 0;
                 i.activeValue = undefined;
-                var j = (0, m.stringToKeywords)(g ? S : i.getDisplayValue());
-                i.options = (u ? C : C.filter((function(e) {
+                var d = (0, m.stringToKeywords)(u ? s : i.getDisplayValue());
+                i.options = (r ? f : f.filter((function(e) {
                     if (e.props.label !== undefined) {
-                        return (0, m.testPhrase)(e.props.label, j);
+                        return (0, m.testPhrase)(e.props.label, d);
                     }
                     if (e.props.value !== undefined) {
-                        return (0, m.testPhrase)(e.props.value, j);
+                        return (0, m.testPhrase)(e.props.value, d);
                     }
                     return true;
  // Keep all headers and non-interactive options
@@ -759,11 +760,11 @@
                         // ignore Headings and Dividers
                         return e;
                     }
-                    var o = i.availableOptionCount === y;
+                    var o = i.availableOptionCount === l;
                     i.availableOptionCount += 1;
-                    var r = e.props.label !== undefined ? e.props.label : e.props.value;
-                    var a = e.props.matchRanges;
-                    var l = !u && S && (w || t > 0) ? (0, m.keywordLocations)(r, j) || undefined : undefined;
+                    var a = e.props.label !== undefined ? e.props.label : e.props.value;
+                    var u = e.props.matchRanges;
+                    var f = !r && s && (p || t > 0) ? (0, m.keywordLocations)(a, d) || undefined : undefined;
                     if (o) {
                         if (!e.props.disabled) {
                             i.activeValue = e.props.value;
@@ -773,35 +774,39 @@
                             ref: i.handleActiveOptionMount,
                             id: i.activeItemId,
                             onClick: i.handleSelectOption,
-                            matchRanges: a || l,
+                            matchRanges: u || f,
                             active: true
                         });
                     }
                     
                     return (0, n.cloneElement)(e, {
                         onClick: i.handleSelectOption,
-                        matchRanges: a || l
+                        matchRanges: u || f
                     });
                 }));
-                var x = de({
+            }));
+            ce(ae(i), "renderMenu", (function(e) {
+                var t = e.anchorWidth, n = e.maxHeight;
+                var r = i.props, a = r.isLoadingOptions, l = r.menuStyle, u = r.onScrollBottom, c = r.virtualization;
+                var s = de({
                     anchorWidth: t,
-                    maxHeight: r,
-                    menuStyle: f
+                    maxHeight: n,
+                    menuStyle: l
                 });
-                var R = Z({
-                    style: x,
+                var f = Z({
+                    style: s,
                     controlledExternally: true,
-                    onScrollBottom: p ? i.handleScrollBottom : undefined,
-                    isLoading: s
+                    onScrollBottom: u ? i.handleScrollBottom : undefined,
+                    isLoading: a
                 }, h()(i.props, "className", "noOptionsMessage", "footerMessage", "animateLoading", "loadingMessage", "onScroll"));
-                if (d) {
+                if (c) {
                     
                     return o().createElement(k.VirtualizedResultsMenu, J({
-                        virtualization: d
-                    }, R), i.options);
+                        virtualization: c
+                    }, f), i.options);
                 }
                 
-                return o().createElement(P(), R, i.options);
+                return o().createElement(P(), f, i.options);
             }));
             i.state = {
                 activeIndex: 0,
@@ -886,6 +891,7 @@
                 var n = this.state, r = n.anchor, i = n.open;
                 var a = this.getValue();
                 var l = this.getDisplayValue();
+                this.prepareOptions();
                 
                 return o().createElement(x(), J({
                     autoCapitalize: "off",
@@ -907,9 +913,8 @@
                     elementRef: this.handleAnchorMount,
                     role: "combobox",
                     value: l,
-                    "aria-activedescendant": this.state.open ? this.activeItemId : undefined,
+                    "aria-activedescendant": this.state.open && Array.isArray(this.options) && this.options.length > 0 ? this.activeItemId : undefined,
                     "aria-expanded": i,
-                    "aria-haspopup": true,
                     "aria-label": (0, O._)("Value input"),
                     "aria-controls": i ? this.popoverId : undefined
                 }),  o().createElement(w(), {

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,39 @@ 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
@@ -474,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;