@splunk/react-ui 4.43.0 → 5.0.0-beta.2

package/StepBar.js

@@ -8,27 +8,27 @@
     /******/ /* 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
+        /******/ e.n = t => {
+            /******/ var r = t && t.__esModule ? 
+            /******/ () => t["default"]
+            /******/ : () => t
             /******/;
-            e.d(t, {
-                a: t
+            e.d(r, {
+                a: r
             });
-            /******/            return t;
+            /******/            return r;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (r, t) => {
-            /******/ for (var n in t) {
-                /******/ if (e.o(t, n) && !e.o(r, n)) {
-                    /******/ Object.defineProperty(r, n, {
+        /******/ e.d = (t, r) => {
+            /******/ for (var n in r) {
+                /******/ if (e.o(r, n) && !e.o(t, n)) {
+                    /******/ Object.defineProperty(t, n, {
                         enumerable: true,
-                        get: t[n]
+                        get: r[n]
                     });
                     /******/                }
                 /******/            }
@@ -37,7 +37,7 @@
     /******/
     /******/ /* webpack/runtime/hasOwnProperty shorthand */
     /******/    (() => {
-        /******/ e.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
+        /******/ e.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t)
         /******/;
     })();
     /******/
@@ -56,338 +56,273 @@
             /******/        };
         /******/    })();
     /******/
-    /************************************************************************/    var r = {};
+    /************************************************************************/    var t = {};
     // ESM COMPAT FLAG
-        e.r(r);
+        e.r(t);
     // EXPORTS
-        e.d(r, {
-        Step: () => /* reexport */ M,
-        default: () => /* reexport */ L
+        e.d(t, {
+        Step: () => /* reexport */ k,
+        default: () => /* reexport */ M
     });
     // CONCATENATED MODULE: external "react"
-    const t = require("react");
-    var n =  e.n(t);
+    const r = require("react");
+    var n =  e.n(r);
     // CONCATENATED MODULE: external "prop-types"
-    const i = require("prop-types");
-    var a =  e.n(i);
+    const a = require("prop-types");
+    var o =  e.n(a);
     // CONCATENATED MODULE: external "@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);
+    const i = require("@splunk/ui-utils/id");
     // CONCATENATED MODULE: external "styled-components"
-    const c = require("styled-components");
-    var p =  e.n(c);
+    const l = require("styled-components");
+    var c =  e.n(l);
     // CONCATENATED MODULE: external "@splunk/react-icons/CheckCircle"
-    const d = require("@splunk/react-icons/CheckCircle");
-    var u =  e.n(d);
+    const s = require("@splunk/react-icons/CheckCircle");
+    var p =  e.n(s);
     // CONCATENATED MODULE: external "@splunk/react-icons/ExclamationCircle"
-    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);
+    const d = require("@splunk/react-icons/ExclamationCircle");
+    var u =  e.n(d);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const b = require("@splunk/themes");
+    const v = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/StepBar/StepStyles.ts
-    var x = "#1A8929";
- // SUI-2439 to meet WCAG AA compliance
-        var h = p().li.withConfig({
-        displayName: "StepStyles__Styled",
+    var f = "24px";
+    var b = "10px";
+ /* half of the actual rendered svg size (20px) */    var y = (0, 
+    l.css)([ "height:", ";width:", ";" ], f, f);
+    var m = c().div.withConfig({
+        displayName: "StepStyles__StyledBar",
         componentId: "sc-756fxp-0"
-    })([ "", " ", ";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, b.pick)({
-        enterprise: "25px 15px 0",
-        prisma: {
-            comfortable: "8px 8px 8px 0",
-            compact: "4px 8px 4px 0"
-        }
-    }), (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 r = e.$idCounter;
-            return r;
-        }), (function(e) {
-            var r = e.$idCounter;
-            return r;
-        }))
-    }), (0, b.pickVariant)("$status", {
-        error: {
-            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 ", ";}" ], b.variables.contentColorActive, b.variables.contentColorInverted, b.variables.contentColorActive, b.variables.contentColorActive)
-        },
-        next: {
-            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;}" ], b.variables.contentColorDefault)
-        }
-    }));
-    var g = (0, c.css)([ "height:24px;width:24px;margin:0 14px 0 16px;" ]);
-    var S = p()(u()).withConfig({
-        displayName: "StepStyles__StyledCheckCircleIcon",
+    })([ "position:absolute;top:10px;height:3px;width:100%;&::before,&::after{content:'';display:block;height:3px;}" ]);
+    var g = c().li.withConfig({
+        displayName: "StepStyles__Styled",
         componentId: "sc-756fxp-1"
-    })([ "", ";color:", ";" ], g, b.variables.accentColorPositive);
-    var C = p()(y()).withConfig({
-        displayName: "StepStyles__StyledErrorIcon",
+    })([ "display:grid;gap:", ";justify-items:center;min-width:min-content;position:relative;overflow:hidden;", ";text-align:center;color:", ";counter-increment:", ";&:not(:first-of-type){", "{&::before{box-shadow:inset 500px 0 ", ";width:calc(50% - ", ");}}}&:not(:last-of-type){", "{&::after{width:50%;position:absolute;top:0;box-shadow:inset 500px 0 ", ";left:calc(50% + ", ");}}}" ], v.variables.spacingXSmall, v.mixins.typography("body", {
+        weight: "semiBold"
+    }), (0, v.pickVariant)("$status", {
+        error: v.variables.contentColorActive,
+        active: v.variables.contentColorAccent,
+        next: v.variables.contentColorDefault,
+        prev: v.variables.contentColorActive
+    }), (function(e) {
+        var t = e.$idCounter;
+        return t;
+    }), /* sc-sel */ m, (0, v.pickVariant)("$status", {
+        error: v.variables.contentColorAccent,
+        active: v.variables.contentColorAccent,
+        next: v.variables.borderColor,
+        prev: v.variables.contentColorAccent
+    }), b, /* sc-sel */ m, (0, v.pickVariant)("$status", {
+        error: v.variables.borderColor,
+        active: v.variables.borderColor,
+        next: v.variables.borderColor,
+        prev: v.variables.contentColorAccent
+    }), b);
+    var h = "16px";
+    var C = c().span.withConfig({
+        displayName: "StepStyles__StyledCircle",
         componentId: "sc-756fxp-2"
-    })([ "width:0.8em;height:0.8em;margin-right:", ";vertical-align:baseline;" ], b.variables.spacingXSmall);
-    var w = p()(f()).withConfig({
-        displayName: "StepStyles__StyledExclamationCircleIcon",
+    })([ "display:grid;height:", ";width:", ";border-radius:50%;margin:2px;", " &::before{content:counter(", ");line-height:", ";}" ], h, h, (0, 
+    v.pickVariant)("$status", {
+        active: (0, l.css)([ "background-color:", ";border:2px solid ", ";color:", ";" ], v.variables.contentColorAccent, v.variables.contentColorAccent, v.variables.contentColorInverted),
+        next: (0, l.css)([ "border:2px solid ", ";color:", ";" ], v.variables.contentColorDefault, v.variables.contentColorDefault)
+    }), (function(e) {
+        var t = e.$idCounter;
+        return t;
+    }), h);
+    var S = c()(p()).withConfig({
+        displayName: "StepStyles__StyledCheckCircleIcon",
         componentId: "sc-756fxp-3"
-    })([ "", ";color:", ";" ], g, b.variables.accentColorNegative);
-    var I = p().svg.withConfig({
-        displayName: "StepStyles__StyledSvg",
+    })([ "", ";color:", ";" ], y, v.variables.contentColorAccent);
+    var x = c()(u()).withConfig({
+        displayName: "StepStyles__StyledExclamationCircleIcon",
         componentId: "sc-756fxp-4"
-    })([ "position:absolute;left:0;right:0;top:0;" ]);
-    var O = p().rect.withConfig({
-        displayName: "StepStyles__StyledPrevOrActiveRect",
+    })([ "", ";color:", ";" ], y, v.variables.contentColorNegative);
+    var w = c().span.withConfig({
+        displayName: "StepStyles__StyledStepLabel",
         componentId: "sc-756fxp-5"
-    })([ "fill:", ";" ], x);
-    var _ = p().circle.withConfig({
-        displayName: "StepStyles__StyledPrevOrActiveCircle",
-        componentId: "sc-756fxp-6"
-    })([ "fill:", ";" ], x);
-    var E = p().rect.withConfig({
-        displayName: "StepStyles__StyledGray",
-        componentId: "sc-756fxp-7"
-    })([ "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);
+    })([ "padding-inline:calc(", " / 2);" ], v.variables.spacingXXLarge);
     // CONCATENATED MODULE: ./src/StepBar/StepBarContext.tsx
-    var P =  (0, t.createContext)({
+    var I =  (0, r.createContext)({
         activeStepId: 0
     });
-    P.displayName = "StepBar";
-    /* harmony default export */    const j = P;
+    I.displayName = "StepBar";
+    /* harmony default export */    const O = I;
     // CONCATENATED MODULE: ./src/StepBar/Step.tsx
-    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]);
+    function _() {
+        return _ = Object.assign ? Object.assign.bind() : function(e) {
+            for (var t = 1; t < arguments.length; t++) {
+                var r = arguments[t];
+                for (var n in r) {
+                    ({}).hasOwnProperty.call(r, n) && (e[n] = r[n]);
                 }
             }
             return e;
-        }, N.apply(null, arguments);
+        }, _.apply(null, arguments);
     }
-    function $(e, r) {
+    function $(e, t) {
         if (null == e) return {};
-        var t, n, i = q(e, r);
+        var r, n, a = E(e, t);
         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) && (i[t] = e[t]);
+            var o = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < o.length; n++) {
+                r = o[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
             }
         }
-        return i;
+        return a;
     }
-    function q(e, r) {
+    function E(e, t) {
         if (null == e) return {};
-        var t = {};
+        var r = {};
         for (var n in e) {
             if ({}.hasOwnProperty.call(e, n)) {
-                if (r.includes(n)) continue;
-                t[n] = e[n];
+                if (t.includes(n)) continue;
+                r[n] = e[n];
             }
         }
-        return t;
+        return r;
     }
-    var R = {
-        children: a().node,
-        elementRef: a().oneOfType([ a().func, a().object ]),
-        error: a().bool,
-        stepId: a().any
+    var j = {
+        children: o().node,
+        elementRef: o().oneOfType([ o().func, o().object ]),
+        error: o().bool,
+        stepId: o().any
     };
-    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" ]);
+    function P(e) {
+        var t = e.children, a = e.elementRef, o = e.error, i = o === void 0 ? false : o, l = e.stepId, c = $(e, [ "children", "elementRef", "error", "stepId" ]);
         // @docs-props-type StepPropsBase
-                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 x = l === 0;
-        var g = l === v;
-        if (l < d) {
-            y = "prev";
-        }
-        if (b && !o) {
-            y = "active";
+                var s = (0, r.useContext)(I), p = s.activeStepId, d = s.idCounter;
+        var u = "next";
+        var v = p === l;
+        if (l < p) {
+            u = "prev";
         }
-        if (b && o) {
-            y = "error";
+        if (v && !i) {
+            u = "active";
         }
-        if (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(I, {
-                focusable: "false",
-                width: "100%",
-                height: "15px",
-                viewBox: "0 0 100 15",
-                preserveAspectRatio: "none",
-                xmlns: "http://www.w3.org/2000/svg"
-            },  n().createElement(E, {
-                x: x ? "50" : "0",
-                y: "6",
-                width: g || x ? "50%" : "100%",
-                height: "3"
-            }), (y === "active" || y === "error") && !x &&  n().createElement(O, {
-                x: "0",
-                y: "6",
-                width: "50%",
-                height: "3"
-            }), y === "prev" &&  n().createElement(O, {
-                x: x ? "50%" : "0",
-                y: "6",
-                width: "100%",
-                height: "3"
-            })),  n().createElement(I, {
-                focusable: "false",
-                width: "100%",
-                height: "15px",
-                viewBox: "0 0 15 15",
-                xmlns: "http://www.w3.org/2000/svg"
-            }, (y === "active" || y === "prev") &&  n().createElement(_, {
-                cx: "50%",
-                cy: "50%",
-                r: "7.5"
-            }), (y === "next" || y === "error") &&  n().createElement(k, {
-                cx: "50%",
-                cy: "50%",
-                r: "6",
-                $status: y
-            })), y === "error" &&  n().createElement(C, null), r);
+        if (v && i) {
+            u = "error";
         }
+        var f = {
+            error:  n().createElement(x, null),
+            prev:  n().createElement(S, null),
+            next:  n().createElement(C, {
+                $status: u,
+                $idCounter: d
+            }),
+            active:  n().createElement(C, {
+                $status: u,
+                $idCounter: d
+            })
+        };
         
-        return n().createElement(h, N({
-            $status: y,
-            "data-test-status": y,
+        return n().createElement(g, _({
+            $status: u,
+            "data-test-status": u,
             "data-test": "step",
             "data-test-step-id": l,
-            $idCounter: u,
-            ref: i
-        }, c), y === "prev" &&  n().createElement(S, null), y === "error" &&  n().createElement(w, null), r);
+            ref: a
+        }, c, {
+            $idCounter: d
+        }),  n().createElement(m, {
+            $status: u
+        }),  n().createElement("div", null, f[u]),  n().createElement(w, null, t));
     }
-    A.propTypes = R;
-    /* harmony default export */    const M = A;
+    P.propTypes = j;
+    /* harmony default export */    const k = P;
     // CONCATENATED MODULE: ./src/StepBar/StepBarStyles.ts
-    var T = p().ul.withConfig({
+    var A = c().ul.withConfig({
         displayName: "StepBarStyles__Styled",
         componentId: "sc-13bf2x4-0"
-    })([ "", ";", ";", ";" ], b.mixins.reset("flex"), (0, b.pick)({
-        prisma: (0, c.css)([ "position:relative;display:flex;counter-reset:", ";" ], (function(e) {
-            var r = e.$idCounter;
-            return r;
-        }))
+    })([ "", ";grid-auto-flow:column;padding:", ";counter-reset:", ";", ";" ], v.mixins.reset("grid"), v.variables.spacingXLarge, (function(e) {
+        var t = e.$idCounter;
+        return t;
     }), (function(e) {
-        var r = e.$inline;
-        return r && (0, c.css)([ "display:inline-flex;" ]);
+        var t = e.$inline;
+        return t && (0, l.css)([ "display:inline-flex;" ]);
     }));
     // CONCATENATED MODULE: ./src/StepBar/StepBar.tsx
-    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]);
+    function N() {
+        return N = Object.assign ? Object.assign.bind() : function(e) {
+            for (var t = 1; t < arguments.length; t++) {
+                var r = arguments[t];
+                for (var n in r) {
+                    ({}).hasOwnProperty.call(r, n) && (e[n] = r[n]);
                 }
             }
             return e;
-        }, B.apply(null, arguments);
+        }, N.apply(null, arguments);
     }
-    function D(e, r) {
+    function q(e, t) {
         if (null == e) return {};
-        var t, n, i = z(e, r);
+        var r, n, a = R(e, t);
         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) && (i[t] = e[t]);
+            var o = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < o.length; n++) {
+                r = o[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
             }
         }
-        return i;
+        return a;
     }
-    function z(e, r) {
+    function R(e, t) {
         if (null == e) return {};
-        var t = {};
+        var r = {};
         for (var n in e) {
             if ({}.hasOwnProperty.call(e, n)) {
-                if (r.includes(n)) continue;
-                t[n] = e[n];
+                if (t.includes(n)) continue;
+                r[n] = e[n];
             }
         }
-        return t;
+        return r;
     }
-    var V = {
-        activeStepId: a().any.isRequired,
-        children: a().node,
-        elementRef: a().oneOfType([ a().func, a().object ]),
-        inline: a().bool
+    var T = {
+        activeStepId: o().any.isRequired,
+        children: o().node,
+        elementRef: o().oneOfType([ o().func, o().object ]),
+        inline: o().bool
     };
-    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" ]);
+    function D(e) {
+        var t = e.activeStepId, a = e.children, o = e.elementRef, l = e.inline, c = l === void 0 ? false : l, s = q(e, [ "activeStepId", "children", "elementRef", "inline" ]);
         // @docs-props-type StepBarPropsBase
-                var p = (0, t.useRef)((0, o.createDOMID)("stepbar")), d = p.current;
+                var p = (0, r.useRef)((0, i.createDOMID)("stepbar")), d = p.current;
         var u = 0;
-        var v = t.Children.toArray(i).filter(t.isValidElement);
+        var v = r.Children.toArray(a).filter(r.isValidElement);
         var f = v.length - 1;
-        var m = v.map((function(e, n) {
-            var i = e.props.stepId || n;
-            var a = e.props.error;
-            if (i === r) {
+        var b = v.map((function(e, n) {
+            var a = e.props.stepId || n;
+            var o = e.props.error;
+            if (a === t) {
                 u = n;
             }
             
-            return (0, t.cloneElement)(e, {
-                stepId: i,
-                error: a
+            return (0, r.cloneElement)(e, {
+                stepId: a,
+                error: o
             });
         }));
-        var y = (0, t.useMemo)((function() {
+        var y = (0, r.useMemo)((function() {
             return {
                 idCounter: d,
                 lastChildIndex: f,
-                activeStepId: r
+                activeStepId: t
             };
-        }), [ r, d, f ]);
+        }), [ t, d, f ]);
         
-        return n().createElement(T, B({
-            $inline: s,
+        return n().createElement(A, N({
+            $inline: c,
             "data-test": "step-bar",
-            "data-test-active-step-id": r,
+            "data-test-active-step-id": t,
             role: "progressbar",
             "aria-valuemin": 1,
             "aria-valuemax": f + 1,
             "aria-valuenow": u + 1,
             $idCounter: d,
-            ref: a
-        }, c),  n().createElement(j.Provider, {
+            ref: o
+        }, s),  n().createElement(O.Provider, {
             value: y
-        }, m));
+        }, b));
     }
-    G.propTypes = V;
-    G.Step = M;
-    /* harmony default export */    const L = G;
+    D.propTypes = T;
+    D.Step = k;
+    /* harmony default export */    const M = D;
     // CONCATENATED MODULE: ./src/StepBar/index.ts
-    module.exports = r;
+    module.exports = t;
     /******/})();