@zohoim/chat-components 1.1.2-beta.7 → 1.1.3-beta.1

package/lib/MessageAction/MessageAction.js

@@ -0,0 +1,77 @@
+"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"] = MessageAction;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _MoreActionItem = _interopRequireDefault(require("../MoreActionItem/MoreActionItem"));
+
+var _ActionIcon = _interopRequireDefault(require("../ActionIcon/ActionIcon"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+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 ? 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); }
+
+function MessageAction(props) {
+  var displayText = props.displayText,
+      id = props.id,
+      onClick = props.onClick,
+      onMouseEnter = props.onMouseEnter,
+      isShowInMore = props.isShowInMore,
+      iconTitle = props.iconTitle,
+      customProps = props.customProps,
+      closePopup = props.closePopup,
+      isDisabled = props.isDisabled,
+      isActive = props.isActive,
+      needMoreActionItemIcon = props.needMoreActionItemIcon;
+  var _customProps$moreActi = customProps.moreActionItemProps,
+      moreActionItemProps = _customProps$moreActi === void 0 ? _emptyConstants.dummyObject : _customProps$moreActi,
+      _customProps$actionIc = customProps.actionIconProps,
+      actionIconProps = _customProps$actionIc === void 0 ? _emptyConstants.dummyObject : _customProps$actionIc;
+  var renderIcon = (0, _react.useCallback)( // eslint-disable-next-line no-confusing-arrow
+  function () {
+    var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        id = _ref.id;
+
+    return needMoreActionItemIcon ? /*#__PURE__*/_react["default"].createElement(_ActionIcon["default"], _extends({
+      id: id,
+      needIconOnly: true
+    }, actionIconProps)) : null;
+  }, [actionIconProps, needMoreActionItemIcon]);
+  return isShowInMore ? /*#__PURE__*/_react["default"].createElement(_MoreActionItem["default"], _extends({
+    closePopup: closePopup,
+    displayText: displayText,
+    id: id,
+    isDisabled: isDisabled,
+    needIcon: needMoreActionItemIcon,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    renderIcon: renderIcon,
+    title: iconTitle
+  }, moreActionItemProps)) : /*#__PURE__*/_react["default"].createElement(_ActionIcon["default"], _extends({
+    id: id,
+    isActive: isActive,
+    isDisabled: isDisabled,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    title: iconTitle
+  }, actionIconProps));
+}
+
+MessageAction.propTypes = _propTypes["default"];
+MessageAction.defaultProps = _defaultProps["default"];

package/lib/MessageAction/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "MessageAction", {
+  enumerable: true,
+  get: function get() {
+    return _MessageAction["default"];
+  }
+});
+
+var _MessageAction = _interopRequireDefault(require("./MessageAction"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/MessageAction/props/defaultProps.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+/** ** Constants *** */
+var messageActionDefaultProps = {
+  customProps: _emptyConstants.dummyObject,
+  isShowInMore: false,
+  needMoreActionItemIcon: true
+};
+var _default = messageActionDefaultProps;
+exports["default"] = _default;

package/lib/MessageAction/props/propTypes.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _messageActionConstants = require("@zohoim/chat-components-utils/es/constants/messageActionConstants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+
+/** ** Constants *** */
+var messageActionPropTypes = {
+  displayText: _propTypes["default"].string.isRequired,
+  id: _propTypes["default"].oneOf(Object.values(_messageActionConstants.defaultMessageActions)).isRequired,
+  onClick: _propTypes["default"].func.isRequired,
+  onMouseEnter: _propTypes["default"].func,
+  closePopup: _propTypes["default"].func,
+  customProps: _propTypes["default"].shape({
+    actionIconProps: _propTypes["default"].object,
+    moreActionItemProps: _propTypes["default"].object
+  }),
+  iconTitle: _propTypes["default"].string,
+  isDisabled: _propTypes["default"].bool,
+  isShowInMore: _propTypes["default"].bool,
+  needMoreActionItemIcon: _propTypes["default"].bool,
+  isActive: _propTypes["default"].bool
+};
+var _default = messageActionPropTypes;
+exports["default"] = _default;

package/lib/MessageActions/MessageActions.js

@@ -0,0 +1,135 @@
+"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"] = MessageActions;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ActionIconWrapper = _interopRequireDefault(require("../ActionIconWrapper/ActionIconWrapper"));
+
+var _MessageActionsWrapper = _interopRequireDefault(require("../MessageActionsWrapper/MessageActionsWrapper"));
+
+var _MessageAction = _interopRequireDefault(require("../MessageAction/MessageAction"));
+
+var _More = _interopRequireDefault(require("@zohodesk/icon/es/general/More"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _useMessageActions2 = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/MessageActions/useMessageActions"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+var _MessageActionsModule = _interopRequireDefault(require("./css/MessageActions.module.css"));
+
+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 ? 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); }
+
+function MessageActions(props) {
+  var actions = props.actions,
+      defaultShowCount = props.defaultShowCount,
+      onSelect = props.onSelect,
+      onMouseEnter = props.onMouseEnter,
+      setRetainMessageActions = props.setRetainMessageActions,
+      renderSecondaryActions = props.renderSecondaryActions,
+      customStyle = props.customStyle,
+      customProps = props.customProps;
+  var _customProps$messageA = customProps.messageActionProps,
+      messageActionProps = _customProps$messageA === void 0 ? _emptyConstants.dummyObject : _customProps$messageA,
+      _customProps$actionIc = customProps.actionIconWrapperProps,
+      actionIconWrapperProps = _customProps$actionIc === void 0 ? _emptyConstants.dummyObject : _customProps$actionIc,
+      _customProps$messageA2 = customProps.messageActionsWrapperProps,
+      messageActionsWrapperProps = _customProps$messageA2 === void 0 ? _emptyConstants.dummyObject : _customProps$messageA2;
+  /* External CSS Customization */
+
+  var newStyle = (0, _useMergeStyle["default"])(_MessageActionsModule["default"], customStyle);
+  var handleClickAction = (0, _react.useCallback)(function (_ref) {
+    var id = _ref.id,
+        e = _ref.e;
+    onSelect && onSelect({
+      id: id,
+      e: e
+    });
+  }, [onSelect]);
+  var handleMouseEnterAction = (0, _react.useCallback)(function (_ref2) {
+    var id = _ref2.id,
+        e = _ref2.e;
+    onMouseEnter && onMouseEnter({
+      id: id,
+      e: e
+    });
+  }, [onMouseEnter]);
+  /* External Action Icon */
+
+  var renderAction = (0, _react.useCallback)(function () {
+    var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        id = _ref3.id,
+        isShowInMore = _ref3.isShowInMore,
+        action = _ref3.action,
+        closePopup = _ref3.closePopup;
+
+    var _ref4 = action || _emptyConstants.dummyObject,
+        displayText = _ref4.displayText,
+        iconTitle = _ref4.iconTitle,
+        isDisabled = _ref4.isDisabled;
+
+    return /*#__PURE__*/_react["default"].createElement(_MessageAction["default"], _extends({
+      key: id,
+      closePopup: closePopup,
+      displayText: displayText,
+      iconTitle: iconTitle,
+      id: id,
+      isDisabled: isDisabled,
+      isShowInMore: isShowInMore,
+      onClick: handleClickAction,
+      onMouseEnter: handleMouseEnterAction
+    }, messageActionProps));
+  }, [handleClickAction, handleMouseEnterAction, messageActionProps]);
+  /* Hooks handling */
+
+  var _useMessageActions = (0, _useMessageActions2["default"])({
+    actions: actions,
+    defaultRenderFunction: renderAction,
+    renderSecondaryActions: renderSecondaryActions
+  }),
+      actionDetails = _useMessageActions.actionDetails,
+      secondaryActions = _useMessageActions.secondaryActions;
+
+  var allActions = actionDetails.allActions;
+  /* Render More Icon */
+
+  var renderMoreIcon = (0, _react.useCallback)(function () {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: newStyle.moreIcon
+    }, /*#__PURE__*/_react["default"].createElement(_More["default"], null));
+  }, [newStyle.moreIcon]);
+  var renderMore = (0, _react.useCallback)(function (componentProps) {
+    return /*#__PURE__*/_react["default"].createElement(_ActionIconWrapper["default"], _extends({
+      renderIcon: renderMoreIcon
+    }, componentProps, actionIconWrapperProps));
+  }, [actionIconWrapperProps, renderMoreIcon]);
+  return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement(_MessageActionsWrapper["default"], _extends({
+    actions: allActions,
+    defaultShowCount: defaultShowCount,
+    renderMoreIcon: renderMore,
+    setRetainMessageActions: setRetainMessageActions
+  }, messageActionsWrapperProps)), secondaryActions ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: newStyle.secondaryActions
+  }, secondaryActions) : null);
+}
+
+MessageActions.propTypes = _propTypes["default"];
+MessageActions.defaultProps = _defaultProps["default"];
+MessageActions.displayName = 'MessageActions';

package/lib/MessageActions/css/MessageActions.module.css

@@ -0,0 +1,24 @@
+.varClass {
+  /* --messageActions-secondaryActions_margin: 5px; */
+}
+
+[dir=ltr] .moreIcon svg {
+  transform: rotate(90deg);
+}
+
+[dir=rtl] .moreIcon svg {
+  transform: rotate(-90deg);
+}
+
+.secondaryActions {
+  composes: varClass;
+  /* margin-top: var(--messageActions-secondaryActions_margin); */
+}
+
+[dir=ltr] .secondaryActions {
+  text-align: left;
+}
+
+[dir=rtl] .secondaryActions {
+  text-align: right;
+}

package/lib/MessageActions/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "MessageActions", {
+  enumerable: true,
+  get: function get() {
+    return _MessageActions["default"];
+  }
+});
+
+var _MessageActions = _interopRequireDefault(require("./MessageActions"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/MessageActions/props/defaultProps.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+var _messageActionConstants = require("@zohoim/chat-components-utils/es/constants/messageActionConstants");
+
+/** ** Constants *** */
+var messageActionsDefaultProps = {
+  customStyle: _emptyConstants.dummyObject,
+  customProps: _emptyConstants.dummyObject,
+  defaultShowCount: _messageActionConstants.actionsDefaultShowCount,
+  actions: _emptyConstants.dummyArray
+};
+var _default = messageActionsDefaultProps;
+exports["default"] = _default;

package/lib/MessageActions/props/propTypes.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _messageActionConstants = require("@zohoim/chat-components-utils/es/constants/messageActionConstants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+
+/** ** Constants *** */
+var messageActionsPropTypes = {
+  actions: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    displayText: _propTypes["default"].string.isRequired,
+    id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].oneOf(Object.values(_messageActionConstants.defaultMessageActions))]).isRequired,
+    iconTitle: _propTypes["default"].string,
+    isDisabled: _propTypes["default"].bool,
+    renderFunction: _propTypes["default"].func
+  })).isRequired,
+  onSelect: _propTypes["default"].func.isRequired,
+  onMouseEnter: _propTypes["default"].func,
+  customProps: _propTypes["default"].shape({
+    actionIconWrapperProps: _propTypes["default"].object,
+    messageActionProps: _propTypes["default"].object,
+    messageActionsWrapperProps: _propTypes["default"].object
+  }),
+  customStyle: _propTypes["default"].object,
+  defaultShowCount: _propTypes["default"].number,
+  renderSecondaryActions: _propTypes["default"].func,
+  setRetainMessageActions: _propTypes["default"].func
+};
+var _default = messageActionsPropTypes;
+exports["default"] = _default;

package/lib/MessageActionsMore/MessageActionsMore.js

@@ -0,0 +1,128 @@
+"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"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Popup = _interopRequireDefault(require("@zohodesk/components/es/Popup/Popup"));
+
+var _DropBox = _interopRequireDefault(require("@zohodesk/components/es/DropBox/DropBox"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _constants = require("../constants");
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+var _renderHandler = _interopRequireDefault(require("@zohoim/chat-components-utils/es/common/renderHandler"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _MessageActionsMoreModule = _interopRequireDefault(require("./css/MessageActionsMore.module.css"));
+
+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; }
+
+/** ** Libraries *** */
+
+/** ** Components *** */
+
+/** ** Constants *** */
+
+/** ** Methods *** */
+
+/** ** Hooks *** */
+
+/** ** Styles *** */
+function MessageActionsMoreComp(props) {
+  var actions = props.actions,
+      renderMoreIcon = props.renderMoreIcon,
+      customStyle = props.customStyle,
+      setRetainMessageActions = props.setRetainMessageActions,
+      popupSize = props.popupSize,
+      defaultPopupPosition = props.defaultPopupPosition,
+      getTargetRef = props.getTargetRef,
+      getContainerRef = props.getContainerRef,
+      position = props.position,
+      togglePopup = props.togglePopup,
+      isPopupReady = props.isPopupReady,
+      isPopupOpen = props.isPopupOpen,
+      removeClose = props.removeClose,
+      closePopupOnly = props.closePopupOnly,
+      isAbsolutePositioningNeeded = props.isAbsolutePositioningNeeded,
+      positionsOffset = props.positionsOffset;
+  var moreIcon = (0, _renderHandler["default"])(renderMoreIcon)({
+    isActive: isPopupReady
+  });
+  /* External CSS Customization */
+
+  var newStyle = (0, _useMergeStyle["default"])(_MessageActionsMoreModule["default"], customStyle);
+  var popupClass = (0, _react.useMemo)(function () {
+    return {
+      customDropBox: newStyle.popup,
+      customMobileDropBox: newStyle.mobilePopup,
+      customDropBoxWrap: newStyle.popupWrapper,
+      customMobileDropBoxWrap: newStyle.mobilePopupWrapper
+    };
+  }, [newStyle.popup, newStyle.mobilePopup, newStyle.popupWrapper, newStyle.mobilePopupWrapper]);
+
+  var handleTogglePopup = function handleTogglePopup(e) {
+    togglePopup(e, defaultPopupPosition);
+  };
+
+  var renderActions = (0, _react.useCallback)(function () {
+    return actions.map(function (action) {
+      var id = action.id,
+          renderFunction = action.renderFunction;
+      return (0, _renderHandler["default"])(renderFunction)({
+        id: id,
+        isShowInMore: true,
+        action: action,
+        setRetainMessageActions: setRetainMessageActions,
+        closePopup: closePopupOnly
+      }); // id, isRenderInMorePopup
+    });
+  }, [actions, closePopupOnly, setRetainMessageActions]);
+  var isRenderPopup = !!(moreIcon && isPopupOpen);
+  return /*#__PURE__*/_react["default"].createElement("span", {
+    className: newStyle.morePopupContainer
+  }, moreIcon ? /*#__PURE__*/_react["default"].createElement("span", {
+    ref: getTargetRef,
+    onClick: handleTogglePopup
+  }, moreIcon) : null, isRenderPopup ? /*#__PURE__*/_react["default"].createElement(_DropBox["default"], {
+    boxPosition: position,
+    customClass: popupClass,
+    customStyle: _emptyConstants.dummyObject,
+    getRef: getContainerRef,
+    isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+    isActive: isPopupReady,
+    isAnimate: true,
+    isArrow: false,
+    onClick: removeClose,
+    portalId: _constants.MSG_ACTION_POPUP_PORTAL,
+    positionsOffset: positionsOffset,
+    size: popupSize // isModel
+
+  }, renderActions()) : null);
+}
+
+var MessageActionsMore = (0, _Popup["default"])(MessageActionsMoreComp, undefined, undefined, {
+  isAbsolutePositioningNeeded: true
+});
+MessageActionsMoreComp.defaultProps = _defaultProps["default"];
+MessageActionsMoreComp.propTypes = _propTypes["default"];
+MessageActionsMore.defaultProps = _defaultProps["default"];
+MessageActionsMore.propTypes = _propTypes["default"];
+MessageActionsMore.displayName = 'MessageActionsMore';
+var _default = MessageActionsMore;
+exports["default"] = _default;

package/lib/MessageActionsMore/css/MessageActionsMore.module.css

@@ -0,0 +1,24 @@
+.container {
+  display: inline-block;
+}
+
+.morePopupContainer {
+  composes: container;
+  position: relative;
+}
+
+.popup {
+  padding: var(--zd_size10) 0 ;
+}
+
+.popupWrapper {
+  composes: container;
+}
+
+.mobilePopup {
+  composes: container;
+}
+
+.mobilePopupWrapper {
+  composes: container;
+}

package/lib/MessageActionsMore/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "MessageActionsMore", {
+  enumerable: true,
+  get: function get() {
+    return _MessageActionsMore["default"];
+  }
+});
+
+var _MessageActionsMore = _interopRequireDefault(require("./MessageActionsMore"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/MessageActionsMore/props/defaultProps.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+/** ** Constants *** */
+var messageActionsMoreDefaultProps = {
+  customStyle: _emptyConstants.dummyObject,
+  actions: _emptyConstants.dummyArray,
+  popupSize: 'small',
+  defaultPopupPosition: 'bottomCenter'
+};
+var _default = messageActionsMoreDefaultProps;
+exports["default"] = _default;

package/lib/MessageActionsMore/props/propTypes.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _popupPropConstants = require("../../constants/propConstants/popupPropConstants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+
+/** ** Constants *** */
+var messageActionsMorePropTypes = {
+  actions: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    id: _propTypes["default"].string.isRequired,
+    renderFunction: _propTypes["default"].func
+  })).isRequired,
+  renderMoreIcon: _propTypes["default"].func.isRequired,
+  setRetainMessageActions: _propTypes["default"].func,
+  customStyle: _propTypes["default"].object,
+  popupSize: _propTypes["default"].oneOf(_popupPropConstants.popupSize),
+  defaultPopupPosition: _propTypes["default"].oneOf(_popupPropConstants.popupPosition)
+};
+var _default = messageActionsMorePropTypes;
+exports["default"] = _default;