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

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)
       }));
     }
   }]);

package/lib/Textarea/Textarea.module.css

@@ -12,6 +12,7 @@
   /* textarea placeholder default variable */
   --textarea_placeholder_text_color: var(--zdt_textarea_placeholder_text);
 }
+
 .basic {
   composes: varClass;
   -webkit-appearance: none;
@@ -22,119 +23,169 @@
   color: var(--textarea_text_color);
   cursor: var(--textarea_cursor);
 }
+
 .basic, .noBorder {
   border-width: var(--textarea_border_width);
 }
+
 .basic::placeholder {
   color: var(--textarea_placeholder_text_color);
 }
+
 .basic::-webkit-placeholder {
   color: var(--textarea_placeholder_text_color);
 }
+
 .basic::-moz-placeholder {
   color: var(--textarea_placeholder_text_color);
 }
+
 .basic::-ms-placeholder {
   color: var(--textarea_placeholder_text_color);
 }
+
 .basic:disabled {
   --textarea_cursor: not-allowed;
   --textarea_text_color: var(--zdt_textarea_default_text);
 }
+
 .readonly {
   --textarea_cursor: not-allowed;
 }
+
 .resizeX {
   composes: resizeX from '../common/common.module.css';
 }
+
 .resizeY {
   composes: resizeY from '../common/common.module.css';
 }
+
 .noresize {
   composes: resizenone from '../common/common.module.css';
 }
+
 .resizeboth {
   composes: resizeboth from '../common/common.module.css';
 }
+
 /* css:lineheight-validation:ignore */
 .container {
   composes: basic;
-  transition: border var(--zd_transition2) linear 0s,
+  transition: .3s;
+  /* transition: border var(--zd_transition2) linear 0s,
     height var(--zd_transition2) linear 0s;
-  -moz-transition: border var(--zd_transition2) linear 0s,
+  -webkit-transition: border var(--zd_transition2) linear 0s,
     height var(--zd_transition2) linear 0s;
+  -moz-transition: border var(--zd_transition2) linear 0s,
+    height var(--zd_transition2) linear 0s; */
   width: 100% ;
   max-width: 100% ;
   min-width: var(--zd_size100) ;
   font-size: var(--textarea_font_size);
   line-height: var(--textarea_line_height);
   height: var(--textarea_height);
-  -webkit-transition: border var(--zd_transition2) linear 0s,
-    height var(--zd_transition2) linear 0s;
   border-style: solid;
   background-color: var(--zdt_textarea_default_bg);
   border-color: var(--textarea_border_color);
   padding: var(--textarea_padding);
 }
+
 .needBorder {
   --textarea_border_width: 0 0 1px 0;
 }
+
 .borderColor_transparent {
   --textarea_border_color: var(--zdt_textarea_transparent_border);
 }
+
 .borderColor_default {
   --textarea_border_color: var(--zdt_textarea_default_border);
 }
+
 .effect:hover {
   --textarea_border_color: var(--zdt_textarea_hover_border);
 }
+
 .effect:focus {
   --textarea_border_color: var(--zdt_textarea_focus_border);
 }
+
 .xsmall,
 .xmedium {
   vertical-align: middle;
 }
+
 .xsmall {
   --textarea_font_size: var(--zd_font_size14);
   --textarea_padding: var(--zd_size4) 0 var(--zd_size2);
   --textarea_height: var(--zd_size28);
   --textarea_line_height: 1.3572;
 }
+
 .xmedium {
   --textarea_font_size: var(--zd_font_size13);
   --textarea_padding: var(--zd_size4) 0 var(--zd_size2);
   --textarea_height: var(--zd_size25);
   --textarea_line_height: 1.3077;
 }
+
 .small {
   --textarea_height: var(--zd_size30);
   --textarea_padding: var(--zd_size2) 0;
 }
+
 .smallanimated:focus,
 .xsmallanimated:focus,
 .xmediumanimated:focus {
   --textarea_height: var(--zd_size70);
 }
+
 .medium {
   --textarea_height: var(--zd_size88);
   --textarea_padding: var(--zd_size2);
 }
+
 .large {
   --textarea_height: var(--zd_size45);
   --textarea_padding: var(--zd_size2);
 }
+
 .largeanimated:focus {
   --textarea_height: var(--zd_size220);
 }
+
 .xlarge {
   --textarea_height: var(--zd_size184);
 }
+
 .default {
   font-family: var(--zd_regular);
   --textarea_text_color: var(--zdt_textarea_black_text);
 }
+
 .primary {
   composes: semibold from '../common/common.module.css';
   --textarea_text_color: var(--zdt_textarea_black_text);
 }
+
+.forceHiddenStyle {
+  /* Visibility needed to hide the extra text area on iPads */
+  visibility: hidden;
+  /* Remove from the content flow */
+  position: absolute;
+  /* Ignore the scrollbar width */
+  overflow: hidden;
+  height: 0 ;
+  top: 0 ;
+  /* Create a new layer, increase the isolation of the computed values */
+  transform: translateZ(0);
+}
+
+[dir=ltr] .forceHiddenStyle {
+  left: 0 ;
+}
+
+[dir=rtl] .forceHiddenStyle {
+  right: 0 ;
+}