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

package/RadioList.js

@@ -61,132 +61,52 @@
         e.r(r);
     // EXPORTS
         e.d(r, {
-        Option: () => /* reexport */ C,
-        default: () => /* reexport */ M
+        Option: () => /* reexport */ w,
+        default: () => /* reexport */ D
     });
     // CONCATENATED MODULE: external "react"
     const a = require("react");
     var o =  e.n(a);
     // CONCATENATED MODULE: external "prop-types"
-    const i = require("prop-types");
-    var t =  e.n(i);
+    const n = require("prop-types");
+    var t =  e.n(n);
     // CONCATENATED MODULE: external "lodash/omit"
-    const n = require("lodash/omit");
-    var l =  e.n(n);
+    const i = require("lodash/omit");
+    var l =  e.n(i);
     // CONCATENATED MODULE: external "@splunk/ui-utils/id"
-    const s = require("@splunk/ui-utils/id");
+    const c = require("@splunk/ui-utils/id");
     // CONCATENATED MODULE: ./src/RadioList/RadioListContext.ts
-    var c =  (0, a.createContext)({});
-    c.displayName = "RadioList";
-    /* harmony default export */    const d = c;
+    var d =  (0, a.createContext)({});
+    d.displayName = "RadioList";
+    /* harmony default export */    const s = d;
     // CONCATENATED MODULE: external "styled-components"
     const u = require("styled-components");
-    var b =  e.n(u);
+    var v =  e.n(u);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const p = require("@splunk/themes");
+    const f = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/RadioList/OptionStyles.ts
-    var v = b().div.withConfig({
+    var b = v().div.withConfig({
         displayName: "OptionStyles__StyledWrapper",
         componentId: "imaqjt-0"
-    })([ "position:relative;padding:", ";" ], (0, p.pick)({
-        prisma: {
-            comfortable: "10px 0",
-            compact: "6px 0"
-        },
-        enterprise: "7px 0 7px 0"
-    }));
-    var f = b().label.withConfig({
+    })([ "display:grid;grid-column:1 / -1;grid-template-columns:subgrid;gap:", ";" ], f.variables.spacingSmall);
+    var p = v().label.withConfig({
         displayName: "OptionStyles__StyledLabel",
         componentId: "imaqjt-1"
-    })([ "", ";", ";position:relative;flex:1 1 auto;padding-left:", ";margin-left:", ";cursor:pointer;&::before,&::after{display:block;content:'';position:absolute;border-radius:50%;}&::before{box-sizing:border-box;top:0;border-color:", ";border-style:solid;border-width:", ";", "}&::after{opacity:0;width:8px;height:8px;", " background-color:", ";}", " ", "" ], p.mixins.reset("block"), (0, 
-    p.pick)({
-        prisma: (0, u.css)([ "color:", ";" ], p.variables.contentColorActive)
-    }), (0, p.pick)({
-        prisma: "10px",
-        enterprise: p.variables.spacingXSmall
-    }), (0, p.pick)({
-        prisma: "20px",
-        enterprise: "18px"
-    }), (0, p.pick)({
-        prisma: p.variables.contentColorMuted,
-        enterprise: p.variables.gray80
-    }), (0, p.pick)({
-        prisma: "2px",
-        enterprise: "1px"
-    }), (0, p.pick)({
-        prisma: (0, u.css)([ "width:20px;height:20px;left:-20px;" ]),
-        enterprise: (0, u.css)([ "width:18px;height:18px;left:-18px;" ])
-    }), (0, p.pick)({
-        prisma: (0, u.css)([ "top:6px;left:-14px;" ]),
-        enterprise: (0, u.css)([ "top:5px;left:-13px;" ])
-    }), (0, p.pick)({
-        prisma: p.variables.white,
-        enterprise: {
-            dark: p.variables.gray80,
-            light: p.variables.gray45
-        }
-    }), (0, p.pick)({
-        compact: {
-            enterprise: (0, u.css)([ "font-size:", ";" ], p.variables.fontSizeSmall)
-        }
-    }), (0, p.pick)({
-        prisma: (0, u.css)([ "&:hover{&::before{box-shadow:", ";border-color:", ";background-color:", ";}}" ], p.variables.hoverShadow, p.variables.contentColorDefault, p.mixins.overlayColors(p.variables.backgroundColorPage, p.variables.interactiveColorOverlayHover))
+    })([ "grid-column:label;color:", ";cursor:pointer;" ], (function(e) {
+        var r = e.$disabled;
+        return r ? f.variables.contentColorDisabled : f.variables.contentColorActive;
     }));
-    var y = b().input.withConfig({
+    var y = "20px";
+    var m = v().input.withConfig({
         displayName: "OptionStyles__StyledRadioInput",
         componentId: "imaqjt-2"
-    })([ "opacity:0;position:absolute;top:10px;left:0;&:focus{& + ", "::before{box-shadow:", ";}}&:checked + ", "::after{opacity:1;}&:checked + ", "::before{", "}&:disabled,&:disabled + ", "{color:", ";cursor:not-allowed;}&:disabled + ", "::before{", ";}&:disabled:not(:checked) + ", "::before{", ";}&:disabled + ", "::after{background-color:", ";}", " ", "" ], /* sc-sel */ f, p.variables.focusShadow, /* sc-sel */ f, /* sc-sel */ f, (0, 
-    p.pick)({
-        prisma: (0, u.css)([ "border-color:transparent;background-color:", ";" ], p.variables.interactiveColorPrimary),
-        enterprise: {
-            dark: (0, u.css)([ "border-color:", ";" ], p.variables.gray80),
-            light: (0, u.css)([ "border-color:", ";" ], p.variables.gray45)
-        }
-    }), /* sc-sel */ f, (0, p.pick)({
-        prisma: p.variables.contentColorDisabled,
-        enterprise: {
-            dark: p.variables.gray45,
-            light: p.variables.gray80
-        }
-    }), /* sc-sel */ f, (0, p.pick)({
-        enterprise: {
-            dark: (0, u.css)([ "border-color:", ";" ], p.variables.gray45),
-            light: (0, u.css)([ "border-color:", ";" ], p.variables.gray80)
-        }
-    }), /* sc-sel */ f, (0, p.pick)({
-        prisma: (0, u.css)([ "border-color:", ";" ], p.variables.contentColorDisabled)
-    }), /* sc-sel */ f, (0, p.pick)({
-        prisma: p.variables.contentColorDisabled,
-        enterprise: {
-            dark: p.variables.gray45,
-            light: p.variables.gray80
-        }
-    }), (function(e) {
+    })([ "", ";grid-column:input;appearance:none;align-items:center;justify-items:center;height:", ";width:", ";border-radius:50%;border:2px solid ", ";background-color:", ";&::after{display:block;content:'';border-radius:50%;height:0;width:0;opacity:0;border:5px solid transparent;}&:checked::after{opacity:1;}&:hover{border-color:", ";background-color:", ";}&:checked{&,&::after{border-color:", ";}&:hover{border-color:", ";}}&:disabled{cursor:not-allowed;&,&:hover,&:checked,&:checked:hover,&:checked::after{border-color:", ";}&,&:hover{background-color:transparent;}}&:focus{box-shadow:", ";}", "" ], f.mixins.reset("grid"), y, y, f.variables.interactiveColorBorder, f.variables.interactiveColorBackground, f.variables.interactiveColorBorderHover, f.mixins.overlayColors(f.variables.interactiveColorBackground, f.variables.interactiveColorOverlayHover), f.variables.interactiveColorAccent, f.mixins.overlayColors(f.variables.interactiveColorAccent, f.variables.interactiveColorBorderHover), f.variables.interactiveColorBorderDisabled, f.variables.focusShadow, (function(e) {
         var r = e.$error;
-        return r && (0, u.css)([ "&:not(:disabled) + ", "{color:", ";&::before{border-color:", ";}}&:checked:not(:disabled) + ", "{&::before{border-color:", ";}", "}", "" ], /* sc-sel */ f, (0, 
-        p.pick)({
-            prisma: p.variables.accentColorNegative,
-            enterprise: p.variables.errorColor
-        }), (0, p.pick)({
-            prisma: p.variables.accentColorNegative,
-            enterprise: {
-                dark: p.variables.errorColor,
-                light: p.variables.errorColorL30
-            }
-        }), /* sc-sel */ f, (0, p.pick)({
-            prisma: p.variables.accentColorNegative,
-            enterprise: p.variables.errorColor
-        }), (0, p.pick)({
-            enterprise: (0, u.css)([ "&::after{background-color:", ";}" ], p.variables.errorColor)
-        }), (0, p.pick)({
-            prisma: (0, u.css)([ "&:not(:disabled):checked + ", "{&::before{background-color:", ";}}" ], /* sc-sel */ f, p.variables.accentColorNegative)
-        }));
-    }), (0, p.pick)({
-        prisma: (0, u.css)([ "&:active + ", "::before{background-color:", ";}&:active + ", "::after{background-color:", ";}&:checked:active + ", "::before{border-color:transparent;background-color:", ";}&:disabled + ", ":hover::before{box-shadow:none;}&:checked:disabled + ", "{&::before{background-color:", ";}&::after{background-color:rgba(255,255,255,0.3);}}" ], /* sc-sel */ f, p.mixins.overlayColors(p.variables.backgroundColorPage, p.variables.interactiveColorOverlayActive), /* sc-sel */ f, p.mixins.overlayColors(p.variables.white, p.variables.interactiveColorOverlayActive), /* sc-sel */ f, p.mixins.overlayColors(p.variables.interactiveColorPrimary, p.variables.interactiveColorOverlayActive), /* sc-sel */ f, /* sc-sel */ f, p.variables.interactiveColorBackgroundDisabled)
+        return r && (0, u.css)([ "&,&:checked,&:checked::after{border-color:", ";}&:checked:hover{border-color:", ";}&:hover{background-color:", ";border-color:", ";}" ], f.variables.interactiveColorAccentError, f.mixins.overlayColors(f.variables.interactiveColorAccentError, f.variables.interactiveColorBorderHover), f.variables.interactiveColorOverlayHover, f.mixins.overlayColors(f.variables.interactiveColorAccentError, f.variables.interactiveColorBorderHover));
     }));
     // CONCATENATED MODULE: ./src/RadioList/Option.tsx
-    function m() {
-        return m = Object.assign ? Object.assign.bind() : function(e) {
+    function g() {
+        return g = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var a = arguments[r];
                 for (var o in a) {
@@ -194,20 +114,20 @@
                 }
             }
             return e;
-        }, m.apply(null, arguments);
+        }, g.apply(null, arguments);
     }
-    function g(e, r) {
+    function h(e, r) {
         if (null == e) return {};
-        var a, o, i = h(e, r);
+        var a, o, n = C(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) && (i[a] = e[a]);
+                a = t[o], r.includes(a) || {}.propertyIsEnumerable.call(e, a) && (n[a] = e[a]);
             }
         }
-        return i;
+        return n;
     }
-    function h(e, r) {
+    function C(e, r) {
         if (null == e) return {};
         var a = {};
         for (var o in e) {
@@ -218,7 +138,7 @@
         }
         return a;
     }
-    var k = {
+    var O = {
         children: t().node,
         disabled: t().bool,
         error: t().bool,
@@ -226,74 +146,70 @@
         onChange: t().func,
         value: t().any.isRequired
     };
-    function x(e) {
-        var r = e.children, i = e.disabled, t = i === void 0 ? false : i, n = e.error, l = n === void 0 ? false : n, c = e.id, u = e.onChange, b = e.value, p = g(e, [ "children", "disabled", "error", "id", "onChange", "value" ]);
+    function S(e) {
+        var r = e.children, n = e.disabled, t = n === void 0 ? false : n, i = e.error, l = i === void 0 ? false : i, d = e.id, u = e.onChange, v = e.value, f = h(e, [ "children", "disabled", "error", "id", "onChange", "value" ]);
         // @docs-props-type OptionPropsBase
-                var h = (0, a.useRef)(c || (0, s.createDOMID)("radio-option")), k = h.current;
-        var x = (0, a.useContext)(d);
-        var C = function e(r) {
+                var y = (0, a.useRef)(d || (0, c.createDOMID)("radio-option")), C = y.current;
+        var O = (0, a.useContext)(s);
+        var S = function e(r) {
             var a;
             r.stopPropagation();
             u === null || u === void 0 ? void 0 : u(r, {
-                value: b,
-                name: x.name
+                value: v,
+                name: O.name
             });
-            (a = x.onChange) === null || a === void 0 ? void 0 : a.call(x, r, {
-                value: b,
-                name: x.name
+            (a = O.onChange) === null || a === void 0 ? void 0 : a.call(O, r, {
+                value: v,
+                name: O.name
             });
         };
-        var O = false;
-        if ((x === null || x === void 0 ? void 0 : x.value) !== undefined) {
-            O = x.value === b;
+        var w = false;
+        if ((O === null || O === void 0 ? void 0 : O.value) !== undefined) {
+            w = O.value === v;
         }
-        var w = t;
-        if (x === null || x === void 0 ? void 0 : x.disabled) {
-            w = x.disabled;
+        var j = t;
+        if (O === null || O === void 0 ? void 0 : O.disabled) {
+            j = O.disabled;
         }
-        var S = l;
-        if (x === null || x === void 0 ? void 0 : x.error) {
-            S = x.error;
+        var k = l;
+        if (O === null || O === void 0 ? void 0 : O.error) {
+            k = O.error;
         }
         
-        return o().createElement(v, m({
+        return o().createElement(b, g({
             "data-test": "option",
-            "data-test-value": b
-        }, p, {
-            "data-checked": O
-        }),  o().createElement(y, {
-            id: k,
+            "data-test-value": v
+        }, f, {
+            "data-checked": w
+        }),  o().createElement(m, {
+            id: C,
             type: "radio",
-            name: x.name,
-            $error: S,
-            disabled: w,
-            value: b.toString(),
-            checked: O,
-            onChange: C,
+            name: O.name,
+            $error: k,
+            disabled: j,
+            value: v.toString(),
+            checked: w,
+            onChange: S,
             "data-test": "input",
-            required: x.required
-        }),  o().createElement(f, {
-            htmlFor: k,
-            "data-test": "label"
+            required: O.required
+        }),  o().createElement(p, {
+            htmlFor: C,
+            "data-test": "label",
+            $disabled: j
         }, r));
     }
-    x.propTypes = k;
-    /* harmony default export */    const C = x;
-    // CONCATENATED MODULE: external "@splunk/react-ui/Box"
-    const O = require("@splunk/react-ui/Box");
-    var w =  e.n(O);
+    S.propTypes = O;
+    /* harmony default export */    const w = S;
     // CONCATENATED MODULE: ./src/RadioList/RadioListStyles.ts
-    var S = b()(w()).withConfig({
-        displayName: "RadioListStyles__StyledBox",
+    var j = v().div.withConfig({
+        displayName: "RadioListStyles__StyledRadioList",
         componentId: "sc-1qg10hx-0"
-    })([ "align-items:flex-start;flex-wrap:wrap;flex-direction:", ";", "" ], (function(e) {
-        return e.direction;
-    }), (function(e) {
-        return e.direction === "row" && (0, u.css)([ "", "{margin-right:40px;margin-inline-end:40px;}" ], v);
+    })([ "", ";grid-template-columns:[input] min-content [label] auto;gap:", " ", ";", "" ], f.mixins.reset("grid"), f.variables.spacingMedium, f.variables.spacingSmall, (function(e) {
+        return e.direction === "row" && (0, u.css)([ "", ";gap:", ";", "{grid-template-columns:[input] min-content [label] auto;gap:", ";}" ], f.mixins.reset("flex"), f.variables.spacingXLarge, /* sc-sel */ b, f.variables.spacingSmall);
     }));
     // CONCATENATED MODULE: ./src/RadioList/RadioList.tsx
-    function j() {
-        return j = Object.assign ? Object.assign.bind() : function(e) {
+    function k() {
+        return k = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var a = arguments[r];
                 for (var o in a) {
@@ -301,45 +217,45 @@
                 }
             }
             return e;
-        }, j.apply(null, arguments);
+        }, k.apply(null, arguments);
     }
     function q(e, r) {
-        return A(e) || _(e, r) || I(e, r) || P();
+        return A(e) || E(e, r) || B(e, r) || x();
     }
-    function P() {
+    function x() {
         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 I(e, r) {
+    function B(e, r) {
         if (e) {
-            if ("string" == typeof e) return R(e, r);
+            if ("string" == typeof e) return P(e, r);
             var a = {}.toString.call(e).slice(8, -1);
-            return "Object" === a && e.constructor && (a = e.constructor.name), "Map" === a || "Set" === a ? Array.from(e) : "Arguments" === a || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a) ? R(e, r) : void 0;
+            return "Object" === a && e.constructor && (a = e.constructor.name), "Map" === a || "Set" === a ? Array.from(e) : "Arguments" === a || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a) ? P(e, r) : void 0;
         }
     }
-    function R(e, r) {
+    function P(e, r) {
         (null == r || r > e.length) && (r = e.length);
         for (var a = 0, o = Array(r); a < r; a++) {
             o[a] = e[a];
         }
         return o;
     }
-    function _(e, r) {
+    function E(e, r) {
         var a = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != a) {
-            var o, i, t, n, l = [], s = !0, c = !1;
+            var o, n, t, i, l = [], c = !0, d = !1;
             try {
                 if (t = (a = a.call(e)).next, 0 === r) {
                     if (Object(a) !== a) return;
-                    s = !1;
-                } else for (;!(s = (o = t.call(a)).done) && (l.push(o.value), l.length !== r); s = !0) {
+                    c = !1;
+                } else for (;!(c = (o = t.call(a)).done) && (l.push(o.value), l.length !== r); c = !0) {
                 }
             } catch (e) {
-                c = !0, i = e;
+                d = !0, n = e;
             } finally {
                 try {
-                    if (!s && null != a["return"] && (n = a["return"](), Object(n) !== n)) return;
+                    if (!c && null != a["return"] && (i = a["return"](), Object(i) !== i)) return;
                 } finally {
-                    if (c) throw i;
+                    if (d) throw n;
                 }
             }
             return l;
@@ -348,18 +264,18 @@
     function A(e) {
         if (Array.isArray(e)) return e;
     }
-    function E(e, r) {
+    function I(e, r) {
         if (null == e) return {};
-        var a, o, i = B(e, r);
+        var a, o, n = R(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) && (i[a] = e[a]);
+                a = t[o], r.includes(a) || {}.propertyIsEnumerable.call(e, a) && (n[a] = e[a]);
             }
         }
-        return i;
+        return n;
     }
-    function B(e, r) {
+    function R(e, r) {
         if (null == e) return {};
         var a = {};
         for (var o in e) {
@@ -370,7 +286,7 @@
         }
         return a;
     }
-    /** @public */    var D = {
+    /** @public */    var _ = {
         children: t().node,
         defaultValue: t().any,
         describedBy: t().string,
@@ -385,64 +301,64 @@
         required: t().bool,
         value: t().any
     };
-    function N(e) {
-        var r = e.children, i = e.defaultValue, t = e.describedBy, n = e.direction, c = n === void 0 ? "column" : n, u = e.disabled, b = u === void 0 ? false : u, p = e.elementRef, v = e.error, f = v === void 0 ? false : v, y = e.labelledBy, m = e.name, g = e.onChange, h = e.required, k = e.value, x = E(e, [ "children", "defaultValue", "describedBy", "direction", "disabled", "elementRef", "error", "labelledBy", "name", "onChange", "required", "value" ]);
+    function M(e) {
+        var r = e.children, n = e.defaultValue, t = e.describedBy, i = e.direction, d = e.disabled, u = d === void 0 ? false : d, v = e.elementRef, f = e.error, b = f === void 0 ? false : f, p = e.labelledBy, y = e.name, m = e.onChange, g = e.required, h = e.value, C = I(e, [ "children", "defaultValue", "describedBy", "direction", "disabled", "elementRef", "error", "labelledBy", "name", "onChange", "required", "value" ]);
         // @docs-props-type RadioListPropsBase
         // TODO: Implement shared isControlled hook (SUI-5283).
         // See material-ui for similar pattern to handle controlled/un-controlled in functional components w/ hooks
         // https://github.com/mui-org/material-ui/blob/60d99a39836fb82f4da1477a717f642c216fb0b9/packages/material-ui/src/utils/useControlled.js
-                var C = (0, a.useRef)(k !== undefined), O = C.current;
-        var w = (0, a.useState)(i), P = q(w, 2), I = P[0], R = P[1];
-        var _ = O ? k : I;
-        var A = (0, a.useRef)(m || (0, s.createDOMID)("radio-name")), B = A.current;
-        var D = function e(r, a) {
-            if (!O) {
-                R(a.value);
+                var O = (0, a.useRef)(h !== undefined), S = O.current;
+        var w = (0, a.useState)(n), x = q(w, 2), B = x[0], P = x[1];
+        var E = S ? h : B;
+        var A = (0, a.useRef)(y || (0, c.createDOMID)("radio-name")), R = A.current;
+        var _ = function e(r, a) {
+            if (!S) {
+                P(a.value);
             }
-            g === null || g === void 0 ? void 0 : g(r, a);
+            m === null || m === void 0 ? void 0 : m(r, a);
         };
         // Check correct props are passed
                 if (false) {}
         if (false) {}
+        if (false) {}
         // Check if changing from controlled to un-controlled
                 (0, a.useEffect)((function() {
             if (false) {}
-        }), [ k, O ]);
-        var N = (0, a.useRef)(i), M = N.current;
+        }), [ h, S ]);
+        var M = (0, a.useRef)(n), D = M.current;
         (0, a.useEffect)((function() {
             if (false) {}
-        }), [ M, i, O ]);
-        var T = (0, a.useMemo)((function() {
+        }), [ D, n, S ]);
+        var H = (0, a.useMemo)((function() {
             return {
-                disabled: b,
-                error: f,
-                onChange: D,
-                name: B,
-                required: h,
-                value: _
+                disabled: u,
+                error: b,
+                onChange: _,
+                name: R,
+                required: g,
+                value: E
             };
-        }), [ b, f, D, B, h, _ ]);
-        var L = x["aria-labelledby"];
-        var z = x["aria-describedby"];
+        }), [ u, b, _, R, g, E ]);
+        var T = C["aria-labelledby"];
+        var L = C["aria-describedby"];
         
-        return o().createElement(d.Provider, {
-            value: T
-        },  o().createElement(S, j({
-            flex: true,
-            direction: c,
+        return o().createElement(s.Provider, {
+            value: H
+        },  o().createElement(j, k({
+            direction: i || "column",
             role: "radiogroup",
             "data-test": "radio-list",
-            "data-test-value": _,
-            elementRef: p
-        }, l()(x, [ "aria-labelledby", "aria-describedby" ]), {
-            "aria-labelledby": L ? "".concat(L, " ").concat(y) : y,
-            "aria-describedby": z ? "".concat(z, " ").concat(t) : t,
-            "aria-invalid": f
+            "data-test-value": E,
+            ref: v
+        }, l()(C, [ "aria-labelledby", "aria-describedby" ]), {
+            "aria-labelledby": T ? "".concat(T, " ").concat(p) : p,
+            "aria-describedby": L ? "".concat(L, " ").concat(t) : t,
+            "aria-invalid": b
         }), r));
     }
-    N.propTypes = D;
-    N.Option = C;
-    /* harmony default export */    const M = N;
+    M.propTypes = _;
+    M.Option = w;
+    /* harmony default export */    const D = M;
     // only for styled components using RadioList
         // CONCATENATED MODULE: ./src/RadioList/index.ts
     module.exports = r;