@zohodesk/components 1.0.0-alpha-272 → 1.0.0-alpha-274

package/es/Heading/Heading.js

@@ -20,6 +20,7 @@ export default class Heading extends React.Component {
       onDoubleClick,
       'data-title': dataTitle || title,
       'data-id': dataId,
+      'data-test-id': dataId,
       ...a11y
     }, title);
   }

package/es/Heading/Heading.module.css

@@ -1,5 +1,5 @@
 .reset {
-  font-size: initial;
+  font-size: initial ;
   font-weight: initial;
-  margin: initial;
+  margin: initial ;
 }

package/es/Label/Label.js

@@ -29,6 +29,7 @@ export default class Label extends React.Component {
       htmlFor: htmlFor,
       "data-title": title,
       "data-id": dataId,
+      "data-test-id": dataId,
       "data-selector-id": dataSelectorId,
       onClick: onClick,
       id: id

package/es/Label/Label.module.css

@@ -1,6 +1,6 @@
 .varClass {
   /* label default variables */
-  --label_font_size: 14px;
+  --label_font_size: var(--zd_font_size14);
   --label_text_color: var(--zdt_label_default_text);
   --label_font_family: var(--zd_regular);
   --label_cursor: default;
@@ -16,16 +16,16 @@
   cursor: var(--label_cursor);
 }
 .xsmall {
-  --label_font_size: 12px;
+  --label_font_size: var(--zd_font_size12);
 }
 .small {
-  --label_font_size: 13px;
+  --label_font_size: var(--zd_font_size13);
 }
 .medium {
-  --label_font_size: 14px;
+  --label_font_size: var(--zd_font_size14);
 }
 .large {
-  --label_font_size: 26px;
+  --label_font_size: var(--zd_font_size26);
   composes: semibold from '../common/common.module.css';
 }
 .pointer {

package/es/Layout/Box.js

@@ -96,18 +96,19 @@ export function getBoxProps(props) {
   return createProps(propTypes, props, getBoxClassNames(props));
 }
 export default function Box(props) {
-  let childProps = getBoxProps(props);
   let {
     tagName
   } = props;
-  setProps(childProps, props, {
+  let componentProps = setProps({ ...getBoxProps(props)
+  }, props, {
     isScrollAttribute: 'data-scroll',
     eleRef: 'ref',
     dataId: 'data-id',
+    testId: 'data-test-id',
     tourId: 'data-tour',
     dataSelectorId: 'data-selector-id'
   });
-  return /*#__PURE__*/React.createElement(tagName, childProps);
+  return /*#__PURE__*/React.createElement(tagName, componentProps);
 }
 Box.propTypes = propTypes;
 Box.defaultProps = defaultProps;

package/es/Layout/Container.js

@@ -113,18 +113,19 @@ export function getContainerProps(props) {
   return createProps(propTypes, props, getContainerClassNames(props));
 }
 export default function Container(props) {
-  let childProps = getContainerProps(props);
   let {
     tagName
   } = props;
-  setProps(childProps, props, {
+  let componentProps = setProps({ ...getContainerProps(props)
+  }, props, {
     isScrollAttribute: 'data-scroll',
     eleRef: 'ref',
     dataId: 'data-id',
+    testId: 'data-test-id',
     tourId: 'data-tour',
     dataSelectorId: 'data-selector-id'
   });
-  return /*#__PURE__*/React.createElement(tagName, childProps);
+  return /*#__PURE__*/React.createElement(tagName, componentProps);
 }
 Container.propTypes = propTypes;
 Container.defaultProps = defaultProps;

package/es/Layout/Layout.module.css

@@ -11,8 +11,8 @@
 }
 
 .cover {
-  width: 100%;
-  height: 100%;
+  width: 100% ;
+  height: 100% ;
 }
 
 /* .flex {
@@ -67,8 +67,8 @@
   -webkit-box-flex: 1;
   -ms-flex-positive: 1;
   flex-grow: 1;
-  min-height: 0;
-  min-width: 0;
+  min-height: 0 ;
+  min-width: 0 ;
 }
 
 .shrinkOff {
@@ -83,18 +83,18 @@
   -moz-flex-shrink: 1;
   -webkit-flex-shrink: 1;
   -ms-flex-shrink: 1;
-  min-width: 0;
+  min-width: 0 ;
 }
 
 .basis {
-  flex-basis: 0%;
+  flex-basis: 0% ;
   -webkit-flex-basis: 0%;
   -moz-flex-basis: 0%;
   -ms-flex-basis: 0%;
 }
 
 .basisAuto {
-  flex-basis: auto;
+  flex-basis: auto ;
   -webkit-flex-basis: auto;
   -moz-flex-basis: auto;
   -ms-flex-basis: auto;
@@ -146,8 +146,8 @@
 
 .col-3 {
   -ms-flex-preferred-size: 25%;
-  flex-basis: 25%;
-  max-width: 25%;
+  flex-basis: 25% ;
+  max-width: 25% ;
 }
 
 .col-4 {
@@ -164,8 +164,8 @@
 
 .col-6 {
   -ms-flex-preferred-size: 50%;
-  flex-basis: 50%;
-  max-width: 50%;
+  flex-basis: 50% ;
+  max-width: 50% ;
 }
 
 .col-7 {
@@ -182,8 +182,8 @@
 
 .col-9 {
   -ms-flex-preferred-size: 75%;
-  flex-basis: 75%;
-  max-width: 75%;
+  flex-basis: 75% ;
+  max-width: 75% ;
 }
 
 .col-10 {
@@ -200,8 +200,8 @@
 
 .col-12 {
   -ms-flex-preferred-size: 100%;
-  flex-basis: 100%;
-  max-width: 100%;
+  flex-basis: 100% ;
+  max-width: 100% ;
 }
 
 .hCenter {

package/es/Layout/props/defaultProps.js

@@ -1,11 +1,13 @@
 export const BoxDefaultProps = {
   dataId: 'boxComponent',
+  testId: '',
   isScrollAttribute: false,
   tagName: 'div',
   dataSelectorId: 'box'
 };
 export const ContainerDefaultProps = {
   dataId: 'containerComponent',
+  testId: '',
   isScrollAttribute: false,
   isCover: true,
   alignBox: 'column',

package/es/Layout/props/propTypes.js

@@ -6,6 +6,7 @@ export const BoxProps = {
   className: PropTypes.string,
   column: PropTypes.oneOf(['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']),
   dataId: PropTypes.string,
+  testId: PropTypes.string,
   dataSelectorId: PropTypes.string,
   eleRef: PropTypes.func,
   flexible: PropTypes.bool,
@@ -30,6 +31,7 @@ export const ContainerProps = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
   className: PropTypes.string,
   dataId: PropTypes.string,
+  testId: PropTypes.string,
   dataSelectorId: PropTypes.string,
   eleRef: PropTypes.func,
   hidden: PropTypes.array,

package/es/Layout/utils.js

@@ -17,8 +17,12 @@ export function isInteger(value) {
 }
 export function setProps(childProps, props) {
   let values = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  Object.keys(values).map(value => {
+  Object.keys(values).forEach(value => {
     if (props[value]) {
+      if (value === 'dataId') {
+        childProps['data-test-id'] = props[value];
+      }
+
       childProps[values[value]] = props[value];
     }
   });

package/es/ListItem/ListItem.module.css

@@ -1,7 +1,7 @@
 .varClass {
   /* listitem default variables */
   --listitem_text_color: var(--zdt_listitem_default_text);
-  --listitem_padding: 9px 20px;
+  --listitem_padding: var(--zd_size9) var(--zd_size20);
   --listitem_border_width: 0;
   --listitem_border_color: var(--zdt_listitem_default_border);
   --listitem_bg_color: var(--zdt_listitem_default_bg);
@@ -15,17 +15,17 @@
   /* listitem tick icon default variables */
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
 }[dir=ltr] .varClass {
-  --listitem_avatar_margin: 0 15px 0 0
-    /*rtl: 0 0 0 15px*/;
+  --listitem_avatar_margin: 0 var(--zd_size15) 0 0
+    ;
 }[dir=rtl] .varClass {
-  --listitem_avatar_margin: 0 0 0 15px;
+  --listitem_avatar_margin: 0 0 0 var(--zd_size15);
 }
 .list {
   composes: varClass;
   position: relative;
   list-style: none;
   color: var(--listitem_text_color);
-  font-size: 13px;
+  font-size: var(--zd_font_size13) ;
   height: var(--listitem_height);
   min-height: var(--listitem_min_height);
   text-decoration: none;
@@ -48,27 +48,27 @@
   --listitem_border_color: var(--zdt_listitem_active_border);
 }
 [dir=ltr] .small {
-  --listitem_padding: 7px 3px 7px
-    5px
-    /*rtl: 7px 5px 7px 3px*/;
+  --listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7
+)    var(--zd_size5
+)    ;
 }
 [dir=rtl] .small {
-  --listitem_padding: 7px 5px 7px 3px;
+  --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3);
 }
 .medium {
-  --listitem_padding: 7px 20px;
-  --listitem_min_height: 35px;
+  --listitem_padding: var(--zd_size7) var(--zd_size20);
+  --listitem_min_height: var(--zd_size35);
 }
 .large {
-  --listitem_height: 48px;
+  --listitem_height: var(--zd_size48);
 }
 [dir=ltr] .large {
-  --listitem_padding: 10px 3px 10px
-    25px
-    /*rtl: 10px 25px 10px 3px*/;
+  --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10
+)    var(--zd_size25
+)    ;
 }
 [dir=rtl] .large {
-  --listitem_padding: 10px 25px 10px 3px;
+  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
 }
 .value,
 .children {
@@ -82,18 +82,18 @@
   composes: clamp from '../common/common.module.css'
 }
 .iconBox {
-  width: 20px;
+  width: var(--zd_size20) ;
   text-align: center;
 }
 [dir=ltr] .iconBox {
-  margin-right: 10px;
+  margin-right: var(--zd_size10) ;
 }
 [dir=rtl] .iconBox {
-  margin-left: 10px;
+  margin-left: var(--zd_size10) ;
 }
 .iconBox,
 .leftAvatar {
-  font-size: 0;
+  font-size: 0 ;
 }
 .leftAvatar {
   margin: var(--listitem_avatar_margin);
@@ -169,11 +169,11 @@
 }
 
 [dir=ltr] .tickIcon, [dir=ltr] .defaultTick, [dir=ltr] .darkTick {
-  right: 20px;
+  right: var(--zd_size20) ;
 }
 
 [dir=rtl] .tickIcon, [dir=rtl] .defaultTick, [dir=rtl] .darkTick {
-  left: 20px;
+  left: var(--zd_size20) ;
 }
 .defaultTick {
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
@@ -185,32 +185,32 @@
   display: block;
 }
 [dir=ltr] .smallwithTick {
-  --listitem_padding: 7px 39px 7px
-    5px
-    /*rtl: 7px 5px 7px 39px*/;
+  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7
+)    var(--zd_size5
+)    ;
 }
 [dir=rtl] .smallwithTick {
-  --listitem_padding: 7px 5px 7px 39px;
+  --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size39);
 }
 [dir=ltr] .mediumwithTick {
-  --listitem_padding: 7px 39px 7px
-    20px
-    /*rtl: 7px 20px 7px 39px*/;
+  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7
+)    var(--zd_size20
+)    ;
 }
 [dir=rtl] .mediumwithTick {
-  --listitem_padding: 7px 20px 7px 39px;
+  --listitem_padding: var(--zd_size7) var(--zd_size20) var(--zd_size7) var(--zd_size39);
 }
 [dir=ltr] .largewithTick {
-  --listitem_padding: 10px 39px 10px
-    25px
-    /*rtl: 10px 25px 10px 39px*/;
+  --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10
+)    var(--zd_size25
+)    ;
 }
 [dir=rtl] .largewithTick {
-  --listitem_padding: 10px 25px 10px 39px;
+  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);
 }
 .responsiveHeight {
-  --listitem_min_height: 45px;
-  font-size: 15px;
-  padding-top: 10px;
-  padding-bottom: 10px;
+  --listitem_min_height: var(--zd_size45);
+  font-size: var(--zd_font_size15) ;
+  padding-top: var(--zd_size10) ;
+  padding-bottom: var(--zd_size10) ;
 }

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -902,6 +902,7 @@ class AdvancedGroupMultiSelect extends React.Component {
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
+      "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : null,
       onClick: this.handleInputFocus,
       "data-selector-id": dataSelectorId

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -411,6 +411,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": dataIdMultiSelectComp,
+      "data-test-id": dataIdMultiSelectComp,
       "data-title": isDisabled ? title : null,
       onClick: this.handleInputFocus,
       "data-selector-id": dataSelectorId

package/es/MultiSelect/EmptyState.js

@@ -35,21 +35,25 @@ export default class EmptyState extends React.PureComponent {
     return /*#__PURE__*/React.createElement(React.Fragment, null, isLoading ? /*#__PURE__*/React.createElement("div", {
       className: className,
       "data-id": `${dataId}_Loading`,
+      "data-test-id": `${dataId}_Loading`,
       role: role,
       id: htmlId
     }, loadingText) : searchString.length && suggestions.length === 0 ? getCustomEmptyState ? getCustomEmptyState() : /*#__PURE__*/React.createElement("div", {
       className: className,
       "data-id": `${dataId}_srchEmptyMsg`,
+      "data-test-id": `${dataId}_srchEmptyMsg`,
       role: role,
       id: htmlId
     }, searchEmptyText || emptyText) : options.length === 0 ? /*#__PURE__*/React.createElement("div", {
       className: className,
       "data-id": `${dataId}_noOptnsMsg`,
+      "data-test-id": `${dataId}_noOptnsMsg`,
       role: role,
       id: htmlId
     }, emptyText) : /*#__PURE__*/React.createElement("div", {
       className: className,
       "data-id": `${dataId}_NoMoreOptionMsg`,
+      "data-test-id": `${dataId}_NoMoreOptionMsg`,
       role: role,
       id: htmlId
     }, noMoreText || emptyText));

package/es/MultiSelect/MultiSelect.js

@@ -932,6 +932,7 @@ export class MultiSelectComponent extends React.Component {
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
+      "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : null,
       onClick: this.handleInputFocus,
       "data-selector-id": dataSelectorId

package/es/MultiSelect/MultiSelect.module.css

@@ -5,7 +5,7 @@
   cursor: not-allowed;
 }
 .container {
-  max-height: 120px;
+  max-height: var(--zd_size120) ;
   composes: oflowy from '../common/common.module.css';
 }
 .hasBorder {
@@ -42,17 +42,17 @@
 }
 
 .container.medium {
-  padding-bottom: 8px;
+  padding-bottom: var(--zd_size8) ;
 }
 
 .container.xmedium {
-  min-height: 30px;
-  padding-bottom: 3px;
+  min-height: var(--zd_size30) ;
+  padding-bottom: var(--zd_size3) ;
 }
 
 .delete {
   font: inherit;
-  padding: 2px 6px;
+  padding: var(--zd_size2) var(--zd_size6) ;
   cursor: pointer;
   border: 0;
   background-color: var(--zdt_multiselect_delete_bg);
@@ -82,26 +82,26 @@
 }
 
 .tag {
-  max-width: 100%;
+  max-width: 100% ;
 }
 
 [dir=ltr] .container.xmedium .tag {
-  margin: 2px 10px 0 0;
+  margin: var(--zd_size2) var(--zd_size10) 0 0 ;
 }
 
 [dir=rtl] .container.xmedium .tag {
-  margin: 2px 0 0 10px;
+  margin: var(--zd_size2) 0 0 var(--zd_size10) ;
 }
 
 [dir=ltr] .container.medium .tag {
-  margin: 5px 10px 0 0;
+  margin: var(--zd_size5) var(--zd_size10) 0 0 ;
 }
 
 [dir=rtl] .container.medium .tag {
-  margin: 5px 0 0 10px;
+  margin: var(--zd_size5) 0 0 var(--zd_size10) ;
 }
 .responsiveParent{
-  width: 100%;
+  width: 100% ;
 }
 .box {
   background: var(--zdt_multiselect_box_bg);
@@ -112,21 +112,21 @@
 }
 
 .small {
-  max-height: 200px;
+  max-height: var(--zd_size200) ;
 }
 
 .medium {
-  max-height: 350px;
+  max-height: var(--zd_size350) ;
 }
 
 .large {
-  max-height: 400px;
+  max-height: var(--zd_size400) ;
 }
 
 .commonMessage {
-  font-size: 14px;
+  font-size: var(--zd_font_size14) ;
   composes: semibold from '../common/common.module.css';
-  padding: 12px 15px;
+  padding: var(--zd_size12) var(--zd_size15) ;
 }
 .default,
 .dark {
@@ -154,54 +154,54 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: 100%;
+  max-width: 100% ;
   visibility: hidden;
 }
 .custmSpanMedium {
-  height: 35px;
+  height: var(--zd_size35) ;
 }
 .custmSpanXmedium {
-  height: 28px;
+  height: var(--zd_size28) ;
 }
 .custmInputWrapper {
   position: absolute;
-  top: 0;
-  width: 100%;
+  top: 0 ;
+  width: 100% ;
 }
 [dir=ltr] .custmInputWrapper {
-  left: 0;
+  left: 0 ;
 }
 [dir=rtl] .custmInputWrapper {
-  right: 0;
+  right: 0 ;
 }
 .title {
-  margin-bottom: 6px;
+  margin-bottom: var(--zd_size6) ;
 }
 .groupTitle {
-  margin: 6px 0;
+  margin: var(--zd_size6) 0 ;
 }
 .loader {
-  padding: 10px;
+  padding: var(--zd_size10) ;
 }
 .iconContainer {
-  padding-top: 3px
+  padding-top: var(--zd_size3) 
 }
 [dir=ltr] .clearIconSpace {
-  padding-right: 37px
+  padding-right: var(--zd_size37) 
 }
 [dir=rtl] .clearIconSpace {
-  padding-left: 37px
+  padding-left: var(--zd_size37) 
 }
 .search{
   /*  Variable:Ignore  */
   padding: 0px 20px;
 }
 .more {
-  font-size: 14px;
+  font-size: var(--zd_font_size14) ;
   color: var(--zdt_multiselect_more_text);
   font-family: inherit;
   cursor: pointer;
-  margin-top: 5px;
+  margin-top: var(--zd_size5) ;
   background-color: var(--zdt_multiselect_delete_bg);
   border: 0;
 }

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -143,6 +143,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
     return /*#__PURE__*/React.createElement("div", {
       className: ` ${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
+      "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : null,
       onClick: this.handleInputFocus,
       "data-selector-id": dataSelectorId

package/es/MultiSelect/SelectedOptions.module.css

@@ -1,15 +1,15 @@
 .tag {
-  max-width: 100%;
+  max-width: 100% ;
 }
 [dir=ltr] .xmedium {
-  margin: 0 10px 2px 0;
+  margin: 0 var(--zd_size10) var(--zd_size2) 0 ;
 }
 [dir=rtl] .xmedium {
-  margin: 0 0 2px 10px;
+  margin: 0 0 var(--zd_size2) var(--zd_size10) ;
 }
 [dir=ltr] .medium {
-  margin: 5px 10px 0 0;
+  margin: var(--zd_size5) var(--zd_size10) 0 0 ;
 }
 [dir=rtl] .medium {
-  margin: 5px 0 0 10px;
+  margin: var(--zd_size5) 0 0 var(--zd_size10) ;
 }

package/es/Popup/Popup.js

@@ -356,10 +356,7 @@ const Popup = function (Component) {
             placeHolderElement
           } = openedPopup;
           const isDropBoxChild = isDescendant(dropElement, target);
-          const isTargetChild = isDescendant(placeHolderElement, target); // const massUpdateParent = document.querySelector(
-          //   '[data-id=massUpdatePopup]'
-          // );
-          // const isPopupMassUpdateChild = isDescendant(
+          const isTargetChild = isDescendant(placeHolderElement, target); // const isPopupMassUpdateChild = isDescendant(
           //   massUpdateParent,
           //   dropElement
           // );