@zohodesk/dot 1.0.0-temp.999 → 1.0.0-test.239

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

@@ -0,0 +1,17 @@
+export const defaultProps = {
+  iconName: 'bell',
+  iconSize: '30',
+  submitType: 'primary',
+  isIconMid: false,
+  needClose: false,
+  type: 'primary',
+  isMore: false,
+  messageState: false,
+  isAnimate: true,
+  isClose: false,
+  autoClose: false,
+  hideTime: '3000',
+  dataId: 'toastMessage',
+  needAutoZindex: true,
+  a11y: {}
+};

package/es/ToastMessage/props/propTypes.js

@@ -0,0 +1,38 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  autoClose: PropTypes.bool,
+  cancelText: PropTypes.string,
+  dataId: PropTypes.string,
+  getBottomContainer: PropTypes.func,
+  getInnerBottomContainer: PropTypes.func,
+  getLeftContainer: PropTypes.func,
+  getSubmitContainer: PropTypes.func,
+  hidePopNotification: PropTypes.func,
+  hideTime: PropTypes.string,
+  iconName: PropTypes.string,
+  iconPalette: PropTypes.oneOf(['successFill', 'dangerFill', 'dangerShadow', 'successPlain', 'dangerPlain', 'primaryPlain']),
+  iconSize: PropTypes.string,
+  id: PropTypes.string,
+  info: PropTypes.string,
+  isAnimate: PropTypes.bool,
+  isClose: PropTypes.bool,
+  isIconMid: PropTypes.bool,
+  isMore: PropTypes.bool,
+  message: PropTypes.string,
+  messageState: PropTypes.bool,
+  needClose: PropTypes.bool,
+  onCancel: PropTypes.func,
+  onSubmit: PropTypes.func,
+  subject: PropTypes.string,
+  submitText: PropTypes.string,
+  submitType: PropTypes.oneOf(['primary', 'danger', 'success']),
+  type: PropTypes.oneOf(['primary', 'information', 'secondary', 'success', 'custom']),
+  needAutoZindex: PropTypes.bool,
+  a11y: PropTypes.shape({
+    role: PropTypes.string,
+    ariaLive: PropTypes.oneOf(['polite', 'assertive', 'off']),
+    ariaAtomic: PropTypes.bool,
+    ariaDescribedby: PropTypes.string,
+    ariaLabelledby: PropTypes.string
+  })
+};

package/es/Upload/Upload.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import Icon from '@zohodesk/icons/lib/Icon';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import Image from '../Image/Image';
@@ -61,30 +62,9 @@ export default class Upload extends React.Component {
       isBold: true
     })) : null);
   }
-
 }
-Upload.propTypes = {
-  dataId: PropTypes.string,
-  fileSize: PropTypes.string,
-  getRef: PropTypes.func,
-  iconName: PropTypes.string,
-  imgSrc: PropTypes.string,
-  isPreview: PropTypes.bool,
-  isPreviewType: PropTypes.bool,
-  onClick: PropTypes.func,
-  onRemove: PropTypes.func,
-  progressValue: PropTypes.string,
-  size: PropTypes.oneOf(['small', 'medium']),
-  tooltip: PropTypes.string,
-  palette: PropTypes.oneOf(['light', 'night'])
-};
-Upload.defaultProps = {
-  size: 'medium',
-  dataId: 'upload',
-  isPreview: false,
-  palette: 'light'
-};
-
+Upload.propTypes = propTypes;
+Upload.defaultProps = defaultProps;
 if (false) {
   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

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

package/es/Upload/props/propTypes.js

@@ -0,0 +1,16 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  dataId: PropTypes.string,
+  fileSize: PropTypes.string,
+  getRef: PropTypes.func,
+  iconName: PropTypes.string,
+  imgSrc: PropTypes.string,
+  isPreview: PropTypes.bool,
+  isPreviewType: PropTypes.bool,
+  onClick: PropTypes.func,
+  onRemove: PropTypes.func,
+  progressValue: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'medium']),
+  tooltip: PropTypes.string,
+  palette: PropTypes.oneOf(['light', 'night'])
+};

package/es/actions/AutoClose.js

@@ -1,11 +1,10 @@
 import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 function removeClose(e) {
   e && e.stopPropagation && e.stopPropagation();
   e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
 }
-
 export default function AutoClose(props) {
   let {
     Element,
@@ -15,22 +14,18 @@ export default function AutoClose(props) {
     hideTime
   } = props;
   let [isClose, setClose] = useState(givenClose);
-
   function onClose(e) {
     removeClose(e);
     onPortalClose && onPortalClose();
   }
-
   useEffect(() => {
     let id;
-
     if (autoClose) {
       id = setTimeout(() => {
         setClose(true);
         setTimeout(onClose, 300); // For animation
       }, hideTime);
     }
-
     return () => {
       if (autoClose) {
         clearTimeout(id);
@@ -43,12 +38,5 @@ export default function AutoClose(props) {
   });
   return /*#__PURE__*/React.createElement(Element, newProps);
 }
-AutoClose.propTypes = {
-  Element: PropTypes.element,
-  autoClose: PropTypes.bool,
-  hideTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  onPortalClose: PropTypes.func
-};
-AutoClose.defaultProps = {
-  hideTime: '3000'
-};
+AutoClose.propTypes = propTypes;
+AutoClose.defaultProps = defaultProps;

package/es/actions/index.js

@@ -3,7 +3,6 @@ export const popNotificationAction = (() => {
     resolve: () => {},
     reject: () => {}
   };
-
   function showNotification(data) {
     return dispatch => {
       dispatch(showPopNotification(data));
@@ -12,7 +11,6 @@ export const popNotificationAction = (() => {
           dispatch(hidePopNotification(notifiId));
           res();
         };
-
         ob.reject = notifiId => {
           dispatch(hidePopNotification(notifiId));
           rej();
@@ -20,7 +18,6 @@ export const popNotificationAction = (() => {
       });
     };
   }
-
   return {
     ob,
     showNotification

package/es/actions/props/defaultProps.js

@@ -0,0 +1,3 @@
+export const defaultProps = {
+  hideTime: '3000'
+};

package/es/actions/props/propTypes.js

@@ -0,0 +1,7 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  Element: PropTypes.element,
+  autoClose: PropTypes.bool,
+  hideTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  onPortalClose: PropTypes.func
+};

package/es/alert/AlertHeader/AlertHeader.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import Title from '../../lookup/header/Title/Title';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import Icon from '@zohodesk/icons/lib/Icon';
@@ -61,31 +62,9 @@ export default class AlertHeader extends Component {
       dataId: `${dataId}_close`
     })) : null);
   }
-
 }
-AlertHeader.propTypes = {
-  breakChildren: PropTypes.bool,
-  children: PropTypes.node,
-  closeTitle: PropTypes.string,
-  dataId: PropTypes.string,
-  iconClass: PropTypes.string,
-  iconName: PropTypes.string,
-  iconSize: PropTypes.sting,
-  iconType: PropTypes.oneOf(['delete', 'alert', 'remoteAssist', 'splitTicket', 'update']),
-  needIcon: PropTypes.bool,
-  onClose: PropTypes.func,
-  palette: PropTypes.oneOf(['default', 'primary', 'danger']),
-  title: PropTypes.string
-};
-AlertHeader.defaultProps = {
-  palette: 'danger',
-  needIcon: true,
-  iconType: 'alert',
-  breakChildren: false,
-  dataId: 'alertHeader',
-  iconClass: ''
-};
-
+AlertHeader.propTypes = propTypes;
+AlertHeader.defaultProps = defaultProps;
 if (false) {
   AlertHeader.docs = {
     componentGroup: 'AlertHeader',

package/es/alert/AlertHeader/AlertHeader.module.css

@@ -1,22 +1,40 @@
 .container {
   min-height: var(--zd_size54);
   position: relative;
+}[dir=ltr] .container {
   padding: var(--zd_size12) var(--zd_size45) var(--zd_size12) var(--zd_size26);
+}[dir=rtl] .container {
+  padding: var(--zd_size12) var(--zd_size26) var(--zd_size12) var(--zd_size45);
 }
 
-.extraSmall {
+[dir=ltr] .extraSmall {
   padding: var(--zd_size12) var(--zd_size45) var(--zd_size12) var(--zd_size16);
 }
 
-.iconContainer {
+[dir=rtl] .extraSmall {
+  padding: var(--zd_size12) var(--zd_size16) var(--zd_size12) var(--zd_size45);
+}
+
+[dir=ltr] .iconContainer {
   margin: 0 var(--zd_size10) 0 0;
 }
 
+[dir=rtl] .iconContainer {
+  margin: 0 0 0 var(--zd_size10);
+}
+
 .title {
-  margin: 0 var(--zd_size5) 0 0;
   font-size: 0;
 }
 
+[dir=ltr] .title {
+  margin: 0 var(--zd_size5) 0 0;
+}
+
+[dir=rtl] .title {
+  margin: 0 0 0 var(--zd_size5);
+}
+
 .iconStyle {
   display: block;
 }

package/es/alert/AlertHeader/props/defaultProps.js

@@ -0,0 +1,8 @@
+export const defaultProps = {
+  palette: 'danger',
+  needIcon: true,
+  iconType: 'alert',
+  breakChildren: false,
+  dataId: 'alertHeader',
+  iconClass: ''
+};

package/es/alert/AlertHeader/props/propTypes.js

@@ -0,0 +1,15 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  breakChildren: PropTypes.bool,
+  children: PropTypes.node,
+  closeTitle: PropTypes.string,
+  dataId: PropTypes.string,
+  iconClass: PropTypes.string,
+  iconName: PropTypes.string,
+  iconSize: PropTypes.sting,
+  iconType: PropTypes.oneOf(['delete', 'alert', 'remoteAssist', 'splitTicket', 'update']),
+  needIcon: PropTypes.bool,
+  onClose: PropTypes.func,
+  palette: PropTypes.oneOf(['default', 'primary', 'danger']),
+  title: PropTypes.string
+};