@splunk/react-ui 5.0.0 → 5.1.0

package/ControlGroup.js

@@ -100,33 +100,37 @@
     const g = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/ControlGroup/ControlGroupStyles.ts
     var w = "24px";
-    var S = y()(b()).withConfig({
-        displayName: "ControlGroupStyles__StyledBox",
+    var S = y().div.withConfig({
+        displayName: "ControlGroupStyles__StyledHelp",
         componentId: "wjnyif-0"
-    })([ "", " max-width:600px;margin-block-end:", ";&:last-child{margin-block-end:0;}", "" ], g.mixins.reset("flex"), g.variables.spacingLarge, (function(e) {
+    })([ "", ";", ";" ], g.mixins.reset("block"), g.mixins.typography("smallBody"));
+    var O = y().label.withConfig({
+        displayName: "ControlGroupStyles__StyledLabel",
+        componentId: "wjnyif-1"
+    })([ "", ";word-wrap:break-word;" ], g.mixins.typography("body", {
+        color: "active"
+    }));
+    var I = y()(b()).withConfig({
+        displayName: "ControlGroupStyles__StyledBox",
+        componentId: "wjnyif-2"
+    })([ "", " max-width:600px;margin-block-end:", ";&:last-child{margin-block-end:0;}", " ", "" ], g.mixins.reset("flex"), g.variables.spacingLarge, (function(e) {
         var r = e.$labelPosition;
         return r === "top" ? (0, f.css)([ "flex-direction:column;gap:", ";" ], g.variables.spacingXSmall) : (0, 
         f.css)([ "flex-direction:row;gap:", ";" ], g.variables.spacingMedium);
+    }), (function(e) {
+        var r = e.$disabled;
+        return r && (0, f.css)([ "", "{color:", ";}", "{color:", ";}" ], /* sc-sel */ O, g.variables.contentColorDisabled, /* sc-sel */ S, g.variables.contentColorDisabled);
     }));
     // Aligns label to the top for case where labelPosition="left" and StyledControlsAndMessagingWrapper is taller than label.
-        var O = y().div.withConfig({
+        var C = y().div.withConfig({
         displayName: "ControlGroupStyles__StyledLabelWrapper",
-        componentId: "wjnyif-1"
+        componentId: "wjnyif-3"
     })([ "display:inline-flex;align-items:flex-start;gap:", ";flex-shrink:0;" ], g.variables.spacingXSmall);
-    var I = y().label.withConfig({
-        displayName: "ControlGroupStyles__StyledLabel",
-        componentId: "wjnyif-2"
-    })([ "", ";word-wrap:break-word;", ";" ], g.mixins.typography("body", {
-        color: "active"
-    }), (function(e) {
-        var r = e.$disabled;
-        return r && (0, f.css)([ "color:", ";" ], g.variables.contentColorDisabled);
-    }));
     // Vertically centers label & tooltip.
-        var C = y().div.withConfig({
+        var x = y().div.withConfig({
         displayName: "ControlGroupStyles__StyledLabelInnerWrapper",
-        componentId: "wjnyif-3"
-    })([ "display:inline-flex;gap:", ";align-items:center;:has(", ":not(:empty)){min-height:", ";}" ], g.variables.spacingXSmall, /* sc-sel */ I, (0, 
+        componentId: "wjnyif-4"
+    })([ "display:inline-flex;gap:", ";align-items:center;:has(", ":not(:empty)){min-height:", ";}" ], g.variables.spacingXSmall, /* sc-sel */ O, (0, 
     g.pickVariant)("$labelPosition", {
         /* Ensures label is vertically centered with input */
         left: g.variables.inputHeight,
@@ -136,31 +140,24 @@
    */
         top: w
     }));
-    var x = y()(h()).withConfig({
+    var j = y()(h()).withConfig({
         displayName: "ControlGroupStyles__StyledTooltip",
-        componentId: "wjnyif-4"
+        componentId: "wjnyif-5"
     })([ "flex-shrink:0;& button{min-width:", ";min-height:", ";width:", ";height:", ";}" ], w, w, w, w);
-    var j = y().div.withConfig({
+    var E = y().div.withConfig({
         displayName: "ControlGroupStyles__StyledControlsAndMessagingWrapper",
-        componentId: "wjnyif-5"
+        componentId: "wjnyif-6"
     })([ "display:flex;flex-direction:column;gap:", ";min-width:0;", "" ], g.variables.spacingXSmall, (function(e) {
         var r = e.$controlsLayout;
         return r !== "none" && (0, f.css)([ "flex-grow:1;" ]);
     }));
-    var E = y()(b()).withConfig({
+    var P = y()(b()).withConfig({
         displayName: "ControlGroupStyles__StyledControlsWrapper",
-        componentId: "wjnyif-6"
+        componentId: "wjnyif-7"
     })([ "gap:", ";", "" ], g.variables.spacingMedium, (0, g.pickVariant)("$controlsLayout", {
         fillJoin: (0, f.css)([ "gap:0;" ]),
         stack: (0, f.css)([ "flex-direction:column;" ])
     }));
-    var P = y().div.withConfig({
-        displayName: "ControlGroupStyles__StyledHelp",
-        componentId: "wjnyif-7"
-    })([ "", ";", ";", ";" ], g.mixins.reset("block"), g.mixins.typography("smallBody"), (function(e) {
-        var r = e.$disabled;
-        return r && (0, f.css)([ "color:", ";" ], g.variables.contentColorDisabled);
-    }));
     var k = y().span.withConfig({
         displayName: "ControlGroupStyles__StyledAsterisk",
         componentId: "wjnyif-8"
@@ -168,27 +165,27 @@
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
     const _ = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "@splunk/react-icons/ExclamationTriangle"
-    const q = require("@splunk/react-icons/ExclamationTriangle");
-    var D =  e.n(q);
+    const T = require("@splunk/react-icons/ExclamationTriangle");
+    var q =  e.n(T);
     // CONCATENATED MODULE: external "@splunk/themes/mixins"
-    const T = require("@splunk/themes/mixins");
+    const D = require("@splunk/themes/mixins");
     // CONCATENATED MODULE: ./src/ControlGroup/ErrorMessageBarStyles.ts
     var M = y().div.withConfig({
         displayName: "ErrorMessageBarStyles__StyledErrorMessageBarWrapper",
         componentId: "sc-1praezx-0"
     })([ "display:flex;gap:", ";word-break:break-word;border-radius:", ";padding:", ";background-color:", ";" ], g.variables.spacingXSmall, g.variables.borderRadius, g.variables.spacingXSmall, g.variables.notificationColorNegativeWeak);
-    var L = y()(D()).withConfig({
+    var L = y()(q()).withConfig({
         displayName: "ErrorMessageBarStyles__StyledIcon",
         componentId: "sc-1praezx-1"
     })([ "position:relative;fill:", ";" ], g.variables.interactiveColorAccentError);
     var N = y().p.withConfig({
         displayName: "ErrorMessageBarStyles__StyledErrorMessage",
         componentId: "sc-1praezx-2"
-    })([ "", ";", ";" ], g.mixins.reset("block"), (0, T.typography)("smallBody", {
+    })([ "", ";", ";" ], g.mixins.reset("block"), (0, D.typography)("smallBody", {
         color: "active"
     }));
     // CONCATENATED MODULE: ./src/ControlGroup/ErrorMessageBar.tsx
-    function $(e, r) {
+    function B(e, r) {
         if (null == e) return {};
         var t, n, l = G(e, r);
         if (Object.getOwnPropertySymbols) {
@@ -210,30 +207,30 @@
         }
         return t;
     }
-    var B = (0, _._)("Error: ");
-    var A = {
+    var A = (0, _._)("Error: ");
+    var $ = {
         children: o().node.isRequired
     };
     function W(e) {
-        var r = e.children, t = $(e, [ "children" ]);
+        var r = e.children, t = B(e, [ "children" ]);
         
         return n().createElement(M, t,  n().createElement(L, {
             variant: "filled"
-        }),  n().createElement(a(), null, B),  n().createElement(N, null, r));
+        }),  n().createElement(a(), null, A),  n().createElement(N, null, r));
     }
-    W.propTypes = A;
+    W.propTypes = $;
     /* harmony default export */    const F = W;
     // CONCATENATED MODULE: ./src/ControlGroup/ControlGroup.tsx
-    function X(e) {
+    function R(e) {
         "@babel/helpers - typeof";
-        return X = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return R = "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;
-        }, X(e);
+        }, R(e);
     }
-    function R() {
-        return R = Object.assign ? Object.assign.bind() : function(e) {
+    function X() {
+        return X = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var t = arguments[r];
                 for (var n in t) {
@@ -241,7 +238,7 @@
                 }
             }
             return e;
-        }, R.apply(null, arguments);
+        }, X.apply(null, arguments);
     }
     function H(e, r) {
         if (null == e) return {};
@@ -265,7 +262,7 @@
         }
         return t;
     }
-    function z(e, r) {
+    function V(e, r) {
         var t = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var n = Object.getOwnPropertySymbols(e);
@@ -275,18 +272,18 @@
         }
         return t;
     }
-    function K(e) {
+    function z(e) {
         for (var r = 1; r < arguments.length; r++) {
             var t = null != arguments[r] ? arguments[r] : {};
-            r % 2 ? z(Object(t), !0).forEach((function(r) {
-                V(e, r, t[r]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : z(Object(t)).forEach((function(r) {
+            r % 2 ? V(Object(t), !0).forEach((function(r) {
+                K(e, r, t[r]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : V(Object(t)).forEach((function(r) {
                 Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
             }));
         }
         return e;
     }
-    function V(e, r, t) {
+    function K(e, r, t) {
         return (r = U(r)) in e ? Object.defineProperty(e, r, {
             value: t,
             enumerable: !0,
@@ -296,14 +293,14 @@
     }
     function U(e) {
         var r = Q(e, "string");
-        return "symbol" == X(r) ? r : r + "";
+        return "symbol" == R(r) ? r : r + "";
     }
     function Q(e, r) {
-        if ("object" != X(e) || !e) return e;
+        if ("object" != R(e) || !e) return e;
         var t = e[Symbol.toPrimitive];
         if (void 0 !== t) {
             var n = t.call(e, r || "default");
-            if ("object" != X(n)) return n;
+            if ("object" != R(n)) return n;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
         return ("string" === r ? String : Number)(e);
@@ -439,73 +436,84 @@
         return undefined;
     }
     // Configure the Children
-        function de(e, r, n) {
-        var l = e.props, o = l.disabled, i = l.error, a = l.id, s = l.inputId, c = l.style;
-        var u = n.childIds, d = n.controlsLayout, p = n.help, f = n.helpId, y = n.error, v = n.errorId, b = n.label, m = n.labelFor, h = n.labelId, g = n.numChildren, w = n.required, S = n.showErrorText;
-        var O = {
+        function de(e, r, l) {
+        var o = e.props, i = o.disabled, a = o.error, s = o.id, c = o.inputId, u = o.style, d = o.children;
+        var p = l.childIds, f = l.controlsLayout, y = l.help, v = l.helpId, b = l.error, m = l.errorId, h = l.label, g = l.labelFor, w = l.labelId, S = l.numChildren, O = l.required, I = l.showErrorText;
+        var C = {
             key: e.key || r,
-            labelledBy: h
+            labelledBy: w
         };
-        if (d === "fillJoin") {
+        if (f === "fillJoin") {
             if (r > 0) {
-                O.prepend = true;
+                C.prepend = true;
             }
-            if (r < g - 1) {
-                O.append = true;
+            if (r < S - 1) {
+                C.append = true;
             }
-            if (O.prepend || O.append) {
-                O.inline = false;
+            if (C.prepend || C.append) {
+                C.inline = false;
             }
         }
-        if (d === "fill" && g > 1) {
-            O.inline = true;
+        if (f === "fill" && S > 1) {
+            C.inline = true;
         }
-        if (d === "stack") {
-            O.inline = false;
+        if (f === "stack") {
+            C.inline = false;
         }
-        if (p && typeof y === "boolean") {
-            O.describedBy = f;
-        } else if (p && typeof y === "string") {
-            O.describedBy = "".concat(f, " ").concat(v);
-        } else if (!p && typeof y === "string") {
-            O.describedBy = v;
+        if (y && typeof b === "boolean") {
+            C.describedBy = v;
+        } else if (y && typeof b === "string") {
+            C.describedBy = "".concat(v, " ").concat(m);
+        } else if (!y && typeof b === "string") {
+            C.describedBy = m;
         }
-        if (w) {
-            O.required = true;
+        if (O) {
+            C.required = true;
         }
         // TODO: SUI-3402 refactor so that parent component doesn't have to know what it's child components are
                 if (e.type.componentType === "Multiselect") {
-            var I = e;
-            if (!I.props.compact) {
-                O.labelText = b;
+            var x = e;
+            if (!x.props.compact) {
+                C.labelText = h;
             }
         } else {
-            O.labelText = b;
+            C.labelText = h;
         }
-        if (g === 1 && (d === "fillJoin" || d === "fill")) {
+        if (S === 1 && (f === "fillJoin" || f === "fill")) {
             // Some controls like Select do not grow by default, so flexGrow is applied
             // The spread operator is used as css styles are not nested, so there is no need for a deep copy.
-            O.style = c ? K(K({}, c), oe) : oe;
+            C.style = u ? z(z({}, u), oe) : oe;
         }
-        if (!m && e) {
+        if (!g && e) {
             if (ie(e)) {
-                O.inputId = s || ce("input-id", r, u);
+                C.inputId = c || ce("input-id", r, p);
             } else {
-                O.id = a || ce("id", r, u);
+                C.id = s || ce("id", r, p);
             }
         }
-        if (S && i === true) {
-            O["aria-errormessage"] = v;
+        if (I && a === true) {
+            C["aria-errormessage"] = m;
+        }
+        var j = i !== null && i !== void 0 ? i : false;
+        // RadioBar and RadioList need special handling in the case where the parent grouping component is not set to disabled
+        // but all of the children are disabled.
+                var E = e.type.componentType === "RadioBar" || e.type.componentType === "RadioList";
+        if (E && !e.props.disabled) {
+            j = n().Children.toArray(d).every((function(e) {
+                var r;
+                
+                return n().isValidElement(e) && ((r = e.props) === null || r === void 0 ? void 0 : r.disabled);
+            }));
         }
         return {
-            child:  (0, t.cloneElement)(e, O),
-            childDisabled: o !== null && o !== void 0 ? o : false
+            child:  (0, t.cloneElement)(e, C),
+            childDisabled: j
         };
     }
     function pe(e, r) {
         var t = e.length;
         var n = 0;
-        var l = K({
+        var l = z({
             numChildren: t
         }, r);
         var o = e.map((function(e, r) {
@@ -539,7 +547,7 @@
  * attribute. If `inputId` is supported but not set a generated id is used instead. If `inputId` isn't
  * supported `id` is used. The `labelFor` prop may be used to override the `for` attribute.
  */    function ye(e) {
-        var r = e.children, l = e.controlsLayout, o = l === void 0 ? "fill" : l, i = e.error, s = i === void 0 ? false : i, d = e.help, f = e.hideLabel, y = e.label, v = e.labelFor, b = e.labelPosition, m = b === void 0 ? "top" : b, h = e.labelWidth, g = h === void 0 ? fe : h, w = e.required, _ = w === void 0 ? false : w, q = e.tooltip, D = e.tooltipDefaultPlacement, T = H(e, [ "children", "controlsLayout", "error", "help", "hideLabel", "label", "labelFor", "labelPosition", "labelWidth", "required", "tooltip", "tooltipDefaultPlacement" ]);
+        var r = e.children, l = e.controlsLayout, o = l === void 0 ? "fill" : l, i = e.error, s = i === void 0 ? false : i, d = e.help, f = e.hideLabel, y = e.label, v = e.labelFor, b = e.labelPosition, m = b === void 0 ? "top" : b, h = e.labelWidth, g = h === void 0 ? fe : h, w = e.required, _ = w === void 0 ? false : w, T = e.tooltip, q = e.tooltipDefaultPlacement, D = H(e, [ "children", "controlsLayout", "error", "help", "hideLabel", "label", "labelFor", "labelPosition", "labelWidth", "required", "tooltip", "tooltipDefaultPlacement" ]);
         // @docs-props-type ControlGroupPropsBase
                 var M = (0, t.useState)((function() {
             return {
@@ -547,10 +555,10 @@
                 helpId: (0, u.createDOMID)("help"),
                 labelId: (0, u.createDOMID)("label")
             };
-        })), L = Y(M, 1), N = L[0], $ = N.errorId, G = N.helpId, B = N.labelId;
-        /** Child ids need to be the same on each render because of SUI-2817 */        var A = (0, 
-        t.useState)({}), W = Y(A, 2), X = W[0], J = W[1];
-        var z = (0, t.useState)(false), K = Y(z, 2), V = K[0], U = K[1];
+        })), L = Y(M, 1), N = L[0], B = N.errorId, G = N.helpId, A = N.labelId;
+        /** Child ids need to be the same on each render because of SUI-2817 */        var $ = (0, 
+        t.useState)({}), W = Y($, 2), R = W[0], J = W[1];
+        var V = (0, t.useState)(false), z = Y(V, 2), K = z[0], U = z[1];
         var Q = c()(n().Children.count(r));
         var Z = (0, t.useCallback)((function(e) {
             J(e);
@@ -573,20 +581,20 @@
                 J({});
             }
             // If childIds has already been populated, labelFor has a value, or if all children have ids then we don't need to make ids for the children.
-                        if (Object.keys(X).length === 0 && !v && !V) {
+                        if (Object.keys(R).length === 0 && !v && !K) {
                 var e = se(re), t = e.newChildIds, l = e.allChildrenHaveId;
                 J(t);
                 U(l);
             }
-        }), [ V, X, r, v, Q, Z, ee, re ]);
+        }), [ K, R, r, v, Q, Z, ee, re ]);
         var te = (0, t.useMemo)((function() {
             return {
                 labelAttrs: {
                     text: y,
-                    id: B
+                    id: A
                 }
             };
-        }), [ y, B ]);
+        }), [ y, A ]);
         var ne = typeof s === "string";
         var le = ne && s !== "";
         var oe = Number.isFinite(g) ? "".concat(g, "px") : g;
@@ -594,59 +602,59 @@
             width: oe
         } : undefined;
         var ae = pe(re, {
-            childIds: X,
+            childIds: R,
             controlsLayout: o,
             help: d,
             helpId: G,
             error: s,
-            errorId: $,
+            errorId: B,
             label: y,
             labelFor: v,
-            labelId: B,
+            labelId: A,
             required: _,
             showErrorText: le
         }), ce = ae.childrenFormatted, de = ae.controlGroupDisabled;
         var ye = (0, t.useMemo)((function() {
             return v || ue(ce);
         }), [ ce, v ]);
-        var ve =  n().createElement(O, {
+        var ve =  n().createElement(C, {
             style: ie,
             $labelPosition: m
-        },  n().createElement(C, {
+        },  n().createElement(x, {
             $labelPosition: m
-        },  n().createElement(I, {
+        },  n().createElement(O, {
             "data-test": "label",
-            $disabled: de,
-            id: B,
+            id: A,
             htmlFor: ye
         }, _ &&  n().createElement(k, {
             "aria-hidden": "true"
-        }, "*"), y, !f && q &&  n().createElement(a(), null, q)), !f && q &&  n().createElement(x, {
+        }, "*"), y, !f && T &&  n().createElement(a(), null, T)), !f && T &&  n().createElement(j, {
             closeWhen: "notOnClick",
-            content: q,
-            defaultPlacement: D,
+            content: T,
+            defaultPlacement: q,
             "aria-hidden": "true"
         })));
         
-        return n().createElement(S, R({
+        return n().createElement(I, X({
             "data-test": "control-group",
             "data-test-required": _,
+            "data-test-children-disabled": de,
             $labelPosition: m,
+            $disabled: de,
             "aria-invalid": !!s || undefined
-        }, T),  n().createElement(p.Provider, {
+        }, D),  n().createElement(p.Provider, {
             value: te
-        }, f ?  n().createElement(a(), null, ve) : ve,  n().createElement(j, {
+        }, f ?  n().createElement(a(), null, ve) : ve,  n().createElement(E, {
             $controlsLayout: o
-        },  n().createElement(E, {
+        },  n().createElement(P, {
             $controlsLayout: o,
             "data-test": "controls",
             flex: o !== "none"
         }, ce), le &&  n().createElement(F, {
             "data-test": "error",
-            id: $
-        }, s), d &&  n().createElement(P, {
+            id: B
+        }, s), d &&  n().createElement(S, {
             "data-test": "help",
-            $disabled: de,
             id: G
         }, d))));
     }