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

package/es/Textarea/TextareaOne.js

@@ -1,349 +0,0 @@
-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/utils/calculateNodeHeight.js

@@ -1,58 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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

@@ -1,24 +0,0 @@
-// 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;
-}

package/es/Textarea/utils/getSizingData.js

@@ -1,27 +0,0 @@
-import ownerWindow from "./ownerWindow";
-
-const getStyleValue = value => {
-  return parseInt(value, 10) || 0;
-};
-
-const getSizingData = node => {
-  const containerWindow = ownerWindow(node);
-  const computedStyle = containerWindow.getComputedStyle(node);
-
-  if (computedStyle === null) {
-    return null;
-  }
-
-  const boxSizing = computedStyle.boxSizing;
-  const paddingSize = getStyleValue(computedStyle.paddingBottom) + getStyleValue(computedStyle.paddingTop);
-  const borderSize = getStyleValue(computedStyle.borderBottomWidth) + getStyleValue(computedStyle.borderTopWidth);
-  return {
-    boxSizing,
-    paddingSize,
-    borderSize,
-    containerWindow,
-    computedStyle
-  };
-};
-
-export default getSizingData;

package/es/Textarea/utils/ownerDocument.js

@@ -1,5 +0,0 @@
-const ownerDocument = node => {
-  return node && node.ownerDocument || document;
-};
-
-export default ownerDocument;

package/es/Textarea/utils/ownerWindow.js

@@ -1,8 +0,0 @@
-import ownerDocument from "./ownerDocument";
-
-const ownerWindow = node => {
-  const document = ownerDocument(node);
-  return document.defaultView || window;
-};
-
-export default ownerWindow;

package/es/Textarea/utils/updateState.js

@@ -1,30 +0,0 @@
-const updateState = (prevState, newState, renderRef) => {
-  const {
-    height,
-    overflow
-  } = newState;
-  const renders = renderRef; // Need a large enough difference to update the height.
-  // This prevents infinite rendering loop.
-
-  if (renders.current < 20 && (height > 0 && Math.abs((prevState.height || 0) - height) > 1 || prevState.overflow !== overflow)) {
-    renders.current += 1;
-    return {
-      overflow,
-      height
-    };
-  } // 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;
-};
-
-export default updateState;