@zohodesk/dot 1.0.0-beta.235 → 1.0.0-beta.238

package/es/list/SentimentStatus/SentimentStatus.js

@@ -6,7 +6,6 @@ export default class SentimentStatus extends React.Component {
   constructor(props) {
     super(props);
   }
-
   render() {
     let {
       type,
@@ -25,10 +24,8 @@ export default class SentimentStatus extends React.Component {
       iconClass: style.sentimentIcon
     }));
   }
-
 }
 SentimentStatus.propTypes = propTypes;
-
 if (false) {
   SentimentStatus.docs = {
     componentGroup: ''

package/es/list/SentimentStatus/SentimentStatus.module.css

@@ -1,7 +1,10 @@
 .container {
-  margin: 0 0 0 var(--zd_size5);
   vertical-align: middle;
   font-size: var(--zd_font_size10);
+}[dir=ltr] .container {
+  margin: 0 0 0 var(--zd_size5);
+}[dir=rtl] .container {
+  margin: 0 var(--zd_size5) 0 0;
 }
 
 .sentimentIcon {

package/es/list/SentimentStatus/docs/SentimentStatus__default.docs.js

@@ -5,13 +5,10 @@ export default class SentimentStatus__default extends React.Component {
   constructor(props) {
     super(props);
   }
-
   render() {
     return /*#__PURE__*/React.createElement(SentimentStatus, null);
   }
-
 }
-
 if (false) {
   SentimentStatus__default.docs = {
     componentGroup: ''

package/es/list/Subject/Subject.js

@@ -1,5 +1,4 @@
-function _extends() { _extends = Object.assign || 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); }
-
+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, { Component } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -9,7 +8,6 @@ export default class Subject extends Component {
   constructor(props) {
     super(props);
   }
-
   render() {
     let {
       text,
@@ -45,11 +43,9 @@ export default class Subject extends Component {
       "data-id": dataId
     }, TextProps), text));
   }
-
 }
 Subject.propTypes = propTypes;
 Subject.defaultProps = defaultProps;
-
 if (false) {
   Subject.docs = {
     folderName: 'List',

package/es/list/Subject/docs/Subject__default.docs.js

@@ -5,7 +5,6 @@ export default class Subject__default extends Component {
   constructor(props) {
     super(props);
   }
-
   render() {
     return /*#__PURE__*/React.createElement("div", {
       style: {
@@ -33,9 +32,7 @@ export default class Subject__default extends Component {
       fontWeight: "bold"
     })));
   }
-
 }
-
 if (false) {
   Subject__default.docs = {
     folderName: 'List',

package/es/list/TagNew/TagNew.js

@@ -6,7 +6,6 @@ export default class TagNew extends Component {
   constructor(props) {
     super(props);
   }
-
   render() {
     let {
       className,
@@ -21,11 +20,9 @@ export default class TagNew extends Component {
       "data-id": dataId
     }, text);
   }
-
 }
 TagNew.propTypes = propTypes;
 TagNew.defaultProps = defaultProps;
-
 if (false) {
   TagNew.docs = {
     folderName: 'List',

package/es/list/TagNew/TagNew.module.css

@@ -1,26 +1,33 @@
 .tagStyle {
-  border-radius: var(--zd_size14);
-  background-color: var(--zdt_tagnew_default_bg);
-  box-shadow: 0 8px 30px 0 var(--zdt_tagnew_default_box_shadow);
   min-width: var(--zd_size70);
   height: var(--zd_size28);
   font-size: var(--zd_font_size13);
   color: var(--zdt_tagnew_default_text);
-  padding: 0 var(--zd_size15);
   composes: inlineFlex from '../listCommon.module.css';
   composes: alignHorizontal from '~@zohodesk/components/lib/common/common.module.css';
-  transform: scale(0);
   transition: all var(--zd_transition2) ease 0s;
   opacity: 0;
   visibility: hidden;
+  border-radius: var(--zd_size14);
+  background-color: var(--zdt_tagnew_default_bg);
+  box-shadow: 0 8px 30px 0 var(--zdt_tagnew_default_box_shadow);
+  padding: 0 var(--zd_size15);
+  transform: scale(0);
   cursor: pointer;
 }
 
 .bounceIn {
-  transform: scale(1);
-  animation: bounceIn 700ms;
   visibility: visible;
   opacity: 1;
+  transform: scale(1);
+}
+
+[dir=ltr] .bounceIn {
+  animation: bounceIn 700ms;
+}
+
+[dir=rtl] .bounceIn {
+  animation: bounceIn 700ms;
 }
 
 @keyframes bounceIn {

package/es/list/TagNew/docs/TagNew__default.docs.js

@@ -5,16 +5,13 @@ export default class TagNew__default extends Component {
   constructor(props) {
     super(props);
   }
-
   render() {
     return /*#__PURE__*/React.createElement(TagNew, {
       text: "3 New",
       animate: true
     });
   }
-
 }
-
 if (false) {
   TagNew__default.docs = {
     folderName: 'List',

package/es/list/Thread/Thread.js

@@ -8,7 +8,6 @@ export default class Thread extends Component {
   constructor(props) {
     super(props);
   }
-
   render() {
     let {
       count: threadCount,
@@ -29,11 +28,9 @@ export default class Thread extends Component {
       className: style.count
     }, count));
   }
-
 }
 Thread.propTypes = propTypes;
 Thread.defaultProps = defaultProps;
-
 if (false) {
   Thread.docs = {
     folderName: 'List',

package/es/list/Thread/Thread.module.css

@@ -16,9 +16,15 @@
 .align_left .count {
   position: absolute;
   line-height: normal;
+  top: var(--zd_size3);
+}
+[dir=ltr] .align_left .count {
   text-align: left;
   left: var(--zd_size8);
-  top: var(--zd_size3);
+}
+[dir=rtl] .align_left .count {
+  text-align: right;
+  right: var(--zd_size8);
 }
 .align_right {
   composes: dInflex alignFend from '~@zohodesk/components/lib/common/common.module.css';
@@ -26,6 +32,12 @@
 .align_right .count {
   position: relative;
   bottom: var(--zd_size2);
+}
+[dir=ltr] .align_right .count {
   right: var(--zd_size5);
   float: right;
+}
+[dir=rtl] .align_right .count {
+  left: var(--zd_size5);
+  float: left;
 }

package/es/list/Thread/docs/Thread__default.docs.js

@@ -5,15 +5,12 @@ export default class Thread__default extends Component {
   constructor(props) {
     super(props);
   }
-
   render() {
     return /*#__PURE__*/React.createElement(Thread, {
       count: "1"
     });
   }
-
 }
-
 if (false) {
   Thread__default.docs = {
     folderName: 'List',

package/es/list/UserTime/UserTime.js

@@ -9,7 +9,6 @@ export default class UserTime extends Component {
   constructor(props) {
     super(props);
   }
-
   render() {
     let {
       type,
@@ -69,11 +68,9 @@ export default class UserTime extends Component {
       isOverdue: isOverdue
     })));
   }
-
 }
 UserTime.propTypes = propTypes;
 UserTime.defaultProps = defaultProps;
-
 if (false) {
   UserTime.docs = {
     folderName: 'List',

package/es/list/UserTime/UserTime.module.css

@@ -31,9 +31,15 @@
 }
 .iconStyle {
   display: block;
+}
+[dir=ltr] .iconStyle {
   margin-right: var(--zd_size3);
   margin-left: var(--zd_size1);
 }
+[dir=rtl] .iconStyle {
+  margin-left: var(--zd_size3);
+  margin-right: var(--zd_size1);
+}
 /* colors */
 .iconColor {
   color: var(--icon_color)

package/es/list/UserTime/docs/UserTime__default.docs.js

@@ -4,7 +4,6 @@ export default class UserTime__default extends Component {
   constructor(props) {
     super(props);
   }
-
   render() {
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
       style: {
@@ -20,7 +19,6 @@ export default class UserTime__default extends Component {
           months,
           hours
         } = _ref;
-
         if (years == 0 && days == 0 && months == 0) {
           return 'hh:mm A';
         } else if (years == 0 && days < 7 && months == 0) {
@@ -28,7 +26,6 @@ export default class UserTime__default extends Component {
         } else if (years == 0 && months > 1) {
           return 'DD MMM';
         }
-
         return 'DD MMM YYYY';
       },
       ago: "ago",
@@ -48,7 +45,6 @@ export default class UserTime__default extends Component {
           months,
           hours
         } = _ref2;
-
         if (years == 0 && days == 0 && months == 0) {
           return 'hh:mm A';
         } else if (years == 0 && days < 7 && months == 0) {
@@ -56,7 +52,6 @@ export default class UserTime__default extends Component {
         } else if (years == 0 && months > 1) {
           return 'DD MMM';
         }
-
         return 'DD MMM YYYY';
       },
       ago: "ago",
@@ -76,7 +71,6 @@ export default class UserTime__default extends Component {
           months,
           hours
         } = _ref3;
-
         if (years == 0 && days == 0 && months == 0) {
           return 'hh:mm A';
         } else if (years == 0 && days < 7 && months == 0) {
@@ -84,7 +78,6 @@ export default class UserTime__default extends Component {
         } else if (years == 0 && months > 1) {
           return 'DD MMM';
         }
-
         return 'DD MMM YYYY';
       },
       ago: "ago",
@@ -103,7 +96,6 @@ export default class UserTime__default extends Component {
           months,
           hours
         } = _ref4;
-
         if (years == 0 && days == 0 && months == 0) {
           return 'hh:mm A';
         } else if (years == 0 && days < 7 && months == 0) {
@@ -111,7 +103,6 @@ export default class UserTime__default extends Component {
         } else if (years == 0 && months > 1) {
           return 'DD MMM';
         }
-
         return 'DD MMM YYYY';
       },
       ago: "ago",
@@ -131,7 +122,6 @@ export default class UserTime__default extends Component {
           months,
           hours
         } = _ref5;
-
         if (years == 0 && days == 0 && months == 0) {
           return 'hh:mm A';
         } else if (years == 0 && days < 7 && months == 0) {
@@ -139,16 +129,13 @@ export default class UserTime__default extends Component {
         } else if (years == 0 && months > 1) {
           return 'DD MMM';
         }
-
         return 'DD MMM YYYY';
       },
       ago: "ago",
       later: "late"
     })));
   }
-
 }
-
 if (false) {
   UserTime__default.docs = {
     folderName: 'List',

package/es/list/listCommon.module.css

@@ -5,9 +5,12 @@
 .inlineFlex {
   composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
 }
-.avatarMargin {
+[dir=ltr] .avatarMargin {
   margin-right: var(--zd_size25);
 }
+[dir=rtl] .avatarMargin {
+  margin-left: var(--zd_size25);
+}
 .subject {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
   font-size: var(--zd_font_size16);
@@ -18,8 +21,13 @@
 }
 .statusColumn {
   composes: inlineBlockMiddle;
+}
+[dir=ltr] .statusColumn {
   text-align: right;
 }
+[dir=rtl] .statusColumn {
+  text-align: left;
+}
 .classic .floatingIconContainer {
   display: none;
 }

package/es/list/status/StatusDropdown/StatusDropdown.js

@@ -41,25 +41,20 @@ export class StatusDropdown extends React.Component {
     this.emptySearchSVG = this.emptySearchSVG.bind(this);
     this.getAriaId = getUniqueId(this);
   }
-
   emptySearchSVG() {
     return /*#__PURE__*/React.createElement(EmptySearch, {
       size: "small"
     });
   }
-
   inputRef(el) {
     this.hiddenInput = el;
   }
-
   itemRef(ele, index, id) {
     this[`suggestion_${id}`] = ele;
   }
-
   searchInputRef(el) {
     this.searchInput = el;
   }
-
   handleTogglePopup(e) {
     let {
       togglePopup,
@@ -72,17 +67,14 @@ export class StatusDropdown extends React.Component {
     onTogglePopup && onTogglePopup(isPopupOpen);
     togglePopup(e, boxPosition);
   }
-
   scrollContentRef(el) {
     let {
       isPopupOpen
     } = this.props;
-
     if (isPopupOpen) {
       this.optionsContainer = el;
     }
   }
-
   componentWillReceiveProps(nextProps) {
     if (nextProps.options.length != this.props.options.length) {
       this.setState({
@@ -90,7 +82,6 @@ export class StatusDropdown extends React.Component {
       });
     }
   }
-
   onSelect(element, e) {
     let {
       onClick,
@@ -102,7 +93,6 @@ export class StatusDropdown extends React.Component {
     onTogglePopup && onTogglePopup(isPopupOpen);
     togglePopup(e);
   }
-
   componentDidUpdate(prevProps) {
     let {
       isPopupOpen,
@@ -113,27 +103,22 @@ export class StatusDropdown extends React.Component {
       selectedIndex,
       options
     } = this.state;
-
     if (prevProps.isPopupOpen != isPopupOpen) {
       setTimeout(() => {
         isPopupOpen && isSearch ? this.searchInput && this.searchInput.focus() : this.hiddenInput && this.hiddenInput.focus();
       }, 10);
     }
-
     let mergeOptions = options;
     let option = mergeOptions[selectedIndex];
     let id = option && option[idName] || {};
     let selSuggestion = this[`suggestion_${id}`];
-
     if (isPopupOpen) {
       this.optionsContainer && scrollTo(this.optionsContainer, selSuggestion);
     }
-
     if (!prevProps.isPopupOpen && this.props.isPopupOpen) {
       this.onSearchClear();
     }
   }
-
   handleKeyDown(e) {
     let {
       keyCode
@@ -153,7 +138,6 @@ export class StatusDropdown extends React.Component {
       onTogglePopup,
       isPopupOpen
     } = this.props;
-
     if (isPopupReady && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
       e.preventDefault(); //prevent body scroll
     }
@@ -169,14 +153,11 @@ export class StatusDropdown extends React.Component {
             if (selectedIndex === totalIndex - 3) {
               isNextOptions && getNextOptions && getNextOptions();
             }
-
             this.setState({
               selectedIndex: selectedIndex + 1
             });
           }
-
           break;
-
         case 38:
           if (selectedIndex === 0) {
             this.setState({
@@ -187,15 +168,12 @@ export class StatusDropdown extends React.Component {
               selectedIndex: selectedIndex - 1
             });
           }
-
           break;
-
         case 13:
           onClick && onClick(options[selectedIndex].name, e);
           onTogglePopup && onTogglePopup(isPopupOpen);
           togglePopup(e, boxPosition);
           break;
-
         default:
           break;
       }
@@ -205,7 +183,6 @@ export class StatusDropdown extends React.Component {
       }
     }
   }
-
   searchList(value) {
     let {
       options,
@@ -214,7 +191,6 @@ export class StatusDropdown extends React.Component {
     let foptions = options.filter(dept => dept[keyName].toLowerCase().indexOf(value.toLowerCase()) != -1);
     return foptions;
   }
-
   handleChange(value, e) {
     let foptions = this.searchList(value);
     this.setState({
@@ -223,7 +199,6 @@ export class StatusDropdown extends React.Component {
       options: foptions
     });
   }
-
   onSearchClear() {
     let foptions = this.searchList('');
     this.setState({
@@ -231,24 +206,20 @@ export class StatusDropdown extends React.Component {
       options: foptions
     });
   }
-
   handleMouseEnter(id, value, index, e) {
     this.setState({
       selectedIndex: index
     });
   }
-
   handleScroll(e) {
     const {
       isNextOptions,
       getNextOptions
     } = this.props;
-
     if (e.target.scrollTop + e.target.offsetHeight > e.target.scrollHeight - 1) {
       isNextOptions && getNextOptions && getNextOptions(e);
     }
   }
-
   responsiveFunc(_ref) {
     let {
       mediaQueryOR
@@ -259,7 +230,6 @@ export class StatusDropdown extends React.Component {
       }])
     };
   }
-
   render() {
     let {
       options,
@@ -441,15 +411,12 @@ export class StatusDropdown extends React.Component {
       }, /*#__PURE__*/React.createElement(Loader, null)))));
     }) : null);
   }
-
 }
-
 if (false) {
   StatusDropdown.docs = {
     componentGroup: 'Molecule'
   };
 }
-
 StatusDropdown.defaultProps = defaultProps;
 StatusDropdown.propTypes = propTypes;
 export default Popup(StatusDropdown);

package/es/list/status/StatusDropdown/StatusDropdown.module.css

@@ -14,16 +14,23 @@
 .title {
   padding-top: var(--zd_size6);
 }
-.default_arrow,
-.overlay_arrow {
+[dir=ltr] .default_arrow, [dir=ltr] .overlay_arrow {
   padding: 0 0 0 var(--zd_size5);
 }
+[dir=rtl] .default_arrow, [dir=rtl] .overlay_arrow {
+  padding: 0 var(--zd_size5) 0 0;
+}
 .overlay_arrow {
   position: absolute;
-  left: 100%;
   top: 50%;
   transform: translateY(-50%) perspective(1px);
 }
+[dir=ltr] .overlay_arrow {
+  left: 100%;
+}
+[dir=rtl] .overlay_arrow {
+  right: 100%;
+}
 .hoverIcon .arrow {
   opacity: 0;
   visibility: hidden;
@@ -50,12 +57,18 @@
 .cursor {
   cursor: pointer;
 }
-.dropBoxContainer {
+[dir=ltr] .dropBoxContainer {
   text-align: left;
 }
-.iconBox {
+[dir=rtl] .dropBoxContainer {
+  text-align: right;
+}
+[dir=ltr] .iconBox {
   margin-right: var(--zd_size4);
 }
+[dir=rtl] .iconBox {
+  margin-left: var(--zd_size4);
+}
 .iconBox > i {
   display: block;
 }
@@ -64,8 +77,8 @@
   margin: 0 auto;
 }
 .seperatedLine {
-  border-bottom: 1px solid var(--zdt_statusdropdown_line_border);
   height: var(--zd_size1);
+  border-bottom: 1px solid var(--zdt_statusdropdown_line_border);
   margin: var(--zd_size9) 0 var(--zd_size10);
 }
 .hiddenInput {

package/es/list/status/StatusDropdown/docs/StatusDropdown__default.docs.js

@@ -46,13 +46,11 @@ export default class StatusDropdown__default extends React.Component {
     this.onSelect = this.onSelect.bind(this);
     this.getNextOptions = this.getNextOptions.bind(this);
   }
-
   onSelect(element, e) {
     this.setState({
       value: element
     });
   }
-
   getNextOptions() {
     this.setState({
       options: [{
@@ -93,7 +91,6 @@ export default class StatusDropdown__default extends React.Component {
       }]
     });
   }
-
   render() {
     let {
       options
@@ -122,7 +119,6 @@ export default class StatusDropdown__default extends React.Component {
       text: this.state.value
     })));
   }
-
 }
 StatusDropdown__default.docs = {
   componentGroup: 'Molecule'