@zohodesk/dot 1.0.0-temp.93 → 1.0.0-test.239

package/es/version2/notification/DesktopNotification/DesktopNotification.js

@@ -1,7 +1,7 @@
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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, { useState } from 'react';
-import PropTypes from 'prop-types';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import { useZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
 import AutoClose from '../../../actions/AutoClose';
@@ -72,15 +72,12 @@ export function DesktopNotificationUI(props) {
   let {
     ExtraProps = {}
   } = customProps;
-
   function onClickSubmit(e) {
     onSubmit && onSubmit();
   }
-
   function onClickCancel(e) {
     onCancel && onCancel();
   }
-
   let animateClass = isClose ? style.rightanimate : style.leftanimate;
   let animateRemoveClass = isClose ? style.rightanimate : style.leftnoanimate;
   let getNextIndex = useZIndex();
@@ -151,56 +148,8 @@ export default function DesktopNotification(props) {
     Element: DesktopNotificationUI
   }));
 }
-DesktopNotification.propTypes = {
-  autoClose: PropTypes.bool,
-  cancelText: PropTypes.string,
-  customClass: PropTypes.object,
-  dataId: PropTypes.string,
-  getBottomContainer: PropTypes.func,
-  getSectionContainer: PropTypes.func,
-  getSubmitContainer: PropTypes.func,
-  hidePopNotification: PropTypes.func,
-  hideTime: PropTypes.string,
-  i18nKeys: PropTypes.object,
-  id: PropTypes.string,
-  info: PropTypes.string,
-  isAnimate: PropTypes.bool,
-  isClose: PropTypes.bool,
-  isMore: PropTypes.bool,
-  isShrinkView: PropTypes.bool,
-  message: PropTypes.string,
-  needAutoZindex: PropTypes.bool,
-  needClose: PropTypes.bool,
-  needIcon: PropTypes.bool,
-  onCancel: PropTypes.func,
-  onClose: PropTypes.func,
-  onSubmit: PropTypes.func,
-  secondaryInfo: PropTypes.string,
-  size: PropTypes.oneOf(['medium', 'large']),
-  subTitle: PropTypes.string,
-  submitText: PropTypes.string,
-  submitType: PropTypes.oneOf(['primary', 'danger', 'success']),
-  titleVariant: PropTypes.oneOf(['primary', 'secondary']),
-  type: PropTypes.oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification', 'alarm']),
-  customProps: PropTypes.shape({
-    ExtraProps: PropTypes.object
-  })
-};
-DesktopNotification.defaultProps = {
-  isMore: false,
-  isAnimate: true,
-  isClose: false,
-  autoClose: false,
-  hideTime: '3000',
-  dataId: 'toastMessage',
-  needAutoZindex: true,
-  needIcon: true,
-  titleVariant: 'primary',
-  isShrinkView: false,
-  needClose: true,
-  customProps: {}
-};
-
+DesktopNotification.propTypes = propTypes;
+DesktopNotification.defaultProps = defaultProps;
 if (false) {
   DesktopNotification.docs = {
     componentGroup: 'DesktopNotification',

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

@@ -1,17 +1,22 @@
 .parentElement {
-  margin-bottom: var(--zd_size7);
   position: relative;
+  margin-bottom: var(--zd_size7);
 }
 .container {
-  background-color: var(--zdt_desktopnotification_bg);
   color: var(--zdt_desktopnotification_text);
   transition: all var(--zd_transition4);
   position: relative;
-  transform-origin: right center;
   max-height: 100%;
+  pointer-events: auto;
+  background-color: var(--zdt_desktopnotification_bg);
   box-shadow: 0 4px 20px var(--zdt_desktopnotification_box_shadow);
   border-radius: 0 0 var(--zd_size10) var(--zd_size10);
-  pointer-events: auto;
+}
+[dir=ltr] .container {
+  transform-origin: right center;
+}
+[dir=rtl] .container {
+  transform-origin: left center;
 }
 .globalNotify {
   max-width: var(--zd_size490);
@@ -27,11 +32,17 @@
 /* Animation Style */
 .closeAnimation {
   max-height: 0;
-  margin-bottom: 0;
   transition: all var(--zd_transition3) 0.4s;
+  margin-bottom: 0;
 }
 .animation {
   composes: modeForward from '~@zohodesk/components/lib/common/animation.module.css';
+}
+[dir=ltr] .animation {
+  animation-duration: var(--zd_transition4);
+  -webkit-animation-duration: var(--zd_transition4);
+}
+[dir=rtl] .animation {
   animation-duration: var(--zd_transition4);
   -webkit-animation-duration: var(--zd_transition4);
 }
@@ -40,8 +51,8 @@
   composes: animation;
 }
 .leftnoanimate {
-  transform: translateX(0) scale(1);
   opacity: 1;
+  transform: translateX(0) scale(1);
 }
 .rightanimate {
   composes: slideRight from '~@zohodesk/components/lib/common/animation.module.css';
@@ -50,15 +61,20 @@
 }
 /* Container Style */
 .message {
-  padding: var(--zd_size10) var(--zd_size20) var(--zd_size10) var(--zd_size76);
-  border-top: 1px solid var(--zd_smoke1);
-  cursor: pointer;
   position: relative;
   color: var(--zd_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_smoke1);
+  cursor: pointer;
+}
+[dir=ltr] .message {
+  padding: var(--zd_size10) var(--zd_size20) var(--zd_size10) var(--zd_size76);
+}
+[dir=rtl] .message {
+  padding: var(--zd_size10) var(--zd_size76) var(--zd_size10) var(--zd_size20);
 }
 .message:hover {
   background: var(--zd_alabaster);
@@ -85,6 +101,6 @@
   margin-top: var(--zd_size20);
 }
 .footer {
-  border-radius: 0 0 var(--zd_size10) var(--zd_size10);
   overflow: hidden;
+  border-radius: 0 0 var(--zd_size10) var(--zd_size10);
 }

package/es/version2/notification/DesktopNotification/props/defaultProps.js

@@ -0,0 +1,14 @@
+export const defaultProps = {
+  isMore: false,
+  isAnimate: true,
+  isClose: false,
+  autoClose: false,
+  hideTime: '3000',
+  dataId: 'toastMessage',
+  needAutoZindex: true,
+  needIcon: true,
+  titleVariant: 'primary',
+  isShrinkView: false,
+  needClose: true,
+  customProps: {}
+};

package/es/version2/notification/DesktopNotification/props/propTypes.js

@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  autoClose: PropTypes.bool,
+  cancelText: PropTypes.string,
+  customClass: PropTypes.object,
+  dataId: PropTypes.string,
+  getBottomContainer: PropTypes.func,
+  getSectionContainer: PropTypes.func,
+  getSubmitContainer: PropTypes.func,
+  hidePopNotification: PropTypes.func,
+  hideTime: PropTypes.string,
+  i18nKeys: PropTypes.object,
+  id: PropTypes.string,
+  info: PropTypes.string,
+  isAnimate: PropTypes.bool,
+  isClose: PropTypes.bool,
+  isMore: PropTypes.bool,
+  isShrinkView: PropTypes.bool,
+  message: PropTypes.string,
+  needAutoZindex: PropTypes.bool,
+  needClose: PropTypes.bool,
+  needIcon: PropTypes.bool,
+  onCancel: PropTypes.func,
+  onClose: PropTypes.func,
+  onSubmit: PropTypes.func,
+  secondaryInfo: PropTypes.string,
+  size: PropTypes.oneOf(['medium', 'large']),
+  subTitle: PropTypes.string,
+  submitText: PropTypes.string,
+  submitType: PropTypes.oneOf(['primary', 'danger', 'success']),
+  titleVariant: PropTypes.oneOf(['primary', 'secondary']),
+  type: PropTypes.oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification', 'alarm']),
+  customProps: PropTypes.shape({
+    ExtraProps: PropTypes.object
+  })
+};

package/es/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import AlertClose from '../../AlertClose/AlertClose';
 import AlertIcons from '../../alertIcons/AlertIcons';
@@ -8,7 +9,6 @@ export default class DesktopNotificationHeader extends Component {
   constructor(props) {
     super(props);
   }
-
   render() {
     let {
       onClose,
@@ -49,24 +49,9 @@ export default class DesktopNotificationHeader extends Component {
       type: "light"
     })) : null);
   }
-
 }
-DesktopNotificationHeader.propTypes = {
-  closeTitle: PropTypes.string,
-  dataId: PropTypes.string,
-  needClose: PropTypes.bool,
-  needIcon: PropTypes.bool,
-  onClose: PropTypes.func,
-  title: PropTypes.string,
-  type: PropTypes.oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification', 'alarm']),
-  variant: PropTypes.oneOf(['primary', 'secondary'])
-};
-DesktopNotificationHeader.defaultProps = {
-  needIcon: true,
-  variant: 'primary',
-  needClose: true
-};
-
+DesktopNotificationHeader.propTypes = propTypes;
+DesktopNotificationHeader.defaultProps = defaultProps;
 if (false) {
   DesktopNotificationHeader.docs = {
     componentGroup: 'DesktopNotificationHeader',

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

@@ -5,20 +5,27 @@
     composes: varClass;
     min-height: var(--zd_size54);
     position: relative;
+    color: var(--zdt_desktopnotification_text);
     background-color: var(--alert_lookup_bg_color);
     border-style: solid;
     border-color: var(--commonalert_border_color);
     border-width: 2px 0 0 0;
-    color: var(--zdt_desktopnotification_text);
   }
   
   .title {
-    margin: 0 var(--zd_size5) 0 var(--zd_size10);
     font-size: var(--zd_font_size18);
     line-height: var(--zd_size22);
     font-family: var(--zd_bold);
     composes: ftsmooth wbreak from '~@zohodesk/components/lib/common/common.module.css';
   }
+  
+  [dir=ltr] .title {
+  margin: 0 var(--zd_size5) 0 var(--zd_size10);
+  }
+  
+  [dir=rtl] .title {
+    margin: 0 var(--zd_size10) 0 var(--zd_size5);
+  }
 
   .infoText {
     font-size: var(--zd_font_size14);
@@ -50,8 +57,11 @@
 
 
 /* Primary Header */
-.primary {
-    padding: var(--zd_size15) var(--zd_size45) 0 var(--zd_size20);
+[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 {
@@ -66,14 +76,26 @@
   .primary .close {
     position: absolute;
     top: var(--zd_size12);
-    right: var(--zd_size12);
+  }
+  
+  [dir=ltr] .primary .close {
+  right: var(--zd_size12);
+  }
+  
+  [dir=rtl] .primary .close {
+    left: var(--zd_size12);
   }
 
   /* Secondary Header */
   .secondary {
-    padding: var(--zd_size18) var(--zd_size70) var(--zd_size19) var(--zd_size75);
-    border-radius: 0 0 var(--zd_size10) var(--zd_size10);
     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 {
@@ -86,15 +108,30 @@
     position: absolute;
     top: 0;
     bottom: 0;
-    left: var(--zd_size18);
     margin: auto 0;
   }
 
+  [dir=ltr] .secondary .iconContainer {
+  left: var(--zd_size18);
+  }
+
+  [dir=rtl] .secondary .iconContainer {
+    right: var(--zd_size18);
+  }
+
   .secondary .close {
     position: absolute;
     top: 0;
     bottom: 0;
-    right: var(--zd_size12);
-    margin: auto 0 auto var(--zd_size25);
     height: var(--zd_size25);
+  }
+
+  [dir=ltr] .secondary .close {
+  right: var(--zd_size12);
+  margin: auto 0 auto var(--zd_size25);
+  }
+
+  [dir=rtl] .secondary .close {
+    left: var(--zd_size12);
+    margin: auto var(--zd_size25) auto 0;
   }

package/es/version2/notification/DesktopNotificationHeader/props/defaultProps.js

@@ -0,0 +1,5 @@
+export const defaultProps = {
+  needIcon: true,
+  variant: 'primary',
+  needClose: true
+};

package/es/version2/notification/DesktopNotificationHeader/props/propTypes.js

@@ -0,0 +1,11 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  closeTitle: PropTypes.string,
+  dataId: PropTypes.string,
+  needClose: PropTypes.bool,
+  needIcon: PropTypes.bool,
+  onClose: PropTypes.func,
+  title: PropTypes.string,
+  type: PropTypes.oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification', 'alarm']),
+  variant: PropTypes.oneOf(['primary', 'secondary'])
+};

package/lib/ActionButton/ActionButton.js

@@ -1,104 +1,80 @@
 "use strict";
 
 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); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.ActionButton = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
+var _defaultProps = require("./props/defaultProps");
+var _propTypes = require("./props/propTypes");
 var _Popup = _interopRequireDefault(require("@zohodesk/components/lib/Popup/Popup"));
-
 var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
-
 var _Button = _interopRequireDefault(require("@zohodesk/components/lib/Button/Button"));
-
 var _Layout = require("@zohodesk/components/lib/Layout");
-
-var _DropBox = _interopRequireDefault(require("@zohodesk/components/lib/DropBox/DropBox"));
-
+var _ResponsiveDropBox = _interopRequireDefault(require("@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox"));
 var _CssProvider = _interopRequireDefault(require("@zohodesk/components/lib/Provider/CssProvider"));
-
 var _ActionButtonModule = _interopRequireDefault(require("./ActionButton.module.css"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 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); } }
-
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
 function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 var ActionButton = /*#__PURE__*/function (_React$Component) {
   _inherits(ActionButton, _React$Component);
-
   var _super = _createSuper(ActionButton);
-
   function ActionButton(props) {
     var _this;
-
     _classCallCheck(this, ActionButton);
-
     _this = _super.call(this, props);
     _this.handleTogglePopup = _this.handleTogglePopup.bind(_assertThisInitialized(_this));
     return _this;
   }
-
   _createClass(ActionButton, [{
     key: "handleTogglePopup",
     value: function handleTogglePopup(e) {
       var _this$props = this.props,
-          togglePopup = _this$props.togglePopup,
-          defaultPosition = _this$props.defaultPosition;
+        togglePopup = _this$props.togglePopup,
+        defaultPosition = _this$props.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,
-          isArrow = _this$props2.isArrow,
-          text = _this$props2.text,
-          subText = _this$props2.subText,
-          arrowBoxDataId = _this$props2.arrowBoxDataId,
-          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;
+        isLoading = _this$props2.isLoading,
+        onClick = _this$props2.onClick,
+        size = _this$props2.size,
+        dataId = _this$props2.dataId,
+        isArrow = _this$props2.isArrow,
+        text = _this$props2.text,
+        subText = _this$props2.subText,
+        arrowBoxDataId = _this$props2.arrowBoxDataId,
+        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;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: "row",
         isCover: false,
@@ -121,7 +97,7 @@ 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, " "),
+        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, " ").concat(innerClassName, " "),
         "data-title": dataTitle
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "both"
@@ -154,7 +130,7 @@ var ActionButton = /*#__PURE__*/function (_React$Component) {
         name: "ZD-down",
         size: "6",
         iconClass: _ActionButtonModule["default"].arrow
-      })), isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_DropBox["default"], {
+      })), isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
         size: "small",
         isActive: isPopupOpen,
         boxPosition: position,
@@ -164,63 +140,22 @@ var ActionButton = /*#__PURE__*/function (_React$Component) {
           customDropBoxWrap: dropBoxClass
         },
         isBoxPaddingNeed: isBoxPaddingNeed,
-        getRef: getContainerRef
-      }, children) : null) : null));
+        getRef: getContainerRef,
+        popupGroup: popupGroup
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        flexible: true,
+        shrink: true,
+        scroll: "vertical"
+      }, children)) : null) : null));
     }
   }]);
-
   return ActionButton;
 }(_react["default"].Component);
-
 exports.ActionButton = ActionButton;
-ActionButton.defaultProps = {
-  size: 'medium',
-  isArrow: false,
-  arrowBoxDataId: 'arrowBox',
-  dataId: 'actionButton',
-  onHover: false,
-  className: '',
-  iconName: '',
-  iconSize: '9',
-  isDisabled: false,
-  dropBoxClass: '',
-  arrowBoxSize: 'medium',
-  isBoxPaddingNeed: true,
-  palette: 'primaryFilled',
-  removeChildrenTooltip: false
-};
-ActionButton.propTypes = {
-  arrowBoxDataId: _propTypes["default"].string,
-  arrowBoxSize: _propTypes["default"].oneOf(['small', 'medium']),
-  children: _propTypes["default"].node,
-  className: _propTypes["default"].string,
-  dataId: _propTypes["default"].string,
-  dataTitle: _propTypes["default"].string,
-  dropBoxClass: _propTypes["default"].string,
-  defaultPosition: _propTypes["default"].string,
-  position: _propTypes["default"].string,
-  iconName: _propTypes["default"].string,
-  iconSize: _propTypes["default"].string,
-  isArrow: _propTypes["default"].bool,
-  isBoxPaddingNeed: _propTypes["default"].bool,
-  isDisabled: _propTypes["default"].bool,
-  isLoading: _propTypes["default"].bool,
-  isPopupOpen: _propTypes["default"].bool,
-  onClick: _propTypes["default"].func,
-  onHover: _propTypes["default"].bool,
-  palette: _propTypes["default"].oneOf('primaryFilled', 'primary'),
-  removeClose: _propTypes["default"].func,
-  size: _propTypes["default"].oneOf(['small', 'medium', 'large']),
-  subText: _propTypes["default"].string,
-  text: _propTypes["default"].string,
-  getContainerRef: _propTypes["default"].func,
-  getTargetRef: _propTypes["default"].func,
-  removeChildrenTooltip: _propTypes["default"].bool
-};
+ActionButton.defaultProps = _defaultProps.defaultProps;
+ActionButton.propTypes = _propTypes.propTypes;
 ActionButton.docs = {
   componentGroup: 'Atom'
 };
-
 var _default = (0, _Popup["default"])(ActionButton);
-
 exports["default"] = _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/ActionButton/props/defaultProps.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = void 0;
+var defaultProps = {
+  size: 'medium',
+  isArrow: false,
+  arrowBoxDataId: 'arrowBox',
+  dataId: 'actionButton',
+  onHover: false,
+  className: '',
+  iconName: '',
+  iconSize: '9',
+  isDisabled: false,
+  dropBoxClass: '',
+  arrowBoxSize: 'medium',
+  isBoxPaddingNeed: true,
+  palette: 'primaryFilled',
+  removeChildrenTooltip: false,
+  innerClassName: ''
+};
+exports.defaultProps = defaultProps;