@splunk/react-ui 5.0.0-beta.3 → 5.0.0-beta.5

package/Progress.js

@@ -68,53 +68,67 @@
     var n =  e.n(t);
     // CONCATENATED MODULE: external "prop-types"
     const o = require("prop-types");
-    var a =  e.n(o);
+    var i =  e.n(o);
     // CONCATENATED MODULE: external "lodash/isNumber"
-    const i = require("lodash/isNumber");
-    var s =  e.n(i);
+    const a = require("lodash/isNumber");
+    var s =  e.n(a);
     // CONCATENATED MODULE: external "@splunk/react-ui/AnimationToggle"
     const l = require("@splunk/react-ui/AnimationToggle");
     // CONCATENATED MODULE: external "styled-components"
-    const u = require("styled-components");
-    var c =  e.n(u);
+    const c = require("styled-components");
+    var u =  e.n(c);
     // CONCATENATED MODULE: external "@splunk/react-ui/Tooltip"
     const f = require("@splunk/react-ui/Tooltip");
     var p =  e.n(f);
     // CONCATENATED MODULE: external "@splunk/themes"
     const d = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Progress/ProgressStyles.ts
-    var b = "8px";
-    var v = (0, u.keyframes)([ "from{background-position:130%;}to{background-position:-30%;}" ]);
-    var y = c().div.withConfig({
+    var v = "8px";
+    var b = (0, c.keyframes)([ "from{background-position:130%;}to{background-position:-30%;}" ]);
+    var y = u().div.attrs((function(e) {
+        var r = e.$percent;
+        /**
+   * Prevents styled-components from generating new classes for each percent value (SUI-7625).
+   * Pseudo-elements can't have inline styles, so width can't be set directly.
+   */        return {
+            style: {
+                "--percent": "".concat(r, "%")
+            }
+        };
+    })).withConfig({
         displayName: "ProgressStyles__StyledProgressWrapper",
         componentId: "csowex-0"
-    })([ "height:", ";position:relative;border:1px solid ", ";border-radius:", ";background:", ";&::before{display:block;position:absolute;top:-1px;left:-1px;content:'';border-radius:", ";height:100%;", " ", "}" ], b, d.variables.interactiveColorBorder, d.variables.borderRadius, d.variables.neutral100, d.variables.borderRadius, (function(e) {
+    })([ "", " height:", ";position:relative;border:1px solid ", ";border-radius:", ";background:", ";&::before{display:block;position:absolute;top:-1px;left:-1px;content:'';border-radius:", ";height:100%;", " width:var(--percent);", "}" ], d.mixins.reset("block"), v, d.variables.interactiveColorBorder, d.variables.borderRadius, d.variables.neutral100, d.variables.borderRadius, (function(e) {
         var r = e.$animated, t = e.$type;
         // Animated is only supported for the info type.
         // This is enforced in the component and duplicating here
-                return r && t === "info" ? (0, u.css)([ "background:radial-gradient( circle at center,", ",", " 30% );background-size:200% 100%;animation:", " 2500ms infinite cubic-bezier(0.33,0,0.67,1);" ], d.variables.statusColorInfoWeak, d.variables.statusColorInfo, v) : (0, 
-        u.css)([ "background:", ";" ], (0, d.pickVariant)("$type", {
-            info: d.variables.statusColorInfo,
-            success: d.variables.statusColorNormal,
-            error: d.variables.statusColorHigh
+                return r && t === "info" ? (0, c.css)([ "background:radial-gradient( circle at center,", ",", " 30% );background-size:200% 100%;animation:", " 2500ms infinite cubic-bezier(0.33,0,0.67,1);" ], d.variables.notificationColorInfoWeak, d.variables.notificationColorInfo, b) : (0, 
+        c.css)([ "background:", ";" ], (0, d.pickVariant)("$type", {
+            info: d.variables.notificationColorInfo,
+            success: d.variables.notificationColorPositive,
+            error: d.variables.notificationColorNegative
         }));
     }), (function(e) {
         var r = e.$percent;
-        return (0, u.css)([ "width:", "%;", " ", "" ], r, r > 0 && (0, u.css)([ "border:1px solid ", ";" ], (0, 
+        return (0, c.css)([ "", " ", "" ], r > 0 && (0, c.css)([ "border:1px solid ", ";" ], (0, 
         d.pickVariant)("$type", {
-            info: d.variables.statusColorInfoStrong,
-            success: d.variables.statusColorNormalStrong,
-            error: d.variables.statusColorHighStrong
-        })), r !== 100 && (0, u.css)([ "border-end-end-radius:0;border-start-end-radius:0;border-inline-end:none;" ]));
+            info: d.variables.notificationColorInfoStrong,
+            success: d.variables.notificationColorPositiveStrong,
+            error: d.variables.notificationColorNegativeStrong
+        })), r !== 100 && (0, c.css)([ "border-end-end-radius:0;border-start-end-radius:0;border-inline-end:none;" ]));
     }));
-    var g = c()(p()).withConfig({
+    var g = u()(p()).attrs((function(e) {
+        var r = e.$percent;
+        /* Prevents styled-components from generating new classes for each percent value (SUI-7625). */        return {
+            style: {
+                width: "".concat(r, "%")
+            }
+        };
+    })).withConfig({
         displayName: "ProgressStyles__StyledTooltip",
         componentId: "csowex-1"
-    })([ "width:", ";height:", ";" ], (function(e) {
-        var r = e.$percent;
-        return "".concat(r, "%");
-    }), b);
-    var m = c().progress.withConfig({
+    })([ "height:", ";" ], v);
+    var m = u().progress.withConfig({
         displayName: "ProgressStyles__StyledProgress",
         componentId: "csowex-2"
     })([ "opacity:0;position:absolute;inset:0;" ]);
@@ -131,7 +145,7 @@
         }, h.apply(null, arguments);
     }
     function S(e, r) {
-        return j(e) || C(e, r) || k(e, r) || O();
+        return P(e) || C(e, r) || k(e, r) || O();
     }
     function O() {
         throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
@@ -153,35 +167,35 @@
     function C(e, r) {
         var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != t) {
-            var n, o, a, i, s = [], l = !0, u = !1;
+            var n, o, i, a, s = [], l = !0, c = !1;
             try {
-                if (a = (t = t.call(e)).next, 0 === r) {
+                if (i = (t = t.call(e)).next, 0 === r) {
                     if (Object(t) !== t) return;
                     l = !1;
-                } else for (;!(l = (n = a.call(t)).done) && (s.push(n.value), s.length !== r); l = !0) {
+                } else for (;!(l = (n = i.call(t)).done) && (s.push(n.value), s.length !== r); l = !0) {
                 }
             } catch (e) {
-                u = !0, o = e;
+                c = !0, o = e;
             } finally {
                 try {
-                    if (!l && null != t["return"] && (i = t["return"](), Object(i) !== i)) return;
+                    if (!l && null != t["return"] && (a = t["return"](), Object(a) !== a)) return;
                 } finally {
-                    if (u) throw o;
+                    if (c) throw o;
                 }
             }
             return s;
         }
     }
-    function j(e) {
+    function P(e) {
         if (Array.isArray(e)) return e;
     }
-    function P(e, r) {
+    function j(e, r) {
         if (null == e) return {};
         var t, n, o = x(e, r);
         if (Object.getOwnPropertySymbols) {
-            var a = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < a.length; n++) {
-                t = a[n], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (o[t] = e[t]);
+            var i = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < i.length; n++) {
+                t = i[n], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (o[t] = e[t]);
             }
         }
         return o;
@@ -197,26 +211,26 @@
         }
         return t;
     }
-    var I = {
-        elementRef: a().oneOfType([ a().func, a().object ]),
-        percentage: a().number,
-        tooltip: a().node,
-        type: a().oneOf([ "info", "success", "error" ])
+    var $ = {
+        elementRef: i().oneOfType([ i().func, i().object ]),
+        percentage: i().number,
+        tooltip: i().node,
+        type: i().oneOf([ "info", "success", "error" ])
     };
-    function $(e) {
-        var r = e.elementRef, o = e.percentage, a = e.tooltip, i = e.type, u = i === void 0 ? "info" : i, c = P(e, [ "elementRef", "percentage", "tooltip", "type" ]);
+    function I(e) {
+        var r = e.elementRef, o = e.percentage, i = e.tooltip, a = e.type, c = a === void 0 ? "info" : a, u = j(e, [ "elementRef", "percentage", "tooltip", "type" ]);
         // @docs-props-type ProgressPropsBase
                 if (false) {}
-        var f = (0, t.useState)(false), p = S(f, 2), d = p[0], b = p[1];
-        var v = (0, l.useAnimationToggle)() === "on" && u === "info";
+        var f = (0, t.useState)(false), p = S(f, 2), d = p[0], v = p[1];
+        var b = (0, l.useAnimationToggle)() === "on" && c === "info";
         var O = (0, t.useCallback)((function() {
-            b(true);
+            v(true);
         }), []);
         var k = (0, t.useCallback)((function() {
-            b(false);
+            v(false);
         }), []);
         var w = s()(o) ? o : 0;
-        var C = a || "".concat(w, "%");
+        var C = i || "".concat(w, "%");
         
         return n().createElement(y, h({
             onMouseEnter: O,
@@ -224,9 +238,9 @@
             ref: r,
             "data-test": "progress",
             $percent: w,
-            $type: u,
-            $animated: v
-        }, c),  n().createElement(g, {
+            $type: c,
+            $animated: b
+        }, u),  n().createElement(g, {
             content: C,
             inline: false,
             $percent: w,
@@ -236,8 +250,8 @@
             max: 100
         })));
     }
-    $.propTypes = I;
-    /* harmony default export */    const _ = $;
+    I.propTypes = $;
+    /* harmony default export */    const _ = I;
     // CONCATENATED MODULE: ./src/Progress/index.ts
     module.exports = r;
     /******/})();