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

package/es/FreezeLayer/FreezeLayer.js

@@ -16,7 +16,6 @@ export default class FreezeLayer extends Component {
     this.getNextIndex = getZIndex(this);
     this.isFreezeLayerEnabled = false;
   }
-
   enableFreeze() {
     if (!this.isFreezeLayerEnabled) {
       this.isFreezeLayerEnabled = true;
@@ -24,7 +23,6 @@ export default class FreezeLayer extends Component {
       freezeLayerEnable && freezeLayerEnable();
     }
   }
-
   disableFreeze() {
     if (this.isFreezeLayerEnabled) {
       this.isFreezeLayerEnabled = false;
@@ -32,12 +30,10 @@ export default class FreezeLayer extends Component {
       freezeLayerDisable && freezeLayerDisable();
     }
   }
-
   componentDidMount() {
     let {
       isActive
     } = this.props;
-
     if (isActive) {
       this.setState({
         isChildActive: true
@@ -45,12 +41,10 @@ export default class FreezeLayer extends Component {
       this.enableFreeze();
     }
   }
-
   componentDidUpdate(prevProps) {
     let {
       isActive
     } = this.props;
-
     if (isActive != prevProps.isActive) {
       if (isActive) {
         this.enableFreeze();
@@ -73,11 +67,9 @@ export default class FreezeLayer extends Component {
       }
     }
   }
-
   componentWillUnmount() {
     this.disableFreeze();
   }
-
   render() {
     let {
       children,
@@ -124,11 +116,9 @@ export default class FreezeLayer extends Component {
       dataId: "reactFreezeLayer"
     }, children))));
   }
-
 }
 FreezeLayer.propTypes = propTypes;
 FreezeLayer.defaultProps = defaultProps;
-
 if (false) {
   FreezeLayer.docs = {
     componentGroup: 'Atom',

package/es/FreezeLayer/FreezeLayer.module.css

@@ -1,10 +1,14 @@
 .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/FreezeLayer/docs/FreezeLayer__dark.docs.js

@@ -9,13 +9,11 @@ export default class FreezeLayer__dark extends Component {
     };
     this.toggle = this.toggle.bind(this);
   }
-
   toggle() {
     this.setState({
       view: !this.state.view
     });
   }
-
   render() {
     let {
       view
@@ -41,9 +39,7 @@ export default class FreezeLayer__dark extends Component {
       }
     }, "Im children")));
   }
-
 }
-
 if (false) {
   FreezeLayer__dark.docs = {
     componentGroup: 'Atom'

package/es/FreezeLayer/docs/FreezeLayer__default.docs.js

@@ -9,13 +9,11 @@ export default class FreezeLayer__default extends Component {
     };
     this.toggle = this.toggle.bind(this);
   }
-
   toggle() {
     this.setState({
       view: !this.state.view
     });
   }
-
   render() {
     let {
       view
@@ -38,9 +36,7 @@ export default class FreezeLayer__default extends Component {
       }
     }, "Im children")));
   }
-
 }
-
 if (false) {
   FreezeLayer__default.docs = {
     componentGroup: 'Atom'

package/es/IconButton/IconButton.js

@@ -18,7 +18,6 @@ export default class IconButton extends React.Component {
     this.triggerMouseOver = this.triggerMouseOver.bind(this);
     this.onBlur = this.onBlur.bind(this);
   }
-
   handleToggle(e) {
     if (e.key === ' ' || e.key === 'Enter' || e.key === 'Spacebar') {
       e.preventDefault();
@@ -26,7 +25,6 @@ export default class IconButton extends React.Component {
       this.triggerMouseDown(e);
     }
   }
-
   triggerClick(e) {
     let {
       onClick,
@@ -36,7 +34,6 @@ export default class IconButton extends React.Component {
       isPressed: true
     })) : null;
   }
-
   triggerMouseOver(e) {
     let {
       onMouseOver,
@@ -46,7 +43,6 @@ export default class IconButton extends React.Component {
       isPressed: true
     })) : null;
   }
-
   triggerMouseDown(e) {
     let {
       onMouseDown,
@@ -56,7 +52,6 @@ export default class IconButton extends React.Component {
       isPressed: true
     })) : null;
   }
-
   onBlur(e) {
     let {
       isDisabled
@@ -65,7 +60,6 @@ export default class IconButton extends React.Component {
       isPressed: false
     }) : null;
   }
-
   render() {
     let {
       palette,
@@ -134,11 +128,9 @@ export default class IconButton extends React.Component {
       iconClass: iconClass
     }) : null, children ? children : null));
   }
-
 }
 IconButton.propTypes = propTypes;
 IconButton.defaultProps = defaultProps;
-
 if (false) {
   IconButton.docs = {
     componentGroup: 'Atom'

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/IconButton/docs/IconButton__default.docs.js

@@ -209,9 +209,7 @@ export default class IconButton__default extends Component {
       title: "primaryFilled"
     }))));
   }
-
 }
-
 if (false) {
   IconButton__default.docs = {
     componentGroup: 'Atom'

package/es/Image/Image.js

@@ -28,11 +28,9 @@ export default class Image extends React.Component {
       "data-original": original
     });
   }
-
 }
 Image.propTypes = propTypes;
 Image.defaultProps = defaultProps;
-
 if (false) {
   Image.docs = {
     componentGroup: 'Atom'

package/es/Image/docs/Image__default.docs.js

@@ -12,9 +12,7 @@ export default class Image__default extends Component {
       src: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg"
     }));
   }
-
 }
-
 if (false) {
   Image__default.docs = {
     componentGroup: 'Atom'

package/es/ImportantNotes/ImportantNotes.js

@@ -8,7 +8,6 @@ export default class ImportantNotes extends React.Component {
   constructor(props) {
     super(props);
   }
-
   render() {
     let {
       text,
@@ -37,11 +36,9 @@ export default class ImportantNotes extends React.Component {
       className: style.title
     }, text, children ? children : null) : null);
   }
-
 }
 ImportantNotes.propTypes = propTypes;
 ImportantNotes.defaultProps = defaultProps;
-
 if (false) {
   ImportantNotes.docs = {
     componentGroup: 'Common',

package/es/ImportantNotes/ImportantNotes.module.css

@@ -8,8 +8,13 @@
   color: var(--zdt_importantnotes_title_text);
 }
 .icon {
-  margin-top: var(--zd_size1);
-  margin-right: var(--zd_size5);
   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);
 }

package/es/ImportantNotes/docs/ImportantNotes__default.docs.js

@@ -5,15 +5,12 @@ export default class ImportantNotes__default extends React.Component {
   constructor(props) {
     super(props);
   }
-
   render() {
     return /*#__PURE__*/React.createElement(ImportantNotes, {
       text: "Forwarded threads are always marked as private regardless of this setting.Forwarded threads are always marked as private regardless of this setting.Forwarded threads are always marked as private regardless of this setting.Forwarded threads are always marked as private regardless of this setting.Forwarded threads are always marked as private regardless of this setting."
     }, "Children");
   }
-
 }
-
 if (false) {
   ImportantNotes__default.docs = {
     componentGroup: 'Common',

package/es/Link/Link.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 from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -10,7 +9,6 @@ export default class Link extends React.Component {
     super(props, context);
     this.onCallBack = this.onCallBack.bind(this);
   }
-
   onCallBack(urlOutput, href, e) {
     let {
       onClick,
@@ -20,33 +18,25 @@ export default class Link extends React.Component {
     let {
       onCallBack
     } = this.context.options;
-
     if (e && (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)) {
       e && e.stopPropagation();
       return;
     }
-
     onClick && onClick(e);
-
     if (!hasReload && target != '_blank') {
       e && e.preventDefault();
     }
-
     e && e.stopPropagation();
     !onClick && onCallBack && onCallBack(urlOutput, href, e);
   }
-
   addHttp(url) {
     /* eslint-disable */
     if (!/^(f|ht)tps?:\/\//i.test(url)) {
       url = 'http://' + url;
     }
     /* eslint-enable */
-
-
     return url;
   }
-
   render() {
     let {
       children,
@@ -67,17 +57,16 @@ export default class Link extends React.Component {
     } = this.context.options;
     let urlOutput = href ? href : constructURL(urlName, urlData);
     let option = {};
-
     if (download) {
       option.download = true;
     }
-
     let ignoreKeys = ['children', 'href', 'target', 'urlData', 'urlName', 'className', 'title', 'download', 'rel', 'dataId', 'hasReload', 'customProps', 'option'];
     let others = Object.keys(this.props).filter(key => ignoreKeys.indexOf(key) == -1).reduce((res, key) => {
       res[key] = this.props[key];
       return res;
-    }, {}); //urlOutput = this.addHttp(urlOutput);
+    }, {});
 
+    //urlOutput = this.addHttp(urlOutput);
     return /*#__PURE__*/React.createElement("a", _extends({
       href: isLink && urlOutput ? urlOutput : 'javascript:void(0);',
       target: target,
@@ -90,12 +79,10 @@ export default class Link extends React.Component {
       onClick: this.onCallBack.bind(this, urlOutput, href)
     }, customProps), children);
   }
-
 }
 Link.contextType = LinkContext;
 Link.defaultProps = defaultProps;
 Link.propTypes = propTypes;
-
 if (false) {
   Link.docs = {
     componentGroup: 'Atom'

package/es/Link/docs/Link__default.docs.js

@@ -6,15 +6,12 @@ export default class Link__default extends React.Component {
     this.onCallBack = this.onCallBack.bind(this);
     this.onConcertURL = this.onConcertURL.bind(this);
   }
-
   onCallBack(value) {
     console.log(value);
   }
-
   onConcertURL(name, obj) {
     console.log(name, obj, 'onConcertURL');
   }
-
   render() {
     let style = {
       width: '200px',
@@ -29,7 +26,6 @@ export default class Link__default extends React.Component {
       rel: "noopener noreferrer"
     }, "Activities")));
   }
-
 }
 Link__default.docs = {
   componentGroup: 'Atom'

package/es/Loader/Loader.js

@@ -6,7 +6,6 @@ export default class Loader extends React.Component {
     super(props);
     this.getNextIndex = getZIndex(this);
   }
-
   render() {
     return /*#__PURE__*/React.createElement("div", {
       className: style.ajaxLoader,
@@ -17,9 +16,7 @@ export default class Loader extends React.Component {
       className: style.loader
     }));
   }
-
 }
-
 if (false) {
   Loader.docs = {
     componentGroup: 'Atom'

package/es/Loader/Loader.module.css

@@ -1,21 +1,33 @@
 .ajaxLoader {
   position: absolute;
   top: 0;
+}[dir=ltr] .ajaxLoader {
   left: 0;
   right: 0;
+}[dir=rtl] .ajaxLoader {
+  right: 0;
+  left: 0;
 }
 .loader {
-  background-image: var(--zdt_loader_gradient_bg);
   width: 100%;
+  height: 3px;
+  background-image: var(--zdt_loader_gradient_bg);
   background-size: 200% auto;
+}
+[dir=ltr] .loader {
   background-position: 0 100%;
-  animation: loading 3s infinite;
+  animation:  loading-ltr 3s infinite;
+  animation-fill-mode: forwards;
+  animation-timing-function: linear;
+}
+[dir=rtl] .loader {
+  background-position: 100% 100%;
+  animation:  loading-rtl 3s infinite;
   animation-fill-mode: forwards;
   animation-timing-function: linear;
-  height: 3px;
 }
 
-@keyframes loading {
+@keyframes loading-ltr {
   0% {
     background-position: 0 0;
   }
@@ -23,3 +35,12 @@
     background-position: -200% 0;
   }
 }
+
+@keyframes loading-rtl {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 300% 0;
+  }
+}

package/es/Loader/docs/Loader__default.docs.js

@@ -4,7 +4,6 @@ export default class Loader__default extends React.Component {
   constructor(props) {
     super(props);
   }
-
   render() {
     return /*#__PURE__*/React.createElement("div", {
       style: {
@@ -13,9 +12,7 @@ export default class Loader__default extends React.Component {
       }
     }, /*#__PURE__*/React.createElement(Loader, null));
   }
-
 }
-
 if (false) {
   Loader__default.docs = {
     componentGroup: 'Atom'

package/es/Message/Message.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 from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -13,13 +12,11 @@ export default class Message extends React.Component {
       hideMessage: false
     };
   }
-
   componentWillReceiveProps(nextProps) {
     let {
       showMessage,
       hideMessage
     } = this.props;
-
     if (showMessage !== nextProps.showMessage) {
       if (nextProps.type != 'alert') {
         setTimeout(() => {
@@ -28,34 +25,28 @@ export default class Message extends React.Component {
       }
     }
   }
-
   componentDidMount() {
     let {
       type,
       hideMessage
     } = this.props;
-
     if (type != 'alert') {
       setTimeout(() => {
         hideMessage();
       }, 3000);
     }
   }
-
   render() {
     return /*#__PURE__*/React.createElement(MessageUI, this.props);
   }
-
 }
 Message.propTypes = propTypes;
 Message.defaultProps = defaultProps;
-
 if (false) {
   Message.docs = {
     componentGroup: 'Atom'
   };
 }
-
 export function MessageUI(props) {
   function onClose(e) {
     let {
@@ -65,7 +56,6 @@ export function MessageUI(props) {
     hideMessage && hideMessage(e);
     onClose && onClose(e);
   }
-
   let {
     type,
     message,

package/es/Message/Message.module.css

@@ -3,20 +3,31 @@
   top: 0;
   z-index: 1000;
   /*Hook for editor alert*/
-  right: 0;
+  pointer-events: none;
   text-align: center;
+}[dir=ltr] .message {
+  right: 0;
   left: 0;
-  pointer-events: none;
+}[dir=rtl] .message {
+  left: 0;
+  right: 0;
 }
 
 .container {
-  padding: var(--zd_size13) var(--zd_size10) var(--zd_size13) var(--zd_size50);
-  box-shadow: 0 0 19px 1px var(--zdt_message_default_box_shadow);
-  border-radius: 0 0 5px 5px;
   position: relative;
-  background: var(--zdt_message_default_bg);
   display: inline-block;
   pointer-events: initial;
+  box-shadow: 0 0 19px 1px var(--zdt_message_default_box_shadow);
+  border-radius: 0 0 5px 5px;
+  background: var(--zdt_message_default_bg);
+}
+
+[dir=ltr] .container {
+  padding: var(--zd_size13) var(--zd_size10) var(--zd_size13) var(--zd_size50);
+}
+
+[dir=rtl] .container {
+  padding: var(--zd_size13) var(--zd_size50) var(--zd_size13) var(--zd_size10);
 }
 
 .text {
@@ -25,19 +36,34 @@
   word-break: break-word;
   font-size: var(--zd_font_size14);
   vertical-align: middle;
+}
+
+[dir=ltr] .text {
   text-align: left;
 }
 
+[dir=rtl] .text {
+  text-align: right;
+}
+
 .icon {
   position: absolute;
-  left: 0;
   top: 0;
   width: var(--zd_size40);
   display: inline-block;
-  border-bottom-left-radius: 5px;
   height: 100%;
 }
 
+[dir=ltr] .icon {
+  left: 0;
+  border-bottom-left-radius: 5px;
+}
+
+[dir=rtl] .icon {
+  right: 0;
+  border-bottom-right-radius: 5px;
+}
+
 .success {
   composes: icon;
   background: var(--zdt_message_success_bg);
@@ -63,8 +89,15 @@
 .close {
   color: var(--zdt_message_close_text);
   font-size: var(--zd_font_size16);
-  cursor: pointer;
   display: inline-block;
   vertical-align: middle;
+  cursor: pointer;
+}
+
+[dir=ltr] .close {
   margin-left: var(--zd_size10);
+}
+
+[dir=rtl] .close {
+  margin-right: var(--zd_size10);
 }

package/es/Message/docs/Message__default.docs.js

@@ -4,7 +4,6 @@ export default class Message__default extends React.Component {
   constructor(props) {
     super(props);
   }
-
   render() {
     let style = {
       position: 'relative',
@@ -45,9 +44,7 @@ export default class Message__default extends React.Component {
       hideMessage: () => {}
     })));
   }
-
 }
-
 if (false) {
   Message__default.docs = {
     componentGroup: 'Atom'

package/es/MessageBanner/MessageBanner.js

@@ -49,11 +49,9 @@ export default class MessageBanner extends React.Component {
       size: "35"
     }))) : null);
   }
-
 }
 MessageBanner.defaultProps = defaultProps;
 MessageBanner.propTypes = propTypes;
-
 if (false) {
   MessageBanner.docs = {
     componentGroup: 'Atom'