@splunk/react-ui 5.0.0-beta.4 → 5.0.0-rc.1

package/Text.js

@@ -80,10 +80,10 @@
     var d =  e.n(c);
     // CONCATENATED MODULE: external "@splunk/react-ui/Button"
     const v = require("@splunk/react-ui/Button");
-    var b =  e.n(v);
+    var p =  e.n(v);
     // CONCATENATED MODULE: external "@splunk/react-icons/Cross"
-    const p = require("@splunk/react-icons/Cross");
-    var f =  e.n(p);
+    const b = require("@splunk/react-icons/Cross");
+    var f =  e.n(b);
     // CONCATENATED MODULE: external "@splunk/react-ui/ControlGroup"
     const m = require("@splunk/react-ui/ControlGroup");
     // CONCATENATED MODULE: external "@splunk/react-ui/useControlled"
@@ -124,44 +124,43 @@
             height: i
         });
     }
-    /* harmony default export */    const T = E;
+    /* harmony default export */    const A = E;
     // CONCATENATED MODULE: external "styled-components"
-    const A = require("styled-components");
-    var B =  e.n(A);
+    const T = require("styled-components");
+    var B =  e.n(T);
     // CONCATENATED MODULE: external "@splunk/react-ui/ButtonSimple"
     const I = require("@splunk/react-ui/ButtonSimple");
     // CONCATENATED MODULE: external "@splunk/react-ui/Box"
     const P = require("@splunk/react-ui/Box");
     var q =  e.n(P);
     // CONCATENATED MODULE: ./src/Text/TextStyles.ts
-    var D = "230px";
-    var $ = B()(b()).withConfig({
+    var $ = "230px";
+    var D = B()(p()).withConfig({
         displayName: "TextStyles__StyledClearButton",
         componentId: "eg7n6t-0"
     })([ "display:none;visibility:hidden;" ]);
     var _ = B()(q()).withConfig({
         displayName: "TextStyles__StyledBox",
         componentId: "eg7n6t-1"
-    })([ "display:flex;justify-content:space-between;flex-grow:1;flex-shrink:1;gap:", ";padding-inline:", ";min-height:", ";overflow:hidden;border:", " solid ", ";border-radius:", ";box-sizing:border-box;background-color:", ";box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);align-items:center;cursor:text;&:hover:not([disabled]){border-color:", ";background-color:", "}&:not([disabled]):has(> input:focus){box-shadow:", ";}&:not([disabled]){", "{visibility:visible;display:block;}}", " ", " ", " ", " &[data-inline]{width:", ";flex-basis:", ";}", "" ], k.variables.spacingXSmall, k.variables.spacingSmall, k.variables.inputHeight, k.variables.inputBorderWidth, k.variables.interactiveColorBorder, k.variables.borderRadius, k.variables.interactiveColorBackground, k.variables.interactiveColorBorderHover, k.variables.interactiveColorOverlayHover, k.variables.focusShadow, /* sc-sel */ $, (function(e) {
-        var r = e.$error;
-        return r && (0, A.css)([ "border-color:", ";&:hover:not([disabled]){border-color:", ";}" ], k.variables.interactiveColorAccentError, k.variables.interactiveColorAccentErrorStrong);
-    }), (function(e) {
+    })([ "display:flex;justify-content:space-between;flex-grow:1;flex-shrink:1;gap:", ";padding-inline:", ";min-height:", ";overflow:hidden;border:", " solid ", ";border-radius:", ";box-sizing:border-box;background-color:", ";box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);align-items:center;cursor:text;&:has(> input:focus){box-shadow:", ";}", " ", " ", " &[data-inline]{width:", ";flex-basis:", ";}", "" ], k.variables.spacingXSmall, k.variables.spacingSmall, k.variables.inputHeight, k.variables.inputBorderWidth, k.variables.interactiveColorBorder, k.variables.borderRadius, k.variables.interactiveColorBackground, k.variables.focusShadow, (function(e) {
         var r = e.$append;
-        return r && (0, A.css)([ "margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0;border-right:none;" ]);
+        return r && (0, T.css)([ "margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0;border-right:none;" ]);
     }), (function(e) {
         var r = e.$prepend;
-        return r && (0, A.css)([ "border-top-left-radius:0;border-bottom-left-radius:0;" ]);
+        return r && (0, T.css)([ "border-top-left-radius:0;border-bottom-left-radius:0;" ]);
     }), (function(e) {
-        var r = e.$disabled;
-        return r && (0, A.css)([ "border-color:", ";box-shadow:inset 0 1px 2px rgba(0,0,0,0.025);background-color:", ";" ], k.variables.interactiveColorBorderDisabled, k.variables.interactiveColorBackgroundDisabled);
-    }), D, D, (function(e) {
+        var r = e.$disabled, t = e.$error;
+        return r ? (0, T.css)([ "border-color:", ";box-shadow:inset 0 1px 2px rgba(0,0,0,0.025);background-color:", ";cursor:not-allowed;" ], t ? k.variables.interactiveColorAccentErrorWeak : k.variables.interactiveColorBorderDisabled, k.variables.interactiveColorBackgroundDisabled) : (0, 
+        T.css)([ "", " &:hover{border-color:", ";background-color:", ";}", "{visibility:visible;display:block;}" ], t && (0, 
+        T.css)([ "border-color:", ";" ], k.variables.interactiveColorAccentError), t ? k.variables.interactiveColorAccentErrorStrong : k.variables.interactiveColorBorderHover, k.variables.interactiveColorOverlayHover, /* sc-sel */ D);
+    }), $, $, (function(e) {
         var r = e.$isTimeInput;
-        return r && (0, A.css)([ "@media screen and (min--moz-device-pixel-ratio:0){", "{display:none;}}" ], /* sc-sel */ $);
+        return r && (0, T.css)([ "@media screen and (min--moz-device-pixel-ratio:0){", "{display:none;}}" ], /* sc-sel */ D);
     }));
     /* Some of these need greater specificity than input[type=text] */    var N = B().input.withConfig({
         displayName: "TextStyles__StyledInput",
         componentId: "eg7n6t-2"
-    })([ "", ";", " width:100%;outline-style:none;border:0;background:transparent;flex-grow:1;font-size:inherit;&[type='time']{&::-webkit-calendar-picker-indicator{display:none;}}&::placeholder{color:", ";opacity:1;}&[disabled],&[aria-disabled='true']{cursor:not-allowed;color:", ";&::placeholder{color:", ";}}" ], k.mixins.reset("inline-flex"), k.mixins.typography("body", {
+    })([ "", ";", " width:100%;outline-style:none;border:0;background:transparent;flex-grow:1;font-size:inherit;&[type='time']{&::-webkit-calendar-picker-indicator{display:none;}}&::placeholder{color:", ";opacity:1;}&[disabled],&[aria-disabled='true']{color:", ";&::placeholder{color:", ";}}" ], k.mixins.reset("inline-flex"), k.mixins.typography("body", {
         lineHeight: "single",
         color: "active"
     }), k.variables.contentColorMuted, k.variables.contentColorDisabled, k.variables.contentColorDisabled);
@@ -169,10 +168,10 @@
         displayName: "TextStyles__StyledAdornment",
         componentId: "eg7n6t-3"
     })([ "display:inline-flex;align-items:center;justify-content:center;pointer-events:none;z-index:1;color:", ";", " ", ";& > button{", "}& > button:focus,& > a:focus{box-shadow:", ";}" ], k.variables.contentColorMuted, (function() {
-        return (0, A.css)([ "height:calc(", " - 2px);" ], k.variables.inputHeight);
+        return (0, T.css)([ "height:calc(", " - 2px);" ], k.variables.inputHeight);
     }), (function(e) {
         var r = e.$disabled;
-        return r && (0, A.css)([ "cursor:not-allowed;color:", ";" ], k.variables.contentColorDisabled);
+        return r && (0, T.css)([ "color:", ";" ], k.variables.contentColorDisabled);
     }), (0, I.buttonMixin)({
         borderColor: k.variables.transparent,
         borderColorHover: k.variables.transparent,
@@ -235,22 +234,22 @@
         for (var r = 1; r < arguments.length; r++) {
             var t = null != arguments[r] ? arguments[r] : {};
             r % 2 ? L(Object(t), !0).forEach((function(r) {
-                U(e, r, t[r]);
+                W(e, r, t[r]);
             })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : L(Object(t)).forEach((function(r) {
                 Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
             }));
         }
         return e;
     }
-    function U(e, r, t) {
-        return (r = W(r)) in e ? Object.defineProperty(e, r, {
+    function W(e, r, t) {
+        return (r = U(r)) in e ? Object.defineProperty(e, r, {
             value: t,
             enumerable: !0,
             configurable: !0,
             writable: !0
         }) : e[r] = t, e;
     }
-    function W(e) {
+    function U(e) {
         var r = X(e, "string");
         return "symbol" == H(r) ? r : r + "";
     }
@@ -391,7 +390,7 @@
     });
     /** Note: Text places role and aria props onto the input. All other props are placed on the wrapper. */    function le(e) {
         var r;
-        var o = e.append, a = o === void 0 ? false : o, i = e.autoCapitalize, u = e.autoComplete, c = e.autoCorrect, v = e.autoFocus, p = v === void 0 ? false : v, f = e.canClear, y = f === void 0 ? false : f, C = e.children, x = e.defaultValue, k = e.disabled, w = k === void 0 ? false : k, O = e.describedBy, j = e.elementRef, E = e.endAdornment, A = e.error, B = A === void 0 ? false : A, I = e.inline, P = I === void 0 ? false : I, q = e.inputClassName, D = e.inputId, H = e.inputRef, z = e.labelledBy, V = e.maxLength, K = e.name, L = e.onBlur, U = e.onChange, W = e.onClick, X = e.onFocus, Y = e.onKeyDown, Z = e.onSelect, ee = e.passwordVisibilityToggle, re = ee === void 0 ? false : ee, te = e.placeholder, oe = e.prepend, ae = oe === void 0 ? false : oe, le = e.required, ue = e.spellCheck, se = e.startAdornment, ce = e.tabIndex, de = ce === void 0 ? 0 : ce, ve = e.title, be = e.type, pe = be === void 0 ? "text" : be, fe = e.value, me = ne(e, [ "append", "autoCapitalize", "autoComplete", "autoCorrect", "autoFocus", "canClear", "children", "defaultValue", "disabled", "describedBy", "elementRef", "endAdornment", "error", "inline", "inputClassName", "inputId", "inputRef", "labelledBy", "maxLength", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onSelect", "passwordVisibilityToggle", "placeholder", "prepend", "required", "spellCheck", "startAdornment", "tabIndex", "title", "type", "value" ]);
+        var o = e.append, a = o === void 0 ? false : o, i = e.autoCapitalize, u = e.autoComplete, c = e.autoCorrect, v = e.autoFocus, b = v === void 0 ? false : v, f = e.canClear, y = f === void 0 ? false : f, C = e.children, x = e.defaultValue, k = e.disabled, w = k === void 0 ? false : k, O = e.describedBy, j = e.elementRef, E = e.endAdornment, T = e.error, B = T === void 0 ? false : T, I = e.inline, P = I === void 0 ? false : I, q = e.inputClassName, $ = e.inputId, H = e.inputRef, z = e.labelledBy, V = e.maxLength, K = e.name, L = e.onBlur, W = e.onChange, U = e.onClick, X = e.onFocus, Y = e.onKeyDown, Z = e.onSelect, ee = e.passwordVisibilityToggle, re = ee === void 0 ? false : ee, te = e.placeholder, oe = e.prepend, ae = oe === void 0 ? false : oe, le = e.required, ue = e.spellCheck, se = e.startAdornment, ce = e.tabIndex, de = ce === void 0 ? 0 : ce, ve = e.title, pe = e.type, be = pe === void 0 ? "text" : pe, fe = e.value, me = ne(e, [ "append", "autoCapitalize", "autoComplete", "autoCorrect", "autoFocus", "canClear", "children", "defaultValue", "disabled", "describedBy", "elementRef", "endAdornment", "error", "inline", "inputClassName", "inputId", "inputRef", "labelledBy", "maxLength", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onSelect", "passwordVisibilityToggle", "placeholder", "prepend", "required", "spellCheck", "startAdornment", "tabIndex", "title", "type", "value" ]);
         // @docs-props-type TextPropsBase
                 var ye = (0, t.useContext)(m.ControlGroupContext);
         var ge = g()({
@@ -402,10 +401,10 @@
         var he = (0, t.useRef)(null);
         var Ce = (0, t.useState)(x || ""), xe = Q(Ce, 2), ke = xe[0], we = xe[1];
         var Se = (0, t.useState)(true), Oe = Q(Se, 2), je = Oe[0], Ee = Oe[1];
-        var Te = (0, t.useMemo)((function() {
+        var Ae = (0, t.useMemo)((function() {
             return ge ? fe : ke;
         }), [ ge, fe, ke ]);
-        var Ae = (0, t.useCallback)((function(e) {
+        var Te = (0, t.useCallback)((function(e) {
             var r = e.target.value;
             L === null || L === void 0 ? void 0 : L(e, {
                 value: r,
@@ -417,11 +416,11 @@
             if (!ge) {
                 we(r);
             }
-            U === null || U === void 0 ? void 0 : U(e, {
+            W === null || W === void 0 ? void 0 : W(e, {
                 value: r,
                 name: K
             });
-        }), [ ge, K, U ]);
+        }), [ ge, K, W ]);
         var Ie = (0, t.useCallback)((function(e) {
             var r;
             e.preventDefault();
@@ -430,26 +429,26 @@
                 we(t);
             }
             he === null || he === void 0 ? void 0 : (r = he.current) === null || r === void 0 ? void 0 : r.focus();
-            U === null || U === void 0 ? void 0 : U(e, {
+            W === null || W === void 0 ? void 0 : W(e, {
                 value: t,
                 name: K
             });
-        }), [ ge, K, U ]);
+        }), [ ge, K, W ]);
         var Pe = (0, t.useCallback)((function(e) {
-            W === null || W === void 0 ? void 0 : W(e);
+            U === null || U === void 0 ? void 0 : U(e);
             e.stopPropagation();
-        }), [ W ]);
+        }), [ U ]);
         var qe = (0, t.useCallback)((function(e) {
             if (document.activeElement !== he.current) {
                 var r;
                 (r = he.current) === null || r === void 0 ? void 0 : r.focus();
             }
-            W === null || W === void 0 ? void 0 : W(e);
-        }), [ W ]);
-        var De = (0, t.useCallback)((function(e) {
+            U === null || U === void 0 ? void 0 : U(e);
+        }), [ U ]);
+        var $e = (0, t.useCallback)((function(e) {
             e.stopPropagation();
         }), []);
-        var $e = (0, t.useCallback)((function(e) {
+        var De = (0, t.useCallback)((function(e) {
             var r = e.target.value;
             X === null || X === void 0 ? void 0 : X(e, {
                 value: r,
@@ -479,14 +478,14 @@
                 
                 return n().createElement(R, J({
                     "data-test": "end-adornment",
-                    onClick: De
+                    onClick: $e
                 }, r), E);
             }
             if (re && !w) {
-                var t = je ?  n().createElement(T, null) :  n().createElement(S, null);
+                var t = je ?  n().createElement(A, null) :  n().createElement(S, null);
                 var o = je ? (0, h._)("Show password") : (0, h._)("Hide password");
                 
-                return n().createElement(R, r,  n().createElement(b(), {
+                return n().createElement(R, r,  n().createElement(p(), {
                     appearance: "secondary",
                     "data-test": "password-toggle",
                     inline: false,
@@ -498,9 +497,9 @@
             }
             var a = (e = ye.labelAttrs) === null || e === void 0 ? void 0 : e.text;
             var i = a ? (0, h._)("Clear ".concat(a, " text field")) : (0, h._)("Clear text field");
-            if (!!Te && y) {
+            if (!!Ae && y) {
                 
-                return n().createElement(R, r, !w &&  n().createElement($, {
+                return n().createElement(R, r, !w &&  n().createElement(D, {
                     "data-test": "clear",
                     appearance: "secondary",
                     "aria-label": i,
@@ -509,21 +508,21 @@
                 }));
             }
             return undefined;
-        }), [ y, (r = ye.labelAttrs) === null || r === void 0 ? void 0 : r.text, w, Te, E, De, Ie, Fe, je, re ]);
+        }), [ y, (r = ye.labelAttrs) === null || r === void 0 ? void 0 : r.text, w, Ae, E, $e, Ie, Fe, je, re ]);
         var Me = (0, t.useCallback)((function() {
             var e = {
-                disabled: !!w,
+                $disabled: !!w,
                 $position: "start"
             };
             if (se) {
                 
                 return n().createElement(R, J({
                     "data-test": "start-adornment",
-                    onClick: De
+                    onClick: $e
                 }, e), se);
             }
             return undefined;
-        }), [ w, De, se ]);
+        }), [ w, $e, se ]);
         (0, t.useEffect)((function() {
             if (false) {}
         }), [ y, re ]);
@@ -545,23 +544,23 @@
             $prepend: ae || undefined
         }, s()(me, [ "inputRef", "onBlur", "onClick", "onChange", "onFocus", "onKeyDown", "onSelect" ].concat(M(l()(ze)))));
         var Ke = je ? "password" : "text";
-        var Le = re ? Ke : pe;
+        var Le = re ? Ke : be;
         var Ge = G(G({}, ze), {}, {
             "data-test": "textbox",
             autoCapitalize: i,
             autoComplete: u,
             autoCorrect: c,
-            autoFocus: p,
+            autoFocus: b,
             className: q,
-            id: D,
+            id: $,
             maxLength: V,
             name: K,
             onChange: Be,
             onKeyDown: _e,
             onSelect: Re,
             onClick: Pe,
-            onFocus: $e,
-            onBlur: Ae,
+            onFocus: De,
+            onBlur: Te,
             placeholder: te,
             ref: Ne,
             required: le,
@@ -569,19 +568,20 @@
             title: ve,
             tabIndex: de,
             type: Le,
-            value: Te,
+            value: Ae,
             $error: B
         });
         // Do not render value in DOM when type is password, or passwordVisibilityToggle is enabled
-                var Ue = pe === "password" || re ? undefined : Te;
+                var We = be === "password" || re ? undefined : Ae;
         // Firefox hack (SUI-2716). Remove when fixed: https://bugzilla.mozilla.org/show_bug.cgi?id=1427173
-                var We = pe === "time";
+                var Ue = be === "time";
         
         return n().createElement(_, J({
             tabIndex: -1,
-            $isTimeInput: We,
+            $isTimeInput: Ue,
             "data-test": "text",
-            "data-test-value": Ue,
+            "data-test-value": We,
+            "data-test-disabled": w === "dimmed" && "dimmed" || w && "disabled" || undefined,
             elementRef: j,
             flex: true,
             inline: P,
@@ -594,7 +594,7 @@
             placeholder: te,
             readOnly: true,
             type: Le,
-            value: Te
+            value: Ae
         }, ze)) :  n().createElement(N, J({}, Ge, {
             onClick: Pe
         })), C, He());