@splunk/react-ui 5.0.0 → 5.2.0

package/ControlGroup.js

@@ -68,8 +68,8 @@
     const t = require("react");
     var n =  e.n(t);
     // CONCATENATED MODULE: external "prop-types"
-    const l = require("prop-types");
-    var o =  e.n(l);
+    const o = require("prop-types");
+    var l =  e.n(o);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
     const i = require("@splunk/react-ui/ScreenReaderContent");
     var a =  e.n(i);
@@ -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 O = 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 S = 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 */ S, g.variables.contentColorDisabled, /* sc-sel */ O, 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 x = 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({
         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 */ S, (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,72 +165,72 @@
     // 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);
+        var t, n, o = G(e, r);
         if (Object.getOwnPropertySymbols) {
-            var o = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < o.length; n++) {
-                t = o[n], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (l[t] = e[t]);
+            var l = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < l.length; n++) {
+                t = l[n], -1 === r.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (o[t] = e[t]);
             }
         }
-        return l;
+        return o;
     }
     function G(e, r) {
         if (null == e) return {};
         var t = {};
         for (var n in e) {
             if ({}.hasOwnProperty.call(e, n)) {
-                if (r.includes(n)) continue;
+                if (-1 !== r.indexOf(n)) continue;
                 t[n] = e[n];
             }
         }
         return t;
     }
-    var B = (0, _._)("Error: ");
-    var A = {
-        children: o().node.isRequired
+    var A = (0, _._)("Error: ");
+    var $ = {
+        children: l().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,31 +238,31 @@
                 }
             }
             return e;
-        }, R.apply(null, arguments);
+        }, X.apply(null, arguments);
     }
     function H(e, r) {
         if (null == e) return {};
-        var t, n, l = J(e, r);
+        var t, n, o = J(e, r);
         if (Object.getOwnPropertySymbols) {
-            var o = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < o.length; n++) {
-                t = o[n], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (l[t] = e[t]);
+            var l = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < l.length; n++) {
+                t = l[n], -1 === r.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (o[t] = e[t]);
             }
         }
-        return l;
+        return o;
     }
     function J(e, r) {
         if (null == e) return {};
         var t = {};
         for (var n in e) {
             if ({}.hasOwnProperty.call(e, n)) {
-                if (r.includes(n)) continue;
+                if (-1 !== r.indexOf(n)) continue;
                 t[n] = e[n];
             }
         }
         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);
@@ -331,20 +328,20 @@
     function te(e, r) {
         var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != t) {
-            var n, l, o, i, a = [], s = !0, c = !1;
+            var n, o, l, i, a = [], s = !0, c = !1;
             try {
-                if (o = (t = t.call(e)).next, 0 === r) {
+                if (l = (t = t.call(e)).next, 0 === r) {
                     if (Object(t) !== t) return;
                     s = !1;
-                } else for (;!(s = (n = o.call(t)).done) && (a.push(n.value), a.length !== r); s = !0) {
+                } else for (;!(s = (n = l.call(t)).done) && (a.push(n.value), a.length !== r); s = !0) {
                 }
             } catch (e) {
-                c = !0, l = e;
+                c = !0, o = e;
             } finally {
                 try {
                     if (!s && null != t["return"] && (i = t["return"](), Object(i) !== i)) return;
                 } finally {
-                    if (c) throw l;
+                    if (c) throw o;
                 }
             }
             return a;
@@ -355,23 +352,23 @@
     }
     // props ControlGroup passes to configure its children's props
     // props ControlGroup may access and/or override on children
-        var le = {
-        children: o().node,
-        controlsLayout: o().oneOf([ "fill", "fillJoin", "none", "stack" ]),
-        elementRef: o().oneOfType([ o().func, o().object ]),
-        error: o().oneOfType([ o().bool, o().string ]),
-        help: o().node,
-        hideLabel: o().bool,
-        label: o().string.isRequired,
-        labelFor: o().string,
-        labelPosition: o().oneOf([ "left", "top" ]),
-        labelWidth: o().oneOfType([ o().number, o().string ]),
-        required: o().bool,
-        tooltip: o().node,
-        tooltipDefaultPlacement: o().oneOf([ "above", "below", "left", "right" ])
+        var oe = {
+        children: l().node,
+        controlsLayout: l().oneOf([ "fill", "fillJoin", "none", "stack" ]),
+        elementRef: l().oneOfType([ l().func, l().object ]),
+        error: l().oneOfType([ l().bool, l().string ]),
+        help: l().node,
+        hideLabel: l().bool,
+        label: l().string.isRequired,
+        labelFor: l().string,
+        labelPosition: l().oneOf([ "left", "top" ]),
+        labelWidth: l().oneOfType([ l().number, l().string ]),
+        required: l().bool,
+        tooltip: l().node,
+        tooltipDefaultPlacement: l().oneOf([ "above", "below", "left", "right" ])
     };
     // Style cloned onto child elements when fill behavior set.
-        var oe = {
+        var le = {
         flexGrow: 1
     };
     function ie(e) {
@@ -391,8 +388,8 @@
         var n = 0;
         e.forEach((function(e, t) {
             if (ie(e) && e.props.inputId == null) {
-                var l = ae("input-id", t), o = l.childKey, i = l.value;
-                r[o] = i;
+                var o = ae("input-id", t), l = o.childKey, i = o.value;
+                r[l] = i;
             } else if (e.props.id == null) {
                 var a = ae("id", t), s = a.childKey, c = a.value;
                 r[s] = c;
@@ -408,13 +405,13 @@
     }
     function ce(e, r, t) {
         var n = "".concat(e, "-").concat(r);
-        var l = t[n];
-        if (!l || !l.length) {
+        var o = t[n];
+        if (!o || !o.length) {
             // By this point we should have already generated ids for each child and this code shouldn't get executed
             // But leaving this as a fallback
             return undefined;
         }
-        return l;
+        return o;
     }
     function ue(e) {
         if (e.length === 0) {
@@ -424,99 +421,110 @@
         var n = e.find((function(e) {
             return e.type && e.type.componentType === "Text";
         }));
-        var l = ie(t);
-        var o = t.props, i = o.id, a = o.inputId;
+        var o = ie(t);
+        var l = t.props, i = l.id, a = l.inputId;
  // see function doc block for details
                 if (e.length === 1 && (t === null || t === void 0 ? void 0 : t.props)) {
-            return l ? a : i;
+            return o ? a : i;
         }
         if (n === null || n === void 0 ? void 0 : n.props) {
             return n.props.inputId;
         }
         if (t.props) {
-            return l ? a : i;
+            return o ? a : i;
         }
         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, o) {
+        var l = e.props, i = l.disabled, a = l.error, s = l.id, c = l.inputId, u = l.style, d = l.children;
+        var p = o.childIds, f = o.controlsLayout, y = o.help, v = o.helpId, b = o.error, m = o.errorId, h = o.label, g = o.labelFor, w = o.labelId, O = o.numChildren, S = o.required, I = o.showErrorText;
+        var x = {
             key: e.key || r,
-            labelledBy: h
+            labelledBy: w
         };
-        if (d === "fillJoin") {
+        if (f === "fillJoin") {
             if (r > 0) {
-                O.prepend = true;
+                x.prepend = true;
             }
-            if (r < g - 1) {
-                O.append = true;
+            if (r < O - 1) {
+                x.append = true;
             }
-            if (O.prepend || O.append) {
-                O.inline = false;
+            if (x.prepend || x.append) {
+                x.inline = false;
             }
         }
-        if (d === "fill" && g > 1) {
-            O.inline = true;
+        if (f === "fill" && O > 1) {
+            x.inline = true;
         }
-        if (d === "stack") {
-            O.inline = false;
+        if (f === "stack") {
+            x.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") {
+            x.describedBy = v;
+        } else if (y && typeof b === "string") {
+            x.describedBy = "".concat(v, " ").concat(m);
+        } else if (!y && typeof b === "string") {
+            x.describedBy = m;
         }
-        if (w) {
-            O.required = true;
+        if (S) {
+            x.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 C = e;
+            if (!C.props.compact) {
+                x.labelText = h;
             }
         } else {
-            O.labelText = b;
+            x.labelText = h;
         }
-        if (g === 1 && (d === "fillJoin" || d === "fill")) {
+        if (O === 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;
+            x.style = u ? z(z({}, u), le) : le;
         }
-        if (!m && e) {
+        if (!g && e) {
             if (ie(e)) {
-                O.inputId = s || ce("input-id", r, u);
+                x.inputId = c || ce("input-id", r, p);
             } else {
-                O.id = a || ce("id", r, u);
+                x.id = s || ce("id", r, p);
             }
         }
-        if (S && i === true) {
-            O["aria-errormessage"] = v;
+        if (I && a === true) {
+            x["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, x),
+            childDisabled: j
         };
     }
     function pe(e, r) {
         var t = e.length;
         var n = 0;
-        var l = K({
+        var o = z({
             numChildren: t
         }, r);
-        var o = e.map((function(e, r) {
-            var t = de(e, r, l), o = t.child, i = t.childDisabled;
+        var l = e.map((function(e, r) {
+            var t = de(e, r, o), l = t.child, i = t.childDisabled;
             if (i === true) {
                 n += 1;
             }
-            return o;
+            return l;
         }));
         return {
-            childrenFormatted: o,
+            childrenFormatted: l,
             controlGroupDisabled: n === t
         };
     }
@@ -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, o = e.controlsLayout, l = o === void 0 ? "fill" : o, 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,84 +581,84 @@
                 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) {
-                var e = se(re), t = e.newChildIds, l = e.allChildrenHaveId;
+                        if (Object.keys(R).length === 0 && !v && !K) {
+                var e = se(re), t = e.newChildIds, o = e.allChildrenHaveId;
                 J(t);
-                U(l);
+                U(o);
             }
-        }), [ 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;
+        var oe = ne && s !== "";
+        var le = Number.isFinite(g) ? "".concat(g, "px") : g;
         var ie = m === "left" ? {
-            width: oe
+            width: le
         } : undefined;
         var ae = pe(re, {
-            childIds: X,
-            controlsLayout: o,
+            childIds: R,
+            controlsLayout: l,
             help: d,
             helpId: G,
             error: s,
-            errorId: $,
+            errorId: B,
             label: y,
             labelFor: v,
-            labelId: B,
+            labelId: A,
             required: _,
-            showErrorText: le
+            showErrorText: oe
         }), 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(x, {
             style: ie,
             $labelPosition: m
         },  n().createElement(C, {
             $labelPosition: m
-        },  n().createElement(I, {
+        },  n().createElement(S, {
             "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, {
-            $controlsLayout: o
-        },  n().createElement(E, {
-            $controlsLayout: o,
+        }, f ?  n().createElement(a(), null, ve) : ve,  n().createElement(E, {
+            $controlsLayout: l
+        },  n().createElement(P, {
+            $controlsLayout: l,
             "data-test": "controls",
-            flex: o !== "none"
-        }, ce), le &&  n().createElement(F, {
+            flex: l !== "none"
+        }, ce), oe &&  n().createElement(F, {
             "data-test": "error",
-            id: $
-        }, s), d &&  n().createElement(P, {
+            id: B
+        }, s), d &&  n().createElement(O, {
             "data-test": "help",
-            $disabled: de,
             id: G
         }, d))));
     }
-    ye.propTypes = le;
+    ye.propTypes = oe;
     /* harmony default export */    const ve = ye;
     // CONCATENATED MODULE: ./src/ControlGroup/index.ts
     module.exports = r;