@splunk/react-ui 4.35.0 → 4.37.0

package/MIGRATION.mdx

@@ -648,3 +648,20 @@ With the new `Search` component optimized for user interaction, Text's `appearan
 #### Migration steps
 
 Replace all usage of `Text`'s `appearance="search"` value with the `Search` component. Remove all usage of `Text`'s `appearance="default"` value. 
+
+## 4.36.0
+
+### Deprecated `ComboBox`, `ControlGroup`, and `StaticContent`'s `size` prop
+
+#### Change
+
+`ComboBox`, `ControlGroup`, and `StaticContent`'s `size` prop has been deprecated and will be removed in the next major version.
+
+#### Context
+
+The `size` prop currently does not do anything in `ComboBox`, `ControlGroup`, or `StaticContent`, so it will be removed in the next major version.
+
+#### Migration steps
+
+Remove all usage of `ComboBox`, `ControlGroup`, and `StaticContent`'s `size` prop. To change the size of components, use the `SplunkThemeProvider`'s `density` prop. 
+

package/Modal.js

@@ -489,7 +489,7 @@
             id: p,
             "data-test": "subtitle"
         }, a)) : t, i &&  n().createElement(ae, null,  n().createElement(le, null,  n().createElement(ce, {
-            appearance: "pill",
+            appearance: "subtle",
             "aria-label": (0, Y._)("Close"),
             "data-test": "close",
             onClick: i

package/Multiselect.js

@@ -2940,8 +2940,14 @@
             gr(br(a), "popoverId", void 0);
             gr(br(a), "previousActiveIndex", null);
             gr(br(a), "handleClick", (function() {
-                var e;
-                (e = a.input) === null || e === void 0 ? void 0 : e.focus();
+                if (a.state.hasFocus) {
+                    a.open({
+                        resetFilterKeyword: false
+                    });
+                } else {
+                    var e;
+                    (e = a.input) === null || e === void 0 ? void 0 : e.focus();
+                }
             }));
             gr(br(a), "handleRequestRemove", (function(e, t) {
                 var n = t.value;
@@ -2950,6 +2956,19 @@
                 }));
  // allow the event to bubble before removing.
                         }));
+            gr(br(a), "open", (function(e) {
+                var t = e.resetFilterKeyword;
+                a.setState((function(e) {
+                    return {
+                        filterKeyword: t ? "" : e.filterKeyword,
+                        hasFocus: true,
+                        open: true
+                    };
+                }), (function() {
+                    var e, t;
+                    (e = (t = a.props).onOpen) === null || e === void 0 ? void 0 : e.call(t);
+                }));
+            }));
             gr(br(a), "handleInputFocus", (function(e) {
                 if (a.state.filterKeyword !== "") {
                     var t, n;
@@ -2957,14 +2976,9 @@
                         keyword: ""
                     });
                 }
-                a.setState({
-                    filterKeyword: "",
-                    hasFocus: true,
-                    open: true
-                }, (function() {
-                    var e, t;
-                    (e = (t = a.props).onOpen) === null || e === void 0 ? void 0 : e.call(t);
-                }));
+                a.open({
+                    resetFilterKeyword: true
+                });
             }));
             gr(br(a), "handleInputKeyDown", (function(e) {
                 var t, r;
@@ -3055,6 +3069,7 @@
             gr(br(a), "handleMenuOptionClick", (function(e, t) {
                 var n;
                 var r = t.value;
+                e.stopPropagation();
                 a.addValue(e, r);
                 (n = a.input) === null || n === void 0 ? void 0 : n.focus();
             }));
@@ -3208,6 +3223,9 @@
             key: "addValue",
             value: function e(t, n) {
                 var r, o, a;
+                if (!this.state.open) {
+                    return;
+                }
                 var i = ((r = this.getCurrentValues()) !== null && r !== void 0 ? r : []).concat([ n ]);
                 var l = this.props.name;
                 if (!this.isControlled()) {

package/Paginator.js

@@ -229,7 +229,7 @@
             $current: o || false,
             "data-test": "page",
             "data-test-page": i,
-            appearance: "pill",
+            appearance: "subtle",
             disabled: a,
             inline: false,
             onClick: s

package/Progress.js

@@ -2,33 +2,33 @@
     // webpackBootstrap
     /******/ "use strict";
     /******/ // The require scope
-    /******/    var e = {};
+    /******/    var r = {};
     /******/
     /************************************************************************/
     /******/ /* webpack/runtime/compat get default export */
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
-        /******/ e.n = r => {
-            /******/ var t = r && r.__esModule ? 
-            /******/ () => r["default"]
-            /******/ : () => r
+        /******/ r.n = e => {
+            /******/ var a = e && e.__esModule ? 
+            /******/ () => e["default"]
+            /******/ : () => e
             /******/;
-            e.d(t, {
-                a: t
+            r.d(a, {
+                a
             });
-            /******/            return t;
+            /******/            return a;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (r, t) => {
-            /******/ for (var a in t) {
-                /******/ if (e.o(t, a) && !e.o(r, a)) {
-                    /******/ Object.defineProperty(r, a, {
+        /******/ r.d = (e, a) => {
+            /******/ for (var t in a) {
+                /******/ if (r.o(a, t) && !r.o(e, t)) {
+                    /******/ Object.defineProperty(e, t, {
                         enumerable: true,
-                        get: t[a]
+                        get: a[t]
                     });
                     /******/                }
                 /******/            }
@@ -37,89 +37,119 @@
     /******/
     /******/ /* webpack/runtime/hasOwnProperty shorthand */
     /******/    (() => {
-        /******/ e.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
+        /******/ r.o = (r, e) => Object.prototype.hasOwnProperty.call(r, e)
         /******/;
     })();
     /******/
     /******/ /* webpack/runtime/make namespace object */
     /******/    (() => {
         /******/ // define __esModule on exports
-        /******/ e.r = e => {
+        /******/ r.r = r => {
             /******/ if (typeof Symbol !== "undefined" && Symbol.toStringTag) {
-                /******/ Object.defineProperty(e, Symbol.toStringTag, {
+                /******/ Object.defineProperty(r, Symbol.toStringTag, {
                     value: "Module"
                 });
                 /******/            }
-            /******/            Object.defineProperty(e, "__esModule", {
+            /******/            Object.defineProperty(r, "__esModule", {
                 value: true
             });
             /******/        };
         /******/    })();
     /******/
-    /************************************************************************/    var r = {};
+    /************************************************************************/    var e = {};
     // ESM COMPAT FLAG
-        e.r(r);
+        r.r(e);
     // EXPORTS
-        e.d(r, {
-        default: () => /* reexport */ M
+        r.d(e, {
+        default: () => /* reexport */ L
     });
     // CONCATENATED MODULE: external "react"
-    const t = require("react");
-    var a =  e.n(t);
+    const a = require("react");
+    var t =  r.n(a);
     // CONCATENATED MODULE: external "prop-types"
-    const n = require("prop-types");
-    var i =  e.n(n);
+    const i = require("prop-types");
+    var n =  r.n(i);
     // CONCATENATED MODULE: external "lodash/isNumber"
     const o = require("lodash/isNumber");
-    var s =  e.n(o);
+    var s =  r.n(o);
     // CONCATENATED MODULE: external "@splunk/react-ui/AnimationToggle"
     const c = require("@splunk/react-ui/AnimationToggle");
     // CONCATENATED MODULE: external "styled-components"
     const l = require("styled-components");
-    var u =  e.n(l);
+    var u =  r.n(l);
     // CONCATENATED MODULE: external "tinycolor2"
     const p = require("tinycolor2");
-    var f =  e.n(p);
+    var v =  r.n(p);
     // CONCATENATED MODULE: external "@splunk/react-ui/Tooltip"
-    const v = require("@splunk/react-ui/Tooltip");
-    var b =  e.n(v);
+    const b = require("@splunk/react-ui/Tooltip");
+    var f =  r.n(b);
     // CONCATENATED MODULE: external "@splunk/react-ui/Box"
-    const d = require("@splunk/react-ui/Box");
-    var m =  e.n(d);
+    const m = require("@splunk/react-ui/Box");
+    var d =  r.n(m);
     // CONCATENATED MODULE: external "@splunk/themes"
     const g = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Progress/ProgressStyles.ts
-    var y = u()(m()).withConfig({
+    var y = u()(d()).withConfig({
         displayName: "ProgressStyles__StyledBox",
         componentId: "csowex-0"
     })([ "background-color:", ";" ], (0, g.pick)({
         enterprise: g.variables.transparent,
         prisma: g.variables.neutral200
     }));
-    var h = u()(b()).withConfig({
+    var C = u()(f()).withConfig({
         displayName: "ProgressStyles__StyledTooltip",
         componentId: "csowex-1"
-    })([ "background-color:", ";height:", ";position:relative;overflow:hidden;padding-left:", ";", ";" ], (0, 
-    g.pick)({
-        enterprise: g.variables.accentColorD10,
-        prisma: (0, g.pickVariant)("$type", {
-            info: g.variables.interactiveColorPrimary,
-            success: g.variables.accentColorPositive,
-            warning: g.variables.accentColorWarning,
-            error: g.variables.accentColorNegative
-        })
+    })([ "background-color:", ";height:", ";position:relative;overflow:hidden;padding-left:", ";", ";", "" ], (0, 
+    g.pickVariant)("$type", {
+        info: {
+            enterprise: g.variables.accentColorD10,
+            prisma: g.variables.interactiveColorPrimary
+        },
+        success: {
+            enterprise: g.variables.successColorD10,
+            prisma: g.variables.accentColorPositive
+        },
+        warning: {
+            enterprise: g.variables.accentColorD10,
+            // warning not supported in enterprise, fallback to info
+            prisma: g.variables.accentColorWarning
+        },
+        error: {
+            enterprise: g.variables.errorColorD10,
+            prisma: g.variables.accentColorNegative
+        }
     }), (0, g.pick)({
         enterprise: "3px",
         prisma: "4px"
     }), (0, g.pick)({
         enterprise: g.variables.spacingSmall,
         prisma: "10px"
-    }), (function(e) {
-        var r = e.$animated;
-        return r && (0, l.css)([ "transition:width 300ms;" ]);
+    }), (function(r) {
+        var e = r.$animated;
+        return e && (0, l.css)([ "transition:width 300ms;" ]);
+    }), (0, g.pick)({
+        enterprise: (0, l.css)([ "border-right:1px solid ", ";" ], (0, g.pickVariant)("$type", {
+            info: {
+                enterprise: g.variables.accentColorD10,
+                prisma: g.variables.interactiveColorPrimary
+            },
+            success: {
+                enterprise: g.variables.successColorD10,
+                prisma: g.variables.accentColorPositive
+            },
+            warning: {
+                enterprise: g.variables.accentColorD10,
+                // warning not supported in enterprise, fallback to info
+                prisma: g.variables.accentColorWarning
+            },
+            error: {
+                enterprise: g.variables.errorColorD10,
+                prisma: g.variables.accentColorNegative
+            }
+        }))
     }));
-    var k = (0, l.keyframes)([ "from{opacity:0;}to{opacity:1;}" ]);
-    var C = (0, l.keyframes)([ "from{background-position:130%;}to{background-position:-30%;}" ]);
+    var h = (0, l.keyframes)([ "from{opacity:0;}to{opacity:1;}" ]);
+    var k = (0, l.keyframes)([ "from{background-position:130%;}to{background-position:-30%;}" ]);
     var w = u().div.withConfig({
         displayName: "ProgressStyles__StyledPuck",
         componentId: "csowex-2"
@@ -130,174 +160,197 @@
         enterprise: "300px",
         prisma: "100%"
     }), (0, g.pick)({
-        enterprise: (0, l.css)([ "background:linear-gradient( 90deg,", ",", ",40%,", ",80%,", " );" ], g.variables.accentColorD10, g.variables.accentColorL10, g.variables.accentColorL40, g.variables.accentColorL40),
-        prisma: function e(r) {
-            var t = r.$animated;
+        enterprise: function r() {
+            var e = (0, g.pickVariant)("$type", {
+                info: g.variables.accentColorD10,
+                success: g.variables.successColorD10,
+                warning: g.variables.accentColorD10,
+                // warning not supported in enterprise, fallback to info
+                error: g.variables.errorColorD10
+            });
             var a = (0, g.pickVariant)("$type", {
+                info: g.variables.accentColorL10,
+                success: g.variables.successColorL10,
+                warning: g.variables.accentColorL10,
+                // warning not supported in enterprise, fallback to info
+                error: g.variables.errorColorL10
+            });
+            var t = (0, g.pickVariant)("$type", {
+                info: g.variables.accentColorL30,
+                success: g.variables.successColorL30,
+                warning: g.variables.accentColorL30,
+                // warning not supported in enterprise, fallback to info
+                error: g.variables.errorColorL30
+            });
+            return (0, l.css)([ "background:linear-gradient( 90deg,", ",", ",30%,", ",60%,", ",95%,", ",98%,", " );" ], e, a, t, t, a, e);
+        },
+        prisma: function r(e) {
+            var a = e.$animated;
+            var t = (0, g.pickVariant)("$type", {
                 info: g.variables.interactiveColorPrimary,
                 success: g.variables.accentColorPositive,
                 warning: g.variables.accentColorWarning,
                 error: g.variables.accentColorNegative
             });
-            if (t) {
-                var n = (0, g.pickVariant)("$type", {
+            if (a) {
+                var i = (0, g.pickVariant)("$type", {
                     info: g.variables.statusColorInfo,
                     success: g.variables.statusColorNormal,
                     warning: g.variables.statusColorMedium,
                     error: g.variables.statusColorHigh
                 });
-                return (0, l.css)([ "background:radial-gradient( circle at center,", ",", " 30% );" ], n, a);
+                return (0, l.css)([ "background:radial-gradient( circle at center,", ",", " 30% );" ], i, t);
             }
-            return (0, l.css)([ "background:", ";" ], a);
+            return (0, l.css)([ "background:", ";" ], t);
         }
-    }), (function(e) {
-        return e.$animated && (0, g.pick)({
-            enterprise: (0, l.css)([ "animation-duration:1500ms;animation-name:", ";animation-iteration-count:infinite;animation-direction:alternate;" ], k),
-            prisma: function r() {
-                var t = (0, g.pickVariant)("$type", {
+    }), (function(r) {
+        return r.$animated && (0, g.pick)({
+            enterprise: (0, l.css)([ "animation-duration:1500ms;animation-name:", ";animation-iteration-count:infinite;animation-direction:alternate;" ], h),
+            prisma: function e() {
+                var a = (0, g.pickVariant)("$type", {
                     info: g.variables.statusColorInfo,
                     success: g.variables.statusColorNormal,
                     warning: g.variables.statusColorMedium,
                     error: g.variables.statusColorHigh
-                })(e);
-                return (0, l.css)([ "background-size:200% 100%;animation:", " 1500ms infinite cubic-bezier(0.33,0,0.67,1);&::after{content:'';display:block;width:60px;background:linear-gradient( to right,rgba(255,255,255,0),", " 70%,rgba(255,255,255,0.75) );height:100%;position:absolute;right:0;}" ], C, f()(t(e)).setAlpha(.75).toRgbString());
+                })(r);
+                return (0, l.css)([ "background-size:200% 100%;animation:", " 1500ms infinite cubic-bezier(0.33,0,0.67,1);&::after{content:'';display:block;width:60px;background:linear-gradient( to right,rgba(255,255,255,0),", " 70%,rgba(255,255,255,0.75) );height:100%;position:absolute;right:0;}" ], k, v()(a(r)).setAlpha(.75).toRgbString());
             }
         });
     }));
     // CONCATENATED MODULE: ./src/Progress/Progress.tsx
     function S() {
-        S = Object.assign || function(e) {
-            for (var r = 1; r < arguments.length; r++) {
-                var t = arguments[r];
-                for (var a in t) {
-                    if (Object.prototype.hasOwnProperty.call(t, a)) {
-                        e[a] = t[a];
+        S = Object.assign || function(r) {
+            for (var e = 1; e < arguments.length; e++) {
+                var a = arguments[e];
+                for (var t in a) {
+                    if (Object.prototype.hasOwnProperty.call(a, t)) {
+                        r[t] = a[t];
                     }
                 }
             }
-            return e;
+            return r;
         };
         return S.apply(this, arguments);
     }
-    function O(e, r) {
-        return _(e) || $(e, r) || j(e, r) || x();
+    function O(r, e) {
+        return D(r) || j(r, e) || P(r, e) || x();
     }
     function x() {
         throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
-    function j(e, r) {
-        if (!e) return;
-        if (typeof e === "string") return P(e, r);
-        var t = Object.prototype.toString.call(e).slice(8, -1);
-        if (t === "Object" && e.constructor) t = e.constructor.name;
-        if (t === "Map" || t === "Set") return Array.from(e);
-        if (t === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)) return P(e, r);
+    function P(r, e) {
+        if (!r) return;
+        if (typeof r === "string") return $(r, e);
+        var a = Object.prototype.toString.call(r).slice(8, -1);
+        if (a === "Object" && r.constructor) a = r.constructor.name;
+        if (a === "Map" || a === "Set") return Array.from(r);
+        if (a === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)) return $(r, e);
     }
-    function P(e, r) {
-        if (r == null || r > e.length) r = e.length;
-        for (var t = 0, a = new Array(r); t < r; t++) {
-            a[t] = e[t];
+    function $(r, e) {
+        if (e == null || e > r.length) e = r.length;
+        for (var a = 0, t = new Array(e); a < e; a++) {
+            t[a] = r[a];
         }
-        return a;
+        return t;
     }
-    function $(e, r) {
-        if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(e))) return;
-        var t = [];
-        var a = true;
-        var n = false;
-        var i = undefined;
+    function j(r, e) {
+        if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(r))) return;
+        var a = [];
+        var t = true;
+        var i = false;
+        var n = undefined;
         try {
-            for (var o = e[Symbol.iterator](), s; !(a = (s = o.next()).done); a = true) {
-                t.push(s.value);
-                if (r && t.length === r) break;
+            for (var o = r[Symbol.iterator](), s; !(t = (s = o.next()).done); t = true) {
+                a.push(s.value);
+                if (e && a.length === e) break;
             }
-        } catch (e) {
-            n = true;
-            i = e;
+        } catch (r) {
+            i = true;
+            n = r;
         } finally {
             try {
-                if (!a && o["return"] != null) o["return"]();
+                if (!t && o["return"] != null) o["return"]();
             } finally {
-                if (n) throw i;
+                if (i) throw n;
             }
         }
-        return t;
+        return a;
     }
-    function _(e) {
-        if (Array.isArray(e)) return e;
+    function D(r) {
+        if (Array.isArray(r)) return r;
     }
-    function q(e, r) {
-        if (e == null) return {};
-        var t = A(e, r);
-        var a, n;
+    function _(r, e) {
+        if (r == null) return {};
+        var a = q(r, e);
+        var t, i;
         if (Object.getOwnPropertySymbols) {
-            var i = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < i.length; n++) {
-                a = i[n];
-                if (r.indexOf(a) >= 0) continue;
-                if (!Object.prototype.propertyIsEnumerable.call(e, a)) continue;
-                t[a] = e[a];
+            var n = Object.getOwnPropertySymbols(r);
+            for (i = 0; i < n.length; i++) {
+                t = n[i];
+                if (e.indexOf(t) >= 0) continue;
+                if (!Object.prototype.propertyIsEnumerable.call(r, t)) continue;
+                a[t] = r[t];
             }
         }
-        return t;
+        return a;
     }
-    function A(e, r) {
-        if (e == null) return {};
-        var t = {};
-        var a = Object.keys(e);
-        var n, i;
-        for (i = 0; i < a.length; i++) {
-            n = a[i];
-            if (r.indexOf(n) >= 0) continue;
-            t[n] = e[n];
+    function q(r, e) {
+        if (r == null) return {};
+        var a = {};
+        var t = Object.keys(r);
+        var i, n;
+        for (n = 0; n < t.length; n++) {
+            i = t[n];
+            if (e.indexOf(i) >= 0) continue;
+            a[i] = r[i];
         }
-        return t;
+        return a;
     }
-    var I = {
-        elementRef: i().oneOfType([ i().func, i().object ]),
-        percentage: i().number,
-        tooltip: i().node,
-        type: i().oneOf([ "info", "success", "warning", "error" ])
+    var A = {
+        elementRef: n().oneOfType([ n().func, n().object ]),
+        percentage: n().number,
+        tooltip: n().node,
+        type: n().oneOf([ "info", "success", "warning", "error" ])
     };
-    function T(e) {
-        var r = e.percentage, n = e.tooltip, i = e.type, o = i === void 0 ? "info" : i, l = q(e, [ "percentage", "tooltip", "type" ]);
+    function I(r) {
+        var e = r.percentage, i = r.tooltip, n = r.type, o = n === void 0 ? "info" : n, l = _(r, [ "percentage", "tooltip", "type" ]);
         // @docs-props-type ProgressPropsBase
                 if (false) {}
-        var u = (0, t.useState)(false), p = O(u, 2), f = p[0], v = p[1];
-        var b = (0, c.useAnimationToggle)() === "on";
-        var d = (0, t.useCallback)((function() {
-            v(true);
+        var u = (0, a.useState)(false), p = O(u, 2), v = p[0], b = p[1];
+        var f = (0, c.useAnimationToggle)() === "on";
+        var m = (0, a.useCallback)((function() {
+            b(true);
         }), []);
-        var m = (0, t.useCallback)((function() {
-            v(false);
+        var d = (0, a.useCallback)((function() {
+            b(false);
         }), []);
-        var g = n || "".concat(r, "%");
+        var g = i || "".concat(e, "%");
         
-        return a().createElement(y, S({
-            $animated: b,
+        return t().createElement(y, S({
+            $animated: f,
             "data-test": "progress",
-            onMouseEnter: d,
-            onMouseLeave: m
-        }, l), s()(r) &&  a().createElement(h, {
+            onMouseEnter: m,
+            onMouseLeave: d
+        }, l), s()(e) &&  t().createElement(C, {
             inline: false,
-            open: f,
+            open: v,
             content: g,
             style: {
-                width: "".concat(r, "%")
+                width: "".concat(e, "%")
             },
             role: "progressbar",
-            "aria-valuenow": r,
+            "aria-valuenow": e,
             "aria-valuemin": 0,
             "aria-valuemax": 100,
-            $animated: b,
+            $animated: f,
             $type: o
-        },  a().createElement(w, {
-            $animated: b,
+        },  t().createElement(w, {
+            $animated: f,
             $type: o
         })));
     }
-    T.propTypes = I;
-    /* harmony default export */    const M = T;
+    I.propTypes = A;
+    /* harmony default export */    const L = I;
     // CONCATENATED MODULE: ./src/Progress/index.ts
-    module.exports = r;
+    module.exports = e;
     /******/})();