@zohodesk/components 1.0.0-alpha-269 → 1.0.0-alpha-271

package/es/common/common.module.css

@@ -52,8 +52,8 @@
 .cboth::after {
   content: '.';
   display: block;
-  font-size: 0 ;
-  height: 0 ;
+  font-size: 0;
+  height: 0;
   line-height: 0;
   visibility: hidden;
   clear: both;
@@ -81,21 +81,21 @@
 .disabled::after,
 .readonly::after {
   position: absolute;
-  top: 0 ;
-  bottom: 0 ;
+  top: 0;
+  bottom: 0;
   z-index: 2;
   content: '';
   user-select: none;
 }
 
 [dir=ltr] .disable::after, [dir=ltr] .disabled::after, [dir=ltr] .readonly::after {
-  left: 0 ;
-  right: 0 ;
+  left: 0;
+  right: 0;
 }
 
 [dir=rtl] .disable::after, [dir=rtl] .disabled::after, [dir=rtl] .readonly::after {
-  right: 0 ;
-  left: 0 ;
+  right: 0;
+  left: 0;
 }
 
 .disabled, .readonly {
@@ -201,8 +201,8 @@
   -webkit-box-flex: 1;
   -ms-flex-positive: 1;
   flex-grow: 1;
-  min-height: 0 ;
-  min-width: 0 ;
+  min-height: 0;
+  min-width: 0;
 }
 
 .flexshrink {
@@ -213,7 +213,7 @@
 }
 
 .flexbasis {
-  flex-basis: 0% ;
+  flex-basis: 0%;
   -webkit-flex-basis: 0%;
   -moz-flex-basis: 0%;
   -ms-flex-basis: 0%;
@@ -331,11 +331,11 @@
 
 /* --Width Props-- */
 .w100 {
-  width: 100% ;
+  width: 100%;
 }
 
 .h100 {
-  height: 100% ;
+  height: 100%;
 }
 
 .rounded {
@@ -378,15 +378,15 @@
 }
 
 .t50 {
-  top: 50% ;
+  top: 50%;
 }
 
 [dir=ltr] .l50 {
-  left: 50% ;
+  left: 50%;
 }
 
 [dir=rtl] .l50 {
-  right: 50% ;
+  right: 50%;
 }
 
 [dir=ltr] .middle {
@@ -405,15 +405,15 @@
 
 .middleBoth {
   composes: middle;
-  top: 50% ;
+  top: 50%;
 }
 
 [dir=ltr] .middleBoth {
-  left: 50% ;
+  left: 50%;
 }
 
 [dir=rtl] .middleBoth {
-  right: 50% ;
+  right: 50%;
 }
 
 .middleY {
@@ -466,7 +466,7 @@
   content: '';
   vertical-align: middle;
   display: inline-block;
-  height: 100% ;
+  height: 100%;
 }
 
 .wbreak {
@@ -515,11 +515,11 @@
 }
 
 .fitContWidth {
-  width: fit-content ;
-  width: undefined ;
+  width: fit-content;
+  width: -moz-fit-content;
 }
 
 .fitContHeight {
-  height: fit-content ;
-  height: undefined ;
+  height: fit-content;
+  height: -moz-fit-content;
 }

package/es/common/customscroll.module.css

@@ -40,8 +40,8 @@
 .scroll::-webkit-scrollbar-button,
 .scroll ::-webkit-scrollbar-button {
   display: none;
-  width: 0 ;
-  height: 0 ;
+  width: 0;
+  height: 0;
 }
 [dir=ltr] .scroll::-webkit-scrollbar-track:vertical, [dir=ltr] .scroll ::-webkit-scrollbar-track:vertical {
   border-left: 1px solid transparent;

package/es/deprecated/AdvancedMultiSelect.module.css

@@ -5,7 +5,7 @@
   cursor: not-allowed;
 }
 .container {
-  max-height: var(--zd_size120) ;
+  max-height: 120px;
   composes: oflowy from '../common/common.module.css';
 }
 .hasBorder {
@@ -41,37 +41,37 @@
   border-bottom-color: var(--zdt_advancedmultiselect_dark_active_border);
 }
 [dir=ltr] .container.medium {
-  padding: 0 var(--zd_size34) var(--zd_size7) 0 ;
+  padding: 0 34px 7px 0;
 }
 [dir=rtl] .container.medium {
-  padding: 0 0 var(--zd_size7) var(--zd_size34) ;
+  padding: 0 0 7px 34px;
 }
 .container.xmedium {
-  min-height: var(--zd_size30) ;
+  min-height: 30px;
 }
 [dir=ltr] .container.xmedium {
-  padding: 0 var(--zd_size34) var(--zd_size1) 0 ;
+  padding: 0 34px 1px 0;
 }
 [dir=rtl] .container.xmedium {
-  padding: 0 0 var(--zd_size1) var(--zd_size34) ;
+  padding: 0 0 1px 34px;
 }
 
 .delete {
   position: absolute;
-  bottom: 0 ;
+  bottom: 0;
   color: var(--zdt_advancedmultiselect_delete_text);
-  padding-bottom: var(--zd_size10) ;
+  padding-bottom: 10px;
   cursor: pointer;
   background-color: var(--zdt_advancedmultiselect_delete_bg);
   border: 0;
 }
 
 [dir=ltr] .delete {
-  right: var(--zd_size15) ;
+  right: 15px;
 }
 
 [dir=rtl] .delete {
-  left: var(--zd_size15) ;
+  left: 15px;
 }
 
 .delete:hover {
@@ -91,25 +91,25 @@
 }
 
 .small {
-  max-height: var(--zd_size200) ;
+  max-height: 200px;
 }
 
 .medium {
-  max-height: var(--zd_size350) ;
+  max-height: 350px;
 }
 
 .large {
-  max-height: var(--zd_size400) ;
+  max-height: 400px;
 }
 
 .dropContainer {
   display: inline-block;
-  max-width: 100% ;
-  margin-bottom: var(--zd_size5) ;
+  max-width: 100%;
+  margin-bottom: 5px;
 }
 
 .dropPopup {
-  font-size: var(--zd_font_size13) ;
+  font-size: 13px;
 }
 
 .dropPopup :global .toggleDropIcon {
@@ -117,11 +117,11 @@
 }
 
 .more {
-  font-size: var(--zd_font_size14) ;
+  font-size: 14px;
   color: var(--zdt_advancedmultiselect_more_text);
   font-family: inherit;
   cursor: pointer;
-  margin-top: var(--zd_size5) ;
+  margin-top: 5px;
   background-color: var(--zdt_advancedmultiselect_delete_bg);
   border: 0;
 }

package/es/deprecated/PortalLayer/PortalLayer.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { propTypes } from './props/propTypes';
-import { defaultProps } from './props/defaultProps'; //Components
-
+import { defaultProps } from './props/defaultProps';
+//Components
 import Modal from '../../Modal/Modal';
 let RefElement = /*#__PURE__*/React.forwardRef((props, ref) => {
   let {
@@ -28,23 +28,20 @@ export default class PortalLayer extends React.Component {
     this.updateState = this.updateState.bind(this);
     this.getState = this.getState.bind(this);
   }
-
   componentDidUpdate(prevProps) {
     let {
-      isActive
-    } = this.props,
-        {
-      isActive: prevActive
-    } = prevProps;
+        isActive
+      } = this.props,
+      {
+        isActive: prevActive
+      } = prevProps;
     isActive = Boolean(isActive), prevActive = Boolean(prevActive);
-
     if (typeof isActive !== 'undefined' && isActive != prevActive && Boolean(this.state.isOpen) != isActive) {
       this.setState({
         isOpen: isActive
       });
     }
   }
-
   updateState(alertState) {
     if (typeof alertState === 'boolean') {
       this.setState({
@@ -54,11 +51,9 @@ export default class PortalLayer extends React.Component {
       this.setState(alertState);
     }
   }
-
   getState() {
     return Object.keys(this.state).length == 1 ? this.state.isOpen : this.state;
   }
-
   componentDidMount() {
     let {
       saveUpdateFunction,
@@ -68,20 +63,19 @@ export default class PortalLayer extends React.Component {
     saveUpdateFunction && saveUpdateFunction(this.updateState, name);
     saveGetFunction && saveGetFunction(this.getState, name);
   }
-
   render() {
     let {
-      children,
-      renderChildren,
-      portalId,
-      autoZIndexNeeded,
-      isChildrenRestrictionNeeded
-    } = this.props,
-        {
-      isOpen = false
-    } = this.state;
+        children,
+        renderChildren,
+        portalId,
+        autoZIndexNeeded,
+        isChildrenRestrictionNeeded
+      } = this.props,
+      {
+        isOpen = false
+      } = this.state;
     let Element = children && children.type,
-        elementProps = children && children.props;
+      elementProps = children && children.props;
     return /*#__PURE__*/React.createElement(Modal, {
       autoZIndexNeeded: autoZIndexNeeded,
       portalId: portalId,
@@ -94,10 +88,11 @@ export default class PortalLayer extends React.Component {
       isActive: isOpen
     }));
   }
-
 }
 PortalLayer.defaultProps = defaultProps;
-PortalLayer.propTypes = propTypes; // if (__DOCS__) {
+PortalLayer.propTypes = propTypes;
+
+// if (__DOCS__) {
 //   PortalLayer.docs = {
 //     componentGroup: 'Atom',
 //     folderName: 'Style Guide'

package/es/semantic/Button/Button.js

@@ -6,7 +6,6 @@ export default class Button extends React.Component {
   constructor(props) {
     super(props);
   }
-
   render() {
     const {
       value,
@@ -48,10 +47,10 @@ export default class Button extends React.Component {
       "data-title": title
     }, children ? children : text);
   }
-
 }
 Button.defaultProps = defaultProps;
-Button.propTypes = propTypes; // if (__DOCS__) {
+Button.propTypes = propTypes;
+// if (__DOCS__) {
 //   Button.docs = {
 //     componentGroup: 'semantic',
 //     folderName: 'DefaultComponents'

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

@@ -4,6 +4,6 @@
   color: inherit;
   border: inherit;
   background-color: inherit;
-  padding: 0 ;
+  padding: 0;
   text-align: inherit;
 }

package/es/utils/Common.js

@@ -9,6 +9,10 @@ export const getTotalDimension = (elem, align) => {
   const style = window.getComputedStyle(elem);
   return align === 'vertical' ? elem.offsetWidth + parseDecimal(style.marginLeft) + parseDecimal(style.marginRight) : elem.offsetHeight + parseDecimal(style.marginTop) + parseDecimal(style.marginBottom);
 };
+export function stopPropagation(e) {
+  e && e.stopPropagation && e.stopPropagation();
+}
+;
 export const stopAllEventPropagation = e => {
   e.stopPropagation && e.stopPropagation();
   e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
@@ -16,7 +20,9 @@ export const stopAllEventPropagation = e => {
 export function cancelBubblingEffect(e) {
   e && e.stopPropagation && e.stopPropagation();
   e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
-} // export function getCommentsDetails(
+}
+
+// export function getCommentsDetails(
 //   commentIds = [],
 //   comments = {},
 //   agents = {}
@@ -39,7 +45,6 @@ export function encodeForHtml(str) {
     str = str.replace(/\\/g, '\');
     str = str.replace(/'/g, ''');
   }
-
   return str;
 }
 export function getListOfDetails() {
@@ -51,7 +56,6 @@ export function getListOfDetails() {
 export function capitalize() {
   let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   let newValue = '';
-
   for (let i = 0; i < value.length; i++) {
     if (i == 0) {
       newValue += value[i].toUpperCase();
@@ -59,14 +63,12 @@ export function capitalize() {
       newValue += value[i].toLowerCase();
     }
   }
-
   return newValue;
 }
 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);
   });
@@ -75,15 +77,12 @@ 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 !== '') {
     fullName = firstName;
   }
-
   if (lastName !== null && lastName !== '') {
     fullName = `${fullName}${lastName}`;
   }
-
   return fullName;
 }
 export function getStringifiedOutputForJson() {
@@ -91,7 +90,6 @@ export function getStringifiedOutputForJson() {
   const keys = Object.keys(input);
   const modifiedInput = keys.reduce((curr, next) => {
     const values = input[next] || [];
-
     if (values.length) {
       const valueList = values.reduce((curr, next) => {
         curr.push(next.id);
@@ -100,7 +98,6 @@ export function getStringifiedOutputForJson() {
       curr[next] = valueList;
       return curr;
     }
-
     return curr;
   }, {});
   return JSON.stringify(modifiedInput);
@@ -116,7 +113,6 @@ export function filterValue(obj, val) {
   const ids = obj ? Object.keys(obj) : [];
   ids.forEach(key => {
     const value = obj[key] || {};
-
     if (value.name === val && !value.isCustomField) {
       result = value.id;
     }
@@ -138,42 +134,34 @@ export function formatValue() {
   let textField = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'name';
   return values && values.map(value => {
     let formattedValue = value;
-
     if (typeof value === 'string' || typeof value === 'number') {
       formattedValue = {};
       formattedValue[valueField] = value;
       formattedValue[textField] = value;
     }
-
     return formattedValue;
   }) || [];
 }
 export function bytesToSize(bytes) {
   bytes = parseInt(bytes, 10);
   const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
-
   if (bytes === 0) {
     return '0 Byte';
   }
-
   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) {
   let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
   const thresh = size ? 1000 : 1024;
-
   if (Math.abs(bytes) < thresh) {
     return `${bytes} B`;
   }
-
   let units = size ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'],
-      i = -1;
-
+    i = -1;
   do {
     bytes /= thresh, ++i;
   } while (Math.abs(bytes) >= thresh && i < units.length - 1);
-
   {
     return `${bytes.toFixed(1)} ${units[i]}`;
   }
@@ -182,24 +170,18 @@ export function checkIsImageFile(fileName) {
   fileName = fileName || '';
   return /jpeg|jpg|png|gif|bmp|tiff|tif|ico/gi.test(fileName.substr(fileName.lastIndexOf('.') + 1));
 }
-
 function getI18NValue(key, values) {
   if (typeof i18n === 'undefined' || key === '' || typeof key === 'undefined') {
     return key;
   }
-
   let i18nStr = i18n[key];
-
   if (i18nStr === undefined) {
     return key;
   }
-
   i18nStr = replaceI18NValuesWithRegex(i18nStr, values);
   return unescapeUnicode(i18nStr);
 }
-
 global.getI18NValue = getI18NValue;
-
 function replaceI18NValuesWithRegex(i18nStr, values) {
   if (typeof values !== 'undefined') {
     if (Array.isArray(values)) {
@@ -210,27 +192,22 @@ function replaceI18NValuesWithRegex(i18nStr, values) {
       i18nStr = i18nStr.replace(new RegExp('\\{0\\}', 'g'), values);
     }
   }
-
   return i18nStr;
 }
-
 function unescapeUnicode(str) {
   return str.replace(/\\u([a-fA-F0-9]{4})/g, (g, m1) => String.fromCharCode(parseInt(m1, 16)));
 }
-
 export function getPortalName(portalList, portalId) {
   return portalList && portalList.reduce((res, portal) => {
     if (portal.orgId === portalId) {
       return portal.orgName;
     }
-
     return res;
   }, null);
 }
 export function getFullDateString(fullDateObj) {
   let dateStr = '';
   const monthArr = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-
   if (fullDateObj.toDateString() == new Date().toDateString()) {
     dateStr = format12Hour(fullDateObj);
   } else {
@@ -240,7 +217,6 @@ export function getFullDateString(fullDateObj) {
     const time = format12Hour(fullDateObj);
     dateStr = `${month} ${date} ${year} ${time}`;
   }
-
   return dateStr;
 }
 export function format12Hour(date) {
@@ -249,7 +225,6 @@ export function format12Hour(date) {
   const ampm = hours >= 12 ? 'pm' : 'am';
   hours %= 12;
   hours = hours ? hours : 12; // the hour '0' should be '12'
-
   minutes = minutes < 10 ? `0${minutes}` : minutes;
   const strTime = `${hours}:${minutes} ${ampm}`;
   return strTime;
@@ -257,7 +232,6 @@ export function format12Hour(date) {
 export function getDateOnly(fullDateObj) {
   let dateStr = '';
   const monthArr = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-
   if (fullDateObj.toDateString() == new Date().toDateString()) {
     dateStr = 'Today';
   } else {
@@ -266,7 +240,6 @@ export function getDateOnly(fullDateObj) {
     const date = fullDateObj.getDate();
     dateStr = `${month} ${date} ${year}`;
   }
-
   return dateStr;
 }
 export function doAfterScrollEnd(element, callback) {
@@ -280,7 +253,6 @@ export function doAfterScrollEnd(element, callback) {
     scrollHeight
   } = element;
   const scrollPercent = scrollTop / (scrollHeight - clientHeight) * 100;
-
   if (scrollPercent > 80) {
     callback && callback();
   }
@@ -297,11 +269,9 @@ 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;
   }
-
   timerId = setTimeout(() => {
     try {
       func(...args);
@@ -314,7 +284,6 @@ export const scrollTo = function (suggestionContainer, selSuggestion) {
   if (!suggestionContainer || !selSuggestion) {
     return;
   }
-
   const {
     rectGap
   } = frameRelativeRects(selSuggestion, suggestionContainer) || {};
@@ -322,11 +291,9 @@ export const scrollTo = function (suggestionContainer, selSuggestion) {
     top = 0,
     bottom = 0
   } = rectGap || {};
-
   if (top < 0 && bottom < 0) {
     return;
   }
-
   const isElementInViewPort = top < 0 || bottom < 0 ? false : true;
   const suggestionContainerScrollTop = suggestionContainer.scrollTop;
   suggestionContainer.scrollTop = !isElementInViewPort ? bottom < 0 ? suggestionContainer.scrollTop + Math.abs(bottom) : top < 0 ? suggestionContainer.scrollTop - Math.abs(top) : suggestionContainerScrollTop : suggestionContainerScrollTop;
@@ -338,21 +305,17 @@ export function remConvert(val) {
 }
 export function isDescendant(parent, child) {
   let node = child.parentNode;
-
   while (node !== null) {
     if (node === parent) {
       return true;
     }
-
     node = node.parentNode;
   }
-
   return false;
 }
 export function getElementSpace(elementRef) {
   let neededSpace = 0,
-      availableInsideSpace = 0;
-
+    availableInsideSpace = 0;
   if (elementRef) {
     let getStyle = window.getComputedStyle(elementRef);
     let margin = parseFloat(getStyle.marginLeft) + parseFloat(getStyle.marginRight);
@@ -361,7 +324,6 @@ export function getElementSpace(elementRef) {
     neededSpace = width + margin;
     availableInsideSpace = width - padding;
   }
-
   return {
     neededSpace: neededSpace,
     availableInsideSpace: availableInsideSpace
@@ -371,6 +333,7 @@ export function getSearchString() {
   let charachers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   return (charachers || '').toString().toLowerCase(); //.replace(/\s+/g, '');
 }
+
 export function findScrollEnd(element) {
   let {
     scrollHeight,
@@ -379,30 +342,26 @@ export function findScrollEnd(element) {
     clientHeight
   } = element || {};
   let isElementScrollable = scrollHeight > clientHeight;
-
   if (isElementScrollable) {
     if (scrollHeight <= Math.ceil(scrollTop + offsetHeight)) {
       return true;
     }
-  } // else {
+  }
+  // else {
+
   //   throw 'Is scroll not present in this element';
   // }
-
-
   return false;
 }
 export function isTextSelected() {
   let selectedText = '';
-
   if (window.getSelection) {
     selectedText = window.getSelection().toString();
   } else if (document.getSelection) {
     selectedText = document.getSelection().toString();
   }
-
   if (selectedText !== '') {
     return true;
   }
-
   return false;
 }