@splunk/react-ui 5.0.0-beta.4 → 5.0.0-beta.5

package/Text.js

@@ -134,15 +134,15 @@
     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()(b()).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) {
+    })([ "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 */ D, (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) {
@@ -153,15 +153,15 @@
         return r && (0, A.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) {
+        return r && (0, A.css)([ "border-color:", ";box-shadow:inset 0 1px 2px rgba(0,0,0,0.025);background-color:", ";cursor:not-allowed;" ], k.variables.interactiveColorBorderDisabled, k.variables.interactiveColorBackgroundDisabled);
+    }), $, $, (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, A.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);
@@ -172,7 +172,7 @@
         return (0, A.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, A.css)([ "color:", ";" ], k.variables.contentColorDisabled);
     }), (0, I.buttonMixin)({
         borderColor: k.variables.transparent,
         borderColorHover: k.variables.transparent,
@@ -391,7 +391,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, 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, $ = 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" ]);
         // @docs-props-type TextPropsBase
                 var ye = (0, t.useContext)(m.ControlGroupContext);
         var ge = g()({
@@ -446,10 +446,10 @@
             }
             W === null || W === void 0 ? void 0 : W(e);
         }), [ W ]);
-        var De = (0, t.useCallback)((function(e) {
+        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,7 +479,7 @@
                 
                 return n().createElement(R, J({
                     "data-test": "end-adornment",
-                    onClick: De
+                    onClick: $e
                 }, r), E);
             }
             if (re && !w) {
@@ -500,7 +500,7 @@
             var i = a ? (0, h._)("Clear ".concat(a, " text field")) : (0, h._)("Clear text field");
             if (!!Te && 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 +509,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, Te, 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 ]);
@@ -553,14 +553,14 @@
             autoCorrect: c,
             autoFocus: p,
             className: q,
-            id: D,
+            id: $,
             maxLength: V,
             name: K,
             onChange: Be,
             onKeyDown: _e,
             onSelect: Re,
             onClick: Pe,
-            onFocus: $e,
+            onFocus: De,
             onBlur: Ae,
             placeholder: te,
             ref: Ne,
@@ -582,6 +582,7 @@
             $isTimeInput: We,
             "data-test": "text",
             "data-test-value": Ue,
+            "data-test-disabled": w === "dimmed" && "dimmed" || w && "disabled" || undefined,
             elementRef: j,
             flex: true,
             inline: P,