@zohoim/chat-components 1.0.10-temp → 1.0.11-beta.1

package/README.md

@@ -10,6 +10,11 @@ In this Library, We Provide Some Basic Message Components to Build Your Chat App
 
 > import MessageBubble from '@zohoim/chat-components/es/MessageBubble/MessageBubble’;
 
+# 1.0.11
+
+- changes for retaining hover actions
+- @zohodesk/components version update
+
 # 1.0.9
 
 - chat bubble ui issues fixes

package/es/Message/Message.js

@@ -12,6 +12,9 @@ import MessageBox from "../MessageBox/MessageBox";
 import MessageAvatar from "../MessageAvatar/MessageAvatar";
 import MessageActions from "../MessageActions/MessageActions";
 import MessageStatus from "../MessageStatus/MessageStatus";
+/** ** Hooks *** */
+
+import useMessage from '@zohoim/chat-components-hooks/es/Message/useMessage';
 /** ** Methods *** */
 
 import getMessageStatus from '@zohoim/chat-components-utils/es/getMessageStatus';
@@ -35,6 +38,10 @@ export default function Message(props) {
     renderContent,
     customProps
   } = props;
+  const {
+    retainMessageActions,
+    setRetainMessageActions
+  } = useMessage();
   const {
     messageBubbleProps = dummyObject,
     messageOwnerProps = dummyObject,
@@ -111,12 +118,13 @@ export default function Message(props) {
       actions,
       onSelect: onSelectAction,
       renderSecondaryActions,
-      onMouseEnter: onMouseEnterAction
+      onMouseEnter: onMouseEnterAction,
+      setRetainMessageActions
     };
     return /*#__PURE__*/React.createElement(MessageActions, { ...props,
       ...messageActionsProps
     });
-  }, [actions, onSelectAction, onMouseEnterAction, renderSecondaryActions, messageActionsProps]);
+  }, [actions, onSelectAction, onMouseEnterAction, renderSecondaryActions, messageActionsProps, setRetainMessageActions]);
   return /*#__PURE__*/React.createElement(MessageBubble, {
     direction: direction,
     isActive: isActive,
@@ -125,6 +133,7 @@ export default function Message(props) {
     renderMessageActions: handleRenderMessageActions,
     renderMessageBox: handleRenderMessageBox,
     renderMessageOwner: handleRenderMessageOwner,
+    retainMessageActions: retainMessageActions,
     ...messageBubbleProps
   });
 }

package/es/MessageActions/MessageActions.js

@@ -26,6 +26,7 @@ export default function MessageActions(props) {
     defaultShowCount,
     onSelect,
     onMouseEnter,
+    setRetainMessageActions,
     renderSecondaryActions,
     customStyle,
     customProps
@@ -112,6 +113,7 @@ export default function MessageActions(props) {
     actions: allActions,
     defaultShowCount: defaultShowCount,
     renderMoreIcon: renderMore,
+    setRetainMessageActions: setRetainMessageActions,
     ...messageActionsWrapperProps
   }), secondaryActions ? /*#__PURE__*/React.createElement("div", {
     className: newStyle.secondaryActions

package/es/MessageActions/props/propTypes.js

@@ -20,6 +20,7 @@ const messageActionsPropTypes = {
   }),
   customStyle: PropTypes.object,
   defaultShowCount: PropTypes.number,
-  renderSecondaryActions: PropTypes.func
+  renderSecondaryActions: PropTypes.func,
+  setRetainMessageActions: PropTypes.func
 };
 export default messageActionsPropTypes;

package/es/MessageActionsMore/MessageActionsMore.js

@@ -25,6 +25,7 @@ function MessageActionsMoreComp(props) {
     actions,
     renderMoreIcon,
     customStyle,
+    setRetainMessageActions,
     popupSize,
     defaultPopupPosition,
 
@@ -66,9 +67,10 @@ function MessageActionsMoreComp(props) {
       id,
       isShowInMore: true,
       action,
+      setRetainMessageActions,
       closePopup: closePopupOnly
     }); // id, isRenderInMorePopup
-  }), [actions, closePopupOnly]);
+  }), [actions, closePopupOnly, setRetainMessageActions]);
   const isRenderPopup = !!(moreIcon && isPopupOpen);
   return /*#__PURE__*/React.createElement("span", {
     className: newStyle.morePopupContainer

package/es/MessageActionsMore/props/propTypes.js

@@ -6,6 +6,7 @@ const messageActionsMorePropTypes = {
     renderFunction: PropTypes.func
   })).isRequired,
   renderMoreIcon: PropTypes.func.isRequired,
+  setRetainMessageActions: PropTypes.func,
   customStyle: PropTypes.object,
   popupSize: PropTypes.oneOf(['mini', 'xmini', 'xsmall', 'small', 'medium', 'large', 'mlarge', 'xlarge', 'xxlarge', 'default']),
   defaultPopupPosition: PropTypes.oneOf([['bottomCenter', 'bottomLeftToRight', 'bottomCenterToRight', 'bottomRightToLeft', 'bottomCenterToLeft', 'topCenter', 'topLeftToRight', 'topCenterToRight', 'topRightToLeft', 'topCenterToLeft', 'rightTopToBottom', 'rightCenterToBottom', 'rightCenter', 'rightBottomToTop', 'rightCenterToTop', 'leftTopToBottom', 'leftCenterToBottom', 'leftCenter', 'leftBottomToTop', 'leftCenterToTop', 'bottomRight', 'bottomLeft', 'topRight', 'topLeft', 'rightBottom', 'rightTop', 'leftBottom', 'leftTop']])

package/es/MessageActionsWrapper/MessageActionsWrapper.js

@@ -25,7 +25,8 @@ export default function MessageActionsWrapper(props) {
     renderMoreIcon,
     defaultShowCount,
     customStyle,
-    customProps
+    customProps,
+    setRetainMessageActions
   } = props;
   const {
     messageActionsMoreProps = dummyObject
@@ -46,14 +47,16 @@ export default function MessageActionsWrapper(props) {
     return renderHandler(renderFunction)({
       id,
       isShowInMore: false,
+      setRetainMessageActions,
       action
     }); // id, isRenderInMorePopup
-  }), [defaultActions]);
+  }), [defaultActions, setRetainMessageActions]);
   const renderMoreActions = useCallback(() => /*#__PURE__*/React.createElement(MessageActionsMore, {
     actions: moreActions,
     renderMoreIcon: renderMoreIcon,
+    setRetainMessageActions: setRetainMessageActions,
     ...messageActionsMoreProps
-  }), [moreActions, renderMoreIcon, messageActionsMoreProps]);
+  }), [moreActions, renderMoreIcon, messageActionsMoreProps, setRetainMessageActions]);
   const renderRow = useCallback(() => /*#__PURE__*/React.createElement(Container, {
     alignBox: "row",
     className: newStyle.row,

package/es/MessageActionsWrapper/props/propTypes.js

@@ -10,6 +10,7 @@ const messageActionsWrapperPropTypes = {
   }),
   customStyle: PropTypes.object,
   defaultShowCount: PropTypes.number,
-  renderMoreIcon: PropTypes.func
+  renderMoreIcon: PropTypes.func,
+  setRetainMessageActions: PropTypes.func
 };
 export default messageActionsWrapperPropTypes;

package/es/MessageBubble/css/MessageBubble.module.css

@@ -43,13 +43,6 @@
   flex-direction: column;
   position: absolute;
   top:0 ;
-  visibility: hidden;
-  opacity: 0;
-}
-
-.messageBubble:hover .messageActionWrapper{
-  visibility: visible;
-  opacity: 1;
 }
 
 .messageActionWrapperEnd {

package/es/MessageBubble/props/defaultProps.js

@@ -6,6 +6,7 @@ const messageBubbleDefaultProps = {
   isActive: false,
   needMessageActions: true,
   customStyle: dummyObject,
-  needSender: true
+  needSender: true,
+  retainMessageActions: false
 };
 export default messageBubbleDefaultProps;

package/es/MessageBubble/props/propTypes.js

@@ -12,6 +12,7 @@ const messageBubblePropTypes = {
   needSender: PropTypes.bool,
   renderMessageActions: PropTypes.func,
   renderMessageBoxFooter: PropTypes.func,
-  renderMessageOwner: PropTypes.func
+  renderMessageOwner: PropTypes.func,
+  retainMessageActions: PropTypes.bool
 };
 export default messageBubblePropTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohoim/chat-components",
-  "version": "1.0.10-temp",
+  "version": "1.0.11-beta.1",
   "description": "Chat Components",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -35,15 +35,15 @@
     "!**/__tests__"
   ],
   "dependencies": {
-    "@zohodesk/components": "1.2.43",
+    "@zohodesk/components": "1.2.56",
     "@zohodesk/hooks": "2.0.2",
     "@zohodesk/icon": "1.3.15",
     "@zohodesk/icons": "1.0.20",
     "@zohodesk/utils": "1.3.13",
     "@zohodesk/variables": "1.0.0",
     "@zohodesk/virtualizer": "1.0.13",
-    "@zohoim/chat-components-hooks": "^1.0.4",
-    "@zohoim/chat-components-utils": "^1.0.4"
+    "@zohoim/chat-components-hooks": "1.0.5-beta.1",
+    "@zohoim/chat-components-utils": "1.0.4"
   },
   "devDependencies": {
     "@zohodesk-private/color-variable-preprocessor": "1.2.1",
@@ -52,5 +52,5 @@
     "jsdom": "23.0.0",
     "react-to-jsx": "1.3.2"
   },
-  "gitHead": "e67afa09b4cd8a8be3982a9cc800a71ea811593f"
+  "gitHead": "7873aeee4583e0177179ed66b92b65f497589d96"
 }