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

package/es/Tag/Tag.js

@@ -1,12 +1,12 @@
 import React, { PureComponent } from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { Icon } from '@zohodesk/icons';
-import Avatar from "../Avatar/Avatar";
-import { Container } from "../Layout";
-import Button from "../semantic/Button/Button";
-import { getUniqueId } from "../Provider/IdProvider";
-import style from "./Tag.module.css";
+import Avatar from '../Avatar/Avatar';
+import { Container } from '../Layout';
+import Button from '../semantic/Button/Button';
+import { getUniqueId } from '../Provider/IdProvider';
+import style from './Tag.module.css';
 /*
  * eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium',
  * 'closedanger', 'closeprimary', 'default', 'danger', 'secondary',

package/es/Tag/__tests__/Tag.spec.js

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

package/es/TextBox/TextBox.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';
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['xmedium', 'medium', 'small', 'default', 'primary', 'secondary'] }] */
 
-import style from "./TextBox.module.css";
+import style from './TextBox.module.css';
 export default class TextBox extends React.PureComponent {
   constructor(props) {
     super(props);

package/es/TextBox/__tests__/TextBox.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Textbox from "../Textbox";
+import Textbox from '../Textbox';
 import { render } from "@testing-library/react";
 describe('Textbox component', () => {
   const type = ['text', 'password', 'number'];

package/es/TextBoxIcon/TextBoxIcon.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import TextBox from "../TextBox/TextBox";
-import { Container, Box } from "../Layout";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import TextBox from '../TextBox/TextBox';
+import { Container, Box } from '../Layout';
 import { Icon } from '@zohodesk/icons';
-import btnStyle from "../semantic/Button/semanticButton.module.css";
-import style from "./TextBoxIcon.module.css";
+import btnStyle from '../semantic/Button/semanticButton.module.css';
+import style from './TextBoxIcon.module.css';
 /* eslint-disable react/forbid-component-props */
 
 export default class TextBoxIcon extends React.Component {

package/es/TextBoxIcon/__tests__/TextBoxIcon.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import TextBoxIcon from "../TextBoxIcon";
+import TextBoxIcon from '../TextBoxIcon';
 import { render } from "@testing-library/react";
 describe('TextBoxIcon component', () => {
   const type = ['text', 'password', 'number'];

package/es/TextBoxIcon/props/propTypes.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { propTypes as TextBox_propTypes } from "../../TextBox/props/propTypes";
+import { propTypes as TextBox_propTypes } from '../../TextBox/props/propTypes';
 export const propTypes = { ...TextBox_propTypes,
   borderColor: PropTypes.oneOf(['transparent', 'default', 'error']),
   children: PropTypes.node,

package/es/Textarea/Textarea.js

@@ -1,33 +1,23 @@
-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";
+import React from 'react';
+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 style from './Textarea.module.css';
 export default class Textarea extends React.Component {
   constructor(props) {
     super(props);
-    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);
-    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);
+    this.onKeyDown = this.onKeyDown.bind(this);
+    this.onBlur = this.onBlur.bind(this);
+  }
+
+  onChange(e) {
+    e && e.preventDefault();
+    let {
+      onChange
+    } = this.props;
+    onChange && onChange(e.target.value, e);
   }
 
   onBlur(e) {
@@ -45,116 +35,6 @@ 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;
-    const value = e.target.value;
-    requestAnimationFrame(() => {
-      this.syncHeight();
-      onChange && onChange(value, e);
-    });
-  }
-
-  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,
@@ -178,38 +58,37 @@ export default class Textarea extends React.Component {
       autoFocus,
       htmlId,
       a11y,
-      customClass,
-      minRows
+      customClass
     } = 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(React.Fragment, null, /*#__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("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,
@@ -219,18 +98,11 @@ export default class Textarea extends React.Component {
       onKeyDown: this.onKeyDown,
       onFocus: onFocus,
       onBlur: this.onBlur,
-      ref: this.inputRef,
+      ref: getRef,
       value: text,
       id: htmlId,
-      "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}`
-    }));
+      "data-selector-id": dataSelectorId
+    });
   }
 
 }

package/es/Textarea/Textarea.module.css

@@ -12,7 +12,6 @@
   /* textarea placeholder default variable */
   --textarea_placeholder_text_color: var(--zdt_textarea_placeholder_text);
 }
-
 .basic {
   composes: varClass;
   -webkit-appearance: none;
@@ -23,169 +22,119 @@
   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: .3s;
-  /* transition: border var(--zd_transition2) linear 0s,
-    height var(--zd_transition2) linear 0s;
-  -webkit-transition: border var(--zd_transition2) linear 0s,
+  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; */
+    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/__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/defaultProps.js

@@ -13,6 +13,5 @@ export const defaultProps = {
   autoFocus: false,
   customClass: '',
   a11y: {},
-  dataSelectorId: 'textarea',
-  minRows: 3
+  dataSelectorId: 'textarea'
 };

package/es/Textarea/props/propTypes.js

@@ -27,9 +27,5 @@ export const propTypes = {
   a11y: PropTypes.shape({
     ariaLabel: PropTypes.string,
     ariaLabelledby: PropTypes.string
-  }),
-  minRows: PropTypes.number,
-  // the below props are used in TextareaOne.js
-  maxRows: PropTypes.number,
-  inlineStyle: PropTypes.string
+  })
 };

package/es/Tooltip/Tooltip.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import { getLibraryConfig } from "../Provider/Config";
-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";
+import { whiteSpaceClassMapping } from '../utils/cssUtils';
+import style from './Tooltip.module.css';
 export default class Tooltip extends React.Component {
   constructor(props) {
     super(props);

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

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

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

package/es/VelocityAnimation/index.js

@@ -1,2 +1,2 @@
-export { default as VelocityAnimation } from "./VelocityAnimation/VelocityAnimation";
-export { default as VelocityAnimationGroup } from "./VelocityAnimationGroup/VelocityAnimationGroup";
+export { default as VelocityAnimation } from './VelocityAnimation/VelocityAnimation';
+export { default as VelocityAnimationGroup } from './VelocityAnimationGroup/VelocityAnimationGroup';