@zohodesk/dot 1.0.0-temp-170 → 1.0.0-temp-172

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

@@ -1,134 +1,134 @@
-.varClass {
-  --commonalert_border_color: var(--zdt_commonalert_default_border);
-}
-.container {
-    composes: varClass;
-    min-height: var(--zd_size54) ;
-    position: relative;
-  /* css:theme-validation:ignore */
-  /* css:theme-validation:ignore */
-    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;
-  }
-
-  .title {
-    composes: ftsmooth 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 {
-    max-width: 100% ;
-  }
-
-  /* Palette */
-
-  .success {
-    --commonalert_border_color: var(--zdt_commonalert_success_border);
-  }
-
-  .info,.notification,.alarm {
-    --commonalert_border_color: var(--zdt_commonalert_info_border);
-  }
-
-  .danger {
-    --commonalert_border_color: var(--zdt_commonalert_danger_border);
-  }
-
-  .error {
-    --commonalert_border_color: var(--zdt_commonalert_error_border);
-  }
-
-  .warning {
-    --commonalert_border_color: var(--zdt_commonalert_warning_border);
-  }
-
-
-/* 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 .iconContainer {
-  height: var(--zd_size51) ;
-  width: var(--zd_size51) ;
-}
-
-.primary .infoText {
-    line-height: var(--zd_size18);
-  }
-
-  .primary .close {
-    position: absolute;
-    top: var(--zd_size12) ;
-  }
-
-  [dir=ltr] .primary .close {
-  right: var(--zd_size12) ;
-  }
-
-  [dir=rtl] .primary .close {
-    left: var(--zd_size12) ;
-  }
-
-  /* Secondary Header */
-  .secondary {
-    composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
-    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) ;
-  }
-
-  .secondary .infoText {
-    line-height: var(--zd_size20);
-  }
-
-  .secondary .iconContainer {
-    height: var(--zd_size44) ;
-    width: var(--zd_size44) ;
-    position: absolute;
-    top: 0 ;
-    bottom: 0 ;
-    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 ;
-    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 ;
-  }
+.varClass {
+  --commonalert_border_color: var(--zdt_commonalert_default_border);
+}
+.container {
+    composes: varClass;
+    min-height: var(--zd_size54) ;
+    position: relative;
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
+    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;
+  }
+
+  .title {
+    composes: ftsmooth 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 {
+    max-width: 100% ;
+  }
+
+  /* Palette */
+
+  .success {
+    --commonalert_border_color: var(--zdt_commonalert_success_border);
+  }
+
+  .info,.notification,.alarm {
+    --commonalert_border_color: var(--zdt_commonalert_info_border);
+  }
+
+  .danger {
+    --commonalert_border_color: var(--zdt_commonalert_danger_border);
+  }
+
+  .error {
+    --commonalert_border_color: var(--zdt_commonalert_error_border);
+  }
+
+  .warning {
+    --commonalert_border_color: var(--zdt_commonalert_warning_border);
+  }
+
+
+/* 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 .iconContainer {
+  height: var(--zd_size51) ;
+  width: var(--zd_size51) ;
+}
+
+.primary .infoText {
+    line-height: 1;
+  }
+
+  .primary .close {
+    position: absolute;
+    top: var(--zd_size12) ;
+  }
+
+  [dir=ltr] .primary .close {
+  right: var(--zd_size12) ;
+  }
+
+  [dir=rtl] .primary .close {
+    left: var(--zd_size12) ;
+  }
+
+  /* Secondary Header */
+  .secondary {
+    composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
+    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) ;
+  }
+
+  .secondary .infoText {
+    line-height: 1.4286;
+  }
+
+  .secondary .iconContainer {
+    height: var(--zd_size44) ;
+    width: var(--zd_size44) ;
+    position: absolute;
+    top: 0 ;
+    bottom: 0 ;
+    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 ;
+    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/install.md

@@ -1,12 +1,12 @@
-- For New :
-
-# npm i
-# npm run common_package_build
-
-For Update:
-
-# npm run download
-# npm run common_package_build
-
-
-
+- For New :
+
+# npm i
+# npm run common_package_build
+
+For Update:
+
+# npm run download
+# npm run common_package_build
+
+
+

package/lib/ActionButton/ActionButton.js

@@ -63,48 +63,57 @@ var ActionButton = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call(this, props);
     _this.handleTogglePopup = _this.handleTogglePopup.bind(_assertThisInitialized(_this));
+    _this.handlePopupOpen = _this.handlePopupOpen.bind(_assertThisInitialized(_this));
     return _this;
   }
 
   _createClass(ActionButton, [{
-    key: "handleTogglePopup",
-    value: function handleTogglePopup(e) {
+    key: "handlePopupOpen",
+    value: function handlePopupOpen(e) {
       var _this$props = this.props,
-          togglePopup = _this$props.togglePopup,
+          openPopupOnly = _this$props.openPopupOnly,
           defaultPosition = _this$props.defaultPosition;
+      openPopupOnly(e, defaultPosition);
+    }
+  }, {
+    key: "handleTogglePopup",
+    value: function handleTogglePopup(e) {
+      var _this$props2 = this.props,
+          togglePopup = _this$props2.togglePopup,
+          defaultPosition = _this$props2.defaultPosition;
       togglePopup(e, defaultPosition);
     }
   }, {
     key: "render",
     value: function render() {
-      var _this$props2 = this.props,
-          isLoading = _this$props2.isLoading,
-          onClick = _this$props2.onClick,
-          size = _this$props2.size,
-          dataId = _this$props2.dataId,
-          dataSelectorId = _this$props2.dataSelectorId,
-          isArrow = _this$props2.isArrow,
-          text = _this$props2.text,
-          subText = _this$props2.subText,
-          arrowBoxSize = _this$props2.arrowBoxSize,
-          palette = _this$props2.palette,
-          onHover = _this$props2.onHover,
-          position = _this$props2.position,
-          className = _this$props2.className,
-          iconName = _this$props2.iconName,
-          iconSize = _this$props2.iconSize,
-          dataTitle = _this$props2.dataTitle,
-          isDisabled = _this$props2.isDisabled,
-          isPopupOpen = _this$props2.isPopupOpen,
-          removeClose = _this$props2.removeClose,
-          children = _this$props2.children,
-          dropBoxClass = _this$props2.dropBoxClass,
-          isBoxPaddingNeed = _this$props2.isBoxPaddingNeed,
-          getContainerRef = _this$props2.getContainerRef,
-          getTargetRef = _this$props2.getTargetRef,
-          removeChildrenTooltip = _this$props2.removeChildrenTooltip,
-          innerClassName = _this$props2.innerClassName,
-          popupGroup = _this$props2.popupGroup;
+      var _this$props3 = this.props,
+          isLoading = _this$props3.isLoading,
+          onClick = _this$props3.onClick,
+          size = _this$props3.size,
+          dataId = _this$props3.dataId,
+          dataSelectorId = _this$props3.dataSelectorId,
+          isArrow = _this$props3.isArrow,
+          text = _this$props3.text,
+          subText = _this$props3.subText,
+          arrowBoxSize = _this$props3.arrowBoxSize,
+          palette = _this$props3.palette,
+          onHover = _this$props3.onHover,
+          position = _this$props3.position,
+          className = _this$props3.className,
+          iconName = _this$props3.iconName,
+          iconSize = _this$props3.iconSize,
+          dataTitle = _this$props3.dataTitle,
+          isDisabled = _this$props3.isDisabled,
+          isPopupOpen = _this$props3.isPopupOpen,
+          removeClose = _this$props3.removeClose,
+          children = _this$props3.children,
+          dropBoxClass = _this$props3.dropBoxClass,
+          isBoxPaddingNeed = _this$props3.isBoxPaddingNeed,
+          getContainerRef = _this$props3.getContainerRef,
+          getTargetRef = _this$props3.getTargetRef,
+          removeChildrenTooltip = _this$props3.removeChildrenTooltip,
+          innerClassName = _this$props3.innerClassName,
+          popupGroup = _this$props3.popupGroup;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: "row",
         isCover: false,
@@ -152,7 +161,7 @@ var ActionButton = /*#__PURE__*/function (_React$Component) {
         "data-title": removeChildrenTooltip ? null : subText,
         className: _ActionButtonModule["default"].subTxt
       }, subText) : null)), children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        onClick: onClick ? !onHover && this.handleTogglePopup : undefined,
+        onClick: onClick && !onHover ? this.handleTogglePopup : this.handlePopupOpen,
         onMouseEnter: onClick ? onHover && this.handleTogglePopup : undefined,
         onMouseLeave: onClick ? onHover && this.handleTogglePopup : undefined,
         className: "".concat(_semanticButtonModule["default"].buttonReset, " ").concat(_ActionButtonModule["default"][arrowBoxSize + '_arrowBox'], " ").concat(_ActionButtonModule["default"][palette + 'Arw'], "  ").concat(_ActionButtonModule["default"].arrowWrapper, " ").concat(isPopupOpen ? _ActionButtonModule["default"].arrowActive : ''),

package/lib/ActionButton/ActionButton.module.css

@@ -1,146 +1,146 @@
-.varClass {
-  --buttonBg: var(--zdt_actionButton_primaryFilled_bg);
-  --buttonBorder: var(--zdt_actionButton_primary_border);
-  --buttonSeparatorBorder: var(--zdt_actionButton_separator_border);
-}
-.container {
-  composes: varClass;
-}
-.container:hover {
-  --buttonSeparatorBorder: var(--zdt_actionButton_separator_hover_border);
-}
-.primaryFilledBox {
-  --buttonText: var(--zdt_actionButton_primaryFilled_text);
-}
-.primaryFilledBtn, .primaryFilledArw {
-  /* css:theme-validation:ignore */
-  background-color: var(--buttonBg);
-}
-.primaryBox {
-  --buttonText: var(--zdt_actionButton_primary_text);
-}
-.primaryBtn, .primaryArw {
-  /* css:theme-validation:ignore */
-  border: 1px solid var(--buttonBorder);
-}
-[dir=ltr] .primaryBtn {
-  border-right: none;
-}
-[dir=rtl] .primaryBtn {
-  border-left: none;
-}
-.contentBox,
-.arrowWrapper {
-  transition: width var(--zd_transition3), padding var(--zd_transition3), background-color var(--zd_transition2), border-color var(--zd_transition2);
-}
-.contentBox, .arrowWrapper {
-  margin: 0 ;
-}
-.clickable {
-  cursor: pointer;
-}
-[dir=ltr] .contentBoxBdr {
-  border-radius: var(--zd_size4) 0 0 var(--zd_size4);
-}
-[dir=rtl] .contentBoxBdr {
-  border-radius: 0 var(--zd_size4) var(--zd_size4) 0;
-}
-.contentBoxBdrRds {
-  border-radius: var(--zd_size4);
-}
-.small {
-  height: var(--zd_size28) ;
-}
-.medium,
-.large {
-  height: var(--zd_size30) ;
-}
-.medium {
-  min-width: var(--zd_size115) ;
-}
-.large {
-  min-width: var(--zd_size135) ;
-}
-.small_btnBox {
-  padding: 0 var(--zd_size8) ;
-}
-.medium_btnBox, .large_btnBox {
-  padding: 0 var(--zd_size10) ;
-}
-.txt {
-  font-size: var(--zd_font_size13) ;
-  font-family: var(--zd_semibold);
-  text-transform: capitalize;
-}
-.subTxt {
-  font-size: var(--zd_font_size10) ;
-}
-.contentwrapper,
-.txt,
-.subTxt {
-  max-width: 100% ;
-}
-.txt,
-.subTxt {
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-  /* css:theme-validation:ignore */
-  color: var(--buttonText);
-}
-.arrowWrapper {
-  position: relative;
-  composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
-  cursor: pointer;
-}
-[dir=ltr] .arrowWrapper {
-  border-radius: 0 var(--zd_size4) var(--zd_size4) 0;
-}
-[dir=rtl] .arrowWrapper {
-  border-radius: var(--zd_size4) 0 0 var(--zd_size4);
-}
-.primaryFilledArw {
-  /* css:theme-validation:ignore */
-}
-[dir=ltr] .primaryFilledArw {
-  border-left: 1px solid var(--buttonSeparatorBorder);
-}
-[dir=rtl] .primaryFilledArw {
-    border-right: 1px solid var(--buttonSeparatorBorder);
-}
-.small_arrowBox {
-  width: var(--zd_size20) ;
-}
-.medium_arrowBox {
-  width: var(--zd_size26) ;
-}
-.primaryFilledArw:hover,
-.primaryFilledArw.arrowActive,
-.clickable.primaryFilledBtn:hover,
-.wholeDiv.primaryFilledBox:hover {
-  --buttonBg: var(--zdt_actionButton_primaryFilled_hover_bg);
-}
-.primaryArw:hover,
-.primaryArw.arrowActive,
-.clickable.primaryBtn:hover,
-.wholeDiv.primaryBox:hover {
-  --buttonBorder: var(--zdt_actionButton_primary_hover_border);
-  --buttonText: var(--zdt_actionButton_primary_hover_text);
-}
-.btn {
-  height: 100% ;
-  width: 100% ;
-}
-.popupWrapper {
-  padding: var(--zd_size10) 0 ;
-  margin: var(--zd_size5) 0 ;
-}
-.arrow,
-.iconClr {
-  /* css:theme-validation:ignore */
-  color: var(--buttonText);
-}
-[dir=ltr] .iconMrgn {
-  margin-right: var(--zd_size6) ;
-}
-[dir=rtl] .iconMrgn {
-  margin-left: var(--zd_size6) ;
-}
+.varClass {
+  --buttonBg: var(--zdt_actionButton_primaryFilled_bg);
+  --buttonBorder: var(--zdt_actionButton_primary_border);
+  --buttonSeparatorBorder: var(--zdt_actionButton_separator_border);
+}
+.container {
+  composes: varClass;
+}
+.container:hover {
+  --buttonSeparatorBorder: var(--zdt_actionButton_separator_hover_border);
+}
+.primaryFilledBox {
+  --buttonText: var(--zdt_actionButton_primaryFilled_text);
+}
+.primaryFilledBtn, .primaryFilledArw {
+  /* css:theme-validation:ignore */
+  background-color: var(--buttonBg);
+}
+.primaryBox {
+  --buttonText: var(--zdt_actionButton_primary_text);
+}
+.primaryBtn, .primaryArw {
+  /* css:theme-validation:ignore */
+  border: 1px solid var(--buttonBorder);
+}
+[dir=ltr] .primaryBtn {
+  border-right: none;
+}
+[dir=rtl] .primaryBtn {
+  border-left: none;
+}
+.contentBox,
+.arrowWrapper {
+  transition: width var(--zd_transition3), padding var(--zd_transition3), background-color var(--zd_transition2), border-color var(--zd_transition2);
+}
+.contentBox, .arrowWrapper {
+  margin: 0 ;
+}
+.clickable {
+  cursor: pointer;
+}
+[dir=ltr] .contentBoxBdr {
+  border-radius: var(--zd_size4) 0 0 var(--zd_size4);
+}
+[dir=rtl] .contentBoxBdr {
+  border-radius: 0 var(--zd_size4) var(--zd_size4) 0;
+}
+.contentBoxBdrRds {
+  border-radius: var(--zd_size4);
+}
+.small {
+  height: var(--zd_size28) ;
+}
+.medium,
+.large {
+  height: var(--zd_size30) ;
+}
+.medium {
+  min-width: var(--zd_size115) ;
+}
+.large {
+  min-width: var(--zd_size135) ;
+}
+.small_btnBox {
+  padding: 0 var(--zd_size8) ;
+}
+.medium_btnBox, .large_btnBox {
+  padding: 0 var(--zd_size10) ;
+}
+.txt {
+  font-size: var(--zd_font_size13) ;
+  font-family: var(--zd_semibold);
+  text-transform: capitalize;
+}
+.subTxt {
+  font-size: var(--zd_font_size10) ;
+}
+.contentwrapper,
+.txt,
+.subTxt {
+  max-width: 100% ;
+}
+.txt,
+.subTxt {
+  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+  /* css:theme-validation:ignore */
+  color: var(--buttonText);
+}
+.arrowWrapper {
+  position: relative;
+  composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
+  cursor: pointer;
+}
+[dir=ltr] .arrowWrapper {
+  border-radius: 0 var(--zd_size4) var(--zd_size4) 0;
+}
+[dir=rtl] .arrowWrapper {
+  border-radius: var(--zd_size4) 0 0 var(--zd_size4);
+}
+.primaryFilledArw {
+  /* css:theme-validation:ignore */
+}
+[dir=ltr] .primaryFilledArw {
+  border-left: 1px solid var(--buttonSeparatorBorder);
+}
+[dir=rtl] .primaryFilledArw {
+    border-right: 1px solid var(--buttonSeparatorBorder);
+}
+.small_arrowBox {
+  width: var(--zd_size20) ;
+}
+.medium_arrowBox {
+  width: var(--zd_size26) ;
+}
+.primaryFilledArw:hover,
+.primaryFilledArw.arrowActive,
+.clickable.primaryFilledBtn:hover,
+.wholeDiv.primaryFilledBox:hover {
+  --buttonBg: var(--zdt_actionButton_primaryFilled_hover_bg);
+}
+.primaryArw:hover,
+.primaryArw.arrowActive,
+.clickable.primaryBtn:hover,
+.wholeDiv.primaryBox:hover {
+  --buttonBorder: var(--zdt_actionButton_primary_hover_border);
+  --buttonText: var(--zdt_actionButton_primary_hover_text);
+}
+.btn {
+  height: 100% ;
+  width: 100% ;
+}
+.popupWrapper {
+  padding: var(--zd_size10) 0 ;
+  margin: var(--zd_size5) 0 ;
+}
+.arrow,
+.iconClr {
+  /* css:theme-validation:ignore */
+  color: var(--buttonText);
+}
+[dir=ltr] .iconMrgn {
+  margin-right: var(--zd_size6) ;
+}
+[dir=rtl] .iconMrgn {
+  margin-left: var(--zd_size6) ;
+}