fix(react-northstar)(ChatMessage): action menu positioning in RTL

packages/fluentui/CHANGELOG.md

@@ -18,6 +18,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### Fixes
+- `ChatMessage` action menu is moved horizontally at the start in RTL. @silviuaavram ([#26378](https://github.com/microsoft/fluentui/pull/26378))
+
 <!--------------------------------[ v0.66.0 ]------------------------------- -->
 ## [v0.66.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-northstar_v0.66.0) (2023-01-06)
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-northstar_v0.65.0..@fluentui/react-northstar_v0.66.0)

packages/fluentui/react-northstar/src/components/Chat/ChatMessage.tsx

@@ -336,6 +336,7 @@ export const ChatMessage = (React.forwardRef<HTMLDivElement, ChatMessageProps>((
   const popperRef = React.useRef<PopperRefHandle>();
   const { targetRef: actionsMenuTargetRef, containerRef: actionsMenuRef } = usePopper({
     align: 'end',
+    rtl: context.rtl,
     position: 'above',
     positionFixed: overflow,
 

packages/fluentui/react-northstar/test/specs/components/Chat/ChatMessage-test.tsx

@@ -1,9 +1,23 @@
+import * as React from 'react';
+
 import { handlesAccessibility, implementsShorthandProp, isConformant } from 'test/specs/commonTests';
 
 import { ChatMessage } from 'src/components/Chat/ChatMessage';
 import { Text } from 'src/components/Text/Text';
+import { usePopper } from 'src/utils/positioner';
+import { LikeIcon } from '@fluentui/react-icons-northstar';
 import { ChatMessageDetails } from 'src/components/Chat/ChatMessageDetails';
 import { ChatMessageContent } from 'src/components/Chat/ChatMessageContent';
+import { mountWithProvider, EmptyThemeProvider } from 'test/utils';
+
+jest.mock('src/utils/positioner', () => {
+  const actualPositioner = jest.requireActual('src/utils/positioner');
+
+  return {
+    ...actualPositioner,
+    usePopper: jest.fn().mockReturnValue(actualPositioner.usePopper),
+  };
+});
 
 const chatMessageImplementsShorthandProp = implementsShorthandProp(ChatMessage);
 
@@ -24,4 +38,47 @@ describe('ChatMessage', () => {
   describe('accessibility', () => {
     handlesAccessibility(ChatMessage);
   });
+
+  describe('rtl', () => {
+    beforeEach(() => jest.clearAllMocks());
+
+    function render(wrappingComponent?: React.ComponentType) {
+      const actionMenu = {
+        iconOnly: true,
+        items: [
+          {
+            key: 'like',
+            icon: <LikeIcon />,
+            title: 'Like',
+          },
+        ],
+      };
+
+      mountWithProvider(
+        <ChatMessage
+          actionMenu={actionMenu}
+          key="message-1"
+          content="Hello"
+          author="Robert Tolbert"
+          timestamp="10:15 PM"
+          mine
+        />,
+        { wrappingComponent },
+      );
+    }
+    it('should pass rtl parameter as true to usePopper in RTL', () => {
+      const RTLProvider = props => <EmptyThemeProvider {...props} rtl={true} />;
+      render(RTLProvider);
+
+      expect(usePopper).toHaveBeenCalledTimes(1);
+      expect(usePopper).toHaveBeenCalledWith(expect.objectContaining({ rtl: true }));
+    });
+
+    it('should pass rtl parameter as undefined to usePopper in LTR', () => {
+      render();
+
+      expect(usePopper).toHaveBeenCalledTimes(1);
+      expect(usePopper).toHaveBeenCalledWith(expect.objectContaining({ rtl: undefined }));
+    });
+  });
 });