fix(ChatMessage): action menu doesn't disappear on click

CHANGELOG.md

@@ -38,6 +38,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Removed obsolete `play-sound-mute` icon from Teams theme @amramornov-ms ([#1598](https://github.com/stardust-ui/react/pull/1598))
 - Add svg pointing beak to the `Tooltip` component in Teams theme @mnajdova ([#1580](https://github.com/stardust-ui/react/pull/1580))
 - Add new values to the `brand`, `onyx` colors and `background4` token for default and brand color schemes in Teams theme @mnajdova ([#1581](https://github.com/stardust-ui/react/pull/1581))
+- Add additional logic for showing/hiding the `actionMenu` inside the `ChatMessage` in Teams theme, based on a variable @mnajdova ([#1590](https://github.com/stardust-ui/react/pull/1590))
 
 ### Documentation
 - Ensure docs content doesn't overlap with sidebar @kuzhelov ([#1568](https://github.com/stardust-ui/react/pull/1568))

docs/src/prototypes/chatMessages/ChatMessageWithPopover/ChatWithPopover.tsx

@@ -1,124 +1,158 @@
-import { Chat, Provider, Avatar } from '@stardust-ui/react'
+import { Chat, Provider, Avatar, ChatMessageProps } from '@stardust-ui/react'
 import * as React from 'react'
 import Popover from './Popover'
+import ReactionPopup from './ReactionPopup'
+import { Ref } from '@stardust-ui/react-component-ref'
+
+const reactions = [
+  {
+    icon: 'thumbs up',
+    content: '1K',
+    key: 'likes',
+    variables: { meReacting: true },
+  },
+  {
+    icon: 'thumbs down',
+    content: 2,
+    key: 'dislikes',
+  },
+]
+
+const reactionsWithPopup = reactions.map(reaction => render =>
+  render(reaction, (Component, props) => <ReactionPopup {...props} />),
+)
 
 const janeAvatar = {
   image: 'public/images/avatar/small/ade.jpg',
   status: { color: 'green', icon: 'check' },
 }
 
-const ChatWithPopover = () => (
-  <Provider
-    theme={{
-      componentStyles: {
-        ChatMessage: {
-          root: ({ props: p, theme: { siteVariables } }) => ({
-            '& a': {
-              color: siteVariables.colors.brand[600],
-            },
-          }),
-        },
-        Menu: {
-          root: {
-            background: '#fff',
-            transition: 'opacity 0.2s',
-            position: 'absolute',
+const ChatWithPopover = () => {
+  return (
+    <Provider
+      theme={{
+        componentStyles: {
+          ChatMessage: {
+            root: ({ props: p, theme: { siteVariables } }) => ({
+              '& a': {
+                color: siteVariables.colors.brand[600],
+              },
+            }),
+          },
+          Menu: {
+            root: {
+              background: '#fff',
+              transition: 'opacity 0.2s',
+              position: 'absolute',
 
-            '& a:focus': {
-              textDecoration: 'none',
-              color: 'inherit',
-            },
-            '& a': {
-              color: 'inherit',
-            },
+              '& a:focus': {
+                textDecoration: 'none',
+                color: 'inherit',
+              },
+              '& a': {
+                color: 'inherit',
+              },
 
-            '& .smile-emoji': {
-              position: 'absolute',
-              opacity: 0,
-              zIndex: -1,
-            },
+              '& .smile-emoji': {
+                position: 'absolute',
+                opacity: 0,
+                zIndex: -1,
+              },
 
-            '&.focused .smile-emoji': {
-              position: 'initial',
-              zIndex: 'initial',
-              opacity: 1,
-            },
+              '&.focused .smile-emoji': {
+                position: 'initial',
+                zIndex: 'initial',
+                opacity: 1,
+              },
 
-            '&:hover .smile-emoji': {
-              position: 'initial',
-              zIndex: 'initial',
-              opacity: 1,
+              '&:hover .smile-emoji': {
+                position: 'initial',
+                zIndex: 'initial',
+                opacity: 1,
+              },
             },
           },
         },
-      },
-    }}
-  >
-    <Chat
-      items={[
-        {
-          key: 'a',
-          message: {
-            content: (
-              <Chat.Message
-                actionMenu={<Popover />}
-                author="Jane Doe"
-                content={{
-                  content: (
-                    <div>
-                      <a href="/">Link</a> Hover me to see the actions <a href="/">Some Link</a>
-                    </div>
-                  ),
-                }}
-                timestamp="Yesterday, 10:15 PM"
-              />
-            ),
-          },
-          gutter: { content: <Avatar {...janeAvatar} /> },
-        },
-        {
-          key: 'b',
-          message: {
-            content: (
-              <Chat.Message
-                actionMenu={<Popover />}
-                author="Jane Doe"
-                content={{
-                  content: (
-                    <div>
-                      <a href="/">Link</a> Hover me to see the actions <a href="/">Some Link</a>
-                    </div>
-                  ),
-                }}
-                timestamp="Yesterday, 10:15 PM"
-              />
-            ),
+      }}
+    >
+      <Chat
+        items={[
+          {
+            key: 'a',
+            message: {
+              content: (
+                <TeamsChatMessage
+                  author="Jane Doe"
+                  content={{
+                    content: (
+                      <div>
+                        <a href="/">Link</a> Hover me to see the actions <a href="/">Some Link</a>
+                      </div>
+                    ),
+                  }}
+                  reactionGroup={{
+                    items: reactionsWithPopup,
+                  }}
+                  timestamp="Yesterday, 10:15 PM"
+                />
+              ),
+            },
+            gutter: { content: <Avatar {...janeAvatar} /> },
           },
-          gutter: { content: <Avatar {...janeAvatar} /> },
-        },
-        {
-          key: 'c',
-          message: {
-            content: (
-              <Chat.Message
-                actionMenu={<Popover />}
-                author="Jane Doe"
-                content={{
-                  content: (
-                    <div>
-                      <a href="/">Link</a> Hover me to see the actions <a href="/">Some Link</a>
-                    </div>
-                  ),
-                }}
-                timestamp="Yesterday, 10:15 PM"
-              />
-            ),
+          {
+            key: 'b',
+            message: {
+              content: (
+                <TeamsChatMessage
+                  author="Jane Doe"
+                  content={{
+                    content: (
+                      <div>
+                        <a href="/">Link</a> Hover me to see the actions <a href="/">Some Link</a>
+                      </div>
+                    ),
+                  }}
+                  reactionGroup={{
+                    items: reactionsWithPopup,
+                  }}
+                  timestamp="Yesterday, 10:15 PM"
+                />
+              ),
+            },
+            gutter: { content: <Avatar {...janeAvatar} /> },
           },
-          gutter: { content: <Avatar {...janeAvatar} /> },
-        },
-      ]}
-    />
-  </Provider>
-)
+        ]}
+      />
+    </Provider>
+  )
+}
+
+const TeamsChatMessage: React.FC<ChatMessageProps> = (props: ChatMessageProps) => {
+  const [showActionMenu, setShowActionMenu] = React.useState(false)
+  const [forceShowActionMenu, setForceShowActionMenu] = React.useState(false)
+  const [chatMessageRef, setChatMessageRef] = React.useState<HTMLElement>(null)
+
+  const handleBlur = e => !e.currentTarget.contains(e.relatedTarget) && setShowActionMenu(false)
+
+  return (
+    <Ref innerRef={setChatMessageRef}>
+      <Chat.Message
+        {...props}
+        actionMenu={
+          <Popover
+            chatMessageRef={chatMessageRef}
+            onForceShowActionMenuChange={setForceShowActionMenu}
+            onShowActionMenuChange={setShowActionMenu}
+          />
+        }
+        onMouseEnter={() => setShowActionMenu(true)}
+        onMouseLeave={() => !forceShowActionMenu && setShowActionMenu(false)}
+        onFocus={() => setShowActionMenu(true)}
+        onBlur={handleBlur}
+        variables={{ showActionMenu }}
+      />
+    </Ref>
+  )
+}
 
 export default ChatWithPopover

docs/src/prototypes/chatMessages/ChatMessageWithPopover/Popover.tsx

@@ -4,6 +4,9 @@ import cx from 'classnames'
 
 export interface PopoverProps {
   className?: string
+  onForceShowActionMenuChange?: (val: boolean) => void
+  onShowActionMenuChange?: (val: boolean) => void
+  chatMessageRef?: HTMLElement
 }
 
 interface PopoverState {
@@ -31,10 +34,20 @@ class Popover extends React.Component<PopoverProps, PopoverState> {
     this.setState({ focused: e.currentTarget.contains(e.relatedTarget) })
   }
 
+  handleActionableItemClick = e => {
+    const { onShowActionMenuChange, chatMessageRef } = this.props
+    onShowActionMenuChange(false)
+    // Currently when the action menu is closed because of some actionable item is clicked, we focus the ChatMessage
+    // this was not in the spec, so it may be changed if the requirement is different
+    e.type === 'keydown' && chatMessageRef && chatMessageRef.focus()
+  }
+
   render() {
+    const { onShowActionMenuChange, onForceShowActionMenuChange, ...rest } = this.props
+    delete rest.chatMessageRef
     return (
       <Menu
-        {...this.props}
+        {...rest}
         accessibility={popoverBehavior}
         iconOnly
         className={cx(this.props.className, this.state.focused ? 'focused' : '')}
@@ -44,27 +57,35 @@ class Popover extends React.Component<PopoverProps, PopoverState> {
             icon: 'smile',
             className: 'smile-emoji',
             'aria-label': 'smile one',
+            onClick: this.handleActionableItemClick,
           },
           {
             key: 'smile2',
             icon: 'smile',
             className: 'smile-emoji',
             'aria-label': 'smile two',
+            onClick: this.handleActionableItemClick,
           },
           {
             key: 'smile3',
             icon: 'smile',
             className: 'smile-emoji',
             'aria-label': 'smile three',
+            onClick: this.handleActionableItemClick,
           },
           {
             key: 'a',
             icon: 'thumbs up',
             'aria-label': 'thumbs up',
+            onClick: this.handleActionableItemClick,
           },
           {
             key: 'c',
             icon: 'ellipsis horizontal',
+            onMenuOpenChange: (e, { menuOpen }) => {
+              onShowActionMenuChange(true)
+              onForceShowActionMenuChange(menuOpen)
+            },
             'aria-label': 'more options',
             indicator: false,
             menu: {

docs/src/prototypes/chatMessages/MessageReactionsWithPopup/ReactionPopup.tsx → docs/src/prototypes/chatMessages/ChatMessageWithPopover/ReactionPopup.tsx

@@ -9,13 +9,13 @@ const getAriaLabel = ({ content: numberOfPersons, icon: emojiType }: ReactionPro
   return `${numberOfPersons} people reacted this message with a ${emojiType} emoji. Open menu to see people who reacted.`
 }
 
-class ReactionPopup extends React.Component<ReactionProps, any> {
+class ReactionPopup extends React.Component<ReactionProps, { open: boolean }> {
   state = {
     open: false,
   }
 
   handleKeyDownOnMenu = e => {
-    if ((e.shiftKey && e.keyCode === keyboardKey.Tab) || e.keyCode === keyboardKey.Tab) {
+    if (e.keyCode === keyboardKey.Tab) {
       this.setState({ open: false })
     }
   }
@@ -35,16 +35,14 @@ class ReactionPopup extends React.Component<ReactionProps, any> {
             aria-label={getAriaLabel(this.props)}
           />
         }
-        content={{
-          content: (
-            <Menu
-              items={['Jane Doe', 'John Doe']}
-              vertical
-              variables={{ borderColor: 'transparent' }}
-              onKeyDown={this.handleKeyDownOnMenu}
-            />
-          ),
-        }}
+        content={
+          <Menu
+            items={['Jane Doe', 'John Doe']}
+            vertical
+            variables={{ borderColor: 'transparent' }}
+            onKeyDown={this.handleKeyDownOnMenu}
+          />
+        }
         inline
         on="hover"
         open={this.state.open}