@splunk/react-ui 4.38.0 → 4.39.0

package/StepBar.js

@@ -8,27 +8,27 @@
     /******/ /* webpack/runtime/compat get default export */
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
-        /******/ e.n = t => {
-            /******/ var r = t && t.__esModule ? 
-            /******/ () => t["default"]
-            /******/ : () => t
+        /******/ e.n = r => {
+            /******/ var t = r && r.__esModule ? 
+            /******/ () => r["default"]
+            /******/ : () => r
             /******/;
-            e.d(r, {
-                a: r
+            e.d(t, {
+                a: t
             });
-            /******/            return r;
+            /******/            return t;
             /******/        };
         /******/    })();
     /******/
     /******/ /* 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 = (r, t) => {
+            /******/ for (var n in t) {
+                /******/ if (e.o(t, n) && !e.o(r, n)) {
+                    /******/ Object.defineProperty(r, n, {
                         enumerable: true,
-                        get: r[n]
+                        get: t[n]
                     });
                     /******/                }
                 /******/            }
@@ -37,7 +37,7 @@
     /******/
     /******/ /* webpack/runtime/hasOwnProperty shorthand */
     /******/    (() => {
-        /******/ e.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t)
+        /******/ e.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
         /******/;
     })();
     /******/
@@ -56,22 +56,22 @@
             /******/        };
         /******/    })();
     /******/
-    /************************************************************************/    var t = {};
+    /************************************************************************/    var r = {};
     // ESM COMPAT FLAG
-        e.r(t);
+        e.r(r);
     // EXPORTS
-        e.d(t, {
-        Step: () => /* reexport */ q,
-        default: () => /* reexport */ V
+        e.d(r, {
+        Step: () => /* reexport */ M,
+        default: () => /* reexport */ L
     });
     // CONCATENATED MODULE: external "react"
-    const r = require("react");
-    var n =  e.n(r);
+    const t = require("react");
+    var n =  e.n(t);
     // CONCATENATED MODULE: external "prop-types"
     const i = require("prop-types");
-    var o =  e.n(i);
+    var a =  e.n(i);
     // CONCATENATED MODULE: external "@splunk/ui-utils/id"
-    const a = require("@splunk/ui-utils/id");
+    const o = require("@splunk/ui-utils/id");
     // CONCATENATED MODULE: external "@splunk/themes/useSplunkTheme"
     const l = require("@splunk/themes/useSplunkTheme");
     var s =  e.n(l);
@@ -80,313 +80,314 @@
     var p =  e.n(c);
     // CONCATENATED MODULE: external "@splunk/react-icons/CheckCircle"
     const d = require("@splunk/react-icons/CheckCircle");
-    var v =  e.n(d);
+    var u =  e.n(d);
     // CONCATENATED MODULE: external "@splunk/react-icons/ExclamationCircle"
-    const u = require("@splunk/react-icons/ExclamationCircle");
-    var f =  e.n(u);
+    const v = require("@splunk/react-icons/ExclamationCircle");
+    var f =  e.n(v);
+    // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Error"
+    const m = require("@splunk/react-icons/enterprise/Error");
+    var y =  e.n(m);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const y = require("@splunk/themes");
+    const b = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/StepBar/StepStyles.ts
-    var m = "#1A8929";
+    var x = "#1A8929";
  // SUI-2439 to meet WCAG AA compliance
-        var x = p().li.withConfig({
+        var h = p().li.withConfig({
         displayName: "StepStyles__Styled",
         componentId: "sc-756fxp-0"
-    })([ "", " ", ";text-align:center;padding:", ";", ";", "" ], y.mixins.reset("block"), (0, 
-    y.pick)({
+    })([ "", " ", ";text-align:center;padding:", ";", ";", "" ], b.mixins.reset("block"), (0, 
+    b.pick)({
         enterprise: (0, c.css)([ "position:relative;flex:1 1 0;" ]),
         prisma: (0, c.css)([ "display:flex;align-items:center;flex:0 1 auto;margin:0 12px 0 12px;" ])
-    }), (0, y.pick)({
+    }), (0, b.pick)({
         enterprise: "25px 15px 0",
         prisma: {
             comfortable: "8px 8px 8px 0",
             compact: "4px 8px 4px 0"
         }
-    }), (0, y.pick)({
+    }), (0, b.pick)({
         prisma: (0, c.css)([ "&::before{align-items:center;box-sizing:border-box;border-radius:50%;counter-increment:", ";content:counter(", ");display:inline-flex;flex-shrink:0;font-size:12px;height:20px;width:20px;justify-content:center;line-height:20px;margin:2px 16px 2px 18px;}" ], (function(e) {
-            var t = e.$idCounter;
-            return t;
+            var r = e.$idCounter;
+            return r;
         }), (function(e) {
-            var t = e.$idCounter;
-            return t;
+            var r = e.$idCounter;
+            return r;
         }))
-    }), (0, y.pickVariant)("$status", {
+    }), (0, b.pickVariant)("$status", {
         error: {
-            prisma: (0, c.css)([ "color:", ";&::before{visibility:hidden;position:absolute;}" ], y.variables.contentColorActive)
+            prisma: (0, c.css)([ "color:", ";&::before{visibility:hidden;position:absolute;}" ], b.variables.contentColorActive),
+            enterprise: (0, c.css)([ "color:", ";" ], (0, b.pick)({
+                light: b.variables.errorColorD10,
+                dark: b.variables.errorColorL20
+            }))
         },
         active: {
-            prisma: (0, c.css)([ "color:", ";&::before{color:", ";background:", ";border:1px solid ", ";}" ], y.variables.contentColorActive, y.variables.contentColorInverted, y.variables.contentColorActive, y.variables.contentColorActive)
+            prisma: (0, c.css)([ "color:", ";&::before{color:", ";background:", ";border:1px solid ", ";}" ], b.variables.contentColorActive, b.variables.contentColorInverted, b.variables.contentColorActive, b.variables.contentColorActive)
         },
         next: {
-            enterprise: (0, c.css)([ "color:", ";" ], y.variables.textColor),
-            prisma: (0, c.css)([ "color:", ";&::before{color:", ";border:1px solid ", ";}" ], y.variables.contentColorMuted, y.variables.contentColorMuted, y.variables.contentColorMuted)
+            enterprise: (0, c.css)([ "color:", ";" ], b.variables.textColor),
+            prisma: (0, c.css)([ "color:", ";&::before{color:", ";border:1px solid ", ";}" ], b.variables.contentColorMuted, b.variables.contentColorMuted, b.variables.contentColorMuted)
         },
         prev: {
-            prisma: (0, c.css)([ "color:", ";&::before{visibility:hidden;position:absolute;}" ], y.variables.contentColorDefault)
+            prisma: (0, c.css)([ "color:", ";&::before{visibility:hidden;position:absolute;}" ], b.variables.contentColorDefault)
         }
     }));
-    var b = (0, c.css)([ "height:24px;width:24px;margin:0 14px 0 16px;" ]);
-    var h = p()(v()).withConfig({
+    var g = (0, c.css)([ "height:24px;width:24px;margin:0 14px 0 16px;" ]);
+    var S = p()(u()).withConfig({
         displayName: "StepStyles__StyledCheckCircleIcon",
         componentId: "sc-756fxp-1"
-    })([ "", ";color:", ";" ], b, y.variables.accentColorPositive);
-    var g = p()(f()).withConfig({
-        displayName: "StepStyles__StyledExclamationCircleIcon",
+    })([ "", ";color:", ";" ], g, b.variables.accentColorPositive);
+    var C = p()(y()).withConfig({
+        displayName: "StepStyles__StyledErrorIcon",
         componentId: "sc-756fxp-2"
-    })([ "", ";color:", ";" ], b, y.variables.accentColorNegative);
-    var S = p().svg.withConfig({
-        displayName: "StepStyles__StyledSvg",
+    })([ "width:0.8em;height:0.8em;margin-right:", ";vertical-align:baseline;" ], b.variables.spacingXSmall);
+    var w = p()(f()).withConfig({
+        displayName: "StepStyles__StyledExclamationCircleIcon",
         componentId: "sc-756fxp-3"
+    })([ "", ";color:", ";" ], g, b.variables.accentColorNegative);
+    var I = p().svg.withConfig({
+        displayName: "StepStyles__StyledSvg",
+        componentId: "sc-756fxp-4"
     })([ "position:absolute;left:0;right:0;top:0;" ]);
-    var C = (0, c.css)([ "fill:", ";" ], m);
-    var w = p().rect.withConfig({
+    var O = p().rect.withConfig({
         displayName: "StepStyles__StyledPrevOrActiveRect",
-        componentId: "sc-756fxp-4"
-    })([ "", "" ], C);
-    var O = p().circle.withConfig({
-        displayName: "StepStyles__StyledPrevOrActiveCircle",
         componentId: "sc-756fxp-5"
-    })([ "", "" ], C);
-    var I = p().rect.withConfig({
-        displayName: "StepStyles__StyledGray",
-        componentId: "sc-756fxp-6"
-    })([ "fill:", ";" ], y.variables.gray60);
+    })([ "fill:", ";" ], x);
     var _ = p().circle.withConfig({
-        displayName: "StepStyles__StyledNext",
+        displayName: "StepStyles__StyledPrevOrActiveCircle",
+        componentId: "sc-756fxp-6"
+    })([ "fill:", ";" ], x);
+    var E = p().rect.withConfig({
+        displayName: "StepStyles__StyledGray",
         componentId: "sc-756fxp-7"
-    })([ "stroke:", ";stroke-width:3px;fill:", ";" ], y.variables.gray60, y.variables.backgroundColor);
+    })([ "fill:", ";" ], b.variables.gray60);
+    var k = p().circle.withConfig({
+        displayName: "StepStyles__StyledNext",
+        componentId: "sc-756fxp-8"
+    })([ "stroke:", ";stroke-width:3px;fill:", ";" ], (function(e) {
+        var r = e.$status;
+        return r === "error" ? b.variables.accentColorNegative : b.variables.gray60;
+    }), b.variables.backgroundColor);
     // CONCATENATED MODULE: ./src/StepBar/StepBarContext.tsx
-    var k =  (0, r.createContext)({
+    var P =  (0, t.createContext)({
         activeStepId: 0
     });
-    k.displayName = "StepBar";
-    /* harmony default export */    const E = k;
+    P.displayName = "StepBar";
+    /* harmony default export */    const j = P;
     // CONCATENATED MODULE: ./src/StepBar/Step.tsx
-    function j() {
-        j = 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];
-                    }
+    function N() {
+        return N = Object.assign ? Object.assign.bind() : function(e) {
+            for (var r = 1; r < arguments.length; r++) {
+                var t = arguments[r];
+                for (var n in t) {
+                    ({}).hasOwnProperty.call(t, n) && (e[n] = t[n]);
                 }
             }
             return e;
-        };
-        return j.apply(this, arguments);
+        }, N.apply(null, arguments);
     }
-    function P(e, t) {
-        if (e == null) return {};
-        var r = N(e, t);
-        var n, i;
+    function $(e, r) {
+        if (null == e) return {};
+        var t, n, i = q(e, r);
         if (Object.getOwnPropertySymbols) {
-            var o = Object.getOwnPropertySymbols(e);
-            for (i = 0; i < o.length; i++) {
-                n = o[i];
-                if (t.indexOf(n) >= 0) continue;
-                if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
-                r[n] = e[n];
+            var a = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < a.length; n++) {
+                t = a[n], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (i[t] = e[t]);
             }
         }
-        return r;
+        return i;
     }
-    function N(e, t) {
-        if (e == null) return {};
-        var r = {};
-        var n = Object.keys(e);
-        var i, o;
-        for (o = 0; o < n.length; o++) {
-            i = n[o];
-            if (t.indexOf(i) >= 0) continue;
-            r[i] = e[i];
+    function q(e, r) {
+        if (null == e) return {};
+        var t = {};
+        for (var n in e) {
+            if ({}.hasOwnProperty.call(e, n)) {
+                if (r.includes(n)) continue;
+                t[n] = e[n];
+            }
         }
-        return r;
+        return t;
     }
     var R = {
-        children: o().node,
-        elementRef: o().oneOfType([ o().func, o().object ]),
-        error: o().bool,
-        stepId: o().any
+        children: a().node,
+        elementRef: a().oneOfType([ a().func, a().object ]),
+        error: a().bool,
+        stepId: a().any
     };
-    function $(e) {
-        var t = e.children, i = e.elementRef, o = e.error, a = o === void 0 ? false : o, l = e.stepId, c = P(e, [ "children", "elementRef", "error", "stepId" ]);
+    function A(e) {
+        var r = e.children, i = e.elementRef, a = e.error, o = a === void 0 ? false : a, l = e.stepId, c = $(e, [ "children", "elementRef", "error", "stepId" ]);
         // @docs-props-type StepPropsBase
-                var p = (0, r.useContext)(k), d = p.activeStepId, v = p.idCounter, u = p.lastChildIndex;
-        var f = s()(), y = f.isEnterprise;
-        var m = "next";
+                var p = (0, t.useContext)(P), d = p.activeStepId, u = p.idCounter, v = p.lastChildIndex;
+        var f = s()(), m = f.isEnterprise;
+        var y = "next";
         var b = d === l;
-        var C = l === 0;
-        var E = l === u;
+        var x = l === 0;
+        var g = l === v;
         if (l < d) {
-            m = "prev";
+            y = "prev";
         }
-        if (b && !a) {
-            m = "active";
+        if (b && !o) {
+            y = "active";
         }
-        if (b && a) {
-            m = "error";
+        if (b && o) {
+            y = "error";
         }
-        if (y) {
+        if (m) {
             
-            return n().createElement(x, j({
-                $status: m,
-                "data-test-status": m,
+            return n().createElement(h, N({
+                $status: y,
+                "data-test-status": y,
                 "data-test": "step",
                 "data-test-step-id": l,
                 ref: i
-            }, c),  n().createElement(S, {
+            }, c),  n().createElement(I, {
                 focusable: "false",
                 width: "100%",
                 height: "15px",
                 viewBox: "0 0 100 15",
                 preserveAspectRatio: "none",
                 xmlns: "http://www.w3.org/2000/svg"
-            },  n().createElement(I, {
-                x: C ? "50" : "0",
+            },  n().createElement(E, {
+                x: x ? "50" : "0",
                 y: "6",
-                width: E || C ? "50%" : "100%",
+                width: g || x ? "50%" : "100%",
                 height: "3"
-            }), (m === "active" || m === "error") && !C &&  n().createElement(w, {
+            }), (y === "active" || y === "error") && !x &&  n().createElement(O, {
                 x: "0",
                 y: "6",
                 width: "50%",
                 height: "3"
-            }), m === "prev" &&  n().createElement(w, {
-                x: C ? "50%" : "0",
+            }), y === "prev" &&  n().createElement(O, {
+                x: x ? "50%" : "0",
                 y: "6",
                 width: "100%",
                 height: "3"
-            })),  n().createElement(S, {
+            })),  n().createElement(I, {
                 focusable: "false",
                 width: "100%",
                 height: "15px",
                 viewBox: "0 0 15 15",
                 xmlns: "http://www.w3.org/2000/svg"
-            }, m !== "next" &&  n().createElement(O, {
+            }, (y === "active" || y === "prev") &&  n().createElement(_, {
                 cx: "50%",
                 cy: "50%",
                 r: "7.5"
-            }), m === "next" &&  n().createElement(_, {
+            }), (y === "next" || y === "error") &&  n().createElement(k, {
                 cx: "50%",
                 cy: "50%",
-                r: "6"
-            })), t);
+                r: "6",
+                $status: y
+            })), y === "error" &&  n().createElement(C, null), r);
         }
         
-        return n().createElement(x, j({
-            $status: m,
-            "data-test-status": m,
+        return n().createElement(h, N({
+            $status: y,
+            "data-test-status": y,
             "data-test": "step",
             "data-test-step-id": l,
-            $idCounter: v,
+            $idCounter: u,
             ref: i
-        }, c), m === "prev" &&  n().createElement(h, null), m === "error" &&  n().createElement(g, null), t);
+        }, c), y === "prev" &&  n().createElement(S, null), y === "error" &&  n().createElement(w, null), r);
     }
-    $.propTypes = R;
-    /* harmony default export */    const q = $;
+    A.propTypes = R;
+    /* harmony default export */    const M = A;
     // CONCATENATED MODULE: ./src/StepBar/StepBarStyles.ts
-    var A = p().ul.withConfig({
+    var T = p().ul.withConfig({
         displayName: "StepBarStyles__Styled",
         componentId: "sc-13bf2x4-0"
-    })([ "", ";", ";", ";" ], y.mixins.reset("flex"), (0, y.pick)({
+    })([ "", ";", ";", ";" ], b.mixins.reset("flex"), (0, b.pick)({
         prisma: (0, c.css)([ "position:relative;display:flex;counter-reset:", ";" ], (function(e) {
-            var t = e.$idCounter;
-            return t;
+            var r = e.$idCounter;
+            return r;
         }))
     }), (function(e) {
-        var t = e.$inline;
-        return t && (0, c.css)([ "display:inline-flex;" ]);
+        var r = e.$inline;
+        return r && (0, c.css)([ "display:inline-flex;" ]);
     }));
     // CONCATENATED MODULE: ./src/StepBar/StepBar.tsx
-    function M() {
-        M = 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];
-                    }
+    function B() {
+        return B = Object.assign ? Object.assign.bind() : function(e) {
+            for (var r = 1; r < arguments.length; r++) {
+                var t = arguments[r];
+                for (var n in t) {
+                    ({}).hasOwnProperty.call(t, n) && (e[n] = t[n]);
                 }
             }
             return e;
-        };
-        return M.apply(this, arguments);
+        }, B.apply(null, arguments);
     }
-    function T(e, t) {
-        if (e == null) return {};
-        var r = B(e, t);
-        var n, i;
+    function D(e, r) {
+        if (null == e) return {};
+        var t, n, i = z(e, r);
         if (Object.getOwnPropertySymbols) {
-            var o = Object.getOwnPropertySymbols(e);
-            for (i = 0; i < o.length; i++) {
-                n = o[i];
-                if (t.indexOf(n) >= 0) continue;
-                if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
-                r[n] = e[n];
+            var a = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < a.length; n++) {
+                t = a[n], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (i[t] = e[t]);
             }
         }
-        return r;
+        return i;
     }
-    function B(e, t) {
-        if (e == null) return {};
-        var r = {};
-        var n = Object.keys(e);
-        var i, o;
-        for (o = 0; o < n.length; o++) {
-            i = n[o];
-            if (t.indexOf(i) >= 0) continue;
-            r[i] = e[i];
+    function z(e, r) {
+        if (null == e) return {};
+        var t = {};
+        for (var n in e) {
+            if ({}.hasOwnProperty.call(e, n)) {
+                if (r.includes(n)) continue;
+                t[n] = e[n];
+            }
         }
-        return r;
+        return t;
     }
-    var D = {
-        activeStepId: o().any.isRequired,
-        children: o().node,
-        elementRef: o().oneOfType([ o().func, o().object ]),
-        inline: o().bool
+    var V = {
+        activeStepId: a().any.isRequired,
+        children: a().node,
+        elementRef: a().oneOfType([ a().func, a().object ]),
+        inline: a().bool
     };
-    function z(e) {
-        var t = e.activeStepId, i = e.children, o = e.elementRef, l = e.inline, s = l === void 0 ? false : l, c = T(e, [ "activeStepId", "children", "elementRef", "inline" ]);
+    function G(e) {
+        var r = e.activeStepId, i = e.children, a = e.elementRef, l = e.inline, s = l === void 0 ? false : l, c = D(e, [ "activeStepId", "children", "elementRef", "inline" ]);
         // @docs-props-type StepBarPropsBase
-                var p = (0, r.useRef)((0, a.createDOMID)("stepbar")), d = p.current;
-        var v = 0;
-        var u = r.Children.toArray(i).filter(r.isValidElement);
-        var f = u.length - 1;
-        var y = u.map((function(e, n) {
+                var p = (0, t.useRef)((0, o.createDOMID)("stepbar")), d = p.current;
+        var u = 0;
+        var v = t.Children.toArray(i).filter(t.isValidElement);
+        var f = v.length - 1;
+        var m = v.map((function(e, n) {
             var i = e.props.stepId || n;
-            var o = e.props.error;
-            if (i === t) {
-                v = n;
+            var a = e.props.error;
+            if (i === r) {
+                u = n;
             }
             
-            return (0, r.cloneElement)(e, {
+            return (0, t.cloneElement)(e, {
                 stepId: i,
-                error: o
+                error: a
             });
         }));
+        var y = (0, t.useMemo)((function() {
+            return {
+                idCounter: d,
+                lastChildIndex: f,
+                activeStepId: r
+            };
+        }), [ r, d, f ]);
         
-        return n().createElement(A, M({
+        return n().createElement(T, B({
             $inline: s,
             "data-test": "step-bar",
-            "data-test-active-step-id": t,
+            "data-test-active-step-id": r,
             role: "progressbar",
             "aria-valuemin": 1,
             "aria-valuemax": f + 1,
-            "aria-valuenow": v + 1,
+            "aria-valuenow": u + 1,
             $idCounter: d,
-            ref: o
-        }, c),  n().createElement(E.Provider, {
-            value: {
-                idCounter: d,
-                lastChildIndex: f,
-                activeStepId: t
-            }
-        }, y));
+            ref: a
+        }, c),  n().createElement(j.Provider, {
+            value: y
+        }, m));
     }
-    z.propTypes = D;
-    z.Step = q;
-    /* harmony default export */    const V = z;
+    G.propTypes = V;
+    G.Step = M;
+    /* harmony default export */    const L = G;
     // CONCATENATED MODULE: ./src/StepBar/index.ts
-    module.exports = t;
+    module.exports = r;
     /******/})();