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

package/StepBar.js

@@ -96,9 +96,9 @@
     var h = c().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% + ", ");}}}" ], v.variables.spacingXSmall, v.mixins.typography("body", {
+    })([ "", ";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% + ", ");}}}" ], v.mixins.typography("body", {
         weight: "semiBold"
-    }), (0, v.pickVariant)("$status", {
+    }), v.variables.spacingXSmall, (0, v.pickVariant)("$status", {
         error: v.variables.contentColorActive,
         active: v.variables.contentColorAccent,
         next: v.variables.contentColorDefault,

package/Switch.js

@@ -68,9 +68,9 @@
     var o =  e.n(a);
     // CONCATENATED MODULE: external "prop-types"
     const l = require("prop-types");
-    var t =  e.n(l);
+    var i =  e.n(l);
     // CONCATENATED MODULE: external "@splunk/react-ui/AnimationToggle"
-    const i = require("@splunk/react-ui/AnimationToggle");
+    const t = require("@splunk/react-ui/AnimationToggle");
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
     const n = require("@splunk/react-ui/ScreenReaderContent");
     var c =  e.n(n);
@@ -84,9 +84,9 @@
     var v =  e.n(b);
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
     const f = require("@splunk/react-ui/Clickable");
-    var p =  e.n(f);
+    var g =  e.n(f);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const g = require("@splunk/themes");
+    const p = require("@splunk/themes");
     // CONCATENATED MODULE: external "@splunk/react-icons/CheckBoxCompleted"
     const h = require("@splunk/react-icons/CheckBoxCompleted");
     var m =  e.n(h);
@@ -96,35 +96,36 @@
     // CONCATENATED MODULE: ./src/Switch/SwitchStyles.ts
     var C = "20px";
     var w = "12px";
-    var S = "2px";
-    var x = u()(v()).withConfig({
+    var S = "4px";
+ // diameter - toggleIndicatorDiameter / 2
+        var x = u()(v()).withConfig({
         displayName: "SwitchStyles__StyledBox",
         componentId: "sc-844ieu-0"
-    })([ "display:inline;position:relative;flex-shrink:0;gap:", ";min-height:", ";align-items:center;color:", ";", "" ], g.variables.spacingSmall, g.variables.inputHeight, g.variables.contentColorActive, (function(e) {
+    })([ "display:inline;position:relative;flex-shrink:0;gap:", ";min-height:", ";align-items:center;color:", ";", "" ], p.variables.spacingSmall, p.variables.inputHeight, p.variables.contentColorActive, (function(e) {
         var r = e.$disabled;
-        return r && (0, d.css)([ "color:", ";" ], g.variables.contentColorDisabled);
+        return r && (0, d.css)([ "color:", ";" ], p.variables.contentColorDisabled);
     }));
-    var B = (0, d.css)([ "", " position:relative;width:", ";height:", ";line-height:", ";border-radius:", ";border:", " solid ", ";background-color:", ";cursor:pointer;flex:0 0 auto;&:not([disabled]){&:focus{box-shadow:", ";}color:", ";", "}&[disabled]{border-color:", ";background-color:", ";color:", ";cursor:not-allowed;", ";}" ], g.mixins.reset("inline"), C, C, C, g.variables.borderRadius, g.variables.inputBorderWidth, g.variables.interactiveColorBorder, g.variables.interactiveColorBackground, g.variables.focusShadow, (0, 
-    g.pick)({
-        light: g.variables.white,
-        dark: g.variables.black
+    var B = (0, d.css)([ "", " position:relative;width:", ";height:", ";line-height:", ";border-radius:", ";border:", " solid ", ";background-color:", ";cursor:pointer;flex:0 0 auto;&:not([disabled]){&:focus{box-shadow:", ";}color:", ";", "}&[disabled]{border-color:", ";background-color:", ";color:", ";cursor:not-allowed;", ";}" ], p.mixins.reset("inline"), C, C, C, p.variables.borderRadius, p.variables.inputBorderWidth, p.variables.interactiveColorBorder, p.variables.interactiveColorBackground, p.variables.focusShadow, (0, 
+    p.pick)({
+        light: p.variables.white,
+        dark: p.variables.black
     }), (function(e) {
         var r = e.$error, a = e.$selected;
         if (a && !r) {
-            return (0, d.css)([ "background-color:", ";border:none;" ], g.variables.interactiveColorAccent);
+            return (0, d.css)([ "background-color:", ";border:none;" ], p.variables.interactiveColorAccent);
         }
         if (!a && r) {
-            return (0, d.css)([ "border-color:", ";&:hover{border-color:", ";background-color:", ";}" ], g.variables.interactiveColorAccentError, g.mixins.overlayColors(g.variables.interactiveColorAccentError, g.variables.interactiveColorBorderHover), g.mixins.overlayColors(g.variables.interactiveColorBackground, g.variables.interactiveColorOverlayHover));
+            return (0, d.css)([ "border-color:", ";&:hover{border-color:", ";background-color:", ";}" ], p.variables.interactiveColorAccentError, p.mixins.overlayColors(p.variables.interactiveColorAccentError, p.variables.interactiveColorBorderHover), p.mixins.overlayColors(p.variables.interactiveColorBackground, p.variables.interactiveColorOverlayHover));
         }
         if (a && r) {
-            return (0, d.css)([ "background-color:", ";border:none;" ], g.variables.interactiveColorAccentError);
+            return (0, d.css)([ "background-color:", ";border:none;" ], p.variables.interactiveColorAccentError);
         }
-        return (0, d.css)([ "&:hover{border-color:", ";background-color:", ";}" ], g.variables.interactiveColorBorderHover, g.mixins.overlayColors(g.variables.interactiveColorBackground, g.variables.interactiveColorOverlayHover));
-    }), g.variables.interactiveColorBorderDisabled, g.variables.interactiveColorBackgroundDisabled, g.variables.contentColorDisabled, (function(e) {
+        return (0, d.css)([ "&:hover{border-color:", ";background-color:", ";}" ], p.variables.interactiveColorBorderHover, p.mixins.overlayColors(p.variables.interactiveColorBackground, p.variables.interactiveColorOverlayHover));
+    }), p.variables.interactiveColorBorderDisabled, p.variables.interactiveColorBackgroundDisabled, p.variables.contentColorDisabled, (function(e) {
         var r = e.$selected;
-        return r && (0, d.css)([ "border:none;background-color:", ";" ], g.variables.neutral100);
+        return r && (0, d.css)([ "border:none;background-color:", ";" ], p.variables.neutral100);
     }));
-    var O = u()(p()).withConfig({
+    var O = u()(g()).withConfig({
         displayName: "SwitchStyles__StyledCheckboxClickable",
         componentId: "sc-844ieu-1"
     })([ "", "" ], B);
@@ -140,46 +141,46 @@
     var q = u().div.withConfig({
         displayName: "SwitchStyles__StyledToggleIndicator",
         componentId: "sc-844ieu-4"
-    })([ "background-color:", ";border-radius:50%;box-sizing:border-box;width:", ";height:", ";position:absolute;left:", ";top:", ";", ";", " ", " ", ";" ], (0, 
-    g.pick)({
-        light: g.variables.black,
-        dark: g.variables.white
-    }), w, w, S, S, (function(e) {
+    })([ "--toggle-indicator-margin:calc(", " - ", ");background-color:", ";border-radius:50%;box-sizing:border-box;width:", ";height:", ";position:absolute;left:var(--toggle-indicator-margin);top:var(--toggle-indicator-margin);", ";", " ", " ", ";" ], S, p.variables.inputBorderWidth, (0, 
+    p.pick)({
+        light: p.variables.black,
+        dark: p.variables.white
+    }), w, w, (function(e) {
         var r = e.$delay;
         return r && (0, d.css)([ "transition:left ", ";" ], r);
-    }), (0, g.pick)({
-        prisma: (0, d.css)([ "box-shadow:", ";" ], g.variables.embossShadow)
+    }), (0, p.pick)({
+        prisma: (0, d.css)([ "box-shadow:", ";" ], p.variables.embossShadow)
     }), (function(e) {
         var r = e.$selected, a = e.$disabled;
-        return (0, d.css)([ "", " ", "" ], r && (0, d.css)([ "left:calc(100% - (", " + ", " * 2));" ], w, S), !a && r && (0, 
-        d.css)([ "left:calc(100% - (", " + ", "));background-color:", ";" ], w, S, (0, g.pick)({
-            light: g.variables.white,
-            dark: g.variables.black
+        return (0, d.css)([ "", " ", "" ], r && (0, d.css)([ "left:calc(100% - (", " + var(--toggle-indicator-margin)));" ], w), !a && r && (0, 
+        d.css)([ "background-color:", ";" ], (0, p.pick)({
+            light: p.variables.white,
+            dark: p.variables.black
         })));
     }), (function(e) {
         var r = e.$disabled;
-        return r && (0, d.css)([ "background-color:", ";" ], g.variables.neutral400);
+        return r && (0, d.css)([ "background-color:", ";" ], p.variables.neutral400);
     }));
-    var I = (0, d.css)([ "position:relative;width:calc(", " * 2);height:", ";background-color:", ";transition:background-color ", ";flex:0 0 auto;border-radius:calc(", " / 2);border:", " solid ", ";&:not([disabled]){&:focus{box-shadow:", ";}", "}&[disabled]{border:", " solid ", ";background-color:", ";", "}" ], C, C, g.variables.interactiveColorBackground, (function(e) {
+    var I = (0, d.css)([ "position:relative;width:calc(", " * 2);height:", ";background-color:", ";transition:background-color ", ";flex:0 0 auto;border-radius:calc(", " / 2);border:", " solid ", ";&:not([disabled]){&:focus{box-shadow:", ";}", "}&[disabled]{border:", " solid ", ";background-color:", ";", "}" ], C, C, p.variables.interactiveColorBackground, (function(e) {
         return e.$delay;
-    }), C, g.variables.inputBorderWidth, g.variables.interactiveColorBorder, g.variables.focusShadow, (function(e) {
+    }), C, p.variables.inputBorderWidth, p.variables.interactiveColorBorder, p.variables.focusShadow, (function(e) {
         var r = e.$selected;
         if (!r) {
-            return (0, d.css)([ "&:hover{border-color:", ";background-color:", ";}" ], g.variables.interactiveColorBorderHover, g.mixins.overlayColors(g.variables.interactiveColorBackground, g.variables.interactiveColorOverlayHover));
+            return (0, d.css)([ "&:hover{border-color:", ";background-color:", ";}" ], p.variables.interactiveColorBorderHover, p.mixins.overlayColors(p.variables.interactiveColorBackground, p.variables.interactiveColorOverlayHover));
         }
-        return (0, d.css)([ "border-color:transparent;background-color:", ";" ], g.variables.interactiveColorAccent);
-    }), g.variables.inputBorderWidth, g.variables.interactiveColorBorderDisabled, g.variables.interactiveColorBackgroundDisabled, (function(e) {
+        return (0, d.css)([ "border-color:transparent;background-color:", ";" ], p.variables.interactiveColorAccent);
+    }), p.variables.inputBorderWidth, p.variables.interactiveColorBorderDisabled, p.variables.interactiveColorBackgroundDisabled, (function(e) {
         var r = e.$selected;
-        return r && (0, d.css)([ "background-color:", ";" ], g.variables.neutral100);
+        return r && (0, d.css)([ "background-color:", ";" ], p.variables.neutral100);
     }));
-    var j = u()(p()).withConfig({
+    var j = u()(g()).withConfig({
         displayName: "SwitchStyles__StyledToggleClickable",
         componentId: "sc-844ieu-5"
     })([ "", "" ], I);
     var D = u().label.withConfig({
         displayName: "SwitchStyles__StyledLabel",
         componentId: "sc-844ieu-6"
-    })([ "", " flex:1 1 auto;color:inherit;line-height:", ";", ";" ], g.mixins.reset("inline-block"), g.variables.lineHeight, (function(e) {
+    })([ "", " flex:1 1 auto;color:inherit;line-height:", ";", ";" ], p.mixins.reset("inline-block"), p.variables.lineHeight, (function(e) {
         var r = e.$disabled;
         return !r && (0, d.css)([ "cursor:pointer;" ]);
     }));
@@ -218,9 +219,9 @@
         if (null == e) return {};
         var a, o, l = A(e, r);
         if (Object.getOwnPropertySymbols) {
-            var t = Object.getOwnPropertySymbols(e);
-            for (o = 0; o < t.length; o++) {
-                a = t[o], r.includes(a) || {}.propertyIsEnumerable.call(e, a) && (l[a] = e[a]);
+            var i = Object.getOwnPropertySymbols(e);
+            for (o = 0; o < i.length; o++) {
+                a = i[o], r.includes(a) || {}.propertyIsEnumerable.call(e, a) && (l[a] = e[a]);
             }
         }
         return l;
@@ -238,28 +239,28 @@
     }
     /** @public */
     /** @public */    var H = {
-        appearance: t().oneOf([ "checkbox", "toggle" ]),
-        children: t().node,
-        disabled: t().bool,
-        elementRef: t().oneOfType([ t().func, t().object ]),
-        error: t().bool,
-        id: t().string,
-        inline: t().bool,
-        labelledBy: t().string,
-        onClick: t().func,
+        appearance: i().oneOf([ "checkbox", "toggle" ]),
+        children: i().node,
+        disabled: i().bool,
+        elementRef: i().oneOfType([ i().func, i().object ]),
+        error: i().bool,
+        id: i().string,
+        inline: i().bool,
+        labelledBy: i().string,
+        onClick: i().func,
         /** @private. */
-        required: t().bool,
-        selected: t().oneOf([ true, false, "some" ]),
-        selectedLabel: t().string,
-        toggleRef: t().oneOfType([ t().func, t().object ]),
-        someSelectedLabel: t().string,
-        unselectedLabel: t().string,
-        value: t().any
+        required: i().bool,
+        selected: i().oneOf([ true, false, "some" ]),
+        selectedLabel: i().string,
+        toggleRef: i().oneOfType([ i().func, i().object ]),
+        someSelectedLabel: i().string,
+        unselectedLabel: i().string,
+        value: i().any
     };
     var P = function e(r) {
-        var a = r.disabled, l = r.selected, t = T(r, [ "disabled", "selected" ]);
+        var a = r.disabled, l = r.selected, i = T(r, [ "disabled", "selected" ]);
         var n = a === true ? "disabled" : undefined;
-        var c = (0, i.useAnimationToggle)();
+        var c = (0, t.useAnimationToggle)();
         var s = c === "on" ? "200ms" : undefined;
         var d =  o().createElement(q, {
             $delay: s,
@@ -272,10 +273,10 @@
             $delay: s,
             disabled: n,
             $selected: l || false
-        }, t), d);
+        }, i), d);
     };
     var N = function e(r) {
-        var a = r.appearance, l = r.disabled, t = r.error, i = r.role, n = r.selected, c = T(r, [ "appearance", "disabled", "error", "role", "selected" ]);
+        var a = r.appearance, l = r.disabled, i = r.error, t = r.role, n = r.selected, c = T(r, [ "appearance", "disabled", "error", "role", "selected" ]);
         /* Setting viewbox to rescale the icons to appear larger. Cannot directly adjust svg
    * width and height without the svg being larger than the checkbox and box-model.
    */        var s = "4 4 16 16";
@@ -287,39 +288,39 @@
         var u = l === true ? "disabled" : undefined;
         
         return o().createElement(O, R({
-            as: i === "presentation" ? "div" : undefined,
-            role: i || a,
+            as: t === "presentation" ? "div" : undefined,
+            role: t || a,
             disabled: u,
-            $error: t || false,
+            $error: i || false,
             $selected: n === "some" || n || false
         }, {
-            inert: i === "presentation" ? "true" : undefined
+            inert: t === "presentation" ? "true" : undefined
         }, c), d);
     };
     /**
  * `Switch` is a basic form control with an on/off state.
  */    function M(e) {
-        var r = e.appearance, l = r === void 0 ? "checkbox" : r, t = e.children, i = e.disabled, n = e.elementRef, d = e.error, u = e.id, b = e.inline, v = e.labelledBy, f = e.onClick, p = e.required, g = e.selected, h = e.selectedLabel, m = e.someSelectedLabel, k = e.toggleRef, y = e.unselectedLabel, C = e.value, w = T(e, [ "appearance", "children", "disabled", "elementRef", "error", "id", "inline", "labelledBy", "onClick", "required", "selected", "selectedLabel", "someSelectedLabel", "toggleRef", "unselectedLabel", "value" ]);
+        var r = e.appearance, l = r === void 0 ? "checkbox" : r, i = e.children, t = e.disabled, n = e.elementRef, d = e.error, u = e.id, b = e.inline, v = e.labelledBy, f = e.onClick, g = e.required, p = e.selected, h = e.selectedLabel, m = e.someSelectedLabel, k = e.toggleRef, y = e.unselectedLabel, C = e.value, w = T(e, [ "appearance", "children", "disabled", "elementRef", "error", "id", "inline", "labelledBy", "onClick", "required", "selected", "selectedLabel", "someSelectedLabel", "toggleRef", "unselectedLabel", "value" ]);
         // @docs-props-type SwitchPropsBase
         /* If has internal label defined with children, must have an id and must use generated labelId.
    * Otherwise, use customer defined id and external label.
-   */        var S = t && u == null ? (0, s.createDOMID)("clickable") : u;
-        var B = t ? (0, s.createDOMID)("label") : v;
+   */        var S = i && u == null ? (0, s.createDOMID)("clickable") : u;
+        var B = i ? (0, s.createDOMID)("label") : v;
         (0, a.useEffect)((function() {
             if (false) {}
             if (false) {}
-        }), [ g, l, d ]);
+        }), [ p, l, d ]);
         var O = (0, a.useCallback)((function(e) {
             f === null || f === void 0 ? void 0 : f(e, {
                 value: C,
                 // @ts-expect-error - safe due to individual prop interfaces
-                selected: g
+                selected: p
             });
-        }), [ f, C, g ]);
+        }), [ f, C, p ]);
         var $ = (0, a.useCallback)((function(e) {
             L(k, e);
         }), [ k ]);
-        var _ = g === "some" ? "mixed" : g;
+        var _ = p === "some" ? "mixed" : p;
         var E = {
             true: h,
             false: y,
@@ -327,15 +328,15 @@
         };
         var q = {
             id: S,
-            onClick: i || O,
+            onClick: t || O,
             elementRef: $,
             "aria-labelledby": B,
             "aria-checked": _,
             "aria-invalid": d ? true : undefined,
-            "aria-required": p,
+            "aria-required": g,
             // TODO(SUI-7658): Hopefully handled cleaner when Checkbox is removed out of Switch and NonInteractiveCheckbox uptakes that. For now intentionally not spread like others and access directly from otherProps to stress not specific to Switch but base HTML element props.
             "data-test": w.role === "presentation" ? "presentation-toggle" : "toggle",
-            "data-selected": g,
+            "data-selected": p,
             // TODO(SUI-7658): Hopefully handled cleaner when Checkbox is removed out of Switch and NonInteractiveCheckbox uptakes that. For now intentionally not spread like others and access directly from otherProps to stress not specific to Switch but base HTML element props.
             role: w.role,
             tabIndex: w.tabIndex
@@ -346,28 +347,28 @@
             flex: true,
             inline: b,
             "data-test": "switch",
-            "data-test-selected": g,
+            "data-test-selected": p,
             "data-test-value": C,
             "data-test-error": d ? true : undefined,
             "data-error": d ? true : undefined,
-            "data-disabled": i ? true : undefined,
+            "data-test-disabled": t ? "disabled" : undefined,
             elementRef: n,
-            $disabled: i || false
+            $disabled: t || false
         }, w), l === "toggle" ?  o().createElement(P, R({
-            disabled: i || false,
-            selected: !!g
+            disabled: t || false,
+            selected: !!p
         }, q)) :  o().createElement(N, R({
             appearance: "checkbox",
             error: d || false,
-            disabled: i || false,
-            selected: g
-        }, q)), I &&  o().createElement(c(), null, E["".concat(g)]), t &&  o().createElement(D, {
-            $disabled: i || false,
+            disabled: t || false,
+            selected: p
+        }, q)), I &&  o().createElement(c(), null, E["".concat(p)]), i &&  o().createElement(D, {
+            $disabled: t || false,
             "data-test": "label",
             id: B,
             htmlFor: S,
-            "data-disabled": i || null
-        }, t));
+            "data-disabled": t || null
+        }, i));
     }
     M.propTypes = H;
     /* harmony default export */    const W = M;