@zohodesk/dot 1.0.0-temp-65 → 1.0.0-temp-68

package/es/ActionButton/ActionButton.module.css

@@ -21,12 +21,9 @@
 .primaryBtn, .primaryArw {
   border: 1px solid var(--buttonBorder);
 }
-[dir=ltr] .primaryBtn {
+.primaryBtn {
   border-right: none;
 }
-[dir=rtl] .primaryBtn {
-  border-left: none;
-}
 .contentBox,
 .arrowWrapper {
   transition: width var(--zd_transition3), padding var(--zd_transition3), background-color var(--zd_transition2), border-color var(--zd_transition2);
@@ -34,12 +31,9 @@
 .clickable {
   cursor: pointer;
 }
-[dir=ltr] .contentBoxBdr {
+.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);
 }
@@ -59,7 +53,8 @@
 .small_btnBox {
   padding: 0 var(--zd_size8);
 }
-.medium_btnBox, .large_btnBox {
+.medium_btnBox,
+.large_btnBox {
   padding: 0 var(--zd_size10);
 }
 .txt {
@@ -82,20 +77,12 @@
 }
 .arrowWrapper {
   position: relative;
-  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;
+  cursor: pointer;
+  composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
 }
-[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);
+.primaryFilledArw {
+    border-left: 1px solid var(--buttonSeparatorBorder);
 }
 .small_arrowBox {
   width: var(--zd_size20);
@@ -128,9 +115,6 @@
 .iconClr {
   color: var(--buttonText);
 }
-[dir=ltr] .iconMrgn {
+.iconMrgn {
   margin-right: var(--zd_size6);
 }
-[dir=rtl] .iconMrgn {
-  margin-left: var(--zd_size6);
-}

package/es/AlphabeticList/AlphabeticList.module.css

@@ -7,19 +7,16 @@
   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);
 }
-[dir=ltr] .row .title {
+.row .title {
   margin-right: var(--zd_size3);
 }
-[dir=rtl] .row .title {
-  margin-left: var(--zd_size3);
-}
 .row  .letter {
   padding: 0 var(--zd_size3);
 }
@@ -32,10 +29,10 @@
 }
 .list {
   font-size: var(--zd_font_size11);
-  flex-basis: var(--zd_size12);
-  color: var(--textColor);
   text-align: center;
+  flex-basis: var(--zd_size12);
   cursor: pointer;
+  color: var(--textColor);
 }
 .title {
   flex-basis: var(--zd_size15);

package/es/Attachment/Attachment.module.css

@@ -1,8 +1,8 @@
 .attachment {
-  position: relative;
-  overflow: hidden;
   border: 1px solid var(--zdt_attachment_default_border);
   border-radius: 2px;
+  position: relative;
+  overflow: hidden;
 }
 .attachmentHover {
   cursor: pointer;
@@ -13,7 +13,8 @@
 .palette_transparent {
   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);
 }
 .attachmentHover:hover .attachleft i {
@@ -34,12 +35,9 @@
   width: var(--zd_size145);
   height: var(--zd_size40);
 }
-[dir=ltr] .attachleft {
+.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);
 }
@@ -47,13 +45,9 @@
   width: var(--zd_size40);
 }
 
-[dir=ltr] .medium .attachright {
+.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);
 }
@@ -88,15 +82,10 @@
 .attachDownload {
   position: absolute;
   top: calc(var(--zd_size1) * -1);
-  display: none;
+  right: calc(var(--zd_size1) * -1);
   background-color: var(--zdt_attachment_download_bg);
   text-align: center;
-}
-[dir=ltr] .attachDownload {
-  right: calc(var(--zd_size1) * -1);
-}
-[dir=rtl] .attachDownload {
-  left: calc(var(--zd_size1) * -1);
+  display: none;
 }
 .medium .attachDownload {
   height: var(--zd_size25);
@@ -124,9 +113,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/ChannelIcon/ChannelIcon.module.css

@@ -14,16 +14,11 @@
   composes: dflex alignVertical alignHorizontal rounded from '~@zohodesk/components/lib/common/common.module.css';
   position: absolute;
   top: calc(var(--zd_size4) * -1);
+  right: calc(var(--zd_size1) * -1);
   height: var(--zd_size15);
   width: var(--zd_size15);
   background-color: var(--topIconBg);
 }
-[dir=ltr] .thread {
-  right: calc(var(--zd_size1) * -1);
-}
-[dir=rtl] .thread {
-  left: calc(var(--zd_size1) * -1);
-}
 .threadBorder {
   border: 1px solid var(--topIconBorderColor);
 }
@@ -114,12 +109,11 @@
 }
 
 /* facebook */
-[dir=ltr] .facebook_incoming, [dir=ltr] .facebook_missed, [dir=ltr] .facebook_outgoing {
+.facebook_incoming,
+.facebook_missed,
+.facebook_outgoing {
   right: var(--zd_size2);
 }
-[dir=rtl] .facebook_incoming, [dir=rtl] .facebook_missed, [dir=rtl] .facebook_outgoing {
-  left: var(--zd_size2);
-}
 
 /* chat */
 .chat_incoming,
@@ -143,22 +137,24 @@
 .feedback_incoming,
 .feedback_missed,
 .feedback_out {
-  top: var(--zd_size1);
-}
-[dir=ltr] .feedback_incoming, [dir=ltr] .feedback_missed, [dir=ltr] .feedback_out {
   right: var(--zd_size1);
-}
-[dir=rtl] .feedback_incoming, [dir=rtl] .feedback_missed, [dir=rtl] .feedback_out {
-  left: var(--zd_size1);
+  top: var(--zd_size1);
 }
 
 /* draft */
-[dir=ltr] .email_draft, [dir=ltr] .facebook_draft, [dir=ltr] .twitter_draft, [dir=ltr] .forums_draft, [dir=ltr] .chat_draft, [dir=ltr] .offline_chat_draft, [dir=ltr] .online_chat_draft, [dir=ltr] .phone_draft, [dir=ltr] .web_draft, [dir=ltr] .customerportal_draft, [dir=ltr] .feedback_draft {
+.email_draft,
+.facebook_draft,
+.twitter_draft,
+.forums_draft,
+.chat_draft,
+.offline_chat_draft,
+.online_chat_draft,
+.phone_draft,
+.web_draft,
+.customerportal_draft,
+.feedback_draft {
   left: var(--zd_size1);
 }
-[dir=rtl] .email_draft, [dir=rtl] .facebook_draft, [dir=rtl] .twitter_draft, [dir=rtl] .forums_draft, [dir=rtl] .chat_draft, [dir=rtl] .offline_chat_draft, [dir=rtl] .online_chat_draft, [dir=rtl] .phone_draft, [dir=rtl] .web_draft, [dir=rtl] .customerportal_draft, [dir=rtl] .feedback_draft {
-  right: var(--zd_size1);
-}
 
 /* forward */
 .email_forward,
@@ -188,22 +184,17 @@
 .web_forwarddraft,
 .customerportal_forwarddraft,
 .feedback_forwarddraft {
-  bottom: var(--zd_size1);
-}
-[dir=ltr] .email_forwarddraft, [dir=ltr] .facebook_forwarddraft, [dir=ltr] .twitter_forwarddraft, [dir=ltr] .forums_forwarddraft, [dir=ltr] .chat_forwarddraft, [dir=ltr] .offline_chat_forwarddraft, [dir=ltr] .online_chat_forwarddraft, [dir=ltr] .phone_forwarddraft, [dir=ltr] .web_forwarddraft, [dir=ltr] .customerportal_forwarddraft, [dir=ltr] .feedback_forwarddraft {
   left: var(--zd_size1);
-}
-[dir=rtl] .email_forwarddraft, [dir=rtl] .facebook_forwarddraft, [dir=rtl] .twitter_forwarddraft, [dir=rtl] .forums_forwarddraft, [dir=rtl] .chat_forwarddraft, [dir=rtl] .offline_chat_forwarddraft, [dir=rtl] .online_chat_forwarddraft, [dir=rtl] .phone_forwarddraft, [dir=rtl] .web_forwarddraft, [dir=rtl] .customerportal_forwarddraft, [dir=rtl] .feedback_forwarddraft {
-  right: var(--zd_size1);
+  bottom: var(--zd_size1);
 }
 
 /* facebook_dm */
-[dir=ltr] .facebook_dm_default, [dir=ltr] .facebook_dm_incoming, [dir=ltr] .facebook_dm_outgoing, [dir=ltr] .facebook_dm_missed {
+.facebook_dm_default,
+.facebook_dm_incoming,
+.facebook_dm_outgoing,
+.facebook_dm_missed {
   right: var(--zd_size2);
 }
-[dir=rtl] .facebook_dm_default, [dir=rtl] .facebook_dm_incoming, [dir=rtl] .facebook_dm_outgoing, [dir=rtl] .facebook_dm_missed {
-  left: var(--zd_size2);
-}
 
 /*Topic Icon colors*/
 .topic_olive {

package/es/Drawer/Drawer.module.css

@@ -1,20 +1,15 @@
 .container {
-  transition: width var(--zd_transition3);
   box-shadow: 0 6px 12px var(--zdt_drawer_default_box_shadow);
   background-color: var(--zdt_drawer_default_bg);
+  transition: width var(--zd_transition3);
 }
 .isOverlay {
+  right: 0;
   top: 0;
   bottom: 0;
   position: absolute;
   pointer-events: none;
 }
-[dir=ltr] .isOverlay {
-  right: 0;
-}
-[dir=rtl] .isOverlay {
-  left: 0;
-}
 .columns {
   pointer-events: initial;
 }
@@ -26,29 +21,18 @@
   box-shadow: 0 6px 12px var(--zdt_drawer_default_box_shadow);
 }
 .secondMobDrawer {
+  right: 0;
   position: absolute;
   top: 0;
   z-index: 1;
 }
-[dir=ltr] .secondMobDrawer {
-  right: 0;
-}
-[dir=rtl] .secondMobDrawer {
-  left: 0;
-}
 .mobModal {
   position: absolute;
   top: 0;
-  bottom: 0;
-}
-[dir=ltr] .mobModal {
   right: 0;
+  bottom: 0;
   left: 0;
 }
-[dir=rtl] .mobModal {
-  left: 0;
-  right: 0;
-}
 .xsmall {
   width: var(--zd_size360);
 }
@@ -88,64 +72,32 @@
   color: var( --zdt_drawer_title_text);
   font: var(--zd_font_size16) var(--zd_semibold);
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-}
-[dir=ltr] .title {
   padding: 0 var(--zd_size10) 0 0;
 }
-[dir=rtl] .title {
-  padding: 0 0 0 var(--zd_size10);
-}
-[dir=ltr] .smallHeaderPadding {
+.smallHeaderPadding {
   padding-right: var(--zd_size11);
   padding-left: var(--zd_size30);
 }
-[dir=rtl] .smallHeaderPadding {
-  padding-left: var(--zd_size11);
-  padding-right: var(--zd_size30);
-}
-[dir=ltr] .smallContentPadding {
+.smallContentPadding {
   padding-left: var(--zd_size30);
   padding-right: var(--zd_size30);
 }
-[dir=rtl] .smallContentPadding {
-  padding-right: var(--zd_size30);
-  padding-left: var(--zd_size30);
-}
-[dir=ltr] .mediumHeaderPadding {
+.mediumHeaderPadding {
   padding-right: var(--zd_size15);
   padding-left: var(--zd_size30);
 }
-[dir=rtl] .mediumHeaderPadding {
-  padding-left: var(--zd_size15);
-  padding-right: var(--zd_size30);
-}
-[dir=ltr] .mediumContentPadding {
+.mediumContentPadding {
   padding-left: var(--zd_size30);
   padding-right: var(--zd_size30);
 }
-[dir=rtl] .mediumContentPadding {
-  padding-right: var(--zd_size30);
-  padding-left: var(--zd_size30);
-}
-[dir=ltr] .largeHeaderPadding {
+.largeHeaderPadding {
   padding-right: var(--zd_size15);
   padding-left: var(--zd_size50);
 }
-[dir=rtl] .largeHeaderPadding {
-  padding-left: var(--zd_size15);
-  padding-right: var(--zd_size50);
-}
-[dir=ltr] .largeContentPadding {
+.largeContentPadding {
   padding-left: var(--zd_size50);
   padding-right: var(--zd_size50);
 }
-[dir=rtl] .largeContentPadding {
-  padding-right: var(--zd_size50);
-  padding-left: var(--zd_size50);
-}
-[dir=ltr] .iconWrapper {
+.iconWrapper {
   margin-right: var(--zd_size10);
 }
-[dir=rtl] .iconWrapper {
-  margin-left: var(--zd_size10);
-}

package/es/FlipCard/FlipCard.module.css

@@ -1,8 +1,7 @@
 .flip,
 .flipNone {
-  color: var(--zdt_flipcard_default_text);
-}.flip, .flipNone {
   background-color: var(--zdt_flipcard_default_bg);
+  color: var(--zdt_flipcard_default_text);
 }
 .container {
   position: relative;
@@ -21,24 +20,16 @@
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
 }
-[dir=ltr] .front {
+.front {
   transform: rotateY(180deg) perspective(1px);
 }
-[dir=rtl] .front {
-  transform: rotateY(-180deg) perspective(1px);
-}
 .back {
   transform: rotateY(0deg) perspective(1px);
 }
-[dir=ltr] .notFlip .container {
+.notFlip .container {
   transform: rotateY(180deg);
 }
-[dir=rtl] .notFlip .container {
-  transform: rotateY(-180deg);
-}
-[dir=ltr] .flip:hover .container, [dir=ltr] .hoverContainer:hover .container {
+.flip:hover .container,
+.hoverContainer:hover .container {
   transform: rotateY(180deg);
 }
-[dir=rtl] .flip:hover .container, [dir=rtl] .hoverContainer:hover .container {
-  transform: rotateY(-180deg);
-}

package/es/FormAction/FormAction.module.css

@@ -25,58 +25,33 @@
   padding-bottom: var(--zd_size10);
 }
 
-[dir=ltr] .largePadding {
+.largePadding {
   padding-left: var(--zd_size60);
 }
-
-[dir=rtl] .largePadding {
-  padding-right: var(--zd_size60);
-}
-[dir=ltr] .mediumPadding {
+.mediumPadding {
   padding-left: var(--zd_size50);
 }
-[dir=rtl] .mediumPadding {
-  padding-right: var(--zd_size50);
-}
-[dir=ltr] .xmediumPadding {
+.xmediumPadding {
   padding-left: var(--zd_size30);
 }
-[dir=rtl] .xmediumPadding {
-  padding-right: var(--zd_size30);
-}
-[dir=ltr] .smallPadding {
+.smallPadding {
   padding-left: var(--zd_size25);
 }
-[dir=rtl] .smallPadding {
-  padding-right: var(--zd_size25);
-}
-[dir=ltr] .xsmallPadding {
+.xsmallPadding {
   padding-left: var(--zd_size20);
 }
-[dir=rtl] .xsmallPadding {
-  padding-right: var(--zd_size20);
-}
 
 .marginRight {
   composes: dinblk from '~@zohodesk/components/lib/common/common.module.css';
 }
-[dir=ltr] .largeFooter .marginRight, [dir=ltr] .mediumFooter .marginRight {
+.largeFooter .marginRight,
+.mediumFooter .marginRight {
   margin-right: var(--zd_size15);
 }
-[dir=rtl] .largeFooter .marginRight, [dir=rtl] .mediumFooter .marginRight {
-  margin-left: var(--zd_size15);
-}
-[dir=ltr] .smallFooter .marginRight {
+.smallFooter .marginRight {
   margin-right: var(--zd_size12);
 }
-[dir=rtl] .smallFooter .marginRight {
-  margin-left: var(--zd_size12);
-}
 
-[dir=ltr] .marginRight:last-child {
+.marginRight:last-child {
   margin-right: 0;
 }
-
-[dir=rtl] .marginRight:last-child {
-  margin-left: 0;
-}

package/es/FreezeLayer/FreezeLayer.js

@@ -2,9 +2,10 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Container } from '@zohodesk/components/lib/Layout';
 import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
-import style from './FreezeLayer.module.css';
-import { Shortcut } from '../utils/KeyboardApi';
+import style from './FreezeLayer.module.css'; //import { Shortcut } from '../utils/KeyboardApi';
+
 import { getZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
+import { getDotLibraryConfig } from '../Provider/Config';
 export default class FreezeLayer extends Component {
   constructor(props) {
     super(props);
@@ -13,6 +14,23 @@ export default class FreezeLayer extends Component {
       isChildActive: false
     };
     this.getNextIndex = getZIndex(this);
+    this.isFreezeLayerEnabled = false;
+  }
+
+  enableFreeze() {
+    if (!this.isFreezeLayerEnabled) {
+      this.isFreezeLayerEnabled = true;
+      const freezeLayerEnable = (getDotLibraryConfig('freezeLayer') || {}).enable;
+      freezeLayerEnable && freezeLayerEnable();
+    }
+  }
+
+  disableFreeze() {
+    if (this.isFreezeLayerEnabled) {
+      this.isFreezeLayerEnabled = false;
+      const freezeLayerDisable = (getDotLibraryConfig('freezeLayer') || {}).disable;
+      freezeLayerDisable && freezeLayerDisable();
+    }
   }
 
   componentDidMount() {
@@ -24,6 +42,7 @@ export default class FreezeLayer extends Component {
       this.setState({
         isChildActive: true
       });
+      this.enableFreeze();
     }
   }
 
@@ -34,7 +53,8 @@ export default class FreezeLayer extends Component {
 
     if (isActive != prevProps.isActive) {
       if (isActive) {
-        Shortcut && Shortcut.setState(false);
+        this.enableFreeze(); // Shortcut && Shortcut.setState(false);
+
         this.setState({
           isActive: true
         }, () => {
@@ -43,7 +63,8 @@ export default class FreezeLayer extends Component {
           });
         });
       } else {
-        Shortcut && Shortcut.setState(true);
+        this.disableFreeze(); // Shortcut && Shortcut.setState(true);
+
         this.setState({
           isChildActive: false
         }, () => {
@@ -55,6 +76,10 @@ export default class FreezeLayer extends Component {
     }
   }
 
+  componentWillUnmount() {
+    this.disableFreeze();
+  }
+
   render() {
     let {
       children,

package/es/FreezeLayer/FreezeLayer.module.css

@@ -1,14 +1,10 @@
 .container {
   top: 0;
+  left: 0;
   bottom: 0;
+  right: 0;
   position: absolute;
   overflow: hidden;
-}[dir=ltr] .container {
-  left: 0;
-  right: 0;
-}[dir=rtl] .container {
-  right: 0;
-  left: 0;
 }
 .default {
   background-color: var(--zdt_freezelayer_default_bg);

package/es/IconButton/IconButton.js

@@ -94,8 +94,7 @@ export default class IconButton extends React.Component {
       ariaExpanded,
       ariaLabel,
       ariaControls,
-      ariaLabelledby,
-      role
+      ariaLabelledby
     } = a11y;
     return /*#__PURE__*/React.createElement(RippleEffect, {
       palette: palette,
@@ -109,7 +108,6 @@ export default class IconButton extends React.Component {
       "aria-expanded": ariaExpanded,
       "aria-controls": ariaControls,
       "aria-labelledby": ariaLabelledby,
-      role: role,
       tagName: needButtonTag ? 'button' : 'div',
       isInline: true,
       tourId: tourId,
@@ -163,8 +161,7 @@ IconButton.propTypes = {
     ariaExpanded: PropTypes.bool,
     ariaLabel: PropTypes.string,
     ariaControls: PropTypes.string,
-    ariaLabelledby: PropTypes.string,
-    role: PropTypes.string
+    ariaLabelledby: PropTypes.string
   }),
   dataIsHtml: PropTypes.bool
 };

package/es/IconButton/IconButton.module.css

@@ -3,11 +3,11 @@
 }
 .wrapper {
   height: var(--zd_size28);
+  cursor: pointer;
   width: var(--zd_size28);
   composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
   composes: varClass;
   color: var(--iconColor);
-  cursor: pointer;
 }
 .primary {
   --iconColor: var(--zdt_iconButton_icon_primary);

package/es/ImportantNotes/ImportantNotes.module.css

@@ -8,13 +8,8 @@
   color: var(--zdt_importantnotes_title_text);
 }
 .icon {
-  color: var(--zdt_importantnotes_icon);
-  font-size: 0;
   margin-top: var(--zd_size1);
-}
-[dir=ltr] .icon {
   margin-right: var(--zd_size5);
-}
-[dir=rtl] .icon {
-  margin-left: var(--zd_size5);
+  color: var(--zdt_importantnotes_icon);
+  font-size: 0;
 }

package/es/Link/Link.js

@@ -3,7 +3,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React from 'react';
 import PropTypes from 'prop-types';
 import style from './Link.module.css';
-import LinkContext from './LinkContext.js';
+import LinkContext from './LinkContext';
 export default class Link extends React.Component {
   constructor(props, context) {
     super(props, context);