@splunk/react-ui 4.12.0 → 4.13.0

package/Text.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 134);
+/******/ 	return __webpack_require__(__webpack_require__.s = 136);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,13 +101,6 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 108:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-ui/TextArea");
-
-/***/ }),
-
 /***/ 11:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -135,7 +128,14 @@ function updateReactRef(ref, current) {
 
 /***/ }),
 
-/***/ 134:
+/***/ 110:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/TextArea");
+
+/***/ }),
+
+/***/ 136:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -157,7 +157,7 @@ var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_pr
 var external_lodash_ = __webpack_require__(4);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/style"
-var style_ = __webpack_require__(31);
+var style_ = __webpack_require__(32);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"
 var ScreenReaderContent_ = __webpack_require__(14);
@@ -170,17 +170,17 @@ var themes_ = __webpack_require__(0);
 var ControlGroup_ = __webpack_require__(78);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/TextArea"
-var TextArea_ = __webpack_require__(108);
+var TextArea_ = __webpack_require__(110);
 var TextArea_default = /*#__PURE__*/__webpack_require__.n(TextArea_);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
 var i18n_ = __webpack_require__(5);
 
 // EXTERNAL MODULE: ./src/icons/Search.tsx
-var Search = __webpack_require__(34);
+var Search = __webpack_require__(29);
 
 // EXTERNAL MODULE: ./src/icons/CrossMark.tsx
-var CrossMark = __webpack_require__(19);
+var CrossMark = __webpack_require__(20);
 
 // EXTERNAL MODULE: ./src/utils/updateReactRef.ts
 var updateReactRef = __webpack_require__(11);
@@ -316,6 +316,7 @@ var Button_default = /*#__PURE__*/__webpack_require__.n(Button_);
 
 
 
+
 var disabledStyles = Object(external_styled_components_["css"])(["&,&[type]{cursor:not-allowed;color:", ";&::placeholder{color:", ";}}"], Object(themes_["pick"])({
   enterprise: themes_["variables"].textDisabledColor,
   prisma: themes_["variables"].contentColorDisabled
@@ -337,7 +338,7 @@ var buttonStyles = Object(external_styled_components_["css"])(["border-radius:",
     light: themes_["variables"].gray60,
     dark: themes_["variables"].white
   },
-  prisma: themes_["variables"].contentColorDefault
+  prisma: themes_["variables"].contentColorMuted
 }));
 var StyledClearButton = external_styled_components_default()(Button_default.a).withConfig({
   displayName: "TextStyles__StyledClearButton",
@@ -362,9 +363,22 @@ var StyledSearchIconWrapper = external_styled_components_default.a.span.withConf
     prisma: Object(external_styled_components_["css"])(["color:", ";"], themes_["variables"].contentColorDisabled)
   }));
 });
+var StyledSearchIcon = external_styled_components_default()(Search["a" /* default */]).withConfig({
+  displayName: "TextStyles__StyledSearchIcon",
+  componentId: "eg7n6t-2"
+})(["", ";color:", ";pointer-events:none;padding:", ";", ""], themes_["mixins"].reset('inline-block'), Object(themes_["pick"])({
+  enterprise: {
+    light: themes_["variables"].gray60,
+    dark: themes_["variables"].white
+  },
+  prisma: themes_["variables"].contentColorMuted
+}), Object(themes_["pick"])({
+  comfortable: '0 8px',
+  compact: '0 6px'
+}), buttonStyles);
 var StyledBox = external_styled_components_default()(Box_default.a).withConfig({
   displayName: "TextStyles__StyledBox",
-  componentId: "eg7n6t-2"
+  componentId: "eg7n6t-3"
 })(["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;}}", ""], Object(themes_["pick"])({
   enterprise: themes_["variables"].spacingHalf,
   prisma: themes_["variables"].spacingSmall
@@ -382,8 +396,8 @@ StyledClearButton, function (_ref2) {
 });
 var StyledInputWrapper = external_styled_components_default.a.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]){", "}", " ", " ", " ", " ", ""], themes_["mixins"].reset('inline-flex'), themes_["variables"].inputHeight, Object(themes_["pick"])({
+  componentId: "eg7n6t-4"
+})(["", ";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]){", "}", " ", " ", " ", ""], themes_["mixins"].reset('inline-flex'), themes_["variables"].inputHeight, Object(themes_["pick"])({
   enterprise: {
     light: themes_["variables"].gray60,
     dark: themes_["variables"].gray20
@@ -437,18 +451,13 @@ var StyledInputWrapper = external_styled_components_default.a.span.withConfig({
     },
     prisma: Object(external_styled_components_["css"])(["border-color:", ";"], themes_["variables"].interactiveColorBorderDisabled)
   }));
-}, function (_ref9) {
-  var $multiline = _ref9.$multiline;
-  return $multiline && Object(themes_["pick"])({
-    enterprise: Object(external_styled_components_["css"])(["padding-right:0;"])
-  });
 });
 /* Some of these need greater specificity than input[type=text] */
 
 var StyledInput = external_styled_components_default.a.input.withConfig({
   displayName: "TextStyles__StyledInput",
-  componentId: "eg7n6t-4"
-})(["", ";&,&[type]{outline-style:none;border:0;background:transparent;color:", ";flex-grow:1;font-family:", ";font-size:inherit;line-height:inherit;&[type='time']{&::-webkit-calendar-picker-indicator{display:none;}height:", ";@media screen and (min--moz-device-pixel-ratio:0){padding-right:", ";}}position:relative;&::placeholder{color:", ";opacity:1;}", " ", "}textarea&{resize:none;overflow:auto;padding-top:", ";padding-bottom:", ";padding-right:", ";}"], themes_["mixins"].reset('inline-flex'), Object(themes_["pick"])({
+  componentId: "eg7n6t-5"
+})(["", ";&,&[type]{outline-style:none;border:0;background:transparent;color:", ";flex-grow:1;font-family:", ";font-size:inherit;line-height:inherit;&[type='time']{&::-webkit-calendar-picker-indicator{display:none;}height:", ";@media screen and (min--moz-device-pixel-ratio:0){padding-right:", ";}}position:relative;&::placeholder{color:", ";opacity:1;}", " ", "}"], themes_["mixins"].reset('inline-flex'), Object(themes_["pick"])({
   enterprise: themes_["variables"].textColor,
   prisma: themes_["variables"].contentColorActive
 }), themes_["variables"].sansFontFamily, Object(themes_["pick"])({
@@ -460,8 +469,8 @@ var StyledInput = external_styled_components_default.a.input.withConfig({
 }), Object(themes_["pick"])({
   enterprise: themes_["variables"].spacingHalf,
   prisma: '14px'
-}), themes_["variables"].contentColorMuted, function (_ref10) {
-  var $error = _ref10.$error;
+}), themes_["variables"].contentColorMuted, function (_ref9) {
+  var $error = _ref9.$error;
   return $error && Object(external_styled_components_["css"])(["&,&:hover{color:", ";}"], Object(themes_["pick"])({
     enterprise: {
       light: themes_["variables"].errorColorD10,
@@ -469,47 +478,26 @@ var StyledInput = external_styled_components_default.a.input.withConfig({
     },
     prisma: themes_["variables"].contentColorActive
   }));
-}, function (_ref11) {
-  var disabled = _ref11.disabled;
+}, function (_ref10) {
+  var disabled = _ref10.disabled;
   return disabled && disabledStyles;
-}, Object(themes_["pick"])({
-  enterprise: {
-    comfortable: themes_["variables"].spacingQuarter,
-    compact: '3px'
-  },
-  prisma: {
-    comfortable: themes_["variables"].spacingSmall,
-    compact: '5px'
-  }
-}), Object(themes_["pick"])({
-  enterprise: {
-    comfortable: themes_["variables"].spacingQuarter,
-    compact: '3px'
-  },
-  prisma: {
-    comfortable: themes_["variables"].spacingSmall,
-    compact: '5px'
-  }
-}), Object(themes_["pick"])({
-  enterprise: '10px',
-  prisma: '14px'
-}));
+});
 var StyledVisibilityToggle = external_styled_components_default()(Button_default.a).withConfig({
   displayName: "TextStyles__StyledVisibilityToggle",
-  componentId: "eg7n6t-5"
+  componentId: "eg7n6t-6"
 })(["", ""], buttonStyles);
 var StyledPlaceholder = external_styled_components_default.a.span.withConfig({
   displayName: "TextStyles__StyledPlaceholder",
-  componentId: "eg7n6t-6"
+  componentId: "eg7n6t-7"
 })(["pointer-events:none;color:", ";position:absolute;overflow:hidden;font-size:inherit;line-height:inherit;height:", ";margin-right:", ";", ";", ";", ""], Object(themes_["pick"])({
   enterprise: themes_["variables"].textGray,
   prisma: themes_["variables"].contentColorMuted
 }), themes_["variables"].lineHeight, Object(themes_["pick"])({
   enterprise: '10px',
   prisma: '14px'
-}), function (_ref12) {
-  var $hasStartAdornment = _ref12.$hasStartAdornment,
-      $startAdornmentWidth = _ref12.$startAdornmentWidth;
+}), function (_ref11) {
+  var $hasStartAdornment = _ref11.$hasStartAdornment,
+      $startAdornmentWidth = _ref11.$startAdornmentWidth;
   return $hasStartAdornment && ($startAdornmentWidth ? Object(external_styled_components_["css"])(["margin-left:", "px;"], $startAdornmentWidth) : Object(external_styled_components_["css"])(["margin-left:", ";"], Object(themes_["pick"])({
     enterprise: {
       comfortable: '30px',
@@ -520,9 +508,9 @@ var StyledPlaceholder = external_styled_components_default.a.span.withConfig({
       compact: '30px'
     }
   })));
-}, function (_ref13) {
-  var $hasEndAdornment = _ref13.$hasEndAdornment,
-      $endAdornmentWidth = _ref13.$endAdornmentWidth;
+}, function (_ref12) {
+  var $hasEndAdornment = _ref12.$hasEndAdornment,
+      $endAdornmentWidth = _ref12.$endAdornmentWidth;
   return $hasEndAdornment && ($endAdornmentWidth // calc(100% - padding - adorment width)
   ? Object(external_styled_components_["css"])(["max-width:calc( 100% - ", " - ", "px );"], Object(themes_["pick"])({
     enterprise: '10px',
@@ -540,10 +528,10 @@ var StyledPlaceholder = external_styled_components_default.a.span.withConfig({
       compact: '30px'
     }
   })));
-}, function (_ref14) {
-  var $hasBothAdornment = _ref14.$hasBothAdornment,
-      $endAdornmentWidth = _ref14.$endAdornmentWidth,
-      $startAdornmentWidth = _ref14.$startAdornmentWidth;
+}, function (_ref13) {
+  var $hasBothAdornment = _ref13.$hasBothAdornment,
+      $endAdornmentWidth = _ref13.$endAdornmentWidth,
+      $startAdornmentWidth = _ref13.$startAdornmentWidth;
   return $hasBothAdornment && Object(external_styled_components_["css"])(["max-width:calc(100% - ", "px - ", "px);"], $startAdornmentWidth, $endAdornmentWidth);
 });
 var adornmentHolder = Object(external_styled_components_["css"])(["display:inline-flex;align-items:center;justify-content:center;height:", ";pointer-events:none;"], Object(themes_["pick"])({
@@ -558,9 +546,9 @@ var adornmentHolder = Object(external_styled_components_["css"])(["display:inlin
 }));
 var StyledStartAdornmentHolder = external_styled_components_default.a.div.withConfig({
   displayName: "TextStyles__StyledStartAdornmentHolder",
-  componentId: "eg7n6t-7"
-})(["", " ", ";"], adornmentHolder, function (_ref15) {
-  var $width = _ref15.$width;
+  componentId: "eg7n6t-8"
+})(["", " ", ";"], adornmentHolder, function (_ref14) {
+  var $width = _ref14.$width;
   return $width ? Object(external_styled_components_["css"])(["min-width:", "px;"], $width) : Object(external_styled_components_["css"])(["min-width:", ";"], Object(themes_["pick"])({
     enterprise: {
       comfortable: '30px',
@@ -574,9 +562,9 @@ var StyledStartAdornmentHolder = external_styled_components_default.a.div.withCo
 });
 var StyledEndAdornmentHolder = external_styled_components_default.a.div.withConfig({
   displayName: "TextStyles__StyledEndAdornmentHolder",
-  componentId: "eg7n6t-8"
-})(["", " ", ";"], adornmentHolder, function (_ref16) {
-  var $width = _ref16.$width;
+  componentId: "eg7n6t-9"
+})(["", " ", ";"], adornmentHolder, function (_ref15) {
+  var $width = _ref15.$width;
   return $width ? Object(external_styled_components_["css"])(["min-width:", "px;"], $width) : Object(external_styled_components_["css"])(["min-width:", ";"], Object(themes_["pick"])({
     enterprise: {
       comfortable: '30px',
@@ -590,8 +578,8 @@ var StyledEndAdornmentHolder = external_styled_components_default.a.div.withConf
 });
 var StyledAdornment = external_styled_components_default.a.div.withConfig({
   displayName: "TextStyles__StyledAdornment",
-  componentId: "eg7n6t-9"
-})(["display:inline-flex;align-items:center;justify-content:center;position:absolute;pointer-events:none;z-index:1;height:", ";", ";", ";", ""], Object(themes_["pick"])({
+  componentId: "eg7n6t-10"
+})(["display:inline-flex;align-items:center;justify-content:center;position:absolute;pointer-events:none;z-index:1;height:", ";color:", ";", ";", ";", ""], Object(themes_["pick"])({
   enterprise: {
     comfortable: '30px',
     compact: '26px'
@@ -600,11 +588,17 @@ var StyledAdornment = external_styled_components_default.a.div.withConfig({
     comfortable: '38px',
     compact: '30px'
   }
-}), function (_ref17) {
-  var $position = _ref17.$position;
+}), Object(themes_["pick"])({
+  enterprise: {
+    light: themes_["variables"].gray60,
+    dark: themes_["variables"].white
+  },
+  prisma: themes_["variables"].contentColorMuted
+}), function (_ref16) {
+  var $position = _ref16.$position;
   return $position === 'start' ? Object(external_styled_components_["css"])(["top:1px;left:1px;"]) : Object(external_styled_components_["css"])(["top:1px;right:1px;"]);
-}, function (_ref18) {
-  var disabled = _ref18.disabled;
+}, function (_ref17) {
+  var disabled = _ref17.disabled;
   return disabled && disabledStyles;
 }, Object(themes_["pick"])({
   enterprise: Object(external_styled_components_["css"])(["margin-left:-1px;margin-right:-1px;"])
@@ -912,7 +906,18 @@ var Text_Text = /*#__PURE__*/function (_Component) {
       var controlGroupLabel = (_controlGroupContext$ = controlGroupContext.labelAttrs) === null || _controlGroupContext$ === void 0 ? void 0 : _controlGroupContext$.text;
       var clearButtonText = controlGroupLabel ? Object(i18n_["_"])("Clear ".concat(controlGroupLabel, " text field")) : Object(i18n_["_"])('Clear text field');
 
+      var displayValue = _this.getDisplayValue();
+
       if (!isPrisma && appearance === 'search') {
+        if (!displayValue) {
+          return /*#__PURE__*/external_react_default.a.createElement(StyledAdornment, adornmentProps, /*#__PURE__*/external_react_default.a.createElement(StyledSearchIconWrapper, {
+            $disabled: disabled
+          }, /*#__PURE__*/external_react_default.a.createElement(Search["a" /* default */], {
+            enterpriseSize: "16px",
+            inline: false
+          })));
+        }
+
         return /*#__PURE__*/external_react_default.a.createElement(StyledAdornment, adornmentProps, !disabled && /*#__PURE__*/external_react_default.a.createElement(StyledClearButton, {
           appearance: isPrisma ? 'secondary' : 'pill',
           "data-test": "clear",
@@ -930,8 +935,6 @@ var Text_Text = /*#__PURE__*/function (_Component) {
         })));
       }
 
-      var displayValue = _this.getDisplayValue();
-
       if (!!displayValue && (isPrisma && appearance === 'search' || canClear)) {
         return /*#__PURE__*/external_react_default.a.createElement(StyledAdornment, adornmentProps, !disabled && /*#__PURE__*/external_react_default.a.createElement(StyledClearButton, {
           "data-test": "clear",
@@ -1002,6 +1005,8 @@ var Text_Text = /*#__PURE__*/function (_Component) {
 
     if (false) {}
 
+    if (false) {}
+
     Text.validateRows(props);
     return _this;
   }
@@ -1082,8 +1087,7 @@ var Text_Text = /*#__PURE__*/function (_Component) {
           title = _this$props10.title,
           type = _this$props10.type,
           useSyntheticPlaceholder = _this$props10.useSyntheticPlaceholder,
-          value = _this$props10.value,
-          otherProps = _objectWithoutProperties(_this$props10, ["append", "autoCapitalize", "autoComplete", "autoCorrect", "autoFocus", "children", "className", "classNamePrivate", "disabled", "describedBy", "elementRef", "error", "inline", "inputClassName", "inputId", "labelledBy", "multiline", "maxLength", "name", "passwordVisibilityToggle", "placeholder", "prepend", "spellCheck", "tabIndex", "title", "type", "useSyntheticPlaceholder", "value"]);
+          otherProps = _objectWithoutProperties(_this$props10, ["append", "autoCapitalize", "autoComplete", "autoCorrect", "autoFocus", "children", "className", "classNamePrivate", "disabled", "describedBy", "elementRef", "error", "inline", "inputClassName", "inputId", "labelledBy", "multiline", "maxLength", "name", "passwordVisibilityToggle", "placeholder", "prepend", "spellCheck", "tabIndex", "title", "type", "useSyntheticPlaceholder"]);
 
       var ariaProps = _objectSpread(_objectSpread({}, Object(external_lodash_["pickBy"])(otherProps, function (val, key) {
         return key === 'role' || key.indexOf('aria-') === 0;
@@ -1221,7 +1225,14 @@ module.exports = require("@splunk/react-ui/Button");
 
 /***/ }),
 
-/***/ 19:
+/***/ 2:
+/***/ (function(module, exports) {
+
+module.exports = require("react");
+
+/***/ }),
+
+/***/ 20:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1271,13 +1282,6 @@ function CrossMark(props) {
 
 /***/ }),
 
-/***/ 2:
-/***/ (function(module, exports) {
-
-module.exports = require("react");
-
-/***/ }),
-
 /***/ 21:
 /***/ (function(module, exports) {
 
@@ -1292,21 +1296,7 @@ module.exports = require("@splunk/react-icons/SVG");
 
 /***/ }),
 
-/***/ 3:
-/***/ (function(module, exports) {
-
-module.exports = require("styled-components");
-
-/***/ }),
-
-/***/ 31:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/ui-utils/style");
-
-/***/ }),
-
-/***/ 34:
+/***/ 29:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1356,6 +1346,20 @@ function Search(props) {
 
 /***/ }),
 
+/***/ 3:
+/***/ (function(module, exports) {
+
+module.exports = require("styled-components");
+
+/***/ }),
+
+/***/ 32:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/ui-utils/style");
+
+/***/ }),
+
 /***/ 4:
 /***/ (function(module, exports) {