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

package/es/form/fields/TextareaField/TextareaField.js

@@ -95,7 +95,7 @@ export default class TextareaField extends PureComponent {
     } = customProps;
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
       "data-title": isDisabled ? title : ''
     }, labelName && /*#__PURE__*/React.createElement("div", {
       className: style.labelContainer
@@ -104,7 +104,7 @@ export default class TextareaField extends PureComponent {
       id: id,
       size: fieldSize === 'small' ? 'small' : 'medium',
       palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      customClass: `${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
       htmlFor: uniqueId,
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
     }, LabelProps)), infoText ? /*#__PURE__*/React.createElement(Icon, {

package/es/list/BluePrintStatus/BluePrintStatus.module.css

@@ -6,10 +6,10 @@
   padding-left: var(--zd_size5);
 }
 /* .danger {
-  color: var(--dot_text_brightRed);
+  color: var(--dot_brightRed);
 }
 .default {
-  color: var(--dot_text_shuttleGrey);
+  color: var(--dot_shuttleGrey);
 } */
 .iconStyle {
   display: block;

package/es/list/DotNew/DotNew.module.css

@@ -1,15 +1,15 @@
 .medium {
   width: var(--zd_size6);
-  height: var(--zd_size6); 
+  height: var(--zd_size6);
 }
 .small{
   width: var(--zd_size5);
-  height: var(--zd_size5); 
+  height: var(--zd_size5);
 }
 .container{
   composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
-   /* animation: dotAnimation 1.25s infinite cubic-bezier(0.66, 0.33, 0, 1); 
-  box-shadow: 0 0 0 0 var(--dot_bg_catskillWhite),
+   /* animation: dotAnimation 1.25s infinite cubic-bezier(0.66, 0.33, 0, 1);
+  box-shadow: 0 0 0 0 var(--dot_catskillWhite),
     0 0 0 0 rgba(10, 115, 235, 0.6); */
   border-radius: 50%;
   background-color: var(--zdt_dotnew_default_bg);

package/es/list/Icons/AddNewIcon.js

@@ -3,6 +3,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React from 'react';
 import PropTypes from 'prop-types';
 import Icon from '@zohodesk/icons/lib/Icon';
+import Button from '@zohodesk/components/lib/semantic/Button/Button';
 import style from './Icons.module.css';
 export default class AddNewIcon extends React.Component {
   render() {
@@ -14,15 +15,12 @@ export default class AddNewIcon extends React.Component {
       className,
       customProps
     } = this.props;
-    let {
-      AddNewIconProps
-    } = customProps;
-    return /*#__PURE__*/React.createElement("span", _extends({
+    return /*#__PURE__*/React.createElement(Button, _extends({
       onClick: onClick,
-      className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
-      "data-id": dataId,
-      "data-title": dataTitle
-    }, AddNewIconProps), /*#__PURE__*/React.createElement(Icon, {
+      customClass: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
+      dataId: dataId,
+      title: dataTitle
+    }, customProps), /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-SE-addTickets",
       iconClass: iconClass ? iconClass : ''
     }));
@@ -35,7 +33,5 @@ AddNewIcon.propTypes = {
   dataTitle: PropTypes.string,
   iconClass: PropTypes.string,
   onClick: PropTypes.func,
-  customProps: PropTypes.shape({
-    AddNewIconProps: PropTypes.object
-  })
+  customProps: PropTypes.object
 };

package/es/list/Icons/CompleteIcon.js

@@ -3,6 +3,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React from 'react';
 import PropTypes from 'prop-types';
 import Icon from '@zohodesk/icons/lib/Icon';
+import Button from '@zohodesk/components/lib/semantic/Button/Button';
 import style from './Icons.module.css';
 export default class CompleteIcon extends React.Component {
   render() {
@@ -15,15 +16,12 @@ export default class CompleteIcon extends React.Component {
       iconSize,
       customProps
     } = this.props;
-    let {
-      CompleteIconProps
-    } = customProps;
-    return /*#__PURE__*/React.createElement("span", _extends({
+    return /*#__PURE__*/React.createElement(Button, _extends({
       onClick: onClick,
-      className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
-      "data-id": dataId,
-      "data-title": dataTitle
-    }, CompleteIconProps), /*#__PURE__*/React.createElement(Icon, {
+      customClass: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
+      dataId: dataId,
+      title: dataTitle
+    }, customProps), /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-GN-checkbox",
       iconClass: iconClass ? iconClass : '',
       size: iconSize
@@ -38,7 +36,5 @@ CompleteIcon.propTypes = {
   iconClass: PropTypes.string,
   iconSize: PropTypes.string,
   onClick: PropTypes.func,
-  customProps: PropTypes.shape({
-    CompleteIcon: PropTypes.object
-  })
+  customProps: PropTypes.object
 };

package/es/list/Icons/DeleteIcon.js

@@ -4,6 +4,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import style from './Icons.module.css';
 import Icon from '@zohodesk/icons/lib/Icon';
+import Button from '@zohodesk/components/lib/semantic/Button/Button';
 export default class DeleteComponent extends React.Component {
   render() {
     let {
@@ -15,15 +16,12 @@ export default class DeleteComponent extends React.Component {
       className,
       customProps
     } = this.props;
-    let {
-      DeleteIconProps
-    } = customProps;
-    return /*#__PURE__*/React.createElement("span", _extends({
+    return /*#__PURE__*/React.createElement(Button, _extends({
       onClick: onClick,
-      className: `${style.iconStyle} ${style.redHover} ${className ? className : ''}`,
-      "data-id": dataId,
-      "data-title": dataTitle
-    }, DeleteIconProps), /*#__PURE__*/React.createElement(Icon, {
+      customClass: `${style.iconStyle} ${style.redHover} ${className ? className : ''}`,
+      dataId: dataId,
+      title: dataTitle
+    }, customProps), /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-GN-delete",
       iconClass: iconClass ? iconClass : '',
       size: iconSize
@@ -38,7 +36,5 @@ DeleteComponent.propTypes = {
   iconClass: PropTypes.string,
   iconSize: PropTypes.string,
   onClick: PropTypes.func,
-  customProps: PropTypes.shape({
-    DeleteIconProps: PropTypes.object
-  })
+  customProps: PropTypes.object
 };

package/es/list/Icons/EditIcon.js

@@ -4,6 +4,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import style from './Icons.module.css';
 import Icon from '@zohodesk/icons/lib/Icon';
+import Button from '@zohodesk/components/lib/semantic/Button/Button';
 export default class EditIcon extends React.Component {
   render() {
     let {
@@ -15,15 +16,12 @@ export default class EditIcon extends React.Component {
       className,
       customProps
     } = this.props;
-    let {
-      EditIconProps
-    } = customProps;
-    return /*#__PURE__*/React.createElement("span", _extends({
+    return /*#__PURE__*/React.createElement(Button, _extends({
       onClick: onClick,
-      className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
-      "data-id": dataId,
-      "data-title": dataTitle
-    }, EditIconProps), /*#__PURE__*/React.createElement(Icon, {
+      customClass: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
+      dataId: dataId,
+      title: dataTitle
+    }, customProps), /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-GN-edit",
       iconClass: iconClass ? iconClass : '',
       size: iconSize
@@ -38,7 +36,5 @@ EditIcon.propTypes = {
   iconClass: PropTypes.string,
   iconSize: PropTypes.string,
   onClick: PropTypes.func,
-  customProps: PropTypes.shape({
-    EditIconProps: PropTypes.object
-  })
+  customProps: PropTypes.object
 };

package/es/list/Icons/ReadUnreadIcon.js

@@ -4,6 +4,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Icon from '@zohodesk/icons/lib/Icon';
 import style from './Icons.module.css';
+import Button from '@zohodesk/components/lib/semantic/Button/Button';
 export default class ReadUnreadIcon extends React.Component {
   render() {
     let {
@@ -17,15 +18,12 @@ export default class ReadUnreadIcon extends React.Component {
       iconSize,
       customProps
     } = this.props;
-    let {
-      ReadUnreadIconProps
-    } = customProps;
-    return /*#__PURE__*/React.createElement("span", _extends({
+    return /*#__PURE__*/React.createElement(Button, _extends({
       onClick: onClick,
-      className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
-      "data-id": dataId,
-      "data-title": dataTitle
-    }, ReadUnreadIconProps), /*#__PURE__*/React.createElement(Icon, {
+      customClass: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
+      dataId: dataId,
+      title: dataTitle
+    }, customProps), /*#__PURE__*/React.createElement(Icon, {
       name: isRead ? 'ZD-GN-read' : 'ZD-GN-unread',
       size: iconSize,
       iconClass: `${iconClassName ? iconClassName : ''} ${iconClass ? iconClass : ''}`
@@ -44,5 +42,6 @@ ReadUnreadIcon.propTypes = {
   iconClass: PropTypes.string,
   onClick: PropTypes.func,
   isRead: PropTypes.bool,
-  iconSize: PropTypes.string
+  iconSize: PropTypes.string,
+  customProps: PropTypes.object
 };

package/es/list/Icons/SmartIcon.js

@@ -4,6 +4,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import style from './Icons.module.css';
 import Icon from '@zohodesk/icons/lib/Icon';
+import Button from '@zohodesk/components/lib/semantic/Button/Button';
 export default class SmartIcon extends Component {
   render() {
     let {
@@ -14,15 +15,12 @@ export default class SmartIcon extends Component {
       className,
       customProps
     } = this.props;
-    let {
-      PeekIconProps
-    } = customProps;
-    return /*#__PURE__*/React.createElement("span", _extends({
+    return /*#__PURE__*/React.createElement(Button, _extends({
       onClick: onClick,
-      className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
-      "data-id": dataId,
-      "data-title": dataTitle
-    }, PeekIconProps), /*#__PURE__*/React.createElement(Icon, {
+      customClass: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
+      dataId: dataId,
+      title: dataTitle
+    }, customProps), /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-TK-peek",
       iconClass: iconClass ? iconClass : ''
     }));
@@ -37,7 +35,5 @@ SmartIcon.propTypes = {
   iconClass: PropTypes.string,
   module: PropTypes.string,
   onClick: PropTypes.func,
-  customProps: PropTypes.shape({
-    PeekIconProps: PropTypes.object
-  })
+  customProps: PropTypes.object
 };

package/es/lookup/header/TicketHeader/TicketHeader.js

@@ -62,6 +62,8 @@ export default class TicketHeader extends Component {
     })), needViewsList ? /*#__PURE__*/React.createElement(Box, {
       className: `${style.dropdown}`,
       dataId: "filterIdselected"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: style.menuWrapper
     }, /*#__PURE__*/React.createElement(ViewDropDown, {
       dropBoxSize: "small",
       emptyMessage: menuEmptyMessage,
@@ -71,7 +73,7 @@ export default class TicketHeader extends Component {
       textField: "displayLabel",
       selectedValue: selectedViewId,
       needCloseOnSelect: true
-    })) : null)), needSearch ? /*#__PURE__*/React.createElement(Box, {
+    }))) : null)), needSearch ? /*#__PURE__*/React.createElement(Box, {
       className: `${commonStyle.searchContainer} ${commonResponsive.searchContainer} ${style.searchContainer}`
     }, /*#__PURE__*/React.createElement(Search, {
       onSearch: onSearch,

package/es/lookup/header/TicketHeader/TicketHeader.module.css

@@ -1,5 +1,5 @@
 .dropdown {
-  margin: 0 var(--zd_size8);
+  margin: 0 var(--zd_size20);
 }
 /* Responsive */
 [dir=ltr] .small .searchContainer {
@@ -20,3 +20,4 @@
 .extraSmall .container {
   flex-direction: column;
 }
+.menuWrapper{display: inline-block;}

package/es/lookup/header/ViewDropDown/ViewDropDown.module.css

@@ -28,7 +28,6 @@
   composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
   line-height: var(--zd_size20);
   color: var(--zdt_viewdropdown_label_text);
-  padding: 0 var(--zd_size12);
   cursor: pointer;
 }
 .labelText {

package/es/utils/General.js

@@ -42,23 +42,4 @@ export function formatPhoneUrl(phone) {
   }
 
   return phone;
-}
-export function formatCurrency(number, symbol) {
-  // format number 1000000 to 1,234,567
-  if (number && number != 0) {
-    let typeOfData = typeof number;
-    let isDecimal = typeOfData == 'string' ? number.indexOf('.') != -1 : !Number.isInteger(number);
-
-    if (isDecimal) {
-      let val = number.toString().split('.');
-      let arr1 = `${val[0].replace(/\D/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ',')}`;
-      let finalVal = `${symbol}${arr1}.${val[1]}`;
-      return finalVal;
-    } else {
-      let value = `${symbol}${number.toString().replace(/\D/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ',')}`;
-      return value;
-    }
-  }
-
-  return number;
 }

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

@@ -18,7 +18,7 @@
 [dir=rtl] .container {
   transform-origin: left center;
 }
-.globalNotify { 
+.globalNotify {
   max-width: var(--zd_size490);
   min-width: var(--zd_size394);
 }
@@ -62,12 +62,12 @@
 /* Container Style */
 .message {
   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);
+  border-top: 1px solid var(--zd_smoke1);
   cursor: pointer;
 }
 [dir=ltr] .message {
@@ -77,7 +77,7 @@
   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 {
@@ -104,4 +104,3 @@
   overflow: hidden;
   border-radius: 0 0 var(--zd_size10) var(--zd_size10);
 }
-  

package/lib/ActionButton/ActionButton.js

@@ -23,6 +23,8 @@ var _DropBox = _interopRequireDefault(require("@zohodesk/components/lib/DropBox/
 
 var _CssProvider = _interopRequireDefault(require("@zohodesk/components/lib/Provider/CssProvider"));
 
+var _semanticButtonModule = _interopRequireDefault(require("@zohodesk/components/lib/semantic/Button/semanticButton.module.css"));
+
 var _ActionButtonModule = _interopRequireDefault(require("./ActionButton.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -97,7 +99,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,13 +117,15 @@ 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,
         dataId: dataId,
-        className: "".concat(_ActionButtonModule["default"].contentBox, " ").concat(_ActionButtonModule["default"][palette + 'Btn'], " ").concat(_ActionButtonModule["default"][size + '_btnBox'], " ").concat(children ? _ActionButtonModule["default"].contentBoxBdr : _ActionButtonModule["default"].contentBoxBdrRds, " ").concat(_ActionButtonModule["default"].clickable, " "),
-        "data-title": dataTitle
+        className: " ".concat(_semanticButtonModule["default"].buttonReset, " ").concat(_ActionButtonModule["default"].contentBox, " ").concat(_ActionButtonModule["default"][palette + 'Btn'], " ").concat(_ActionButtonModule["default"][size + '_btnBox'], " ").concat(children ? _ActionButtonModule["default"].contentBoxBdr : _ActionButtonModule["default"].contentBoxBdrRds, " ").concat(_ActionButtonModule["default"].clickable, " "),
+        "data-title": dataTitle,
+        tagName: "button"
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "both"
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
@@ -136,16 +141,17 @@ 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,
         onMouseEnter: onClick ? onHover && this.handleTogglePopup : undefined,
         onMouseLeave: onClick ? onHover && this.handleTogglePopup : undefined,
-        className: "".concat(_ActionButtonModule["default"][arrowBoxSize + '_arrowBox'], " ").concat(_ActionButtonModule["default"][palette + 'Arw'], "  ").concat(_ActionButtonModule["default"].arrowWrapper, " ").concat(isPopupOpen ? _ActionButtonModule["default"].arrowActive : ''),
-        dataId: arrowBoxDataId
+        className: "".concat(_semanticButtonModule["default"].buttonReset, " ").concat(_ActionButtonModule["default"][arrowBoxSize + '_arrowBox'], " ").concat(_ActionButtonModule["default"][palette + 'Arw'], "  ").concat(_ActionButtonModule["default"].arrowWrapper, " ").concat(isPopupOpen ? _ActionButtonModule["default"].arrowActive : ''),
+        dataId: arrowBoxDataId,
+        tagName: "button"
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "both"
       }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
@@ -184,7 +190,8 @@ ActionButton.defaultProps = {
   dropBoxClass: '',
   arrowBoxSize: 'medium',
   isBoxPaddingNeed: true,
-  palette: 'primaryFilled'
+  palette: 'primaryFilled',
+  removeChildrenTooltip: false
 };
 ActionButton.propTypes = {
   arrowBoxDataId: _propTypes["default"].string,
@@ -211,7 +218,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'