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

package/SlidingPanels.js

@@ -61,8 +61,8 @@
         e.r(n);
     // EXPORTS
         e.d(n, {
-        Panel: () => /* reexport */ x,
-        default: () => /* reexport */ Q
+        Panel: () => /* reexport */ I,
+        default: () => /* reexport */ L
     });
     // CONCATENATED MODULE: external "react"
     const r = require("react");
@@ -80,19 +80,17 @@
     // CONCATENATED MODULE: external "@splunk/react-ui/Box"
     const f = require("@splunk/react-ui/Box");
     var s =  e.n(f);
-    // CONCATENATED MODULE: external "react-spring"
-    const y = require("react-spring");
     // CONCATENATED MODULE: external "@splunk/themes"
-    const d = require("@splunk/themes");
+    const y = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/SlidingPanels/SlidingPanelsStyles.ts
-    var v = c()(s()).withConfig({
+    var d = c()(s()).withConfig({
         displayName: "SlidingPanelsStyles__StyledBox",
         componentId: "su6isq-0"
     })([ "overflow:hidden;position:relative;" ]);
-    var p = c()(y.animated.div).withConfig({
+    var v = c()(a.animated.div).withConfig({
         displayName: "SlidingPanelsStyles__StyledAnimatedDiv",
         componentId: "su6isq-1"
-    })([ "", ";", ";" ], d.mixins.reset("block"), d.mixins.clearfix());
+    })([ "", ";", ";" ], y.mixins.reset("block"), y.mixins.clearfix());
     // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
     /**
  * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
@@ -100,7 +98,7 @@
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-    function m(e, n) {
+    function p(e, n) {
         if (e) {
             if (typeof e === "function") {
                 e(n);
@@ -113,8 +111,8 @@
         }
     }
     // CONCATENATED MODULE: ./src/SlidingPanels/Panel.tsx
-    function b() {
-        return b = Object.assign ? Object.assign.bind() : function(e) {
+    function m() {
+        return m = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var r = arguments[n];
                 for (var t in r) {
@@ -122,29 +120,29 @@
                 }
             }
             return e;
-        }, b.apply(null, arguments);
+        }, m.apply(null, arguments);
     }
-    function g(e, n) {
-        return w(e) || j(e, n) || h(e, n) || O();
+    function b(e, n) {
+        return j(e) || S(e, n) || O(e, n) || g();
     }
-    function O() {
+    function g() {
         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 h(e, n) {
+    function O(e, n) {
         if (e) {
-            if ("string" == typeof e) return S(e, n);
+            if ("string" == typeof e) return h(e, n);
             var r = {}.toString.call(e).slice(8, -1);
-            return "Object" === r && e.constructor && (r = e.constructor.name), "Map" === r || "Set" === r ? Array.from(e) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? S(e, n) : void 0;
+            return "Object" === r && e.constructor && (r = e.constructor.name), "Map" === r || "Set" === r ? Array.from(e) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? h(e, n) : void 0;
         }
     }
-    function S(e, n) {
+    function h(e, n) {
         (null == n || n > e.length) && (n = e.length);
         for (var r = 0, t = Array(n); r < n; r++) {
             t[r] = e[r];
         }
         return t;
     }
-    function j(e, n) {
+    function S(e, n) {
         var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != r) {
             var t, o, i, a, u = [], l = !0, c = !1;
@@ -166,12 +164,12 @@
             return u;
         }
     }
-    function w(e) {
+    function j(e) {
         if (Array.isArray(e)) return e;
     }
-    function P(e, n) {
+    function w(e, n) {
         if (null == e) return {};
-        var r, t, o = E(e, n);
+        var r, t, o = P(e, n);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (t = 0; t < i.length; t++) {
@@ -180,7 +178,7 @@
         }
         return o;
     }
-    function E(e, n) {
+    function P(e, n) {
         if (null == e) return {};
         var r = {};
         for (var t in e) {
@@ -191,24 +189,24 @@
         }
         return r;
     }
-    var A = {
+    var E = {
         children: i().node,
         elementRef: i().oneOfType([ i().func, i().object ]),
         /** @private */
         onMount: i().func,
         /** @private */
         onUnmount: i().func,
-        panelId: i().any.isRequired
+        panelId: i().oneOfType([ i().string, i().number ]).isRequired
     };
     /**
  * Container for arbitrary content.
- */    function I(e) {
-        var n = e.children, o = e.elementRef, i = e.onMount, a = e.onUnmount, u = e.panelId, l = P(e, [ "children", "elementRef", "onMount", "onUnmount", "panelId" ]);
+ */    function A(e) {
+        var n = e.children, o = e.elementRef, i = e.onMount, a = e.onUnmount, u = e.panelId, l = w(e, [ "children", "elementRef", "onMount", "onUnmount", "panelId" ]);
         // @docs-props-type PanelPropsBase
-                var c = (0, r.useState)(null), f = g(c, 2), s = f[0], y = f[1];
+                var c = (0, r.useState)(null), f = b(c, 2), s = f[0], y = f[1];
         var d = (0, r.useCallback)((function(e) {
             y(e);
-            m(o, e);
+            p(o, e);
         }), [ o ]);
         (0, r.useEffect)((function() {
             i === null || i === void 0 ? void 0 : i(s, u);
@@ -217,26 +215,26 @@
             };
         }), [ i, a, s, u ]);
         
-        return t().createElement(p, b({
+        return t().createElement(v, m({
             "data-test": "panel",
             "data-test-panel-id": u
         }, l, {
             ref: d
         }), n);
     }
-    I.propTypes = A;
-    /* harmony default export */    const x = I;
+    A.propTypes = E;
+    /* harmony default export */    const I = A;
     // CONCATENATED MODULE: ./src/SlidingPanels/SlidingPanels.tsx
-    function C(e) {
+    function x(e) {
         "@babel/helpers - typeof";
-        return C = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return x = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
             return typeof e;
         } : function(e) {
             return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
-        }, C(e);
+        }, x(e);
     }
-    function M() {
-        return M = Object.assign ? Object.assign.bind() : function(e) {
+    function C() {
+        return C = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var r = arguments[n];
                 for (var t in r) {
@@ -244,29 +242,29 @@
                 }
             }
             return e;
-        }, M.apply(null, arguments);
+        }, C.apply(null, arguments);
     }
-    function N(e, n) {
-        return U(e) || k(e, n) || R(e, n) || q();
+    function M(e, n) {
+        return k(e) || R(e, n) || T(e, n) || N();
     }
-    function q() {
+    function N() {
         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 R(e, n) {
+    function T(e, n) {
         if (e) {
-            if ("string" == typeof e) return T(e, n);
+            if ("string" == typeof e) return q(e, n);
             var r = {}.toString.call(e).slice(8, -1);
-            return "Object" === r && e.constructor && (r = e.constructor.name), "Map" === r || "Set" === r ? Array.from(e) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? T(e, n) : void 0;
+            return "Object" === r && e.constructor && (r = e.constructor.name), "Map" === r || "Set" === r ? Array.from(e) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? q(e, n) : void 0;
         }
     }
-    function T(e, n) {
+    function q(e, n) {
         (null == n || n > e.length) && (n = e.length);
         for (var r = 0, t = Array(n); r < n; r++) {
             t[r] = e[r];
         }
         return t;
     }
-    function k(e, n) {
+    function R(e, n) {
         var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != r) {
             var t, o, i, a, u = [], l = !0, c = !1;
@@ -288,12 +286,12 @@
             return u;
         }
     }
-    function U(e) {
+    function k(e) {
         if (Array.isArray(e)) return e;
     }
-    function _(e, n) {
+    function U(e, n) {
         if (null == e) return {};
-        var r, t, o = D(e, n);
+        var r, t, o = _(e, n);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (t = 0; t < i.length; t++) {
@@ -302,7 +300,7 @@
         }
         return o;
     }
-    function D(e, n) {
+    function _(e, n) {
         if (null == e) return {};
         var r = {};
         for (var t in e) {
@@ -313,7 +311,7 @@
         }
         return r;
     }
-    function B(e, n) {
+    function D(e, n) {
         var r = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var t = Object.getOwnPropertySymbols(e);
@@ -323,42 +321,42 @@
         }
         return r;
     }
-    function V(e) {
+    function B(e) {
         for (var n = 1; n < arguments.length; n++) {
             var r = null != arguments[n] ? arguments[n] : {};
-            n % 2 ? B(Object(r), !0).forEach((function(n) {
-                $(e, n, r[n]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : B(Object(r)).forEach((function(n) {
+            n % 2 ? D(Object(r), !0).forEach((function(n) {
+                V(e, n, r[n]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : D(Object(r)).forEach((function(n) {
                 Object.defineProperty(e, n, Object.getOwnPropertyDescriptor(r, n));
             }));
         }
         return e;
     }
-    function $(e, n, r) {
-        return (n = W(n)) in e ? Object.defineProperty(e, n, {
+    function V(e, n, r) {
+        return (n = $(n)) in e ? Object.defineProperty(e, n, {
             value: r,
             enumerable: !0,
             configurable: !0,
             writable: !0
         }) : e[n] = r, e;
     }
-    function W(e) {
-        var n = z(e, "string");
-        return "symbol" == C(n) ? n : n + "";
+    function $(e) {
+        var n = W(e, "string");
+        return "symbol" == x(n) ? n : n + "";
     }
-    function z(e, n) {
-        if ("object" != C(e) || !e) return e;
+    function W(e, n) {
+        if ("object" != x(e) || !e) return e;
         var r = e[Symbol.toPrimitive];
         if (void 0 !== r) {
             var t = r.call(e, n || "default");
-            if ("object" != C(t)) return t;
+            if ("object" != x(t)) return t;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
         return ("string" === n ? String : Number)(e);
     }
     // can't use PanelId as key type, because an index signature parameter type must be 'string', 'number', 'symbol', or a template literal type.
-        var F = {
-        activePanelId: i().any.isRequired,
+        var z = {
+        activePanelId: i().oneOfType([ i().string, i().number ]).isRequired,
         children: i().node,
         elementRef: i().oneOfType([ i().func, i().object ]),
         innerClassName: i().string,
@@ -368,7 +366,7 @@
         outerStyle: i().object,
         transition: i().oneOf([ "forward", "backward" ])
     };
-    var G = {
+    var F = {
         enter: {
             x: "0px"
         },
@@ -376,7 +374,7 @@
             x: "0px"
         }
     };
-    var H = function e(n, r) {
+    var G = function e(n, r) {
         var t = "".concat(n, "px");
         var o = "".concat(n * -1, "px");
         var i = r === "forward" ? t : o;
@@ -396,7 +394,7 @@
             }
         };
     };
-    var J = function e(n) {
+    var H = function e(n) {
         return Object.values(n).reduce((function(e, n) {
             if ((n === null || n === void 0 ? void 0 : n.tagName) === "DIV") {
                 return Math.max(e, n.clientWidth);
@@ -408,7 +406,7 @@
    we wrap each child panel in animated.div via StyledAnimatedDiv
    apply any custom inner styles or classnames that have been passed in
    apply styles coming from the transitions call that is rendering this component
-   you can see this being used below as `<PanelToRender style={style} />` */    var K = function e(n) {
+   you can see this being used below as `<PanelToRender style={style} />` */    var J = function e(n) {
         var o = n.validChildren, i = n.innerClassName, a = n.innerStyle, u = n.onMount, l = n.onUnmount;
         return o.map((function(e) {
             /* this is returning a function (component) that is rendered near bottom of file as <PanelToRender style={style} /> */
@@ -419,24 +417,24 @@
                     onUnmount: l
                 });
                 var f = (0, r.useMemo)((function() {
-                    return V(V({}, a), o);
+                    return B(B({}, a), o);
                 }), [ o ]);
                 
-                return t().createElement(p, {
+                return t().createElement(v, {
                     style: f,
                     className: i
                 }, c);
             };
         }));
     };
-    function L(e) {
-        var n = e.activePanelId, o = e.children, i = e.elementRef, l = e.innerClassName, c = e.innerStyle, f = e.onAnimationEnd, s = e.outerClassName, y = e.outerStyle, d = e.transition, p = d === void 0 ? "forward" : d, m = _(e, [ "activePanelId", "children", "elementRef", "innerClassName", "innerStyle", "onAnimationEnd", "outerClassName", "outerStyle", "transition" ]);
+    function K(e) {
+        var n = e.activePanelId, o = e.children, i = e.elementRef, l = e.innerClassName, c = e.innerStyle, f = e.onAnimationEnd, s = e.outerClassName, y = e.outerStyle, v = e.transition, p = v === void 0 ? "forward" : v, m = U(e, [ "activePanelId", "children", "elementRef", "innerClassName", "innerStyle", "onAnimationEnd", "outerClassName", "outerStyle", "transition" ]);
         // @docs-props-type SlidingPanelsPropsBase
-                var b = (0, r.useState)(0), g = N(b, 2), O = g[0], h = g[1];
-        var S = (0, r.useState)([]), j = N(S, 2), w = j[0], P = j[1];
-        var E = (0, r.useState)({}), A = N(E, 2), I = A[0], x = A[1];
-        var C = (0, a.useSpringRef)();
-        var q = (0, r.useMemo)((function() {
+                var b = (0, r.useState)(0), g = M(b, 2), O = g[0], h = g[1];
+        var S = (0, r.useState)([]), j = M(S, 2), w = j[0], P = j[1];
+        var E = (0, r.useState)({}), A = M(E, 2), I = A[0], x = A[1];
+        var N = (0, a.useSpringRef)();
+        var T = (0, r.useMemo)((function() {
             return r.Children.toArray(o).filter(r.isValidElement);
         }), [ o ]);
         /**
@@ -444,16 +442,16 @@
    * Without maxWidth, we run into a problem if the leaving panel width > the arriving panel width.
    * In this case, useAnimationTransition will only know to shift the leaving panel by the width of the arriving panel,
    * which would result in seeing part of the leaving panel's content on screen at the same time as the arriving panel's content.
-   */        var R = (0, r.useMemo)((function() {
-            return J(I);
+   */        var q = (0, r.useMemo)((function() {
+            return H(I);
         }), [ I ]);
-        /* determines what our transform translateX will look like based on is it transitioning forward or backward */        var T = (0, 
+        /* determines what our transform translateX will look like based on is it transitioning forward or backward */        var R = (0, 
         r.useMemo)((function() {
-            return H(R, p);
-        }), [ R, p ]);
-        var k = (0, u.useAnimationTransition)(O, V(V(V({
-            ref: C
-        }, G), T), {}, {
+            return G(q, p);
+        }), [ q, p ]);
+        var k = (0, u.useAnimationTransition)(O, B(B(B({
+            ref: N
+        }, F), R), {}, {
             onRest: function e() {
                 f === null || f === void 0 ? void 0 : f();
             }
@@ -464,26 +462,26 @@
         }), [ O ]);
         (0, r.useEffect)((function() {
             /* starts animation */
-            C.start();
-        }), [ C, O ]);
+            N.start();
+        }), [ N, O ]);
         (0, r.useEffect)((function() {
             /* sets the currentPanelIndex in state whenever activePanelId or children changes */
-            var e = q.findIndex((function(e) {
+            var e = T.findIndex((function(e) {
                 var r = e.props;
                 return r.panelId === n;
             }));
             h(e);
-        }), [ n, q ]);
-        var U = (0, r.useCallback)((function(e, n) {
+        }), [ n, T ]);
+        var _ = (0, r.useCallback)((function(e, n) {
             if (e != null && n != null) {
                 x((function(r) {
-                    return V(V({}, r), {}, $({}, n, e));
+                    return B(B({}, r), {}, V({}, n, e));
                 }));
             }
         }), []);
         var D = (0, r.useCallback)((function(e) {
             x((function(n) {
-                var r = V({}, n);
+                var r = B({}, n);
                 delete r[e];
                 return r;
             }));
@@ -493,16 +491,16 @@
      * use useMemo instead of useEffect to setPanels because we need panels to be populated before mount
      * so SlidingPanels will appear with a panel already inside the StyledBox
      */
-            P(K({
-                validChildren: q,
-                onMount: U,
+            P(J({
+                validChildren: T,
+                onMount: _,
                 onUnmount: D,
                 innerClassName: l,
                 innerStyle: c
             }));
-        }), [ q, U, D, l, c ]);
+        }), [ T, _, D, l, c ]);
         
-        return t().createElement(v, M({
+        return t().createElement(d, C({
             className: s,
             "data-test-active-panel-id": n,
             "data-test": "sliding-panels",
@@ -516,9 +514,9 @@
             }) : null;
         })));
     }
-    L.propTypes = F;
-    L.Panel = x;
-    /* harmony default export */    const Q = L;
+    K.propTypes = z;
+    K.Panel = I;
+    /* harmony default export */    const L = K;
     // CONCATENATED MODULE: ./src/SlidingPanels/index.ts
     module.exports = n;
     /******/})();

package/SplitButton.js

@@ -85,12 +85,12 @@
     const f = require("styled-components");
     var v =  e.n(f);
     // CONCATENATED MODULE: external "@splunk/react-ui/Button"
-    const y = require("@splunk/react-ui/Button");
-    var b =  e.n(y);
+    const b = require("@splunk/react-ui/Button");
+    var y =  e.n(b);
     // CONCATENATED MODULE: external "@splunk/themes"
     const m = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/SplitButton/SplitButtonStyles.ts
-    var g = v()(b()).withConfig({
+    var g = v()(y()).withConfig({
         displayName: "SplitButtonStyles__StyledToggle",
         componentId: "sc-9igsyh-0"
     })([ "min-width:0;width:24px;" ]);
@@ -121,7 +121,7 @@
     }
     function w(e, n) {
         if (null == e) return {};
-        var r, t, a = j(e, n);
+        var r, t, a = C(e, n);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (t = 0; t < i.length; t++) {
@@ -130,7 +130,7 @@
         }
         return a;
     }
-    function j(e, n) {
+    function C(e, n) {
         if (null == e) return {};
         var r = {};
         for (var t in e) {
@@ -141,42 +141,56 @@
         }
         return r;
     }
-    var C = {
+    /** @public */    var j = {
         appearance: i().oneOf([ "default", "secondary", "primary", "destructive", "destructiveSecondary" ]),
         children: i().node,
         disabled: i().bool,
         elementRef: i().oneOfType([ i().func, i().object ]),
+        icon: i().node,
         isMain: i().bool,
         onClick: i().func
     };
     /**
  * An item within a `SplitButton`.
  */    function E(e) {
-        var n = e.appearance, a = n === void 0 ? "secondary" : n, i = e.disabled, l = e.elementRef, o = e.isMain, c = e.children, u = e.onClick, s = w(e, [ "appearance", "disabled", "elementRef", "isMain", "children", "onClick" ]);
+        var n = e.appearance, a = n === void 0 ? "secondary" : n, i = e.disabled, l = e.elementRef, o = e.icon, c = e.isMain, u = e.children, s = e.onClick, p = w(e, [ "appearance", "disabled", "elementRef", "icon", "isMain", "children", "onClick" ]);
         // @docs-props-type ItemPropsBase
-                var p = (0, r.useCallback)((function(e) {
+                var f = (0, r.useCallback)((function(e) {
             if (!i) {
-                u === null || u === void 0 ? void 0 : u(e);
+                s === null || s === void 0 ? void 0 : s(e, {});
             }
-        }), [ i, u ]);
-        if (o) {
+        }), [ i, s ]);
+        var v = (0, r.useCallback)((function(e, n) {
+            var r = n.action, t = n.icon, a = n.label, l = n.value;
+            if (!i) {
+                s === null || s === void 0 ? void 0 : s(e, {
+                    action: r,
+                    icon: t,
+                    label: a,
+                    value: l
+                });
+            }
+        }), [ i, s ]);
+        if (c) {
             
-            return t().createElement(b(), k({
+            return t().createElement(y(), k({
                 appearance: a,
                 append: true,
                 disabled: i,
                 elementRef: l,
-                onClick: p
-            }, s), c);
+                icon: o,
+                onClick: v
+            }, p), u);
         }
         
         return t().createElement(d().Item, k({
             disabled: i,
             elementRef: l,
-            onClick: p
-        }, S()(s, [ "role" ])), c);
+            onClick: f,
+            startAdornment: o
+        }, S()(p, [ "role" ])), u);
     }
-    E.propTypes = C;
+    E.propTypes = j;
     /* harmony default export */    const P = E;
     // CONCATENATED MODULE: ./src/SplitButton/SplitButton.tsx
     function q() {
@@ -221,12 +235,12 @@
         inline: i().bool
     };
     function I(e) {
-        var n = e.appearance, a = n === void 0 ? "secondary" : n, i = e.children, l = e.disabled, c = e.elementRef, s = e.inline, f = s === void 0 ? true : s, v = e.onClick, y = _(e, [ "appearance", "children", "disabled", "elementRef", "inline", "onClick" ]);
+        var n = e.appearance, a = n === void 0 ? "secondary" : n, i = e.children, l = e.disabled, c = e.elementRef, s = e.inline, f = s === void 0 ? true : s, v = e.onClick, b = _(e, [ "appearance", "children", "disabled", "elementRef", "inline", "onClick" ]);
  // @docs-props-type SplitButtonPropsBase
-                var b = r.Children.toArray(i).filter(r.isValidElement);
+                var y = r.Children.toArray(i).filter(r.isValidElement);
         var m = 0;
         var O = 0;
-        b.forEach((function(e, n) {
+        y.forEach((function(e, n) {
             var r = e.props, t = r.disabled, a = r.isMain;
             if (a) {
                 m = n;
@@ -235,14 +249,14 @@
                 O += 1;
             }
         }));
-        var S =  (0, r.cloneElement)(b[m], {
+        var S =  (0, r.cloneElement)(y[m], {
             isMain: true,
             appearance: a,
-            disabled: l || b[m].props.disabled
+            disabled: l || y[m].props.disabled
         });
         // Remove mainButton from array of dropdown items
-                b.splice(m, 1);
-        var k = b;
+                y.splice(m, 1);
+        var k = y;
         var w =  t().createElement(g, {
             prepend: true,
             disabled: l || O === k.length,
@@ -261,7 +275,7 @@
             role: "group",
             onClick: l ? undefined : v,
             $appearance: a
-        }, y), S,  t().createElement("div", null,  t().createElement(u(), {
+        }, b), S,  t().createElement("div", null,  t().createElement(u(), {
             toggle: w
         },  t().createElement(d(), null, k))));
     }

package/StepBar.js

@@ -193,7 +193,7 @@
                 var s = (0, r.useContext)(O), p = s.activeStepId, d = s.idCounter;
         var u = "next";
         var v = p === l;
-        if (l < p) {
+        if (l != null && l < p) {
             u = "prev";
         }
         if (v && !i) {