@zohodesk/components 1.0.0-temp-191 → 1.0.0-temp-193

package/es/common/common.module.css

@@ -51,12 +51,12 @@
 
 .cboth::after {
   content: '.';
-  clear: both;
   display: block;
-  font-size: 0;
-  height: 0;
+  font-size: 0 ;
+  height: 0 ;
   line-height: 0;
   visibility: hidden;
+  clear: both;
 }
 
 .blockEvent {
@@ -81,34 +81,47 @@
 .disabled::after,
 .readonly::after {
   position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
+  top: 0 ;
+  bottom: 0 ;
   z-index: 2;
   content: '';
   user-select: none;
 }
 
-.disabled,
-.readonly {
+[dir=ltr] .disable::after, [dir=ltr] .disabled::after, [dir=ltr] .readonly::after {
+  left: 0 ;
+  right: 0 ;
+}
+
+[dir=rtl] .disable::after, [dir=rtl] .disabled::after, [dir=rtl] .readonly::after {
+  right: 0 ;
+  left: 0 ;
+}
+
+.disabled, .readonly {
   cursor: not-allowed;
 }
 
-.disabled::after,
-.readonly::after {
+.disabled::after, .readonly::after {
   cursor: not-allowed;
 }
 
 /*  --Float Props-- */
-.fleft {
+[dir=ltr] .fleft {
   float: left;
 }
+[dir=rtl] .fleft {
+  float: right;
+}
 
-.fright {
+[dir=ltr] .fright {
   float: right;
 }
 
+[dir=rtl] .fright {
+  float: left;
+}
+
 .fnone {
   float: none;
 }
@@ -188,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 {
@@ -200,7 +213,7 @@
 }
 
 .flexbasis {
-  flex-basis: 0%;
+  flex-basis: 0% ;
   -webkit-flex-basis: 0%;
   -moz-flex-basis: 0%;
   -ms-flex-basis: 0%;
@@ -318,18 +331,18 @@
 
 /* --Width Props-- */
 .w100 {
-  width: 100%;
+  width: 100% ;
 }
 
 .h100 {
-  height: 100%;
+  height: 100% ;
 }
 
 .rounded {
-  border-radius: 50%;
   -moz-border-radius: 50%;
   -webkit-border-radius: 50%;
   -ms-border-radius: 50%;
+  border-radius: 50%;
 }
 
 .noradius {
@@ -340,14 +353,22 @@
   text-align: center;
 }
 
-.tleft {
+[dir=ltr] .tleft {
   text-align: left;
 }
 
-.tright {
+[dir=rtl] .tleft {
   text-align: right;
 }
 
+[dir=ltr] .tright {
+  text-align: right;
+}
+
+[dir=rtl] .tright {
+  text-align: left;
+}
+
 .textCap {
   text-transform: uppercase;
 }
@@ -357,31 +378,49 @@
 }
 
 .t50 {
-  top: 50%;
+  top: 50% ;
 }
 
-.l50 {
-  left: 50%;
+[dir=ltr] .l50 {
+  left: 50% ;
 }
 
-.middle {
+[dir=rtl] .l50 {
+  right: 50% ;
+}
+
+[dir=ltr] .middle {
   transform: translate(-50%, -50%) translateZ(0);
   -webkit-transform: translate(-50%, -50%) translateZ(0);
   -moz-transform: translate(-50%, -50%) translateZ(0);
   -ms-transform: translate(-50%, -50%) translateZ(0);
 }
 
+[dir=rtl] .middle {
+  transform: translate(50%, -50%) translateZ(0);
+  -webkit-transform: translate(50%, -50%) translateZ(0);
+  -moz-transform: translate(50%, -50%) translateZ(0);
+  -ms-transform: translate(50%, -50%) translateZ(0);
+}
+
 .middleBoth {
   composes: middle;
-  top: 50%;
-  left: 50%;
+  top: 50% ;
+}
+
+[dir=ltr] .middleBoth {
+  left: 50% ;
+}
+
+[dir=rtl] .middleBoth {
+  right: 50% ;
 }
 
 .middleY {
-  transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
 }
 
 .yMiddle {
@@ -389,23 +428,30 @@
   composes: t50;
 }
 
-.middleX {
+[dir=ltr] .middleX {
   transform: translateX(-50%);
   -webkit-transform: translateX(-50%);
   -moz-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
 }
 
+[dir=rtl] .middleX {
+  transform: translateX(50%);
+  -webkit-transform: translateX(50%);
+  -moz-transform: translateX(50%);
+  -ms-transform: translateX(50%);
+}
+
 .xMiddle {
   composes: middleX;
   composes: l50;
 }
 
 .transZ {
-  transform: translateZ(0);
   -moz-transform: translateZ(0);
   -webkit-transform: translateZ(0);
   -ms-transform: translateZ(0);
+  transform: translateZ(0);
 }
 
 .vishidden {
@@ -420,7 +466,7 @@
   content: '';
   vertical-align: middle;
   display: inline-block;
-  height: 100%;
+  height: 100% ;
 }
 
 .wbreak {
@@ -429,9 +475,9 @@
 
 .notrans {
   transition: none;
-  -webkit-transition: none;
   -moz-transition: none;
   -ms-transition: none;
+  -webkit-transition: none;
 }
 
 .dotted {
@@ -469,11 +515,11 @@
 }
 
 .fitContWidth {
-  width: fit-content;
-  width: -moz-fit-content;
+  width: fit-content ;
+  width: -moz-fit-content ;
 }
 
 .fitContHeight {
-  height: fit-content;
-  height: -moz-fit-content;
+  height: fit-content ;
+  height: -moz-fit-content ;
 }

package/es/common/customscroll.module.css

@@ -32,12 +32,18 @@
 .scroll::-webkit-scrollbar,
 .scroll ::-webkit-scrollbar {
   /* css:theme-validation:ignore */
+}
+
+.scroll::-webkit-scrollbar, .scroll ::-webkit-scrollbar {
   background: var(--zd-scroll-corner-bg);
 }
 
 .scroll::-webkit-scrollbar:hover,
 .scroll ::-webkit-scrollbar:hover {
   /* css:theme-validation:ignore */
+}
+
+.scroll::-webkit-scrollbar:hover, .scroll ::-webkit-scrollbar:hover {
   background: var(--zd-scroll-bg);
 }
 
@@ -54,24 +60,30 @@
 .scroll::-webkit-scrollbar-button,
 .scroll ::-webkit-scrollbar-button {
   display: none;
-  width: 0;
-  height: 0;
+  width: 0 ;
+  height: 0 ;
 }
 
-.scroll::-webkit-scrollbar-track:vertical,
-.scroll ::-webkit-scrollbar-track:vertical {
+[dir=ltr] .scroll::-webkit-scrollbar-track:vertical, [dir=ltr] .scroll ::-webkit-scrollbar-track:vertical {
   border-left: 1px solid transparent;
   border-right: 1px solid transparent;
 }
 
+[dir=rtl] .scroll::-webkit-scrollbar-track:vertical, [dir=rtl] .scroll ::-webkit-scrollbar-track:vertical {
+  border-right: 1px solid transparent;
+  border-left: 1px solid transparent;
+}
+
 .scroll::-webkit-scrollbar-track:vertical:hover,
 .scroll ::-webkit-scrollbar-track:vertical:hover {
   /* css:theme-validation:ignore */
+}
+
+.scroll::-webkit-scrollbar-track:vertical:hover, .scroll ::-webkit-scrollbar-track:vertical:hover {
   border-color: var(--zd-scroll-border);
 }
 
-.scroll::-webkit-scrollbar-track:horizontal,
-.scroll ::-webkit-scrollbar-track:horizontal {
+.scroll::-webkit-scrollbar-track:horizontal, .scroll ::-webkit-scrollbar-track:horizontal {
   border-top: 1px solid transparent;
   border-bottom: 1px solid transparent;
 }
@@ -79,27 +91,35 @@
 .scroll::-webkit-scrollbar-track:horizontal:hover,
 .scroll ::-webkit-scrollbar-track:horizontal:hover {
   /* css:theme-validation:ignore */
+}
+
+.scroll::-webkit-scrollbar-track:horizontal:hover, .scroll ::-webkit-scrollbar-track:horizontal:hover {
   border-color: var(--zd-scroll-border);
 }
 
-.scroll::-webkit-scrollbar-track-piece,
-.scroll ::-webkit-scrollbar-track-piece {
+.scroll::-webkit-scrollbar-track-piece, .scroll ::-webkit-scrollbar-track-piece {
   background: inherit;
 }
 
 .scroll::-webkit-scrollbar-thumb,
 .scroll ::-webkit-scrollbar-thumb {
-  border-radius: 10px;
   /* css:theme-validation:ignore */
+  /* display: none; */
+}
+
+.scroll::-webkit-scrollbar-thumb, .scroll ::-webkit-scrollbar-thumb {
+  border-radius: 10px;
   background: var(--zd-scroll-thump);
   background-clip: padding-box;
   border: 3px solid transparent;
-  /* display: none; */
 }
 
 .scroll::-webkit-scrollbar-thumb:hover,
 .scroll ::-webkit-scrollbar-thumb:hover {
   /* css:theme-validation:ignore */
+}
+
+.scroll::-webkit-scrollbar-thumb:hover, .scroll ::-webkit-scrollbar-thumb:hover {
   background: var(--zd-scroll-thump-hoverbg);
   background-clip: padding-box;
   border: 3px solid transparent;
@@ -112,10 +132,11 @@
 .scroll::-webkit-scrollbar-corner,
 .scroll ::-webkit-scrollbar-corner {
   /* css:theme-validation:ignore */
+}
+.scroll::-webkit-scrollbar-corner, .scroll ::-webkit-scrollbar-corner {
   background: var(--zd-scroll-corner-bg);
 }
 
-.scroll::-webkit-resizer,
-.scroll ::-webkit-resizer {
+.scroll::-webkit-resizer, .scroll ::-webkit-resizer {
   background: inherit;
 }

package/es/common/transition.module.css

@@ -1,6 +1,7 @@
 .zoomInEnter,
 .zoomInLeave.zoomInLeaveActive {
   opacity: 0;
+}.zoomInEnter, .zoomInLeave.zoomInLeaveActive {
   transform: perspective(1px) scale(1.5) translateZ(0);
   transition-duration: var(--zd_transition3);
   transition-property: all;
@@ -8,6 +9,8 @@
 .zoomInEnter.zoomInEnterActive,
 .zoomInLeave {
   opacity: 1;
+}
+.zoomInEnter.zoomInEnterActive, .zoomInLeave {
   transform: perspective(1px) scale(1) translateZ(0);
   transition-duration: var(--zd_transition3);
   transition-property: all;
@@ -15,15 +18,20 @@
 
 .scaleInEnter,
 .scaleInLeave.scaleInLeaveActive {
-  transform: scale(0);
   opacity: 0;
+}
+
+.scaleInEnter, .scaleInLeave.scaleInLeaveActive {
+  transform: scale(0);
   transition-duration: var(--zd_transition3);
   transition-property: all;
 }
 .scaleInEnter.scaleInEnterActive,
 .scaleInLeave {
-  transform: scale(1);
   opacity: 1;
+}
+.scaleInEnter.scaleInEnterActive, .scaleInLeave {
+  transform: scale(1);
   transition-duration: var(--zd_transition3);
   transition-property: all;
 }
@@ -31,6 +39,9 @@
 .fadeInEnter,
 .fadeInLeave.fadeInLeaveActive {
   opacity: 0;
+}
+
+.fadeInEnter, .fadeInLeave.fadeInLeaveActive {
   transition-duration: var(--zd_transition3);
   transition-property: all;
 }
@@ -38,6 +49,9 @@
 .fadeInEnter.fadeInEnterActive,
 .fadeInLeave {
   opacity: 1;
+}
+
+.fadeInEnter.fadeInEnterActive, .fadeInLeave {
   transition-duration: var(--zd_transition3);
   transition-property: all;
 }
@@ -45,14 +59,27 @@
 .slideLeftEnter,
 .slideLeftLeave.slideLeftLeaveActive {
   opacity: 0;
-  transform: translateX(110%);
+}
+
+.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;
@@ -61,6 +88,9 @@
 .slideDownEnter,
 .slideDownLeave.slideDownLeaveActive {
   opacity: 0;
+}
+
+.slideDownEnter, .slideDownLeave.slideDownLeaveActive {
   transform: translateY(-100%);
   transition-duration: var(--zd_transition3);
   transition-property: all;
@@ -69,6 +99,9 @@
 .slideDownEnter.slideDownEnterActive,
 .slideDownLeave {
   opacity: 1;
+}
+
+.slideDownEnter.slideDownEnterActive, .slideDownLeave {
   transform: translateY(0%);
   transition-duration: var(--zd_transition3);
   transition-property: all;
@@ -77,14 +110,27 @@
 .skewInEnter,
 .skewInLeave.skewInLeaveActive {
   opacity: 0;
-  transform: translate(100%, 100%) skew(72deg) scale(0) perspective(221px);
+}
+
+.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;
@@ -98,9 +144,3 @@
 .defaultLeave {
   display: block;
 }
-
-.noneEnter,
-.noneEnter.noneEnterActive,
-.noneLeave,
-.noneLeave.noneLeaveActive {
-}

package/es/deprecated/PortalLayer/PortalLayer.js

@@ -11,14 +11,12 @@ let RefElement = /*#__PURE__*/React.forwardRef((props, ref) => {
     isChildrenRestrictionNeeded = true,
     isActive
   } = props;
-  return isChildrenRestrictionNeeded ? isActive ? renderChildren ? renderChildren(ref) : /*#__PURE__*/React.createElement(Element, { ...Object.assign({}, elementProps, {
-      forwardRef: ref
-    })
-  }) : null : renderChildren ? renderChildren(ref, isActive) : /*#__PURE__*/React.createElement(Element, { ...Object.assign({}, elementProps, {
-      isActive,
-      forwardRef: ref
-    })
-  });
+  return isChildrenRestrictionNeeded ? isActive ? renderChildren ? renderChildren(ref) : /*#__PURE__*/React.createElement(Element, Object.assign({}, elementProps, {
+    forwardRef: ref
+  })) : null : renderChildren ? renderChildren(ref, isActive) : /*#__PURE__*/React.createElement(Element, Object.assign({}, elementProps, {
+    isActive,
+    forwardRef: ref
+  }));
 });
 RefElement.propTypes = RefElement_propTypes;
 export { RefElement };

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

@@ -1,9 +1,9 @@
 .buttonReset {
-  border: inherit;
   outline: 0;
-  background-color: inherit;
   font: inherit;
-  padding: 0;
   color: inherit;
+  border: inherit;
+  background-color: inherit;
+  padding: 0 ;
   text-align: inherit;
 }

package/es/v1/AppContainer/AppContainer.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React, { useEffect, useRef, useLayoutEffect } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -91,26 +93,23 @@ export default function AppContainer(props) {
       }
     };
   }, []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, _extends({
     className: `${style.container} ${className}`,
     dataId: dataId,
     dataSelectorId: dataSelectorId,
     tagName: tagName,
-    eleRef: getContainerRef,
-    ...ContainerProps,
-    ...ExtraProps
-  }, /*#__PURE__*/React.createElement(Box, {
+    eleRef: getContainerRef
+  }, ContainerProps, ExtraProps), /*#__PURE__*/React.createElement(Box, {
     flexible: true
-  }, children)), needTooltip ? /*#__PURE__*/React.createElement("div", { ...ExtraProps,
+  }, children)), needTooltip ? /*#__PURE__*/React.createElement("div", _extends({}, ExtraProps, {
     className: `${style.container} ${style.tooltip} ${tooltipParentClass}`,
     "data-id": `${dataId}_tooltip`,
     "data-test-id": `${dataId}_tooltip`,
     "data-selector-id": `${dataSelectorId}_tooltip`
-  }, /*#__PURE__*/React.createElement(Tooltip, {
+  }), /*#__PURE__*/React.createElement(Tooltip, _extends({
     ref: setTooltipRef,
-    customClass: tooltipClass,
-    ...TooltipProps
-  })) : null);
+    customClass: tooltipClass
+  }, TooltipProps))) : null);
 }
 AppContainer.propTypes = propTypes;
 AppContainer.defaultProps = defaultProps; // if (__DOCS__) {

package/es/v1/Avatar/Avatar.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React, { useState } from 'react';
 import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
 import { defaultProps } from './props/defaultProps';
@@ -103,16 +105,15 @@ function Avatar(props) {
   let showDefaultBorder = src && !isInvalidImageList && needDefaultBorder;
   let borderStyle = (showDefaultBorder || !src || !showAvatar || showInitial) && needBorder ? `${style.border} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} ` : '';
   borderStyle = showAlternateAvatar ? '' : borderStyle;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", _extends({
     className: `${style.avatar} ${style[size]} ${AvatarSize(size)} ${style[shapeStyle]} ${style[palette]} ${textStyle} ${borderStyle} ${customClass ? customClass : ''}`,
     "data-title": needTitle ? title ? title : name : null,
     "data-id": dataId,
     "data-test-id": dataId,
     onClick: onClick,
     "data-selector-id": dataSelectorId,
-    tabIndex: onClick ? 0 : null,
-    ...AvatarProps
-  }, showInitial && !showAlternateAvatar && /*#__PURE__*/React.createElement("span", {
+    tabIndex: onClick ? 0 : null
+  }, AvatarProps), showInitial && !showAlternateAvatar && /*#__PURE__*/React.createElement("span", {
     className: `${style.initial}`,
     "data-id": `${dataId}_AvatarInitial`,
     "data-test-id": `${dataId}_AvatarInitial`,

package/es/v1/AvatarTeam/AvatarTeam.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -39,13 +41,12 @@ export default function AvatarTeam(props) {
     customAvatarTeam = ''
   } = customClass;
   const border = borderOnHover || onClick;
-  return /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/React.createElement("span", _extends({
     className: `${style.container} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} `,
     "data-id": dataId,
     "data-test-id": dataId,
-    "data-selector-id": dataSelectorId,
-    ...AvatarTeamProps
-  }, /*#__PURE__*/React.createElement(Avatar, {
+    "data-selector-id": dataSelectorId
+  }, AvatarTeamProps), /*#__PURE__*/React.createElement(Avatar, _extends({
     name: name,
     onClick: onClick,
     palette: palette,
@@ -59,9 +60,8 @@ export default function AvatarTeam(props) {
     borderOnHover: border,
     needInnerBorder: needInnerBorder,
     needBorder: needBorder,
-    needDefaultBorder: needDefaultBorder,
-    ...AvatarProps
-  }), /*#__PURE__*/React.createElement("span", {
+    needDefaultBorder: needDefaultBorder
+  }, AvatarProps)), /*#__PURE__*/React.createElement("span", {
     className: `${style.team} ${isFilled ? `${style[`${palette}Filled`]}` : style.nofill}
           ${style[`${size}team`]} ${customAvatarTeam}`
   }));

package/es/v1/Button/Button.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -37,7 +39,7 @@ export default function Button(props) {
     style: finalStyle
   });
   let statusLower = status.toLowerCase();
-  return /*#__PURE__*/React.createElement("button", {
+  return /*#__PURE__*/React.createElement("button", _extends({
     className: buttonClass,
     "data-id": disabled ? `${dataId}_disabled` : dataId,
     "data-test-id": disabled ? `${dataId}_disabled` : dataId,
@@ -46,11 +48,10 @@ export default function Button(props) {
     "data-title": title,
     type: "button",
     ref: getRef,
-    "data-selector-id": dataSelectorId,
-    ...customProps,
-    ...a11y,
+    "data-selector-id": dataSelectorId
+  }, customProps, a11y, {
     id: id
-  }, children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/React.createElement("div", {
+  }), children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/React.createElement("div", {
     className: finalStyle.overlay
   }, /*#__PURE__*/React.createElement("div", {
     className: loaderParentClass