@zohodesk/dot 1.0.0-temp-39 → 1.0.0-temp-43

package/es/version2/GlobalNotification/GlobalNotification.module.css

@@ -11,38 +11,25 @@
   top: 0;
   z-index: 1000;
   /*Hook for editor alert*/
-  pointer-events: none;
-  text-align: center;
-}
-[dir=ltr] .message {
   right: 0;
+  text-align: center;
   left: 0;
-}
-[dir=rtl] .message {
-  left: 0;
-  right: 0;
+  pointer-events: none;
 }
 
 .container {
+  padding: var(--zd_size18) var(--zd_size70) var(--zd_size19) var(--zd_size75);
   position: relative;
   pointer-events: initial;
-  color: var(--globalnotification_text_color);
-  max-width: var(--zd_size490);
-  composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
   box-shadow: 0 4px 20px var(--globalnotification_box_shadow);
   border-radius: 0 0 var(--zd_size10) var(--zd_size10);
   background-color: var(--globalnotification_bg_color);
   border-style: solid;
   border-color: var(--commonalert_border_color);
   border-width: 2px 1px 1px 1px;
-}
-
-[dir=ltr] .container {
-  padding: var(--zd_size18) var(--zd_size70) var(--zd_size19) var(--zd_size75);
-}
-
-[dir=rtl] .container {
-  padding: var(--zd_size18) var(--zd_size75) var(--zd_size19) var(--zd_size70);
+  color: var(--globalnotification_text_color);
+  max-width: var(--zd_size490);
+  composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
 }
 
 .icon {
@@ -51,15 +38,8 @@
   position: absolute;
   top: 0;
   bottom: 0;
-  margin: auto 0;
-}
-
-[dir=ltr] .icon {
   left: var(--zd_size18);
-}
-
-[dir=rtl] .icon {
-  right: var(--zd_size18);
+  margin: auto 0;
 }
 
 .success {
@@ -96,30 +76,15 @@
   font-size: var(--zd_font_size14);
   font-family: var(--zd_semibold);
   composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
-  line-height: var(--zd_size20);
-}
-
-[dir=ltr] .text {
   text-align: left;
-}
-
-[dir=rtl] .text {
-  text-align: right;
+  line-height: var(--zd_size20);
 }
 
 .close {
   position: absolute;
   top: 0;
   bottom: 0;
-  height: var(--zd_size25);
-}
-
-[dir=ltr] .close {
   right: var(--zd_size12);
   margin: auto 0 auto var(--zd_size25);
-}
-
-[dir=rtl] .close {
-  left: var(--zd_size12);
-  margin: auto var(--zd_size25) auto 0;
+  height: var(--zd_size25);
 }

package/es/version2/errorstate/Inconvenience/Inconvenience.js

@@ -4,7 +4,7 @@ import { Container } from '@zohodesk/components/lib/Layout';
 import CommonEmptyState from './../../../emptystate/CommonEmptyState/CommonEmptyState';
 import ErrorInconvenience from '@zohodesk/svg/lib/svg/ErrorInconvenience';
 import Button from '@zohodesk/components/lib/Button/Button';
-import style from './V2_Inconvenience.module.css';
+import style from './../V2_ErrorStates.module.css';
 export default class Inconvenience extends React.Component {
   constructor(props) {
     super(props);

package/es/version2/errorstate/OopsSomethingMiss/OopsSomethingMiss.js

@@ -4,7 +4,7 @@ import { Container } from '@zohodesk/components/lib/Layout';
 import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
 import ErrorOopsSomethingMiss from '@zohodesk/svg/lib/svg/ErrorOopsSomethingMiss';
 import Button from '@zohodesk/components/lib/Button/Button';
-import style from './V2_OopsSomethingMiss.module.css';
+import style from './../V2_ErrorStates.module.css';
 export default class OopsSomethingMiss extends React.Component {
   constructor(props) {
     super(props);
@@ -57,7 +57,8 @@ export default class OopsSomethingMiss extends React.Component {
       customClass: {
         customButton: style.errorBtn
       },
-      onClick: onButtonClick
+      onClick: onButtonClick,
+      dataId: "goBack"
     }) : null));
   }
 

package/es/version2/errorstate/UnableToProcessRequest/UnableToProcessRequest.js

@@ -4,7 +4,7 @@ import { Container } from '@zohodesk/components/lib/Layout';
 import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
 import ErrorUnableToProcessRequest from '@zohodesk/svg/lib/svg/ErrorUnableToProcessRequest';
 import Button from '@zohodesk/components/lib/Button/Button';
-import style from './V2_UnableToProcessRequest.module.css';
+import style from './../V2_ErrorStates.module.css';
 export default class UnableToProcessRequest extends React.Component {
   constructor(props) {
     super(props);

package/es/version2/errorstate/UnauthorizedLogin/UnauthorizedLogin.js

@@ -4,7 +4,7 @@ import { Container } from '@zohodesk/components/lib/Layout';
 import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
 import ErrorUnauthorizedLogin from '@zohodesk/svg/lib/svg/ErrorUnauthorizedLogin';
 import Button from '@zohodesk/components/lib/Button/Button';
-import style from './V2_UnauthorizedLogin.module.css';
+import style from './../V2_ErrorStates.module.css';
 export default class UnauthorizedLogin extends React.Component {
   constructor(props) {
     super(props);
@@ -58,7 +58,8 @@ export default class UnauthorizedLogin extends React.Component {
       customClass: {
         customButton: style.errorBtn
       },
-      onClick: onButtonClick
+      onClick: onButtonClick,
+      dataId: `${dataId}_button`
     }) : null));
   }
 
@@ -80,7 +81,7 @@ UnauthorizedLogin.propTypes = {
   size: PropTypes.oneOf(['large', 'medium', 'small'])
 };
 UnauthorizedLogin.defaultProps = {
-  dataId: 'unauthorizedlogin',
+  dataId: 'permissionPlay',
   isButtonNeeded: false,
   className: '',
   isFluid: true,

package/es/version2/errorstate/UrlNotFound/UrlNotFound.js

@@ -4,7 +4,7 @@ import { Container } from '@zohodesk/components/lib/Layout';
 import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
 import ErrorUrlNotFound from '@zohodesk/svg/lib/svg/ErrorUrlNotFound';
 import Button from '@zohodesk/components/lib/Button/Button';
-import style from './V2_UrlNotFound.module.css';
+import style from './../V2_ErrorStates.module.css';
 export default class UrlNotFound extends React.Component {
   constructor(props) {
     super(props);

package/es/version2/errorstate/{Inconvenience/V2_Inconvenience.module.css → V2_ErrorStates.module.css}

@@ -34,7 +34,7 @@
   font-size: var(--zd_font_size13)
 }
 .small .errorState {
-  width: var(--zd_size280);
+  width: var(--zd_size230);
   margin-top: var(--zd_size20);
 }
 .small .errorSvg {

package/es/version2/errorstate/WillBeRightBack/WillBeRightBack.js

@@ -4,7 +4,7 @@ import { Container } from '@zohodesk/components/lib/Layout';
 import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
 import ErrorWillBeRightBack from '@zohodesk/svg/lib/svg/ErrorWillBeRightBack';
 import Button from '@zohodesk/components/lib/Button/Button';
-import style from './V2_WillBeRightBack.module.css';
+import style from './../V2_ErrorStates.module.css';
 export default class WillBeRightBack extends React.Component {
   constructor(props) {
     super(props);

package/es/version2/lookup/AlertHeader/AlertHeaderNew.module.css

@@ -11,13 +11,8 @@
 }
 .headerLayout {
   min-height: var(--zd_size54);
-}
-[dir=ltr] .headerLayout {
   padding: var(--zd_size15) var(--zd_size45) 0 var(--zd_size20);
 }
-[dir=rtl] .headerLayout {
-  padding: var(--zd_size15) var(--zd_size20) 0 var(--zd_size45);
-}
 
 .success {
   --commonalert_border_color: var(--zdt_commonalert_success_border);
@@ -39,14 +34,10 @@
   --commonalert_border_color: var(--zdt_commonalert_warning_border);
 }
 
-[dir=ltr] .extraSmall {
+.extraSmall {
   padding: var(--zd_size12) var(--zd_size45) var(--zd_size12) var(--zd_size16);
 }
 
-[dir=rtl] .extraSmall {
-  padding: var(--zd_size12) var(--zd_size16) var(--zd_size12) var(--zd_size45);
-}
-
 .iconContainer {
   height: var(--zd_size51);
   width: var(--zd_size51);
@@ -54,6 +45,7 @@
 
 .title {
   color: var(--zdt_alertlookupnew_text);
+  margin: 0 var(--zd_size5) 0 var(--zd_size10);
   font-size: var(--zd_font_size18);
   line-height: var(--zd_size22);
   font-family: var(--zd_bold);
@@ -61,14 +53,6 @@
   vertical-align: middle;
 }
 
-[dir=ltr] .title {
-  margin: 0 var(--zd_size5) 0 var(--zd_size10);
-}
-
-[dir=rtl] .title {
-  margin: 0 var(--zd_size10) 0 var(--zd_size5);
-}
-
 .iconStyle {
   display: block;
 }
@@ -76,12 +60,5 @@
 .close {
   position: absolute;
   top: var(--zd_size12);
-}
-
-[dir=ltr] .close {
   right: var(--zd_size12);
-}
-
-[dir=rtl] .close {
-  left: var(--zd_size12);
 }

package/es/version2/lookup/AlertLookup/AlertLookup.js

@@ -53,6 +53,10 @@ export default class AlertLookup extends Component {
     }
   }
 
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.documentKeydownHandler);
+  }
+
   documentKeydownHandler(e = {}) {
     let {
       onSubmitClick,
@@ -87,7 +91,7 @@ export default class AlertLookup extends Component {
     let {
       isActive,
       size,
-      type = '',
+      type = 'danger',
       title,
       message,
       confirmationMessage,

package/es/version2/lookup/AlertLookup/AlertLookupNew.module.css

@@ -3,21 +3,17 @@
 }
 
 .innerSection {
+  padding: var(--zd_size17) var(--zd_size30) var(--zd_size30);
   color: var(--zdt_alertlookupnew_text);
   font-size: var(--zd_font_size14);
   line-height: var(--zd_size18);
   composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
-  padding: var(--zd_size17) var(--zd_size30) var(--zd_size30);
 }
 
-[dir=ltr] .buttonGap {
+.buttonGap {
   margin: 0 0 0 var(--zd_size12);
 }
 
-[dir=rtl] .buttonGap {
-  margin: 0 var(--zd_size12) 0 0;
-}
-
 .confirmMsgText {
   margin-top: var(--zd_size20);
 }
@@ -27,8 +23,8 @@
 }
 
 .footer {
-  overflow: hidden;
   border-radius: 0 0 var(--zd_size10) var(--zd_size10);
+  overflow: hidden;
 }
 .horizontalScroll, .verticalScroll, .bothScroll {
   height: 100%;

package/es/version2/lookup/alertLookupCommonNew.module.css

@@ -2,16 +2,9 @@
 
 .noteContainer {
     padding: var(--zd_size4) var(--zd_size30) 0;
-}
-
-[dir=ltr] .noteContainer {
     border-left: solid 1px var(--zdt_alertlookup_border);
 }
 
-[dir=rtl] .noteContainer {
-    border-right: solid 1px var(--zdt_alertlookup_border);
-}
-
 .noteTitle {
     font-size: var(--zd_font_size13);
     font-family: var(--zd_semibold);
@@ -25,9 +18,9 @@
 
 .noteUl li {
     font-size: var(--zd_font_size12);
-    line-height: var(--zd_size14);
+    /* line-height: var(--zd_size14); */
     color: var(--zdt_alertlookuop_text);
+    margin-bottom: var(--zd_size15);
     list-style-type: disc;
     line-height: initial;
-    margin-bottom: var(--zd_size15);
 }

package/es/version2/notification/DesktopNotification/DesktopNotification.module.css

@@ -1,22 +1,17 @@
 .parentElement {
-  position: relative;
   margin-bottom: var(--zd_size7);
+  position: relative;
 }
 .container {
+  background-color: var(--zdt_desktopnotification_bg);
   color: var(--zdt_desktopnotification_text);
   transition: all var(--zd_transition4);
   position: relative;
+  transform-origin: right center;
   max-height: 100%;
-  pointer-events: auto;
-  background-color: var(--zdt_desktopnotification_bg);
   box-shadow: 0 4px 20px var(--zdt_desktopnotification_box_shadow);
   border-radius: 0 0 var(--zd_size10) var(--zd_size10);
-}
-[dir=ltr] .container {
-  transform-origin: right center;
-}
-[dir=rtl] .container {
-  transform-origin: left center;
+  pointer-events: auto;
 }
 .globalNotify { 
   max-width: var(--zd_size490);
@@ -32,19 +27,11 @@
 /* Animation Style */
 .closeAnimation {
   max-height: 0;
-  transition: all var(--zd_transition3) 0.4s;
   margin-bottom: 0;
+  transition: all var(--zd_transition3) 0.4s;
 }
 .animation {
   composes: modeForward from '~@zohodesk/components/lib/common/animation.module.css';
-}
-[dir=ltr] .animation {
-  animation-duration: 0.4s;
-  -webkit-animation-duration: 0.4s;
-  -moz-animation-duration: 0.4s;
-  -ms-animation-duration: 0.4s;
-}
-[dir=rtl] .animation {
   animation-duration: 0.4s;
   -webkit-animation-duration: 0.4s;
   -moz-animation-duration: 0.4s;
@@ -55,8 +42,8 @@
   composes: animation;
 }
 .leftnoanimate {
-  opacity: 1;
   transform: translateX(0) scale(1);
+  opacity: 1;
 }
 .rightanimate {
   composes: slideRight from '~@zohodesk/components/lib/common/animation.module.css';
@@ -65,20 +52,15 @@
 }
 /* Container Style */
 .message {
+  padding: var(--zd_size10) var(--zd_size20) var(--zd_size10) var(--zd_size76);
+  border-top: 1px solid var(--zd_border_smoke1);
+  cursor: pointer;
   position: relative;
   color: var(--zd_text_smoke18);
   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(--zd_border_smoke1);
-  cursor: pointer;
-}
-[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);
 }
 .message:hover {
   background: var(--zd_bg_alabaster);
@@ -105,7 +87,7 @@
   margin-top: var(--zd_size20);
 }
 .footer {
-  overflow: hidden;
   border-radius: 0 0 var(--zd_size10) var(--zd_size10);
+  overflow: hidden;
 }
   

package/es/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css

@@ -5,27 +5,20 @@
     composes: varClass;
     min-height: var(--zd_size54);
     position: relative;
-    color: var(--zdt_desktopnotification_text);
     background-color: var(--alert_lookup_bg_color);
     border-style: solid;
     border-color: var(--commonalert_border_color);
     border-width: 2px 0 0 0;
+    color: var(--zdt_desktopnotification_text);
   }
   
   .title {
+    margin: 0 var(--zd_size5) 0 var(--zd_size10);
     font-size: var(--zd_font_size18);
     line-height: var(--zd_size22);
     font-family: var(--zd_bold);
     composes: ftsmooth wbreak from '~@zohodesk/components/lib/common/common.module.css';
   }
-  
-  [dir=ltr] .title {
-  margin: 0 var(--zd_size5) 0 var(--zd_size10);
-  }
-  
-  [dir=rtl] .title {
-    margin: 0 var(--zd_size10) 0 var(--zd_size5);
-  }
 
   .infoText {
     font-size: var(--zd_font_size14);
@@ -57,11 +50,8 @@
 
 
 /* Primary Header */
-[dir=ltr] .primary {
-  padding: var(--zd_size15) var(--zd_size45) 0 var(--zd_size20);
-}
-[dir=rtl] .primary {
-    padding: var(--zd_size15) var(--zd_size20) 0 var(--zd_size45);
+.primary {
+    padding: var(--zd_size15) var(--zd_size45) 0 var(--zd_size20);
 }
 
 .primary .iconContainer {
@@ -76,26 +66,14 @@
   .primary .close {
     position: absolute;
     top: var(--zd_size12);
-  }
-  
-  [dir=ltr] .primary .close {
-  right: var(--zd_size12);
-  }
-  
-  [dir=rtl] .primary .close {
-    left: var(--zd_size12);
+    right: var(--zd_size12);
   }
 
   /* Secondary Header */
   .secondary {
-    composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
+    padding: var(--zd_size18) var(--zd_size70) var(--zd_size19) var(--zd_size75);
     border-radius: 0 0 var(--zd_size10) var(--zd_size10);
-  }
-  [dir=ltr] .secondary {
-  padding: var(--zd_size18) var(--zd_size70) var(--zd_size19) var(--zd_size75);
-  }
-  [dir=rtl] .secondary {
-    padding: var(--zd_size18) var(--zd_size75) var(--zd_size19) var(--zd_size70);
+    composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
   }
 
   .secondary .infoText {
@@ -108,30 +86,15 @@
     position: absolute;
     top: 0;
     bottom: 0;
+    left: var(--zd_size18);
     margin: auto 0;
   }
 
-  [dir=ltr] .secondary .iconContainer {
-  left: var(--zd_size18);
-  }
-
-  [dir=rtl] .secondary .iconContainer {
-    right: var(--zd_size18);
-  }
-
   .secondary .close {
     position: absolute;
     top: 0;
     bottom: 0;
+    right: var(--zd_size12);
+    margin: auto 0 auto var(--zd_size25);
     height: var(--zd_size25);
-  }
-
-  [dir=ltr] .secondary .close {
-  right: var(--zd_size12);
-  margin: auto 0 auto var(--zd_size25);
-  }
-
-  [dir=rtl] .secondary .close {
-    left: var(--zd_size12);
-    margin: auto var(--zd_size25) auto 0;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.0.0-temp-39",
+  "version": "1.0.0-temp-43",
   "main": "lib/index",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",
@@ -30,22 +30,20 @@
   "dependencies": {},
   "devDependencies": {
     "velocity-react": "^1.4.3",
-    "@zohodesk/variables": "1.0.0-beta.21",
+    "@zohodesk/variables": "1.0.0-beta.23",
     "@zohodesk/i18n": "^1.0.0-beta.7",
-    "@zoho/SecurityJS": "^5.0.0-rc2.1",
-    "@zohodesk/components": "1.0.0-alpha-192",
-    "@zohodesk/icons": "1.0.0-beta.76",
+    "@zohodesk/components": "1.0.0-alpha-205",
+    "@zohodesk/icons": "1.0.0-beta.85",
     "@zohodesk/svg": "1.0.0-beta.34",
     "@zohodesk/virtualizer": "1.0.3",
     "react-sortable-hoc": "^0.8.3"
   },
   "peerDependencies": {
     "velocity-react": "^1.4.3",
-    "@zohodesk/variables": "^1.0.0-beta.21",
+    "@zohodesk/variables": "^1.0.0-beta.23",
     "@zohodesk/i18n": "^1.0.0-beta.7",
-    "@zoho/SecurityJS": "^5.0.0-rc2.1",
-    "@zohodesk/components": "1.0.0-alpha-192",
-    "@zohodesk/icons": "^1.0.0-beta.76",
+    "@zohodesk/components": "1.0.0-alpha-205",
+    "@zohodesk/icons": "^1.0.0-beta.85",
     "@zohodesk/svg": "^1.0.0-beta.34"
   },
   "react-cli": {

package/src/ActionButton/ActionButton.js

@@ -166,7 +166,7 @@ ActionButton.defaultProps = {
 };
 ActionButton.propTypes = {
   arrowBoxDataId: PropTypes.string,
-  arrowBoxSize: PropTypes.oneOf('small', 'medium'),
+  arrowBoxSize: PropTypes.oneOf(['small', 'medium']),
   children: PropTypes.node,
   className: PropTypes.string,
   dataId: PropTypes.string,
@@ -185,7 +185,7 @@ ActionButton.propTypes = {
   onHover: PropTypes.bool,
   palette: PropTypes.oneOf('primaryFilled', 'primary'),
   removeClose: PropTypes.func,
-  size: PropTypes.oneOf('small', 'medium', 'large'),
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
   subText: PropTypes.string,
   text: PropTypes.string,
   getContainerRef: PropTypes.func,

package/src/AlphabeticList/AlphabeticList.js

@@ -56,7 +56,7 @@ export default class AlphabeticList extends React.PureComponent {
   }
 
   render() {
-    let { selectedCharacter, align, type, i18nKeys } = this.props;
+    let { selectedCharacter, align, type, i18nKeys, dataId } = this.props;
     let { allText = 'All', allTitle = 'All' } = i18nKeys;
     let alignType = align === 'vertical' ? style.column : style.row;
     let letters =
@@ -79,13 +79,13 @@ export default class AlphabeticList extends React.PureComponent {
         <Box
           tagName='li'
           className={`${style.list} ${style.title} ${
-            selectedCharacter === 'ALL' && style.selected
+            selectedCharacter === 'ALL' ? style.selected : ''
           }`}
-          dataId='All_Navi'
+          dataId={`All_${dataId}`}
         >
           <span
             onClick={this.handleSelectAll}
-            className={style.heading}
+            className={`${style.heading} ${style.letter}`}
             data-title={allTitle}
           >
             {allText}
@@ -98,6 +98,7 @@ export default class AlphabeticList extends React.PureComponent {
             onClick={this.handleSelect}
             text={letter}
             key={letter}
+            dataId={dataId}
           />
         ))}
       </Container>
@@ -118,13 +119,15 @@ AlphabeticList.propTypes = {
   i18nKeys: PropTypes.shape({
     allTitle: PropTypes.string,
     allText: PropTypes.string
-  })
+  }),
+  dataId: PropTypes.string
 };
 
 AlphabeticList.defaultProps = {
   align: 'vertical',
   type: 'alphabetical',
-  i18nKeys: {}
+  i18nKeys: {},
+  dataId: 'Navi'
 };
 
 AlphabeticList.docs = {
@@ -143,16 +146,16 @@ class AlphabeticListItem extends React.PureComponent {
   }
 
   render() {
-    let { isActive, text } = this.props;
+    let { isActive, text, dataId } = this.props;
     return (
       <Box
         flexible
         tagName='li'
         className={`${style.list} ${isActive ? style.selected : ''}`}
         onClick={this.handleClick}
-        dataId={`${text}_Navi`}
+        dataId={`${text}_${dataId}`}
       >
-        <span>{text}</span>
+        <span className={style.letter}>{text}</span>
       </Box>
     );
   }
@@ -162,10 +165,12 @@ AlphabeticListItem.propTypes = {
   id: PropTypes.string,
   isActive: PropTypes.bool,
   onClick: PropTypes.func,
-  text: PropTypes.string
+  text: PropTypes.string,
+  dataId: PropTypes.string
 };
 
 AlphabeticListItem.defaultProps = {
   isActive: false,
-  text: ''
+  text: '',
+  dataId: 'Navi'
 };