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

package/es/Tab/Tab.js

@@ -2,11 +2,11 @@
 
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['text', 'tabAlpha', 'alphaActive', 'gammaActive', 'betaActive', 'deltaActive', 'tabGamma', 'tabBeta', 'tabDelta',', 'specialActive', 'tabSpecial', 'alphaActive_border', 'gammaActive_border', 'betaActive_border', 'deltaActive_border'] }] */
 import React, { useMemo, useCallback } from 'react';
-import { Tab_defaultProps } from './props/defaultProps';
-import { Tab_propTypes } from './props/propTypes';
-import { Box, Container } from '../Layout';
-import { cs } from '../utils/Common';
-import styles from './Tab.module.css';
+import { Tab_defaultProps } from "./props/defaultProps";
+import { Tab_propTypes } from "./props/propTypes";
+import { Box, Container } from "../Layout";
+import { cs } from "../utils/Common";
+import styles from "./Tab.module.css";
 const tabTypes = {
   alpha: {
     active: 'alphaActive',

package/es/Tab/TabContent.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { TabContent_defaultProps } from './props/defaultProps';
-import { TabContent_propTypes } from './props/propTypes';
-import { Container } from '../Layout';
-import style from './TabContent.module.css';
+import { TabContent_defaultProps } from "./props/defaultProps";
+import { TabContent_propTypes } from "./props/propTypes";
+import { Container } from "../Layout";
+import style from "./TabContent.module.css";
 /* eslint-disable react/forbid-component-props */
 
 const TabContent = _ref => {

package/es/Tab/TabContentWrapper.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { TabContentWrapper_defaultProps } from './props/defaultProps';
-import { TabContentWrapper_propTypes } from './props/propTypes';
-import { Box } from '../Layout';
+import { TabContentWrapper_defaultProps } from "./props/defaultProps";
+import { TabContentWrapper_propTypes } from "./props/propTypes";
+import { Box } from "../Layout";
 /* eslint-disable react/forbid-component-props */
 
 const TabContentWrapper = _ref => {

package/es/Tab/TabWrapper.js

@@ -1,7 +1,7 @@
 import React, { useState, useCallback } from 'react';
-import { TabWrapper_defaultProps } from './props/defaultProps';
-import { TabWrapper_propTypes } from './props/propTypes';
-import { Container } from '../Layout';
+import { TabWrapper_defaultProps } from "./props/defaultProps";
+import { TabWrapper_propTypes } from "./props/propTypes";
+import { Container } from "../Layout";
 
 function TabWrapper(_ref) {
   let {

package/es/Tab/Tabs.js

@@ -9,20 +9,20 @@
 */
 import React from 'react';
 import EmptySearch from '@zohodesk/svg/lib/emptystate/version3/EmptySearch';
-import Tab from './Tab';
-import { Tabs_defaultProps } from './props/defaultProps';
-import { Tabs_propTypes } from './props/propTypes';
-import { remConvert, getTotalDimension, cs, bind, throttle, cancelBubblingEffect } from '../utils/Common';
-import { Box, Container } from '../Layout';
-import ResizeObserver from '../Responsive/ResizeObserver';
-import ListItem from '../ListItem/ListItem';
+import Tab from "./Tab";
+import { Tabs_defaultProps } from "./props/defaultProps";
+import { Tabs_propTypes } from "./props/propTypes";
+import { remConvert, getTotalDimension, cs, bind, throttle, cancelBubblingEffect } from "../utils/Common";
+import { Box, Container } from "../Layout";
+import ResizeObserver from "../Responsive/ResizeObserver";
+import ListItem from "../ListItem/ListItem";
 import { Icon } from '@zohodesk/icons';
-import tabsStyle from './Tabs.module.css';
-import Popup from '../Popup/Popup';
-import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
-import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
-import btnstyle from '../semantic/Button/semanticButton.module.css';
+import tabsStyle from "./Tabs.module.css";
+import Popup from "../Popup/Popup";
+import TextBoxIcon from "../TextBoxIcon/TextBoxIcon";
+import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
+import { ResponsiveReceiver } from "../Responsive/CustomResponsive";
+import btnstyle from "../semantic/Button/semanticButton.module.css";
 
 class Tabs extends React.Component {
   constructor(props) {
@@ -372,7 +372,8 @@ class Tabs extends React.Component {
 
   moreTabSelect(tab, value, index, e) {
     let {
-      onSelect
+      onSelect,
+      closePopupOnly
     } = this.props;
 
     if (e && e.target && e.target.parentElement.tagName === 'A' && (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)) {
@@ -382,7 +383,7 @@ class Tabs extends React.Component {
 
     e.preventDefault();
     onSelect(tab);
-    this.togglePopup();
+    closePopupOnly();
   }
 
   onScroll(e) {
@@ -511,7 +512,6 @@ class Tabs extends React.Component {
       dataId,
       placeHolderText,
       searchBoxSize,
-      ariaTitleId,
       removeClose
     } = this.props;
     const {

package/es/Tab/Tabs.module.css

@@ -141,7 +141,7 @@
 }
 
 .emptyStateContainer {
-  padding-bottom: var(--zd_size25);
+  padding-bottom: var(--zd_size15) ;
 }
 
 .emptyStateTitle {
@@ -163,5 +163,5 @@
 }
 
 .listWrapper {
-  padding: var(--zd_size10) 0 ;
+  padding-top: var(--zd_size10) ;
 }

package/es/Tab/__tests__/Tab.spec.js

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

package/es/Tab/__tests__/TabContent.spec.js

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

package/es/Tab/__tests__/TabContentWrapper.spec.js

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

package/es/Tab/__tests__/TabWrapper.spec.js

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

package/es/Tab/__tests__/Tabs.spec.js

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

package/es/Tab/index.js

@@ -1,5 +1,5 @@
-export { default as TabWrapper } from './TabWrapper';
-export { default as TabContentWrapper } from './TabContentWrapper';
-export { default as TabContent } from './TabContent';
-export { default as Tabs } from './Tabs';
-export { default as Tab } from './Tab';
+export { default as TabWrapper } from "./TabWrapper";
+export { default as TabContentWrapper } from "./TabContentWrapper";
+export { default as TabContent } from "./TabContent";
+export { default as Tabs } from "./Tabs";
+export { default as Tab } from "./Tab";

package/es/Tab/props/propTypes.js

@@ -93,8 +93,8 @@ export const Tabs_propTypes = {
   dataSelectorId: PropTypes.string,
   placeHolderText: PropTypes.string,
   searchBoxSize: PropTypes.string,
-  ariaTitleId: PropTypes.string,
-  searchErrorText: PropTypes.string
+  searchErrorText: PropTypes.string,
+  closePopupOnly: PropTypes.func
 };
 export const TabWrapper_propTypes = {
   align: PropTypes.oneOf(['vertical', 'horizontal']),

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,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}`
+    }));
   }
 
 }