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

package/README.md

@@ -2,6 +2,10 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.0.0-beta.246
+
+- **AvatarWithTeam** - css variable changed due to the duplicate override issue
+
 # 1.0.0-beta.245
 
 - **Separator** - New component added.

package/assets/Appearance/dark/mode/dotDarkMode.module.css

@@ -93,7 +93,7 @@
 	--zdt_avataruser_delete_text: var(--dot_ebonyclay);
 	
 	/* avatar with team */
-	--zdt_avatarteam_default_bg: var(--dot_ebonyclay);
+	--zdt_avatarwithteam_default_bg: var(--dot_ebonyclay);
 	
 	/* channel icon */
 	--zdt_channelIcon_icon: var(--dot_platinum);

package/assets/Appearance/default/mode/dotDefaultMode.module.css

@@ -93,7 +93,7 @@
 	--zdt_avataruser_delete_text: var(--dot_white);
 	
 	/* avatar with team */
-	--zdt_avatarteam_default_bg: var(--dot_white);
+	--zdt_avatarwithteam_default_bg: var(--dot_white);
 	
 	/* channel icon */
 	--zdt_channelIcon_icon: var(--dot_black);

package/assets/Appearance/pureDark/mode/dotPureDarkMode.module.css

@@ -93,7 +93,7 @@
 	--zdt_avataruser_delete_text: #212121;
 	
 	/* avatar with team */
-	--zdt_avatarteam_default_bg: #212121;
+	--zdt_avatarwithteam_default_bg: #212121;
 	
 	/* channel icon */
 	--zdt_channelIcon_icon: var(--dot_platinum);

package/es/ActionButton/ActionButton.module.css

@@ -21,20 +21,28 @@
 .primaryBtn, .primaryArw {
   border: 1px solid var(--buttonBorder);
 }
-.primaryBtn {
+[dir=ltr] .primaryBtn {
   border-right: none;
 }
+[dir=rtl] .primaryBtn {
+  border-left: none;
+}
 .contentBox,
 .arrowWrapper {
-  margin: 0;
   transition: width var(--zd_transition3), padding var(--zd_transition3), background-color var(--zd_transition2), border-color var(--zd_transition2);
 }
+.contentBox, .arrowWrapper {
+  margin: 0;
+}
 .clickable {
   cursor: pointer;
 }
-.contentBoxBdr {
+[dir=ltr] .contentBoxBdr {
   border-radius: var(--zd_size4) 0 0 var(--zd_size4);
 }
+[dir=rtl] .contentBoxBdr {
+  border-radius: 0 var(--zd_size4) var(--zd_size4) 0;
+}
 .contentBoxBdrRds {
   border-radius: var(--zd_size4);
 }
@@ -54,8 +62,7 @@
 .small_btnBox {
   padding: 0 var(--zd_size8);
 }
-.medium_btnBox,
-.large_btnBox {
+.medium_btnBox, .large_btnBox {
   padding: 0 var(--zd_size10);
 }
 .txt {
@@ -78,12 +85,20 @@
 }
 .arrowWrapper {
   position: relative;
-  border-radius: 0 var(--zd_size4) var(--zd_size4) 0;
-  cursor: pointer;
   composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
+  cursor: pointer;
+}
+[dir=ltr] .arrowWrapper {
+  border-radius: 0 var(--zd_size4) var(--zd_size4) 0;
 }
-.primaryFilledArw {
-    border-left: 1px solid var(--buttonSeparatorBorder);
+[dir=rtl] .arrowWrapper {
+  border-radius: var(--zd_size4) 0 0 var(--zd_size4);
+}
+[dir=ltr] .primaryFilledArw {
+  border-left: 1px solid var(--buttonSeparatorBorder);
+}
+[dir=rtl] .primaryFilledArw {
+    border-right: 1px solid var(--buttonSeparatorBorder);
 }
 .small_arrowBox {
   width: var(--zd_size20);
@@ -116,6 +131,9 @@
 .iconClr {
   color: var(--buttonText);
 }
-.iconMrgn {
+[dir=ltr] .iconMrgn {
   margin-right: var(--zd_size6);
 }
+[dir=rtl] .iconMrgn {
+  margin-left: var(--zd_size6);
+}

package/es/AlphabeticList/AlphabeticList.module.css

@@ -7,16 +7,19 @@
   composes: varClass;
   composes: h100 from '~@zohodesk/components/lib/common/common.module.css';
   list-style: none;
+  pointer-events: initial;
   margin: 0;
   padding: 0;
-  pointer-events: initial;
 }
 .column .title {
   margin-bottom: var(--zd_size3);
 }
-.row .title {
+[dir=ltr] .row .title {
   margin-right: var(--zd_size3);
 }
+[dir=rtl] .row .title {
+  margin-left: var(--zd_size3);
+}
 .row  .letter {
   padding: 0 var(--zd_size3);
 }
@@ -29,10 +32,10 @@
 }
 .list {
   font-size: var(--zd_font_size11);
-  text-align: center;
   flex-basis: var(--zd_size12);
-  cursor: pointer;
   color: var(--textColor);
+  text-align: center;
+  cursor: pointer;
 }
 .title {
   flex-basis: var(--zd_size15);

package/es/Attachment/Attachment.js

@@ -78,8 +78,9 @@ export default class Attachment extends React.Component {
 }
 Attachment.propTypes = propTypes;
 Attachment.defaultProps = defaultProps;
-if (false) {
-  Attachment.docs = {
-    componentGroup: 'Attachment'
-  };
-}
+
+// if (__DOCS__) {
+//   Attachment.docs = {
+//     componentGroup: 'Attachment'
+//   };
+// }

package/es/Attachment/Attachment.module.css

@@ -1,9 +1,9 @@
 .attachment {
-  border: 1px solid var(--zdt_attachment_default_border);
-  border-radius: 2px;
   position: relative;
   overflow: hidden;
   color: var(--zdt_attachment_default_text);
+  border: 1px solid var(--zdt_attachment_default_border);
+  border-radius: 2px;
 }
 
 .attachmentHover {
@@ -18,8 +18,7 @@
   background-color: var(--zdt_attachment_transparent_bg);
 }
 
-.attachmentHover:hover,
-.attachmentHover:hover .attachleft {
+.attachmentHover:hover, .attachmentHover:hover .attachleft {
   border-color: var(--zdt_attachment_default_hover_border);
 }
 
@@ -45,10 +44,14 @@
   height: var(--zd_size40);
 }
 
-.attachleft {
+[dir=ltr] .attachleft {
   border-right: 1px solid var(--zdt_attachment_default_border);
 }
 
+[dir=rtl] .attachleft {
+  border-left: 1px solid var(--zdt_attachment_default_border);
+}
+
 .medium .attachleft {
   width: var(--zd_size50);
 }
@@ -57,10 +60,14 @@
   width: var(--zd_size40);
 }
 
-.medium .attachright {
+[dir=ltr] .medium .attachright {
   padding: var(--zd_size5) var(--zd_size25) var(--zd_size5) var(--zd_size10);
 }
 
+[dir=rtl] .medium .attachright {
+  padding: var(--zd_size5) var(--zd_size10) var(--zd_size5) var(--zd_size25);
+}
+
 .small .attachright {
   padding: 0 var(--zd_size10) 0 var(--zd_size10);
 }
@@ -100,10 +107,17 @@
 .attachDownload {
   position: absolute;
   top: calc(var(--zd_size1) * -1);
-  right: calc(var(--zd_size1) * -1);
+  display: none;
   background-color: var(--zdt_attachment_download_bg);
   text-align: center;
-  display: none;
+}
+
+[dir=ltr] .attachDownload {
+  right: calc(var(--zd_size1) * -1);
+}
+
+[dir=rtl] .attachDownload {
+  left: calc(var(--zd_size1) * -1);
 }
 
 .medium .attachDownload {
@@ -136,9 +150,9 @@
 }
 
 .dot {
-  background-color: var(--zdt_dot_text);
   height: 2px;
   width: 2px;
+  background-color: var(--zdt_dot_text);
   border-radius: 50%;
   margin: 0 var(--zd_size6);
 }

package/es/AttachmentViewer/AttachmentViewer.js

@@ -1,18 +1,18 @@
-import React, { Component } from "react";
+import React, { Component } from 'react';
 import { AttachmentViewer_defaultProps } from './props/defaultProps';
 import { AttachmentViewer_propTypes } from './props/propTypes';
-import { Container, Box } from "@zohodesk/components/lib/Layout";
-import Icon from "@zohodesk/icons/lib/Icon";
-import Avatar from "@zohodesk/components/lib/Avatar/Avatar";
-import { ResponsiveReceiver } from "@zohodesk/components/lib/Responsive/CustomResponsive";
-import { getUniqueId } from "@zohodesk/components/lib/Provider/IdProvider";
-import AttachmentImage from "./AttachmentImage";
-import Link from "../Link/Link";
-import IconButton from "../IconButton/IconButton";
-import FreezeLayer from "../FreezeLayer/FreezeLayer";
-import { isAudioFile, getExtensionFromFileName } from "./Attachment";
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import Icon from '@zohodesk/icons/lib/Icon';
+import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
+import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
+import AttachmentImage from './AttachmentImage';
+import Link from '../Link/Link';
+import IconButton from '../IconButton/IconButton';
+import FreezeLayer from '../FreezeLayer/FreezeLayer';
+import { isAudioFile, getExtensionFromFileName } from './Attachment';
 import { shallowDiff } from '../utils/General';
-import style from "./AttachmentViewer.module.css";
+import style from './AttachmentViewer.module.css';
 export default class AttachmentViewer extends Component {
   constructor(props) {
     super(props);
@@ -204,19 +204,19 @@ export default class AttachmentViewer extends Component {
         position = (i - selectedIndex) * 100;
         return {
           transform: `translateX(${parseInt(position)}%)`,
-          opacity: "0"
+          opacity: '0'
         };
       }
       if (i === selectedIndex) {
         return {
-          transform: "translateX(0%)",
-          opacity: "1"
+          transform: 'translateX(0%)',
+          opacity: '1'
         };
       }
       position = (selectedIndex - i) * 100 * -1;
       return {
         transform: `translateX(${parseInt(position)}%)`,
-        opacity: "0"
+        opacity: '0'
       };
     };
     return dataList.length && dataList.map(function () {
@@ -241,7 +241,7 @@ export default class AttachmentViewer extends Component {
         src: data.viewUrl,
         type: `audio/${getExtensionFromFileName(data.name)}`
       })) : null : /*#__PURE__*/React.createElement(AttachmentImage, {
-        className: `${style.img} ${selectedIndex == i && maintainZoom ? isZoomed ? style.zoomedImg : style.normalImg : ""}`,
+        className: `${style.img} ${selectedIndex == i && maintainZoom ? isZoomed ? style.zoomedImg : style.normalImg : ''}`,
         src: selectedImgUrl,
         onClick: isZoomed ? _this.zoomOut.bind(_this, i) : e => {
           _this.zoomIn(e, i, true);
@@ -314,8 +314,8 @@ export default class AttachmentViewer extends Component {
         className: uptoTablet ? style.mbleMenuBar : style.menuBar
       }, /*#__PURE__*/React.createElement(Container, {
         isInline: true,
-        alignBox: uptoTablet ? "column-reverse" : "row",
-        align: uptoTablet ? "bottom" : "center",
+        alignBox: uptoTablet ? 'column-reverse' : 'row',
+        align: uptoTablet ? 'bottom' : 'center',
         wrap: "wrap",
         isCover: false
       }, isZoomed ? /*#__PURE__*/React.createElement("div", {
@@ -398,7 +398,7 @@ export default class AttachmentViewer extends Component {
       }, /*#__PURE__*/React.createElement(Container, {
         alignBox: "row"
       }, /*#__PURE__*/React.createElement(Box, {
-        className: `${style.arrowBox}  ${uptoTablet ? style.mbleArrowBox : style.nrmlArrowBox} ${selectedIndex === 0 ? style.hidden : ""}`,
+        className: `${style.arrowBox}  ${uptoTablet ? style.mbleArrowBox : style.nrmlArrowBox} ${selectedIndex === 0 ? style.hidden : ''}`,
         onClick: this.changeSelectedIndex.bind(this, selectedIndex - 1),
         "data-title": i18nKeys.previousText,
         "data-title-position": "left"
@@ -420,7 +420,7 @@ export default class AttachmentViewer extends Component {
         scroll: "both",
         flexible: true
       }, this.imgPreviewView()), /*#__PURE__*/React.createElement(Box, {
-        className: `${style.arrowBox}  ${uptoTablet ? style.mbleArrowBox : style.nrmlArrowBox} ${totalLen === selectedIndex + 1 ? style.hidden : ""}`,
+        className: `${style.arrowBox}  ${uptoTablet ? style.mbleArrowBox : style.nrmlArrowBox} ${totalLen === selectedIndex + 1 ? style.hidden : ''}`,
         onClick: this.changeSelectedIndex.bind(this, selectedIndex + 1),
         "data-title": i18nKeys.nextText,
         "data-title-position": "right"
@@ -467,7 +467,7 @@ export default class AttachmentViewer extends Component {
         } = item;
         const isAudio = isAudioFile(name);
         return /*#__PURE__*/React.createElement(Box, {
-          className: `${style.imgItem} ${index === selectedIndex ? style.selected : ""}  ${isAudio ? style.isAudio : ""}`,
+          className: `${style.imgItem} ${index === selectedIndex ? style.selected : ''}  ${isAudio ? style.isAudio : ''}`,
           key: index,
           onClick: this.changeSelectedIndex.bind(this, index),
           eleRef: el => this[`img_${index}`] = el,
@@ -487,7 +487,7 @@ export default class AttachmentViewer extends Component {
         iconName: "ZD-GN-hideTab",
         iconSize: "14",
         hoverType: "border",
-        iconClass: `${style.thumpIcon} ${isPViewListOpen ? style.thumpIconActive : ""}`,
+        iconClass: `${style.thumpIcon} ${isPViewListOpen ? style.thumpIconActive : ''}`,
         className: style.button,
         a11y: {
           ariaLabel: i18nKeys.hideText
@@ -499,8 +499,9 @@ export default class AttachmentViewer extends Component {
 }
 AttachmentViewer.propTypes = AttachmentViewer_propTypes;
 AttachmentViewer.defaultProps = AttachmentViewer_defaultProps;
-if (false) {
-  AttachmentViewer.docs = {
-    componentGroup: "Molecule"
-  };
-}
+
+// if (__DOCS__) {
+//   AttachmentViewer.docs = {
+//     componentGroup: "Molecule"
+//   };
+// }

package/es/AttachmentViewer/AttachmentViewer.module.css

@@ -1,23 +1,30 @@
 .header {
-    background-color: var(--zdt_attachmentviewer_header_bg);
     height: var(--zd_size40);
     position: relative;
     z-index: 1;
-    padding: 0 var(--zd_size15);
     composes: alignVertical from '~@zohodesk/components/lib/common/common.module.css';
+    background-color: var(--zdt_attachmentviewer_header_bg);
+    padding: 0 var(--zd_size15);
     border-bottom: 1px solid var(--zdt_attachmentviewer_header_border);
 }
 
 .title {
-    padding-right: var(--zd_size15);
     max-width: 50%;
     composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
 
+[dir=ltr] .title {
+    padding-right: var(--zd_size15);
+}
+
+[dir=rtl] .title {
+    padding-left: var(--zd_size15);
+}
+
 .count {
-    padding: 0 var(--zd_size10);
     position: absolute;
     composes: xMiddle from '~@zohodesk/components/lib/common/common.module.css';
+    padding: 0 var(--zd_size10);
 }
 
 .title,
@@ -26,19 +33,27 @@
     font-size: var(--zd_font_size15);
 }
 
-.menuBar {
+[dir=ltr] .menuBar {
     padding-left: var(--zd_size5);
 }
 
+[dir=rtl] .menuBar {
+    padding-right: var(--zd_size5);
+}
+
 .mbleMenuBar {
-    margin-top: var(--zd_size8);
     align-self: baseline;
+    margin-top: var(--zd_size8);
 }
 
-.menu+.menu {
+[dir=ltr] .menu+.menu {
     margin-left: var(--zd_size22);
 }
 
+[dir=rtl] .menu+.menu {
+    margin-right: var(--zd_size22);
+}
+
 .mobileMenu+.mobileMenu {
     margin-bottom: var(--zd_size22);
 }
@@ -62,17 +77,17 @@
 .arrow {
     color: var(--zdt_attachmentviewer_title_text);
     font-size: var(--zd_font_size22);
-    border-radius: 50%;
-    cursor: pointer;
     height: var(--zd_size38);
     width: var(--zd_size38);
     line-height: var(--zd_size36);
+    border-radius: 50%;
+    cursor: pointer;
 }
 
 .preview {
+    composes: posrel from '~@zohodesk/components/lib/common/common.module.css';
     text-align: center;
     margin: var(--zd_size20) 0;
-    composes: posrel from '~@zohodesk/components/lib/common/common.module.css';
 }
 
 .zoomIn {
@@ -89,11 +104,18 @@
 .button {
     position: absolute;
     bottom: var(--zd_size23);
-    right: var(--zd_size20);
     z-index: 3;
     border: 1px solid var(--zdt_attachmentviewer_button_border);
 }
 
+[dir=ltr] .button {
+    right: var(--zd_size20);
+}
+
+[dir=rtl] .button {
+    left: var(--zd_size20);
+}
+
 .visible {
     visibility: visible;
 }
@@ -103,13 +125,20 @@
 }
 
 .footer {
-    background-color: var(--zdt_attachmentviewer_footer_bg);
     width: 100%;
     overflow: hidden;
     transition: height var(--zd_transition3);
+    background-color: var(--zdt_attachmentviewer_footer_bg)
+}
+
+[dir=ltr] .footer {
     padding-right:var(--zd_size68)
 }
 
+[dir=rtl] .footer {
+    padding-left:var(--zd_size68)
+}
+
 .footerHeight {
     height: var(--zd_size75);
 }
@@ -125,12 +154,12 @@
 .imgItem {
     height: var(--zd_size60);
     min-width: var(--zd_size40);
+    position: relative;
+    transition: border var(--zd_transition3);
     border-width: 2px;
     border-style: solid;
     border-color: var(--dot_mirror);
     border-radius: 3px;
-    position: relative;
-    transition: border var(--zd_transition3);
     padding: var(--zd_size2);
 }
 
@@ -138,16 +167,19 @@
     border-color: var(--zdt_attachmentviewer_hover_border);
 }
 
-.imgItem+.imgItem {
+[dir=ltr] .imgItem+.imgItem {
     margin-left: var(--zd_size12);
 }
 
+[dir=rtl] .imgItem+.imgItem {
+    margin-right: var(--zd_size12);
+}
+
 .image {
     cursor: pointer;
 }
 
-.selected,
-.selected:hover {
+.selected, .selected:hover {
     border-color: var(--zdt_attachmentviewer_selected_border);
 }
 
@@ -155,14 +187,21 @@
     content: '';
     position: absolute;
     top: 0;
-    left: 0;
     width: 100%;
     height: 100%;
-    background-color: var(--zdt_attachmentviewer_selected_after_bg);
     opacity: 0.3;
+    background-color: var(--zdt_attachmentviewer_selected_after_bg);
     box-shadow: 0 0 4px 2px var(--zdt_attachmentviewer_selected_box_shadow) inset;
 }
 
+[dir=ltr] .selected::after {
+    left: 0;
+}
+
+[dir=rtl] .selected::after {
+    right: 0;
+}
+
 .zoomIcon {
     font-size: var(--zd_font_size15);
 }
@@ -187,8 +226,8 @@
 
 .isAudio {
     composes: audioImage from '../common/dot_common.module.css';
-    background-size: 100% 100%;
     width: var(--zd_size100);
+    background-size: 100% 100%;
 }
 
 .isAudio .image {
@@ -196,12 +235,20 @@
 }
 
 .video {
-    margin: auto;
     position: absolute;
     top: 0;
+    bottom: 0;
+    margin: auto;
+}
+
+[dir=ltr] .video {
     left: 0;
     right: 0;
-    bottom: 0;
+}
+
+[dir=rtl] .video {
+    right: 0;
+    left: 0;
 }
 
 .imgBox {
@@ -256,8 +303,6 @@
 .loader {
     height: 100%;
     width: 100%;
-    animation-duration: var(--zd_transition8);
-    animation-timing-function: linear;
     composes: rotate from '../common/dot_animation.module.css';
     composes: infinite from '~@zohodesk/components/lib/common/animation.module.css';
     border: 2px solid var(--zdt_attachmentviewer_loader_border);
@@ -265,6 +310,16 @@
     border-radius: 50%;
 }
 
+[dir=ltr] .loader {
+    animation-duration: var(--zd_transition8);
+    animation-timing-function: linear;
+}
+
+[dir=rtl] .loader {
+    animation-duration: var(--zd_transition8);
+    animation-timing-function: linear;
+}
+
 .hide {
     opacity: 0;
     visibility: hidden;
@@ -272,21 +327,28 @@
 
 .author {
     max-width: var(--zd_size200);
+}
+
+[dir=ltr] .author {
     padding-left: var(--zd_size15);
 }
 
+[dir=rtl] .author {
+    padding-right: var(--zd_size15);
+}
+
 .authorName {
-    margin: 0 var(--zd_size10);
     font-size: var(--zd_font_size15);
     color: var(--zdt_attachmentviewer_title_text);
     composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+    margin: 0 var(--zd_size10);
 }
 
 .btn {
-    background-color: var(--dot_mirror);
-    border: 0;
     height: 100%;
     width: 100%;
+    background-color: var(--dot_mirror);
+    border: 0;
     cursor: pointer;
 }
 

package/es/ChannelIcon/ChannelIcon.js

@@ -88,8 +88,8 @@ export default class ChannelIcon extends Component {
 }
 ChannelIcon.defaultProps = defaultProps;
 ChannelIcon.propTypes = propTypes;
-if (false) {
-  ChannelIcon.docs = {
-    componentGroup: 'Atom'
-  };
-}
+// if (__DOCS__) {
+//   ChannelIcon.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }