@zohodesk/components 1.0.0-temp-206.5 → 1.0.0-temp-207

package/lib/Responsive/CustomResponsive.js

@@ -62,8 +62,7 @@ function ResponsiveSender(props) {
   // variables
   var children = props.children,
       domRefKey = props.domRefKey,
-      responsiveId = props.responsiveId,
-      elementRef = props.elementRef;
+      responsiveId = props.responsiveId;
 
   function init() {
     var size = {
@@ -93,13 +92,7 @@ function ResponsiveSender(props) {
     var observer = new _ResizeObserver["default"](onResize);
 
     function containerRef(node) {
-      if (!elementRef) {
-        observer.replaceObservationElement(node);
-      }
-    }
-
-    if (elementRef) {
-      observer.replaceObservationElement(elementRef);
+      observer.replaceObservationElement(node);
     }
 
     return {
@@ -108,7 +101,7 @@ function ResponsiveSender(props) {
     };
   }
 
-  var _useMemo = (0, _react.useMemo)(init, [elementRef]),
+  var _useMemo = (0, _react.useMemo)(init, []),
       containerRef = _useMemo.containerRef,
       childContext = _useMemo.childContext;
 
@@ -132,10 +125,10 @@ function ResponsiveSender(props) {
   }, function (totalContext) {
     return /*#__PURE__*/_react["default"].createElement(ResponsiveContext.Provider, {
       value: totalContext
-    }, !elementRef ? /*#__PURE__*/_react["default"].createElement(_RefWrapper["default"], {
+    }, /*#__PURE__*/_react["default"].createElement(_RefWrapper["default"], {
       domRefKey: domRefKey,
       ref: containerRef
-    }, children) : children);
+    }, children));
   });
 }
 

package/lib/Responsive/RefWrapper.js

@@ -1,5 +1,7 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,8 +19,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 function setRef(refFunc, value) {
   if (typeof refFunc === 'function') {
     refFunc(value);
@@ -35,8 +35,7 @@ var DOMRefWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props, refFunc
 
   var refKey = typeof ele.type !== 'string' ? domRefKey : 'ref'; // const setAttribute = useCallback(node => {
 
-  var eleRealRefFunc = refKey == 'ref' ? ele.ref : ele.props[refKey];
-  console.log(_typeof(ele.type), 'typeof ele.typetypeof ele.typetypeof ele.type', refKey, ele, eleRealRefFunc);
+  var eleRealRefFunc = ele.props[refKey];
   var setAttribute = (0, _react.useCallback)(function (ref) {
     setRef(refFunc, ref);
     setRef(eleRealRefFunc, ref);

package/lib/Responsive/props/propTypes.js

@@ -12,8 +12,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 var CustomResponsiveSender_propTypes = {
   children: _propTypes["default"].any.isRequired,
   domRefKey: _propTypes["default"].string,
-  responsiveId: _propTypes["default"].string,
-  elementRef: _propTypes["default"].element
+  responsiveId: _propTypes["default"].string
 };
 exports.CustomResponsiveSender_propTypes = CustomResponsiveSender_propTypes;
 var CustomResponsiveReceiver_propTypes = {

package/lib/Tab/Tabs.js

@@ -442,7 +442,9 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "moreTabSelect",
     value: function moreTabSelect(tab, value, index, e) {
-      var onSelect = this.props.onSelect;
+      var _this$props7 = this.props,
+          onSelect = _this$props7.onSelect,
+          closePopupOnly = _this$props7.closePopupOnly;
 
       if (e && e.target && e.target.parentElement.tagName === 'A' && (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)) {
         (0, _Common.cancelBubblingEffect)(e);
@@ -451,7 +453,7 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
 
       e.preventDefault();
       onSelect(tab);
-      this.togglePopup();
+      closePopupOnly();
     }
   }, {
     key: "onScroll",
@@ -463,11 +465,11 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "togglePopup",
     value: function togglePopup(e) {
-      var _this$props7 = this.props,
-          boxPosition = _this$props7.boxPosition,
-          togglePopup = _this$props7.togglePopup,
-          align = _this$props7.align,
-          removeClose = _this$props7.removeClose;
+      var _this$props8 = this.props,
+          boxPosition = _this$props8.boxPosition,
+          togglePopup = _this$props8.togglePopup,
+          align = _this$props8.align,
+          removeClose = _this$props8.removeClose;
       removeClose && removeClose(e);
       var popupPosition = align === 'vertical' ? 'bottomLeft' : 'rightTop';
       boxPosition = boxPosition ? boxPosition : popupPosition;
@@ -547,37 +549,36 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
     value: function renderTabs(mainTabs, moreTabs, isVirtual) {
       var _this8 = this;
 
-      var _this$props8 = this.props,
-          selectedTab = _this$props8.selectedTab,
-          moreButtonClass = _this$props8.moreButtonClass,
-          moreButtonActiveClass = _this$props8.moreButtonActiveClass,
-          moreBoxClass = _this$props8.moreBoxClass,
-          menuItemClass = _this$props8.menuItemClass,
-          itemClass = _this$props8.itemClass,
-          itemActiveClass = _this$props8.itemActiveClass,
-          iconName = _this$props8.iconName,
-          isPopupReady = _this$props8.isPopupReady,
-          isPopupOpen = _this$props8.isPopupOpen,
-          getContainerRef = _this$props8.getContainerRef,
-          showTitleInMoreOptions = _this$props8.showTitleInMoreOptions,
-          onSelect = _this$props8.onSelect,
-          moreContainerClass = _this$props8.moreContainerClass,
-          align = _this$props8.align,
-          type = _this$props8.type,
-          isAnimate = _this$props8.isAnimate,
-          needTabBorder = _this$props8.needTabBorder,
-          needAppearance = _this$props8.needAppearance,
-          iconSize = _this$props8.iconSize,
-          getTargetRef = _this$props8.getTargetRef,
-          position = _this$props8.position,
-          customProps = _this$props8.customProps,
-          getCustomDropBoxHeaderPlaceHolder = _this$props8.getCustomDropBoxHeaderPlaceHolder,
-          dataSelectorId = _this$props8.dataSelectorId,
-          dataId = _this$props8.dataId,
-          placeHolderText = _this$props8.placeHolderText,
-          searchBoxSize = _this$props8.searchBoxSize,
-          ariaTitleId = _this$props8.ariaTitleId,
-          removeClose = _this$props8.removeClose;
+      var _this$props9 = this.props,
+          selectedTab = _this$props9.selectedTab,
+          moreButtonClass = _this$props9.moreButtonClass,
+          moreButtonActiveClass = _this$props9.moreButtonActiveClass,
+          moreBoxClass = _this$props9.moreBoxClass,
+          menuItemClass = _this$props9.menuItemClass,
+          itemClass = _this$props9.itemClass,
+          itemActiveClass = _this$props9.itemActiveClass,
+          iconName = _this$props9.iconName,
+          isPopupReady = _this$props9.isPopupReady,
+          isPopupOpen = _this$props9.isPopupOpen,
+          getContainerRef = _this$props9.getContainerRef,
+          showTitleInMoreOptions = _this$props9.showTitleInMoreOptions,
+          onSelect = _this$props9.onSelect,
+          moreContainerClass = _this$props9.moreContainerClass,
+          align = _this$props9.align,
+          type = _this$props9.type,
+          isAnimate = _this$props9.isAnimate,
+          needTabBorder = _this$props9.needTabBorder,
+          needAppearance = _this$props9.needAppearance,
+          iconSize = _this$props9.iconSize,
+          getTargetRef = _this$props9.getTargetRef,
+          position = _this$props9.position,
+          customProps = _this$props9.customProps,
+          getCustomDropBoxHeaderPlaceHolder = _this$props9.getCustomDropBoxHeaderPlaceHolder,
+          dataSelectorId = _this$props9.dataSelectorId,
+          dataId = _this$props9.dataId,
+          placeHolderText = _this$props9.placeHolderText,
+          searchBoxSize = _this$props9.searchBoxSize,
+          removeClose = _this$props9.removeClose;
       var searchValue = this.state.searchValue;
       var _customProps$DropBoxP = customProps.DropBoxProps,
           DropBoxProps = _customProps$DropBoxP === void 0 ? {} : _customProps$DropBoxP,
@@ -710,21 +711,21 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props9 = this.props,
-          style = _this$props9.style,
-          className = _this$props9.className,
-          dataId = _this$props9.dataId,
-          highlightClass = _this$props9.highlightClass,
-          type = _this$props9.type,
-          isAnimate = _this$props9.isAnimate,
-          needTabBorder = _this$props9.needTabBorder,
-          needBorder = _this$props9.needBorder,
-          needPadding = _this$props9.needPadding,
-          align = _this$props9.align,
-          needAppearance = _this$props9.needAppearance,
-          children = _this$props9.children,
-          containerClass = _this$props9.containerClass,
-          dataSelectorId = _this$props9.dataSelectorId;
+      var _this$props10 = this.props,
+          style = _this$props10.style,
+          className = _this$props10.className,
+          dataId = _this$props10.dataId,
+          highlightClass = _this$props10.highlightClass,
+          type = _this$props10.type,
+          isAnimate = _this$props10.isAnimate,
+          needTabBorder = _this$props10.needTabBorder,
+          needBorder = _this$props10.needBorder,
+          needPadding = _this$props10.needPadding,
+          align = _this$props10.align,
+          needAppearance = _this$props10.needAppearance,
+          children = _this$props10.children,
+          containerClass = _this$props10.containerClass,
+          dataSelectorId = _this$props10.dataSelectorId;
       var _this$state2 = this.state,
           totalDimension = _this$state2.totalDimension,
           tabDimensions = _this$state2.tabDimensions,

package/lib/Tab/Tabs.module.css

@@ -141,7 +141,7 @@
 }
 
 .emptyStateContainer {
-  padding-bottom: var(--zd_size25);
+  padding-bottom: var(--zd_size15) ;
 }
 
 .emptyStateTitle {
@@ -163,5 +163,5 @@
 }
 
 .listWrapper {
-  padding: var(--zd_size10) 0 ;
+  padding-top: var(--zd_size10) ;
 }

package/lib/Tab/props/propTypes.js

@@ -106,8 +106,8 @@ var Tabs_propTypes = {
   dataSelectorId: _propTypes["default"].string,
   placeHolderText: _propTypes["default"].string,
   searchBoxSize: _propTypes["default"].string,
-  ariaTitleId: _propTypes["default"].string,
-  searchErrorText: _propTypes["default"].string
+  searchErrorText: _propTypes["default"].string,
+  closePopupOnly: _propTypes["default"].func
 };
 exports.Tabs_propTypes = Tabs_propTypes;
 var TabWrapper_propTypes = {

package/lib/Textarea/Textarea.js

@@ -9,10 +9,20 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
 var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _debounce = _interopRequireDefault(require("./utils/debounce"));
+
+var _calculateNodeHeight2 = _interopRequireDefault(require("./utils/calculateNodeHeight"));
+
+var _ownerWindow = _interopRequireDefault(require("./utils/ownerWindow"));
+
+var _updateState = _interopRequireDefault(require("./utils/updateState"));
+
 var _TextareaModule = _interopRequireDefault(require("./Textarea.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -50,20 +60,26 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
     _classCallCheck(this, Textarea);
 
     _this = _super.call(this, props);
-    _this.onChange = _this.onChange.bind(_assertThisInitialized(_this));
-    _this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this));
+    _this.hiddenTextareaRef = /*#__PURE__*/_react["default"].createRef();
+    _this.rendersRef = /*#__PURE__*/_react["default"].createRef();
+    _this.sizingData = /*#__PURE__*/_react["default"].createRef(null);
+    _this.rAF = null;
+    _this.resizeObserver = null;
+    _this.debounceHandleResize = null;
     _this.onBlur = _this.onBlur.bind(_assertThisInitialized(_this));
+    _this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this));
+    _this.inputRef = _this.inputRef.bind(_assertThisInitialized(_this));
+    _this.isEmpty = _this.isEmpty.bind(_assertThisInitialized(_this));
+    _this.syncHeight = _this.syncHeight.bind(_assertThisInitialized(_this));
+    _this.onChange = _this.onChange.bind(_assertThisInitialized(_this));
+    _this.handleResize = _this.handleResize.bind(_assertThisInitialized(_this));
+    _this.rAFHandleResize = _this.rAFHandleResize.bind(_assertThisInitialized(_this));
+    _this.mountingPhase = _this.mountingPhase.bind(_assertThisInitialized(_this));
+    _this.unMountingPhase = _this.unMountingPhase.bind(_assertThisInitialized(_this));
     return _this;
   }
 
   _createClass(Textarea, [{
-    key: "onChange",
-    value: function onChange(e) {
-      e && e.preventDefault();
-      var onChange = this.props.onChange;
-      onChange && onChange(e.target.value, e);
-    }
-  }, {
     key: "onBlur",
     value: function onBlur(e) {
       e && e.preventDefault();
@@ -76,59 +92,181 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
       var onKeyDown = this.props.onKeyDown;
       onKeyDown && onKeyDown(e);
     }
+  }, {
+    key: "inputRef",
+    value: function inputRef(e) {
+      var getRef = this.props.getRef;
+      this.textareaRef = e;
+      getRef && getRef(e);
+    }
+  }, {
+    key: "isEmpty",
+    value: function isEmpty(obj) {
+      return obj === undefined || obj === null || Object.keys(obj).length === 0 || obj.height === 0 && !obj.overflow;
+    }
+  }, {
+    key: "syncHeight",
+    value: function syncHeight() {
+      var _this$props = this.props,
+          minRows = _this$props.minRows,
+          maxRows = _this$props.maxRows;
+
+      var _calculateNodeHeight = (0, _calculateNodeHeight2["default"])({
+        minRows: minRows,
+        maxRows: maxRows,
+        textareaEle: this.textareaRef,
+        hiddenTextareaEle: this.hiddenTextareaRef.current
+      }),
+          height = _calculateNodeHeight.height,
+          overflow = _calculateNodeHeight.overflow;
+
+      var newState = {
+        height: height,
+        overflow: overflow
+      };
+
+      if (this.isEmpty(newState)) {
+        return;
+      }
+
+      this.sizingData.current = (0, _updateState["default"])(this.sizingData.current, newState, this.rendersRef); // this.textareaRef.style.setProperty('height',`${this.sizingData.current.height}px`);
+
+      this.textareaRef.style.height = "".concat(this.sizingData.current.height, "px");
+      this.textareaRef.style.overflowY = "".concat(this.sizingData.current.overflow ? 'hidden' : 'auto');
+    }
+  }, {
+    key: "onChange",
+    value: function onChange(e) {
+      var _this2 = this;
+
+      e && e.preventDefault();
+      var onChange = this.props.onChange;
+      this.rendersRef.current = 0;
+      onChange && onChange(e.target.value, e);
+      requestAnimationFrame(function () {
+        _this2.syncHeight();
+      });
+    }
+  }, {
+    key: "handleResize",
+    value: function handleResize() {
+      this.rendersRef.current = 0;
+      this.syncHeight();
+    }
+  }, {
+    key: "rAFHandleResize",
+    value: function rAFHandleResize() {
+      var _this3 = this;
+
+      cancelAnimationFrame(this.rAF);
+      this.rAF = requestAnimationFrame(function () {
+        _this3.handleResize();
+      });
+    }
+  }, {
+    key: "mountingPhase",
+    value: function mountingPhase() {
+      var input = this.textareaRef;
+      var containerWindow = (0, _ownerWindow["default"])(input);
+      this.debounceHandleResize = (0, _debounce["default"])(this.handleResize);
+      containerWindow.addEventListener("resize", this.debounceHandleResize);
+
+      if (typeof ResizeObserver !== "undefined") {
+        this.resizeObserver = new ResizeObserver(this.rAFHandleResize);
+        this.resizeObserver.observe(input);
+      }
+    }
+  }, {
+    key: "unMountingPhase",
+    value: function unMountingPhase() {
+      var input = this.textareaRef;
+      var containerWindow = (0, _ownerWindow["default"])(input);
+      this.debounceHandleResize.clear();
+      cancelAnimationFrame(this.rAF);
+      containerWindow.removeEventListener("resize", this.debounceHandleResize);
+
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect();
+      }
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.sizingData.current = {
+        height: 0,
+        overflow: false
+      };
+      this.mountingPhase();
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.sizingData.current = null;
+      this.unMountingPhase();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.text !== this.props.text) {
+        this.rendersRef.current = 0;
+        this.syncHeight();
+      }
+    }
   }, {
     key: "render",
     value: function render() {
-      var _this$props = this.props,
-          size = _this$props.size,
-          placeHolder = _this$props.placeHolder,
-          needBorder = _this$props.needBorder,
-          text = _this$props.text,
-          isDisabled = _this$props.isDisabled,
-          resize = _this$props.resize,
-          maxLength = _this$props.maxLength,
-          animated = _this$props.animated,
-          variant = _this$props.variant,
-          getRef = _this$props.getRef,
-          onFocus = _this$props.onFocus,
-          dataId = _this$props.dataId,
-          dataSelectorId = _this$props.dataSelectorId,
-          isReadOnly = _this$props.isReadOnly,
-          needAppearance = _this$props.needAppearance,
-          needReadOnlyStyle = _this$props.needReadOnlyStyle,
-          borderColor = _this$props.borderColor,
-          needEffect = _this$props.needEffect,
-          autoFocus = _this$props.autoFocus,
-          htmlId = _this$props.htmlId,
-          a11y = _this$props.a11y,
-          customClass = _this$props.customClass;
+      var _this$props2 = this.props,
+          size = _this$props2.size,
+          placeHolder = _this$props2.placeHolder,
+          needBorder = _this$props2.needBorder,
+          text = _this$props2.text,
+          isDisabled = _this$props2.isDisabled,
+          resize = _this$props2.resize,
+          maxLength = _this$props2.maxLength,
+          animated = _this$props2.animated,
+          variant = _this$props2.variant,
+          getRef = _this$props2.getRef,
+          onFocus = _this$props2.onFocus,
+          dataId = _this$props2.dataId,
+          dataSelectorId = _this$props2.dataSelectorId,
+          isReadOnly = _this$props2.isReadOnly,
+          needAppearance = _this$props2.needAppearance,
+          needReadOnlyStyle = _this$props2.needReadOnlyStyle,
+          borderColor = _this$props2.borderColor,
+          needEffect = _this$props2.needEffect,
+          autoFocus = _this$props2.autoFocus,
+          htmlId = _this$props2.htmlId,
+          a11y = _this$props2.a11y,
+          customClass = _this$props2.customClass,
+          _this$props2$minRows = _this$props2.minRows,
+          minRows = _this$props2$minRows === void 0 ? 3 : _this$props2$minRows;
       var ariaLabel = a11y.ariaLabel,
           ariaLabelledby = a11y.ariaLabelledby;
       var resizes = {
-        horizontal: 'resizeX',
-        vertical: 'resizeY',
-        both: 'resizeboth',
-        none: 'noresize'
+        horizontal: "resizeX",
+        vertical: "resizeY",
+        both: "resizeboth",
+        none: "noresize"
       };
       var options = {};
 
       if (isReadOnly) {
-        options.readOnly = 'readOnly';
+        options.readOnly = "readOnly";
       }
 
       if (isDisabled) {
-        options.disabled = 'disabled';
+        options.disabled = "disabled";
       }
 
       if (autoFocus) {
         options.autoFocus = true;
       }
 
-      var classList = needAppearance ? "".concat(_TextareaModule["default"].container, " ").concat(_TextareaModule["default"][size], " ").concat(_TextareaModule["default"][variant], " ").concat(needBorder ? _TextareaModule["default"].needBorder : _TextareaModule["default"].noBorder, " ").concat(resize ? _TextareaModule["default"][resizes[resize]] : _TextareaModule["default"][resizes.none], "  ").concat(animated ? "".concat(_TextareaModule["default"]["".concat(size, "animated")]) : '', "   ").concat(isDisabled && !needEffect || isReadOnly && !needEffect ? '' : _TextareaModule["default"].effect) : "".concat(_TextareaModule["default"].basic);
-      return /*#__PURE__*/_react["default"].createElement("textarea", _extends({
+      var classList = needAppearance ? "".concat(_TextareaModule["default"].container, " ").concat(_TextareaModule["default"][size], " ").concat(_TextareaModule["default"][variant], " ").concat(needBorder ? _TextareaModule["default"].needBorder : _TextareaModule["default"].noBorder, " ").concat(resize ? _TextareaModule["default"][resizes[resize]] : _TextareaModule["default"][resizes.none], "  ").concat(animated ? "".concat(_TextareaModule["default"]["".concat(size, "animated")]) : "", "   ").concat(isDisabled && !needEffect || isReadOnly && !needEffect ? "" : _TextareaModule["default"].effect) : "".concat(_TextareaModule["default"].basic);
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("textarea", _extends({
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledby,
-        className: "".concat(customClass, " ").concat(isReadOnly && needReadOnlyStyle ? _TextareaModule["default"].readonly : '', " ").concat(classList, " ").concat(_TextareaModule["default"]["borderColor_".concat(borderColor)]),
+        className: "".concat(customClass, " ").concat(isReadOnly && needReadOnlyStyle ? _TextareaModule["default"].readonly : "", " ").concat(classList, " ").concat(_TextareaModule["default"]["borderColor_".concat(borderColor)]),
         placeholder: placeHolder
       }, options, {
         "data-id": dataId,
@@ -138,10 +276,17 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
         onKeyDown: this.onKeyDown,
         onFocus: onFocus,
         onBlur: this.onBlur,
-        ref: getRef,
+        ref: this.inputRef,
         value: text,
         id: htmlId,
-        "data-selector-id": dataSelectorId
+        "data-selector-id": dataSelectorId,
+        rows: minRows
+      })), /*#__PURE__*/_react["default"].createElement("textarea", {
+        "aria-hidden": true,
+        readOnly: true,
+        ref: this.hiddenTextareaRef,
+        tabIndex: -1,
+        className: "".concat(customClass, " ").concat(isReadOnly && needReadOnlyStyle ? _TextareaModule["default"].readonly : "", " ").concat(classList, " ").concat(_TextareaModule["default"]["borderColor_".concat(borderColor)], " ").concat(_TextareaModule["default"].forceHiddenStyle)
       }));
     }
   }]);