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

package/README.md

@@ -2,6 +2,15 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.0.0-beta.247
+ 
+- **ActionButton** - arrowBoxDataId prop removed .
+- dataSelectorId prop added for all components
+
+# 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.js

@@ -27,10 +27,10 @@ export class ActionButton extends React.Component {
       onClick,
       size,
       dataId,
+      dataSelectorId,
       isArrow,
       text,
       subText,
-      arrowBoxDataId,
       arrowBoxSize,
       palette,
       onHover,
@@ -58,7 +58,8 @@ export class ActionButton extends React.Component {
       onClick: onHover ? removeClose : !onClick ? this.handleTogglePopup : undefined,
       onMouseEnter: !onClick ? onHover && this.handleTogglePopup : undefined,
       onMouseLeave: !onClick ? onHover && this.handleTogglePopup : undefined,
-      eleRef: getTargetRef
+      eleRef: getTargetRef,
+      dataSelectorId: dataSelectorId
     }, isLoading ? /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }, /*#__PURE__*/React.createElement(Button, {
@@ -101,9 +102,10 @@ export class ActionButton extends React.Component {
       onMouseEnter: onClick ? onHover && this.handleTogglePopup : undefined,
       onMouseLeave: onClick ? onHover && this.handleTogglePopup : undefined,
       className: `${btnStyle.buttonReset} ${style[arrowBoxSize + '_arrowBox']} ${style[palette + 'Arw']}  ${style.arrowWrapper} ${isPopupOpen ? style.arrowActive : ''}`,
-      dataId: arrowBoxDataId,
+      dataId: `${dataId}_arrowButton`,
       tabIndex: "0",
-      tagName: "button"
+      tagName: "button",
+      dataSelectorId: `${dataSelectorId}_arrowButton`
     }, /*#__PURE__*/React.createElement(Container, {
       align: "both"
     }, /*#__PURE__*/React.createElement(Icon, {

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/ActionButton/props/defaultProps.js

@@ -1,8 +1,8 @@
 export const defaultProps = {
   size: 'medium',
   isArrow: false,
-  arrowBoxDataId: 'arrowBox',
   dataId: 'actionButton',
+  dataSelectorId: 'actionButton',
   onHover: false,
   className: '',
   iconName: '',

package/es/ActionButton/props/propTypes.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 export const propTypes = {
-  arrowBoxDataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   arrowBoxSize: PropTypes.oneOf(['small', 'medium']),
   children: PropTypes.node,
   className: PropTypes.string,

package/es/AlphabeticList/AlphabeticList.js

@@ -31,7 +31,8 @@ export default class AlphabeticList extends React.PureComponent {
       align,
       type,
       i18nKeys,
-      dataId
+      dataId,
+      dataSelectorId
     } = this.props;
     let {
       allText = 'All',
@@ -44,7 +45,8 @@ export default class AlphabeticList extends React.PureComponent {
       isCover: false,
       alignBox: align === 'vertical' ? 'column' : 'row',
       className: `${style.container} ${alignType} ${type != 'alphabetical' ? style.numbers : ''}`,
-      dataId: "navigationDiv"
+      dataId: "navigationDiv",
+      dataSelectorId: dataSelectorId
     }, /*#__PURE__*/React.createElement(Box, {
       tagName: "li",
       className: `${style.list} ${style.title} ${selectedCharacter === 'ALL' ? style.selected : ''}`,

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/AlphabeticList/props/defaultProps.js

@@ -2,7 +2,8 @@ export const AlphabeticList_defaultProps = {
   align: 'vertical',
   type: 'alphabetical',
   i18nKeys: {},
-  dataId: 'Navi'
+  dataId: 'Navi',
+  dataSelectorId: 'alphabeticList'
 };
 export const AlphabeticListItem_defaultProps = {
   isActive: false,

package/es/AlphabeticList/props/propTypes.js

@@ -11,7 +11,8 @@ export const AlphabeticList_propTypes = {
     allTitle: PropTypes.string,
     allText: PropTypes.string
   }),
-  dataId: PropTypes.string
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string
 };
 export const AlphabeticListItem_propTypes = {
   id: PropTypes.string,

package/es/Attachment/Attachment.js

@@ -18,7 +18,8 @@ export default class Attachment extends React.Component {
       palette,
       tooltip,
       fileInfo,
-      i18nKeys
+      i18nKeys,
+      dataSelectorId
     } = this.props;
     let {
       downloadTitle = 'Download'
@@ -30,7 +31,8 @@ export default class Attachment extends React.Component {
       dataId: dataId,
       "data-title": tooltip,
       alignBox: "row",
-      isCover: false
+      isCover: false,
+      dataSelectorId: dataSelectorId
     }, iconName ? /*#__PURE__*/React.createElement(Box, {
       className: style.attachleft
     }, /*#__PURE__*/React.createElement(Container, {
@@ -78,8 +80,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/Attachment/props/defaultProps.js

@@ -2,5 +2,6 @@ export const defaultProps = {
   size: 'medium',
   palette: 'default',
   dataId: 'attachment',
-  i18nKeys: {}
+  i18nKeys: {},
+  dataSelectorId: 'attachment'
 };

package/es/Attachment/props/propTypes.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 export const propTypes = {
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   downloadLink: PropTypes.string,
   fileInfo: PropTypes.string,
   fileName: PropTypes.string,

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"
+//   };
+// }