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

package/README.md

@@ -2,9 +2,18 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.0.0-beta.214
+
+- Dot => Provider Config Added
+- FreezeLayer => freezeLayer config added to control keyboard shortcut 
+- CurrencyField => formatCurrency prop added, exist formatCurrency function removed and moved to deprecated
+# 1.0.0-beta.213
+
+- ActionButton => Loader Bg Fix reverted (Directly Fixed in Button Component)
+
 # 1.0.0-beta.210
 
-- TextEditor => editor laoding issue fix
+- TextEditor => editor loading issue fix
 
 # 1.0.0-beta.209
 

package/es/ActionButton/ActionButton.js

@@ -6,6 +6,7 @@ import Button from '@zohodesk/components/lib/Button/Button';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import DropBox from '@zohodesk/components/lib/DropBox/DropBox';
 import CssProvider from '@zohodesk/components/lib/Provider/CssProvider';
+import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
 import style from './ActionButton.module.css';
 export class ActionButton extends React.Component {
   constructor(props) {
@@ -71,8 +72,9 @@ export class ActionButton extends React.Component {
       flexible: true,
       onClick: onClick,
       dataId: dataId,
-      className: `${style.contentBox} ${style[palette + 'Btn']} ${style[size + '_btnBox']} ${children ? style.contentBoxBdr : style.contentBoxBdrRds} ${style.clickable} `,
-      "data-title": dataTitle
+      className: ` ${btnStyle.buttonReset} ${style.contentBox} ${style[palette + 'Btn']} ${style[size + '_btnBox']} ${children ? style.contentBoxBdr : style.contentBoxBdrRds} ${style.clickable} `,
+      "data-title": dataTitle,
+      tagName: "button"
     }, /*#__PURE__*/React.createElement(Container, {
       align: "both"
     }, /*#__PURE__*/React.createElement(Box, {
@@ -96,8 +98,9 @@ export class ActionButton extends React.Component {
       onClick: onClick ? !onHover && this.handleTogglePopup : undefined,
       onMouseEnter: onClick ? onHover && this.handleTogglePopup : undefined,
       onMouseLeave: onClick ? onHover && this.handleTogglePopup : undefined,
-      className: `${style[arrowBoxSize + '_arrowBox']} ${style[palette + 'Arw']}  ${style.arrowWrapper} ${isPopupOpen ? style.arrowActive : ''}`,
-      dataId: arrowBoxDataId
+      className: `${btnStyle.buttonReset} ${style[arrowBoxSize + '_arrowBox']} ${style[palette + 'Arw']}  ${style.arrowWrapper} ${isPopupOpen ? style.arrowActive : ''}`,
+      dataId: arrowBoxDataId,
+      tagName: "button"
     }, /*#__PURE__*/React.createElement(Container, {
       align: "both"
     }, /*#__PURE__*/React.createElement(Icon, {

package/es/ActionButton/ActionButton.module.css

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

package/es/FreezeLayer/FreezeLayer.js

@@ -2,9 +2,10 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Container } from '@zohodesk/components/lib/Layout';
 import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
-import style from './FreezeLayer.module.css';
-import { Shortcut } from '../utils/KeyboardApi';
+import style from './FreezeLayer.module.css'; //import { Shortcut } from '../utils/KeyboardApi';
+
 import { getZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
+import { getDotLibraryConfig } from '../Provider/Config';
 export default class FreezeLayer extends Component {
   constructor(props) {
     super(props);
@@ -13,6 +14,23 @@ export default class FreezeLayer extends Component {
       isChildActive: false
     };
     this.getNextIndex = getZIndex(this);
+    this.isFreezeLayerEnabled = false;
+  }
+
+  enableFreeze() {
+    if (!this.isFreezeLayerEnabled) {
+      this.isFreezeLayerEnabled = true;
+      const freezeLayerEnable = (getDotLibraryConfig('freezeLayer') || {}).enable;
+      freezeLayerEnable && freezeLayerEnable();
+    }
+  }
+
+  disableFreeze() {
+    if (this.isFreezeLayerEnabled) {
+      this.isFreezeLayerEnabled = false;
+      const freezeLayerDisable = (getDotLibraryConfig('freezeLayer') || {}).disable;
+      freezeLayerDisable && freezeLayerDisable();
+    }
   }
 
   componentDidMount() {
@@ -24,6 +42,7 @@ export default class FreezeLayer extends Component {
       this.setState({
         isChildActive: true
       });
+      this.enableFreeze();
     }
   }
 
@@ -34,7 +53,8 @@ export default class FreezeLayer extends Component {
 
     if (isActive != prevProps.isActive) {
       if (isActive) {
-        Shortcut && Shortcut.setState(false);
+        this.enableFreeze(); // Shortcut && Shortcut.setState(false);
+
         this.setState({
           isActive: true
         }, () => {
@@ -43,7 +63,8 @@ export default class FreezeLayer extends Component {
           });
         });
       } else {
-        Shortcut && Shortcut.setState(true);
+        this.disableFreeze(); // Shortcut && Shortcut.setState(true);
+
         this.setState({
           isChildActive: false
         }, () => {
@@ -55,6 +76,10 @@ export default class FreezeLayer extends Component {
     }
   }
 
+  componentWillUnmount() {
+    this.disableFreeze();
+  }
+
   render() {
     let {
       children,

package/es/IconButton/IconButton.js

@@ -94,7 +94,8 @@ export default class IconButton extends React.Component {
       ariaExpanded,
       ariaLabel,
       ariaControls,
-      ariaLabelledby
+      ariaLabelledby,
+      role
     } = a11y;
     return /*#__PURE__*/React.createElement(RippleEffect, {
       palette: palette,
@@ -108,6 +109,7 @@ export default class IconButton extends React.Component {
       "aria-expanded": ariaExpanded,
       "aria-controls": ariaControls,
       "aria-labelledby": ariaLabelledby,
+      role: role,
       tagName: needButtonTag ? 'button' : 'div',
       isInline: true,
       tourId: tourId,
@@ -161,7 +163,8 @@ IconButton.propTypes = {
     ariaExpanded: PropTypes.bool,
     ariaLabel: PropTypes.string,
     ariaControls: PropTypes.string,
-    ariaLabelledby: PropTypes.string
+    ariaLabelledby: PropTypes.string,
+    role: PropTypes.string
   }),
   dataIsHtml: PropTypes.bool
 };

package/es/Provider/Config.js

@@ -0,0 +1,12 @@
+let config = {
+  freezeLayer: {
+    enable: () => {},
+    disable: () => {}
+  }
+};
+export function getDotLibraryConfig(key) {
+  return config[key];
+}
+export function setDotLibraryConfig(configObj) {
+  config = Object.assign({}, config, configObj);
+}

package/es/deprecated/utils/General.js

@@ -0,0 +1,19 @@
+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/form/fields/CurrencyField/CurrencyField.js

@@ -15,7 +15,6 @@ import Icon from '@zohodesk/icons/lib/Icon';
 /**** CSS ****/
 
 import style from '../Fields.module.css';
-import { formatCurrency } from '../../../utils/General';
 export default class CurrencyField extends PureComponent {
   constructor(props) {
     super(props);
@@ -99,7 +98,8 @@ export default class CurrencyField extends PureComponent {
       needReadOnlyStyle,
       isClickable,
       userCurrencyType,
-      customProps
+      customProps,
+      formatCurrency
     } = this.props;
     const {
       LabelProps = {},
@@ -217,7 +217,8 @@ CurrencyField.propTypes = {
     TextBoxProps: PropTypes.object,
     ValidationMessageProps1: PropTypes.object,
     ValidationMessageProps2: PropTypes.object
-  })
+  }),
+  formatCurrency: PropTypes.func
 };
 CurrencyField.defaultProps = {
   errorType: 'primary',
@@ -233,7 +234,8 @@ CurrencyField.defaultProps = {
   labelCustomClass: '',
   isClickable: false,
   needReadOnlyStyle: true,
-  customProps: {}
+  customProps: {},
+  formatCurrency: () => {}
 };
 
 if (false) {

package/es/list/Comment/Comment.js

@@ -22,7 +22,10 @@ export default class Comment extends Component {
       customClass: `${style.container} ${className} `,
       onClick: onClick,
       dataId: "commentLstContainer",
-      title: commentTitle
+      title: commentTitle,
+      customProps: {
+        'aria-label': commentTitle
+      }
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-TK-commentLine",
       iconClass: style.commentIcon

package/es/list/Icons/AddNewIcon.js

@@ -1,6 +1,9 @@
+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';
+import Button from '@zohodesk/components/lib/semantic/Button/Button';
 import style from './Icons.module.css';
 export default class AddNewIcon extends React.Component {
   render() {
@@ -9,14 +12,15 @@ export default class AddNewIcon extends React.Component {
       dataId,
       dataTitle,
       iconClass,
-      className
+      className,
+      customProps
     } = this.props;
-    return /*#__PURE__*/React.createElement("span", {
+    return /*#__PURE__*/React.createElement(Button, _extends({
       onClick: onClick,
-      className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
-      "data-id": dataId,
-      "data-title": dataTitle
-    }, /*#__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 : ''
     }));
@@ -28,5 +32,6 @@ AddNewIcon.propTypes = {
   dataId: PropTypes.string,
   dataTitle: PropTypes.string,
   iconClass: PropTypes.string,
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
+  customProps: PropTypes.object
 };

package/es/list/Icons/CompleteIcon.js

@@ -1,6 +1,9 @@
+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';
+import Button from '@zohodesk/components/lib/semantic/Button/Button';
 import style from './Icons.module.css';
 export default class CompleteIcon extends React.Component {
   render() {
@@ -10,14 +13,15 @@ export default class CompleteIcon extends React.Component {
       dataTitle,
       iconClass,
       className,
-      iconSize
+      iconSize,
+      customProps
     } = this.props;
-    return /*#__PURE__*/React.createElement("span", {
+    return /*#__PURE__*/React.createElement(Button, _extends({
       onClick: onClick,
-      className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
-      "data-id": dataId,
-      "data-title": dataTitle
-    }, /*#__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
@@ -31,5 +35,6 @@ CompleteIcon.propTypes = {
   dataTitle: PropTypes.string,
   iconClass: PropTypes.string,
   iconSize: PropTypes.string,
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
+  customProps: PropTypes.object
 };

package/es/list/Icons/DeleteIcon.js

@@ -1,7 +1,10 @@
+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';
 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 {
@@ -10,14 +13,15 @@ export default class DeleteComponent extends React.Component {
       dataTitle,
       iconClass,
       iconSize,
-      className
+      className,
+      customProps
     } = this.props;
-    return /*#__PURE__*/React.createElement("span", {
+    return /*#__PURE__*/React.createElement(Button, _extends({
       onClick: onClick,
-      className: `${style.iconStyle} ${style.redHover} ${className ? className : ''}`,
-      "data-id": dataId,
-      "data-title": dataTitle
-    }, /*#__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
@@ -31,5 +35,6 @@ DeleteComponent.propTypes = {
   dataTitle: PropTypes.string,
   iconClass: PropTypes.string,
   iconSize: PropTypes.string,
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
+  customProps: PropTypes.object
 };

package/es/list/Icons/EditIcon.js

@@ -1,7 +1,10 @@
+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';
 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 {
@@ -10,14 +13,15 @@ export default class EditIcon extends React.Component {
       dataTitle,
       iconClass,
       iconSize,
-      className
+      className,
+      customProps
     } = this.props;
-    return /*#__PURE__*/React.createElement("span", {
+    return /*#__PURE__*/React.createElement(Button, _extends({
       onClick: onClick,
-      className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
-      "data-id": dataId,
-      "data-title": dataTitle
-    }, /*#__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
@@ -31,5 +35,6 @@ EditIcon.propTypes = {
   dataTitle: PropTypes.string,
   iconClass: PropTypes.string,
   iconSize: PropTypes.string,
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
+  customProps: PropTypes.object
 };

package/es/list/Icons/ReadUnreadIcon.js

@@ -1,7 +1,10 @@
+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';
 import style from './Icons.module.css';
+import Button from '@zohodesk/components/lib/semantic/Button/Button';
 export default class ReadUnreadIcon extends React.Component {
   render() {
     let {
@@ -12,14 +15,15 @@ export default class ReadUnreadIcon extends React.Component {
       iconClass,
       className,
       isRead,
-      iconSize
+      iconSize,
+      customProps
     } = this.props;
-    return /*#__PURE__*/React.createElement("span", {
+    return /*#__PURE__*/React.createElement(Button, _extends({
       onClick: onClick,
-      className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
-      "data-id": dataId,
-      "data-title": dataTitle
-    }, /*#__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 : ''}`
@@ -38,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

@@ -1,7 +1,10 @@
+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';
 import Icon from '@zohodesk/icons/lib/Icon';
+import Button from '@zohodesk/components/lib/semantic/Button/Button';
 export default class SmartIcon extends Component {
   render() {
     let {
@@ -9,14 +12,15 @@ export default class SmartIcon extends Component {
       dataId,
       dataTitle,
       iconClass,
-      className
+      className,
+      customProps
     } = this.props;
-    return /*#__PURE__*/React.createElement("span", {
+    return /*#__PURE__*/React.createElement(Button, _extends({
       onClick: onClick,
-      className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
-      "data-id": dataId,
-      "data-title": dataTitle
-    }, /*#__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 : ''
     }));
@@ -30,5 +34,6 @@ SmartIcon.propTypes = {
   features: PropTypes.array,
   iconClass: PropTypes.string,
   module: PropTypes.string,
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
+  customProps: PropTypes.object
 };

package/es/list/Thread/Thread.js

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

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/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 }; }
@@ -121,8 +123,9 @@ var ActionButton = /*#__PURE__*/function (_React$Component) {
         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, {
@@ -146,8 +149,9 @@ var ActionButton = /*#__PURE__*/function (_React$Component) {
         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"], {

package/lib/ActionButton/ActionButton.module.css

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

package/lib/FreezeLayer/FreezeLayer.js

@@ -17,10 +17,10 @@ var _VelocityAnimationGroup = _interopRequireDefault(require("@zohodesk/componen
 
 var _FreezeLayerModule = _interopRequireDefault(require("./FreezeLayer.module.css"));
 
-var _KeyboardApi = require("../utils/KeyboardApi");
-
 var _ZindexProvider = require("@zohodesk/components/lib/Provider/ZindexProvider");
 
+var _Config = require("../Provider/Config");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -63,10 +63,29 @@ var FreezeLayer = /*#__PURE__*/function (_Component) {
       isChildActive: false
     };
     _this.getNextIndex = (0, _ZindexProvider.getZIndex)(_assertThisInitialized(_this));
+    _this.isFreezeLayerEnabled = false;
     return _this;
   }
 
   _createClass(FreezeLayer, [{
+    key: "enableFreeze",
+    value: function enableFreeze() {
+      if (!this.isFreezeLayerEnabled) {
+        this.isFreezeLayerEnabled = true;
+        var freezeLayerEnable = ((0, _Config.getDotLibraryConfig)('freezeLayer') || {}).enable;
+        freezeLayerEnable && freezeLayerEnable();
+      }
+    }
+  }, {
+    key: "disableFreeze",
+    value: function disableFreeze() {
+      if (this.isFreezeLayerEnabled) {
+        this.isFreezeLayerEnabled = false;
+        var freezeLayerDisable = ((0, _Config.getDotLibraryConfig)('freezeLayer') || {}).disable;
+        freezeLayerDisable && freezeLayerDisable();
+      }
+    }
+  }, {
     key: "componentDidMount",
     value: function componentDidMount() {
       var isActive = this.props.isActive;
@@ -75,6 +94,7 @@ var FreezeLayer = /*#__PURE__*/function (_Component) {
         this.setState({
           isChildActive: true
         });
+        this.enableFreeze();
       }
     }
   }, {
@@ -86,7 +106,8 @@ var FreezeLayer = /*#__PURE__*/function (_Component) {
 
       if (isActive != prevProps.isActive) {
         if (isActive) {
-          _KeyboardApi.Shortcut && _KeyboardApi.Shortcut.setState(false);
+          this.enableFreeze(); // Shortcut && Shortcut.setState(false);
+
           this.setState({
             isActive: true
           }, function () {
@@ -95,7 +116,8 @@ var FreezeLayer = /*#__PURE__*/function (_Component) {
             });
           });
         } else {
-          _KeyboardApi.Shortcut && _KeyboardApi.Shortcut.setState(true);
+          this.disableFreeze(); // Shortcut && Shortcut.setState(true);
+
           this.setState({
             isChildActive: false
           }, function () {
@@ -106,6 +128,11 @@ var FreezeLayer = /*#__PURE__*/function (_Component) {
         }
       }
     }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.disableFreeze();
+    }
   }, {
     key: "render",
     value: function render() {

package/lib/IconButton/IconButton.js

@@ -143,7 +143,8 @@ var IconButton = /*#__PURE__*/function (_React$Component) {
           ariaExpanded = a11y.ariaExpanded,
           ariaLabel = a11y.ariaLabel,
           ariaControls = a11y.ariaControls,
-          ariaLabelledby = a11y.ariaLabelledby;
+          ariaLabelledby = a11y.ariaLabelledby,
+          role = a11y.role;
       return /*#__PURE__*/_react["default"].createElement(_RippleEffect["default"], {
         palette: palette,
         isActive: isActive,
@@ -156,6 +157,7 @@ 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,
@@ -211,7 +213,8 @@ IconButton.propTypes = (_IconButton$propTypes = {
   ariaExpanded: _propTypes["default"].bool,
   ariaLabel: _propTypes["default"].string,
   ariaControls: _propTypes["default"].string,
-  ariaLabelledby: _propTypes["default"].string
+  ariaLabelledby: _propTypes["default"].string,
+  role: _propTypes["default"].string
 })), _defineProperty(_IconButton$propTypes, "dataIsHtml", _propTypes["default"].bool), _IconButton$propTypes);
 IconButton.defaultProps = {
   palette: 'default',

package/lib/Provider/Config.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDotLibraryConfig = getDotLibraryConfig;
+exports.setDotLibraryConfig = setDotLibraryConfig;
+var config = {
+  freezeLayer: {
+    enable: function enable() {},
+    disable: function disable() {}
+  }
+};
+
+function getDotLibraryConfig(key) {
+  return config[key];
+}
+
+function setDotLibraryConfig(configObj) {
+  config = Object.assign({}, config, configObj);
+}

package/lib/deprecated/utils/General.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatCurrency = formatCurrency;
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+function formatCurrency(number, symbol) {
+  // format number 1000000 to 1,234,567
+  if (number && number != 0) {
+    var typeOfData = _typeof(number);
+
+    var isDecimal = typeOfData == 'string' ? number.indexOf('.') != -1 : !Number.isInteger(number);
+
+    if (isDecimal) {
+      var val = number.toString().split('.');
+      var arr1 = "".concat(val[0].replace(/\D/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ','));
+      var finalVal = "".concat(symbol).concat(arr1, ".").concat(val[1]);
+      return finalVal;
+    } else {
+      var value = "".concat(symbol).concat(number.toString().replace(/\D/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ','));
+      return value;
+    }
+  }
+
+  return number;
+}

package/lib/form/fields/CurrencyField/CurrencyField.js

@@ -23,8 +23,6 @@ var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
 
 var _FieldsModule = _interopRequireDefault(require("../Fields.module.css"));
 
-var _General = require("../../../utils/General");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -145,7 +143,8 @@ var CurrencyField = /*#__PURE__*/function (_PureComponent) {
           needReadOnlyStyle = _this$props3.needReadOnlyStyle,
           isClickable = _this$props3.isClickable,
           userCurrencyType = _this$props3.userCurrencyType,
-          customProps = _this$props3.customProps;
+          customProps = _this$props3.customProps,
+          formatCurrency = _this$props3.formatCurrency;
       var _customProps$LabelPro = customProps.LabelProps,
           LabelProps = _customProps$LabelPro === void 0 ? {} : _customProps$LabelPro,
           _customProps$TextBoxP = customProps.TextBoxProps,
@@ -158,7 +157,7 @@ var CurrencyField = /*#__PURE__*/function (_PureComponent) {
       var formatValue = value;
 
       if (!isActive && value != 0) {
-        formatValue = (0, _General.formatCurrency)(value, userCurrencyType);
+        formatValue = formatCurrency(value, userCurrencyType);
       } else {
         formatValue = value;
       }
@@ -266,7 +265,8 @@ CurrencyField.propTypes = {
     TextBoxProps: _propTypes["default"].object,
     ValidationMessageProps1: _propTypes["default"].object,
     ValidationMessageProps2: _propTypes["default"].object
-  })
+  }),
+  formatCurrency: _propTypes["default"].func
 };
 CurrencyField.defaultProps = {
   errorType: 'primary',
@@ -282,7 +282,8 @@ CurrencyField.defaultProps = {
   labelCustomClass: '',
   isClickable: false,
   needReadOnlyStyle: true,
-  customProps: {}
+  customProps: {},
+  formatCurrency: function formatCurrency() {}
 };
 
 if (false) {

package/lib/list/Comment/Comment.js

@@ -70,7 +70,10 @@ var Comment = /*#__PURE__*/function (_Component) {
         customClass: "".concat(_CommentModule["default"].container, " ").concat(className, " "),
         onClick: onClick,
         dataId: "commentLstContainer",
-        title: commentTitle
+        title: commentTitle,
+        customProps: {
+          'aria-label': commentTitle
+        }
       }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: "ZD-TK-commentLine",
         iconClass: _CommentModule["default"].commentIcon

package/lib/list/Icons/AddNewIcon.js

@@ -13,10 +13,14 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
 
+var _Button = _interopRequireDefault(require("@zohodesk/components/lib/semantic/Button/Button"));
+
 var _IconsModule = _interopRequireDefault(require("./Icons.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -56,13 +60,14 @@ var AddNewIcon = /*#__PURE__*/function (_React$Component) {
           dataId = _this$props.dataId,
           dataTitle = _this$props.dataTitle,
           iconClass = _this$props.iconClass,
-          className = _this$props.className;
-      return /*#__PURE__*/_react["default"].createElement("span", {
+          className = _this$props.className,
+          customProps = _this$props.customProps;
+      return /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
         onClick: onClick,
-        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, " ").concat(className ? className : ''),
-        "data-id": dataId,
-        "data-title": dataTitle
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        customClass: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, " ").concat(className ? className : ''),
+        dataId: dataId,
+        title: dataTitle
+      }, customProps), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: "ZD-SE-addTickets",
         iconClass: iconClass ? iconClass : ''
       }));
@@ -78,5 +83,6 @@ AddNewIcon.propTypes = {
   dataId: _propTypes["default"].string,
   dataTitle: _propTypes["default"].string,
   iconClass: _propTypes["default"].string,
-  onClick: _propTypes["default"].func
+  onClick: _propTypes["default"].func,
+  customProps: _propTypes["default"].object
 };

package/lib/list/Icons/CompleteIcon.js

@@ -13,10 +13,14 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
 
+var _Button = _interopRequireDefault(require("@zohodesk/components/lib/semantic/Button/Button"));
+
 var _IconsModule = _interopRequireDefault(require("./Icons.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -57,13 +61,14 @@ var CompleteIcon = /*#__PURE__*/function (_React$Component) {
           dataTitle = _this$props.dataTitle,
           iconClass = _this$props.iconClass,
           className = _this$props.className,
-          iconSize = _this$props.iconSize;
-      return /*#__PURE__*/_react["default"].createElement("span", {
+          iconSize = _this$props.iconSize,
+          customProps = _this$props.customProps;
+      return /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
         onClick: onClick,
-        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, " ").concat(className ? className : ''),
-        "data-id": dataId,
-        "data-title": dataTitle
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        customClass: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, " ").concat(className ? className : ''),
+        dataId: dataId,
+        title: dataTitle
+      }, customProps), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: "ZD-GN-checkbox",
         iconClass: iconClass ? iconClass : '',
         size: iconSize
@@ -81,5 +86,6 @@ CompleteIcon.propTypes = {
   dataTitle: _propTypes["default"].string,
   iconClass: _propTypes["default"].string,
   iconSize: _propTypes["default"].string,
-  onClick: _propTypes["default"].func
+  onClick: _propTypes["default"].func,
+  customProps: _propTypes["default"].object
 };

package/lib/list/Icons/DeleteIcon.js

@@ -15,8 +15,12 @@ var _IconsModule = _interopRequireDefault(require("./Icons.module.css"));
 
 var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
 
+var _Button = _interopRequireDefault(require("@zohodesk/components/lib/semantic/Button/Button"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -57,13 +61,14 @@ var DeleteComponent = /*#__PURE__*/function (_React$Component) {
           dataTitle = _this$props.dataTitle,
           iconClass = _this$props.iconClass,
           iconSize = _this$props.iconSize,
-          className = _this$props.className;
-      return /*#__PURE__*/_react["default"].createElement("span", {
+          className = _this$props.className,
+          customProps = _this$props.customProps;
+      return /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
         onClick: onClick,
-        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].redHover, " ").concat(className ? className : ''),
-        "data-id": dataId,
-        "data-title": dataTitle
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        customClass: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].redHover, " ").concat(className ? className : ''),
+        dataId: dataId,
+        title: dataTitle
+      }, customProps), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: "ZD-GN-delete",
         iconClass: iconClass ? iconClass : '',
         size: iconSize
@@ -81,5 +86,6 @@ DeleteComponent.propTypes = {
   dataTitle: _propTypes["default"].string,
   iconClass: _propTypes["default"].string,
   iconSize: _propTypes["default"].string,
-  onClick: _propTypes["default"].func
+  onClick: _propTypes["default"].func,
+  customProps: _propTypes["default"].object
 };

package/lib/list/Icons/EditIcon.js

@@ -15,8 +15,12 @@ var _IconsModule = _interopRequireDefault(require("./Icons.module.css"));
 
 var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
 
+var _Button = _interopRequireDefault(require("@zohodesk/components/lib/semantic/Button/Button"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -57,13 +61,14 @@ var EditIcon = /*#__PURE__*/function (_React$Component) {
           dataTitle = _this$props.dataTitle,
           iconClass = _this$props.iconClass,
           iconSize = _this$props.iconSize,
-          className = _this$props.className;
-      return /*#__PURE__*/_react["default"].createElement("span", {
+          className = _this$props.className,
+          customProps = _this$props.customProps;
+      return /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
         onClick: onClick,
-        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, " ").concat(className ? className : ''),
-        "data-id": dataId,
-        "data-title": dataTitle
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        customClass: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, " ").concat(className ? className : ''),
+        dataId: dataId,
+        title: dataTitle
+      }, customProps), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: "ZD-GN-edit",
         iconClass: iconClass ? iconClass : '',
         size: iconSize
@@ -81,5 +86,6 @@ EditIcon.propTypes = {
   dataTitle: _propTypes["default"].string,
   iconClass: _propTypes["default"].string,
   iconSize: _propTypes["default"].string,
-  onClick: _propTypes["default"].func
+  onClick: _propTypes["default"].func,
+  customProps: _propTypes["default"].object
 };

package/lib/list/Icons/ReadUnreadIcon.js

@@ -15,8 +15,12 @@ var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
 
 var _IconsModule = _interopRequireDefault(require("./Icons.module.css"));
 
+var _Button = _interopRequireDefault(require("@zohodesk/components/lib/semantic/Button/Button"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -59,13 +63,14 @@ var ReadUnreadIcon = /*#__PURE__*/function (_React$Component) {
           iconClass = _this$props.iconClass,
           className = _this$props.className,
           isRead = _this$props.isRead,
-          iconSize = _this$props.iconSize;
-      return /*#__PURE__*/_react["default"].createElement("span", {
+          iconSize = _this$props.iconSize,
+          customProps = _this$props.customProps;
+      return /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
         onClick: onClick,
-        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, " ").concat(className ? className : ''),
-        "data-id": dataId,
-        "data-title": dataTitle
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        customClass: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, " ").concat(className ? className : ''),
+        dataId: dataId,
+        title: dataTitle
+      }, customProps), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: isRead ? 'ZD-GN-read' : 'ZD-GN-unread',
         size: iconSize,
         iconClass: "".concat(iconClassName ? iconClassName : '', " ").concat(iconClass ? iconClass : '')
@@ -88,5 +93,6 @@ ReadUnreadIcon.propTypes = {
   iconClass: _propTypes["default"].string,
   onClick: _propTypes["default"].func,
   isRead: _propTypes["default"].bool,
-  iconSize: _propTypes["default"].string
+  iconSize: _propTypes["default"].string,
+  customProps: _propTypes["default"].object
 };

package/lib/list/Icons/SmartIcon.js

@@ -15,12 +15,16 @@ var _IconsModule = _interopRequireDefault(require("./Icons.module.css"));
 
 var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
 
+var _Button = _interopRequireDefault(require("@zohodesk/components/lib/semantic/Button/Button"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -60,13 +64,14 @@ var SmartIcon = /*#__PURE__*/function (_Component) {
           dataId = _this$props.dataId,
           dataTitle = _this$props.dataTitle,
           iconClass = _this$props.iconClass,
-          className = _this$props.className;
-      return /*#__PURE__*/_react["default"].createElement("span", {
+          className = _this$props.className,
+          customProps = _this$props.customProps;
+      return /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
         onClick: onClick,
-        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, " ").concat(className ? className : ''),
-        "data-id": dataId,
-        "data-title": dataTitle
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        customClass: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, " ").concat(className ? className : ''),
+        dataId: dataId,
+        title: dataTitle
+      }, customProps), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: "ZD-TK-peek",
         iconClass: iconClass ? iconClass : ''
       }));
@@ -84,5 +89,6 @@ SmartIcon.propTypes = {
   features: _propTypes["default"].array,
   iconClass: _propTypes["default"].string,
   module: _propTypes["default"].string,
-  onClick: _propTypes["default"].func
+  onClick: _propTypes["default"].func,
+  customProps: _propTypes["default"].object
 };

package/lib/list/Thread/Thread.js

@@ -23,6 +23,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -62,13 +64,14 @@ var Thread = /*#__PURE__*/function (_Component) {
           className = _this$props.className,
           iconTitle = _this$props.iconTitle,
           dataId = _this$props.dataId,
-          align = _this$props.align;
+          align = _this$props.align,
+          customProps = _this$props.customProps;
       var count = threadCount === '0' ? '1' : threadCount;
-      return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      return /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
         customClass: "".concat(_ThreadModule["default"].container, " ").concat(_ThreadModule["default"]["align_".concat(align)], " ").concat(className),
         title: iconTitle,
         dataId: dataId
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      }, customProps), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: "ZD-TK-thread",
         size: "9"
       }), /*#__PURE__*/_react["default"].createElement("span", {
@@ -86,11 +89,13 @@ Thread.propTypes = {
   className: _propTypes["default"].string,
   count: _propTypes["default"].string,
   dataId: _propTypes["default"].string,
-  iconTitle: _propTypes["default"].string
+  iconTitle: _propTypes["default"].string,
+  customProps: _propTypes["default"].object
 };
 Thread.defaultProps = {
   align: 'left',
-  className: ''
+  className: '',
+  customProps: {}
 };
 
 if (false) {

package/lib/utils/General.js

@@ -3,14 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.formatCurrency = formatCurrency;
 exports.formatPhoneUrl = formatPhoneUrl;
 exports.getFullName = getFullName;
 exports.shallowDiff = shallowDiff;
 exports.stopBubbling = stopBubbling;
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 function stopBubbling(event) {
   event.preventDefault();
   event.stopPropagation && event.stopPropagation();
@@ -58,25 +55,4 @@ function formatPhoneUrl(phone) {
   }
 
   return phone;
-}
-
-function formatCurrency(number, symbol) {
-  // format number 1000000 to 1,234,567
-  if (number && number != 0) {
-    var typeOfData = _typeof(number);
-
-    var isDecimal = typeOfData == 'string' ? number.indexOf('.') != -1 : !Number.isInteger(number);
-
-    if (isDecimal) {
-      var val = number.toString().split('.');
-      var arr1 = "".concat(val[0].replace(/\D/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ','));
-      var finalVal = "".concat(symbol).concat(arr1, ".").concat(val[1]);
-      return finalVal;
-    } else {
-      var value = "".concat(symbol).concat(number.toString().replace(/\D/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ','));
-      return value;
-    }
-  }
-
-  return number;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.0.0-temp-63",
+  "version": "1.0.0-temp-66",
   "main": "lib/index",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",
@@ -33,7 +33,7 @@
     "velocity-react": "^1.4.3",
     "@zohodesk/variables": "1.0.0-beta.29",
     "@zohodesk/i18n": "^1.0.0-beta.7",
-    "@zohodesk/components": "1.0.0-alpha-227",
+    "@zohodesk/components": "1.0.0-temp-49",
     "@zohodesk/icons": "1.0.0-beta.92",
     "@zohodesk/svg": "1.0.0-beta.41",
     "@zohodesk/virtualizer": "1.0.3",
@@ -43,9 +43,9 @@
     "velocity-react": "^1.4.3",
     "@zohodesk/variables": "^1.0.0-beta.29",
     "@zohodesk/i18n": "^1.0.0-beta.7",
-    "@zohodesk/components": "1.0.0-alpha-227",
+    "@zohodesk/components": "^1.0.0-alpha-228",
     "@zohodesk/icons": "^1.0.0-beta.85",
-    "@zohodesk/svg": "1.0.0-beta.41"
+    "@zohodesk/svg": "^1.0.0-beta.41"
   },
   "react-cli": {
     "preprocessor": {