@splunk/react-ui 4.36.0 → 4.38.0

package/Multiselect.js

@@ -311,13 +311,12 @@
                 var t = this.props, n = t.value, o = t.children, a = t.label, i = t.multiple, l = v(t, [ "value", "children", "label", "multiple" ]);
                 
                 return r().createElement(p.Item, d({
-                    "aria-selected": this.props.selected,
                     "data-test-value": n,
                     "data-test": "option",
                     ref: this.handleMount
                 }, l, {
                     selectable: true,
-                    selectableAppearance: i ? "checkbox" : undefined,
+                    selectableAppearance: i ? "checkbox" : "checkmark",
                     onClick: this.handleClick,
                     role: "option",
                     value: n.toString()
@@ -1450,7 +1449,6 @@
             Jt($t(a), "dropdown", null);
             Jt($t(a), "firstSelectedEnabledOption", null);
             Jt($t(a), "firstSelectedOptionIndex", void 0);
-            Jt($t(a), "menuId", void 0);
             Jt($t(a), "menuListboxId", void 0);
             Jt($t(a), "previousActiveIndex", null);
             Jt($t(a), "selectedOptionCount", void 0);
@@ -1744,35 +1742,26 @@
                 k = E;
  // only apply prefix / suffix if the label is not empty
                                 if (k.length > 0) {
+                    // If there's more than one item selected, read out the selected total
+                    // rather than reading out each selected item
+                    I = a.wrapLabel({
+                        prefixLabel: O,
+                        label: k.length > 1 ? [ "".concat(_.length, " items selected") ] : I,
+                        suffixLabel: S
+                    });
                     k = a.wrapLabel({
                         prefixLabel: O,
                         label: k,
                         suffixLabel: S
                     });
                 }
- // single <Select> behaviour is to show the placeholder if all parts of the the label
+ // single <Select> behaviour is to show the placeholder if all parts of the label
                 // are empty strings so we replicate this behaviour here
                                 if (k.length === 0 || !m && k.every((function(e) {
                     return e === "";
                 }))) {
                     k = Qt(g);
- // placeholder has a default value so will not be undefined
-                                        I = Qt(g);
-                }
- // If there's more than one item selected, read out the selected total
-                // rather than reading out each selected item
-                                if (k.length > 1) {
-                    I = a.wrapLabel({
-                        prefixLabel: O,
-                        label: [ "".concat(_.length, " items selected") ],
-                        suffixLabel: S
-                    });
-                } else {
-                    I = a.wrapLabel({
-                        prefixLabel: O,
-                        label: I,
-                        suffixLabel: S
-                    });
+                    I = k;
                 }
                 var M = Gt({
                     "aria-describedby": p,
@@ -1781,6 +1770,7 @@
                     "aria-required": w,
                     "data-select-appearance": l,
                     "data-test": m ? "multiselect" : "select",
+                    role: "combobox",
                     disabled: f,
                     elementRef: d,
                     error: v
@@ -1810,8 +1800,6 @@
                     icon: x,
                     inline: h,
                     isMenu: true,
-                    "aria-haspopup": "listbox",
-                    "aria-owns": a.menuId,
                     onClick: a.props.onClick
                 }, pe()(a.props, o.invalidLinkAppearanceProps)), !!_.length && m &&  r().createElement(bt, {
                     "data-role": "count"
@@ -2066,7 +2054,6 @@
             if (false) {}
             if (false) {}
             o.validateAppearance(e);
-            a.menuId = (0, be.createDOMID)("menu");
             a.menuListboxId = (0, be.createDOMID)("menu-listbox");
             a.activeItemId = (0, be.createDOMID)("active-item");
             return a;
@@ -2197,7 +2184,9 @@
                     role: "combobox",
                     "aria-expanded": "true",
                     "aria-controls": this.menuListboxId,
+                    "aria-owns": n ? this.activeItemId : undefined,
                     "aria-label": (0, u._)("Filter"),
+                    "aria-autocomplete": "list",
                     "aria-activedescendant": this.state.textHasFocus && n ? this.activeItemId : undefined,
                     inputRef: s,
                     inputId: l,
@@ -2234,10 +2223,11 @@
                         "aria-multiselectable": c || undefined,
                         childrenStart: o.renderControls({
                             placement: i,
-                            hasChildren: !!b.length
+                            hasChildren: b.some((function(e) {
+                                return tn(e);
+                            }))
                         }),
                         focusMode: o.hasFilter() ? "never" : undefined,
-                        id: o.menuId,
                         isLoading: o.props.isLoadingOptions,
                         menuId: o.menuListboxId,
                         onScrollBottom: o.props.onScrollBottom ? o.handleScrollBottom : undefined,
@@ -2269,7 +2259,7 @@
                     canCoverAnchor: xt().innerHeight < 500,
                     ref: this.handleDropdownMount,
                     retainFocus: false,
-                    takeFocus: d.length === 0 || d.length > 0 && !h || !!f
+                    takeFocus: d.length === 0 || d.length > 0 && !h || f
                 }, m);
             }
         } ]);

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;
     /******/})();