@splunk/react-ui 5.3.0 → 5.4.0

package/StepBar.js

@@ -61,20 +61,21 @@
         e.r(t);
     // EXPORTS
         e.d(t, {
-        Step: () => /* reexport */ A,
-        default: () => /* reexport */ V
+        Step: () => /* reexport */ N,
+        default: () => /* reexport */ D
     });
     // CONCATENATED MODULE: external "react"
     const r = require("react");
     var n =  e.n(r);
     // CONCATENATED MODULE: external "prop-types"
     const a = require("prop-types");
-    var o =  e.n(a);
+    var i =  e.n(a);
     // CONCATENATED MODULE: external "@splunk/ui-utils/id"
-    const i = require("@splunk/ui-utils/id");
+    const o = require("@splunk/ui-utils/id");
     // CONCATENATED MODULE: ./src/StepBar/StepBarContext.tsx
     var l =  (0, r.createContext)({
-        activeStepId: 0
+        activeStepId: 0,
+        orientation: "horizontal"
     });
     l.displayName = "StepBar";
     /* harmony default export */    const c = l;
@@ -90,21 +91,24 @@
     // CONCATENATED MODULE: external "@splunk/themes"
     const b = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/StepBar/StepStyles.ts
-    var y = "2px";
-    var m = "24px";
+    var m = "2px";
+    var y = "24px";
     var g = "10px";
  /* half of the actual rendered svg size (20px) */    var h = (0, 
-    s.css)([ "height:", ";width:", ";" ], m, m);
+    s.css)([ "height:", ";width:", ";" ], y, y);
     var C = p().div.withConfig({
         displayName: "StepStyles__StyledBar",
         componentId: "sc-756fxp-0"
-    })([ "position:absolute;top:10px;height:", ";width:100%;&::before,&::after{content:'';display:block;height:", ";}" ], y, y);
+    })([ "position:absolute;top:10px;height:", ";width:100%;&::before,&::after{content:'';display:block;height:", ";}" ], m, m);
     var S = p().li.withConfig({
         displayName: "StepStyles__Styled",
         componentId: "sc-756fxp-1"
-    })([ "", ";display:grid;gap:", ";grid-template-rows:auto 1fr;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% + ", ");}}}" ], b.mixins.typography("body", {
+    })([ "", ";display:grid;", " min-width:min-content;position:relative;overflow:hidden;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 ", ";inset-inline-start:calc(50% + ", ");}}}" ], b.mixins.typography("body", {
         weight: "semiBold"
-    }), b.variables.spacingXSmall, (0, b.pickVariant)("$status", {
+    }), (0, b.pickVariant)("$orientation", {
+        horizontal: (0, s.css)([ "grid-template-rows:auto 1fr;row-gap:", ";justify-items:center;" ], b.variables.spacingXSmall),
+        vertical: (0, s.css)([ "grid-template-rows:1lh auto;grid-template-columns:auto 1fr;column-gap:", ";align-items:center;" ], b.variables.spacingMedium)
+    }), (0, b.pickVariant)("$status", {
         error: b.variables.contentColorActive,
         active: b.variables.contentColorAccent,
         next: b.variables.contentColorDefault,
@@ -123,33 +127,42 @@
         next: b.variables.borderColor,
         prev: b.variables.contentColorAccent
     }), g);
-    var x = "16px";
-    var w = p().span.withConfig({
-        displayName: "StepStyles__StyledCircle",
+    var x = p().div.withConfig({
+        displayName: "StepStyles__StyledStepIndicatorWrapper",
         componentId: "sc-756fxp-2"
-    })([ "display:grid;height:", ";width:", ";border-radius:50%;margin:2px;", " &::before{content:counter(", ");line-height:", ";}" ], x, x, (0, 
+    })([ "", "" ], (0, b.pickVariant)("$orientation", {
+        vertical: (0, s.css)([ "grid-row:1;" ])
+    }));
+    var w = "16px";
+    var O = p().span.withConfig({
+        displayName: "StepStyles__StyledCircle",
+        componentId: "sc-756fxp-3"
+    })([ "display:grid;height:", ";width:", ";border-radius:50%;margin:2px;", " &::before{content:counter(", ");line-height:", ";text-align:center;}" ], w, w, (0, 
     b.pickVariant)("$status", {
         active: (0, s.css)([ "background-color:", ";border:2px solid ", ";color:", ";" ], b.variables.contentColorAccent, b.variables.contentColorAccent, b.variables.contentColorInverted),
         next: (0, s.css)([ "border:2px solid ", ";color:", ";" ], b.variables.contentColorDefault, b.variables.contentColorDefault)
     }), (function(e) {
         var t = e.$idCounter;
         return t;
-    }), x);
-    var O = p()(u()).withConfig({
+    }), w);
+    var I = p()(u()).withConfig({
         displayName: "StepStyles__StyledCheckCircleIcon",
-        componentId: "sc-756fxp-3"
+        componentId: "sc-756fxp-4"
     })([ "", ";color:", ";" ], h, b.variables.contentColorAccent);
-    var I = p()(f()).withConfig({
+    var $ = p()(f()).withConfig({
         displayName: "StepStyles__StyledExclamationCircleIcon",
-        componentId: "sc-756fxp-4"
+        componentId: "sc-756fxp-5"
     })([ "", ";color:", ";" ], h, b.variables.contentColorNegative);
     var _ = p().span.withConfig({
         displayName: "StepStyles__StyledStepLabel",
-        componentId: "sc-756fxp-5"
-    })([ "padding-inline:calc(", " / 2);" ], b.variables.spacingXXLarge);
+        componentId: "sc-756fxp-6"
+    })([ "", "" ], (0, b.pickVariant)("$orientation", {
+        horizontal: (0, s.css)([ "padding-inline:calc(", " / 2);text-align:center;" ], b.variables.spacingXXLarge),
+        vertical: (0, s.css)([ "grid-row:1 / -1;" ])
+    }));
     // CONCATENATED MODULE: ./src/StepBar/Step.tsx
-    function $() {
-        return $ = Object.assign ? Object.assign.bind() : function(e) {
+    function k() {
+        return k = Object.assign ? Object.assign.bind() : function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var r = arguments[t];
                 for (var n in r) {
@@ -157,15 +170,15 @@
                 }
             }
             return e;
-        }, $.apply(null, arguments);
+        }, k.apply(null, arguments);
     }
     function E(e, t) {
         if (null == e) return {};
         var r, n, a = j(e, t);
         if (Object.getOwnPropertySymbols) {
-            var o = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < o.length; n++) {
-                r = o[n], -1 === t.indexOf(r) && {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
+            var i = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < i.length; n++) {
+                r = i[n], -1 === t.indexOf(r) && {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
             }
         }
         return a;
@@ -182,63 +195,73 @@
         return r;
     }
     var P = {
-        children: o().node,
-        elementRef: o().oneOfType([ o().func, o().object ]),
-        error: o().bool,
-        stepId: o().any
+        children: i().node,
+        elementRef: i().oneOfType([ i().func, i().object ]),
+        error: i().bool,
+        stepId: i().any
     };
-    function k(e) {
-        var t = e.children, a = e.elementRef, o = e.error, i = o === void 0 ? false : o, c = e.stepId, s = E(e, [ "children", "elementRef", "error", "stepId" ]);
+    function A(e) {
+        var t = e.children, a = e.elementRef, i = e.error, o = i === void 0 ? false : i, c = e.stepId, s = E(e, [ "children", "elementRef", "error", "stepId" ]);
         // @docs-props-type StepPropsBase
-                var p = (0, r.useContext)(l), d = p.activeStepId, u = p.idCounter;
-        var v = "next";
-        var f = d === c;
+                var p = (0, r.useContext)(l), d = p.activeStepId, u = p.idCounter, v = p.orientation;
+        var f = "next";
+        var b = d === c;
         if (c != null && c < d) {
-            v = "prev";
+            f = "prev";
         }
-        if (f && !i) {
-            v = "active";
+        if (b && !o) {
+            f = "active";
         }
-        if (f && i) {
-            v = "error";
+        if (b && o) {
+            f = "error";
         }
-        var b = {
-            error:  n().createElement(I, null),
-            prev:  n().createElement(O, null),
-            next:  n().createElement(w, {
-                $status: v,
+        var m = {
+            error:  n().createElement($, null),
+            prev:  n().createElement(I, null),
+            next:  n().createElement(O, {
+                $status: f,
                 $idCounter: u
             }),
-            active:  n().createElement(w, {
-                $status: v,
+            active:  n().createElement(O, {
+                $status: f,
                 $idCounter: u
             })
         };
         
-        return n().createElement(S, $({
-            $status: v,
-            "data-test-status": v,
+        return n().createElement(S, k({
+            $status: f,
+            "data-test-status": f,
             "data-test": "step",
             "data-test-step-id": c,
             ref: a
         }, s, {
-            $idCounter: u
-        }),  n().createElement(C, {
-            $status: v
-        }),  n().createElement("div", null, b[v]),  n().createElement(_, null, t));
+            $idCounter: u,
+            $orientation: v
+        }), v === "horizontal" &&  n().createElement(C, {
+            $status: f
+        }),  n().createElement(x, {
+            $orientation: v
+        }, m[f]),  n().createElement(_, {
+            $orientation: v
+        }, t));
     }
-    k.propTypes = P;
-    /* harmony default export */    const A = k;
+    A.propTypes = P;
+    /* harmony default export */    const N = A;
     // CONCATENATED MODULE: ./src/StepBar/StepBarStyles.ts
-    var N = p().ul.withConfig({
+    var V = p().ul.withConfig({
         displayName: "StepBarStyles__Styled",
         componentId: "sc-13bf2x4-0"
-    })([ "", ";grid-auto-flow:column;padding:", ";counter-reset:", ";", ";" ], b.mixins.reset("grid"), b.variables.spacingXLarge, (function(e) {
+    })([ "", ";", " counter-reset:", ";", ";" ], b.mixins.reset("grid"), (0, b.pickVariant)("$orientation", {
+        horizontal: (0, s.css)([ "grid-auto-flow:column;padding:", ";" ], b.variables.spacingXLarge),
+        vertical: (0, s.css)([ "gap:", ";" ], b.variables.spacingXLarge)
+    }), (function(e) {
         var t = e.$idCounter;
         return t;
     }), (function(e) {
         var t = e.$inline;
-        return t && (0, s.css)([ "display:inline-flex;" ]);
+        return t && (0, s.css)([ "display:inline-flex;", "" ], (0, b.pickVariant)("$orientation", {
+            vertical: (0, s.css)([ "display:inline-grid;" ])
+        }));
     }));
     // CONCATENATED MODULE: ./src/StepBar/StepBar.tsx
     function q() {
@@ -254,16 +277,16 @@
     }
     function R(e, t) {
         if (null == e) return {};
-        var r, n, a = T(e, t);
+        var r, n, a = z(e, t);
         if (Object.getOwnPropertySymbols) {
-            var o = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < o.length; n++) {
-                r = o[n], -1 === t.indexOf(r) && {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
+            var i = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < i.length; n++) {
+                r = i[n], -1 === t.indexOf(r) && {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
             }
         }
         return a;
     }
-    function T(e, t) {
+    function z(e, t) {
         if (null == e) return {};
         var r = {};
         for (var n in e) {
@@ -274,56 +297,59 @@
         }
         return r;
     }
-    var D = {
-        activeStepId: o().any.isRequired,
-        children: o().node,
-        elementRef: o().oneOfType([ o().func, o().object ]),
-        inline: o().bool
+    var M = {
+        activeStepId: i().any.isRequired,
+        children: i().node,
+        elementRef: i().oneOfType([ i().func, i().object ]),
+        inline: i().bool,
+        orientation: i().oneOf([ "horizontal", "vertical" ])
     };
-    function M(e) {
-        var t = e.activeStepId, a = e.children, o = e.elementRef, l = e.inline, s = l === void 0 ? false : l, p = R(e, [ "activeStepId", "children", "elementRef", "inline" ]);
+    function T(e) {
+        var t = e.activeStepId, a = e.children, i = e.elementRef, l = e.inline, s = l === void 0 ? false : l, p = e.orientation, d = p === void 0 ? "horizontal" : p, u = R(e, [ "activeStepId", "children", "elementRef", "inline", "orientation" ]);
         // @docs-props-type StepBarPropsBase
-                var d = (0, r.useRef)((0, i.createDOMID)("stepbar")), u = d.current;
-        var v = 0;
-        var f = r.Children.toArray(a).filter(r.isValidElement);
-        var b = f.length - 1;
-        var y = f.map((function(e, n) {
+                var v = (0, r.useRef)((0, o.createDOMID)("stepbar")), f = v.current;
+        var b = 0;
+        var m = r.Children.toArray(a).filter(r.isValidElement);
+        var y = m.length - 1;
+        var g = m.map((function(e, n) {
             var a = e.props.stepId || n;
-            var o = e.props.error;
+            var i = e.props.error;
             if (a === t) {
-                v = n;
+                b = n;
             }
             
             return (0, r.cloneElement)(e, {
                 stepId: a,
-                error: o
+                error: i
             });
         }));
-        var m = (0, r.useMemo)((function() {
+        var h = (0, r.useMemo)((function() {
             return {
-                idCounter: u,
-                lastChildIndex: b,
-                activeStepId: t
+                idCounter: f,
+                lastChildIndex: y,
+                activeStepId: t,
+                orientation: d
             };
-        }), [ t, u, b ]);
+        }), [ t, f, y, d ]);
         
-        return n().createElement(N, q({
+        return n().createElement(V, q({
             $inline: s,
             "data-test": "step-bar",
             "data-test-active-step-id": t,
             role: "progressbar",
             "aria-valuemin": 1,
-            "aria-valuemax": b + 1,
-            "aria-valuenow": v + 1,
-            $idCounter: u,
-            ref: o
-        }, p),  n().createElement(c.Provider, {
-            value: m
-        }, y));
+            "aria-valuemax": y + 1,
+            "aria-valuenow": b + 1,
+            $idCounter: f,
+            $orientation: d,
+            ref: i
+        }, u),  n().createElement(c.Provider, {
+            value: h
+        }, g));
     }
-    M.propTypes = D;
-    M.Step = A;
-    /* harmony default export */    const V = M;
+    T.propTypes = M;
+    T.Step = N;
+    /* harmony default export */    const D = T;
     // CONCATENATED MODULE: ./src/StepBar/index.ts
     module.exports = t;
     /******/})();