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

package/es/version2/GlobalNotification/GlobalNotification.js

@@ -50,7 +50,8 @@ export default class GlobalNotification extends React.Component {
       message,
       hideMessage,
       onClick,
-      i18nKeys = {}
+      i18nKeys = {},
+      customProps
     } = this.props;
     let {
       closeTitle = 'Close'
@@ -60,7 +61,8 @@ export default class GlobalNotification extends React.Component {
       message: message,
       hideMessage: hideMessage,
       onClick: onClick,
-      closeTitle: closeTitle
+      closeTitle: closeTitle,
+      customProps: customProps
     });
   }
 
@@ -72,7 +74,13 @@ GlobalNotification.propTypes = {
   onClick: PropTypes.func,
   showMessage: PropTypes.bool,
   type: PropTypes.oneOf(['success', 'danger', 'info', 'warning', 'error']),
-  i18nKeys: PropTypes.object
+  i18nKeys: PropTypes.object,
+  customProps: PropTypes.shape({
+    ExtraProps: PropTypes.object
+  })
+};
+GlobalNotification.defaultProps = {
+  customProps: {}
 };
 
 if (false) {
@@ -96,12 +104,16 @@ export function GlobalNotificationUI(props) {
     type = '',
     message,
     onClick,
-    closeTitle = ''
+    closeTitle = '',
+    customProps = {}
   } = props;
-  return /*#__PURE__*/React.createElement("div", {
+  let {
+    ExtraProps = {}
+  } = customProps;
+  return /*#__PURE__*/React.createElement("div", _extends({
     className: `${style.message} ${type ? style[type] : ''}`,
     "data-id": `show_${type}_message`
-  }, /*#__PURE__*/React.createElement(Container, {
+  }, ExtraProps), /*#__PURE__*/React.createElement(Container, {
     className: `${style.container}`,
     alignBox: "row",
     isCover: false,

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/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

@@ -62,12 +62,14 @@ export default class AlertLookup extends Component {
     let {
       onSubmitClick,
       onCancelClick,
-      isActive
+      isActive,
+      onEsc,
+      onClose
     } = this.props;
 
     if (e.keyCode === 27 && isActive) {
       e && e.preventDefault && e.preventDefault();
-      onCancelClick && onCancelClick(e);
+      onEsc == 'close' ? onClose && onClose(e) : onCancelClick && onCancelClick(e);
     } else if (e.keyCode === 13 && isActive) {
       e && e.preventDefault && e.preventDefault();
       onSubmitClick && onSubmitClick(e);
@@ -227,7 +229,8 @@ AlertLookup.propTypes = {
   align: PropTypes.oneOf(['top', 'vertical']),
   childAnimationName: PropTypes.oneOf(['expand', 'flyDown']),
   isHtmlContent: PropTypes.bool,
-  scroll: PropTypes.oneOf(['horizontal', 'vertical', 'both'])
+  scroll: PropTypes.oneOf(['horizontal', 'vertical', 'both']),
+  onEsc: PropTypes.oneOf(['close', 'cancel'])
 };
 AlertLookup.defaultProps = {
   isActive: false,
@@ -239,7 +242,8 @@ AlertLookup.defaultProps = {
   align: 'top',
   childAnimationName: 'flyDown',
   isHtmlContent: false,
-  scroll: ''
+  scroll: '',
+  onEsc: 'cancel'
 };
 
 if (false) {

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);
@@ -27,7 +20,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

@@ -57,7 +57,8 @@ export function DesktopNotificationUI(props) {
     onClose,
     needClose,
     customClass = {},
-    i18nKeys = {}
+    i18nKeys = {},
+    customProps
   } = props;
   let {
     closeTitle = 'Close'
@@ -68,6 +69,9 @@ export function DesktopNotificationUI(props) {
   let {
     buttonPalette = 'dangerFilled'
   } = buttonPaletteObject[type] || {};
+  let {
+    ExtraProps = {}
+  } = customProps;
 
   function onClickSubmit(e) {
     onSubmit && onSubmit();
@@ -88,12 +92,12 @@ export function DesktopNotificationUI(props) {
     style: needAutoZindex && isAnimate ? {
       zIndex: `${Zindex}`
     } : {}
-  }, /*#__PURE__*/React.createElement(Container, {
+  }, /*#__PURE__*/React.createElement(Container, _extends({
     className: `${style.container} ${isAnimate ? animateClass : animateRemoveClass} ${style[`${size}`] ? style[`${size}`] : ''} ${isShrinkView ? style.globalNotify : ''} ${containerClass}`,
     isCover: false,
     dataId: dataId,
     isInline: uiVariantTwo
-  }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(DesktopNotificationHeader, {
+  }, ExtraProps), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(DesktopNotificationHeader, {
     type: type,
     title: title,
     variant: titleVariant,
@@ -177,7 +181,10 @@ DesktopNotification.propTypes = {
   submitText: PropTypes.string,
   submitType: PropTypes.oneOf(['primary', 'danger', 'success']),
   titleVariant: PropTypes.oneOf(['primary', 'secondary']),
-  type: PropTypes.oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification', 'alarm'])
+  type: PropTypes.oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification', 'alarm']),
+  customProps: PropTypes.shape({
+    ExtraProps: PropTypes.object
+  })
 };
 DesktopNotification.defaultProps = {
   isMore: false,
@@ -190,7 +197,8 @@ DesktopNotification.defaultProps = {
   needIcon: true,
   titleVariant: 'primary',
   isShrinkView: false,
-  needClose: true
+  needClose: true,
+  customProps: {}
 };
 
 if (false) {

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

@@ -1,24 +1,19 @@
 .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);
+  pointer-events: auto;
 }
-[dir=ltr] .container {
-  transform-origin: right center;
-}
-[dir=rtl] .container {
-  transform-origin: left center;
-}
-.globalNotify { 
+.globalNotify {
   max-width: var(--zd_size490);
   min-width: var(--zd_size394);
 }
@@ -32,17 +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: var(--zd_transition4);
-  -webkit-animation-duration: var(--zd_transition4);
-}
-[dir=rtl] .animation {
   animation-duration: var(--zd_transition4);
   -webkit-animation-duration: var(--zd_transition4);
 }
@@ -51,8 +40,8 @@
   composes: animation;
 }
 .leftnoanimate {
-  opacity: 1;
   transform: translateX(0) scale(1);
+  opacity: 1;
 }
 .rightanimate {
   composes: slideRight from '~@zohodesk/components/lib/common/animation.module.css';
@@ -61,23 +50,18 @@
 }
 /* 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_text_smoke18);
+  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_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);
+  background: var(--zd_alabaster);
 }
 /* Section */
 .section {
@@ -101,7 +85,6 @@
   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/lib/ActionButton/ActionButton.js

@@ -97,7 +97,8 @@ var ActionButton = /*#__PURE__*/function (_React$Component) {
           dropBoxClass = _this$props2.dropBoxClass,
           isBoxPaddingNeed = _this$props2.isBoxPaddingNeed,
           getContainerRef = _this$props2.getContainerRef,
-          getTargetRef = _this$props2.getTargetRef;
+          getTargetRef = _this$props2.getTargetRef,
+          removeChildrenTooltip = _this$props2.removeChildrenTooltip;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: "row",
         isCover: false,
@@ -114,7 +115,8 @@ var ActionButton = /*#__PURE__*/function (_React$Component) {
         size: "medium",
         customClass: {
           customButton: _ActionButtonModule["default"].btn
-        }
+        },
+        text: text
       })) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         onClick: onClick,
@@ -136,9 +138,9 @@ var ActionButton = /*#__PURE__*/function (_React$Component) {
       }) : null, text ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         shrink: true,
         className: _ActionButtonModule["default"].txt,
-        "data-title": text
+        "data-title": removeChildrenTooltip ? null : text
       }, text) : null)), subText ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        "data-title": subText,
+        "data-title": removeChildrenTooltip ? null : subText,
         className: _ActionButtonModule["default"].subTxt
       }, subText) : null)), children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         onClick: onClick ? !onHover && this.handleTogglePopup : undefined,
@@ -184,7 +186,8 @@ ActionButton.defaultProps = {
   dropBoxClass: '',
   arrowBoxSize: 'medium',
   isBoxPaddingNeed: true,
-  palette: 'primaryFilled'
+  palette: 'primaryFilled',
+  removeChildrenTooltip: false
 };
 ActionButton.propTypes = {
   arrowBoxDataId: _propTypes["default"].string,
@@ -211,7 +214,8 @@ ActionButton.propTypes = {
   subText: _propTypes["default"].string,
   text: _propTypes["default"].string,
   getContainerRef: _propTypes["default"].func,
-  getTargetRef: _propTypes["default"].func
+  getTargetRef: _propTypes["default"].func,
+  removeChildrenTooltip: _propTypes["default"].bool
 };
 ActionButton.docs = {
   componentGroup: 'Atom'

package/lib/ActionButton/ActionButton.module.css

@@ -119,6 +119,7 @@
 .btn {
   height: 100%;
   width: 100%;
+  color:var(--dot_mirror)
 }
 .popupWrapper {
   padding: var(--zd_size10) 0;

package/lib/IconButton/IconButton.js

@@ -143,8 +143,7 @@ var IconButton = /*#__PURE__*/function (_React$Component) {
           ariaExpanded = a11y.ariaExpanded,
           ariaLabel = a11y.ariaLabel,
           ariaControls = a11y.ariaControls,
-          ariaLabelledby = a11y.ariaLabelledby,
-          role = a11y.role;
+          ariaLabelledby = a11y.ariaLabelledby;
       return /*#__PURE__*/_react["default"].createElement(_RippleEffect["default"], {
         palette: palette,
         isActive: isActive,
@@ -157,7 +156,6 @@ var IconButton = /*#__PURE__*/function (_React$Component) {
         "aria-expanded": ariaExpanded,
         "aria-controls": ariaControls,
         "aria-labelledby": ariaLabelledby,
-        role: role,
         tagName: needButtonTag ? 'button' : 'div',
         isInline: true,
         tourId: tourId,
@@ -213,8 +211,7 @@ IconButton.propTypes = (_IconButton$propTypes = {
   ariaExpanded: _propTypes["default"].bool,
   ariaLabel: _propTypes["default"].string,
   ariaControls: _propTypes["default"].string,
-  ariaLabelledby: _propTypes["default"].string,
-  role: _propTypes["default"].string
+  ariaLabelledby: _propTypes["default"].string
 })), _defineProperty(_IconButton$propTypes, "dataIsHtml", _propTypes["default"].bool), _IconButton$propTypes);
 IconButton.defaultProps = {
   palette: 'default',

package/lib/Link/Link.js

@@ -13,7 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _LinkModule = _interopRequireDefault(require("./Link.module.css"));
 
-var _LinkContext = _interopRequireDefault(require("./LinkContext.js"));
+var _LinkContext = _interopRequireDefault(require("./LinkContext"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }