@splunk/react-ui 4.33.0 → 4.35.0

package/Text.js

@@ -88,10 +88,10 @@
     var v =  e.n(h);
     // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Close"
     const b = require("@splunk/react-icons/enterprise/Close");
-    var y =  e.n(b);
+    var C =  e.n(b);
     // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Search"
-    const C = require("@splunk/react-icons/enterprise/Search");
-    var g =  e.n(C);
+    const y = require("@splunk/react-icons/enterprise/Search");
+    var g =  e.n(y);
     // CONCATENATED MODULE: external "@splunk/react-icons/Magnifier"
     const x = require("@splunk/react-icons/Magnifier");
     var w =  e.n(x);
@@ -290,11 +290,7 @@
     var G = N()(V()).withConfig({
         displayName: "TextStyles__StyledBox",
         componentId: "eg7n6t-2"
-    })([ "display:flex;justify-content:space-between;flex-grow:1;flex-shrink:1;position:relative;&[data-inline]{width:230px;flex-basis:230px;[data-inline] + &{margin-left:", ";}}&:focus-within:not([disabled]){", "{", "}", "{visibility:visible;display:block;}}", "" ], (0, 
-    A.pick)({
-        enterprise: A.variables.spacingHalf,
-        prisma: A.variables.spacingSmall
-    }), 
+    })([ "display:flex;justify-content:space-between;flex-grow:1;flex-shrink:1;position:relative;&[data-inline]{width:230px;flex-basis:230px;[data-inline] + &{margin-left:", ";}}&:focus-within:not([disabled]){", "{", "}", "{visibility:visible;display:block;}}", "" ], A.variables.spacingSmall, 
     /* sc-sel */
     K, (0, A.pick)({
         enterprise: (0, D.css)([ "display:none;" ])
@@ -309,7 +305,7 @@
     var U = N().span.withConfig({
         displayName: "TextStyles__StyledInputWrapper",
         componentId: "eg7n6t-3"
-    })([ "", ";flex-grow:1;min-height:", ";position:relative;overflow:hidden;border:1px solid ", ";border-radius:", ";box-sizing:border-box;background-color:", ";box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);padding:", ";align-items:center;", " ", " &:hover:not([disabled]){border-color:", ";}&:focus-within:not([disabled]){box-shadow:", ";color:", ";}", " ", " ", " ", "" ], A.mixins.reset("inline-flex"), A.variables.inputHeight, A.variables.interactiveColorBorder, A.variables.borderRadius, (0, 
+    })([ "", ";cursor:text;flex-grow:1;min-height:", ";position:relative;overflow:hidden;border:1px solid ", ";border-radius:", ";box-sizing:border-box;background-color:", ";box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);padding:", ";align-items:center;", " ", " &:hover:not([disabled]){border-color:", ";}&:focus-within:not([disabled]){box-shadow:", ";color:", ";}", " ", " ", " ", "" ], A.mixins.reset("inline-flex"), A.variables.inputHeight, A.variables.interactiveColorBorder, A.variables.borderRadius, (0, 
     A.pick)({
         enterprise: {
             light: A.variables.white,
@@ -317,8 +313,8 @@
         },
         prisma: A.variables.transparent
     }), (0, A.pick)({
-        enterprise: "0px 10px",
-        prisma: "0px 12px"
+        enterprise: "0 10px",
+        prisma: "0 12px"
     }), (function(e) {
         var t = e.$hasEndAdornment;
         return t && (0, D.css)([ "padding-right:0;" ]);
@@ -327,7 +323,7 @@
         return t && (0, D.css)([ "padding-left:0;" ]);
     }), A.variables.interactiveColorBorderHover, A.variables.focusShadow, A.variables.contentColorActive, (function(e) {
         var t = e.$error;
-        return t && (0, D.css)([ "&,&:hover:not([disabled]){border-color:", ";}&:focus-within:not([disabled]){box-shadow:", ";color:", ";}" ], A.variables.accentColorNegative, A.variables.focusShadow, A.variables.contentColorActive);
+        return t && (0, D.css)([ "&,&:hover:not([disabled]){border-color:", ";}" ], A.variables.accentColorNegative);
     }), (function(e) {
         var t = e.$append;
         return t && (0, D.css)([ "margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0;border-right:none;" ]);
@@ -355,7 +351,7 @@
             compact: "20px"
         }
     }), (0, A.pick)({
-        enterprise: A.variables.spacingHalf,
+        enterprise: A.variables.spacingSmall,
         prisma: "14px"
     }), A.variables.contentColorMuted, (function(e) {
         var t = e.$error;
@@ -525,48 +521,34 @@
         }
         return ie(e);
     }
-    function ae() {
-        ae = Object.assign || function(e) {
-            for (var t = 1; t < arguments.length; t++) {
-                var r = arguments[t];
-                for (var n in r) {
-                    if (Object.prototype.hasOwnProperty.call(r, n)) {
-                        e[n] = r[n];
-                    }
-                }
-            }
-            return e;
-        };
-        return ae.apply(this, arguments);
-    }
-    function oe(e) {
-        return pe(e) || ce(e) || se(e) || le();
+    function ae(e) {
+        return ce(e) || se(e) || le(e) || oe();
     }
-    function le() {
+    function oe() {
         throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
-    function se(e, t) {
+    function le(e, t) {
         if (!e) return;
-        if (typeof e === "string") return de(e, t);
+        if (typeof e === "string") return pe(e, t);
         var r = Object.prototype.toString.call(e).slice(8, -1);
         if (r === "Object" && e.constructor) r = e.constructor.name;
         if (r === "Map" || r === "Set") return Array.from(e);
-        if (r === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)) return de(e, t);
+        if (r === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)) return pe(e, t);
     }
-    function ce(e) {
+    function se(e) {
         if (typeof Symbol !== "undefined" && Symbol.iterator in Object(e)) return Array.from(e);
     }
-    function pe(e) {
-        if (Array.isArray(e)) return de(e);
+    function ce(e) {
+        if (Array.isArray(e)) return pe(e);
     }
-    function de(e, t) {
+    function pe(e, t) {
         if (t == null || t > e.length) t = e.length;
         for (var r = 0, n = new Array(t); r < t; r++) {
             n[r] = e[r];
         }
         return n;
     }
-    function ue(e, t) {
+    function de(e, t) {
         var r = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var n = Object.getOwnPropertySymbols(e);
@@ -577,26 +559,26 @@
         }
         return r;
     }
-    function fe(e) {
+    function ue(e) {
         for (var t = 1; t < arguments.length; t++) {
             var r = arguments[t] != null ? arguments[t] : {};
             if (t % 2) {
-                ue(Object(r), true).forEach((function(t) {
+                de(Object(r), true).forEach((function(t) {
                     Ee(e, t, r[t]);
                 }));
             } else if (Object.getOwnPropertyDescriptors) {
                 Object.defineProperties(e, Object.getOwnPropertyDescriptors(r));
             } else {
-                ue(Object(r)).forEach((function(t) {
+                de(Object(r)).forEach((function(t) {
                     Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t));
                 }));
             }
         }
         return e;
     }
-    function me(e, t) {
+    function fe(e, t) {
         if (e == null) return {};
-        var r = he(e, t);
+        var r = me(e, t);
         var n, i;
         if (Object.getOwnPropertySymbols) {
             var a = Object.getOwnPropertySymbols(e);
@@ -609,7 +591,7 @@
         }
         return r;
     }
-    function he(e, t) {
+    function me(e, t) {
         if (e == null) return {};
         var r = {};
         var n = Object.keys(e);
@@ -621,6 +603,20 @@
         }
         return r;
     }
+    function he() {
+        he = Object.assign || function(e) {
+            for (var t = 1; t < arguments.length; t++) {
+                var r = arguments[t];
+                for (var n in r) {
+                    if (Object.prototype.hasOwnProperty.call(r, n)) {
+                        e[n] = r[n];
+                    }
+                }
+            }
+            return e;
+        };
+        return he.apply(this, arguments);
+    }
     function ve(e, t) {
         if (!(e instanceof t)) {
             throw new TypeError("Cannot call a class as a function");
@@ -635,12 +631,12 @@
             Object.defineProperty(e, n.key, n);
         }
     }
-    function ye(e, t, r) {
+    function Ce(e, t, r) {
         if (t) be(e.prototype, t);
         if (r) be(e, r);
         return e;
     }
-    function Ce(e, t) {
+    function ye(e, t) {
         if (typeof t !== "function" && t !== null) {
             throw new TypeError("Super expression must either be null or a function");
         }
@@ -781,9 +777,9 @@
         passwordVisibilityToggle: false
     };
     /** Note: Text places role and aria props onto the input. All other props are placed on the wrapper. */    var Te =  function(e) {
-        Ce(r, e);
+        ye(r, e);
         var t = xe(r);
-        ye(r, null, [ {
+        Ce(r, null, [ {
             key: "validateRows",
             // @docs-props-type TextPropsBase
             value: function e(t) {
@@ -845,6 +841,17 @@
                 var t, r;
                 (t = (r = i.props).onInputClick) === null || t === void 0 ? void 0 : t.call(r, e);
             }));
+            Ee(ke(i), "handleBoxClick", (function(e) {
+                var t, r;
+                if (document.activeElement !== i.input) {
+                    var n;
+                    (n = i.input) === null || n === void 0 ? void 0 : n.focus();
+                }
+                (t = (r = i.props).onClick) === null || t === void 0 ? void 0 : t.call(r, e);
+            }));
+            Ee(ke(i), "handleAdornmentClick", (function(e) {
+                e.stopPropagation();
+            }));
             Ee(ke(i), "handleInputFocus", (function(e) {
                 var t, r;
                 var n = e.target.value;
@@ -900,13 +907,18 @@
                 };
                 if (a) {
                     
-                    return n().createElement(re, m, a);
+                    return n().createElement(re, he({
+                        "data-test": "end-adornment",
+                        onClick: i.handleAdornmentClick
+                    }, m), a);
                 }
                 if (o && !l) {
                     var h = i.state.hideVisibility ?  n().createElement(B, null) :  n().createElement($, null);
                     
-                    return n().createElement(re, m,  n().createElement(Q, {
-                        appearance: p ? "secondary" : "pill",
+                    return n().createElement(re, he({
+                        onClick: i.handleAdornmentClick
+                    }, m),  n().createElement(Q, {
+                        appearance: "subtle",
                         "data-test": "password-toggle",
                         inline: false,
                         onClick: i.handleVisibilityToggle,
@@ -915,11 +927,11 @@
                     }));
                 }
                 var b = i.context;
-                var C = (e = b.labelAttrs) === null || e === void 0 ? void 0 : e.text;
-                var x = C ? (0, T._)("Clear ".concat(C, " text field")) : (0, T._)("Clear text field");
-                var k = i.getDisplayValue();
-                if (!p && r === "search") {
-                    if (!k) {
+                var y = (e = b.labelAttrs) === null || e === void 0 ? void 0 : e.text;
+                var x = y ? (0, T._)("Clear ".concat(y, " text field")) : (0, T._)("Clear text field");
+                var w = i.getDisplayValue();
+                if (u && r === "search") {
+                    if (!w) {
                         
                         return n().createElement(re, m,  n().createElement(K, {
                             $disabled: l,
@@ -933,40 +945,36 @@
                     }
                     
                     return n().createElement(re, m, !l &&  n().createElement(H, {
-                        appearance: p ? "secondary" : "pill",
+                        appearance: "subtle",
                         "data-test": "clear",
                         inline: false,
-                        icon: u ?  n().createElement(y(), {
+                        "aria-label": x,
+                        icon:  n().createElement(C(), {
                             size: 1,
-                            screenReaderText: x
-                        }) :  n().createElement(v(), {
-                            "aria-label": x
+                            screenReaderText: null
                         }),
                         onClick: i.handleClear
                     }),  n().createElement(K, {
                         "data-test": "search-icon",
                         $disabled: l
-                    }, u ?  n().createElement(g(), {
+                    },  n().createElement(g(), {
                         screenReaderText: null,
                         hideDefaultTooltip: true,
                         size: "16px",
                         inline: false
-                    }) :  n().createElement(w(), {
-                        width: f,
-                        height: f
                     })));
                 }
-                if (!!k && (p && r === "search" || s)) {
+                if (!!w && (p && r === "search" || s)) {
                     
                     return n().createElement(re, m, !l &&  n().createElement(H, {
                         "data-test": "clear",
-                        appearance: p ? "secondary" : "pill",
+                        appearance: "subtle",
+                        "aria-label": x,
                         onClick: i.handleClear,
-                        icon: u ?  n().createElement(y(), {
+                        icon: u ?  n().createElement(C(), {
                             inline: false,
-                            screenReaderText: x
+                            screenReaderText: null
                         }) :  n().createElement(v(), {
-                            "aria-label": x,
                             height: f,
                             inline: false,
                             width: f
@@ -988,7 +996,10 @@
                 };
                 if (r) {
                     
-                    return n().createElement(re, p, r);
+                    return n().createElement(re, he({
+                        "data-test": "start-adornment",
+                        onClick: i.handleAdornmentClick
+                    }, p), r);
                 }
                 if (l && t === "search") {
                     
@@ -996,7 +1007,6 @@
                         "data-test": "search-icon",
                         $disabled: o
                     },  n().createElement(w(), {
-                        "aria-label": "Search",
                         height: c,
                         width: c
                     })));
@@ -1024,7 +1034,7 @@
             r.validateRows(e);
             return i;
         }
-        ye(r, [ {
+        Ce(r, [ {
             key: "componentDidMount",
             value: function e() {
                 this.getAdornmentWidth();
@@ -1065,8 +1075,8 @@
         }, {
             key: "render",
             value: function e() {
-                var t = this.props, r = t.append, i = t.autoCapitalize, a = t.autoComplete, o = t.autoCorrect, l = t.autoFocus, s = t.children, p = t.className, u = t.classNamePrivate, m = t.disabled, h = t.describedBy, v = t.elementRef, b = t.error, y = t.inline, C = t.inputClassName, g = t.inputId, x = t.labelledBy, w = t.multiline, k = t.maxLength, S = t.name, A = t.passwordVisibilityToggle, T = t.placeholder, I = t.prepend, j = t.required, M = t.spellCheck, R = t.tabIndex, $ = t.title, _ = t.type, P = t.useSyntheticPlaceholder, B = me(t, [ "append", "autoCapitalize", "autoComplete", "autoCorrect", "autoFocus", "children", "className", "classNamePrivate", "disabled", "describedBy", "elementRef", "error", "inline", "inputClassName", "inputId", "labelledBy", "multiline", "maxLength", "name", "passwordVisibilityToggle", "placeholder", "prepend", "required", "spellCheck", "tabIndex", "title", "type", "useSyntheticPlaceholder" ]);
-                var D = fe(fe({
+                var t = this.props, r = t.append, i = t.autoCapitalize, a = t.autoComplete, o = t.autoCorrect, l = t.autoFocus, s = t.children, p = t.className, u = t.classNamePrivate, m = t.disabled, h = t.describedBy, v = t.elementRef, b = t.error, C = t.inline, y = t.inputClassName, g = t.inputId, x = t.labelledBy, w = t.multiline, k = t.maxLength, S = t.name, A = t.passwordVisibilityToggle, T = t.placeholder, I = t.prepend, j = t.required, M = t.spellCheck, R = t.tabIndex, $ = t.title, _ = t.type, P = t.useSyntheticPlaceholder, B = fe(t, [ "append", "autoCapitalize", "autoComplete", "autoCorrect", "autoFocus", "children", "className", "classNamePrivate", "disabled", "describedBy", "elementRef", "error", "inline", "inputClassName", "inputId", "labelledBy", "multiline", "maxLength", "name", "passwordVisibilityToggle", "placeholder", "prepend", "required", "spellCheck", "tabIndex", "title", "type", "useSyntheticPlaceholder" ]);
+                var D = ue(ue({
                     role: "textbox"
                 }, f()(B, (function(e, t) {
                     return t === "role" || t.indexOf("aria-") === 0;
@@ -1075,17 +1085,17 @@
                     "aria-labelledby": x,
                     "aria-invalid": b || undefined
                 });
-                var N = d()(B, [ "inputRef", "onBlur", "onChange", "onFocus", "onKeyDown", "onSelect", "onInputClick", "rowsMax", "rowsMin" ].concat(oe(c()(D))));
+                var N = d()(B, [ "inputRef", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onSelect", "onInputClick", "rowsMax", "rowsMin" ].concat(ae(c()(D))));
                 var q = this.getDisplayValue();
                 var V = {
-                    className: (0, O.toClassName)(p, C),
+                    className: (0, O.toClassName)(p, y),
                     $append: r || undefined,
                     $error: b,
                     $prepend: I || undefined
                 };
                 var W = this.state.hideVisibility ? "password" : "text";
                 var z = A ? W : _;
-                var Z = fe(fe({}, D), {}, {
+                var Z = ue(ue({}, D), {}, {
                     "data-test": "textbox",
                     autoCapitalize: i,
                     autoComplete: a,
@@ -1127,7 +1137,7 @@
                     return n().createElement(E(), this.props);
                 }
                 
-                return n().createElement(G, ae({
+                return n().createElement(G, he({
                     tabIndex: -1,
                     $isTimeInput: K,
                     className: (0, O.toClassName)(p, u),
@@ -1135,14 +1145,15 @@
                     "data-test-value": H,
                     elementRef: v,
                     flex: true,
-                    inline: y
-                }, N), Q,  n().createElement(U, ae({
+                    inline: C,
+                    onClick: this.handleBoxClick
+                }, N), Q,  n().createElement(U, he({
                     $hasEndAdornment: ne,
                     $hasStartAdornment: re,
                     disabled: m
                 }, V), re &&  n().createElement(ee, {
                     $width: this.state.startAdornmentWidth
-                }), m ?  n().createElement(J, ae({
+                }), m ?  n().createElement(J, he({
                     className: (0, O.toClassName)(p, u),
                     "data-test": "textbox",
                     disabled: true,
@@ -1150,7 +1161,7 @@
                     type: z,
                     value: q,
                     placeholder: T && !P ? T : undefined
-                }, D)) :  n().createElement(J, ae({}, Z, {
+                }, D)) :  n().createElement(J, he({}, Z, {
                     onClick: this.handleInputClick
                 })), F &&  n().createElement(L(), null, T), F &&  n().createElement(X, {
                     $endAdornmentWidth: this.state.endAdornmentWidth,