@zohodesk/components 1.0.0-temp-39 → 1.0.0-temp-43

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/Animation/docs/Animation__default.docs.js

@@ -54,9 +54,9 @@ var Animation__default = /*#__PURE__*/function (_React$Component) {
       var 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["default"].createElement(_Layout.Container, {

package/lib/Animation/docs/Animation__fadeIn.docs.js

@@ -54,9 +54,9 @@ var Animation__fadeIn = /*#__PURE__*/function (_React$Component) {
       var 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["default"].createElement(_Layout.Container, {

package/lib/Animation/docs/Animation__scaleIn.docs.js

@@ -54,9 +54,9 @@ var Animation__scaleIn = /*#__PURE__*/function (_React$Component) {
       var 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["default"].createElement(_Layout.Container, {

package/lib/Animation/docs/Animation__skewIn.docs.js

@@ -54,9 +54,9 @@ var Animation__skewIn = /*#__PURE__*/function (_React$Component) {
       var 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["default"].createElement(_Layout.Container, {

package/lib/Animation/docs/Animation__slideDown.docs.js

@@ -54,9 +54,9 @@ var Animation__slideDown = /*#__PURE__*/function (_React$Component) {
       var 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["default"].createElement(_Layout.Container, {

package/lib/Animation/docs/Animation__slideLeft.docs.js

@@ -54,9 +54,9 @@ var Animation__slideLeft = /*#__PURE__*/function (_React$Component) {
       var 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["default"].createElement(_Layout.Container, {

package/lib/Animation/docs/Animation__zoomIn.docs.js

@@ -54,9 +54,9 @@ var Animation__zoomIn = /*#__PURE__*/function (_React$Component) {
       var 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["default"].createElement(_Layout.Container, {