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

package/ControlGroup.js

@@ -8,27 +8,27 @@
     /******/ /* webpack/runtime/compat get default export */
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
-        /******/ e.n = t => {
-            /******/ var r = t && t.__esModule ? 
-            /******/ () => t["default"]
-            /******/ : () => t
+        /******/ e.n = r => {
+            /******/ var t = r && r.__esModule ? 
+            /******/ () => r["default"]
+            /******/ : () => r
             /******/;
-            e.d(r, {
-                a: r
+            e.d(t, {
+                a: t
             });
-            /******/            return r;
+            /******/            return t;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (t, r) => {
-            /******/ for (var n in r) {
-                /******/ if (e.o(r, n) && !e.o(t, n)) {
-                    /******/ Object.defineProperty(t, n, {
+        /******/ e.d = (r, t) => {
+            /******/ for (var n in t) {
+                /******/ if (e.o(t, n) && !e.o(r, n)) {
+                    /******/ Object.defineProperty(r, n, {
                         enumerable: true,
-                        get: r[n]
+                        get: t[n]
                     });
                     /******/                }
                 /******/            }
@@ -37,7 +37,7 @@
     /******/
     /******/ /* webpack/runtime/hasOwnProperty shorthand */
     /******/    (() => {
-        /******/ e.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t)
+        /******/ e.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
         /******/;
     })();
     /******/
@@ -56,377 +56,466 @@
             /******/        };
         /******/    })();
     /******/
-    /************************************************************************/    var t = {};
+    /************************************************************************/    var r = {};
     // ESM COMPAT FLAG
-        e.r(t);
+        e.r(r);
     // EXPORTS
-        e.d(t, {
-        ControlGroupContext: () => /* reexport */ T,
-        default: () => /* reexport */ ce
+        e.d(r, {
+        ControlGroupContext: () => /* reexport */ p,
+        default: () => /* reexport */ ye
     });
     // CONCATENATED MODULE: external "react"
-    const r = require("react");
-    var n =  e.n(r);
+    const t = require("react");
+    var n =  e.n(t);
     // CONCATENATED MODULE: external "prop-types"
-    const o = require("prop-types");
-    var i =  e.n(o);
-    // CONCATENATED MODULE: external "lodash/find"
-    const l = require("lodash/find");
-    var a =  e.n(l);
-    // CONCATENATED MODULE: external "lodash/isFinite"
-    const s = require("lodash/isFinite");
-    var p =  e.n(s);
-    // CONCATENATED MODULE: external "@splunk/themes"
-    const c = require("@splunk/themes");
+    const l = require("prop-types");
+    var o =  e.n(l);
+    // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
+    const i = require("@splunk/react-ui/ScreenReaderContent");
+    var a =  e.n(i);
+    // CONCATENATED MODULE: external "@splunk/react-ui/usePrevious"
+    const s = require("@splunk/react-ui/usePrevious");
+    var c =  e.n(s);
     // CONCATENATED MODULE: external "@splunk/ui-utils/id"
     const u = require("@splunk/ui-utils/id");
-    // CONCATENATED MODULE: external "@splunk/react-ui/Box"
-    const f = require("@splunk/react-ui/Box");
-    var d =  e.n(f);
-    // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-    const y = require("@splunk/react-ui/ScreenReaderContent");
-    var b =  e.n(y);
+    // CONCATENATED MODULE: ./src/ControlGroup/ControlGroupContext.tsx
+    /**
+ * A React context used to inform subcomponets of ControlGroup of parent component values.
+ * The context interface is `ControlGroupContextValue`.
+ * Defaults to `'{}'`.
+ * @public
+ */
+    var d =  n().createContext({});
+    /* harmony default export */    const p = d;
     // CONCATENATED MODULE: external "styled-components"
-    const h = require("styled-components");
-    var m =  e.n(h);
+    const f = require("styled-components");
+    var y =  e.n(f);
+    // CONCATENATED MODULE: external "@splunk/react-ui/Box"
+    const v = require("@splunk/react-ui/Box");
+    var b =  e.n(v);
     // CONCATENATED MODULE: external "@splunk/react-ui/Tooltip"
-    const v = require("@splunk/react-ui/Tooltip");
-    var g =  e.n(v);
+    const m = require("@splunk/react-ui/Tooltip");
+    var h =  e.n(m);
+    // CONCATENATED MODULE: external "@splunk/themes"
+    const g = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/ControlGroup/ControlGroupStyles.ts
-    var O = m()(d()).withConfig({
+    var w = y()(b()).withConfig({
         displayName: "ControlGroupStyles__StyledBox",
         componentId: "wjnyif-0"
-    })([ "", " ", " max-width:600px;margin-bottom:", ";", " color:", ";", "" ], c.mixins.reset("block"), c.mixins.clearfix(), (0, 
-    c.pick)({
-        enterprise: c.variables.spacingMedium,
-        prisma: {
-            comfortable: c.variables.spacingLarge,
-            compact: c.variables.spacingMedium
-        }
-    }), (0, c.pick)({
-        prisma: {
-            comfortable: (0, h.css)([ "&:first-child{margin-top:", ";}&:last-child{margin-bottom:", ";}" ], c.variables.spacingMedium, c.variables.spacingMedium),
-            compact: (0, h.css)([ "&:first-child{margin-top:", ";}&:last-child{margin-bottom:", ";}" ], c.variables.spacingSmall, c.variables.spacingSmall)
-        }
-    }), (0, c.pick)({
-        enterprise: c.variables.textColor,
-        prisma: c.variables.contentColorMuted
-    }), (function(e) {
-        var t = e.$error;
-        return t && (0, h.css)([ "color:", ";" ], (0, c.pick)({
-            enterprise: {
-                light: c.variables.errorColorD10,
-                dark: c.variables.errorColorL20
-            },
-            prisma: c.variables.accentColorNegative
-        }));
+    })([ "", " 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);
     }));
-    var S = m()(d()).withConfig({
-        displayName: "ControlGroupStyles__StyledControlsStackBox",
-        componentId: "wjnyif-1"
-    })([ "flex-direction:column;" ]);
-    var w = m().div.withConfig({
+    // Aligns label to the top for case where labelPosition="left" and StyledControlsAndMessagingWrapper is taller than label.
+        var S = y().div.withConfig({
         displayName: "ControlGroupStyles__StyledLabelWrapper",
+        componentId: "wjnyif-1"
+    })([ "display:inline-flex;align-items:flex-start;gap:", ";flex-shrink:0;" ], g.variables.spacingXSmall);
+    // Vertically centers label & tooltip.
+        var O = y().div.withConfig({
+        displayName: "ControlGroupStyles__StyledLabelInnerWrapper",
         componentId: "wjnyif-2"
-    })([ "display:inline-flex;align-items:center;", " ", "" ], (0, c.pick)({
-        enterprise: (0, h.css)([ "justify-content:flex-end;" ])
-    }), (function(e) {
-        var t = e.$labelPosition;
-        return t === "top" ? (0, h.css)([ "", "" ], (0, c.pick)({
-            prisma: (0, h.css)([ "height:24px;padding-bottom:", ";" ], c.variables.spacingXSmall)
-        })) : (0, h.css)([ "", "" ], (0, c.pick)({
-            prisma: (0, h.css)([ "min-height:", ";" ], c.variables.inputHeight)
-        }));
+    })([ "display:inline-flex;gap:", ";align-items:center;", "" ], g.variables.spacingXSmall, (function(e) {
+        var r = e.$labelPosition;
+        return r === "left" && (0, f.css)([ "min-height:", ";" ], g.variables.inputHeight);
     }));
-    var I = m()(w).withConfig({
-        displayName: "ControlGroupStyles__StyledLabelWrapperLeft",
-        componentId: "wjnyif-3"
-    })([ "float:left;" ]);
-    var x = m().label.withConfig({
+    var I = y().label.withConfig({
         displayName: "ControlGroupStyles__StyledLabel",
-        componentId: "wjnyif-4"
-    })([ "padding:", ";word-wrap:break-word;color:inherit;text-align:", ";" ], (0, c.pick)({
-        enterprise: {
-            comfortable: "6px 0",
-            compact: "4px 0"
-        }
-    }), (0, c.pick)({
-        enterprise: "right",
-        prisma: "left"
+        componentId: "wjnyif-3"
+    })([ "", ";flex-shrink: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);
     }));
-    var C = m()(g()).withConfig({
+    var C = y()(h()).withConfig({
         displayName: "ControlGroupStyles__StyledTooltip",
+        componentId: "wjnyif-4"
+    })([ "& button{", "}" ], (0, g.pick)({
+        prisma: (0, f.css)([ "position:relative;top:-2px;padding:0;svg{width:16px;height:16px;}" ])
+    }));
+    var x = y().div.withConfig({
+        displayName: "ControlGroupStyles__StyledControlsAndMessagingWrapper",
         componentId: "wjnyif-5"
-    })([ "", "" ], (function(e) {
-        var t = e.$labelPosition;
-        return t === "top" && (0, h.css)([ "button{", "}" ], (0, c.pick)({
-            prisma: (0, h.css)([ "svg{width:20px;height:20px;}padding:4px;" ])
-        }));
+    })([ "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 j = m().div.withConfig({
-        displayName: "ControlGroupStyles__StyledHelp",
+    var j = y()(b()).withConfig({
+        displayName: "ControlGroupStyles__StyledControlsWrapper",
         componentId: "wjnyif-6"
-    })([ "", ";font-size:", ";color:", ";margin-top:", ";", "" ], c.mixins.reset("block"), c.variables.fontSizeSmall, c.variables.contentColorMuted, (0, 
-    c.pick)({
-        enterprise: "2px",
-        prisma: "4px"
-    }), (function(e) {
-        var t = e.$error;
-        return t && (0, h.css)([ "color:inherit;" ]);
+    })([ "gap:", ";", "" ], g.variables.spacingMedium, (0, g.pickVariant)("$controlsLayout", {
+        fillJoin: (0, f.css)([ "gap:0;" ]),
+        stack: (0, f.css)([ "flex-direction:column;" ])
     }));
-    var k = m().div.withConfig({
-        displayName: "ControlGroupStyles__StyledErrorText",
+    var E = y().div.withConfig({
+        displayName: "ControlGroupStyles__StyledHelp",
         componentId: "wjnyif-7"
-    })([ "", ";font-size:", ";[aria-invalid] > &{color:inherit;}", "" ], c.mixins.reset("block"), c.variables.fontSizeSmall, (function(e) {
-        var t = e.$help;
-        return !t && (0, h.css)([ "margin-top:", ";" ], (0, c.pick)({
-            enterprise: "2px",
-            prisma: "4px"
-        }));
+    })([ "", ";", ";", ";" ], g.mixins.reset("block"), g.mixins.typography("smallBody"), (function(e) {
+        var r = e.$disabled;
+        return r && (0, f.css)([ "color:", ";" ], g.variables.contentColorDisabled);
     }));
-    var P = m().span.withConfig({
+    var P = y().span.withConfig({
         displayName: "ControlGroupStyles__StyledAsterisk",
         componentId: "wjnyif-8"
-    })([ "color:inherit;margin-right:2px;" ]);
-    // CONCATENATED MODULE: ./src/ControlGroup/ControlGroupContext.tsx
-    /**
- * A React context used to inform subcomponets of ControlGroup of parent component values.
- * The context interface is `ControlGroupContextValue`.
- * Defaults to `'{}'`.
- * @public
- */
-    var _ =  n().createContext({});
-    /* harmony default export */    const T = _;
+    })([ "color:", ";margin-right:2px;" ], g.variables.contentColorNegative);
+    // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
+    const k = require("@splunk/ui-utils/i18n");
+    // CONCATENATED MODULE: external "@splunk/react-icons/ExclamationTriangle"
+    const _ = require("@splunk/react-icons/ExclamationTriangle");
+    var q =  e.n(_);
+    // CONCATENATED MODULE: external "@splunk/themes/mixins"
+    const D = require("@splunk/themes/mixins");
+    // CONCATENATED MODULE: ./src/ControlGroup/ErrorMessageBarStyles.ts
+    var T = 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.contentBackgroundColorNegativeWeak);
+    var M = y()(q()).withConfig({
+        displayName: "ErrorMessageBarStyles__StyledIcon",
+        componentId: "sc-1praezx-1"
+    })([ "position:relative;fill:", ";" ], g.variables.interactiveColorAccentError);
+    var L = y().p.withConfig({
+        displayName: "ErrorMessageBarStyles__StyledErrorMessage",
+        componentId: "sc-1praezx-2"
+    })([ "", ";", ";" ], g.mixins.reset("block"), (0, D.typography)("smallBody", {
+        color: "active"
+    }));
+    // CONCATENATED MODULE: ./src/ControlGroup/ErrorMessageBar.tsx
+    function N(e, r) {
+        if (null == e) return {};
+        var t, n, l = $(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]);
+            }
+        }
+        return l;
+    }
+    function $(e, r) {
+        if (null == e) return {};
+        var t = {};
+        for (var n in e) {
+            if ({}.hasOwnProperty.call(e, n)) {
+                if (r.includes(n)) continue;
+                t[n] = e[n];
+            }
+        }
+        return t;
+    }
+    var B = (0, k._)("Error: ");
+    var G = {
+        children: o().node.isRequired
+    };
+    function A(e) {
+        var r = e.children, t = N(e, [ "children" ]);
+        
+        return n().createElement(T, t,  n().createElement(M, {
+            variant: "filled"
+        }),  n().createElement(a(), null, B),  n().createElement(L, null, r));
+    }
+    A.propTypes = G;
+    /* harmony default export */    const W = A;
     // CONCATENATED MODULE: ./src/ControlGroup/ControlGroup.tsx
-    function L(e) {
+    function F(e) {
         "@babel/helpers - typeof";
-        return L = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return F = "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;
-        }, L(e);
+        }, F(e);
     }
-    function E() {
-        return E = Object.assign ? Object.assign.bind() : function(e) {
-            for (var t = 1; t < arguments.length; t++) {
-                var r = arguments[t];
-                for (var n in r) {
-                    ({}).hasOwnProperty.call(r, n) && (e[n] = r[n]);
+    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) {
+                    ({}).hasOwnProperty.call(t, n) && (e[n] = t[n]);
                 }
             }
             return e;
-        }, E.apply(null, arguments);
-    }
-    function D(e, t) {
-        var r = Object.keys(e);
-        if (Object.getOwnPropertySymbols) {
-            var n = Object.getOwnPropertySymbols(e);
-            t && (n = n.filter((function(t) {
-                return Object.getOwnPropertyDescriptor(e, t).enumerable;
-            }))), r.push.apply(r, n);
-        }
-        return r;
+        }, X.apply(null, arguments);
     }
-    function q(e) {
-        for (var t = 1; t < arguments.length; t++) {
-            var r = null != arguments[t] ? arguments[t] : {};
-            t % 2 ? D(Object(r), !0).forEach((function(t) {
-                Z(e, t, r[t]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : D(Object(r)).forEach((function(t) {
-                Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t));
-            }));
-        }
-        return e;
-    }
-    function M(e, t) {
+    function R(e, r) {
         if (null == e) return {};
-        var r, n, o = B(e, t);
+        var t, n, l = H(e, r);
         if (Object.getOwnPropertySymbols) {
-            var i = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < i.length; n++) {
-                r = i[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (o[r] = e[r]);
+            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]);
             }
         }
-        return o;
+        return l;
     }
-    function B(e, t) {
+    function H(e, r) {
         if (null == e) return {};
-        var r = {};
+        var t = {};
         for (var n in e) {
             if ({}.hasOwnProperty.call(e, n)) {
-                if (t.includes(n)) continue;
-                r[n] = e[n];
+                if (r.includes(n)) continue;
+                t[n] = e[n];
             }
         }
-        return r;
+        return t;
+    }
+    function J(e, r) {
+        var t = Object.keys(e);
+        if (Object.getOwnPropertySymbols) {
+            var n = Object.getOwnPropertySymbols(e);
+            r && (n = n.filter((function(r) {
+                return Object.getOwnPropertyDescriptor(e, r).enumerable;
+            }))), t.push.apply(t, n);
+        }
+        return t;
+    }
+    function z(e) {
+        for (var r = 1; r < arguments.length; r++) {
+            var t = null != arguments[r] ? arguments[r] : {};
+            r % 2 ? J(Object(t), !0).forEach((function(r) {
+                K(e, r, t[r]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : J(Object(t)).forEach((function(r) {
+                Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+            }));
+        }
+        return e;
+    }
+    function K(e, r, t) {
+        return (r = V(r)) in e ? Object.defineProperty(e, r, {
+            value: t,
+            enumerable: !0,
+            configurable: !0,
+            writable: !0
+        }) : e[r] = t, e;
+    }
+    function V(e) {
+        var r = U(e, "string");
+        return "symbol" == F(r) ? r : r + "";
+    }
+    function U(e, r) {
+        if ("object" != F(e) || !e) return e;
+        var t = e[Symbol.toPrimitive];
+        if (void 0 !== t) {
+            var n = t.call(e, r || "default");
+            if ("object" != F(n)) return n;
+            throw new TypeError("@@toPrimitive must return a primitive value.");
+        }
+        return ("string" === r ? String : Number)(e);
     }
-    function V(e, t) {
-        return W(e) || N(e, t) || A(e, t) || $();
+    function Q(e, r) {
+        return te(e) || re(e, r) || Z(e, r) || Y();
     }
-    function $() {
+    function Y() {
         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 A(e, t) {
+    function Z(e, r) {
         if (e) {
-            if ("string" == typeof e) return G(e, t);
-            var r = {}.toString.call(e).slice(8, -1);
-            return "Object" === r && e.constructor && (r = e.constructor.name), "Map" === r || "Set" === r ? Array.from(e) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? G(e, t) : void 0;
+            if ("string" == typeof e) return ee(e, r);
+            var t = {}.toString.call(e).slice(8, -1);
+            return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? ee(e, r) : void 0;
         }
     }
-    function G(e, t) {
-        (null == t || t > e.length) && (t = e.length);
-        for (var r = 0, n = Array(t); r < t; r++) {
-            n[r] = e[r];
+    function ee(e, r) {
+        (null == r || r > e.length) && (r = e.length);
+        for (var t = 0, n = Array(r); t < r; t++) {
+            n[t] = e[t];
         }
         return n;
     }
-    function N(e, t) {
-        var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
-        if (null != r) {
-            var n, o, i, l, a = [], s = !0, p = !1;
+    function re(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;
             try {
-                if (i = (r = r.call(e)).next, 0 === t) {
-                    if (Object(r) !== r) return;
+                if (o = (t = t.call(e)).next, 0 === r) {
+                    if (Object(t) !== t) return;
                     s = !1;
-                } else for (;!(s = (n = i.call(r)).done) && (a.push(n.value), a.length !== t); s = !0) {
+                } else for (;!(s = (n = o.call(t)).done) && (a.push(n.value), a.length !== r); s = !0) {
                 }
             } catch (e) {
-                p = !0, o = e;
+                c = !0, l = e;
             } finally {
                 try {
-                    if (!s && null != r["return"] && (l = r["return"](), Object(l) !== l)) return;
+                    if (!s && null != t["return"] && (i = t["return"](), Object(i) !== i)) return;
                 } finally {
-                    if (p) throw o;
+                    if (c) throw l;
                 }
             }
             return a;
         }
     }
-    function W(e) {
+    function te(e) {
         if (Array.isArray(e)) return e;
     }
-    function R(e, t) {
-        if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function");
-    }
-    function z(e, t) {
-        for (var r = 0; r < t.length; r++) {
-            var n = t[r];
-            n.enumerable = n.enumerable || !1, n.configurable = !0, "value" in n && (n.writable = !0), 
-            Object.defineProperty(e, ee(n.key), n);
-        }
+    // props ControlGroup passes to configure its children's props
+    // props ControlGroup may access and/or override on children
+        var ne = {
+        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" ])
+    };
+    // Style cloned onto child elements when fill behavior set.
+        var le = {
+        flexGrow: 1
+    };
+    function oe(e) {
+        return e.type && e.type.propTypes && Object.prototype.hasOwnProperty.call(e.type.propTypes, "inputId");
     }
-    function F(e, t, r) {
-        return t && z(e.prototype, t), r && z(e, r), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), e;
+    function ie(e, r) {
+        var t = "".concat(e, "-").concat(r);
+        var n = (0, u.createDOMID)(e);
+        return {
+            childKey: t,
+            value: n
+        };
     }
-    function J(e, t) {
-        if ("function" != typeof t && null !== t) throw new TypeError("Super expression must either be null or a function");
-        e.prototype = Object.create(t && t.prototype, {
-            constructor: {
-                value: e,
-                writable: !0,
-                configurable: !0
+    function ae(e) {
+        var r = {};
+        var t = e.length;
+        var n = 0;
+        e.forEach((function(e, t) {
+            if (oe(e) && e.props.inputId == null) {
+                var l = ie("input-id", t), o = l.childKey, i = l.value;
+                r[o] = i;
+            } else if (e.props.id == null) {
+                var a = ie("id", t), s = a.childKey, c = a.value;
+                r[s] = c;
+            } else {
+                // child already has an inputId or id, so we don't need to make a childId for it
+                n += 1;
             }
-        }), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), t && H(e, t);
-    }
-    function H(e, t) {
-        return H = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(e, t) {
-            return e.__proto__ = t, e;
-        }, H(e, t);
-    }
-    function U(e) {
-        var t = Q();
-        return function() {
-            var r, n = Y(e);
-            if (t) {
-                var o = Y(this).constructor;
-                r = Reflect.construct(n, arguments, o);
-            } else r = n.apply(this, arguments);
-            return X(this, r);
+        }));
+        return {
+            newChildIds: r,
+            allChildrenHaveId: n === t
         };
     }
-    function X(e, t) {
-        if (t && ("object" == L(t) || "function" == typeof t)) return t;
-        if (void 0 !== t) throw new TypeError("Derived constructors may only return object or undefined");
-        return K(e);
-    }
-    function K(e) {
-        if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-        return e;
-    }
-    function Q() {
-        try {
-            var e = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], (function() {})));
-        } catch (e) {}
-        return (Q = function t() {
-            return !!e;
-        })();
-    }
-    function Y(e) {
-        return Y = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
-            return e.__proto__ || Object.getPrototypeOf(e);
-        }, Y(e);
-    }
-    function Z(e, t, r) {
-        return (t = ee(t)) in e ? Object.defineProperty(e, t, {
-            value: r,
-            enumerable: !0,
-            configurable: !0,
-            writable: !0
-        }) : e[t] = r, e;
+    function se(e, r, t) {
+        var n = "".concat(e, "-").concat(r);
+        var l = t[n];
+        if (!l || !l.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;
     }
-    function ee(e) {
-        var t = te(e, "string");
-        return "symbol" == L(t) ? t : t + "";
+    function ce(e) {
+        if (e.length === 0) {
+            return undefined;
+        }
+        var r = Q(e, 1), t = r[0];
+        var n = e.find((function(e) {
+            return e.type && e.type.componentType === "Text";
+        }));
+        var l = oe(t);
+        var o = t.props, i = o.id, a = o.inputId;
+ // see function doc block for details
+                if (e.length === 1 && (t === null || t === void 0 ? void 0 : t.props)) {
+            return l ? a : i;
+        }
+        if (n === null || n === void 0 ? void 0 : n.props) {
+            return n.props.inputId;
+        }
+        if (t.props) {
+            return l ? a : i;
+        }
+        return undefined;
     }
-    function te(e, t) {
-        if ("object" != L(e) || !e) return e;
-        var r = e[Symbol.toPrimitive];
-        if (void 0 !== r) {
-            var n = r.call(e, t || "default");
-            if ("object" != L(n)) return n;
-            throw new TypeError("@@toPrimitive must return a primitive value.");
+    // Configure the Children
+        function ue(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 = {
+            key: e.key || r,
+            labelledBy: h
+        };
+        if (d === "fillJoin") {
+            if (r > 0) {
+                O.prepend = true;
+            }
+            if (r < g - 1) {
+                O.append = true;
+            }
+            if (O.prepend || O.append) {
+                O.inline = false;
+            }
         }
-        return ("string" === t ? String : Number)(e);
+        if (d === "fill" && g > 1) {
+            O.inline = true;
+        }
+        if (d === "stack") {
+            O.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 (w) {
+            O.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;
+            }
+        } else {
+            O.labelText = b;
+        }
+        if (g === 1 && (d === "fillJoin" || d === "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 ? z(z({}, c), le) : le;
+        }
+        if (!m && e) {
+            if (oe(e)) {
+                O.inputId = s || se("input-id", r, u);
+            } else {
+                O.id = a || se("id", r, u);
+            }
+        }
+        if (S && i === true) {
+            O["aria-errormessage"] = v;
+        }
+        return {
+            child:  (0, t.cloneElement)(e, O),
+            childDisabled: o !== null && o !== void 0 ? o : false
+        };
     }
-    // props ControlGroup may access and/or override on children
-        var re = {
-        children: i().node,
-        controlsLayout: i().oneOf([ "fill", "fillJoin", "none", "stack" ]),
-        elementRef: i().oneOfType([ i().func, i().object ]),
-        error: i().oneOfType([ i().bool, i().string ]),
-        help: i().node,
-        hideLabel: i().bool,
-        label: i().string.isRequired,
-        labelFor: i().string,
-        labelPosition: i().oneOf([ "left", "top" ]),
-        labelWidth: i().oneOfType([ i().number, i().string ]),
-        required: i().bool,
-        size: i().oneOf([ "small", "medium" ]),
-        /** @private */
-        splunkTheme: i().object,
-        tooltip: i().node,
-        tooltipDefaultPlacement: i().oneOf([ "above", "below", "left", "right", "theme" ])
-    };
-    var ne = {
-        controlsLayout: "fill",
-        error: false,
-        hideLabel: false,
-        labelPosition: "left",
-        labelWidth: 120,
-        required: false
-    };
-    // Style cloned onto child elements when fill behavior set.
-        var oe = {
-        flexGrow: 1
-    };
-    // Margin bootom values cloned onto child elements when the stacking behavior is needed.
-        var ie = "0";
-    var le = "16px";
-    var ae = "12px";
+    function de(e, r) {
+        var t = e.length;
+        var n = 0;
+        var l = z({
+            numChildren: t
+        }, r);
+        var o = e.map((function(e, r) {
+            var t = ue(e, r, l), o = t.child, i = t.childDisabled;
+            if (i) {
+                n += 1;
+            }
+            return o;
+        }));
+        return {
+            childrenFormatted: o,
+            controlGroupDisabled: n === t
+        };
+    }
+    var pe = 120;
     /**
  * `ControlGroup` places a label and optional help text around one or more controls. The `ControlGroup`
  * will automatically add aria attributes to associate the controls with the labels and help text to
@@ -444,238 +533,120 @@
  * If the linked child supports an `inputId` prop and it's set, its value is used for the label's `for`
  * 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.
- */    var se =  function(e) {
-        J(o, e);
-        var t = U(o);
+ */    function fe(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 ? pe : h, k = e.required, _ = k === void 0 ? false : k, q = e.tooltip, D = e.tooltipDefaultPlacement, T = R(e, [ "children", "controlsLayout", "error", "help", "hideLabel", "label", "labelFor", "labelPosition", "labelWidth", "required", "tooltip", "tooltipDefaultPlacement" ]);
         // @docs-props-type ControlGroupPropsBase
-                function o(e) {
-            var r;
-            R(this, o);
-            r = t.call(this, e);
-            Z(K(r), "errorId", void 0);
-            Z(K(r), "helpId", void 0);
-            Z(K(r), "labelId", void 0);
-            Z(K(r), "contextValue", void 0);
-            Z(K(r), "childIds", void 0);
-            Z(K(r), "stackLayoutChildStyle", void 0);
-            Z(K(r), "getChildID", (function(e, t) {
-                var n = "".concat(e, "-").concat(t);
-                var o = r.childIds[n];
-                if (!o || !o.length) {
-                    o = (0, u.createDOMID)(e);
-                    r.childIds[n] = o;
-                }
-                return o;
-            }));
-            Z(K(r), "getStackLayoutChildStyle", (function(e, t) {
-                if (e) {
-                    if (t) {
-                        r.stackLayoutChildStyle.marginBottom = ae;
-                    }
-                    r.stackLayoutChildStyle.marginBottom = le;
-                } else {
-                    r.stackLayoutChildStyle.marginBottom = ie;
-                }
-                return r.stackLayoutChildStyle;
-            }));
-            Z(K(r), "hasInputId", (function(e) {
-                return e.type && e.type.propTypes && Object.prototype.hasOwnProperty.call(e.type.propTypes, "inputId");
-            }));
-            Z(K(r), "getLinkedId", (function(e) {
-                if (e.length === 0) {
-                    return undefined;
-                }
-                var t = V(e, 1), n = t[0];
-                var o = a()(e, (function(e) {
-                    return e.type && e.type.componentType === "Text";
-                }));
-                var i = r.hasInputId(n);
-                // see class doc block for details
-                                if (e.length === 1 && n && n.props) {
-                    return i ? n.props.inputId : n.props.id;
-                }
-                if (o && o.props) {
-                    return o.props.inputId;
-                }
-                if (n.props) {
-                    return i ? n.props.inputId : n.props.id;
-                }
-                return undefined;
-            }));
-            r.errorId = (0, u.createDOMID)("error");
-            r.helpId = (0, u.createDOMID)("help");
-            r.labelId = (0, u.createDOMID)("label");
-            r.contextValue = r.createContextValue();
-            r.childIds = {};
-            r.stackLayoutChildStyle = {};
+                var M = (0, t.useState)((function() {
+            return {
+                errorId: (0, u.createDOMID)("error"),
+                helpId: (0, u.createDOMID)("help"),
+                labelId: (0, u.createDOMID)("label")
+            };
+        })), L = Q(M, 1), N = L[0], $ = N.errorId, B = N.helpId, G = N.labelId;
+        /** Child ids need to be the same on each render because of SUI-2817 */        var A = (0, 
+        t.useState)({}), F = Q(A, 2), H = F[0], J = F[1];
+        var z = (0, t.useState)(false), K = Q(z, 2), V = K[0], U = K[1];
+        var Y = c()(n().Children.count(r));
+        var Z = (0, t.useCallback)((function(e) {
+            J(e);
+        }), []);
+        var ee = (0, t.useCallback)((function(e) {
+            U(e);
+        }), []);
+        var re = (0, t.useMemo)((function() {
+            return t.Children.toArray(r).filter(t.isValidElement);
+        }), [ r ]);
+        (0, t.useEffect)((function() {
             if (false) {}
+        }), [ s, d, m ]);
+        (0, t.useEffect)((function() {
             if (false) {}
-            return r;
-        }
-        F(o, [ {
-            key: "shouldComponentUpdate",
-            value: function e(t) {
-                if (n().Children.count(t.children) !== n().Children.count(this.props.children)) {
-                    this.childIds = {};
-                }
-                return true;
+        }), [ m, g ]);
+        (0, t.useEffect)((function() {
+            // If it's not the first render and the number of child elements has changed, reset childIds
+            if (Y != null && n().Children.count(r) !== Y) {
+                J({});
             }
-        }, {
-            key: "createContextValue",
-            value: function e() {
-                return {
-                    labelAttrs: {
-                        text: this.props.label,
-                        id: this.labelId
-                    }
-                };
+            // 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(H).length === 0 && !v && !V) {
+                var e = ae(re), t = e.newChildIds, l = e.allChildrenHaveId;
+                J(t);
+                U(l);
             }
-        }, {
-            key: "getContextValue",
-            value: function e() {
-                var t, r;
-                if (this.props.label !== ((t = this.contextValue.labelAttrs) === null || t === void 0 ? void 0 : t.text) || this.labelId !== ((r = this.contextValue.labelAttrs) === null || r === void 0 ? void 0 : r.id)) {
-                    this.contextValue = this.createContextValue();
+        }), [ V, H, r, v, Y, Z, ee, re ]);
+        var te = (0, t.useMemo)((function() {
+            return {
+                labelAttrs: {
+                    text: y,
+                    id: G
                 }
-                return this.contextValue;
-            }
-        }, {
-            key: "render",
-            value: function e() {
-                var t = this;
-                var o = this.props, i = o.children, l = o.controlsLayout, a = o.error, s = o.help, c = o.hideLabel, u = o.label, f = o.labelFor, y = o.labelPosition, h = o.labelWidth, m = o.required, v = o.splunkTheme, g = o.tooltip, _ = o.tooltipDefaultPlacement, L = M(o, [ "children", "controlsLayout", "error", "help", "hideLabel", "label", "labelFor", "labelPosition", "labelWidth", "required", "splunkTheme", "tooltip", "tooltipDefaultPlacement" ]);
-                var D = v.isPrisma, B = v.isCompact;
-                var V = r.Children.toArray(i).filter(r.isValidElement);
-                var $ = V.length;
-                var A = typeof a === "string";
-                var G = A && a !== "";
-                var N = A || a === true;
-                // Clean the Children
-                                var W = function e(n, o) {
-                    var i = {
-                        key: n.key || o
-                    };
-                    if (l === "fillJoin") {
-                        if (o > 0) {
-                            i.prepend = true;
-                        }
-                        if (o < $ - 1) {
-                            i.append = true;
-                        }
-                        if (i.prepend || i.append) {
-                            i.inline = false;
-                        }
-                    }
-                    if (l === "fill" && $ > 1) {
-                        i.inline = true;
-                    }
-                    if (l === "stack") {
-                        i.inline = false;
-                        if (o < $ - 1) {
-                            // The spread operator is used as css styles are not nested, so there is no need for a deep copy.
-                            var a = t.getStackLayoutChildStyle(D, B);
-                            i.style = n.props.style ? q(q({}, n.props.style), a) : a;
-                        }
-                    }
-                    i.labelledBy = t.labelId;
-                    if (t.props.help && typeof t.props.error === "boolean") {
-                        i.describedBy = t.helpId;
-                    } else if (t.props.help && typeof t.props.error === "string") {
-                        i.describedBy = "".concat(t.helpId, " ").concat(t.errorId);
-                    } else if (!t.props.help && typeof t.props.error === "string") {
-                        i.describedBy = t.errorId;
-                    }
-                    if (t.props.required) {
-                        i.required = true;
-                    }
-                    // TODO: SUI-3402 refactor so that parent component doesn't have to know what it's child components are
-                                        if (n.type.componentType === "Multiselect") {
-                        var s = n;
-                        if (s.props.compact === false) {
-                            i.labelText = u;
-                        }
-                    } else {
-                        i.labelText = u;
-                    }
-                    if ($ === 1 && (l === "fillJoin" || l === "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.
-                        i.style = n.props.style ? q(q({}, n.props.style), oe) : oe;
-                    }
-                    if (!f && n) {
-                        if (t.hasInputId(n)) {
-                            i.inputId = n.props.inputId || t.getChildID("input-id", o);
-                        } else {
-                            i.id = n.props.id || t.getChildID("id", o);
-                        }
-                    }
-                    if (G && n.props.error === true) {
-                        i["aria-errormessage"] = t.errorId;
-                    }
-                    
-                    return (0, r.cloneElement)(n, i);
-                };
-                var R = V.map(W);
-                var z = this.getLinkedId(R);
-                var F = y === "left" ? {
-                    width: h
-                } : undefined;
-                var J = p()(h) ? "".concat(h, "px") : h;
-                var H = D ? "16px" : "20px";
-                var U = y === "left" ? {
-                    marginLeft: "calc(".concat(J, " + ").concat(H, ")")
-                } : undefined;
-                var X = l === "stack" ? S : d();
-                var K = y === "left" ? I : w;
-                var Q =  n().createElement(K, {
-                    style: F,
-                    $labelPosition: y
-                },  n().createElement(x, {
-                    "data-test": "label",
-                    id: this.labelId,
-                    htmlFor: f || z,
-                    $tooltip: !!g
-                }, m &&  n().createElement(P, {
-                    "aria-hidden": "true"
-                }, "*"), u, !D && !c && g &&  n().createElement("span", null, " "), !c && g &&  n().createElement(b(), null, g)), !c && g &&  n().createElement(C, {
-                    $labelPosition: y,
-                    closeWhen: "notOnClick",
-                    content: g,
-                    defaultPlacement: _,
-                    "aria-hidden": "true"
-                }));
-                
-                return n().createElement(O, E({
-                    "data-test": "control-group",
-                    "data-test-required": m,
-                    $error: N,
-                    "aria-invalid": !!a || undefined
-                }, L),  n().createElement(T.Provider, {
-                    value: this.getContextValue()
-                }, c ?  n().createElement(b(), null, Q) : Q,  n().createElement(X, {
-                    "data-test": "controls",
-                    flex: l !== "none",
-                    style: U
-                }, R), s &&  n().createElement(j, {
-                    "data-test": "help",
-                    id: this.helpId,
-                    style: U,
-                    $error: N && !G
-                }, s), G &&  n().createElement(k, {
-                    "data-test": "error",
-                    id: this.errorId,
-                    style: U,
-                    $help: !!s
-                }, a)));
-            }
-        } ]);
-        return o;
-    }(r.Component);
-    Z(se, "propTypes", re);
-    Z(se, "defaultProps", ne);
-    var pe = (0, c.withSplunkTheme)(se);
-    pe.propTypes = se.propTypes;
-    /* harmony default export */    const ce = pe;
+            };
+        }), [ y, G ]);
+        var ne = typeof s === "string";
+        var le = ne && s !== "";
+        var oe = Number.isFinite(g) ? "".concat(g, "px") : g;
+        var ie = m === "left" ? {
+            width: oe
+        } : undefined;
+        var se = de(re, {
+            childIds: H,
+            controlsLayout: o,
+            help: d,
+            helpId: B,
+            error: s,
+            errorId: $,
+            label: y,
+            labelFor: v,
+            labelId: G,
+            required: _,
+            showErrorText: le
+        }), ue = se.childrenFormatted, fe = se.controlGroupDisabled;
+        var ye = (0, t.useMemo)((function() {
+            return v || ce(ue);
+        }), [ ue, v ]);
+        var ve =  n().createElement(S, {
+            style: ie,
+            $labelPosition: m
+        },  n().createElement(O, {
+            $labelPosition: m
+        },  n().createElement(I, {
+            "data-test": "label",
+            $disabled: fe,
+            id: G,
+            htmlFor: ye
+        }, _ &&  n().createElement(P, {
+            "aria-hidden": "true"
+        }, "*"), y, !f && q &&  n().createElement(a(), null, q)), !f && q &&  n().createElement(C, {
+            closeWhen: "notOnClick",
+            content: q,
+            defaultPlacement: D,
+            "aria-hidden": "true"
+        })));
+        
+        return n().createElement(w, X({
+            "data-test": "control-group",
+            "data-test-required": _,
+            $labelPosition: m,
+            "aria-invalid": !!s || undefined
+        }, T),  n().createElement(p.Provider, {
+            value: te
+        }, f ?  n().createElement(a(), null, ve) : ve,  n().createElement(x, {
+            $controlsLayout: o
+        },  n().createElement(j, {
+            $controlsLayout: o,
+            "data-test": "controls",
+            flex: o !== "none"
+        }, ue), le &&  n().createElement(W, {
+            "data-test": "error",
+            id: $
+        }, s), d &&  n().createElement(E, {
+            "data-test": "help",
+            $disabled: fe,
+            id: B
+        }, d))));
+    }
+    fe.propTypes = ne;
+    /* harmony default export */    const ye = fe;
     // CONCATENATED MODULE: ./src/ControlGroup/index.ts
-    module.exports = t;
+    module.exports = r;
     /******/})();