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

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 ;
+}

package/es/Textarea/TextareaOne.js

@@ -0,0 +1,349 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+/* 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 ownerWindow from "./ownerWindow";
+import debounce from "./debounce";
+const styles = {
+  shadow: {
+    // 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,
+    left: 0,
+    // Create a new layer, increase the isolation of the computed values
+    transform: "translateZ(0)"
+  }
+};
+export default class Textarea extends React.Component {
+  constructor(props) {
+    super(props);
+    this.onChange = this.onChange.bind(this);
+    this.onKeyDown = this.onKeyDown.bind(this);
+    this.onBlur = this.onBlur.bind(this);
+    this.inputRef = this.inputRef.bind(this);
+    this.getUpdatedState = this.getUpdatedState.bind(this);
+    this.isEmpty = this.isEmpty.bind(this);
+    this.getStyleValue = this.getStyleValue.bind(this);
+    this.updateState = this.updateState.bind(this);
+    this.syncHeight = this.syncHeight.bind(this);
+    this.syncHeightWithFlushSync = this.syncHeightWithFlushSync.bind(this);
+    this.handleResize = this.handleResize.bind(this);
+    this.rAFHandleResize = this.rAFHandleResize.bind(this);
+    this.rAF = null;
+    this.resizeObserver = null;
+    this.debounceHandleResize = null;
+    this.shadowRef = /*#__PURE__*/React.createRef();
+    this.rendersRef = /*#__PURE__*/React.createRef();
+    this.state = {
+      outerHeightStyle: 0,
+      overflow: false
+    };
+  }
+
+  onBlur(e) {
+    e && e.preventDefault();
+    let {
+      onBlur
+    } = this.props;
+    onBlur && onBlur(e.target.value, e);
+    this.syncHeight();
+  }
+
+  onKeyDown(e) {
+    let {
+      onKeyDown
+    } = this.props;
+    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.outerHeightStyle === 0 && !obj.overflow;
+  }
+
+  getStyleValue(value) {
+    return parseInt(value, 10) || 0;
+  }
+
+  getUpdatedState() {
+    const {
+      minRows = 1,
+      maxRows = 5,
+      placeHolder
+    } = this.props;
+    const input = this.textareaRef;
+    const containerWindow = ownerWindow(input);
+    const computedStyle = containerWindow.getComputedStyle(input); // If input's width is shrunk and it's not visible, don't sync height.
+
+    if (computedStyle.width === "0px") {
+      return {
+        outerHeightStyle: 0
+      };
+    }
+
+    const inputShallow = this.shadowRef.current;
+    inputShallow.style.width = computedStyle.width;
+    inputShallow.value = input.value || placeHolder || "x"; // if (inputShallow.value.slice(-1) === "\n") {
+    // Certain fonts which overflow the line height will cause the textarea
+    // to report a different scrollHeight depending on whether the last line
+    // is empty. Make it non-empty to avoid this issue.
+    // inputShallow.value += " ";
+    // }
+
+    const boxSizing = computedStyle.boxSizing;
+    const padding = this.getStyleValue(computedStyle.paddingBottom) + this.getStyleValue(computedStyle.paddingTop);
+    const border = this.getStyleValue(computedStyle.borderBottomWidth) + this.getStyleValue(computedStyle.borderTopWidth); // The height of the inner content
+
+    const innerHeight = inputShallow.scrollHeight; // Measure height of a textarea with a single row
+
+    inputShallow.value = "x";
+    const singleRowHeight = inputShallow.scrollHeight; // The height of the outer content
+
+    let outerHeight = innerHeight;
+
+    if (minRows) {
+      outerHeight = Math.max(Number(minRows) * singleRowHeight, outerHeight);
+    }
+
+    if (maxRows) {
+      outerHeight = Math.min(Number(maxRows) * singleRowHeight, outerHeight);
+    }
+
+    outerHeight = Math.max(outerHeight, singleRowHeight); // Take the box sizing into account for applying this value as a style.
+
+    const outerHeightStyle = outerHeight + (boxSizing === "border-box" ? padding + border : 0);
+    const overflow = Math.abs(outerHeight - innerHeight) <= 1;
+    console.log("outerHeightStyle-->", outerHeightStyle);
+    return {
+      outerHeightStyle,
+      overflow
+    };
+  }
+
+  updateState(prevState, newState) {
+    const {
+      outerHeightStyle,
+      overflow
+    } = newState;
+    const renders = this.rendersRef; // Need a large enough difference to update the height.
+    // This prevents infinite rendering loop.
+
+    if (renders.current < 20 && (outerHeightStyle > 0 && Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1 || prevState.overflow !== overflow)) {
+      renders.current += 1;
+      return {
+        overflow,
+        outerHeightStyle
+      };
+    } // if (process.env.NODE_ENV !== "production") {
+    //   if (renders.current === 20) {
+    //     console.error(
+    //       [
+    //         "MUI: Too many re-renders. The layout is unstable.",
+    //         "TextareaAutosize limits the number of renders to prevent an infinite loop."
+    //       ].join("\n")
+    //     )
+    //   }
+    // }
+
+
+    return prevState;
+  }
+
+  syncHeight() {
+    const newState = this.getUpdatedState();
+
+    if (this.isEmpty(newState)) {
+      return;
+    }
+
+    this.setState(prevState => this.updateState(prevState, newState));
+  }
+
+  onChange(e) {
+    e && e.preventDefault();
+    let {
+      onChange,
+      text
+    } = this.props;
+    this.rendersRef.current = 0;
+    const isControlled = text !== undefined;
+
+    if (!isControlled) {
+      this.syncHeight();
+    }
+
+    onChange && onChange(e.target.value, e);
+  }
+
+  syncHeightWithFlushSync() {
+    const newState = this.getUpdatedState();
+
+    if (this.isEmpty(newState)) {
+      return;
+    }
+
+    ReactDOM.flushSync(() => {
+      this.setState(prevState => this.updateState(prevState, newState));
+    });
+  }
+
+  handleResize() {
+    this.rendersRef.current = 0;
+    this.syncHeightWithFlushSync();
+  }
+
+  rAFHandleResize() {
+    cancelAnimationFrame(this.rAF);
+    this.rAF = requestAnimationFrame(() => {
+      this.handleResize();
+    });
+  }
+
+  componentDidMount() {
+    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);
+    }
+  }
+
+  componentWillUnmount() {
+    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();
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.text !== this.props.text) {
+      this.rendersRef.current = 0;
+      this.syncHeight();
+    }
+  }
+
+  render() {
+    let {
+      size,
+      placeHolder,
+      needBorder,
+      text,
+      isDisabled,
+      resize,
+      maxLength,
+      animated,
+      variant,
+      getRef,
+      onFocus,
+      dataId,
+      dataSelectorId,
+      isReadOnly,
+      needAppearance,
+      needReadOnlyStyle,
+      borderColor,
+      needEffect,
+      autoFocus,
+      htmlId,
+      a11y,
+      customClass,
+      maxRows,
+      minRows = 3,
+      inlineStyle
+    } = this.props;
+    let {
+      ariaLabel,
+      ariaLabelledby
+    } = a11y;
+    let resizes = {
+      horizontal: "resizeX",
+      vertical: "resizeY",
+      both: "resizeboth",
+      none: "noresize"
+    };
+    let options = {};
+
+    if (isReadOnly) {
+      options.readOnly = "readOnly";
+    }
+
+    if (isDisabled) {
+      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(React.Fragment, null, /*#__PURE__*/React.createElement("textarea", {
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      className: `${customClass} ${isReadOnly && needReadOnlyStyle ? style.readonly : ""} ${classList} ${style[`borderColor_${borderColor}`]}`,
+      placeholder: placeHolder,
+      ...options,
+      "data-id": dataId,
+      "data-test-id": dataId,
+      maxLength: maxLength,
+      onChange: this.onChange,
+      onKeyDown: this.onKeyDown,
+      onFocus: onFocus,
+      onBlur: this.onBlur,
+      ref: this.inputRef,
+      value: text,
+      id: htmlId,
+      "data-selector-id": dataSelectorId,
+      rows: minRows,
+      style: {
+        height: this.state.outerHeightStyle,
+        // Need a large enough difference to allow scrolling.
+        // This prevents infinite rendering loop.
+        overflow: this.state.overflow ? "hidden" : undefined,
+        ...inlineStyle
+      }
+    }), /*#__PURE__*/React.createElement("textarea", {
+      "aria-hidden": true,
+      readOnly: true,
+      ref: this.shadowRef,
+      tabIndex: -1,
+      className: `${customClass} ${classList} ${style[`borderColor_${borderColor}`]}`,
+      style: { ...styles.shadow,
+        ...inlineStyle,
+        paddingTop: 0,
+        paddingBottom: 0
+      }
+    }));
+  }
+
+}
+Textarea.defaultProps = defaultProps;
+Textarea.propTypes = propTypes; // if (__DOCS__) {
+//   Textarea.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide',
+//     external: true,
+//     description: ' '
+//   };
+// }

package/es/Textarea/__tests__/Textarea.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Textarea from '../Textarea';
+import Textarea from "../Textarea";
 import { render } from "@testing-library/react";
 describe('Textarea component', () => {
   const size = ['xsmall', 'small', 'xmedium', 'medium', 'large'];

package/es/Textarea/props/propTypes.js

@@ -27,5 +27,8 @@ export const propTypes = {
   a11y: PropTypes.shape({
     ariaLabel: PropTypes.string,
     ariaLabelledby: PropTypes.string
-  })
+  }),
+  maxRows: PropTypes.string,
+  minRows: PropTypes.string,
+  inlineStyle: PropTypes.string
 };

package/es/Textarea/utils/calculateNodeHeight.js

@@ -0,0 +1,58 @@
+import getSizingData from "./getSizingData";
+export default function calculateNodeHeight(_ref) {
+  let {
+    minRows = 1,
+    maxRows = 5,
+    textareaEle,
+    hiddenTextareaEle
+  } = _ref;
+  const {
+    computedStyle,
+    paddingSize,
+    borderSize,
+    boxSizing
+  } = getSizingData(textareaEle);
+  const isBorderBox = boxSizing === "border-box"; // If input's width is shrunk and it's not visible, don't sync height.
+
+  if (computedStyle.width === '0px') {
+    return {
+      height: 0
+    };
+  }
+
+  let hiddenTextarea = hiddenTextareaEle;
+  hiddenTextarea.style.width = computedStyle.width;
+  hiddenTextarea.value = textareaEle.value || textareaEle.placeholder || "x";
+
+  if (hiddenTextarea.value.slice(-1) === "\n") {
+    //   // Certain fonts which overflow the line height will cause the textarea
+    //   // to report a different scrollHeight depending on whether the last line
+    //   // is empty. Make it non-empty to avoid this issue.
+    hiddenTextarea.value += " ";
+  } // The height of the inner content
+
+
+  const innerHeight = hiddenTextarea.scrollHeight; // Measure height of a textarea with a single row
+
+  hiddenTextarea.value = "x";
+  const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize || parseInt(computedStyle.lineHeight); // The height of the outer content
+
+  let outerHeight = innerHeight;
+
+  if (minRows) {
+    outerHeight = Math.max(Number(minRows) * singleRowHeight, outerHeight);
+  }
+
+  if (maxRows) {
+    outerHeight = Math.min(Number(maxRows) * singleRowHeight, outerHeight);
+  }
+
+  outerHeight = Math.max(outerHeight, singleRowHeight); // Take the box sizing into account for applying this value as a style.
+
+  const height = outerHeight + (isBorderBox ? paddingSize + borderSize : 0);
+  const overflow = Math.abs(outerHeight - innerHeight) <= 1;
+  return {
+    height,
+    overflow
+  };
+}

package/es/Textarea/utils/calculateNodeHeightOne.js

@@ -0,0 +1,66 @@
+import getSizingData from "./getSizingData";
+
+const getHeight = (node, _ref) => {
+  let {
+    borderSize,
+    paddingSize,
+    isBorderBox
+  } = _ref;
+  const height = node.scrollHeight;
+
+  if (isBorderBox) {
+    // border-box: add border, since height = content + padding + border
+    return height + borderSize;
+  } // remove padding, since height = content
+
+
+  return height - paddingSize;
+};
+
+export default function calculateNodeHeightOne(_ref2) {
+  let {
+    minRows = 1,
+    maxRows = 5,
+    textareaEle,
+    hiddenTextareaEle
+  } = _ref2;
+  const {
+    computedStyle,
+    paddingSize,
+    borderSize,
+    boxSizing
+  } = getSizingData(hiddenTextareaEle);
+  const isBorderBox = boxSizing === "border-box"; // If input's width is shrunk and it's not visible, don't sync height.
+
+  if (computedStyle.width === '0px') {
+    return {
+      height: 0
+    };
+  }
+
+  let hiddenTextarea = hiddenTextareaEle; // The height of the inner content
+
+  let height = getHeight(hiddenTextarea, {
+    paddingSize,
+    borderSize,
+    isBorderBox
+  });
+  const innerHeight = getHeight(hiddenTextarea, {
+    paddingSize,
+    borderSize,
+    isBorderBox
+  }); // measure height of a textarea with a single row
+
+  hiddenTextarea.value = textareaEle.value || textareaEle.placeholder || "x";
+  hiddenTextarea.style.width = computedStyle.width;
+  const rowHeight = hiddenTextarea.scrollHeight - paddingSize;
+  let minHeight = rowHeight * minRows + (isBorderBox ? paddingSize + borderSize : 0);
+  let maxHeight = rowHeight * maxRows + (isBorderBox ? paddingSize + borderSize : 0);
+  height = Math.min(maxHeight, Math.max(minHeight, height)); // Take the box sizing into account for applying this value as a style.
+
+  const overflow = Math.abs(height - innerHeight) <= 1;
+  return {
+    height,
+    overflow
+  };
+}

package/es/Textarea/utils/debounce.js

@@ -0,0 +1,24 @@
+// Corresponds to 10 frames at 60 Hz.
+export default function debounce(func) {
+  let wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 166;
+  let timeout;
+
+  function debounced() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    const later = () => {
+      func.apply(this, args);
+    };
+
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  }
+
+  debounced.clear = () => {
+    clearTimeout(timeout);
+  };
+
+  return debounced;
+}