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

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

@@ -11,13 +11,11 @@ export default class UnableToProcessRequest extends React.Component {
     super(props);
     this.errorUnableToProcess = this.errorUnableToProcess.bind(this);
   }
-
   errorUnableToProcess() {
     return /*#__PURE__*/React.createElement(ErrorUnableToProcessRequest, {
       className: style.errorSvg
     });
   }
-
   render() {
     let {
       title,
@@ -61,11 +59,9 @@ export default class UnableToProcessRequest extends React.Component {
       onClick: onButtonClick
     }) : null));
   }
-
 }
 UnableToProcessRequest.propTypes = propTypes;
 UnableToProcessRequest.defaultProps = defaultProps;
-
 if (false) {
   UnableToProcessRequest.docs = {
     componentGroup: 'errorStates'

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

@@ -6,11 +6,9 @@ export default class UnableToProcessRequest__default extends React.Component {
     super(props);
     this.clickButton = this.clickButton.bind(this);
   }
-
   clickButton() {
     console.log('Button clicked!');
   }
-
   render() {
     return /*#__PURE__*/React.createElement(UnableToProcessRequest, {
       title: "Something went wrong.",
@@ -20,9 +18,7 @@ export default class UnableToProcessRequest__default extends React.Component {
       onButtonClick: this.clickButton
     });
   }
-
 }
-
 if (false) {
   UnableToProcessRequest__default.docs = {
     componentGroup: 'errorStates'

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

@@ -11,13 +11,11 @@ export default class UnauthorizedLogin extends React.Component {
     super(props);
     this.errorUnauthorizedLogin = this.errorUnauthorizedLogin.bind(this);
   }
-
   errorUnauthorizedLogin() {
     return /*#__PURE__*/React.createElement(ErrorUnauthorizedLogin, {
       className: style.errorSvg
     });
   }
-
   render() {
     let {
       title,
@@ -63,11 +61,9 @@ export default class UnauthorizedLogin extends React.Component {
       dataId: `${dataId}_button`
     }) : null));
   }
-
 }
 UnauthorizedLogin.propTypes = propTypes;
 UnauthorizedLogin.defaultProps = defaultProps;
-
 if (false) {
   UnauthorizedLogin.docs = {
     componentGroup: 'errorStates'

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

@@ -8,9 +8,7 @@ export default class UnauthorizedLogin__default extends React.Component {
       description: "You do not have sufficient permissions to perform this operation. Contact your administrator."
     });
   }
-
 }
-
 if (false) {
   UnauthorizedLogin__default.docs = {
     componentGroup: 'errorStates'

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

@@ -11,13 +11,11 @@ export default class UrlNotFound extends React.Component {
     super(props);
     this.errorUrlNotFound = this.errorUrlNotFound.bind(this);
   }
-
   errorUrlNotFound() {
     return /*#__PURE__*/React.createElement(ErrorUrlNotFound, {
       className: style.errorSvg
     });
   }
-
   render() {
     let {
       title,
@@ -61,11 +59,9 @@ export default class UrlNotFound extends React.Component {
       onClick: onButtonClick
     }) : null));
   }
-
 }
 UrlNotFound.propTypes = propTypes;
 UrlNotFound.defaultProps = defaultProps;
-
 if (false) {
   UrlNotFound.docs = {
     componentGroup: 'errorStates'

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

@@ -10,9 +10,7 @@ export default class UrlNotFound__default extends React.Component {
       buttonText: "Go to Home Page"
     });
   }
-
 }
-
 if (false) {
   UrlNotFound__default.docs = {
     componentGroup: 'errorStates'

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

@@ -11,13 +11,11 @@ export default class WillBeRightBack extends React.Component {
     super(props);
     this.errorWillBeRightBack = this.errorWillBeRightBack.bind(this);
   }
-
   errorWillBeRightBack() {
     return /*#__PURE__*/React.createElement(ErrorWillBeRightBack, {
       className: style.errorSvg
     });
   }
-
   render() {
     let {
       title,
@@ -61,11 +59,9 @@ export default class WillBeRightBack extends React.Component {
       onClick: onButtonClick
     }) : null));
   }
-
 }
 WillBeRightBack.propTypes = propTypes;
 WillBeRightBack.defaultProps = defaultProps;
-
 if (false) {
   WillBeRightBack.docs = {
     componentGroup: 'errorStates'

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

@@ -8,9 +8,7 @@ export default class WillBeRightBack__default extends React.Component {
       description: "We're currently experiencing some technical issues which our developers are working hard to resolve. We apologize for any inconvenience."
     });
   }
-
 }
-
 if (false) {
   WillBeRightBack__default.docs = {
     componentGroup: 'errorStates'

package/es/version2/lookup/AlertHeader/AlertHeader.js

@@ -51,11 +51,9 @@ export default class AlertHeader extends Component {
       type: "light"
     })) : null);
   }
-
 }
 AlertHeader.propTypes = propTypes;
 AlertHeader.defaultProps = defaultProps;
-
 if (false) {
   AlertHeader.docs = {
     componentGroup: 'AlertHeader',

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

@@ -11,8 +11,13 @@
 }
 .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);
@@ -34,10 +39,14 @@
   --commonalert_border_color: var(--zdt_commonalert_warning_border);
 }
 
-.extraSmall {
+[dir=ltr] .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);
@@ -45,7 +54,6 @@
 
 .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);
@@ -53,6 +61,14 @@
   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;
 }
@@ -60,5 +76,12 @@
 .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/AlertHeader/docs/AlertHeader__default.docs.js

@@ -4,7 +4,6 @@ export default class AlertHeader__default extends Component {
   constructor(props) {
     super(props);
   }
-
   render() {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AlertHeader, {
       title: "Delete",
@@ -45,9 +44,7 @@ export default class AlertHeader__default extends Component {
       iconSize: "14"
     }, "[SecondaryName]"));
   }
-
 }
-
 if (false) {
   AlertHeader__default.docs = {
     componentGroup: 'AlertHeader',

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

@@ -1,11 +1,10 @@
-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); }
 /**** Libraries ****/
 import React, { Component } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-/**** Components ****/
 
+/**** Components ****/
 import Lookup from '../../../lookup/Lookup/Lookup';
 import AlertHeader from '../AlertHeader/AlertHeader';
 import Button from '@zohodesk/components/lib/Button/Button';
@@ -13,8 +12,8 @@ import Section from '../../../lookup/Section/Section';
 import FormAction from '../../../FormAction/FormAction';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
-/**** CSS ****/
 
+/**** CSS ****/
 import style from './AlertLookupNew.module.css';
 let buttonPaletteObject = {
   success: {
@@ -43,21 +42,25 @@ export default class AlertLookup extends Component {
     this.documentKeydownHandler = this.documentKeydownHandler.bind(this);
     this.getButtonRef = this.getButtonRef.bind(this);
   }
-
+  componentDidMount() {
+    let {
+      isActive
+    } = this.props;
+    if (isActive) {
+      document.addEventListener('keydown', this.documentKeydownHandler);
+    }
+  }
   componentDidUpdate(prevProps) {
     let {
       isActive
     } = this.props;
-
     if (prevProps.isActive !== isActive) {
       isActive ? document.addEventListener('keydown', this.documentKeydownHandler) : document.removeEventListener('keydown', this.documentKeydownHandler);
     }
   }
-
   componentWillUnmount() {
     document.removeEventListener('keydown', this.documentKeydownHandler);
   }
-
   documentKeydownHandler() {
     let e = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     let {
@@ -67,7 +70,6 @@ export default class AlertLookup extends Component {
       onEsc,
       onClose
     } = this.props;
-
     if (e.keyCode === 27 && isActive) {
       e && e.preventDefault && e.preventDefault();
       onEsc == 'close' ? onClose && onClose(e) : onCancelClick && onCancelClick(e);
@@ -76,13 +78,11 @@ export default class AlertLookup extends Component {
       onSubmitClick && onSubmitClick(e);
     }
   }
-
   getButtonRef(el) {
     this.okButton = el;
     let {
       isDefaultFocus
     } = this.props;
-
     if (isDefaultFocus) {
       // el && el.focus();
       setTimeout(() => {
@@ -90,7 +90,6 @@ export default class AlertLookup extends Component {
       }, 100);
     }
   }
-
   render() {
     let {
       isActive,
@@ -196,11 +195,9 @@ export default class AlertLookup extends Component {
       palette: "secondary"
     }, SecondaryButtonProps))))) : null))));
   }
-
 }
 AlertLookup.propTypes = propTypes;
 AlertLookup.defaultProps = defaultProps;
-
 if (false) {
   AlertLookup.docs = {
     componentGroup: 'AlertLookup',

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

@@ -3,17 +3,21 @@
 }
 
 .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);
 }
 
-.buttonGap {
+[dir=ltr] .buttonGap {
   margin: 0 0 0 var(--zd_size12);
 }
 
+[dir=rtl] .buttonGap {
+  margin: 0 var(--zd_size12) 0 0;
+}
+
 .confirmMsgText {
   margin-top: var(--zd_size20);
 }
@@ -23,8 +27,8 @@
 }
 
 .footer {
-  border-radius: 0 0 var(--zd_size10) var(--zd_size10);
   overflow: hidden;
+  border-radius: 0 0 var(--zd_size10) var(--zd_size10);
 }
 .horizontalScroll, .verticalScroll, .bothScroll {
   height: 100%;

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

@@ -11,31 +11,26 @@ export default class AlertLookup__default extends Component {
     this.onClose = this.onClose.bind(this);
     this.headerChildren = this.headerChildren.bind(this);
   }
-
   lookupOpen(lookup) {
     this.setState({
       lookup: lookup
     });
   }
-
   onCancel() {
     console.log('from cancel');
     this.setState({
       lookup: false
     });
   }
-
   onClose() {
     console.log('from close');
     this.setState({
       lookup: false
     });
   }
-
   headerChildren() {
     return /*#__PURE__*/React.createElement("div", null, "Custom");
   }
-
   render() {
     let {
       lookup
@@ -146,9 +141,7 @@ export default class AlertLookup__default extends Component {
       scroll: "vertical"
     }));
   }
-
 }
-
 if (false) {
   AlertLookup__default.docs = {
     componentGroup: 'AlertLookup',

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

@@ -2,9 +2,16 @@
 
 .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);
@@ -20,7 +27,7 @@
     font-size: var(--zd_font_size12);
     /* 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.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, { useState } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -73,15 +72,12 @@ export function DesktopNotificationUI(props) {
   let {
     ExtraProps = {}
   } = customProps;
-
   function onClickSubmit(e) {
     onSubmit && onSubmit();
   }
-
   function onClickCancel(e) {
     onCancel && onCancel();
   }
-
   let animateClass = isClose ? style.rightanimate : style.leftanimate;
   let animateRemoveClass = isClose ? style.rightanimate : style.leftnoanimate;
   let getNextIndex = useZIndex();
@@ -154,7 +150,6 @@ export default function DesktopNotification(props) {
 }
 DesktopNotification.propTypes = propTypes;
 DesktopNotification.defaultProps = defaultProps;
-
 if (false) {
   DesktopNotification.docs = {
     componentGroup: 'DesktopNotification',

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

@@ -1,17 +1,22 @@
 .parentElement {
-  margin-bottom: var(--zd_size7);
   position: relative;
+  margin-bottom: var(--zd_size7);
 }
 .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);
-  pointer-events: auto;
+}
+[dir=ltr] .container {
+  transform-origin: right center;
+}
+[dir=rtl] .container {
+  transform-origin: left center;
 }
 .globalNotify {
   max-width: var(--zd_size490);
@@ -27,11 +32,17 @@
 /* Animation Style */
 .closeAnimation {
   max-height: 0;
-  margin-bottom: 0;
   transition: all var(--zd_transition3) 0.4s;
+  margin-bottom: 0;
 }
 .animation {
   composes: modeForward from '~@zohodesk/components/lib/common/animation.module.css';
+}
+[dir=ltr] .animation {
+  animation-duration: var(--zd_transition4);
+  -webkit-animation-duration: var(--zd_transition4);
+}
+[dir=rtl] .animation {
   animation-duration: var(--zd_transition4);
   -webkit-animation-duration: var(--zd_transition4);
 }
@@ -40,8 +51,8 @@
   composes: animation;
 }
 .leftnoanimate {
-  transform: translateX(0) scale(1);
   opacity: 1;
+  transform: translateX(0) scale(1);
 }
 .rightanimate {
   composes: slideRight from '~@zohodesk/components/lib/common/animation.module.css';
@@ -50,15 +61,20 @@
 }
 /* Container Style */
 .message {
-  padding: var(--zd_size10) var(--zd_size20) var(--zd_size10) var(--zd_size76);
-  border-top: 1px solid var(--zd_smoke1);
-  cursor: pointer;
   position: relative;
   color: var(--zd_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_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_alabaster);
@@ -85,6 +101,6 @@
   margin-top: var(--zd_size20);
 }
 .footer {
-  border-radius: 0 0 var(--zd_size10) var(--zd_size10);
   overflow: hidden;
+  border-radius: 0 0 var(--zd_size10) var(--zd_size10);
 }

package/es/version2/notification/DesktopNotification/docs/DesktopNotification__default.docs.js

@@ -5,7 +5,6 @@ export default class DesktopNotification__default extends Component {
   constructor(props) {
     super(props);
   }
-
   render() {
     return /*#__PURE__*/React.createElement("div", {
       className: style.m50
@@ -81,9 +80,7 @@ export default class DesktopNotification__default extends Component {
       isShrinkView: true
     })));
   }
-
 }
-
 if (false) {
   DesktopNotification__default.docs = {
     componentGroup: 'DesktopNotification',

package/es/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.js

@@ -9,7 +9,6 @@ export default class DesktopNotificationHeader extends Component {
   constructor(props) {
     super(props);
   }
-
   render() {
     let {
       onClose,
@@ -50,11 +49,9 @@ export default class DesktopNotificationHeader extends Component {
       type: "light"
     })) : null);
   }
-
 }
 DesktopNotificationHeader.propTypes = propTypes;
 DesktopNotificationHeader.defaultProps = defaultProps;
-
 if (false) {
   DesktopNotificationHeader.docs = {
     componentGroup: 'DesktopNotificationHeader',