@zohodesk/components 1.0.0-temp-36 → 1.0.0-temp-40

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: 0.3s;
-  transition-property: all;
-}
-.zoomInEnter.zoomInEnterActive,
-.zoomInLeave {
-  opacity: 1;
-}
-.zoomInEnter.zoomInEnterActive, .zoomInLeave {
-  transform: perspective(1px) scale(1) translateZ(0);
-  transition-duration: 0.3s;
-  transition-property: all;
-}
-
-.scaleInEnter,
-.scaleInLeave.scaleInLeaveActive {
-  opacity: 0;
-}
-
-.scaleInEnter, .scaleInLeave.scaleInLeaveActive {
-  transform: scale(0);
-  transition-duration: 0.3s;
-  transition-property: all;
-}
-.scaleInEnter.scaleInEnterActive,
-.scaleInLeave {
-  opacity: 1;
-}
-.scaleInEnter.scaleInEnterActive, .scaleInLeave {
-  transform: scale(1);
-  transition-duration: 0.3s;
-  transition-property: all;
-}
-
-.fadeInEnter,
-.fadeInLeave.fadeInLeaveActive {
-  opacity: 0;
-}
-
-.fadeInEnter, .fadeInLeave.fadeInLeaveActive {
-  transition-duration: 0.3s;
-  transition-property: all;
-}
-
-.fadeInEnter.fadeInEnterActive,
-.fadeInLeave {
-  opacity: 1;
-}
-
-.fadeInEnter.fadeInEnterActive, .fadeInLeave {
-  transition-duration: 0.3s;
-  transition-property: all;
-}
-
-.slideLeftEnter,
-.slideLeftLeave.slideLeftLeaveActive {
-  opacity: 0;
-}
-
-.slideLeftEnter, .slideLeftLeave.slideLeftLeaveActive {
-  transition-duration: 0.3s;
-  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: 0.3s;
-  transition-property: all;
-}
-
-.slideDownEnter,
-.slideDownLeave.slideDownLeaveActive {
-  opacity: 0;
-}
-
-.slideDownEnter, .slideDownLeave.slideDownLeaveActive {
-  transform: translateY(-100%);
-  transition-duration: 0.3s;
-  transition-property: all;
-}
-
-.slideDownEnter.slideDownEnterActive,
-.slideDownLeave {
-  opacity: 1;
-}
-
-.slideDownEnter.slideDownEnterActive, .slideDownLeave {
-  transform: translateY(0%);
-  transition-duration: 0.3s;
-  transition-property: all;
-}
-
-.skewInEnter,
-.skewInLeave.skewInLeaveActive {
-  opacity: 0;
-}
-
-.skewInEnter, .skewInLeave.skewInLeaveActive {
-  transition-duration: 0.3s;
-  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: 0.3s;
-  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

@@ -38,11 +38,14 @@ export function encodeForHtml(str) {
 
   return str;
 }
-export function getListOfDetails(Obj = {}, fn) {
+export function getListOfDetails() {
+  let Obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let fn = arguments.length > 1 ? arguments[1] : undefined;
   const ids = Object.keys(Obj) || [];
   return ids.map(id => fn(Obj[id]));
 }
-export function capitalize(value = '') {
+export function capitalize() {
+  let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   let newValue = '';
 
   for (let i = 0; i < value.length; i++) {
@@ -55,12 +58,18 @@ export function capitalize(value = '') {
 
   return newValue;
 }
-export function bind(...handlers) {
+export function bind() {
+  for (var _len = arguments.length, handlers = new Array(_len), _key = 0; _key < _len; _key++) {
+    handlers[_key] = arguments[_key];
+  }
+
   handlers.forEach(handler => {
     this[handler] = this[handler].bind(this);
   });
 }
-export function getFullName(firstName = '', lastName = '') {
+export function getFullName() {
+  let firstName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  let lastName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   let fullName = '';
 
   if (firstName !== null && firstName !== '') {
@@ -73,7 +82,8 @@ export function getFullName(firstName = '', lastName = '') {
 
   return fullName;
 }
-export function getStringifiedOutputForJson(input = {}) {
+export function getStringifiedOutputForJson() {
+  let input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const keys = Object.keys(input);
   const modifiedInput = keys.reduce((curr, next) => {
     const values = input[next] || [];
@@ -109,14 +119,19 @@ export function filterValue(obj, val) {
   });
   return result;
 }
-export function merge(oldObj = {}, newObj) {
+export function merge() {
+  let oldObj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let newObj = arguments.length > 1 ? arguments[1] : undefined;
   const copyOfOld = Object.assign({}, oldObj);
   return Object.keys(newObj).reduce((res, key) => {
     res[key] = Object.assign({}, res[key] || {}, newObj[key]);
     return res;
   }, copyOfOld);
 }
-export function formatValue(values = [], valueField = 'id', textField = 'name') {
+export function formatValue() {
+  let values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  let valueField = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'id';
+  let textField = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'name';
   return values && values.map(value => {
     let formattedValue = value;
 
@@ -140,7 +155,8 @@ export function bytesToSize(bytes) {
   const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)), 10);
   return `${Math.round(bytes / Math.pow(1024, i), 2)} ${sizes[i]}`;
 }
-export function getMemSize(bytes, size = !0) {
+export function getMemSize(bytes) {
+  let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
   const thresh = size ? 1000 : 1024;
 
   if (Math.abs(bytes) < thresh) {
@@ -206,10 +222,7 @@ export function getPortalName(portalList, portalId) {
 
     return res;
   }, null);
-} // export function isAllDepartmentView() {
-//   return false;
-// }
-
+}
 export function getFullDateString(fullDateObj) {
   let dateStr = '';
   const monthArr = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
@@ -276,7 +289,11 @@ export const debounce = function (func, wait) {
   };
 };
 let timerId;
-export const throttle = (func, wait, ...args) => {
+export const throttle = function (func, wait) {
+  for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
+    args[_key2 - 2] = arguments[_key2];
+  }
+
   if (timerId) {
     return;
   }
@@ -345,4 +362,8 @@ export function getElementSpace(elementRef) {
     neededSpace: neededSpace,
     availableInsideSpace: availableInsideSpace
   };
+}
+export function getSearchString() {
+  let charachers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  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

@@ -3,7 +3,9 @@ let dateFormat = {
   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'],
   timeNames: ['a', 'p', 'am', 'pm', 'A', 'P', 'AM', 'PM']
 };
-export function pad(n, width = 1, z) {
+export function pad(n) {
+  let width = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+  let z = arguments.length > 2 ? arguments[2] : undefined;
   z = z || '0';
   n = `${n}`;
   return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
@@ -75,7 +77,9 @@ export function replaceI18NValuesWithRegex(i18nStr, values) {
 export function unescapeUnicode(str) {
   return str.replace(/\\u([a-fA-F0-9]{4})/g, (g, m1) => String.fromCharCode(parseInt(m1, 16)));
 }
-export function getValues(params = [], diff) {
+export function getValues() {
+  let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  let diff = arguments.length > 1 ? arguments[1] : undefined;
   return params.map(param => diff[param]);
 }
 export function getI18NValue(i18n) {

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.replace ? value.replace(/\s+/g, '').toLowerCase() : value.toString();
-    const searchString = searchStr.replace(/\s+/g, '').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);
@@ -370,11 +377,12 @@ export const makeGetOptionIdChange = () => createSelector([getOptions, getValueF
     return changedOptions;
   }, newOptions);
 });
-export const filterSelectedOptions = ({
-  selectedOptions = dummyArray,
-  propSelectedOptions = dummyArray,
-  disabledOptions = dummyArray
-} = {}) => {
+export const filterSelectedOptions = function () {
+  let {
+    selectedOptions = dummyArray,
+    propSelectedOptions = dummyArray,
+    disabledOptions = dummyArray
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   // eslint-disable-next-line no-param-reassign
   selectedOptions = selectedOptions || dummyArray; // eslint-disable-next-line no-param-reassign
 

package/es/utils/getInitial.js

@@ -1,4 +1,6 @@
-export function getInitial(firstName = '', lastName = '') {
+export function getInitial() {
+  let firstName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  let lastName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   let initial = '';
 
   if (firstName) {

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);
+    }
+  });
+});