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

package/es/Textarea/Textarea.js

@@ -1,23 +1,33 @@
-import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import React from "react";
+import ReactDOM from "react-dom";
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import debounce from "./utils/debounce";
+import calculateNodeHeight from "./utils/calculateNodeHeight";
+import ownerWindow from "./utils/ownerWindow";
+import updateState from "./utils/updateState";
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['resizeX', 'resizeY', 'noresize', 'resizeboth', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'default', 'primary'] }] */
 
-import style from './Textarea.module.css';
+import style from "./Textarea.module.css";
 export default class Textarea extends React.Component {
   constructor(props) {
     super(props);
-    this.onChange = this.onChange.bind(this);
-    this.onKeyDown = this.onKeyDown.bind(this);
+    this.hiddenTextareaRef = /*#__PURE__*/React.createRef();
+    this.rendersRef = /*#__PURE__*/React.createRef();
+    this.sizingData = /*#__PURE__*/React.createRef(null);
+    this.rAF = null;
+    this.resizeObserver = null;
+    this.debounceHandleResize = null;
     this.onBlur = this.onBlur.bind(this);
-  }
-
-  onChange(e) {
-    e && e.preventDefault();
-    let {
-      onChange
-    } = this.props;
-    onChange && onChange(e.target.value, e);
+    this.onKeyDown = this.onKeyDown.bind(this);
+    this.inputRef = this.inputRef.bind(this);
+    this.isEmpty = this.isEmpty.bind(this);
+    this.syncHeight = this.syncHeight.bind(this);
+    this.onChange = this.onChange.bind(this);
+    this.handleResize = this.handleResize.bind(this);
+    this.rAFHandleResize = this.rAFHandleResize.bind(this);
+    this.mountingPhase = this.mountingPhase.bind(this);
+    this.unMountingPhase = this.unMountingPhase.bind(this);
   }
 
   onBlur(e) {
@@ -35,6 +45,115 @@ export default class Textarea extends React.Component {
     onKeyDown && onKeyDown(e);
   }
 
+  inputRef(e) {
+    let {
+      getRef
+    } = this.props;
+    this.textareaRef = e;
+    getRef && getRef(e);
+  }
+
+  isEmpty(obj) {
+    return obj === undefined || obj === null || Object.keys(obj).length === 0 || obj.height === 0 && !obj.overflow;
+  }
+
+  syncHeight() {
+    const {
+      minRows,
+      maxRows
+    } = this.props;
+    const {
+      height,
+      overflow
+    } = calculateNodeHeight({
+      minRows: minRows,
+      maxRows: maxRows,
+      textareaEle: this.textareaRef,
+      hiddenTextareaEle: this.hiddenTextareaRef.current
+    });
+    const newState = {
+      height: height,
+      overflow: overflow
+    };
+
+    if (this.isEmpty(newState)) {
+      return;
+    }
+
+    this.sizingData.current = updateState(this.sizingData.current, newState, this.rendersRef); // this.textareaRef.style.setProperty('height',`${this.sizingData.current.height}px`);
+
+    this.textareaRef.style.height = `${this.sizingData.current.height}px`;
+    this.textareaRef.style.overflowY = `${this.sizingData.current.overflow ? 'hidden' : 'auto'}`;
+  }
+
+  onChange(e) {
+    e && e.preventDefault();
+    let {
+      onChange
+    } = this.props;
+    this.rendersRef.current = 0;
+    onChange && onChange(e.target.value, e);
+    requestAnimationFrame(() => {
+      this.syncHeight();
+    });
+  }
+
+  handleResize() {
+    this.rendersRef.current = 0;
+    this.syncHeight();
+  }
+
+  rAFHandleResize() {
+    cancelAnimationFrame(this.rAF);
+    this.rAF = requestAnimationFrame(() => {
+      this.handleResize();
+    });
+  }
+
+  mountingPhase() {
+    const input = this.textareaRef;
+    const containerWindow = ownerWindow(input);
+    this.debounceHandleResize = debounce(this.handleResize);
+    containerWindow.addEventListener("resize", this.debounceHandleResize);
+
+    if (typeof ResizeObserver !== "undefined") {
+      this.resizeObserver = new ResizeObserver(this.rAFHandleResize);
+      this.resizeObserver.observe(input);
+    }
+  }
+
+  unMountingPhase() {
+    const input = this.textareaRef;
+    const containerWindow = ownerWindow(input);
+    this.debounceHandleResize.clear();
+    cancelAnimationFrame(this.rAF);
+    containerWindow.removeEventListener("resize", this.debounceHandleResize);
+
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+  }
+
+  componentDidMount() {
+    this.sizingData.current = {
+      height: 0,
+      overflow: false
+    };
+    this.mountingPhase();
+  }
+
+  componentWillUnmount() {
+    this.sizingData.current = null;
+    this.unMountingPhase();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.text !== this.props.text) {
+      this.rendersRef.current = 0;
+      this.syncHeight();
+    }
+  }
+
   render() {
     let {
       size,
@@ -58,37 +177,38 @@ export default class Textarea extends React.Component {
       autoFocus,
       htmlId,
       a11y,
-      customClass
+      customClass,
+      minRows = 3
     } = this.props;
     let {
       ariaLabel,
       ariaLabelledby
     } = a11y;
     let resizes = {
-      horizontal: 'resizeX',
-      vertical: 'resizeY',
-      both: 'resizeboth',
-      none: 'noresize'
+      horizontal: "resizeX",
+      vertical: "resizeY",
+      both: "resizeboth",
+      none: "noresize"
     };
     let options = {};
 
     if (isReadOnly) {
-      options.readOnly = 'readOnly';
+      options.readOnly = "readOnly";
     }
 
     if (isDisabled) {
-      options.disabled = 'disabled';
+      options.disabled = "disabled";
     }
 
     if (autoFocus) {
       options.autoFocus = true;
     }
 
-    let classList = needAppearance ? `${style.container} ${style[size]} ${style[variant]} ${needBorder ? style.needBorder : style.noBorder} ${resize ? style[resizes[resize]] : style[resizes.none]}  ${animated ? `${style[`${size}animated`]}` : ''}   ${isDisabled && !needEffect || isReadOnly && !needEffect ? '' : style.effect}` : `${style.basic}`;
-    return /*#__PURE__*/React.createElement("textarea", {
+    let classList = needAppearance ? `${style.container} ${style[size]} ${style[variant]} ${needBorder ? style.needBorder : style.noBorder} ${resize ? style[resizes[resize]] : style[resizes.none]}  ${animated ? `${style[`${size}animated`]}` : ""}   ${isDisabled && !needEffect || isReadOnly && !needEffect ? "" : style.effect}` : `${style.basic}`;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("textarea", {
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledby,
-      className: `${customClass} ${isReadOnly && needReadOnlyStyle ? style.readonly : ''} ${classList} ${style[`borderColor_${borderColor}`]}`,
+      className: `${customClass} ${isReadOnly && needReadOnlyStyle ? style.readonly : ""} ${classList} ${style[`borderColor_${borderColor}`]}`,
       placeholder: placeHolder,
       ...options,
       "data-id": dataId,
@@ -98,11 +218,18 @@ export default class Textarea extends 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.createElement("textarea", {
+      "aria-hidden": true,
+      readOnly: true,
+      ref: this.hiddenTextareaRef,
+      tabIndex: -1,
+      className: `${customClass} ${isReadOnly && needReadOnlyStyle ? style.readonly : ""} ${classList} ${style[`borderColor_${borderColor}`]} ${style.forceHiddenStyle}`
+    }));
   }
 
 }

package/es/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 ;
+}