@splunk/react-ui 4.11.0 → 4.12.1

package/Text.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 127);
+/******/ 	return __webpack_require__(__webpack_require__.s = 134);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,10 +101,10 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 107:
+/***/ 108:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-ui/ControlGroup");
+module.exports = require("@splunk/react-ui/TextArea");
 
 /***/ }),
 
@@ -135,7 +135,7 @@ function updateReactRef(ref, current) {
 
 /***/ }),
 
-/***/ 127:
+/***/ 134:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -157,11 +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__(40);
-
-// EXTERNAL MODULE: external "@splunk/react-ui/EventListener"
-var EventListener_ = __webpack_require__(15);
-var EventListener_default = /*#__PURE__*/__webpack_require__.n(EventListener_);
+var style_ = __webpack_require__(32);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"
 var ScreenReaderContent_ = __webpack_require__(14);
@@ -171,92 +167,21 @@ var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReade
 var themes_ = __webpack_require__(0);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ControlGroup"
-var ControlGroup_ = __webpack_require__(107);
+var ControlGroup_ = __webpack_require__(78);
+
+// EXTERNAL MODULE: external "@splunk/react-ui/TextArea"
+var TextArea_ = __webpack_require__(108);
+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__(44);
+var Search = __webpack_require__(29);
 
 // EXTERNAL MODULE: ./src/icons/CrossMark.tsx
-var CrossMark = __webpack_require__(20);
-
-// CONCATENATED MODULE: ./src/Text/syncHeightWithShadow.ts
-// This file was adapted from [Call-Em-All's material-ui](https://github.com/mui-org/material-ui),
-// which is MIT-licensed:
-//
-// The MIT License (MIT)
-//
-// Copyright (c) 2014 Call-Em-All
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in all
-// copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-// SOFTWARE.
-//
-// End of MIT license text.
-function syncHeightWithShadow(_ref) {
-  var height = _ref.height,
-      multiline = _ref.multiline,
-      rowsMax = _ref.rowsMax,
-      rowsMin = _ref.rowsMin,
-      shadow = _ref.shadow;
-
-  if (multiline && shadow) {
-    var style = window.getComputedStyle(shadow);
-    var lineHeightValue = style.getPropertyValue('line-height'); // jsdom does not properly inherit/re-calculate the line-height property so we skip in these cases SUI-1943, SUI-2428
-
-    if (lineHeightValue === 'inherit' || lineHeightValue === 'normal') {
-      return false;
-    }
-
-    var lineHeight = parseInt(lineHeightValue, 10);
-    var paddingTop = parseInt(style.getPropertyValue('padding-top'), 10);
-    var paddingBottom = parseInt(style.getPropertyValue('padding-bottom'), 10);
-    var borderTop = parseInt(style.getPropertyValue('border-top-width'), 10);
-    var borderBottom = parseInt(style.getPropertyValue('border-bottom-width'), 10);
-    var newHeight = shadow.scrollHeight + borderTop + borderBottom;
-    /* eslint-disable no-restricted-globals */
-    // Leverage the global `isNaN` here for IE support, rather than Number.isNaN.
-    // We know newHeight is numeric because we parseInt() above, so `isNaN` should be reliable.
-
-    if (newHeight === undefined || isNaN(newHeight)) {
-      return false;
-    }
-    /* eslint-enable no-restricted-globals */
-
-
-    if (rowsMax >= rowsMin) {
-      var maxHeight = rowsMax * lineHeight + paddingTop + paddingBottom + borderTop + borderBottom + 1; // need one extra.
-
-      newHeight = Math.min(maxHeight, newHeight);
-    }
-
-    var minHeight = rowsMin * lineHeight + paddingTop + paddingBottom + borderTop + borderBottom + 1; // need one extra.
+var CrossMark = __webpack_require__(19);
 
-    newHeight = Math.max(minHeight, newHeight);
-
-    if (height !== newHeight) {
-      return newHeight;
-    }
-  }
-
-  return false;
-}
 // EXTERNAL MODULE: ./src/utils/updateReactRef.ts
 var updateReactRef = __webpack_require__(11);
 
@@ -383,7 +308,7 @@ var Box_ = __webpack_require__(8);
 var Box_default = /*#__PURE__*/__webpack_require__.n(Box_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Button"
-var Button_ = __webpack_require__(17);
+var Button_ = __webpack_require__(16);
 var Button_default = /*#__PURE__*/__webpack_require__.n(Button_);
 
 // CONCATENATED MODULE: ./src/Text/TextStyles.ts
@@ -391,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
@@ -421,7 +347,7 @@ var StyledClearButton = external_styled_components_default()(Button_default.a).w
 var StyledSearchIconWrapper = external_styled_components_default.a.span.withConfig({
   displayName: "TextStyles__StyledSearchIconWrapper",
   componentId: "eg7n6t-1"
-})(["", ";color:", ";pointer-events:none;padding:", ";&[disabled]{", ";}"], themes_["mixins"].reset('inline-block'), Object(themes_["pick"])({
+})(["", ";color:", ";pointer-events:none;padding:", ";", ""], themes_["mixins"].reset('inline-block'), Object(themes_["pick"])({
   enterprise: {
     light: themes_["variables"].gray60,
     dark: themes_["variables"].white
@@ -430,12 +356,29 @@ var StyledSearchIconWrapper = external_styled_components_default.a.span.withConf
 }), Object(themes_["pick"])({
   comfortable: '0 8px',
   compact: '0 6px'
+}), function (_ref) {
+  var $disabled = _ref.$disabled;
+  return $disabled && Object(external_styled_components_["css"])(["", ""], Object(themes_["pick"])({
+    enterprise: Object(external_styled_components_["css"])(["color:", ";"], themes_["variables"].textDisabledColor),
+    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"])({
-  prisma: Object(external_styled_components_["css"])(["color:", ";"], themes_["variables"].contentColorDisabled)
-}));
+  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
@@ -445,16 +388,16 @@ StyledSearchIconWrapper, Object(themes_["pick"])({
   enterprise: Object(external_styled_components_["css"])(["display:none;"])
 }),
 /* sc-sel */
-StyledClearButton, function (_ref) {
-  var $isTimeInput = _ref.$isTimeInput;
+StyledClearButton, function (_ref2) {
+  var $isTimeInput = _ref2.$isTimeInput;
   return $isTimeInput && Object(external_styled_components_["css"])(["@media screen and (min--moz-device-pixel-ratio:0){", "{display:none;}}"],
   /* sc-sel */
   StyledClearButton);
 });
 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
@@ -469,11 +412,11 @@ var StyledInputWrapper = external_styled_components_default.a.span.withConfig({
 }), Object(themes_["pick"])({
   enterprise: '0px 10px',
   prisma: '0px 12px'
-}), function (_ref2) {
-  var $hasEndAdornment = _ref2.$hasEndAdornment;
+}), function (_ref3) {
+  var $hasEndAdornment = _ref3.$hasEndAdornment;
   return $hasEndAdornment && Object(external_styled_components_["css"])(["padding-right:0;"]);
-}, function (_ref3) {
-  var $hasStartAdornment = _ref3.$hasStartAdornment;
+}, function (_ref4) {
+  var $hasStartAdornment = _ref4.$hasStartAdornment;
   return $hasStartAdornment && Object(external_styled_components_["css"])(["padding-left:0;"]);
 }, Object(themes_["pick"])({
   enterprise: {
@@ -484,20 +427,23 @@ var StyledInputWrapper = external_styled_components_default.a.span.withConfig({
 }), Object(themes_["pick"])({
   enterprise: Object(external_styled_components_["css"])(["box-shadow:", ";color:", ";"], themes_["variables"].focusShadow, themes_["variables"].textColor),
   prisma: Object(external_styled_components_["css"])(["border-color:", ";color:", ";"], themes_["variables"].interactiveColorPrimary, themes_["variables"].contentColorActive)
-}), function (_ref4) {
-  var $error = _ref4.$error;
-  return $error && Object(external_styled_components_["css"])(["&,&:hover:not([disabled]){border-color:", ";}"], Object(themes_["pick"])({
+}), function (_ref5) {
+  var $error = _ref5.$error;
+  return $error && Object(external_styled_components_["css"])(["&,&:hover:not([disabled]){border-color:", ";}&:focus-within:not([disabled]){", "}"], Object(themes_["pick"])({
     enterprise: themes_["variables"].errorColor,
     prisma: themes_["variables"].accentColorNegative
+  }), Object(themes_["pick"])({
+    enterprise: Object(external_styled_components_["css"])(["box-shadow:", ";color:", ";"], themes_["variables"].focusShadow, themes_["variables"].textColor),
+    prisma: Object(external_styled_components_["css"])(["border-color:", ";color:", ";"], themes_["variables"].interactiveColorPrimary, themes_["variables"].contentColorActive)
   }));
-}, function (_ref5) {
-  var $append = _ref5.$append;
-  return $append && Object(external_styled_components_["css"])(["margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0;border-right:none;"]);
 }, function (_ref6) {
-  var $prepend = _ref6.$prepend;
-  return $prepend && Object(external_styled_components_["css"])(["border-top-left-radius:0;border-bottom-left-radius:0;"]);
+  var $append = _ref6.$append;
+  return $append && Object(external_styled_components_["css"])(["margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0;border-right:none;"]);
 }, function (_ref7) {
-  var disabled = _ref7.disabled;
+  var $prepend = _ref7.$prepend;
+  return $prepend && Object(external_styled_components_["css"])(["border-top-left-radius:0;border-bottom-left-radius:0;"]);
+}, function (_ref8) {
+  var disabled = _ref8.disabled;
   return disabled && Object(external_styled_components_["css"])(["", " box-shadow:inset 0 1px 2px rgba(0,0,0,0.025);"], Object(themes_["pick"])({
     enterprise: {
       light: Object(external_styled_components_["css"])(["background-color:", ";border-color:", ";"], themes_["variables"].gray96, themes_["variables"].gray92),
@@ -505,18 +451,13 @@ var StyledInputWrapper = external_styled_components_default.a.span.withConfig({
     },
     prisma: Object(external_styled_components_["css"])(["border-color:", ";"], themes_["variables"].interactiveColorBorderDisabled)
   }));
-}, function (_ref8) {
-  var $multiline = _ref8.$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"])({
@@ -540,35 +481,14 @@ var StyledInput = external_styled_components_default.a.input.withConfig({
 }, 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
@@ -626,7 +546,7 @@ var adornmentHolder = Object(external_styled_components_["css"])(["display:inlin
 }));
 var StyledStartAdornmentHolder = external_styled_components_default.a.div.withConfig({
   displayName: "TextStyles__StyledStartAdornmentHolder",
-  componentId: "eg7n6t-7"
+  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"])({
@@ -642,7 +562,7 @@ var StyledStartAdornmentHolder = external_styled_components_default.a.div.withCo
 });
 var StyledEndAdornmentHolder = external_styled_components_default.a.div.withConfig({
   displayName: "TextStyles__StyledEndAdornmentHolder",
-  componentId: "eg7n6t-8"
+  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"])({
@@ -658,7 +578,7 @@ var StyledEndAdornmentHolder = external_styled_components_default.a.div.withConf
 });
 var StyledAdornment = external_styled_components_default.a.div.withConfig({
   displayName: "TextStyles__StyledAdornment",
-  componentId: "eg7n6t-9"
+  componentId: "eg7n6t-10"
 })(["display:inline-flex;align-items:center;justify-content:center;position:absolute;pointer-events:none;z-index:1;height:", ";", ";", ";", ""], Object(themes_["pick"])({
   enterprise: {
     comfortable: '30px',
@@ -740,7 +660,6 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 
 
-
 /** @public */
 
 var propTypes = {
@@ -838,8 +757,6 @@ var Text_Text = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "input", null);
 
-    _defineProperty(_assertThisInitialized(_this), "shadow", null);
-
     _defineProperty(_assertThisInitialized(_this), "startAdornment", null);
 
     _defineProperty(_assertThisInitialized(_this), "endAdornment", null);
@@ -864,10 +781,6 @@ var Text_Text = /*#__PURE__*/function (_Component) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "handleResize", function () {
-      _this.syncHeightWithShadow();
-    });
-
     _defineProperty(_assertThisInitialized(_this), "handleInputMount", function (el) {
       _this.input = el;
       Object(updateReactRef["a" /* updateReactRef */])(_this.props.inputRef, el);
@@ -948,22 +861,6 @@ var Text_Text = /*#__PURE__*/function (_Component) {
       });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "syncHeightWithShadow", function () {
-      var newHeight = syncHeightWithShadow({
-        height: _this.state.height,
-        multiline: _this.props.multiline,
-        rowsMax: _this.props.rowsMax,
-        rowsMin: _this.props.rowsMin,
-        shadow: _this.shadow
-      });
-
-      if (newHeight !== false) {
-        _this.setState({
-          height: newHeight
-        });
-      }
-    });
-
     _defineProperty(_assertThisInitialized(_this), "renderEndAdornment", function () {
       var _controlGroupContext$;
 
@@ -1003,8 +900,19 @@ 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') {
-        return /*#__PURE__*/external_react_default.a.createElement(StyledAdornment, adornmentProps, /*#__PURE__*/external_react_default.a.createElement(StyledClearButton, {
+        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",
           inline: false,
@@ -1021,10 +929,8 @@ 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, /*#__PURE__*/external_react_default.a.createElement(StyledClearButton, {
+        return /*#__PURE__*/external_react_default.a.createElement(StyledAdornment, adornmentProps, !disabled && /*#__PURE__*/external_react_default.a.createElement(StyledClearButton, {
           "data-test": "clear",
           appearance: isPrisma ? 'secondary' : 'pill',
           onClick: _this.handleClear,
@@ -1091,25 +997,20 @@ var Text_Text = /*#__PURE__*/function (_Component) {
       console.warn("The 'Text' prop 'useSyntheticPlaceholder' has been marked for deprecation.");
     }
 
+    if (false) {}
+
     Text.validateRows(props);
-    _this.handleResize = Object(external_lodash_["throttle"])(_this.handleResize, 100);
     return _this;
   }
 
   _createClass(Text, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      Object(external_lodash_["defer"])(this.syncHeightWithShadow); // wait for styles to load
-
       this.getAdornmentWidth();
     }
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      if (this.props.multiline) {
-        this.syncHeightWithShadow();
-      }
-
       if (false) {}
 
       if (false) {}
@@ -1150,8 +1051,6 @@ var Text_Text = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
-
       var _this$props10 = this.props,
           append = _this$props10.append,
           autoCapitalize = _this$props10.autoCapitalize,
@@ -1180,16 +1079,14 @@ 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;
       })), {}, {
         'aria-describedby': describedBy,
         'aria-labelledby': labelledBy,
-        'aria-invalid': error || undefined,
-        'aria-multiline': multiline
+        'aria-invalid': error || undefined
       });
 
       var boxProps = Object(external_lodash_["omit"])(otherProps, ['inputRef', 'onBlur', 'onChange', 'onFocus', 'onKeyDown', 'onSelect', 'onInputClick', 'rowsMax', 'rowsMin'].concat(_toConsumableArray(Object(external_lodash_["keys"])(ariaProps))));
@@ -1227,7 +1124,7 @@ var Text_Text = /*#__PURE__*/function (_Component) {
         },
         title: title,
         tabIndex: tabIndex,
-        type: multiline ? null : computedType,
+        type: computedType,
         value: displayValue,
         $error: error
       });
@@ -1239,6 +1136,11 @@ var Text_Text = /*#__PURE__*/function (_Component) {
       var isTimeInput = type === 'time';
       var hasEndAdornment = !!this.renderEndAdornment();
       var hasStartAdornment = !!this.renderStartAdornment();
+
+      if (multiline) {
+        return /*#__PURE__*/external_react_default.a.createElement(TextArea_default.a, this.props);
+      }
+
       return /*#__PURE__*/external_react_default.a.createElement(StyledBox, Text_extends({
         tabIndex: -1,
         $isTimeInput: isTimeInput,
@@ -1251,53 +1153,20 @@ var Text_Text = /*#__PURE__*/function (_Component) {
       }, boxProps), this.renderStartAdornment(), /*#__PURE__*/external_react_default.a.createElement(StyledInputWrapper, Text_extends({
         $hasEndAdornment: hasEndAdornment,
         $hasStartAdornment: hasStartAdornment,
-        $multiline: multiline,
         disabled: disabled
       }, displayProps), hasStartAdornment && /*#__PURE__*/external_react_default.a.createElement(StyledStartAdornmentHolder, {
         $width: this.state.startAdornmentWidth
-      }), !disabled && multiline && /*#__PURE__*/external_react_default.a.createElement(StyledInput, {
-        as: "textarea",
-        "aria-hidden": "true",
-        onChange: external_lodash_["noop"],
-        onClick: this.handleInputClick,
-        style: {
-          width: '100%',
-          position: 'absolute',
-          overflow: 'hidden',
-          left: -10000,
-          top: -10000
-        },
-        tabIndex: -1,
-        ref: function ref(el) {
-          _this2.shadow = el;
-        },
-        value: displayValue
       }), disabled ? /*#__PURE__*/external_react_default.a.createElement(StyledInput, Text_extends({
-        as: multiline ? 'textarea' : undefined,
         className: Object(style_["toClassName"])(className, classNamePrivate),
-        "data-multiline": multiline || null,
         "data-test": "textbox",
         disabled: true,
         readOnly: true,
-        style: multiline ? {
-          height: this.state.height
-        } : undefined // @ts-expect-error - accept: type only exists on input (see "as" prop)
-        ,
-        type: multiline ? undefined : computedType,
+        type: computedType,
         value: displayValue,
-        placeholder: placeholder && !useSyntheticPlaceholder ? placeholder : undefined,
-        ref: multiline ? function (el) {
-          _this2.shadow = el;
-        } : undefined
-      }, ariaProps)) : /*#__PURE__*/external_react_default.a.createElement(StyledInput, Text_extends({
-        as: multiline ? 'textarea' : undefined
-      }, inputProps, {
+        placeholder: placeholder && !useSyntheticPlaceholder ? placeholder : undefined
+      }, ariaProps)) : /*#__PURE__*/external_react_default.a.createElement(StyledInput, Text_extends({}, inputProps, {
         onClick: this.handleInputClick
-      })), !disabled && multiline && /*#__PURE__*/external_react_default.a.createElement(EventListener_default.a, {
-        target: window,
-        eventType: "resize",
-        listener: this.handleResize
-      }), haveSyntheticPlaceholder && /*#__PURE__*/external_react_default.a.createElement(ScreenReaderContent_default.a, null, placeholder), haveSyntheticPlaceholder && /*#__PURE__*/external_react_default.a.createElement(StyledPlaceholder, {
+      })), haveSyntheticPlaceholder && /*#__PURE__*/external_react_default.a.createElement(ScreenReaderContent_default.a, null, placeholder), haveSyntheticPlaceholder && /*#__PURE__*/external_react_default.a.createElement(StyledPlaceholder, {
         $endAdornmentWidth: this.state.endAdornmentWidth,
         $hasBothAdornment: hasStartAdornment && hasEndAdornment // used to calculate the max-width
         ,
@@ -1341,35 +1210,21 @@ module.exports = require("@splunk/react-ui/ScreenReaderContent");
 
 /***/ }),
 
-/***/ 15:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-ui/EventListener");
-
-/***/ }),
-
-/***/ 17:
+/***/ 16:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Button");
 
 /***/ }),
 
-/***/ 2:
-/***/ (function(module, exports) {
-
-module.exports = require("react");
-
-/***/ }),
-
-/***/ 20:
+/***/ 19:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return CrossMark; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_react_icons_Close__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(22);
+/* harmony import */ var _splunk_react_icons_Close__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(21);
 /* harmony import */ var _splunk_react_icons_Close__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_Close__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _ThemedIcon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
 /* harmony import */ var _SVG__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6);
@@ -1412,49 +1267,35 @@ function CrossMark(props) {
 
 /***/ }),
 
-/***/ 22:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-icons/Close");
-
-/***/ }),
-
-/***/ 24:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-icons/SVG");
-
-/***/ }),
-
-/***/ 3:
+/***/ 2:
 /***/ (function(module, exports) {
 
-module.exports = require("styled-components");
+module.exports = require("react");
 
 /***/ }),
 
-/***/ 4:
+/***/ 21:
 /***/ (function(module, exports) {
 
-module.exports = require("lodash");
+module.exports = require("@splunk/react-icons/Close");
 
 /***/ }),
 
-/***/ 40:
+/***/ 24:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/ui-utils/style");
+module.exports = require("@splunk/react-icons/SVG");
 
 /***/ }),
 
-/***/ 44:
+/***/ 29:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Search; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_react_icons_Search__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(51);
+/* harmony import */ var _splunk_react_icons_Search__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(41);
 /* harmony import */ var _splunk_react_icons_Search__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_Search__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _ThemedIcon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
 /* harmony import */ var _SVG__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6);
@@ -1497,20 +1338,41 @@ function Search(props) {
 
 /***/ }),
 
-/***/ 5:
+/***/ 3:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/ui-utils/i18n");
+module.exports = require("styled-components");
+
+/***/ }),
+
+/***/ 32:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/ui-utils/style");
 
 /***/ }),
 
-/***/ 51:
+/***/ 4:
+/***/ (function(module, exports) {
+
+module.exports = require("lodash");
+
+/***/ }),
+
+/***/ 41:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/Search");
 
 /***/ }),
 
+/***/ 5:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/ui-utils/i18n");
+
+/***/ }),
+
 /***/ 6:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -1654,6 +1516,13 @@ Icon.defaultProps = defaultProps;
 
 /***/ }),
 
+/***/ 78:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/ControlGroup");
+
+/***/ }),
+
 /***/ 8:
 /***/ (function(module, exports) {