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

package/Switch.js

@@ -24,11 +24,11 @@
     /******/    (() => {
         /******/ // define getter functions for harmony exports
         /******/ e.d = (r, a) => {
-            /******/ for (var l in a) {
-                /******/ if (e.o(a, l) && !e.o(r, l)) {
-                    /******/ Object.defineProperty(r, l, {
+            /******/ for (var o in a) {
+                /******/ if (e.o(a, o) && !e.o(r, o)) {
+                    /******/ Object.defineProperty(r, o, {
                         enumerable: true,
-                        get: a[l]
+                        get: a[o]
                     });
                     /******/                }
                 /******/            }
@@ -61,14 +61,14 @@
         e.r(r);
     // EXPORTS
         e.d(r, {
-        default: () => /* reexport */ F
+        default: () => /* reexport */ W
     });
     // CONCATENATED MODULE: external "react"
     const a = require("react");
-    var l =  e.n(a);
+    var o =  e.n(a);
     // CONCATENATED MODULE: external "prop-types"
-    const o = require("prop-types");
-    var t =  e.n(o);
+    const l = require("prop-types");
+    var t =  e.n(l);
     // CONCATENATED MODULE: external "@splunk/react-ui/AnimationToggle"
     const i = require("@splunk/react-ui/AnimationToggle");
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
@@ -95,8 +95,8 @@
     var y =  e.n(k);
     // CONCATENATED MODULE: ./src/Switch/SwitchStyles.ts
     var C = "20px";
-    var S = "12px";
-    var w = "2px";
+    var w = "12px";
+    var S = "2px";
     var x = u()(v()).withConfig({
         displayName: "SwitchStyles__StyledBox",
         componentId: "sc-844ieu-0"
@@ -104,7 +104,7 @@
         var r = e.$disabled;
         return r && (0, d.css)([ "color:", ";" ], g.variables.contentColorDisabled);
     }));
-    var B = (0, d.css)([ "", " position:relative;width:", ";height:", ";line-height:", ";border-radius:", ";border:2px solid ", ";background-color:", ";cursor:pointer;flex:0 0 auto;&:not([disabled]){&:focus{box-shadow:", ";}color:", ";", "}&[disabled]{border-color:", ";background-color:", ";", ";}" ], g.mixins.reset("inline"), C, C, C, g.variables.borderRadius, g.variables.interactiveColorBorder, g.variables.interactiveColorBackground, g.variables.focusShadow, (0, 
+    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
@@ -120,7 +120,7 @@
             return (0, d.css)([ "background-color:", ";border:none;" ], g.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, (function(e) {
+    }), g.variables.interactiveColorBorderDisabled, g.variables.interactiveColorBackgroundDisabled, g.variables.contentColorDisabled, (function(e) {
         var r = e.$selected;
         return r && (0, d.css)([ "border:none;background-color:", ";" ], g.variables.neutral100);
     }));
@@ -144,15 +144,15 @@
     g.pick)({
         light: g.variables.black,
         dark: g.variables.white
-    }), S, S, w, w, (function(e) {
+    }), w, w, S, S, (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)
     }), (function(e) {
         var r = e.$selected, a = e.$disabled;
-        return (0, d.css)([ "", " ", "" ], r && (0, d.css)([ "left:calc(100% - (", " + ", " * 2));" ], S, w), !a && r && (0, 
-        d.css)([ "left:calc(100% - (", " + ", "));background-color:", ";" ], S, w, (0, g.pick)({
+        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
         })));
@@ -160,15 +160,15 @@
         var r = e.$disabled;
         return r && (0, d.css)([ "background-color:", ";" ], g.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:2px solid ", ";&:not([disabled]){&:focus{box-shadow:", ";}", "}&[disabled]{border:2px 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, g.variables.interactiveColorBackground, (function(e) {
         return e.$delay;
-    }), C, g.variables.interactiveColorBorder, g.variables.focusShadow, (function(e) {
+    }), C, g.variables.inputBorderWidth, g.variables.interactiveColorBorder, g.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)([ "border-color:transparent;background-color:", ";" ], g.variables.interactiveColorAccent);
-    }), g.variables.interactiveColorBorderDisabled, g.variables.interactiveColorBackgroundDisabled, (function(e) {
+    }), g.variables.inputBorderWidth, g.variables.interactiveColorBorderDisabled, g.variables.interactiveColorBackgroundDisabled, (function(e) {
         var r = e.$selected;
         return r && (0, d.css)([ "background-color:", ";" ], g.variables.neutral100);
     }));
@@ -176,7 +176,7 @@
         displayName: "SwitchStyles__StyledToggleClickable",
         componentId: "sc-844ieu-5"
     })([ "", "" ], I);
-    var L = u().label.withConfig({
+    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) {
@@ -190,7 +190,7 @@
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-    function R(e, r) {
+    function L(e, r) {
         if (e) {
             if (typeof e === "function") {
                 e(r);
@@ -203,35 +203,35 @@
         }
     }
     // CONCATENATED MODULE: ./src/Switch/Switch.tsx
-    function D() {
-        return D = Object.assign ? Object.assign.bind() : function(e) {
+    function R() {
+        return R = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var a = arguments[r];
-                for (var l in a) {
-                    ({}).hasOwnProperty.call(a, l) && (e[l] = a[l]);
+                for (var o in a) {
+                    ({}).hasOwnProperty.call(a, o) && (e[o] = a[o]);
                 }
             }
             return e;
-        }, D.apply(null, arguments);
+        }, R.apply(null, arguments);
     }
     function T(e, r) {
         if (null == e) return {};
-        var a, l, o = A(e, r);
+        var a, o, l = A(e, r);
         if (Object.getOwnPropertySymbols) {
             var t = Object.getOwnPropertySymbols(e);
-            for (l = 0; l < t.length; l++) {
-                a = t[l], r.includes(a) || {}.propertyIsEnumerable.call(e, a) && (o[a] = e[a]);
+            for (o = 0; o < t.length; o++) {
+                a = t[o], r.includes(a) || {}.propertyIsEnumerable.call(e, a) && (l[a] = e[a]);
             }
         }
-        return o;
+        return l;
     }
     function A(e, r) {
         if (null == e) return {};
         var a = {};
-        for (var l in e) {
-            if ({}.hasOwnProperty.call(e, l)) {
-                if (r.includes(l)) continue;
-                a[l] = e[l];
+        for (var o in e) {
+            if ({}.hasOwnProperty.call(e, o)) {
+                if (r.includes(o)) continue;
+                a[o] = e[o];
             }
         }
         return a;
@@ -257,56 +257,58 @@
         value: t().any
     };
     var P = function e(r) {
-        var a = r.disabled, o = r.selected, t = T(r, [ "disabled", "selected" ]);
+        var a = r.disabled, l = r.selected, t = T(r, [ "disabled", "selected" ]);
         var n = a === true ? "disabled" : undefined;
         var c = (0, i.useAnimationToggle)();
         var s = c === "on" ? "200ms" : undefined;
-        var d =  l().createElement(q, {
+        var d =  o().createElement(q, {
             $delay: s,
             $disabled: !!n,
-            $selected: o
+            $selected: l
         });
         
-        return l().createElement(j, D({
+        return o().createElement(j, R({
             role: "switch",
             $delay: s,
             disabled: n,
-            $selected: o || false
+            $selected: l || false
         }, t), d);
     };
     var N = function e(r) {
-        var a = r.appearance, o = r.disabled, t = r.error, i = r.selected, n = T(r, [ "appearance", "disabled", "error", "selected" ]);
+        var a = r.appearance, l = r.disabled, t = r.error, i = 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 c = "4 4 16 16";
-        var s =  l().createElement(l().Fragment, null, i === true &&  l().createElement(_, {
-            viewBox: c
-        }), i === "some" &&  l().createElement(E, {
-            viewBox: c
+   */        var s = "4 4 16 16";
+        var d =  o().createElement(o().Fragment, null, n === true &&  o().createElement(_, {
+            viewBox: s
+        }), n === "some" &&  o().createElement(E, {
+            viewBox: s
         }));
-        var d = o === true ? "disabled" : undefined;
+        var u = l === true ? "disabled" : undefined;
         
-        return l().createElement(O, D({
-            "data-clickable": true,
-            role: a,
-            disabled: d,
+        return o().createElement(O, R({
+            as: i === "presentation" ? "div" : undefined,
+            role: i || a,
+            disabled: u,
             $error: t || false,
-            $selected: i === "some" || i || false
-        }, n), s);
+            $selected: n === "some" || n || false
+        }, {
+            inert: i === "presentation" ? "true" : undefined
+        }, c), d);
     };
     /**
  * `Switch` is a basic form control with an on/off state.
  */    function M(e) {
-        var r = e.appearance, o = 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, S = 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, 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" ]);
         // @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 w = t && u == null ? (0, s.createDOMID)("clickable") : u;
+   */        var S = t && u == null ? (0, s.createDOMID)("clickable") : u;
         var B = t ? (0, s.createDOMID)("label") : v;
         (0, a.useEffect)((function() {
             if (false) {}
             if (false) {}
-        }), [ g, o, d ]);
+        }), [ g, l, d ]);
         var O = (0, a.useCallback)((function(e) {
             f === null || f === void 0 ? void 0 : f(e, {
                 value: C,
@@ -315,7 +317,7 @@
             });
         }), [ f, C, g ]);
         var $ = (0, a.useCallback)((function(e) {
-            R(k, e);
+            L(k, e);
         }), [ k ]);
         var _ = g === "some" ? "mixed" : g;
         var E = {
@@ -324,19 +326,23 @@
             some: m
         };
         var q = {
-            id: w,
+            id: S,
             onClick: i || O,
             elementRef: $,
             "aria-labelledby": B,
             "aria-checked": _,
             "aria-invalid": d ? true : undefined,
             "aria-required": p,
-            "data-test": "toggle",
-            "data-selected": 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,
+            // 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
         };
         var I = !!h || !!m || !!y;
         
-        return l().createElement(x, D({
+        return o().createElement(x, R({
             flex: true,
             inline: b,
             "data-test": "switch",
@@ -347,24 +353,24 @@
             "data-disabled": i ? true : undefined,
             elementRef: n,
             $disabled: i || false
-        }, S), o === "toggle" ?  l().createElement(P, D({
+        }, w), l === "toggle" ?  o().createElement(P, R({
             disabled: i || false,
             selected: !!g
-        }, q)) :  l().createElement(N, D({
+        }, q)) :  o().createElement(N, R({
             appearance: "checkbox",
             error: d || false,
             disabled: i || false,
             selected: g
-        }, q)), I &&  l().createElement(c(), null, E["".concat(g)]), t &&  l().createElement(L, {
+        }, q)), I &&  o().createElement(c(), null, E["".concat(g)]), t &&  o().createElement(D, {
             $disabled: i || false,
             "data-test": "label",
             id: B,
-            htmlFor: w,
+            htmlFor: S,
             "data-disabled": i || null
         }, t));
     }
     M.propTypes = H;
-    /* harmony default export */    const F = M;
+    /* harmony default export */    const W = M;
     // CONCATENATED MODULE: ./src/Switch/index.ts
     module.exports = r;
     /******/})();