@zohodesk/components 1.0.0-alpha-219 → 1.0.0-alpha-223

package/README.md

@@ -1,6 +1,6 @@
 # DOT Style Guide
 
-In this Package we Provide Some Basic Components to Build Web App
+In this Package, we Provide Some Basic Components to Build Web App
 
 - Avatar
 - AvatarTeam
@@ -32,9 +32,26 @@ In this Package we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.0.0-alpha-223
+
+- bg,shadow,text,border based variables removed and renamed.
+# 1.0.0-alpha-222
+
+- Tabs=> isResponsive condition handled properly
+- Select, MultiSelect => on press tab, choose selected value then move focus to next focuable element flow implemented 
+
+# 1.0.0-alpha-221
+
+- blueDefaultTheme & blueDarkTheme class name added in Blue CTATheme & ComponentTheme files
+
+# 1.0.0-alpha-220
+
+- Tooltip Delay Controlled to Improve Perf
+
 # 1.0.0-alpha-219
 
 - ContextOptimizer => ShallowEqal function issue solved
+
 # 1.0.0-alpha-218
 
 - Select => Custom props undefined issue solved
@@ -68,7 +85,7 @@ In this Package we Provide Some Basic Components to Build Web App
 
 # 1.0.0-alpha-211
 
-- Lato font reference changed from local to Zoho URL(webfonts)
+- Lato font reference changed from local to Zoho URL(web fonts)
 
 # 1.0.0-alpha-210
 
@@ -112,7 +129,7 @@ In this Package we Provide Some Basic Components to Build Web App
 
 # 1.0.0-alpha-202
 
-- MultiSelect - scrolltop issue fix
+- MultiSelect - scroll top issue fix
 
 # 1.0.0-alpha-201
 
@@ -173,7 +190,7 @@ In this Package we Provide Some Basic Components to Build Web App
 
 # 1.0.0-alpha-188
 
-- Popup => popup with in popup open body click issue fixed
+- Popup => popup within popup open body click issue fixed
 
 # 1.0.0-alpha-187
 
@@ -189,7 +206,7 @@ In this Package we Provide Some Basic Components to Build Web App
 
 # 1.0.0-alpha-184
 
-- Palette Based Folder Structure Changed.
+- Palette-Based Folder Structure Changed.
 - data-theme changed to data-mode
 - data-palette changed to data-theme
 
@@ -243,7 +260,7 @@ In this Package we Provide Some Basic Components to Build Web App
 
 # 1.0.0-alpha-173
 
-- code based issue fixed ( const to let)
+- code-based issue fixed ( const to let)
 
 # 1.0.0-alpha-172
 
@@ -395,7 +412,7 @@ In this Package we Provide Some Basic Components to Build Web App
 # 1.0.0-alpha-144
 
 - PortalLayer Moved to deprecated folder
-- A11y Id Added For Select,MultiSelect Based Components
+- A11y Id Added For Select, MultiSelect Based Components
 - Semantic Button Default Font and Padding Resetted.
 - LisItem - dataId setted default
 
@@ -458,7 +475,7 @@ In this Package we Provide Some Basic Components to Build Web App
 # 1.0.0-alpha-137
 
 - ally Fixes
-- htmlId prop added in select component
+- htmlId prop added in the select component
 - AdvancedGroupMultiSelect => scroll fetch issue fix
 
 # 1.0.0-alpha-136
@@ -476,7 +493,7 @@ In this Package we Provide Some Basic Components to Build Web App
 
 # 1.0.0-alpha-134
 
-- Reset Code Spliting
+- Reset Code Splitting
 
 # 1.0.0-alpha-133
 
@@ -511,7 +528,7 @@ In this Package we Provide Some Basic Components to Build Web App
 
 # 1.0.0-alpha-126
 
-- AllY implementation for button, textbox
+- AllY implementation for the button, textbox
 - Semantic button added
 
 # 1.0.0-alpha-125
@@ -678,7 +695,7 @@ In this Package we Provide Some Basic Components to Build Web App
 
 # 1.0.0-alpha-94
 
-- Tab Maping Fix
+- Tab Mapping Fix
 
 # 1.0.0-alpha-93
 
@@ -687,7 +704,7 @@ In this Package we Provide Some Basic Components to Build Web App
 # 1.0.0-alpha-92
 
 - Tab Custom Element Fix
-- Avatar xlarge sze changes
+- Avatar xlarge size changes
 
 # 1.0.0-alpha-91
 
@@ -713,7 +730,7 @@ In this Package we Provide Some Basic Components to Build Web App
 # 1.0.0-alpha-87
 
 - Date Component TimeZone Fix
-- Unwanted Funtctions Removed from utils/Common
+- Unwanted Functions Removed from utils/Common
 
 # 1.0.0-alpha-86
 
@@ -743,7 +760,7 @@ In this Package we Provide Some Basic Components to Build Web App
 
 # 1.0.0-alpha-81
 
-- variant - secondary type removed in Label component
+- variant - secondary type removed in a Label component
 - customClass Added For Label component
 - Radio, CheckBox SVG Updated, and Palette Danger Added, isFilled Added For Transparent BG
 - MultiSelect Avatar DataId Changes
@@ -754,7 +771,7 @@ In this Package we Provide Some Basic Components to Build Web App
 
 # 1.0.0-alpha-79
 
-- Tag danger,default color changed to dot_bg_hawkesBlue
+- Tag danger, default color changed to dot_bg_hawkesBlue
 - MultiSelectWithAvatar size prop passed for tags Parent
 
 # 1.0.0-alpha-78
@@ -819,7 +836,7 @@ In this Package we Provide Some Basic Components to Build Web App
 # 1.0.0-alpha-67
 
 - Adding TourId and isAbsolutePositioningNeeded key in DropBox
-- Adding TourId in Box, Container and Tab components
+- Adding TourId in Box, Container, and Tab components
 
 # 1.0.0-alpha-66
 
@@ -835,7 +852,7 @@ In this Package we Provide Some Basic Components to Build Web App
 
 - isDisabled Option added for List Item Based Atoms
 - needBorder and disableAction Option added for MultiSelect
-- Select BoxSize Added for Drop Box
+- Select BoxSize Added for DropBox
 
 # 1.0.0-alpha-62
 
@@ -863,7 +880,7 @@ In this Package we Provide Some Basic Components to Build Web App
 # 1.0.0-alpha-57
 
 - Base Font Version 3 Updated
-- Advanced Group Multi Select Added
+- Advanced Group Multi-Select Added
 
 # 1.0.0-alpha-56
 
@@ -882,14 +899,14 @@ In this Package we Provide Some Basic Components to Build Web App
 
 # 1.0.0-alpha-53
 
-- CustomScroll Maked Optional
+- CustomScroll Make Optional
 - Reset Code Implemented in Portal
 - Icon Line-Height Remove
 - New Reports Icons Added
 
 # 1.0.0-alpha-52
 
-- Advance Multi Select Added
+- Advance Multi-Select Added
 
 # 1.0.0-alpha-51
 

package/es/Animation/docs/Animation__default.docs.js

@@ -7,9 +7,9 @@ export default class Animation__default extends React.Component {
     let styles = {
       width: '200px',
       height: '100px',
-      background: 'var(--dot_bg_black)',
+      background: 'var(--dot_black)',
       textAlign: 'center',
-      color: 'var(--dot_text_white)',
+      color: 'var(--dot_white)',
       lineHeight: '100px'
     };
     return /*#__PURE__*/React.createElement(Container, {

package/es/Animation/docs/Animation__fadeIn.docs.js

@@ -7,9 +7,9 @@ export default class Animation__fadeIn extends React.Component {
     let style = {
       width: '200px',
       height: '100px',
-      background: 'var(--dot_bg_black)',
+      background: 'var(--dot_black)',
       textAlign: 'center',
-      color: 'var(--dot_text_white)',
+      color: 'var(--dot_white)',
       lineHeight: '100px'
     };
     return /*#__PURE__*/React.createElement(Container, {

package/es/Animation/docs/Animation__scaleIn.docs.js

@@ -7,9 +7,9 @@ export default class Animation__scaleIn extends React.Component {
     let style = {
       width: '200px',
       height: '100px',
-      background: 'var(--dot_bg_black)',
+      background: 'var(--dot_black)',
       textAlign: 'center',
-      color: 'var(--dot_text_white)',
+      color: 'var(--dot_white)',
       lineHeight: '100px'
     };
     return /*#__PURE__*/React.createElement(Container, {

package/es/Animation/docs/Animation__skewIn.docs.js

@@ -7,9 +7,9 @@ export default class Animation__skewIn extends React.Component {
     let style = {
       width: '200px',
       height: '100px',
-      background: 'var(--dot_bg_black)',
+      background: 'var(--dot_black)',
       textAlign: 'center',
-      color: 'var(--dot_text_white)',
+      color: 'var(--dot_white)',
       lineHeight: '100px'
     };
     return /*#__PURE__*/React.createElement(Container, {

package/es/Animation/docs/Animation__slideDown.docs.js

@@ -7,9 +7,9 @@ export default class Animation__slideDown extends React.Component {
     let style = {
       width: '200px',
       height: '100px',
-      background: 'var(--dot_bg_black)',
+      background: 'var(--dot_black)',
       textAlign: 'center',
-      color: 'var(--dot_text_white)',
+      color: 'var(--dot_white)',
       lineHeight: '100px'
     };
     return /*#__PURE__*/React.createElement(Container, {

package/es/Animation/docs/Animation__slideLeft.docs.js

@@ -7,9 +7,9 @@ export default class Animation__slideLeft extends React.Component {
     let style = {
       width: '200px',
       height: '100px',
-      background: 'var(--dot_bg_black)',
+      background: 'var(--dot_black)',
       textAlign: 'center',
-      color: 'var(--dot_text_white)',
+      color: 'var(--dot_white)',
       lineHeight: '100px'
     };
     return /*#__PURE__*/React.createElement(Container, {

package/es/Animation/docs/Animation__zoomIn.docs.js

@@ -7,9 +7,9 @@ export default class Animation__zoomIn extends React.Component {
     let style = {
       width: '200px',
       height: '100px',
-      background: 'var(--dot_bg_black)',
+      background: 'var(--dot_black)',
       textAlign: 'center',
-      color: 'var(--dot_text_white)',
+      color: 'var(--dot_white)',
       lineHeight: '100px'
     };
     return /*#__PURE__*/React.createElement(Container, {

package/es/AppContainer/AppContainer.js

@@ -13,30 +13,71 @@ import '@zohodesk/variables/lib/fontFamilyVariables.module.css';
 import '@zohodesk/variables/lib/transitionVariables.module.css';
 import '@zohodesk/variables/lib/no_transitionVariables.module.css';
 import style from './AppContainer.module.css';
+import { getLibraryConfig } from '../Provider/Config';
 export default class AppContainer extends React.Component {
   constructor(props) {
     super(props);
     this.setTooltipRef = this.setTooltipRef.bind(this);
     this.handleOver = this.handleOver.bind(this);
+    this.mouseOverDispatch = this.mouseOverDispatch.bind(this);
+    this.removeTimeout = this.removeTimeout.bind(this);
+    this.getContainerRef = this.getContainerRef.bind(this);
+    this.timer = null;
+    this.tooltipDebounce = getLibraryConfig('tooltipDebounce');
   }
 
-  handleOver(e) {
+  mouseOverDispatch(e) {
     if (this.tooltipRef) {
       this.tooltipRef.handleOver(e);
     }
   }
 
+  removeTimeout() {
+    if (this.timer) {
+      this.timer = clearTimeout(this.timer);
+    }
+  }
+
+  handleOver(e) {
+    if (this.timer) {
+      this.timer = clearTimeout(this.timer);
+    }
+
+    this.timer = setTimeout(() => this.mouseOverDispatch(e), this.tooltipDebounce);
+  }
+
+  getContainerRef(ref) {
+    let {
+      eleRef
+    } = this.props;
+    this.containerElement = ref;
+    eleRef && eleRef(ref);
+  }
+
   setTooltipRef(ref) {
     this.tooltipRef = ref;
   }
 
+  componentDidMount() {
+    if (this.containerElement) {
+      this.containerElement.addEventListener('mouseover', this.handleOver, false);
+      this.containerElement.addEventListener('mouseout', this.removeTimeout, false);
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.containerElement) {
+      this.containerElement.removeEventListener('mouseover', this.handleOver, false);
+      this.containerElement.addEventListener('mouseout', this.removeTimeout, false);
+    }
+  }
+
   render() {
     let {
       className,
       children,
       tagName,
       dataId,
-      eleRef,
       tooltipClass,
       tooltipParentClass,
       customProps
@@ -47,11 +88,11 @@ export default class AppContainer extends React.Component {
       ExtraProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, _extends({
-      className: `${style.container} ${className}`,
-      onMouseOver: this.handleOver,
+      className: `${style.container} ${className}` //onMouseOver={this.handleOver}
+      ,
       dataId: dataId,
       tagName: tagName,
-      eleRef: eleRef
+      eleRef: this.getContainerRef
     }, ContainerProps, ExtraProps), /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }, children)), /*#__PURE__*/React.createElement("div", _extends({}, ExtraProps, {