@zohodesk/components 1.0.0-temp-37 → 1.0.0-temp-41

package/es/common/reset.module.css

@@ -1,12 +1,12 @@
-*,
-:after,
-:before {
-  outline: 0;
-  box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-}
-html {
-  font-size: 16px;
-}
+*,
+:after,
+:before {
+  outline: 0;
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+}
+html {
+  font-size: 16px;
+}

package/es/common/transition.module.css

@@ -1,146 +1,146 @@
-.zoomInEnter,
-.zoomInLeave.zoomInLeaveActive {
-  opacity: 0;
-}.zoomInEnter, .zoomInLeave.zoomInLeaveActive {
-  transform: perspective(1px) scale(1.5) translateZ(0);
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-.zoomInEnter.zoomInEnterActive,
-.zoomInLeave {
-  opacity: 1;
-}
-.zoomInEnter.zoomInEnterActive, .zoomInLeave {
-  transform: perspective(1px) scale(1) translateZ(0);
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-
-.scaleInEnter,
-.scaleInLeave.scaleInLeaveActive {
-  opacity: 0;
-}
-
-.scaleInEnter, .scaleInLeave.scaleInLeaveActive {
-  transform: scale(0);
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-.scaleInEnter.scaleInEnterActive,
-.scaleInLeave {
-  opacity: 1;
-}
-.scaleInEnter.scaleInEnterActive, .scaleInLeave {
-  transform: scale(1);
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-
-.fadeInEnter,
-.fadeInLeave.fadeInLeaveActive {
-  opacity: 0;
-}
-
-.fadeInEnter, .fadeInLeave.fadeInLeaveActive {
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-
-.fadeInEnter.fadeInEnterActive,
-.fadeInLeave {
-  opacity: 1;
-}
-
-.fadeInEnter.fadeInEnterActive, .fadeInLeave {
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-
-.slideLeftEnter,
-.slideLeftLeave.slideLeftLeaveActive {
-  opacity: 0;
-}
-
-.slideLeftEnter, .slideLeftLeave.slideLeftLeaveActive {
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-
-[dir=ltr] .slideLeftEnter, [dir=ltr] .slideLeftLeave.slideLeftLeaveActive {
-  transform: translateX(110%);
-}
-
-[dir=rtl] .slideLeftEnter, [dir=rtl] .slideLeftLeave.slideLeftLeaveActive {
-  transform: translateX(-110%);
-}
-
-.slideLeftEnter.slideLeftEnterActive,
-.slideLeftLeave {
-  opacity: 1;
-}
-
-.slideLeftEnter.slideLeftEnterActive, .slideLeftLeave {
-  transform: translateX(0%);
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-
-.slideDownEnter,
-.slideDownLeave.slideDownLeaveActive {
-  opacity: 0;
-}
-
-.slideDownEnter, .slideDownLeave.slideDownLeaveActive {
-  transform: translateY(-100%);
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-
-.slideDownEnter.slideDownEnterActive,
-.slideDownLeave {
-  opacity: 1;
-}
-
-.slideDownEnter.slideDownEnterActive, .slideDownLeave {
-  transform: translateY(0%);
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-
-.skewInEnter,
-.skewInLeave.skewInLeaveActive {
-  opacity: 0;
-}
-
-.skewInEnter, .skewInLeave.skewInLeaveActive {
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-
-[dir=ltr] .skewInEnter, [dir=ltr] .skewInLeave.skewInLeaveActive {
-  transform: translate(100%, 100%) skew(72deg) scale(0) perspective(221px);
-}
-
-[dir=rtl] .skewInEnter, [dir=rtl] .skewInLeave.skewInLeaveActive {
-  transform: translate(-100%, 100%) skew(-72deg) scale(0) perspective(221px);
-}
-
-.skewInEnter.skewInEnterActive,
-.skewInLeave {
-  opacity: 1;
-}
-
-.skewInEnter.skewInEnterActive, .skewInLeave {
-  transform: translate(0, 0) skew(0deg) scale(1) perspective(221px);
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-
-.defaultEnter,
-.defaultLeave.defaultLeaveActive {
-  display: none;
-}
-.defaultEnter.defaultEnterActive,
-.defaultLeave {
-  display: block;
-}
+.zoomInEnter,
+.zoomInLeave.zoomInLeaveActive {
+  opacity: 0;
+}.zoomInEnter, .zoomInLeave.zoomInLeaveActive {
+  transform: perspective(1px) scale(1.5) translateZ(0);
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+.zoomInEnter.zoomInEnterActive,
+.zoomInLeave {
+  opacity: 1;
+}
+.zoomInEnter.zoomInEnterActive, .zoomInLeave {
+  transform: perspective(1px) scale(1) translateZ(0);
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+.scaleInEnter,
+.scaleInLeave.scaleInLeaveActive {
+  opacity: 0;
+}
+
+.scaleInEnter, .scaleInLeave.scaleInLeaveActive {
+  transform: scale(0);
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+.scaleInEnter.scaleInEnterActive,
+.scaleInLeave {
+  opacity: 1;
+}
+.scaleInEnter.scaleInEnterActive, .scaleInLeave {
+  transform: scale(1);
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+.fadeInEnter,
+.fadeInLeave.fadeInLeaveActive {
+  opacity: 0;
+}
+
+.fadeInEnter, .fadeInLeave.fadeInLeaveActive {
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+.fadeInEnter.fadeInEnterActive,
+.fadeInLeave {
+  opacity: 1;
+}
+
+.fadeInEnter.fadeInEnterActive, .fadeInLeave {
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+.slideLeftEnter,
+.slideLeftLeave.slideLeftLeaveActive {
+  opacity: 0;
+}
+
+.slideLeftEnter, .slideLeftLeave.slideLeftLeaveActive {
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+[dir=ltr] .slideLeftEnter, [dir=ltr] .slideLeftLeave.slideLeftLeaveActive {
+  transform: translateX(110%);
+}
+
+[dir=rtl] .slideLeftEnter, [dir=rtl] .slideLeftLeave.slideLeftLeaveActive {
+  transform: translateX(-110%);
+}
+
+.slideLeftEnter.slideLeftEnterActive,
+.slideLeftLeave {
+  opacity: 1;
+}
+
+.slideLeftEnter.slideLeftEnterActive, .slideLeftLeave {
+  transform: translateX(0%);
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+.slideDownEnter,
+.slideDownLeave.slideDownLeaveActive {
+  opacity: 0;
+}
+
+.slideDownEnter, .slideDownLeave.slideDownLeaveActive {
+  transform: translateY(-100%);
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+.slideDownEnter.slideDownEnterActive,
+.slideDownLeave {
+  opacity: 1;
+}
+
+.slideDownEnter.slideDownEnterActive, .slideDownLeave {
+  transform: translateY(0%);
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+.skewInEnter,
+.skewInLeave.skewInLeaveActive {
+  opacity: 0;
+}
+
+.skewInEnter, .skewInLeave.skewInLeaveActive {
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+[dir=ltr] .skewInEnter, [dir=ltr] .skewInLeave.skewInLeaveActive {
+  transform: translate(100%, 100%) skew(72deg) scale(0) perspective(221px);
+}
+
+[dir=rtl] .skewInEnter, [dir=rtl] .skewInLeave.skewInLeaveActive {
+  transform: translate(-100%, 100%) skew(-72deg) scale(0) perspective(221px);
+}
+
+.skewInEnter.skewInEnterActive,
+.skewInLeave {
+  opacity: 1;
+}
+
+.skewInEnter.skewInEnterActive, .skewInLeave {
+  transform: translate(0, 0) skew(0deg) scale(1) perspective(221px);
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+.defaultEnter,
+.defaultLeave.defaultLeaveActive {
+  display: none;
+}
+.defaultEnter.defaultEnterActive,
+.defaultLeave {
+  display: block;
+}

package/es/semantic/Button/semanticButton.module.css

@@ -1,9 +1,9 @@
-.buttonReset {
-  outline: 0;
-  font: inherit;
-  color: inherit;
-  border: inherit;
-  background-color: inherit;
-  padding: 0;
-  text-align: inherit;
-}
+.buttonReset {
+  outline: 0;
+  font: inherit;
+  color: inherit;
+  border: inherit;
+  background-color: inherit;
+  padding: 0;
+  text-align: inherit;
+}

package/es/utils/Common.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.string.replace";
 //$Id$//
 import viewPort from '../Popup/viewPort';
 const {
@@ -344,5 +345,5 @@ export function getElementSpace(elementRef) {
   };
 }
 export function getSearchString(charachers = '') {
-  return charachers.toLowerCase(); //.replace(/\s+/g, '');
+  return (charachers || '').toString().toLowerCase(); //.replace(/\s+/g, '');
 }

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/datetime/common.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.string.replace";
 let dateFormat = {
   dayNames: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
   monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],

package/es/utils/dropDownUtils.js

@@ -1,6 +1,6 @@
 /***** Libraries *****/
 import { createSelector } from 'reselect';
-import { getIsEmptyValue } from './Common';
+import { getIsEmptyValue, getSearchString } from './Common';
 export const dummyArray = [];
 export const dummyObj = {};
 export const getOptions = props => props.options || dummyArray;
@@ -36,6 +36,8 @@ const getIsStartWithSearch = props => props.isStartsWithSearch;
 
 const getDisabledOptions = props => props.disabledOptions || dummyArray;
 
+const getListItemProps = props => props.listItemProps || '';
+
 export const makeGetMultiSelectFilterSuggestions = () => createSelector([getOptions, getSelectedOptionsSel, getSearchStr, getNeedSearch, getIsStartWithSearch], (options, selectedOptions, searchStr, needSearch, isStartsWithSearch) => {
   const suggestions = [];
   const suggestionIds = [];
@@ -44,8 +46,8 @@ export const makeGetMultiSelectFilterSuggestions = () => createSelector([getOpti
       id,
       value = ''
     } = option;
-    const valueString = value.toLowerCase();
-    const searchString = searchStr.toLowerCase();
+    const valueString = getSearchString(value);
+    const searchString = getSearchString(searchStr);
     const isMatch = needSearch ? isStartsWithSearch ? valueString.startsWith(searchString) : valueString.indexOf(searchString) !== -1 : true;
 
     if (selectedOptions.indexOf(id) === -1 && isMatch) {
@@ -100,7 +102,7 @@ export const extractOptionId = id => {
     };
   }
 };
-export const makeFormatOptions = () => createSelector([getOptions, getValueField, getTextField, getImageField, getPrefixText, getIconName, getIconSize, getOptionType, getDisabledOptions], (options, valueField, textField, imageField, prefixText, iconName, iconSize, optionType, disabledOptions) => {
+export const makeFormatOptions = () => createSelector([getOptions, getValueField, getTextField, getImageField, getPrefixText, getIconName, getIconSize, getOptionType, getDisabledOptions, getListItemProps], (options, valueField, textField, imageField, prefixText, iconName, iconSize, optionType, disabledOptions, listItemProps) => {
   const revampOptions = [];
   const remvampOptionIds = [];
   const normalizedAllOptions = {};
@@ -114,7 +116,8 @@ export const makeFormatOptions = () => createSelector([getOptions, getValueField
         imageField: impImageField,
         optionType: impOptionType,
         iconName: impIconName,
-        iconSize: impIconSize
+        iconSize: impIconSize,
+        listItemProps: listStyle
       } = option;
       let id = typeof option === 'object' ? option[impValueField || valueField] : option;
       const value = typeof option === 'object' ? option[impTextField || textField] : option;
@@ -146,6 +149,10 @@ export const makeFormatOptions = () => createSelector([getOptions, getValueField
           optionDetails.isDisabled = disabledOptions.indexOf(id) >= 0;
         }
 
+        if (listStyle || listItemProps) {
+          optionDetails.listItemProps = listStyle || listItemProps;
+        }
+
         normalizedFormatOptions[id] = optionDetails;
         normalizedAllOptions[id] = option;
         revampOptions.push(optionDetails);

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/externalDocsBuild.js

@@ -1,21 +1,21 @@
-/* eslint-disable no-console */
-let fs = require('fs');
-fs.readFile('./build/index.html', 'utf8', (err, data) => {
-  if (err) {
-    return console.log(err);
-  }
-  var result = data.replace(
-    /<script src='\/docs\/js\/vendor.js'><\/script>/g,
-    ''
-  );
-  var result = result.replace(
-    /<script src='\/docs\/js\/main.js'><\/script>/g,
-    '<script src="./main.js"></script>'
-  );
-
-  fs.writeFile('./build/index.html', result, 'utf8', err => {
-    if (err) {
-      return console.log(err);
-    }
-  });
-});
+/* eslint-disable no-console */
+let fs = require('fs');
+fs.readFile('./build/index.html', 'utf8', (err, data) => {
+  if (err) {
+    return console.log(err);
+  }
+  var result = data.replace(
+    /<script src='\/docs\/js\/vendor.js'><\/script>/g,
+    ''
+  );
+  var result = result.replace(
+    /<script src='\/docs\/js\/main.js'><\/script>/g,
+    '<script src="./main.js"></script>'
+  );
+
+  fs.writeFile('./build/index.html', result, 'utf8', err => {
+    if (err) {
+      return console.log(err);
+    }
+  });
+});

package/lib/AppContainer/AppContainer.js

@@ -29,8 +29,12 @@ require("@zohodesk/variables/lib/fontFamilyVariables.module.css");
 
 require("@zohodesk/variables/lib/transitionVariables.module.css");
 
+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); }
@@ -68,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() {
@@ -91,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;
@@ -102,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/AppContainer/AppContainer.module.css

@@ -1,18 +1,18 @@
-.container,
-.container *,
-.container ::after,
-.container ::before {
-  outline: 0;
-  box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-}
-.container {
-  font-family: var(--zd_regular);
-}
-.tooltip {
-  height: 0;
-  font-size: 0;
-  /* contain:strict */
-}
+.container,
+.container *,
+.container ::after,
+.container ::before {
+  outline: 0;
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+}
+.container {
+  font-family: var(--zd_regular);
+}
+.tooltip {
+  height: 0;
+  font-size: 0;
+  /* contain:strict */
+}