@splunk/react-ui 4.9.0 → 4.12.0

package/Text.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 132);
+/******/ 	return __webpack_require__(__webpack_require__.s = 134);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,14 +101,14 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 111:
+/***/ 108:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-ui/ControlGroup");
+module.exports = require("@splunk/react-ui/TextArea");
 
 /***/ }),
 
-/***/ 12:
+/***/ 11:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -135,7 +135,7 @@ function updateReactRef(ref, current) {
 
 /***/ }),
 
-/***/ 132:
+/***/ 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__(31);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"
 var ScreenReaderContent_ = __webpack_require__(14);
@@ -171,94 +167,23 @@ var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReade
 var themes_ = __webpack_require__(0);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ControlGroup"
-var ControlGroup_ = __webpack_require__(111);
+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__(34);
 
 // 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 */
-
+var CrossMark = __webpack_require__(19);
 
-    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.
-
-    newHeight = Math.max(minHeight, newHeight);
-
-    if (height !== newHeight) {
-      return newHeight;
-    }
-  }
-
-  return false;
-}
 // EXTERNAL MODULE: ./src/utils/updateReactRef.ts
-var updateReactRef = __webpack_require__(12);
+var updateReactRef = __webpack_require__(11);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/SVG"
 var SVG_ = __webpack_require__(24);
@@ -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
@@ -421,7 +346,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,9 +355,13 @@ var StyledSearchIconWrapper = external_styled_components_default.a.span.withConf
 }), Object(themes_["pick"])({
   comfortable: '0 8px',
   compact: '0 6px'
-}), Object(themes_["pick"])({
-  prisma: Object(external_styled_components_["css"])(["color:", ";"], themes_["variables"].contentColorDisabled)
-}));
+}), 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 StyledBox = external_styled_components_default()(Box_default.a).withConfig({
   displayName: "TextStyles__StyledBox",
   componentId: "eg7n6t-2"
@@ -445,8 +374,8 @@ 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);
@@ -468,12 +397,12 @@ var StyledInputWrapper = external_styled_components_default.a.span.withConfig({
   prisma: themes_["variables"].transparent
 }), Object(themes_["pick"])({
   enterprise: '0px 10px',
-  prisma: '0px 14px'
-}), function (_ref2) {
-  var $hasEndAdornment = _ref2.$hasEndAdornment;
+  prisma: '0px 12px'
+}), 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 +413,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{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,8 +437,8 @@ 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;
+}, function (_ref9) {
+  var $multiline = _ref9.$multiline;
   return $multiline && Object(themes_["pick"])({
     enterprise: Object(external_styled_components_["css"])(["padding-right:0;"])
   });
@@ -528,8 +460,8 @@ var StyledInput = external_styled_components_default.a.input.withConfig({
 }), Object(themes_["pick"])({
   enterprise: themes_["variables"].spacingHalf,
   prisma: '14px'
-}), themes_["variables"].contentColorMuted, function (_ref9) {
-  var $error = _ref9.$error;
+}), themes_["variables"].contentColorMuted, function (_ref10) {
+  var $error = _ref10.$error;
   return $error && Object(external_styled_components_["css"])(["&,&:hover{color:", ";}"], Object(themes_["pick"])({
     enterprise: {
       light: themes_["variables"].errorColorD10,
@@ -537,8 +469,8 @@ var StyledInput = external_styled_components_default.a.input.withConfig({
     },
     prisma: themes_["variables"].contentColorActive
   }));
-}, function (_ref10) {
-  var disabled = _ref10.disabled;
+}, function (_ref11) {
+  var disabled = _ref11.disabled;
   return disabled && disabledStyles;
 }, Object(themes_["pick"])({
   enterprise: {
@@ -575,9 +507,9 @@ var StyledPlaceholder = external_styled_components_default.a.span.withConfig({
 }), themes_["variables"].lineHeight, Object(themes_["pick"])({
   enterprise: '10px',
   prisma: '14px'
-}), function (_ref11) {
-  var $hasStartAdornment = _ref11.$hasStartAdornment,
-      $startAdornmentWidth = _ref11.$startAdornmentWidth;
+}), function (_ref12) {
+  var $hasStartAdornment = _ref12.$hasStartAdornment,
+      $startAdornmentWidth = _ref12.$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',
@@ -588,9 +520,9 @@ var StyledPlaceholder = external_styled_components_default.a.span.withConfig({
       compact: '30px'
     }
   })));
-}, function (_ref12) {
-  var $hasEndAdornment = _ref12.$hasEndAdornment,
-      $endAdornmentWidth = _ref12.$endAdornmentWidth;
+}, function (_ref13) {
+  var $hasEndAdornment = _ref13.$hasEndAdornment,
+      $endAdornmentWidth = _ref13.$endAdornmentWidth;
   return $hasEndAdornment && ($endAdornmentWidth // calc(100% - padding - adorment width)
   ? Object(external_styled_components_["css"])(["max-width:calc( 100% - ", " - ", "px );"], Object(themes_["pick"])({
     enterprise: '10px',
@@ -608,10 +540,10 @@ var StyledPlaceholder = external_styled_components_default.a.span.withConfig({
       compact: '30px'
     }
   })));
-}, function (_ref13) {
-  var $hasBothAdornment = _ref13.$hasBothAdornment,
-      $endAdornmentWidth = _ref13.$endAdornmentWidth,
-      $startAdornmentWidth = _ref13.$startAdornmentWidth;
+}, function (_ref14) {
+  var $hasBothAdornment = _ref14.$hasBothAdornment,
+      $endAdornmentWidth = _ref14.$endAdornmentWidth,
+      $startAdornmentWidth = _ref14.$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"])({
@@ -627,8 +559,8 @@ 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 (_ref14) {
-  var $width = _ref14.$width;
+})(["", " ", ";"], 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',
@@ -643,8 +575,8 @@ 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 (_ref15) {
-  var $width = _ref15.$width;
+})(["", " ", ";"], adornmentHolder, function (_ref16) {
+  var $width = _ref16.$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',
@@ -668,11 +600,11 @@ var StyledAdornment = external_styled_components_default.a.div.withConfig({
     comfortable: '38px',
     compact: '30px'
   }
-}), function (_ref16) {
-  var $position = _ref16.$position;
+}), function (_ref17) {
+  var $position = _ref17.$position;
   return $position === 'start' ? Object(external_styled_components_["css"])(["top:1px;left:1px;"]) : Object(external_styled_components_["css"])(["top:1px;right:1px;"]);
-}, function (_ref17) {
-  var disabled = _ref17.disabled;
+}, function (_ref18) {
+  var disabled = _ref18.disabled;
   return disabled && disabledStyles;
 }, Object(themes_["pick"])({
   enterprise: Object(external_styled_components_["css"])(["margin-left:-1px;margin-right:-1px;"])
@@ -740,7 +672,6 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 
 
-
 /** @public */
 
 var propTypes = {
@@ -838,8 +769,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 +793,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 +873,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$;
 
@@ -1004,7 +913,7 @@ var Text_Text = /*#__PURE__*/function (_Component) {
       var clearButtonText = controlGroupLabel ? Object(i18n_["_"])("Clear ".concat(controlGroupLabel, " text field")) : Object(i18n_["_"])('Clear text field');
 
       if (!isPrisma && appearance === 'search') {
-        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, {
           appearance: isPrisma ? 'secondary' : 'pill',
           "data-test": "clear",
           inline: false,
@@ -1021,8 +930,10 @@ var Text_Text = /*#__PURE__*/function (_Component) {
         })));
       }
 
-      if (isPrisma && appearance === 'search' || canClear) {
-        return /*#__PURE__*/external_react_default.a.createElement(StyledAdornment, adornmentProps, /*#__PURE__*/external_react_default.a.createElement(StyledClearButton, {
+      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",
           appearance: isPrisma ? 'secondary' : 'pill',
           onClick: _this.handleClear,
@@ -1069,6 +980,11 @@ var Text_Text = /*#__PURE__*/function (_Component) {
       return undefined;
     });
 
+    _defineProperty(_assertThisInitialized(_this), "getDisplayValue", function () {
+      var displayValue = _this.isControlled() ? _this.props.value : _this.state.value;
+      return displayValue;
+    });
+
     _this.controlledExternally = Object(external_lodash_["has"])(props, 'value');
     _this.state = {
       value: props.defaultValue || '',
@@ -1084,25 +1000,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) {}
@@ -1143,8 +1054,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,
@@ -1181,12 +1090,11 @@ var Text_Text = /*#__PURE__*/function (_Component) {
       })), {}, {
         '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))));
-      var displayValue = this.isControlled() ? value : this.state.value;
+      var displayValue = this.getDisplayValue();
       var displayProps = {
         className: Object(style_["toClassName"])(className, inputClassName),
         $append: append || undefined,
@@ -1220,7 +1128,7 @@ var Text_Text = /*#__PURE__*/function (_Component) {
         },
         title: title,
         tabIndex: tabIndex,
-        type: multiline ? null : computedType,
+        type: computedType,
         value: displayValue,
         $error: error
       });
@@ -1232,6 +1140,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,
@@ -1244,53 +1157,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
         ,
@@ -1334,35 +1214,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);
@@ -1405,49 +1271,49 @@ function CrossMark(props) {
 
 /***/ }),
 
-/***/ 22:
+/***/ 2:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-icons/Close");
+module.exports = require("react");
 
 /***/ }),
 
-/***/ 24:
+/***/ 21:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-icons/SVG");
+module.exports = require("@splunk/react-icons/Close");
 
 /***/ }),
 
-/***/ 3:
+/***/ 24:
 /***/ (function(module, exports) {
 
-module.exports = require("styled-components");
+module.exports = require("@splunk/react-icons/SVG");
 
 /***/ }),
 
-/***/ 4:
+/***/ 3:
 /***/ (function(module, exports) {
 
-module.exports = require("lodash");
+module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 40:
+/***/ 31:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/ui-utils/style");
 
 /***/ }),
 
-/***/ 44:
+/***/ 34:
 /***/ (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);
@@ -1490,20 +1356,27 @@ function Search(props) {
 
 /***/ }),
 
-/***/ 5:
+/***/ 4:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/ui-utils/i18n");
+module.exports = require("lodash");
 
 /***/ }),
 
-/***/ 51:
+/***/ 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__) {
 
@@ -1647,6 +1520,13 @@ Icon.defaultProps = defaultProps;
 
 /***/ }),
 
+/***/ 78:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/ControlGroup");
+
+/***/ }),
+
 /***/ 8:
 /***/ (function(module, exports) {