feat(Chat): Allow to disable actions menu positioning

CHANGELOG.md

@@ -16,6 +16,7 @@
 This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+
 ### BREAKING CHANGES
 - Control Tree `activeItemIds` through `expanded` TreeItem prop @silviuavram ([#2061](https://github.com/stardust-ui/react/pull/2061))
 - Rename all @stardust-ui scope to @fluentui ([#2117](https://github.com/microsoft/fluent-ui-react/pull/2117))
@@ -41,6 +42,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Expanding experimental accessibility schema to more components @mshoho ([#2052](https://github.com/stardust-ui/react/pull/2052))
 - Add base `Carousel` component @silviuavram ([#1979](https://github.com/microsoft/fluent-ui-react/pull/1979))
 
+### Performance
+- Allow suppression of action menu positioning in `ChatMessage` @jurokapsiar ([#2126](https://github.com/microsoft/fluent-ui-react/pull/2126))
+
 ### Documentation
 - Add usage example for `Tooltip` on disabled elements @mnajdova ([#2091](https://github.com/microsoft/fluent-ui-react/pull/2091))
 - Prototype for hexgonal avatars @mnajdova ([#2093](https://github.com/microsoft/fluent-ui-react/pull/2093))

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

@@ -100,6 +100,9 @@ export interface ChatMessageProps
    */
   onMouseEnter?: ComponentEventHandler<ChatMessageProps>
 
+  /** Allows suppression of action menu positioning for performance reasons */
+  positionActionMenu?: boolean
+
   /** Reaction group applied to the message. */
   reactionGroup?: ShorthandValue<ReactionGroupProps> | ShorthandCollection<ReactionProps>
 
@@ -140,6 +143,7 @@ class ChatMessage extends UIComponent<WithAsProp<ChatMessageProps>, ChatMessageS
     onBlur: PropTypes.func,
     onFocus: PropTypes.func,
     onMouseEnter: PropTypes.func,
+    positionActionMenu: PropTypes.bool,
     reactionGroup: PropTypes.oneOfType([
       customPropTypes.collectionShorthand,
       customPropTypes.itemShorthand,
@@ -152,6 +156,7 @@ class ChatMessage extends UIComponent<WithAsProp<ChatMessageProps>, ChatMessageS
     accessibility: chatMessageBehavior,
     as: 'div',
     badgePosition: 'end',
+    positionActionMenu: true,
     reactionGroupPosition: 'start',
   }
 
@@ -206,7 +211,7 @@ class ChatMessage extends UIComponent<WithAsProp<ChatMessageProps>, ChatMessageS
     actionMenu: ChatMessageProps['actionMenu'],
     styles: ComponentSlotStylesPrepared,
   ) {
-    const { unstable_overflow: overflow } = this.props
+    const { unstable_overflow: overflow, positionActionMenu } = this.props
     const { messageNode } = this.state
 
     const actionMenuElement = Menu.create(actionMenu, {
@@ -222,32 +227,37 @@ class ChatMessage extends UIComponent<WithAsProp<ChatMessageProps>, ChatMessageS
       return actionMenuElement
     }
 
-    const menuRect: DOMRect = _.invoke(this.menuRef.current, 'getBoundingClientRect') || {
+    const menuRect: DOMRect = (positionActionMenu &&
+      _.invoke(this.menuRef.current, 'getBoundingClientRect')) || {
       height: 0,
     }
-    const messageRect: DOMRect = _.invoke(messageNode, 'getBoundingClientRect') || { height: 0 }
+    const messageRect: DOMRect = (positionActionMenu &&
+      _.invoke(messageNode, 'getBoundingClientRect')) || { height: 0 }
 
     return (
       <Popper
+        enabled={positionActionMenu}
         align="end"
-        modifiers={{
-          // https://popper.js.org/popper-documentation.html#modifiers..flip.behavior
-          // Forces to flip only in "top-*" positions
-          flip: { behavior: ['top'] },
-          preventOverflow: {
-            escapeWithReference: false,
-            // https://popper.js.org/popper-documentation.html#modifiers..preventOverflow.priority
-            // Forces to stop prevent overflow on bottom and bottom
-            priority: ['left', 'right'],
-
-            // Is required to properly position action items
-            ...(overflow && {
-              boundariesElement: 'scrollParent',
-              escapeWithReference: true,
-              padding: { top: messageRect.height - menuRect.height },
-            }),
-          },
-        }}
+        modifiers={
+          positionActionMenu && {
+            // https://popper.js.org/popper-documentation.html#modifiers..flip.behavior
+            // Forces to flip only in "top-*" positions
+            flip: { behavior: ['top'] },
+            preventOverflow: {
+              escapeWithReference: false,
+              // https://popper.js.org/popper-documentation.html#modifiers..preventOverflow.priority
+              // Forces to stop prevent overflow on bottom and bottom
+              priority: ['left', 'right'],
+
+              // Is required to properly position action items
+              ...(overflow && {
+                boundariesElement: 'scrollParent',
+                escapeWithReference: true,
+                padding: { top: messageRect.height - menuRect.height },
+              }),
+            },
+          }
+        }
         position="above"
         positionFixed={overflow}
         targetRef={messageNode}