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

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,13 @@ In this Package we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 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 +72,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 +116,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 +177,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 +193,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 +247,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 +399,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 +462,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 +480,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 +515,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 +682,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 +691,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 +717,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 +747,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 +758,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 +823,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 +839,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 +867,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 +886,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/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, {

package/es/Provider/Config.js

@@ -5,7 +5,8 @@ let id = {
   idPrefix: 'ZD',
   scrollFetchLimit: 80,
   isReducedMotion: false,
-  direction: 'ltr'
+  direction: 'ltr',
+  tooltipDebounce: 175
 };
 export function getLibraryConfig(key) {
   return id[key];

package/es/Responsive/ResizeComponent.js

@@ -42,7 +42,7 @@ export default class ResizeComponent extends React.Component {
           let newAdded = false;
           mutation.addedNodes.forEach(mut => {
             // Here we can listen for icon nodes. Confirm with bk
-            if (mut.attributes['data-responsive'] && (childrenList.length !== this.querySelector().length || this.childrenCurrentList.length !== this.querySelector().length)) {
+            if (mut.attributes && mut.attributes['data-responsive'] && (childrenList.length !== this.querySelector().length || this.childrenCurrentList.length !== this.querySelector().length)) {
               newAdded = true;
             }
           });

package/lib/AppContainer/AppContainer.js

@@ -33,6 +33,8 @@ require("@zohodesk/variables/lib/no_transitionVariables.module.css");
 
 var _AppContainerModule = _interopRequireDefault(require("./AppContainer.module.css"));
 
+var _Config = require("../Provider/Config");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -70,21 +72,69 @@ var AppContainer = /*#__PURE__*/function (_React$Component) {
     _this = _super.call(this, props);
     _this.setTooltipRef = _this.setTooltipRef.bind(_assertThisInitialized(_this));
     _this.handleOver = _this.handleOver.bind(_assertThisInitialized(_this));
+    _this.mouseOverDispatch = _this.mouseOverDispatch.bind(_assertThisInitialized(_this));
+    _this.removeTimeout = _this.removeTimeout.bind(_assertThisInitialized(_this));
+    _this.getContainerRef = _this.getContainerRef.bind(_assertThisInitialized(_this));
+    _this.timer = null;
+    _this.tooltipDebounce = (0, _Config.getLibraryConfig)('tooltipDebounce');
     return _this;
   }
 
   _createClass(AppContainer, [{
-    key: "handleOver",
-    value: function handleOver(e) {
+    key: "mouseOverDispatch",
+    value: function mouseOverDispatch(e) {
       if (this.tooltipRef) {
         this.tooltipRef.handleOver(e);
       }
     }
+  }, {
+    key: "removeTimeout",
+    value: function removeTimeout() {
+      if (this.timer) {
+        this.timer = clearTimeout(this.timer);
+      }
+    }
+  }, {
+    key: "handleOver",
+    value: function handleOver(e) {
+      var _this2 = this;
+
+      if (this.timer) {
+        this.timer = clearTimeout(this.timer);
+      }
+
+      this.timer = setTimeout(function () {
+        return _this2.mouseOverDispatch(e);
+      }, this.tooltipDebounce);
+    }
+  }, {
+    key: "getContainerRef",
+    value: function getContainerRef(ref) {
+      var eleRef = this.props.eleRef;
+      this.containerElement = ref;
+      eleRef && eleRef(ref);
+    }
   }, {
     key: "setTooltipRef",
     value: function setTooltipRef(ref) {
       this.tooltipRef = ref;
     }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.containerElement) {
+        this.containerElement.addEventListener('mouseover', this.handleOver, false);
+        this.containerElement.addEventListener('mouseout', this.removeTimeout, false);
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this.containerElement) {
+        this.containerElement.removeEventListener('mouseover', this.handleOver, false);
+        this.containerElement.addEventListener('mouseout', this.removeTimeout, false);
+      }
+    }
   }, {
     key: "render",
     value: function render() {
@@ -93,7 +143,6 @@ var AppContainer = /*#__PURE__*/function (_React$Component) {
           children = _this$props.children,
           tagName = _this$props.tagName,
           dataId = _this$props.dataId,
-          eleRef = _this$props.eleRef,
           tooltipClass = _this$props.tooltipClass,
           tooltipParentClass = _this$props.tooltipParentClass,
           customProps = _this$props.customProps;
@@ -104,11 +153,11 @@ var AppContainer = /*#__PURE__*/function (_React$Component) {
           _customProps$ExtraPro = customProps.ExtraProps,
           ExtraProps = _customProps$ExtraPro === void 0 ? {} : _customProps$ExtraPro;
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
-        className: "".concat(_AppContainerModule["default"].container, " ").concat(className),
-        onMouseOver: this.handleOver,
+        className: "".concat(_AppContainerModule["default"].container, " ").concat(className) //onMouseOver={this.handleOver}
+        ,
         dataId: dataId,
         tagName: tagName,
-        eleRef: eleRef
+        eleRef: this.getContainerRef
       }, ContainerProps, ExtraProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
       }, children)), /*#__PURE__*/_react["default"].createElement("div", _extends({}, ExtraProps, {

package/lib/Provider/Config.js

@@ -12,7 +12,8 @@ var id = {
   idPrefix: 'ZD',
   scrollFetchLimit: 80,
   isReducedMotion: false,
-  direction: 'ltr'
+  direction: 'ltr',
+  tooltipDebounce: 175
 };
 
 function getLibraryConfig(key) {

package/lib/Responsive/ResizeComponent.js

@@ -97,7 +97,7 @@ var ResizeComponent = /*#__PURE__*/function (_React$Component) {
               var newAdded = false;
               mutation.addedNodes.forEach(function (mut) {
                 // Here we can listen for icon nodes. Confirm with bk
-                if (mut.attributes['data-responsive'] && (childrenList.length !== _this2.querySelector().length || _this2.childrenCurrentList.length !== _this2.querySelector().length)) {
+                if (mut.attributes && mut.attributes['data-responsive'] && (childrenList.length !== _this2.querySelector().length || _this2.childrenCurrentList.length !== _this2.querySelector().length)) {
                   newAdded = true;
                 }
               });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-alpha-219",
+  "version": "1.0.0-alpha-220",
   "main": "lib/index.js",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",