@zohoim/chat-components 1.0.9-alpha.0 → 1.0.10-alpha.0

package/es/ActionIcon/ActionIcon.js

@@ -41,7 +41,8 @@ export default function ActionIcon(props) {
     id,
     title,
     isDisabled,
-    needIconOnly
+    needIconOnly,
+    isActive
   } = props;
   const {
     actionIconWrapperProps = dummyObject
@@ -68,6 +69,7 @@ export default function ActionIcon(props) {
   }, [iconStyle, id]);
   return needIconOnly ? renderIcon() : /*#__PURE__*/React.createElement(ActionIconWrapper, {
     id: id,
+    isActive: isActive,
     isDisabled: isDisabled,
     onClick: onClick,
     onMouseEnter: onMouseEnter,

package/es/ActionIcon/props/propTypes.js

@@ -12,6 +12,7 @@ const actionIconPropTypes = {
   customStyle: PropTypes.object,
   isDisabled: PropTypes.bool,
   needIconOnly: PropTypes.bool,
-  title: PropTypes.string
+  title: PropTypes.string,
+  isActive: PropTypes.bool
 };
 export default actionIconPropTypes;

package/es/ActionIconWrapper/ActionIconWrapper.js

@@ -23,7 +23,8 @@ export default function ActionIconWrapper(props) {
     onMouseEnter: propOnMouseEnter,
     id,
     title,
-    isDisabled
+    isDisabled,
+    isActive
   } = props;
   const {
     onClick,
@@ -32,7 +33,8 @@ export default function ActionIconWrapper(props) {
     onClick: propOnClick,
     onMouseEnter: propOnMouseEnter,
     id,
-    isDisabled
+    isDisabled,
+    isActive
   });
   /* External CSS Customization */
 
@@ -42,7 +44,8 @@ export default function ActionIconWrapper(props) {
   const {
     actionIconWrapperClass
   } = cssJSLogic({
-    isDisabled
+    isDisabled,
+    isActive
   }, newStyle);
   /* Render Icon */
 

package/es/ActionIconWrapper/css/ActionIconWrapper.module.css

@@ -21,7 +21,7 @@
   border-radius: var(--actionIconWrapper-border_radius);
 }
 
-.actionIconWrapper:hover {
+.actionIconWrapper:hover, .actionIconWrapperActive{
   background-color: var(--imlib_chat_components_actionIconWrapper_bg_color);
   border-color: var(--imlib_chat_components_actionIconWrapper_border_color);
 }

package/es/ActionIconWrapper/css/cssJSLogic.js

@@ -2,11 +2,13 @@
 import { compileClassNames } from '@zohodesk/utils';
 export default function cssJSLogic(props, style) {
   const {
-    isDisabled
+    isDisabled,
+    isActive
   } = props;
   const actionIconWrapperClass = compileClassNames({
     [style.actionIconWrapper]: true,
-    [style.disabled]: isDisabled
+    [style.disabled]: isDisabled,
+    [style.actionIconWrapperActive]: isActive
   });
   return {
     actionIconWrapperClass

package/es/ActionIconWrapper/props/propTypes.js

@@ -7,6 +7,7 @@ const actionIconWrapperPropTypes = {
   renderIcon: PropTypes.func.isRequired,
   customStyle: PropTypes.object,
   isDisabled: PropTypes.bool,
-  title: PropTypes.string
+  title: PropTypes.string,
+  isActive: PropTypes.bool
 };
 export default actionIconWrapperPropTypes;

package/es/MessageAction/MessageAction.js

@@ -20,6 +20,7 @@ export default function MessageAction(props) {
     customProps,
     closePopup,
     isDisabled,
+    isActive,
     needMoreActionItemIcon
   } = props;
   const {
@@ -50,6 +51,7 @@ export default function MessageAction(props) {
     ...moreActionItemProps
   }) : /*#__PURE__*/React.createElement(ActionIcon, {
     id: id,
+    isActive: isActive,
     isDisabled: isDisabled,
     onClick: onClick,
     onMouseEnter: onMouseEnter,

package/es/MessageAction/props/propTypes.js

@@ -16,6 +16,7 @@ const messageActionPropTypes = {
   iconTitle: PropTypes.string,
   isDisabled: PropTypes.bool,
   isShowInMore: PropTypes.bool,
-  needMoreActionItemIcon: PropTypes.bool
+  needMoreActionItemIcon: PropTypes.bool,
+  isActive: PropTypes.bool
 };
 export default messageActionPropTypes;

package/es/MessageActions/MessageActions.js

@@ -103,8 +103,9 @@ export default function MessageActions(props) {
   const renderMoreIcon = useCallback(() => /*#__PURE__*/React.createElement("div", {
     className: newStyle.moreIcon
   }, /*#__PURE__*/React.createElement(MoreIcon, null)), [newStyle.moreIcon]);
-  const renderMore = useCallback(() => /*#__PURE__*/React.createElement(ActionIconWrapper, {
+  const renderMore = useCallback(componentProps => /*#__PURE__*/React.createElement(ActionIconWrapper, {
     renderIcon: renderMoreIcon,
+    ...componentProps,
     ...actionIconWrapperProps
   }), [actionIconWrapperProps, renderMoreIcon]);
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(MessageActionsWrapper, {

package/es/MessageActionsMore/MessageActionsMore.js

@@ -40,7 +40,9 @@ function MessageActionsMoreComp(props) {
     isAbsolutePositioningNeeded,
     positionsOffset
   } = props;
-  const moreIcon = renderHandler(renderMoreIcon)();
+  const moreIcon = renderHandler(renderMoreIcon)({
+    isActive: isPopupReady
+  });
   /* External CSS Customization */
 
   const newStyle = useMergeStyle(style, customStyle);
@@ -91,7 +93,7 @@ function MessageActionsMoreComp(props) {
 }
 
 const MessageActionsMore = Popup(MessageActionsMoreComp, undefined, undefined, {
-  isAbsolutePositioningNeeded: false
+  isAbsolutePositioningNeeded: true
 });
 MessageActionsMoreComp.defaultProps = messageActionsMoreDefaultProps;
 MessageActionsMoreComp.propTypes = messageActionsMorePropTypes;

package/es/MessageActionsMore/css/MessageActionsMore.module.css

@@ -4,6 +4,7 @@
 
 .morePopupContainer {
   composes: container;
+  position: relative;
 }
 
 .popup {

package/es/MessageActionsWrapper/MessageActionsWrapper.js

@@ -56,6 +56,7 @@ export default function MessageActionsWrapper(props) {
   }), [moreActions, renderMoreIcon, messageActionsMoreProps]);
   const renderRow = useCallback(() => /*#__PURE__*/React.createElement(Container, {
     alignBox: "row",
+    className: newStyle.row,
     isCover: false
   }, renderDefaultActions(), isShowMoreIcon ? renderMoreActions() : null), [renderDefaultActions, renderMoreActions, isShowMoreIcon]);
   return /*#__PURE__*/React.createElement("div", {

package/es/MessageActionsWrapper/css/MessageActionsWrapper.module.css

@@ -1,3 +1,7 @@
 .messageActionsWrapper {
   /* Use this class for message actions customization */
 }
+
+.row{
+  gap: var(--zd_size2) ;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohoim/chat-components",
-  "version": "1.0.9-alpha.0",
+  "version": "1.0.10-alpha.0",
   "description": "Chat Components",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -52,5 +52,5 @@
     "jsdom": "23.0.0",
     "react-to-jsx": "1.3.2"
   },
-  "gitHead": "9cda3855c3440ea8439c75bcb7b9e2a2ad41bc5b"
+  "gitHead": "9110a5872338d64aba014563ad4d5202e73e17f1"
 }