@zohodesk/dot 1.0.0-beta.245 → 1.0.0-beta.247

package/es/NewStar/NewStar.module.css

@@ -4,30 +4,61 @@
   width: var(--zd_size21);
 }
 .topLeft {
+  top: 0;
+}
+[dir=ltr] .topLeft {
   transform: translate(-45%, -45%);
   left: 0;
-  top: 0;
 }
-.topRight {
+[dir=rtl] .topLeft {
   transform: translate(45%, -45%);
   right: 0;
+}
+.topRight {
   top: 0;
 }
+[dir=ltr] .topRight {
+  transform: translate(45%, -45%);
+  right: 0;
+}
+[dir=rtl] .topRight {
+  transform: translate(-45%, -45%);
+  left: 0;
+}
 .bottomLeft {
+  bottom: 0;
+}
+[dir=ltr] .bottomLeft {
   transform: translate(-45%, 45%);
   left: 0;
-  bottom: 0;
 }
-.bottomRight {
+[dir=rtl] .bottomLeft {
   transform: translate(45%, 45%);
   right: 0;
+}
+.bottomRight {
   bottom: 0;
 }
+[dir=ltr] .bottomRight {
+  transform: translate(45%, 45%);
+  right: 0;
+}
+[dir=rtl] .bottomRight {
+  transform: translate(-45%, 45%);
+  left: 0;
+}
 
 .stars {
-  animation: twinkle var(--zd_transition4) infinite, star-scale var(--zd_transition10) infinite;
   position: absolute;
 }
+
+[dir=ltr] .stars {
+  animation: twinkle var(--zd_transition4) infinite, star-scale var(--zd_transition10) infinite;
+}
+
+[dir=rtl] .stars {
+  animation: twinkle var(--zd_transition4) infinite, star-scale var(--zd_transition10) infinite;
+}
 .green::before {
   color: var(--zdt_newstar_green_text);
 }
@@ -42,28 +73,82 @@
 }
 .starTwo {
   composes: stars;
+}
+[dir=ltr] .starTwo {
+  animation-delay: 0.5s;
+}
+[dir=rtl] .starTwo {
   animation-delay: 0.5s;
 }
 .starThree {
   composes: stars;
+}
+[dir=ltr] .starThree {
+  animation-delay: 1s;
+}
+[dir=rtl] .starThree {
   animation-delay: 1s;
 }
 
-.topLeft .starOne{top:0;left:0}
-.topLeft .starTwo{top:0;left:10px}
-.topLeft .starThree{top:10px;left:0}
+.topLeft .starOne{top:0}
+
+[dir=ltr] .topLeft .starOne{
+  left:0}
+
+[dir=rtl] .topLeft .starOne{right:0}
+.topLeft .starTwo{top:0}
+[dir=ltr] .topLeft .starTwo{
+  left:10px}
+[dir=rtl] .topLeft .starTwo{right:10px}
+.topLeft .starThree{top:10px}
+[dir=ltr] .topLeft .starThree{
+  left:0}
+[dir=rtl] .topLeft .starThree{right:0}
+
+.topRight .starOne{top:0}
+
+[dir=ltr] .topRight .starOne{
+  right:0}
+
+[dir=rtl] .topRight .starOne{left:0}
+.topRight .starTwo{top:0}
+[dir=ltr] .topRight .starTwo{
+  right:10px}
+[dir=rtl] .topRight .starTwo{left:10px}
+.topRight .starThree{top:10px}
+[dir=ltr] .topRight .starThree{
+  right:0}
+[dir=rtl] .topRight .starThree{left:0}
+
+.bottomLeft .starOne{bottom:0}
+
+[dir=ltr] .bottomLeft .starOne{
+  left:0}
+
+[dir=rtl] .bottomLeft .starOne{right:0}
+.bottomLeft .starTwo{bottom:0}
+[dir=ltr] .bottomLeft .starTwo{
+  left:10px}
+[dir=rtl] .bottomLeft .starTwo{right:10px}
+.bottomLeft .starThree{bottom:10px}
+[dir=ltr] .bottomLeft .starThree{
+  left:0}
+[dir=rtl] .bottomLeft .starThree{right:0}
 
-.topRight .starOne{top:0;right:0}
-.topRight .starTwo{top:0;right:10px}
-.topRight .starThree{top:10px;right:0}
+.bottomRight .starOne{bottom:0}
 
-.bottomLeft .starOne{bottom:0;left:0}
-.bottomLeft .starTwo{bottom:0;left:10px}
-.bottomLeft .starThree{bottom:10px;left:0}
+[dir=ltr] .bottomRight .starOne{
+  right:0}
 
-.bottomRight .starOne{bottom:0;right:0}
-.bottomRight .starTwo{bottom:0;right:10px}
-.bottomRight .starThree{bottom:10px;right:0}
+[dir=rtl] .bottomRight .starOne{left:0}
+.bottomRight .starTwo{bottom:0}
+[dir=ltr] .bottomRight .starTwo{
+  right:10px}
+[dir=rtl] .bottomRight .starTwo{left:10px}
+.bottomRight .starThree{bottom:10px}
+[dir=ltr] .bottomRight .starThree{
+  right:0}
+[dir=rtl] .bottomRight .starThree{left:0}
 
 @keyframes twinkle {
   0% {

package/es/PlusIcon/PlusIcon.js

@@ -34,9 +34,10 @@ export default class PlusIcon extends React.Component {
 }
 PlusIcon.defaultProps = defaultProps;
 PlusIcon.propTypes = propTypes;
-if (false) {
-  PlusIcon.docs = {
-    componentGroup: 'Common',
-    folderName: 'Ticket DetailView'
-  };
-}
+
+// if (__DOCS__) {
+//   PlusIcon.docs = {
+//     componentGroup: 'Common',
+//     folderName: 'Ticket DetailView'
+//   };
+// }

package/es/Separator/Separator.module.css

@@ -2,8 +2,8 @@
   --separator_fontSize: var(--zd_font_size15);
 }
 .separator {
-  margin: 0 var(--zd_size5);
   font-size: var(--separator_fontSize);
+  margin: 0 var(--zd_size5);
 }
 .dot {
   --separator_fontSize: var(--zd_font_size8);

package/es/ToastMessage/ToastMessage.js

@@ -39,6 +39,7 @@ function ToastMessageUI(props) {
     onSubmit,
     onCancel,
     dataId,
+    dataSelectorId,
     isClose,
     onClose,
     needAutoZindex,
@@ -86,7 +87,8 @@ function ToastMessageUI(props) {
     "aria-live": ariaLive,
     "aria-atomic": ariaAtomic,
     "aria-describedby": ariaDescribedby,
-    "aria-labelledby": ariaLabelledby
+    "aria-labelledby": ariaLabelledby,
+    dataSelectorId: dataSelectorId
   }, type !== 'custom' ? /*#__PURE__*/React.createElement(Box, {
     className: style.alertifychild,
     flexible: true
@@ -190,8 +192,9 @@ export default function ToastMessage(props) {
 }
 ToastMessage.propTypes = propTypes;
 ToastMessage.defaultProps = defaultProps;
-if (false) {
-  ToastMessage.docs = {
-    componentGroup: 'Atom'
-  };
-}
+
+// if (__DOCS__) {
+//   ToastMessage.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/ToastMessage/ToastMessage.module.css

@@ -1,22 +1,33 @@
 .container {
+  transition: all var(--zd_transition4);
+  position: relative;
+  max-height: 100%;
   border-radius: 5px;
   box-shadow: 0 5px 40px 7px var(--zdt_toastmessage_default_box_shadow);
   background-color: var(--zdt_toastmessage_default_bg);
-  transition: all var(--zd_transition4);
   margin-bottom: var(--zd_size7);
-  position: relative;
+}[dir=ltr] .container {
   transform-origin: right center;
-  max-height: 100%;
+}[dir=rtl] .container {
+  transform-origin: left center;
 }
 
 .closeAnimation {
   max-height: 0;
-  margin-bottom: 0;
   transition: all var(--zd_transition3) 0.4s;
+  margin-bottom: 0;
 }
 
 .animation {
   composes: modeForward from '~@zohodesk/components/lib/common/animation.module.css';
+}
+
+[dir=ltr] .animation {
+  animation-duration: var(--zd_transition4);
+  -webkit-animation-duration: var(--zd_transition4);
+}
+
+[dir=rtl] .animation {
   animation-duration: var(--zd_transition4);
   -webkit-animation-duration: var(--zd_transition4);
 }
@@ -27,8 +38,8 @@
 }
 
 .leftnoanimate {
-  transform: translateX(0) scale(1);
   opacity: 1;
+  transform: translateX(0) scale(1);
 }
 
 .rightanimate {
@@ -43,14 +54,28 @@
 
 .alertifybanner {
   overflow: hidden;
+}
+
+[dir=ltr] .alertifybanner {
   border-radius: 5px 0 0 5px;
 }
 
+[dir=rtl] .alertifybanner {
+  border-radius: 0 5px 5px 0;
+}
+
 .alertright {
-  border-left: 1px solid var(--zdt_toastmessage_alert_border);
   width: var(--zd_size105);
 }
 
+[dir=ltr] .alertright {
+  border-left: 1px solid var(--zdt_toastmessage_alert_border);
+}
+
+[dir=rtl] .alertright {
+  border-right: 1px solid var(--zdt_toastmessage_alert_border);
+}
+
 .popbutton {
   font-size: var(--zd_font_size10);
   color: var(--zdt_toastmessage_popbutton_text);
@@ -96,22 +121,31 @@
 
 .primary:hover,
 .alerttab:hover .coverfill.primary {
-  background-color: var(--zdt_toastmessage_primary_hover_bg);
   color: var(--zdt_toastmessage_primary_hover_text);
 }
 
+.primary:hover, .alerttab:hover .coverfill.primary {
+  background-color: var(--zdt_toastmessage_primary_hover_bg);
+}
+
 .danger:hover,
 .alerttab:hover .coverfill.danger {
-  background-color: var(--zdt_toastmessage_danger_hover_bg);
   color: var(--zdt_toastmessage_primary_hover_text);
 }
 
+.danger:hover, .alerttab:hover .coverfill.danger {
+  background-color: var(--zdt_toastmessage_danger_hover_bg);
+}
+
 .success:hover,
 .alerttab:hover .coverfill.success {
-  background-color: var(--zdt_toastmessage_success_hover_bg);
   color: var(--zdt_toastmessage_primary_hover_text);
 }
 
+.success:hover, .alerttab:hover .coverfill.success {
+  background-color: var(--zdt_toastmessage_success_hover_bg);
+}
+
 .alertleft {
   padding: var(--zd_size15) var(--zd_size25);
 }
@@ -131,22 +165,26 @@
   color: var(--zdt_toastmessage_alerttitle_text);
 }
 
-.alertTitleLeft {
+[dir=ltr] .alertTitleLeft {
   margin-right: var(--zd_size10);
 }
 
+[dir=rtl] .alertTitleLeft {
+  margin-left: var(--zd_size10);
+}
+
 .alertMessage {
   font-size: var(--zd_font_size12);
   composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
-  margin-top: var(--zd_size5);
   line-height: var(--zd_size16);
   color: var(--zdt_toastmessage_alert_text);
+  margin-top: var(--zd_size5);
 }
 
 .buttonText {
   font-size: inherit;
-  text-align: center;
   line-height: var(--zd_size14);
+  text-align: center;
   padding: 0 var(--zd_size7);
   cursor: pointer;
 }
@@ -154,13 +192,24 @@
 .closeIcon,
 .closeIconPrimary {
   position: absolute;
-  right: 0;
   top: 0;
   z-index: 1;
+  color: var(--zdt_toastmessage_closeicon);
+}
+
+.closeIcon, .closeIconPrimary {
   padding: var(--zd_size2);
-  border-bottom-left-radius: 3px;
   cursor: pointer;
-  color: var(--zdt_toastmessage_closeicon);
+}
+
+[dir=ltr] .closeIcon, [dir=ltr] .closeIconPrimary {
+  right: 0;
+  border-bottom-left-radius: 3px;
+}
+
+[dir=rtl] .closeIcon, [dir=rtl] .closeIconPrimary {
+  left: 0;
+  border-bottom-right-radius: 3px;
 }
 
 .closeIcon:hover {
@@ -177,41 +226,63 @@
 
 .dropdown {
   width: var(--zd_size23);
-  background: var(--zdt_toastmessage_dropdown_bg);
   position: relative;
   height: 100%;
   color: var(--zdt_toastmessage_dropdown_text);
+  background: var(--zdt_toastmessage_dropdown_bg);
 }
 
 .dropdown > i {
   position: absolute;
   top: 50%;
+}
+
+[dir=ltr] .dropdown > i {
   left: 50%;
   transform: translate(-50%, -50%);
 }
 
+[dir=rtl] .dropdown > i {
+  right: 50%;
+  transform: translate(50%, -50%);
+}
+
 .dropdown:hover i {
   color: var(--zdt_toastmessage_cancel_hover_text);
 }
 
 .message {
-  padding: var(--zd_size10) var(--zd_size20) var(--zd_size10) var(--zd_size76);
-  border-top: 1px solid var(--zdt_toastmessage_message_border);
-  cursor: pointer;
   position: relative;
   color: var(--zdt_toastmessage_popbutton_text);
   font-size: var(--zd_font_size11);
   composes: dotted textCap from '~@zohodesk/components/lib/common/common.module.css';
   height: var(--zd_size33);
   transition: padding var(--zd_transition3), height var(--zd_transition3);
+  border-top: 1px solid var(--zdt_toastmessage_message_border);
+  cursor: pointer;
   margin:0;
 }
 
+[dir=ltr] .message {
+  padding: var(--zd_size10) var(--zd_size20) var(--zd_size10) var(--zd_size76);
+}
+
+[dir=rtl] .message {
+  padding: var(--zd_size10) var(--zd_size76) var(--zd_size10) var(--zd_size20);
+}
+
 .messageOff {
-  border-width: 0;
-  padding: 0 var(--zd_size20) 0 var(--zd_size76);
   height: 0;
   font-size: 0;
+  border-width: 0;
+}
+
+[dir=ltr] .messageOff {
+  padding: 0 var(--zd_size20) 0 var(--zd_size76);
+}
+
+[dir=rtl] .messageOff {
+  padding: 0 var(--zd_size76) 0 var(--zd_size20);
 }
 
 .message:hover {
@@ -222,26 +293,26 @@
   width: var(--zd_size29);
   height: var(--zd_size29);
   line-height: var(--zd_size29);
-  text-align: center;
   composes: rounded from '~@zohodesk/components/lib/common/common.module.css';
+  text-align: center;
 }
 
 .successFill {
   composes: fill;
-  background: var(--zdt_toastmessage_successfill_bg);
   color: var(--zdt_toastmessage_primary_hover_text);
+  background: var(--zdt_toastmessage_successfill_bg);
 }
 
 .dangerFill {
   composes: fill;
-  background: var(--zdt_toastmessage_danger_hover_bg);
   color: var(--zdt_toastmessage_primary_hover_text);
+  background: var(--zdt_toastmessage_danger_hover_bg);
 }
 
 .dangerShadow {
+  color: var(--zdt_toastmessage_danger_text);
   text-shadow: 0 4px 22px var(--zdt_toastmessage_danger_text_shadow);
   margin-top: var(--zd_size5);
-  color: var(--zdt_toastmessage_danger_text);
 }
 
 .successPlain {

package/es/ToastMessage/props/defaultProps.js

@@ -13,5 +13,6 @@ export const defaultProps = {
   hideTime: '3000',
   dataId: 'toastMessage',
   needAutoZindex: true,
-  a11y: {}
+  a11y: {},
+  dataSelectorId: 'toastMessage'
 };

package/es/ToastMessage/props/propTypes.js

@@ -3,6 +3,7 @@ export const propTypes = {
   autoClose: PropTypes.bool,
   cancelText: PropTypes.string,
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   getBottomContainer: PropTypes.func,
   getInnerBottomContainer: PropTypes.func,
   getLeftContainer: PropTypes.func,

package/es/Upload/Upload.js

@@ -11,6 +11,7 @@ export default class Upload extends React.Component {
       isPreview,
       tooltip,
       dataId,
+      dataSelectorId,
       progressValue,
       onClick,
       iconName,
@@ -29,7 +30,8 @@ export default class Upload extends React.Component {
       dataId: dataId,
       "data-title": tooltip,
       isCover: false,
-      eleRef: getRef
+      eleRef: getRef,
+      dataSelectorId: dataSelectorId
     }, /*#__PURE__*/React.createElement(React.Fragment, null, isPreview ? /*#__PURE__*/React.createElement("div", {
       "data-id": `${dataId}_attachLoading`,
       className: style.loader,
@@ -65,8 +67,9 @@ export default class Upload extends React.Component {
 }
 Upload.propTypes = propTypes;
 Upload.defaultProps = defaultProps;
-if (false) {
-  Upload.docs = {
-    componentGroup: 'Upload'
-  };
-}
+
+// if (__DOCS__) {
+//   Upload.docs = {
+//     componentGroup: 'Upload'
+//   };
+// }

package/es/Upload/Upload.module.css

@@ -1,8 +1,8 @@
 .container {
   position: relative;
-  cursor: pointer;
   transition: all var(--zd_transition3);
   vertical-align: middle;
+  cursor: pointer;
   padding: var(--zd_size5);
   border-radius: var(--zd_size2);
 }
@@ -16,9 +16,15 @@
   position: absolute;
   top: 0;
   bottom: 0;
+  background-color: var(--zdt_upload_overlay_bg);
+}
+[dir=ltr] .overlay {
   left: 0;
   right: 0;
-  background-color: var(--zdt_upload_overlay_bg);
+}
+[dir=rtl] .overlay {
+  right: 0;
+  left: 0;
 }
 .small {
   width: var(--zd_size50);
@@ -38,8 +44,13 @@
   height: var(--zd_size2);
   width: 0%;
   transition: width var(--zd_transition6) ease;
+}
+[dir=ltr] .loader {
   left: 0;
 }
+[dir=rtl] .loader {
+  right: 0;
+}
 .light .loader {
   background: var(--zdt_upload_loader_default_bg);
 }
@@ -50,18 +61,21 @@
   width: 100%;
   height: 100%;
 }
-.attachInfo {
+[dir=ltr] .attachInfo {
   padding: var(--zd_size4) 0 0 var(--zd_size8);
 }
+[dir=rtl] .attachInfo {
+  padding: var(--zd_size4) var(--zd_size8) 0 0;
+}
 .fileIcon {
   font-size: var(--zd_font_size14);
 }
 .attachsize {
   font-size: var(--zd_font_size10);
-  padding: var(--zd_size4) 0 var(--zd_size2);
   letter-spacing: 1px;
   composes: dotted from "~@zohodesk/components/lib/common/common.module.css";
   text-transform: uppercase;
+  padding: var(--zd_size4) 0 var(--zd_size2);
 }
 .light .attachsize {
   color: var(--zdt_upload_attachsize_default_text);
@@ -73,22 +87,27 @@
   height: var(--zd_size12);
   width: var(--zd_size12);
   top: 0;
-  right: 0;
   position: absolute;
-  text-align: center;
   line-height: var(--zd_size10);
   font-size: var(--zd_font_size12);
+  text-align: center;
+}
+[dir=ltr] .uploadclose {
+  right: 0;
+}
+[dir=rtl] .uploadclose {
+  left: 0;
 }
 .light .uploadclose {
-  background-color: var(--zdt_upload_uploadclose_default_bg);
   color: var(--zdt_upload_uploadclose_default_text);
+  background-color: var(--zdt_upload_uploadclose_default_bg);
 }
 .light .uploadclose:hover {
   background-color: var(--zdt_upload_uploadclose_default_hover_text);
 }
 .night .uploadclose {
-  background-color: var(--zdt_upload_uploadclose_night_bg);
   color: var(--zdt_upload_uploadclose_night_text);
+  background-color: var(--zdt_upload_uploadclose_night_bg);
 }
 .night .uploadclose:hover {
   background-color: var(--zdt_upload_uploadclose_night_hover_text);

package/es/Upload/props/defaultProps.js

@@ -2,5 +2,6 @@ export const defaultProps = {
   size: 'medium',
   dataId: 'upload',
   isPreview: false,
-  palette: 'light'
+  palette: 'light',
+  dataSelectorId: 'upload'
 };

package/es/Upload/props/propTypes.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 export const propTypes = {
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   fileSize: PropTypes.string,
   getRef: PropTypes.func,
   iconName: PropTypes.string,

package/es/alert/AlertHeader/AlertHeader.js

@@ -65,9 +65,10 @@ export default class AlertHeader extends Component {
 }
 AlertHeader.propTypes = propTypes;
 AlertHeader.defaultProps = defaultProps;
-if (false) {
-  AlertHeader.docs = {
-    componentGroup: 'AlertHeader',
-    folderName: 'Alert'
-  };
-}
+
+// if (__DOCS__) {
+//   AlertHeader.docs = {
+//     componentGroup: 'AlertHeader',
+//     folderName: 'Alert'
+//   };
+// }