@zohodesk/components 1.0.0-temp-162 → 1.0.0-temp-163

package/es/Avatar/Avatar.js

@@ -4,7 +4,6 @@ import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import { getInitial } from '../utils/getInitial';
 import AvatarSize from '../Provider/AvatarSize';
-import Typography from '../Typography/Typography';
 import style from './Avatar.module.css';
 /*
 1. need to change name into firstName lastName
@@ -151,13 +150,10 @@ export default class Avatar extends React.Component {
       "data-id": dataId,
       onClick: onClick,
       "data-selector-id": dataSelectorId
-    }, AvatarProps), showInitial && !showAlternateAvatar && /*#__PURE__*/React.createElement(Typography, {
+    }, AvatarProps), showInitial && !showAlternateAvatar && /*#__PURE__*/React.createElement("span", {
       className: `${style.initial}`,
-      dataId: `${dataId}_AvatarInitial`,
-      customProps: {
-        'data-selector-id': `${dataSelectorId}_AvatarInitial`
-      },
-      tagName: "span"
+      "data-id": `${dataId}_AvatarInitial`,
+      "data-selector-id": `${dataSelectorId}_AvatarInitial`
     }, initial), (showAvatar || showAlternateAvatar) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", {
       className: `${style.image} ${isAnimate ? style.animate : ''} ${needInnerBorder ? style.innerBorder : ''}`,
       "data-id": `${dataId}_AvatarImg`,

package/es/DateTime/CalendarView.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { Span_propTypes, CalendarView_propTypes } from './props/propTypes';
 import { CalendarView_defaultProps, Span_defaultProps } from './props/defaultProps';
 import { Container, Box } from '../Layout';
-import Typography from '../Typography/Typography';
 import style from './DateTime.module.css';
 import { getMonthEnd } from '../utils/datetime/common';
 import DaysRow from './DaysRow';
@@ -199,9 +198,7 @@ export class Span extends React.PureComponent {
       key: i,
       onClick: this.handleSelectChild,
       "aria-label": incremday
-    }, /*#__PURE__*/React.createElement(Typography, {
-      size: "13"
-    }, incremday));
+    }, incremday);
   }
 }
 Span.propTypes = Span_propTypes;

package/es/DateTime/DateTime.module.css

@@ -44,15 +44,13 @@
 
 .thArrow,
 .datesStr {
+  font-size: 13px;
   color: var(--zdt_datetime_datestr_text);
 }
 
 .thArrow, .datesStr {
   cursor: pointer;
 }
-.thArrow{
-   font-size: var(--zd_font_size13);
-}
 
 .thArrow:hover,
 .datesStr:hover {
@@ -96,6 +94,7 @@
 }
 
 .daysStr {
+  font-size: 10px;
   color: var(--zdt_datetime_daystr_text);
   text-transform: uppercase;
   composes: semibold;
@@ -202,6 +201,7 @@
 
 .text {
   composes: boxPadding;
+  font-size: 11px;
   text-transform: uppercase;
   color: var(--zdt_datetime_text);
   composes: semibold;
@@ -233,4 +233,4 @@
   border-radius: 3px;
   box-shadow: var(--zd_bs_dropbox_bottom);
   background-color: var(--zdt_dropbox_default_bg);
-}
+}

package/es/DateTime/DateTimePopupHeader.js

@@ -6,7 +6,7 @@ import React, { PureComponent } from 'react';
 /** ** Components *** */
 import { Container, Box } from '../Layout';
 import { Icon } from '@zohodesk/icons';
-import Typography from '../Typography/Typography';
+import Heading from '../Heading/Heading';
 
 /** ** CSS *** */
 import style from './DateTime.module.css';
@@ -58,11 +58,14 @@ export default class DateTimePopupHeader extends PureComponent {
       className: style.dateText,
       dataId: "selectYear",
       onClick: onOpenYearView
-    }, /*#__PURE__*/React.createElement(Typography, {
+    }, /*#__PURE__*/React.createElement(Heading, {
       className: style.thMonYear,
+      title: showMonthTxt,
       tagName: "h2",
-      size: "13"
-    }, showMonthTxt), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Icon, {
+      a11y: {
+        tabindex: '0'
+      }
+    }), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-GN-dropdown",
       size: "12",
       iconClass: style.downArrow

package/es/DateTime/DaysRow.js

@@ -7,7 +7,6 @@ import style from './DateTime.module.css';
 
 /** ** Components *** */
 import { Container, Box } from '../Layout';
-import Typography from '../Typography/Typography';
 export default class DaysRow extends PureComponent {
   render() {
     const {
@@ -20,11 +19,9 @@ export default class DaysRow extends PureComponent {
       className: style.days
     }, dayNames.map((dayName, index) => /*#__PURE__*/React.createElement(Box, {
       key: dayName,
+      className: `${style.daysStr} ${style.grid} ${index === 0 ? style.sunday : ''}`,
       "data-title": dayName,
       "aria-label": dayName
-    }, /*#__PURE__*/React.createElement(Typography, {
-      className: `${style.daysStr} ${style.grid} ${index === 0 ? style.sunday : ''}`,
-      size: "10"
-    }, " ", dayNamesShort[index]))));
+    }, dayNamesShort[index])));
   }
 }

package/es/DateTime/Time.js

@@ -5,7 +5,6 @@ import React, { PureComponent } from 'react';
 /**** Components ****/
 import { Container, Box } from '../Layout';
 import Select from '../Select/Select';
-import Typography from '../Typography/Typography';
 
 /** ** CSS *** */
 import style from './DateTime.module.css';
@@ -28,10 +27,8 @@ export default class Time extends PureComponent {
       amPm,
       is24Hour
     } = this.props;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
-      className: style.text,
-      tagName: "span",
-      size: "11"
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      className: style.text
     }, timeText), /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       align: "vertical",

package/es/DateTime/YearView.js

@@ -7,7 +7,7 @@ import { YearView_defaultProps } from './props/defaultProps';
 import { Virtualizer } from '@zohodesk/virtualizer';
 import { Container, Box } from '../Layout';
 import { Icon } from '@zohodesk/icons';
-import Typography from '../Typography/Typography';
+import Heading from '../Heading/Heading';
 /**** CSS ****/
 import style from './YearView.module.css';
 
@@ -52,12 +52,14 @@ class Year extends React.PureComponent {
       align: "vertical"
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true
-    }, /*#__PURE__*/React.createElement(Typography, {
+    }, /*#__PURE__*/React.createElement(Heading, {
       className: style.yearText,
-      tagName: "h2",
-      size: "11",
-      dataTitle: year
-    }, year)), /*#__PURE__*/React.createElement(Icon, {
+      title: year,
+      a11y: {
+        tabindex: '0'
+      },
+      tagName: "h4"
+    })), /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-arrowDownSingle",
       size: "7",
       isBold: true,
@@ -92,9 +94,7 @@ class Month extends React.PureComponent {
       onClick: this.handleClick,
       "data-title": hoverText,
       "aria-label": month
-    }, /*#__PURE__*/React.createElement(Typo, {
-      size: "12"
-    }, displayText));
+    }, displayText);
   }
 }
 export default class YearView extends React.PureComponent {

package/es/DateTime/YearView.module.css

@@ -8,6 +8,7 @@
 
 .month {
   width: 30.333%;
+  font-size: 12px;
   line-height: var(--zd_size26);
   height: 26px;
   color: var(--zdt_yearview_month_text);
@@ -47,6 +48,7 @@
 
 .yearText {
   color: var(--zdt_yearview_yeartext_text);
+  font-size: 11px;
 }
 
 .arrow {
@@ -61,6 +63,7 @@
 .isActive .yearText {
   font-family: var(--zd_semibold);
   color: var(--zdt_yearview_year_hover_text);
+  font-size: 11px;
 }
 
 .arrowActive {
@@ -93,4 +96,4 @@
 .toggleYear {
   height: 0;
   padding: 0;
-}
+}

package/es/Heading/Heading.js

@@ -7,21 +7,21 @@ export default class Heading extends React.Component {
     let {
       tagName,
       className,
+      onClick,
+      onDoubleClick,
       title,
       dataTitle,
       dataId,
-      a11y,
-      customProps,
-      size,
-      children
+      a11y
     } = this.props;
     return /*#__PURE__*/React.createElement(tagName, {
-      className: `${style.reset} ${style[`size${size}`]}  ${className}`,
+      className: `${style.reset} ${className}`,
+      onClick,
+      onDoubleClick,
       'data-title': dataTitle || title,
       'data-id': dataId,
-      ...customProps,
       ...a11y
-    }, title, children);
+    }, title);
   }
 }
 Heading.propTypes = propTypes;

package/es/Heading/Heading.module.css

@@ -2,71 +2,4 @@
   font-size: initial;
   font-weight: initial;
   margin: initial;
-}
-
-.size8{
-  font-size: 8px;
-}
-.size9{
-  font-size: 9px;
-}
-.size10{
-  font-size: 10px;
-}
-.size11{
-  font-size: 11px;
-}
-.size12{
-  font-size: 12px;
-}
-.size13{
-  font-size: 13px;
-}
-.size14{
-  font-size: 14px;
-}
-.size15{
-  font-size: 15px;
-}
-.size16{
-  font-size: 16px;
-}
-.size17{
-  font-size: 17px;
-}
-.size18{
-  font-size: 18px;
-}
-.size19{
-  font-size: 19px;
-}
-.size20{
-  font-size: 20px;
-}
-.size21{
-  font-size: 21px;
-}
-.size22{
-  font-size: 22px;
-}
-.size23{
-  font-size: 23px;
-}
-.size24{
-  font-size: 24px;
-}
-.size25{
-  font-size: 25px;
-}
-.size26{
-  font-size: 26px;
-}
-.size30{
-  font-size: 30px;
-}
-.size50{
-  font-size: 50px;
-}
-.sizeinherit{
-  font-size: inherit;
-}
+}

package/es/Heading/props/defaultProps.js

@@ -1,7 +1,5 @@
 export const defaultProps = {
   tagName: 'h1',
   a11y: {},
-  className: '',
-  customProps: {},
-  size: 'inherit'
+  className: ''
 };

package/es/Heading/props/propTypes.js

@@ -5,8 +5,7 @@ export const propTypes = {
   title: PropTypes.string,
   dataId: PropTypes.string,
   dataTitle: PropTypes.string,
-  customProps: PropTypes.object,
-  children: PropTypes.node,
-  a11y: PropTypes.object,
-  size: PropTypes.oneOf(['8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '30', '50', 'inherit'])
+  onClick: PropTypes.func,
+  onDoubleClick: PropTypes.func,
+  a11y: PropTypes.object
 };

package/es/Label/Label.js

@@ -4,7 +4,6 @@
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-import Typography from '../Typography/Typography';
 import style from './Label.module.css';
 import colors from './LabelColors.module.css';
 export default class Label extends React.Component {
@@ -25,17 +24,15 @@ export default class Label extends React.Component {
       id
     } = this.props;
     return /*#__PURE__*/React.createElement("label", {
-      className: `${style.label} ${style[type]} ${colors[palette]} ${style[`font_${variant}`]}
-           ${onClick ? style.pointer : style.cursor} ${customClass} `,
+      className: `${style.label} ${style[type]} ${style[size]} ${colors[palette]} ${style[`font_${variant}`]}
+          ${clipped ? style.dotted : ''} ${onClick ? style.pointer : style.cursor} ${customClass} `,
       htmlFor: htmlFor,
       "data-title": title,
       "data-id": dataId,
       "data-selector-id": dataSelectorId,
       onClick: onClick,
       id: id
-    }, /*#__PURE__*/React.createElement(Typography, {
-      className: `${clipped ? style.dotted : ''} ${style[size]}`
-    }, text));
+    }, text);
   }
 }
 Label.defaultProps = defaultProps;

package/es/ListItem/ListItem.js

@@ -6,7 +6,6 @@ import ListContainer from './ListContainer';
 import { ListItemDefaultProps } from './props/defaultProps';
 import { ListItem_Props } from './props/propTypes';
 /**** Components ****/
-import Typography from '../Typography/Typography';
 import { Icon } from '@zohodesk/icons';
 /**** CSS ****/
 import style from './ListItem.module.css';
@@ -105,12 +104,9 @@ export default class ListItem extends React.Component {
       customProps: ListItemProps
     }, ContainerProps), value ? /*#__PURE__*/React.createElement(Box, {
       shrink: true,
-      adjust: true
-    }, /*#__PURE__*/React.createElement(Typography, {
-      className: needMultiLineText ? style.multiLineValue : style.value,
-      size: "13",
-      dataTitle: value
-    }, value)) : null, children ? /*#__PURE__*/React.createElement(Box, {
+      adjust: true,
+      className: needMultiLineText ? style.multiLineValue : style.value
+    }, value) : null, children ? /*#__PURE__*/React.createElement(Box, {
       shrink: true,
       adjust: true,
       className: style.children

package/es/ListItem/ListItem.module.css

@@ -25,6 +25,7 @@
   position: relative;
   list-style: none;
   color: var(--listitem_text_color);
+  font-size: 13px;
   height: var(--listitem_height);
   min-height: var(--listitem_min_height);
   text-decoration: none;

package/es/ListItem/ListItemWithAvatar.js

@@ -10,7 +10,6 @@ import { ListItemWithAvatar_Props } from './props/propTypes';
 import Avatar from '../Avatar/Avatar';
 import AvatarTeam from '../AvatarTeam/AvatarTeam';
 import { Icon } from '@zohodesk/icons';
-import Typography from '../Typography/Typography';
 /**** CSS ****/
 import style from './ListItem.module.css';
 export default class ListItemWithAvatar extends React.PureComponent {
@@ -131,12 +130,9 @@ export default class ListItemWithAvatar extends React.PureComponent {
     })) : null, value ? /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       shrink: true,
-      "data-title": isDisabled ? null : title
-    }, /*#__PURE__*/React.createElement(Typography, {
-      className: needMultiLineText ? style.multiLineValue : style.value,
-      size: "13",
-      dataTitle: value
-    }, value)) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
+      "data-title": isDisabled ? null : title,
+      className: needMultiLineText ? style.multiLineValue : style.value
+    }, value) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
       className: style.tickIcon,
       "aria-hidden": ariaHidden,
       dataId: `${dataIdString}_tickIcon`,

package/es/ListItem/ListItemWithCheckBox.js

@@ -5,7 +5,6 @@ import { ListItemWithCheckBoxDefaultProps } from './props/defaultProps';
 import { ListItemWithCheckBox_Props } from './props/propTypes';
 import CheckBox from '../CheckBox/CheckBox';
 import { Box } from '../Layout';
-import Typography from '../Typography/Typography';
 import style from './ListItem.module.css';
 export default class ListItemWithCheckBox extends React.Component {
   constructor(props) {
@@ -99,12 +98,9 @@ export default class ListItemWithCheckBox extends React.Component {
     })), /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       shrink: true,
-      "data-title": isDisabled ? null : title
-    }, /*#__PURE__*/React.createElement(Typography, {
-      className: needMultiLineText ? style.multiLineValue : style.value,
-      size: "13",
-      dataTitle: value
-    }, value)));
+      "data-title": isDisabled ? null : title,
+      className: needMultiLineText ? style.multiLineValue : style.value
+    }, value));
   }
 }
 ListItemWithCheckBox.defaultProps = ListItemWithCheckBoxDefaultProps;

package/es/ListItem/ListItemWithIcon.js

@@ -6,7 +6,6 @@ import { Icon } from '@zohodesk/icons';
 import ListContainer from './ListContainer';
 import { ListItemWithIconDefaultProps } from './props/defaultProps';
 import { ListItemWithIcon_Props } from './props/propTypes';
-import Typography from '../Typography/Typography';
 /**** CSS ****/
 import style from './ListItem.module.css';
 export default class ListItemWithIcon extends React.Component {
@@ -112,13 +111,10 @@ export default class ListItemWithIcon extends React.Component {
     }) : null, value && /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       shrink: true,
+      className: needMultiLineText ? style.multiLineValue : style.value,
       "data-title": isDisabled ? null : title,
       dataId: `${dataIdString}_Text`
-    }, /*#__PURE__*/React.createElement(Typography, {
-      className: needMultiLineText ? style.multiLineValue : style.value,
-      size: "13",
-      dataTitle: value
-    }, value)), needTick && active ? /*#__PURE__*/React.createElement(Box, {
+    }, value), needTick && active ? /*#__PURE__*/React.createElement(Box, {
       className: style.tickIcon,
       "aria-hidden": ariaHidden,
       dataId: `${dataIdString}_tickIcon`,

package/es/ListItem/ListItemWithRadio.js

@@ -5,7 +5,6 @@ import { Box } from '../Layout';
 import ListContainer from './ListContainer';
 import { ListItemWithRadioDefaultProps } from './props/defaultProps';
 import { ListItemWithRadio_Props } from './props/propTypes';
-import Typography from '../Typography/Typography';
 import style from './ListItem.module.css';
 export default class ListItemWithRadio extends React.Component {
   constructor(props) {
@@ -101,12 +100,9 @@ export default class ListItemWithRadio extends React.Component {
     })), /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       shrink: true,
-      "data-title": disableTitle ? null : title
-    }, /*#__PURE__*/React.createElement(Typography, {
-      className: needMultiLineText ? style.multiLineValue : style.value,
-      size: "13",
-      dataTitle: value
-    }, value)));
+      "data-title": disableTitle ? null : title,
+      className: needMultiLineText ? style.multiLineValue : style.value
+    }, value));
   }
 }
 ListItemWithRadio.defaultProps = ListItemWithRadioDefaultProps;

package/es/Responsive/ResizeComponent.js

@@ -5,15 +5,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ResizeObserver from './ResizeObserver';
-import { getElementSpace, debounce } from '../utils/Common';
+import { getElementSpace } from '../utils/Common';
 export default class ResizeComponent extends React.Component {
   constructor(props) {
     super(props);
     this.noSpaceForChildren = false;
     this.childrenCurrentList = [];
-    this.widthCheck = debounce(this.widthCheck.bind(this), 10);
-    // this.widthCheck = this.widthCheck.bind(this);
-    this.onResize = this.onResize.bind(this);
+    const debounce = function (cb) {
+      let timer = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 500;
+      let timeoutId = null;
+      return () => {
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => {
+          cb();
+        }, timer);
+      };
+    };
+    this.widthCheck = debounce(this.widthCheck.bind(this), 500); // this.widthCheck = this.widthCheck.bind(this);
+
+    this.onResize = debounce(this.onResize.bind(this), 500);
     this.onResizeMutation = this.onResizeMutation.bind(this);
     this.tabsObserver = new ResizeObserver(this.onResize);
     this.tabObserver = new MutationObserver(this.onResizeMutation);

package/es/Tab/Tab.js

@@ -6,7 +6,6 @@ import React, { useMemo, useCallback } from 'react';
 import { Tab_defaultProps } from './props/defaultProps';
 import { Tab_propTypes } from './props/propTypes';
 import { Box, Container } from '../Layout';
-import Typography from '../Typography/Typography';
 import { cs } from '../utils/Common';
 import styles from './Tab.module.css';
 const tabTypes = {
@@ -94,10 +93,9 @@ export default function Tab(_ref) {
     className: styles.textContainer
   }, text && /*#__PURE__*/React.createElement(Box, {
     flexible: true,
-    adjust: true
-  }, /*#__PURE__*/React.createElement(Typography, {
+    adjust: true,
     className: styles.tabText
-  }, text)), children ? /*#__PURE__*/React.createElement(Box, {
+  }, text), children ? /*#__PURE__*/React.createElement(Box, {
     shrink: true
   }, children) : null));
 }

package/es/Tab/Tabs.js

@@ -32,7 +32,19 @@ class Tabs extends React.Component {
       tabKeys: []
     };
     bind.apply(this, ['moreTabSelect', 'onResize', 'onTabResize', 'getHighlightRef', 'getTabsRef', 'getTabRef', 'getHighlightDim', 'onSizeChange', 'onScroll', 'togglePopup', 'setMaxDim']);
-    this.tabsObserver = new ResizeObserver(this.onResize);
+    const debounce = function (cb) {
+      let timer = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 500;
+      let timeoutId = null;
+      return () => {
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => {
+          cb();
+        }, timer);
+      };
+    };
+    this.tabsObserver = new ResizeObserver(debounce(this.onResize));
     this.tabObserver = {};
   }
   onTabResize(size, target) {
@@ -215,15 +227,16 @@ class Tabs extends React.Component {
       isResponsive
     } = this.props;
     if (this.tabsEle && isResponsive) {
-      if (!timer) {
-        this.onSizeChange();
-      } else {
-        setTimeout(() => {
-          this.onSizeChange();
-        }, timer);
-      }
+      // if (!timer) {
+      //   this.onSizeChange();
+      // } else {
+      //   setTimeout(() => {
+      this.onSizeChange();
+      // }, timer);
+      // }
     }
   }
+
   getTotalDimension() {
     let {
       align

package/es/Tag/Tag.js

@@ -5,7 +5,6 @@ import { Icon } from '@zohodesk/icons';
 import Avatar from '../Avatar/Avatar';
 import { Container } from '../Layout';
 import Button from '../semantic/Button/Button';
-import Typography from '../Typography/Typography';
 import { getUniqueId } from '../Provider/IdProvider';
 import style from './Tag.module.css';
 
@@ -118,14 +117,10 @@ export default class Tag extends PureComponent {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: iconName,
       size: iconSize
-    })) : null, /*#__PURE__*/React.createElement(Typography, {
+    })) : null, /*#__PURE__*/React.createElement("div", {
       className: `${style.text} ${textSizes}`,
-      a11y: {
-        'aria-hidden': true
-      },
-      customProps: {
-        id: getAriaId
-      }
+      "aria-hidden": true,
+      id: getAriaId
     }, text), onRemove && /*#__PURE__*/React.createElement(Button, {
       customClass: `${style.close} ${active ? style[`active${closePalette}Close`] : ''}
             ${rounded ? style.lgRadiusClose : style.smRadiusClose} ${isDarkPalette ? style.darkTagClose : ''}

package/es/index.js

@@ -38,6 +38,4 @@ export { default as Tooltip } from './Tooltip/Tooltip';
 import * as _utils from './utils';
 export { _utils as utils };
 export * from './VelocityAnimation';
-export * from './semantic';
-export { default as Text } from './Text/Text';
-export { default as Typography } from './Typography/Typography';
+export * from './semantic';