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

package/es/list/Icons/CompleteIcon.js

@@ -1,5 +1,3 @@
-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); }
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import Icon from '@zohodesk/icons/lib/Icon';
@@ -12,18 +10,14 @@ export default class CompleteIcon extends React.Component {
       dataTitle,
       iconClass,
       className,
-      iconSize,
-      customProps
+      iconSize
     } = this.props;
-    let {
-      CompleteIconProps
-    } = customProps;
-    return /*#__PURE__*/React.createElement("span", _extends({
+    return /*#__PURE__*/React.createElement("span", {
       onClick: onClick,
       className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
       "data-id": dataId,
       "data-title": dataTitle
-    }, CompleteIconProps), /*#__PURE__*/React.createElement(Icon, {
+    }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-GN-checkbox",
       iconClass: iconClass ? iconClass : '',
       size: iconSize
@@ -37,8 +31,5 @@ CompleteIcon.propTypes = {
   dataTitle: PropTypes.string,
   iconClass: PropTypes.string,
   iconSize: PropTypes.string,
-  onClick: PropTypes.func,
-  customProps: PropTypes.shape({
-    CompleteIcon: PropTypes.object
-  })
+  onClick: PropTypes.func
 };

package/es/list/Icons/DeleteIcon.js

@@ -1,5 +1,3 @@
-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); }
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import style from './Icons.module.css';
@@ -12,18 +10,14 @@ export default class DeleteComponent extends React.Component {
       dataTitle,
       iconClass,
       iconSize,
-      className,
-      customProps
+      className
     } = this.props;
-    let {
-      DeleteIconProps
-    } = customProps;
-    return /*#__PURE__*/React.createElement("span", _extends({
+    return /*#__PURE__*/React.createElement("span", {
       onClick: onClick,
       className: `${style.iconStyle} ${style.redHover} ${className ? className : ''}`,
       "data-id": dataId,
       "data-title": dataTitle
-    }, DeleteIconProps), /*#__PURE__*/React.createElement(Icon, {
+    }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-GN-delete",
       iconClass: iconClass ? iconClass : '',
       size: iconSize
@@ -37,8 +31,5 @@ DeleteComponent.propTypes = {
   dataTitle: PropTypes.string,
   iconClass: PropTypes.string,
   iconSize: PropTypes.string,
-  onClick: PropTypes.func,
-  customProps: PropTypes.shape({
-    DeleteIconProps: PropTypes.object
-  })
+  onClick: PropTypes.func
 };

package/es/list/Icons/EditIcon.js

@@ -1,5 +1,3 @@
-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); }
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import style from './Icons.module.css';
@@ -12,18 +10,14 @@ export default class EditIcon extends React.Component {
       dataTitle,
       iconClass,
       iconSize,
-      className,
-      customProps
+      className
     } = this.props;
-    let {
-      EditIconProps
-    } = customProps;
-    return /*#__PURE__*/React.createElement("span", _extends({
+    return /*#__PURE__*/React.createElement("span", {
       onClick: onClick,
       className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
       "data-id": dataId,
       "data-title": dataTitle
-    }, EditIconProps), /*#__PURE__*/React.createElement(Icon, {
+    }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-GN-edit",
       iconClass: iconClass ? iconClass : '',
       size: iconSize
@@ -37,8 +31,5 @@ EditIcon.propTypes = {
   dataTitle: PropTypes.string,
   iconClass: PropTypes.string,
   iconSize: PropTypes.string,
-  onClick: PropTypes.func,
-  customProps: PropTypes.shape({
-    EditIconProps: PropTypes.object
-  })
+  onClick: PropTypes.func
 };

package/es/list/Icons/Icons.module.css

@@ -4,8 +4,8 @@
 }
 .iconStyle {
   color: var(--zdt_icons_default);
-  width: var(--zd_size33);
   padding: 0 var(--zd_size8);
+  width: var(--zd_size33);
   cursor: pointer;
 }
 .blueHover:hover {

package/es/list/Icons/ReadUnreadIcon.js

@@ -1,5 +1,3 @@
-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); }
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import Icon from '@zohodesk/icons/lib/Icon';
@@ -14,18 +12,14 @@ export default class ReadUnreadIcon extends React.Component {
       iconClass,
       className,
       isRead,
-      iconSize,
-      customProps
+      iconSize
     } = this.props;
-    let {
-      ReadUnreadIconProps
-    } = customProps;
-    return /*#__PURE__*/React.createElement("span", _extends({
+    return /*#__PURE__*/React.createElement("span", {
       onClick: onClick,
       className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
       "data-id": dataId,
       "data-title": dataTitle
-    }, ReadUnreadIconProps), /*#__PURE__*/React.createElement(Icon, {
+    }, /*#__PURE__*/React.createElement(Icon, {
       name: isRead ? 'ZD-GN-read' : 'ZD-GN-unread',
       size: iconSize,
       iconClass: `${iconClassName ? iconClassName : ''} ${iconClass ? iconClass : ''}`

package/es/list/Icons/SmartIcon.js

@@ -1,5 +1,3 @@
-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); }
-
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import style from './Icons.module.css';
@@ -11,18 +9,14 @@ export default class SmartIcon extends Component {
       dataId,
       dataTitle,
       iconClass,
-      className,
-      customProps
+      className
     } = this.props;
-    let {
-      PeekIconProps
-    } = customProps;
-    return /*#__PURE__*/React.createElement("span", _extends({
+    return /*#__PURE__*/React.createElement("span", {
       onClick: onClick,
       className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
       "data-id": dataId,
       "data-title": dataTitle
-    }, PeekIconProps), /*#__PURE__*/React.createElement(Icon, {
+    }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-TK-peek",
       iconClass: iconClass ? iconClass : ''
     }));
@@ -36,8 +30,5 @@ SmartIcon.propTypes = {
   features: PropTypes.array,
   iconClass: PropTypes.string,
   module: PropTypes.string,
-  onClick: PropTypes.func,
-  customProps: PropTypes.shape({
-    PeekIconProps: PropTypes.object
-  })
+  onClick: PropTypes.func
 };

package/es/list/ListLayout/ListLayout.module.css

@@ -8,7 +8,8 @@
 .listHover:hover, .hoveredStyle{
   background-color: var(--zdt_listLayout_hover_bg);
 }
-.active, .active:hover {
+.active,
+.active:hover {
   background-color: var(--zdt_listLayout_active_bg);
 }
 .cursorPointer{
@@ -16,43 +17,34 @@
 }
 /* View */
 .classic .innerContainer {
-  min-height: var(--zd_size70);
   padding: var(--zd_size13) 0;
+  min-height: var(--zd_size70);
 }
 .compact .innerContainer {
-  min-height: var(--zd_size41);
   padding: var(--zd_size5) 0;
+  min-height: var(--zd_size41);
 }
 .superCompact .innerContainer {
-  min-height: var(--zd_size35);
   padding: var(--zd_size2) 0;
+  min-height: var(--zd_size35);
 }
-.compact .innerContainer, .classic .innerContainer, .superCompact .innerContainer {
+.compact .innerContainer,
+.classic .innerContainer,
+.superCompact .innerContainer {
   border-bottom: 1px dotted var(--listBorder);
 }
-[dir=ltr] .compact, [dir=ltr] .classic, [dir=ltr] .superCompact {
+.compact,
+.classic,
+.superCompact {
   border-left: var(--zd_size2) solid transparent;
 }
-[dir=rtl] .compact, [dir=rtl] .classic, [dir=rtl] .superCompact {
-  border-right: var(--zd_size2) solid transparent;
-}
-[dir=ltr] .keyboardActive, [dir=ltr] .active{
+.keyboardActive, .active{
   border-top-left-radius: var(--zd_size5);
   border-bottom-left-radius: var(--zd_size5);
 }
-[dir=rtl] .keyboardActive, [dir=rtl] .active{
-  border-top-right-radius: var(--zd_size5);
-  border-bottom-right-radius: var(--zd_size5);
-}
-[dir=ltr] .keyboardActive{
+.keyboardActive{
   border-left-color: var(--zdt_listLayout_keyboard_active_border);
 }
-[dir=rtl] .keyboardActive{
-  border-right-color: var(--zdt_listLayout_keyboard_active_border);
-}
-[dir=ltr] .active{
+.active{
   border-left-color: var(--zdt_listLayout_active_border);
-}
-[dir=rtl] .active{
-  border-right-color: var(--zdt_listLayout_active_border);
 }

package/es/list/ListStencils/ListStencils.module.css

@@ -10,12 +10,9 @@
 .detailsInnerColumn {
   composes: dflex from '~@zohodesk/components/lib/common/common.module.css';
 }
-[dir=ltr] .avatar {
+.avatar {
   margin-right: var(--zd_size25);
 }
-[dir=rtl] .avatar {
-  margin-left: var(--zd_size25);
-}
 .detailsColumn {
   min-height: 0;
   min-width: 0;
@@ -33,23 +30,21 @@
 .classic .secondaryRow {
   margin-top: var(--zd_size10);
 }
-[dir=ltr] .compact .secondaryRow, [dir=ltr] .superCompact .secondaryRow {
+.compact .secondaryRow,
+.superCompact .secondaryRow {
   margin-left: var(--zd_size30);
 }
-[dir=rtl] .compact .secondaryRow, [dir=rtl] .superCompact .secondaryRow {
-  margin-right: var(--zd_size30);
-}
 .classic .innerContainer {
-  height: var(--zd_size70);
   padding: var(--zd_size13) 0;
+  height: var(--zd_size70);
 }
 .compact .innerContainer {
-  height: var(--zd_size41);
   padding: var(--zd_size5) 0;
+  height: var(--zd_size41);
 }
 .superCompact .innerContainer {
-  height: var(--zd_size35);
   padding: var(--zd_size2) 0;
+  height: var(--zd_size35);
 }
 .classic .detailsInnerColumn {
   -webkit-box-orient: vertical;

package/es/list/SecondaryText/SecondaryText.module.css

@@ -1,12 +1,9 @@
 .paidUserIcon {
+  margin-right: var(--zd_size5);
   vertical-align: middle;
   bottom: var(--zd_size1);
   position: relative;
   font-size: var(--zd_font_size8);
-}[dir=ltr] .paidUserIcon {
-  margin-right: var(--zd_size5);
-}[dir=rtl] .paidUserIcon {
-  margin-left: var(--zd_size5);
 }
 .icon {
   display: block;
@@ -45,13 +42,11 @@ display: block
 .textStyle,
 .secondaryText,
 .phoneNumber {
+  cursor: pointer;
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
   max-width: 100%;
   display: block;
 }
-.textStyle, .secondaryText, .phoneNumber {
-  cursor: pointer;
-}
 .textStyle:hover,
 .ticketIdLink,
 .phoneNumber:hover,
@@ -106,13 +101,8 @@ display: block
 }
 .happinessImg {
   width: var(--zd_size10);
-  vertical-align: middle;
-}
-[dir=ltr] .happinessImg {
   margin: 0 var(--zd_size4) 0 0;
-}
-[dir=rtl] .happinessImg {
-  margin: 0 0 0 var(--zd_size4);
+  vertical-align: middle;
 }
 
 /* colors */

package/es/list/SentimentStatus/SentimentStatus.module.css

@@ -1,10 +1,7 @@
 .container {
+  margin: 0 0 0 var(--zd_size5);
   vertical-align: middle;
   font-size: var(--zd_font_size10);
-}[dir=ltr] .container {
-  margin: 0 0 0 var(--zd_size5);
-}[dir=rtl] .container {
-  margin: 0 var(--zd_size5) 0 0;
 }
 
 .sentimentIcon {

package/es/list/TagNew/TagNew.module.css

@@ -1,33 +1,26 @@
 .tagStyle {
+  border-radius: var(--zd_size14);
+  background-color: var(--zdt_tagnew_default_bg);
+  box-shadow: 0 8px 30px 0 var(--zdt_tagnew_default_box_shadow);
   min-width: var(--zd_size70);
   height: var(--zd_size28);
   font-size: var(--zd_font_size13);
   color: var(--zdt_tagnew_default_text);
+  padding: 0 var(--zd_size15);
   composes: inlineFlex from '../listCommon.module.css';
   composes: alignHorizontal from '~@zohodesk/components/lib/common/common.module.css';
+  transform: scale(0);
   transition: all var(--zd_transition2) ease 0s;
   opacity: 0;
   visibility: hidden;
-  border-radius: var(--zd_size14);
-  background-color: var(--zdt_tagnew_default_bg);
-  box-shadow: 0 8px 30px 0 var(--zdt_tagnew_default_box_shadow);
-  padding: 0 var(--zd_size15);
-  transform: scale(0);
   cursor: pointer;
 }
 
 .bounceIn {
-  visibility: visible;
-  opacity: 1;
   transform: scale(1);
-}
-
-[dir=ltr] .bounceIn {
-  animation: bounceIn 700ms;
-}
-
-[dir=rtl] .bounceIn {
   animation: bounceIn 700ms;
+  visibility: visible;
+  opacity: 1;
 }
 
 @keyframes bounceIn {

package/es/list/Thread/Thread.js

@@ -1,5 +1,3 @@
-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); }
-
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Icon from '@zohodesk/icons/lib/Icon';
@@ -16,15 +14,14 @@ export default class Thread extends Component {
       className,
       iconTitle,
       dataId,
-      align,
-      customProps
+      align
     } = this.props;
     let count = threadCount === '0' ? '1' : threadCount;
-    return /*#__PURE__*/React.createElement(Button, _extends({
+    return /*#__PURE__*/React.createElement(Button, {
       customClass: `${style.container} ${style[`align_${align}`]} ${className}`,
       title: iconTitle,
       dataId: dataId
-    }, customProps), /*#__PURE__*/React.createElement(Icon, {
+    }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-TK-thread",
       size: "9"
     }), /*#__PURE__*/React.createElement("span", {
@@ -38,13 +35,11 @@ Thread.propTypes = {
   className: PropTypes.string,
   count: PropTypes.string,
   dataId: PropTypes.string,
-  iconTitle: PropTypes.string,
-  customProps: PropTypes.object
+  iconTitle: PropTypes.string
 };
 Thread.defaultProps = {
   align: 'left',
-  className: '',
-  customProps: {}
+  className: ''
 };
 
 if (false) {

package/es/list/Thread/Thread.module.css

@@ -16,15 +16,9 @@
 .align_left .count {
   position: absolute;
   line-height: normal;
-  top: var(--zd_size3);
-}
-[dir=ltr] .align_left .count {
   text-align: left;
   left: var(--zd_size8);
-}
-[dir=rtl] .align_left .count {
-  text-align: right;
-  right: var(--zd_size8);
+  top: var(--zd_size3);
 }
 .align_right {
   composes: dInflex alignFend from '~@zohodesk/components/lib/common/common.module.css';
@@ -32,12 +26,6 @@
 .align_right .count {
   position: relative;
   bottom: var(--zd_size2);
-}
-[dir=ltr] .align_right .count {
   right: var(--zd_size5);
   float: right;
-}
-[dir=rtl] .align_right .count {
-  left: var(--zd_size5);
-  float: left;
 }

package/es/list/UserTime/UserTime.module.css

@@ -31,15 +31,9 @@
 }
 .iconStyle {
   display: block;
-}
-[dir=ltr] .iconStyle {
   margin-right: var(--zd_size3);
   margin-left: var(--zd_size1);
 }
-[dir=rtl] .iconStyle {
-  margin-left: var(--zd_size3);
-  margin-right: var(--zd_size1);
-}
 /* colors */
 .iconColor {
   color: var(--icon_color)

package/es/list/listCommon.module.css

@@ -5,12 +5,9 @@
 .inlineFlex {
   composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
 }
-[dir=ltr] .avatarMargin {
+.avatarMargin {
   margin-right: var(--zd_size25);
 }
-[dir=rtl] .avatarMargin {
-  margin-left: var(--zd_size25);
-}
 .subject {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
   font-size: var(--zd_font_size16);
@@ -21,13 +18,8 @@
 }
 .statusColumn {
   composes: inlineBlockMiddle;
-}
-[dir=ltr] .statusColumn {
   text-align: right;
 }
-[dir=rtl] .statusColumn {
-  text-align: left;
-}
 .classic .floatingIconContainer {
   display: none;
 }

package/es/list/status/StatusDropdown/StatusDropdown.js

@@ -114,7 +114,7 @@ export class StatusDropdown extends React.Component {
 
     if (prevProps.isPopupOpen != isPopupOpen) {
       setTimeout(() => {
-        isPopupOpen ? isSearch ? this.searchInput && this.searchInput.focus() : this.hiddenInput && this.hiddenInput.focus() : this.hiddenInput && this.hiddenInput.focus();
+        isPopupOpen && isSearch ? this.searchInput && this.searchInput.focus() : this.hiddenInput && this.hiddenInput.focus();
       }, 10);
     }
 
@@ -145,55 +145,62 @@ export class StatusDropdown extends React.Component {
       togglePopup,
       onClick,
       boxPosition,
-      isPopupOpen,
+      isPopupReady,
       isNextOptions,
       getNextOptions,
-      onTogglePopup
+      onTogglePopup,
+      isPopupOpen
     } = this.props;
 
-    if (isPopupOpen && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
+    if (isPopupReady && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
       e.preventDefault(); //prevent body scroll
     }
 
-    switch (keyCode) {
-      case 40:
-        if (selectedIndex === totalIndex - 1) {
-          this.setState({
-            selectedIndex: 0
-          });
-        } else {
-          if (selectedIndex === totalIndex - 3) {
-            isNextOptions && getNextOptions && getNextOptions();
+    if (isPopupReady) {
+      switch (keyCode) {
+        case 40:
+          if (selectedIndex === totalIndex - 1) {
+            this.setState({
+              selectedIndex: 0
+            });
+          } else {
+            if (selectedIndex === totalIndex - 3) {
+              isNextOptions && getNextOptions && getNextOptions();
+            }
+
+            this.setState({
+              selectedIndex: selectedIndex + 1
+            });
           }
 
-          this.setState({
-            selectedIndex: selectedIndex + 1
-          });
-        }
-
-        break;
-
-      case 38:
-        if (selectedIndex === 0) {
-          this.setState({
-            selectedIndex: totalIndex - 1
-          });
-        } else {
-          this.setState({
-            selectedIndex: selectedIndex - 1
-          });
-        }
-
-        break;
-
-      case 13:
-        onClick && onClick(options[selectedIndex].name, e);
-        onTogglePopup && onTogglePopup(isPopupOpen);
-        togglePopup(e, boxPosition);
-        break;
+          break;
+
+        case 38:
+          if (selectedIndex === 0) {
+            this.setState({
+              selectedIndex: totalIndex - 1
+            });
+          } else {
+            this.setState({
+              selectedIndex: selectedIndex - 1
+            });
+          }
 
-      default:
-        break;
+          break;
+
+        case 13:
+          onClick && onClick(options[selectedIndex].name, e);
+          onTogglePopup && onTogglePopup(isPopupOpen);
+          togglePopup(e, boxPosition);
+          break;
+
+        default:
+          break;
+      }
+    } else {
+      if (keyCode === 13 || keyCode === 40) {
+        togglePopup(e, boxPosition);
+      }
     }
   }
 

package/es/list/status/StatusDropdown/StatusDropdown.module.css

@@ -11,23 +11,16 @@
 .title {
   padding-top: var(--zd_size6);
 }
-[dir=ltr] .default_arrow, [dir=ltr] .overlay_arrow {
+.default_arrow,
+.overlay_arrow {
   padding: 0 0 0 var(--zd_size5);
 }
-[dir=rtl] .default_arrow, [dir=rtl] .overlay_arrow {
-  padding: 0 var(--zd_size5) 0 0;
-}
 .overlay_arrow {
   position: absolute;
+  left: 100%;
   top: 50%;
   transform: translateY(-50%) perspective(1px);
 }
-[dir=ltr] .overlay_arrow {
-  left: 100%;
-}
-[dir=rtl] .overlay_arrow {
-  right: 100%;
-}
 .hoverIcon .arrow {
   opacity: 0;
   visibility: hidden;
@@ -54,18 +47,12 @@
 .cursor {
   cursor: pointer;
 }
-[dir=ltr] .dropBoxContainer {
+.dropBoxContainer {
   text-align: left;
 }
-[dir=rtl] .dropBoxContainer {
-  text-align: right;
-}
-[dir=ltr] .iconBox {
+.iconBox {
   margin-right: var(--zd_size4);
 }
-[dir=rtl] .iconBox {
-  margin-left: var(--zd_size4);
-}
 .iconBox > i {
   display: block;
 }
@@ -74,8 +61,8 @@
   margin: 0 auto;
 }
 .seperatedLine {
-  height: var(--zd_size1);
   border-bottom: 1px solid var(--zdt_statusdropdown_line_border);
+  height: var(--zd_size1);
   margin: var(--zd_size9) 0 var(--zd_size10);
 }
 .hiddenInput {