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

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

package/es/Textarea/utils/getSizingData.js

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

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

package/es/Textarea/utils/ownerWindow.js

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

package/es/Textarea/utils/updateState.js

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

package/es/Tooltip/Tooltip.js

@@ -1,10 +1,11 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import { getLibraryConfig } from '../Provider/Config';
-import style from './Tooltip.module.css';
-import ResizeObserver from '../Responsive/ResizeObserver';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import { getLibraryConfig } from "../Provider/Config";
+import ResizeObserver from "../Responsive/ResizeObserver";
 import selectn from 'selectn';
+import { whiteSpaceClassMapping } from "../utils/cssUtils";
+import style from "./Tooltip.module.css";
 export default class Tooltip extends React.Component {
   constructor(props) {
     super(props);
@@ -192,7 +193,8 @@ export default class Tooltip extends React.Component {
 
         let isHtml = titleDiv.getAttribute('data-ishtml');
         let dataTooltipnoArrow = titleDiv.getAttribute('data-tooltip-noarrow') === 'true' ? true : false;
-        let dataTooltipWrap = titleDiv.getAttribute('data-title-wrap') === 'true' ? true : false;
+        let dataTooltipWrap = titleDiv.getAttribute('data-title-wrap') || 'normal'; // values: normal, pre, pre-wrap, pre-line, nowrap, break-spaces
+
         let clientRect = titleDiv.getBoundingClientRect();
         let boxLayout = this.getClientRectOfContEl(containerElement);
         this.setState({
@@ -481,7 +483,15 @@ export default class Tooltip extends React.Component {
     } = this.props;
     let arrowStyle = isArrowHorizontal ? isArrowRight ? style.arrowRight : style.arrowLeft : isArrowDown ? style.arrowDown : style.arrowUp;
     title = title ? title.trim() : null;
-    let tooltipCss = `${style.tooltipcont} ${dataTooltipWrap ? style.tooltipWrapCont : style.tooltipNormalCont}`;
+    let tooltipWhiteSpaceModification = dataTooltipWrap;
+
+    if (dataTooltipWrap == 'pre') {
+      tooltipWhiteSpaceModification = 'preWrap';
+    } else if (dataTooltipWrap == 'nowrap') {
+      tooltipWhiteSpaceModification = 'normal';
+    }
+
+    let tooltipCss = `${style.tooltipcont} ${whiteSpaceClassMapping[tooltipWhiteSpaceModification]}`;
     return title ? /*#__PURE__*/React.createElement("div", {
       className: `${customClass} ${style.tooltiptext}`,
       style: {

package/es/Tooltip/Tooltip.module.css

@@ -26,14 +26,6 @@
   border-color: transparent;
   border-radius: var(--zd_size4);
 }
-
-.tooltipWrapCont {
-  white-space: pre-wrap;
-}
-
-.tooltipNormalCont {
-  white-space: normal;
-}
 .tooltiparrow {
   content: '';
   position: absolute;

package/es/VelocityAnimation/VelocityAnimation/VelocityAnimation.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
 import { VelocityComponent } from 'velocity-react';
 import 'velocity-animate/velocity.ui';
-import LibraryContext from '../../Provider/LibraryContextInit';
+import LibraryContext from "../../Provider/LibraryContextInit";
 export default class VelocityAnimation extends React.Component {
   constructor(props) {
     super(props);

package/es/VelocityAnimation/VelocityAnimation/__tests__/VelocityAnimation.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import VelocityAnimation from '../VelocityAnimation';
+import VelocityAnimation from "../VelocityAnimation";
 describe('VelocityAnimation', () => {
   test('rendering the defult props', () => {
     const {

package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
 import { VelocityTransitionGroup } from 'velocity-react';
 import 'velocity-animate/velocity.ui';
-import LibraryContext from '../../Provider/LibraryContextInit';
+import LibraryContext from "../../Provider/LibraryContextInit";
 
 function clearProps(props) {
   let newProps = Object.assign({}, props);