fix: chat components to properly pass ref (#20691)

* fix: chat components to properly pass ref * add changelog
microsoft · Nov 22, 2021 · c4e248b · c4e248b
1 parent 48e52fc
commit c4e248b
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 17 deletions.
diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md
@@ -44,6 +44,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix `Card` comoponent to properly pass ref to root slots @chpalac ([#20644](https://github.com/microsoft/fluentui/pull/20644))
 - Fix `Dropdown` by conditionally adding `aria-expanded="true"` to the button trigger @chpalac ([#20671](https://github.com/microsoft/fluentui/pull/20671))
 - Optimized `felaInvokeKeyframesPlugin` to not create new objects but reuse existing one in `reduce` @mbman ([#20649](https://github.com/microsoft/fluentui/pull/20649))
+- Fix `Chat` components to properly pass ref to root slots @chpalac ([#20691](https://github.com/microsoft/fluentui/pull/20691))
 
 ### Features
 - Adding `ViewPersonSparkleIcon`, `CartIcon`, and fixing `EmojiAddIcon` and `AccessibilityIcon` - @notandrew ([#20054](https://github.com/microsoft/fluentui/pull/20054))

diff --git a/packages/fluentui/react-northstar/src/components/Chat/Chat.tsx b/packages/fluentui/react-northstar/src/components/Chat/Chat.tsx
@@ -1,6 +1,6 @@
 import { Accessibility, chatBehavior, ChatBehaviorProps } from '@fluentui/accessibility';
 import {
-  ComponentWithAs,
+  ForwardRefWithAs,
   getElementType,
   useAccessibility,
   useFluentContext,
@@ -53,14 +53,7 @@ export const chatSlotClassNames: ChatSlotClassNames = {
 /**
  * A Chat displays messages from a conversation between multiple users.
  */
-export const Chat: ComponentWithAs<'ul', ChatProps> &
-  FluentComponentStaticProps<ChatProps> & {
-    Item: typeof ChatItem;
-    Message: typeof ChatMessage;
-    MessageDetails: typeof ChatMessageDetails;
-    MessageReadStatus: typeof ChatMessageReadStatus;
-    MessageHeader: typeof ChatMessageHeader;
-  } = props => {
+export const Chat = (React.forwardRef<HTMLUListElement, ChatProps>((props, ref) => {
   const context = useFluentContext();
   const { setStart, setEnd } = useTelemetry(Chat.displayName, context.telemetry);
   setStart();
@@ -90,6 +83,7 @@ export const Chat: ComponentWithAs<'ul', ChatProps> &
     <ElementType
       {...getA11Props('root', {
         className: classes.root,
+        ref,
         ...rtlTextContainer.getAttributes({ forElements: [children] }),
         ...unhandledProps,
       })}
@@ -108,7 +102,14 @@ export const Chat: ComponentWithAs<'ul', ChatProps> &
   setEnd();
 
   return element;
-};
+}) as unknown) as ForwardRefWithAs<'ul', HTMLUListElement, ChatProps> &
+  FluentComponentStaticProps<ChatProps> & {
+    Item: typeof ChatItem;
+    Message: typeof ChatMessage;
+    MessageDetails: typeof ChatMessageDetails;
+    MessageReadStatus: typeof ChatMessageReadStatus;
+    MessageHeader: typeof ChatMessageHeader;
+  };
 
 Chat.displayName = 'Chat';
 

diff --git a/packages/fluentui/react-northstar/src/components/Chat/ChatItem.tsx b/packages/fluentui/react-northstar/src/components/Chat/ChatItem.tsx
@@ -1,6 +1,6 @@
 import { Accessibility } from '@fluentui/accessibility';
 import {
-  ComponentWithAs,
+  ForwardRefWithAs,
   getElementType,
   useAccessibility,
   useFluentContext,
@@ -61,7 +61,7 @@ export type ChatItemStylesProps = Pick<ChatItemProps, 'attached' | 'contentPosit
 /**
  * A ChatItem is container for single entity in Chat (e.g. message, notification, etc).
  */
-export const ChatItem: ComponentWithAs<'li', ChatItemProps> & FluentComponentStaticProps<ChatItemProps> = props => {
+export const ChatItem = (React.forwardRef<HTMLLIElement, ChatItemProps>((props, ref) => {
   const context = useFluentContext();
   const { setStart, setEnd } = useTelemetry(ChatItem.displayName, context.telemetry);
   setStart();
@@ -133,6 +133,7 @@ export const ChatItem: ComponentWithAs<'li', ChatItemProps> & FluentComponentSta
     <ElementType
       {...getA11Props('root', {
         className: classes.root,
+        ref,
         ...rtlTextContainer.getAttributes({ forElements: [children] }),
         ...unhandledProps,
       })}
@@ -143,7 +144,7 @@ export const ChatItem: ComponentWithAs<'li', ChatItemProps> & FluentComponentSta
   setEnd();
 
   return element;
-};
+}) as unknown) as ForwardRefWithAs<'li', HTMLLIElement, ChatItemProps> & FluentComponentStaticProps<ChatItemProps>;
 
 ChatItem.displayName = 'ChatItem';
 

diff --git a/packages/fluentui/react-northstar/src/components/Chat/ChatMessage.tsx b/packages/fluentui/react-northstar/src/components/Chat/ChatMessage.tsx
@@ -7,7 +7,6 @@ import {
   menuAsToolbarBehavior,
 } from '@fluentui/accessibility';
 import {
-  ComponentWithAs,
   getElementType,
   useAccessibility,
   useAutoControlled,
@@ -17,6 +16,7 @@ import {
   useTelemetry,
   useUnhandledProps,
   useMergedRefs,
+  ForwardRefWithAs,
 } from '@fluentui/react-bindings';
 import { Ref } from '@fluentui/react-component-ref';
 import * as customPropTypes from '@fluentui/react-proptypes';
@@ -216,8 +216,7 @@ function partitionActionMenuPropsFromShorthand<P>(
 /**
  * A ChatMessage represents a single message in chat.
  */
-export const ChatMessage: ComponentWithAs<'div', ChatMessageProps> &
-  FluentComponentStaticProps<ChatMessageProps> = props => {
+export const ChatMessage = (React.forwardRef<HTMLDivElement, ChatMessageProps>((props, ref) => {
   const context = useFluentContext();
   const { setStart, setEnd } = useTelemetry(ChatMessage.displayName, context.telemetry);
   setStart();
@@ -576,6 +575,7 @@ export const ChatMessage: ComponentWithAs<'div', ChatMessageProps> &
             onMouseEnter: handleMouseEnter,
             onMouseLeave: handleMouseLeave,
             onKeyDown: handleKeyDown,
+            ref,
             ...rtlTextContainer.getAttributes({ forElements: [children] }),
             ...unhandledProps,
           })}
@@ -588,7 +588,8 @@ export const ChatMessage: ComponentWithAs<'div', ChatMessageProps> &
   setEnd();
 
   return element;
-};
+}) as unknown) as ForwardRefWithAs<'div', HTMLDivElement, ChatMessageProps> &
+  FluentComponentStaticProps<ChatMessageProps>;
 
 ChatMessage.displayName = 'ChatMessage';