@zohodesk/components 1.0.0-alpha-217 → 1.0.0-alpha-221

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,6 +32,22 @@ In this Package we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 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
+
 # 1.0.0-alpha-217
 
 - TextBox, Multiselect, Tag missing dark palette variables moved under Themes folder file
@@ -61,7 +77,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
 
@@ -105,7 +121,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
 
@@ -166,7 +182,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
 
@@ -182,7 +198,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
 
@@ -236,7 +252,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
 
@@ -388,7 +404,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
 
@@ -451,7 +467,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
@@ -469,7 +485,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
 
@@ -504,7 +520,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
@@ -671,7 +687,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
 
@@ -680,7 +696,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
 
@@ -706,7 +722,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
 
@@ -736,7 +752,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
@@ -747,7 +763,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
@@ -812,7 +828,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
 
@@ -828,7 +844,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
 
@@ -856,7 +872,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
 
@@ -875,14 +891,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/Appearance/dark/themes/blue/blueDarkCTATheme.module.css

@@ -1,4 +1,4 @@
-[data-mode='dark'][data-theme='blue'] {
+[data-mode='dark'][data-theme='blue'], :global(.blueDarkTheme) [data-desk-theme="blue"] {
     --zdt_cta_primary_text: #479dff;
     --zdt_cta_primary_hover_text: #6eb2ff;
     --zdt_cta_primary_bg: #479dff;

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

@@ -1,4 +1,4 @@
-[data-mode='dark'][data-theme='blue'] {
+[data-mode='dark'][data-theme='blue'], :global(.blueDarkTheme) [data-desk-theme="blue"] {
     /* stencil */
     --zdt_stencil_dark_bg: #383f55;
     --zdt_stencil_dark_gradient_bg: linear-gradient(

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

@@ -1,4 +1,4 @@
-[data-mode='default'] {
+[data-mode='default'], :global(.blueDefaultTheme) [data-desk-theme="blue"] {
   /* list common */
   --dot_inputPlaceholder: var(--zdt_cta_grey_40_text);
   --dot_inputDisable: var(--dot_text_slateGrey);

package/es/Appearance/default/themes/blue/blueDefaultCTATheme.module.css

@@ -1,4 +1,4 @@
-[data-mode='default'][data-theme='blue'] {
+[data-mode='default'][data-theme='blue'], :global(.blueDefaultTheme) [data-desk-theme="blue"] {
     --zdt_cta_primary_text: var(--dot_text_primary);
     --zdt_cta_primary_hover_text: var(--dot_text_cobalt);
     --zdt_cta_primary_bg: var(--dot_bg_primary);

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

@@ -1,4 +1,4 @@
-[data-mode='default'][data-theme='blue'] {
+[data-mode='default'][data-theme='blue'], :global(.blueDefaultTheme) [data-desk-theme="blue"] {
     /* stencil */
     --zdt_stencil_dark_bg: #383f55;
     --zdt_stencil_dark_gradient_bg: linear-gradient(

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

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

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/themes/blue/blueDarkCTATheme.module.css

@@ -1,4 +1,4 @@
-[data-mode='dark'][data-theme='blue'] {
+[data-mode='dark'][data-theme='blue'], :global(.blueDarkTheme) [data-desk-theme="blue"] {
     --zdt_cta_primary_text: #479dff;
     --zdt_cta_primary_hover_text: #6eb2ff;
     --zdt_cta_primary_bg: #479dff;

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

@@ -1,4 +1,4 @@
-[data-mode='dark'][data-theme='blue'] {
+[data-mode='dark'][data-theme='blue'], :global(.blueDarkTheme) [data-desk-theme="blue"] {
     /* stencil */
     --zdt_stencil_dark_bg: #383f55;
     --zdt_stencil_dark_gradient_bg: linear-gradient(

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

@@ -1,4 +1,4 @@
-[data-mode='default'] {
+[data-mode='default'], :global(.blueDefaultTheme) [data-desk-theme="blue"] {
   /* list common */
   --dot_inputPlaceholder: var(--zdt_cta_grey_40_text);
   --dot_inputDisable: var(--dot_text_slateGrey);

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

@@ -1,4 +1,4 @@
-[data-mode='default'][data-theme='blue'] {
+[data-mode='default'][data-theme='blue'], :global(.blueDefaultTheme) [data-desk-theme="blue"] {
     --zdt_cta_primary_text: var(--dot_text_primary);
     --zdt_cta_primary_hover_text: var(--dot_text_cobalt);
     --zdt_cta_primary_bg: var(--dot_bg_primary);

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

@@ -1,4 +1,4 @@
-[data-mode='default'][data-theme='blue'] {
+[data-mode='default'][data-theme='blue'], :global(.blueDefaultTheme) [data-desk-theme="blue"] {
     /* stencil */
     --zdt_stencil_dark_bg: #383f55;
     --zdt_stencil_dark_gradient_bg: linear-gradient(

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

@@ -9,7 +9,7 @@ var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactRedux = require("react-redux");
+var _shallowEqual = _interopRequireDefault(require("./shallowEqual"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -33,7 +33,7 @@ function ContextOptimizer(props) {
   }),
       local = _useRef.current;
 
-  if (!(0, _reactRedux.shallowEqual)(data, local.data) || local.renderF !== renderF) {
+  if (!(0, _shallowEqual["default"])(data, local.data) || local.renderF !== renderF) {
     local.children = renderF(data);
     local.data = data;
     local.renderF = renderF;

package/lib/utils/shallowEqual.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = shallowEqual;
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function is(x, y) {
+  if (x === y) {
+    return x !== 0 || y !== 0 || 1 / x === 1 / y;
+  } else {
+    return x !== x && y !== y;
+  }
+}
+
+function shallowEqual(objA, objB) {
+  if (is(objA, objB)) {
+    return true;
+  }
+
+  if (_typeof(objA) !== 'object' || objA === null || _typeof(objB) !== 'object' || objB === null) {
+    return false;
+  }
+
+  var keysA = Object.keys(objA);
+  var keysB = Object.keys(objB);
+
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+
+  for (var 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;
+}