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

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/es/Select/Select.js

@@ -249,7 +249,7 @@ export class SelectComponent extends Component {
       options,
       valueField,
       textField,
-      customProps
+      customProps = {}
     } = props;
     let {
       listItemProps = {}

package/es/Tag/Tag.module.css

@@ -230,6 +230,7 @@
 }
 .dark:hover {
   --tag_bg_color: var(--zdt_tag_dark_hover_bg);
+  --tag_text_color: var(--zdt_tag_dark_hover_text);
 }
 .darkTagClose {
   --tag_closeicon_bg_color: var(--zdt_tag_dark_close_bg);

package/es/common/animation.module.css

@@ -21,6 +21,18 @@
   -webkit-animation-iteration-count: infinite;
   -ms-animation-iteration-count: infinite;
 }
+[dir=ltr] .both {
+  animation-fill-mode: both;
+  -webkit-animation-fill-mode: both;
+  -ms-animation-fill-mode: both;
+  -moz-animation-fill-mode: both;
+}
+[dir=rtl] .both {
+  animation-fill-mode: both;
+  -webkit-animation-fill-mode: both;
+  -ms-animation-fill-mode: both;
+  -moz-animation-fill-mode: both;
+}
 .fadeIn {
   opacity: 0;
 }

package/es/utils/ContextOptimizer.js

@@ -1,7 +1,7 @@
 /** ** Libraries *** */
 import { useContext, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { shallowEqual } from 'react-redux'; // Please use this component with children as inline function for force this components rerender when parent rerender regardless of reason
+import shallowEqual from './shallowEqual'; // Please use this component with children as inline function for force this components rerender when parent rerender regardless of reason
 // Because below componends only rerender when children or calculation are changed, unless no changes will update below
 // this component logic based on return same children reference to stop rerender.
 // Think before change logic

package/es/utils/shallowEqual.js

@@ -0,0 +1,32 @@
+function is(x, y) {
+  if (x === y) {
+    return x !== 0 || y !== 0 || 1 / x === 1 / y;
+  } else {
+    return x !== x && y !== y;
+  }
+}
+
+export default function shallowEqual(objA, objB) {
+  if (is(objA, objB)) {
+    return true;
+  }
+
+  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+    return false;
+  }
+
+  const keysA = Object.keys(objA);
+  const keysB = Object.keys(objB);
+
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+
+  for (let i = 0; i < keysA.length; i++) {
+    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
+      return false;
+    }
+  }
+
+  return 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/Appearance/dark/mode/darkMode.module.css

@@ -153,7 +153,6 @@
   --zdt_textbox_effect_hover_border: var(--dot_inputLineHover);
   --zdt_textbox_effect_focus_border: var(--dot_inputLineFocus);
   --zdt_textbox_secondary_text: #a8b0bd;
-  --zdt_textbox_light_text: var(--dot_text_white);
 
   /* dropdown */
   --zdt_dropdown_default_text: #e2e4e6;
@@ -295,7 +294,6 @@
   --zdt_multiselect_box_bg: #232b38;
   --zdt_multiselect_selectall_text: var(--zdt_cta_primary_text);
   --zdt_multiselect_message_text: #828994;
-  --zdt_multiselect_darkmsg_text: #d0d0d4;
 
   /* advanced multiselect */
   --zdt_advancedmultiselect_default_border: var(--dot_inputLine);
@@ -382,14 +380,14 @@
   --zdt_tabs_alpha_box_shadow: var(--zd_shadow_dark10);
   --zdt_tabs_delta_border: var(--zdt_cta_primary_border);
   --zdt_tabs_highlight_border: #e2e4e6;
- 
+
   /* custom scroll */
   --zdt_customscroll_default_bg: rgba(225, 225, 225, 0.06);
   --zdt_customscroll_thump_bg: rgba(225, 225, 225, 0.12);
-  --zdt_customscroll_thump_dark_bg: rgba(225, 225, 225, 0.12);
   --zdt_customscroll_thump_hover_bg: rgba(168, 176, 189, 0.3);
-  --zdt_customscroll_thump_dark_hover_bg: rgba(225, 225, 225, 0.14);
   --zdt_customscroll_border: rgba(225, 225, 225, 0.12);
+  --zdt_customscroll_thump_dark_bg: rgba(225, 225, 225, 0.12);
+  --zdt_customscroll_thump_dark_hover_bg: rgba(225, 225, 225, 0.14);
   --zdt_customscroll_dark_border: rgba(225, 225, 225, 0.12);
   --zdt_customscroll_dark_bg: rgba(225, 225, 225, 0.06);
 }

package/lib/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css

@@ -22,6 +22,7 @@
     /* tag */
     --zdt_tag_dark_text: #d0d0d4;
     --zdt_tag_dark_bg: #42485f;
+    --zdt_tag_dark_hover_text: #d0d0d4;
     --zdt_tag_dark_hover_bg: #503348;
     --zdt_tag_dark_close_bg: #864654;
     --zdt_tag_dark_close_text: #de3535;
@@ -29,6 +30,7 @@
     /* multiselect */
     --zdt_multiselect_dark_border: #4b5168;
     --zdt_multiselect_darkmsg_bg: #232b38;
+    --zdt_multiselect_darkmsg_text: #d0d0d4;
     --zdt_multiselect_darkdelete_hover_text: #e2e4e6;
 
     /* avatar */
@@ -38,6 +40,9 @@
     /* label */
     --zdt_label_dark_text: #d0d0d4;
 
+    /* textbox */
+    --zdt_textbox_light_text: var(--dot_text_white);
+
     /* dropdown */
     --zdt_dropdown_darkheading_text: #a8b0bd;
 }

package/lib/Appearance/dark/themes/green/greenDarkCTATheme.module.css

@@ -18,7 +18,7 @@
     --zdt_cta_alpha_hover_text: #0e7c1c;
     --zdt_cta_alpha_border: #45a159;
     --zdt_cta_alpha_hover_border: #0e7c1c;
-    --zdt_cta_alpha_bg: #2A433F;
+    --zdt_cta_alpha_bg: #2a433f;
     --zdt_cta_beta_border: #45a159;
     --zdt_cta_grey_10_bg: #262f3d;
     --zdt_cta_grey_10_border: #262f3d;

package/lib/Appearance/dark/themes/green/greenDarkComponentTheme.module.css

@@ -22,6 +22,7 @@
     /* tag */
     --zdt_tag_dark_text: #d0d0d4;
     --zdt_tag_dark_bg: #42485f;
+    --zdt_tag_dark_hover_text: #d0d0d4;
     --zdt_tag_dark_hover_bg: #503348;
     --zdt_tag_dark_close_bg: #864654;
     --zdt_tag_dark_close_text: #de3535;
@@ -29,6 +30,7 @@
     /* multiselect */
     --zdt_multiselect_dark_border: #4b5168;
     --zdt_multiselect_darkmsg_bg: #232b38;
+    --zdt_multiselect_darkmsg_text: #d0d0d4;
     --zdt_multiselect_darkdelete_hover_text: #e2e4e6;
 
     /* avatar */
@@ -38,6 +40,9 @@
     /* label */
     --zdt_label_dark_text: #d0d0d4;
 
+    /* textbox */
+    --zdt_textbox_light_text: var(--dot_text_white);
+
     /* dropdown */
     --zdt_dropdown_darkheading_text: #a8b0bd;
 }

package/lib/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css

@@ -22,6 +22,7 @@
     /* tag */
     --zdt_tag_dark_text: #d0d0d4;
     --zdt_tag_dark_bg: #42485f;
+    --zdt_tag_dark_hover_text: #d0d0d4;
     --zdt_tag_dark_hover_bg: #503348;
     --zdt_tag_dark_close_bg: #864654;
     --zdt_tag_dark_close_text: #de3535;
@@ -29,6 +30,7 @@
     /* multiselect */
     --zdt_multiselect_dark_border: #4b5168;
     --zdt_multiselect_darkmsg_bg: #232b38;
+    --zdt_multiselect_darkmsg_text: #d0d0d4;
     --zdt_multiselect_darkdelete_hover_text: #e2e4e6;
 
     /* avatar */
@@ -38,6 +40,9 @@
     /* label */
     --zdt_label_dark_text: #d0d0d4;
 
+    /* textbox */
+    --zdt_textbox_light_text: var(--dot_text_white);
+
     /* dropdown */
     --zdt_dropdown_darkheading_text: #a8b0bd;
 }

package/lib/Appearance/dark/themes/red/redDarkCTATheme.module.css

@@ -18,7 +18,7 @@
     --zdt_cta_alpha_hover_text: #a81111;
     --zdt_cta_alpha_border: #e94f4f;
     --zdt_cta_alpha_hover_border: #a81111;
-    --zdt_cta_alpha_bg: #372F3A;
+    --zdt_cta_alpha_bg: #372f3a;
     --zdt_cta_beta_border: #e94f4f;
     --zdt_cta_grey_10_bg: #262f3d;
     --zdt_cta_grey_10_border: #262f3d;

package/lib/Appearance/dark/themes/red/redDarkComponentTheme.module.css

@@ -22,6 +22,7 @@
     /* tag */
     --zdt_tag_dark_text: #d0d0d4;
     --zdt_tag_dark_bg: #42485f;
+    --zdt_tag_dark_hover_text: #d0d0d4;
     --zdt_tag_dark_hover_bg: #503348;
     --zdt_tag_dark_close_bg: #864654;
     --zdt_tag_dark_close_text: #de3535;
@@ -29,6 +30,7 @@
     /* multiselect */
     --zdt_multiselect_dark_border: #4b5168;
     --zdt_multiselect_darkmsg_bg: #232b38;
+    --zdt_multiselect_darkmsg_text: #d0d0d4;
     --zdt_multiselect_darkdelete_hover_text: #e2e4e6;
 
     /* avatar */
@@ -38,6 +40,9 @@
     /* label */
     --zdt_label_dark_text: #d0d0d4;
 
+    /* textbox */
+    --zdt_textbox_light_text: var(--dot_text_white);
+
     /* dropdown */
     --zdt_dropdown_darkheading_text: #a8b0bd;
 }

package/lib/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css

@@ -22,6 +22,7 @@
     /* tag */
     --zdt_tag_dark_text: #d0d0d4;
     --zdt_tag_dark_bg: #42485f;
+    --zdt_tag_dark_hover_text: #d0d0d4;
     --zdt_tag_dark_hover_bg: #503348;
     --zdt_tag_dark_close_bg: #864654;
     --zdt_tag_dark_close_text: #de3535;
@@ -29,6 +30,7 @@
     /* multiselect */
     --zdt_multiselect_dark_border: #4b5168;
     --zdt_multiselect_darkmsg_bg: #232b38;
+    --zdt_multiselect_darkmsg_text: #d0d0d4;
     --zdt_multiselect_darkdelete_hover_text: #e2e4e6;
 
     /* avatar */
@@ -38,6 +40,9 @@
     /* label */
     --zdt_label_dark_text: #d0d0d4;
 
+    /* textbox */
+    --zdt_textbox_light_text: var(--dot_text_white);
+
     /* dropdown */
     --zdt_dropdown_darkheading_text: #a8b0bd;
 }

package/lib/Appearance/default/mode/defaultMode.module.css

@@ -141,6 +141,8 @@
   --zdt_tag_pure_border: var(--zd_border_smoke91);
   --zdt_tag_pure_hover_bg: var(--zd_bg_smoke6);
   --zdt_tag_pure_hover_border: var(--zd_border_dark6);
+  --zdt_tag_dark_close_bg: #864654;
+  --zdt_tag_dark_close_text: #de3535;
   --zdt_tag_dark_close_hover_bg: #de3535;
 
   /* textbox */
@@ -153,7 +155,6 @@
   --zdt_textbox_effect_hover_border: var(--dot_inputLineHover);
   --zdt_textbox_effect_focus_border: var(--dot_inputLineFocus);
   --zdt_textbox_secondary_text: var(--dot_text_shuttleGrey);
-  --zdt_textbox_light_text: var(--dot_text_white);
 
   /* dropdown */
   --zdt_dropdown_default_text: var(--dot_text_black);
@@ -295,7 +296,6 @@
   --zdt_multiselect_box_bg: var(--dot_bg_white);
   --zdt_multiselect_selectall_text: var(--zdt_cta_primary_text);
   --zdt_multiselect_message_text: var(--dot_text_slateGrey);
-  --zdt_multiselect_darkmsg_text: #d0d0d4;
 
   /* advanced multiselect */
   --zdt_advancedmultiselect_default_border: var(--dot_inputLine);
@@ -383,13 +383,13 @@
   --zdt_tabs_delta_border: var(--zdt_cta_primary_border);
   --zdt_tabs_highlight_border: var(--dot_border_black);
 
-   /* custom scroll */
-   --zdt_customscroll_default_bg: rgba(0, 0, 0, 0.02);
-   --zdt_customscroll_thump_bg: rgba(0, 0, 0, 0.12);
-   --zdt_customscroll_thump_dark_bg: rgba(225, 225, 225, 0.15);
-   --zdt_customscroll_thump_hover_bg: rgba(0, 0, 0, 0.16);
-   --zdt_customscroll_thump_dark_hover_bg: rgba(225, 225, 225, 0.17);
-   --zdt_customscroll_border: rgba(44, 51, 77, 0.1);
-   --zdt_customscroll_dark_border: rgba(225, 225, 225, 0.12);
-   --zdt_customscroll_dark_bg: rgba(225, 225, 225, 0.06);
+  /* custom scroll */
+  --zdt_customscroll_default_bg: rgba(0, 0, 0, 0.02);
+  --zdt_customscroll_thump_bg: rgba(0, 0, 0, 0.12);
+  --zdt_customscroll_thump_hover_bg: rgba(0, 0, 0, 0.16);
+  --zdt_customscroll_border: rgba(44, 51, 77, 0.1);
+  --zdt_customscroll_thump_dark_bg: rgba(225, 225, 225, 0.15);
+  --zdt_customscroll_thump_dark_hover_bg: rgba(225, 225, 225, 0.17);
+  --zdt_customscroll_dark_border: rgba(225, 225, 225, 0.12);
+  --zdt_customscroll_dark_bg: rgba(225, 225, 225, 0.06);
 }

package/lib/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css

@@ -22,6 +22,7 @@
     /* tag */
     --zdt_tag_dark_text: #d0d0d4;
     --zdt_tag_dark_bg: #42485f;
+    --zdt_tag_dark_hover_text: #d0d0d4;
     --zdt_tag_dark_hover_bg: #503348;
     --zdt_tag_dark_close_bg: #864654;
     --zdt_tag_dark_close_text: #de3535;
@@ -29,6 +30,7 @@
     /* multiselect */
     --zdt_multiselect_dark_border: #4b5168;
     --zdt_multiselect_darkmsg_bg: #383f57;
+    --zdt_multiselect_darkmsg_text: #d0d0d4;
     --zdt_multiselect_darkdelete_hover_text: var(--dot_text_white);
 
     /* avatar */
@@ -38,6 +40,9 @@
     /* label */
     --zdt_label_dark_text: #d0d0d4;
 
+    /* textbox */
+    --zdt_textbox_light_text: var(--dot_text_white);
+
     /* dropdown */
     --zdt_dropdown_darkheading_text: var(--dot_text_white);
 }

package/lib/Appearance/default/themes/green/greenDefaultCTATheme.module.css

@@ -18,7 +18,7 @@
     --zdt_cta_alpha_hover_text: #0e7526;
     --zdt_cta_alpha_border: #26a942;
     --zdt_cta_alpha_hover_border: #0e7526;
-    --zdt_cta_alpha_bg: #D4EED9;
+    --zdt_cta_alpha_bg: #d4eed9;
     --zdt_cta_beta_border: #26a942;
     --zdt_cta_grey_10_bg: #f6faf9;
     --zdt_cta_grey_10_border: #f6faf9;

package/lib/Appearance/default/themes/green/greenDefaultComponentTheme.module.css

@@ -22,6 +22,7 @@
     /* tag */
     --zdt_tag_dark_text: #d0d0d4;
     --zdt_tag_dark_bg: rgba(255, 255, 255, 0.07);
+    --zdt_tag_dark_hover_text: #d0d0d4;
     --zdt_tag_dark_hover_bg: #503348;
     --zdt_tag_dark_close_bg: #864654;
     --zdt_tag_dark_close_text: #de3535;
@@ -29,6 +30,7 @@
     /* multiselect */
     --zdt_multiselect_dark_border: rgba(255, 255, 255, 0.2);
     --zdt_multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
+    --zdt_multiselect_darkmsg_text: #d0d0d4;
     --zdt_multiselect_darkdelete_hover_text: var(--dot_text_white);
 
     /* avatar */
@@ -38,6 +40,9 @@
     /* label */
     --zdt_label_dark_text: #d0d0d4;
 
+    /* textbox */
+    --zdt_textbox_light_text: var(--dot_text_white);
+
     /* dropdown */
     --zdt_dropdown_darkheading_text: var(--dot_text_white);
 }

package/lib/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css

@@ -18,7 +18,7 @@
     --zdt_cta_alpha_hover_text: #b25900;
     --zdt_cta_alpha_border: #e57717;
     --zdt_cta_alpha_hover_border: #b25900;
-    --zdt_cta_alpha_bg: #FAE4D1;
+    --zdt_cta_alpha_bg: #fae4d1;
     --zdt_cta_beta_border: #e57717;
     --zdt_cta_grey_10_bg: #f9f7f6;
     --zdt_cta_grey_10_border: #f9f7f6;

package/lib/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css

@@ -22,6 +22,7 @@
     /* tag */
     --zdt_tag_dark_text: #d0d0d4;
     --zdt_tag_dark_bg: rgba(255, 255, 255, 0.07);
+    --zdt_tag_dark_hover_text: #d0d0d4;
     --zdt_tag_dark_hover_bg: #503348;
     --zdt_tag_dark_close_bg: #864654;
     --zdt_tag_dark_close_text: #de3535;
@@ -29,6 +30,7 @@
     /* multiselect */
     --zdt_multiselect_dark_border: rgba(255, 255, 255, 0.2);
     --zdt_multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
+    --zdt_multiselect_darkmsg_text: #d0d0d4;
     --zdt_multiselect_darkdelete_hover_text: var(--dot_text_white);
 
     /* avatar */
@@ -38,6 +40,9 @@
     /* label */
     --zdt_label_dark_text: #d0d0d4;
 
+    /* textbox */
+    --zdt_textbox_light_text: var(--dot_text_white);
+
     /* dropdown */
     --zdt_dropdown_darkheading_text: var(--dot_text_white);
 }

package/lib/Appearance/default/themes/red/redDefaultCTATheme.module.css

@@ -18,7 +18,7 @@
     --zdt_cta_alpha_hover_text: #ab1a18;
     --zdt_cta_alpha_border: #de3535;
     --zdt_cta_alpha_hover_border: #ab1a18;
-    --zdt_cta_alpha_bg: #F8D7D7;
+    --zdt_cta_alpha_bg: #f8d7d7;
     --zdt_cta_beta_border: #de3535;
     --zdt_cta_grey_10_bg: #f9f6f7;
     --zdt_cta_grey_10_border: #f9f6f7;

package/lib/Appearance/default/themes/red/redDefaultComponentTheme.module.css

@@ -22,6 +22,7 @@
     /* tag */
     --zdt_tag_dark_text: #d0d0d4;
     --zdt_tag_dark_bg: rgba(255, 255, 255, 0.07);
+    --zdt_tag_dark_hover_text: #d0d0d4;
     --zdt_tag_dark_hover_bg: #503348;
     --zdt_tag_dark_close_bg: #864654;
     --zdt_tag_dark_close_text: #de3535;
@@ -29,6 +30,7 @@
     /* multiselect */
     --zdt_multiselect_dark_border: rgba(255, 255, 255, 0.2);
     --zdt_multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
+    --zdt_multiselect_darkmsg_text: #d0d0d4;
     --zdt_multiselect_darkdelete_hover_text: var(--dot_text_white);
 
     /* avatar */
@@ -38,6 +40,9 @@
     /* label */
     --zdt_label_dark_text: #d0d0d4;
 
+    /* textbox */
+    --zdt_textbox_light_text: var(--dot_text_white);
+
     /* dropdown */
     --zdt_dropdown_darkheading_text: var(--dot_text_white);
 }

package/lib/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css

@@ -22,6 +22,7 @@
     /* tag */
     --zdt_tag_dark_text: #d0d0d4;
     --zdt_tag_dark_bg: rgba(255, 255, 255, 0.07);
+    --zdt_tag_dark_hover_text: #d0d0d4;
     --zdt_tag_dark_hover_bg: #503348;
     --zdt_tag_dark_close_bg: #864654;
     --zdt_tag_dark_close_text: #de3535;
@@ -29,6 +30,7 @@
     /* multiselect */
     --zdt_multiselect_dark_border: rgba(255, 255, 255, 0.2);
     --zdt_multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
+    --zdt_multiselect_darkmsg_text: #d0d0d4;
     --zdt_multiselect_darkdelete_hover_text: var(--dot_text_white);
 
     /* avatar */
@@ -38,6 +40,9 @@
     /* label */
     --zdt_label_dark_text: #d0d0d4;
 
+    /* textbox */
+    --zdt_textbox_light_text: var(--dot_text_white);
+
     /* dropdown */
     --zdt_dropdown_darkheading_text: var(--dot_text_white);
 }

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/lib/Select/Select.js

@@ -295,7 +295,8 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
       var options = props.options,
           valueField = props.valueField,
           textField = props.textField,
-          customProps = props.customProps;
+          _props$customProps = props.customProps,
+          customProps = _props$customProps === void 0 ? {} : _props$customProps;
       var _customProps$listItem = customProps.listItemProps,
           listItemProps = _customProps$listItem === void 0 ? {} : _customProps$listItem;
       return this.formatOptions({

package/lib/Tag/Tag.module.css

@@ -230,6 +230,7 @@
 }
 .dark:hover {
   --tag_bg_color: var(--zdt_tag_dark_hover_bg);
+  --tag_text_color: var(--zdt_tag_dark_hover_text);
 }
 .darkTagClose {
   --tag_closeicon_bg_color: var(--zdt_tag_dark_close_bg);

package/lib/common/animation.module.css

@@ -21,6 +21,18 @@
   -webkit-animation-iteration-count: infinite;
   -ms-animation-iteration-count: infinite;
 }
+[dir=ltr] .both {
+  animation-fill-mode: both;
+  -webkit-animation-fill-mode: both;
+  -ms-animation-fill-mode: both;
+  -moz-animation-fill-mode: both;
+}
+[dir=rtl] .both {
+  animation-fill-mode: both;
+  -webkit-animation-fill-mode: both;
+  -ms-animation-fill-mode: both;
+  -moz-animation-fill-mode: both;
+}
 .fadeIn {
   opacity: 0;
 }