fix(Chat): properly position actions with overflow

CHANGELOG.md

@@ -44,6 +44,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix `Carousel` remove `CarouselItem` elements which are not visible @mnajdova ([#2356](https://github.com/microsoft/fluent-ui-react/pull/2356))
 - Fix selected item being wrongly removed on Backspace in `search` `Dropdown` @silviuavram ([#2349](https://github.com/microsoft/fluent-ui-react/pull/2349))
 - Fix `Toolbar` not being tabbable on wrapped focused item disappear @silviuavram ([#2321](https://github.com/microsoft/fluent-ui-react/pull/2321))
+- Fix positioning with `unstable_overflow` in `ChatMessage` @layershifter ([#2363](https://github.com/microsoft/fluent-ui-react/pull/2363))
 
 ### Features
 - Added sourcemaps to the dist output to simplify debugging @miroslavstastny ([#2329](https://github.com/microsoft/fluent-ui-react/pull/2329))

docs/src/examples/components/Chat/Usage/ChatExampleInScrollable.shorthand.steps.ts

@@ -1,6 +1,7 @@
-import { ChatItem, ChatMessage } from '@fluentui/react'
+import { Chat, ChatItem, ChatMessage } from '@fluentui/react'
 
 const selectors = {
+  chat: `.${Chat.className}`,
   item: (itemIndex: number) =>
     `.${ChatItem.className}:nth-child(${itemIndex}) .${ChatMessage.className}`,
 }
@@ -15,6 +16,14 @@ const config: ScreenerTestsConfig = {
         .snapshot('Hovers second message')
         .hover(selectors.item(3))
         .snapshot('Hovers third message'),
+    builder =>
+      builder
+        .executeScript(`document.querySelector("${selectors.chat}").parentNode.scrollTop = 10`)
+        .hover(selectors.item(1))
+        .snapshot('Hovers first message in scrolled view: actions are visible')
+        .executeScript(`document.querySelector("${selectors.chat}").parentNode.scrollTop = 20`)
+        .hover(selectors.item(1))
+        .snapshot('Hovers first message in scrolled view: actions are hidden'),
   ],
 }
 

docs/src/examples/components/Chat/Usage/ChatExampleInScrollable.shorthand.tsx

@@ -20,7 +20,7 @@ const ChatExampleInScrollableShorthand = () => {
   const [overflow] = useBooleanKnob({ name: 'overflow', initialValue: true })
   const [height] = useRangeKnob({
     name: 'height',
-    initialValue: '400px',
+    initialValue: '300px',
     min: '200px',
     max: '800px',
     step: 10,
@@ -82,25 +82,85 @@ const ChatExampleInScrollableShorthand = () => {
       key: 'message-3',
     },
     {
+      attached: true,
       message: (
-        <Chat.Message actionMenu={actionMenu} content="How are you?" unstable_overflow={overflow} />
+        <Chat.Message
+          actionMenu={actionMenu}
+          author="Jane Doe"
+          content="How are you?"
+          timestamp="Yesterday, 10:15 PM"
+          unstable_overflow={overflow}
+        />
       ),
       key: 'message-4',
     },
     {
+      attached: 'bottom',
       message: (
         <Chat.Message
           actionMenu={actionMenu}
+          author="Jane Doe"
           content="Do you want something?"
+          timestamp="Yesterday, 10:15 PM"
           unstable_overflow={overflow}
         />
       ),
       key: 'message-5',
     },
+    {
+      attached: 'top',
+      contentPosition: 'end',
+      message: (
+        <Chat.Message
+          actionMenu={actionMenu}
+          author="Jane Doe"
+          content="Yes"
+          mine
+          timestamp="Yesterday, 10:16 PM"
+          unstable_overflow={overflow}
+        />
+      ),
+      key: 'message-6',
+    },
+    {
+      attached: 'bottom',
+      contentPosition: 'end',
+      key: 'message-7',
+      message: (
+        <Chat.Message
+          actionMenu={actionMenu}
+          author="John Doe"
+          content={
+            <>
+              Please order a{' '}
+              <span aria-label="pizza" role="img">
+                🍕
+              </span>{' '}
+              for me
+            </>
+          }
+          mine
+          timestamp="Yesterday, 10:16 PM"
+          unstable_overflow={overflow}
+        />
+      ),
+    },
+    {
+      message: (
+        <Chat.Message
+          actionMenu={actionMenu}
+          author="Jane Doe"
+          content="Pepperoni?"
+          timestamp="Yesterday, 10:17 PM"
+          unstable_overflow={overflow}
+        />
+      ),
+      key: 'message-8',
+    },
   ]
 
   return (
-    <div style={{ height, width, overflow: 'scroll', margin: 50 }}>
+    <div style={{ height, width, overflow: 'scroll', margin: 75, marginLeft: 0 }}>
       <Chat items={items} styles={{ minHeight: '100%' }} />
     </div>
   )

packages/react/src/components/Chat/ChatMessage.tsx

@@ -17,6 +17,7 @@ import { Ref } from '@fluentui/react-component-ref'
 import * as customPropTypes from '@fluentui/react-proptypes'
 import cx from 'classnames'
 import * as _ from 'lodash'
+import PopperJs from 'popper.js'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 // @ts-ignore
@@ -238,12 +239,9 @@ const ChatMessage: React.FC<WithAsProp<ChatMessageProps>> &
       return actionMenuElement
     }
 
-    const menuRect: DOMRect = (positionActionMenu &&
-      _.invoke(menuRef.current, 'getBoundingClientRect')) || {
-      height: 0,
-    }
-    const messageRect: DOMRect = (positionActionMenu &&
-      _.invoke(messageNode, 'getBoundingClientRect')) || { height: 0 }
+    const messageRect: DOMRect | undefined =
+      positionActionMenu && messageNode?.getBoundingClientRect()
+    const overflowPadding: PopperJs.Padding = { top: Math.round(messageRect?.height || 0) }
 
     return (
       <Popper
@@ -263,8 +261,7 @@ const ChatMessage: React.FC<WithAsProp<ChatMessageProps>> &
               // Is required to properly position action items
               ...(overflow && {
                 boundariesElement: 'scrollParent',
-                escapeWithReference: true,
-                padding: { top: messageRect.height - menuRect.height },
+                padding: overflowPadding,
               }),
             },
           }