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

package/es/common/basicReset.module.css

@@ -3,11 +3,11 @@ a {
 }
 
 button {
-  padding: 0;
+  padding: 0 ;
 }
 
 p, h1, h2, h3, h4, h5, h6 {
-  margin: 0;
+  margin: 0 ;
 }
 
 iframe {
@@ -16,7 +16,7 @@ iframe {
 
 body {
   text-rendering: optimizeSpeed;
-  margin: 0;
+  margin: 0 ;
 }
 
 body,

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: -moz-fit-content;
+  width: fit-content ;
+  width: undefined ;
 }
 
 .fitContHeight {
-  height: fit-content;
-  height: -moz-fit-content;
+  height: fit-content ;
+  height: undefined ;
 }

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: 120px;
+  max-height: var(--zd_size120) ;
   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 34px 7px 0;
+  padding: 0 var(--zd_size34) var(--zd_size7) 0 ;
 }
 [dir=rtl] .container.medium {
-  padding: 0 0 7px 34px;
+  padding: 0 0 var(--zd_size7) var(--zd_size34) ;
 }
 .container.xmedium {
-  min-height: 30px;
+  min-height: var(--zd_size30) ;
 }
 [dir=ltr] .container.xmedium {
-  padding: 0 34px 1px 0;
+  padding: 0 var(--zd_size34) var(--zd_size1) 0 ;
 }
 [dir=rtl] .container.xmedium {
-  padding: 0 0 1px 34px;
+  padding: 0 0 var(--zd_size1) var(--zd_size34) ;
 }
 
 .delete {
   position: absolute;
-  bottom: 0;
+  bottom: 0 ;
   color: var(--zdt_advancedmultiselect_delete_text);
-  padding-bottom: 10px;
+  padding-bottom: var(--zd_size10) ;
   cursor: pointer;
   background-color: var(--zdt_advancedmultiselect_delete_bg);
   border: 0;
 }
 
 [dir=ltr] .delete {
-  right: 15px;
+  right: var(--zd_size15) ;
 }
 
 [dir=rtl] .delete {
-  left: 15px;
+  left: var(--zd_size15) ;
 }
 
 .delete:hover {
@@ -91,25 +91,25 @@
 }
 
 .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) ;
 }
 
 .dropContainer {
   display: inline-block;
-  max-width: 100%;
-  margin-bottom: 5px;
+  max-width: 100% ;
+  margin-bottom: var(--zd_size5) ;
 }
 
 .dropPopup {
-  font-size: 13px;
+  font-size: var(--zd_font_size13) ;
 }
 
 .dropPopup :global .toggleDropIcon {
@@ -117,11 +117,11 @@
 }
 
 .more {
-  font-size: 14px;
+  font-size: var(--zd_font_size14) ;
   color: var(--zdt_advancedmultiselect_more_text);
   font-family: inherit;
   cursor: pointer;
-  margin-top: 5px;
+  margin-top: var(--zd_size5) ;
   background-color: var(--zdt_advancedmultiselect_delete_bg);
   border: 0;
 }

package/es/semantic/Button/Button.js

@@ -44,6 +44,7 @@ export default class Button extends React.Component {
       disabled: disabled,
       ref: ref,
       "data-id": dataId,
+      "data-test-id": dataId,
       onClick: onClick,
       "data-title": title
     }, children ? children : text);

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/lib/Accordion/Accordion.js

@@ -115,6 +115,7 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
         "aria-expanded": ariaExpanded,
         "aria-haspopup": ariaHaspopup,
         "data-id": dataId,
+        "data-test-id": dataId,
         "data-selector-id": dataSelectorId
       }, children);
     }

package/lib/Accordion/AccordionItem.js

@@ -82,6 +82,7 @@ var AccordionItem = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: className ? className : '',
         "data-id": dataId,
+        "data-test-id": dataId,
         role: role,
         "data-selector-id": dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement("div", {

package/lib/AppContainer/AppContainer.js

@@ -133,7 +133,9 @@ var AppContainer = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      if (this.containerElement) {
+      var needTooltip = this.props.needTooltip;
+
+      if (this.containerElement && needTooltip) {
         this.containerElement.addEventListener('mouseover', this.handleOver, false);
         this.containerElement.addEventListener('mouseout', this.removeTimeout, false);
         this.tooltipRef.observeElement();
@@ -142,7 +144,9 @@ var AppContainer = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      if (this.containerElement) {
+      var needTooltip = this.props.needTooltip;
+
+      if (this.containerElement && needTooltip) {
         this.containerElement.removeEventListener('mouseover', this.handleOver, false);
         this.containerElement.addEventListener('mouseout', this.removeTimeout, false);
         this.tooltipRef.unObserveElement();
@@ -159,6 +163,7 @@ var AppContainer = /*#__PURE__*/function (_React$Component) {
           dataSelectorId = _this$props.dataSelectorId,
           tooltipClass = _this$props.tooltipClass,
           tooltipParentClass = _this$props.tooltipParentClass,
+          needTooltip = _this$props.needTooltip,
           customProps = _this$props.customProps;
       var _customProps$Containe = customProps.ContainerProps,
           ContainerProps = _customProps$Containe === void 0 ? {} : _customProps$Containe,
@@ -167,22 +172,22 @@ 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),
         dataId: dataId,
         dataSelectorId: dataSelectorId,
         tagName: tagName,
         eleRef: this.getContainerRef
       }, ContainerProps, ExtraProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
-      }, children)), /*#__PURE__*/_react["default"].createElement("div", _extends({}, ExtraProps, {
+      }, children)), needTooltip ? /*#__PURE__*/_react["default"].createElement("div", _extends({}, ExtraProps, {
         className: "".concat(_AppContainerModule["default"].container, " ").concat(_AppContainerModule["default"].tooltip, " ").concat(tooltipParentClass),
         "data-id": "".concat(dataId, "_tooltip"),
+        "data-test-id": "".concat(dataId, "_tooltip"),
         "data-selector-id": "".concat(dataSelectorId, "_tooltip")
       }), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], _extends({
         ref: this.setTooltipRef,
         customClass: tooltipClass
-      }, TooltipProps))));
+      }, TooltipProps))) : null);
     }
   }]);
 

package/lib/AppContainer/AppContainer.module.css

@@ -12,7 +12,7 @@
   font-family: var(--zd_regular);
 }
 .tooltip {
-  height: 0;
-  font-size: 0;
+  height: 0 ;
+  font-size: 0 ;
   /* contain:strict */
 }

package/lib/AppContainer/props/defaultProps.js

@@ -11,6 +11,7 @@ var defaultProps = {
   tooltipClass: '',
   tooltipParentClass: '',
   customProps: {},
-  dataSelectorId: 'appContainer'
+  dataSelectorId: 'appContainer',
+  needTooltip: true
 };
 exports.defaultProps = defaultProps;

package/lib/AppContainer/props/propTypes.js

@@ -16,6 +16,7 @@ var propTypes = {
   eleRef: _propTypes["default"].func,
   tagName: _propTypes["default"].string,
   className: _propTypes["default"].string,
+  needTooltip: _propTypes["default"].bool,
   tooltipClass: _propTypes["default"].string,
   tooltipParentClass: _propTypes["default"].string,
   customProps: _propTypes["default"].shape({

package/lib/Avatar/Avatar.js

@@ -213,15 +213,18 @@ var Avatar = /*#__PURE__*/function (_React$Component) {
         className: "".concat(_AvatarModule["default"].avatar, " ").concat(_AvatarModule["default"][size], " ").concat((0, _AvatarSize["default"])(size), " ").concat(_AvatarModule["default"][shapeStyle], " ").concat(_AvatarModule["default"][palette], " ").concat(textStyle, " ").concat(borderStyle, " ").concat(customClass ? customClass : ''),
         "data-title": needTitle ? title ? title : name : null,
         "data-id": dataId,
+        "data-test-id": dataId,
         onClick: onClick,
         "data-selector-id": dataSelectorId
       }, AvatarProps), showInitial && !showAlternateAvatar && /*#__PURE__*/_react["default"].createElement("span", {
         className: "".concat(_AvatarModule["default"].initial),
         "data-id": "".concat(dataId, "_AvatarInitial"),
+        "data-test-id": "".concat(dataId, "_AvatarInitial"),
         "data-selector-id": "".concat(dataSelectorId, "_AvatarInitial")
       }, initial), (showAvatar || showAlternateAvatar) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("img", {
         className: "".concat(_AvatarModule["default"].image, " ").concat(isAnimate ? _AvatarModule["default"].animate : '', " ").concat(needInnerBorder ? _AvatarModule["default"].innerBorder : ''),
         "data-id": "".concat(dataId, "_AvatarImg"),
+        "data-test-id": "".concat(dataId, "_AvatarImg"),
         "data-selector-id": "".concat(dataSelectorId, "_AvatarImg"),
         name: name,
         onError: this.putInvalidImageURLJSON,

package/lib/Avatar/Avatar.module.css

@@ -1,7 +1,7 @@
 .varClass {
   /* avatar default variables */
   --avatar_text_color: var(--zdt_avatar_default_text);
-  --avatar_font_size: 14px;
+  --avatar_font_size: var(--zd_font_size14);
   --avatar_bg_color: var(--zdt_avatar_default_bg);
   --avatar_border_radius: 50%;
   --avatar_border_width: 0;
@@ -37,19 +37,19 @@
 
 .shadow {
   position: absolute;
-  height: 100%;
-  width: 100%;
-  top: 0;
+  height: 100% ;
+  width: 100% ;
+  top: 0 ;
   pointer-events: none;
   border-radius: var(--avatar_border_radius);
 }
 
 [dir=ltr] .shadow {
-  left: 0;
+  left: 0 ;
 }
 
 [dir=rtl] .shadow {
-  right: 0;
+  right: 0 ;
 }
 
 .shadow.black {
@@ -69,20 +69,20 @@
 }
 
 .image {
-  width: 100%;
-  height: 100%;
+  width: 100% ;
+  height: 100% ;
   position: absolute;
-  top: 0;
+  top: 0 ;
   z-index: 0;
   border-radius: var(--avatar_border_radius);
 }
 
 [dir=ltr] .image {
-  left: 0;
+  left: 0 ;
 }
 
 [dir=rtl] .image {
-  right: 0;
+  right: 0 ;
 }
 
 .animate {
@@ -141,31 +141,31 @@
 }
 
 .xxsmall {
-  --avatar_font_size: 8px;
+  --avatar_font_size: var(--zd_font_size8);
 }
 
 .small {
-  --avatar_font_size: 9px;
+  --avatar_font_size: var(--zd_font_size9);
 }
 
 .xsmall {
-  --avatar_font_size: 12px;
+  --avatar_font_size: var(--zd_font_size12);
 }
 
 .medium {
-  --avatar_font_size: 14px;
+  --avatar_font_size: var(--zd_font_size14);
 }
 
 .xmedium {
-  --avatar_font_size: 14px;
+  --avatar_font_size: var(--zd_font_size14);
 }
 
 .large {
-  --avatar_font_size: 18px;
+  --avatar_font_size: var(--zd_font_size18);
 }
 
 .xlarge {
-  --avatar_font_size: 28px;
+  --avatar_font_size: var(--zd_font_size28);
 }
 
 .white {

package/lib/AvatarTeam/AvatarTeam.js

@@ -96,6 +96,7 @@ var AvatarTeam = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement("span", _extends({
         className: "".concat(_AvatarTeamModule["default"].container, " ").concat(borderOnActive ? _AvatarTeamModule["default"].borderOnActive : border ? _AvatarTeamModule["default"].borderOnHover : '', " "),
         "data-id": dataId,
+        "data-test-id": dataId,
         "data-selector-id": dataSelectorId
       }, AvatarTeamProps), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], _extends({
         name: name,