Merge branch 'main' into cnwankwo/TogetherModeStream_Impl

Author: cn0151

change-beta/@azure-communication-react-7883216f-9767-4ce0-bacd-75bfc92e8b80.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "improvement",
+  "workstream": "Updating test server dependencies",
+  "comment": "updating express to 4.21.2 so we can fix a dependnecy issue with path-to-regexp",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change-beta/@azure-communication-react-78a7f897-1bb2-46b1-8734-39b60d38c251.json

@@ -0,0 +1,8 @@
+{
+  "type": "prerelease",
+  "area": "feature",
+  "workstream": "together-mode",
+  "comment": "Cleanup code logic",
+  "packageName": "@azure/communication-react",
+  "dependentChangeType": "patch"
+}

change-beta/@azure-communication-react-c2419591-452c-41f1-ae45-403283adec5c.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "improvement",
+  "workstream": "Hard mute",
+  "comment": "Add sdk references to story book",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change-beta/@azure-communication-react-c7ad66f2-1939-4d90-9c90-f9d73b0dc151.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "A11y",
+  "comment": "Fix keyboard navigation for message menu button",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-c2419591-452c-41f1-ae45-403283adec5c.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "improvement",
+  "workstream": "Hard mute",
+  "comment": "Add sdk references to story book",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-c7ad66f2-1939-4d90-9c90-f9d73b0dc151.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "A11y",
+  "comment": "Fix keyboard navigation for message menu button",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

common/config/rush/pnpm-lock.yaml

@@ -13,7 +13,10 @@ import { IPersona, PersonaSize, mergeStyles, Persona } from '@fluentui/react';
 import { mergeClasses } from '@fluentui/react-components';
 import { createStyleFromV8Style } from '../../styles/v8StyleShim';
 import { ChatMessage as FluentChatMessage } from '@fluentui-contrib/react-chat';
-import { getFluentUIAttachedValue } from '../../utils/ChatMessageComponentUtils';
+import {
+  getFluentUIAttachedValue,
+  removeFluentUIKeyboardNavigationStyles
+} from '../../utils/ChatMessageComponentUtils';
 import { ChatMessageComponentWrapperProps } from '../ChatMessageComponentWrapper';
 /* @conditional-compile-remove(data-loss-prevention) */
 import { BlockedMessage } from '../../../types/ChatMessage';
@@ -140,8 +143,13 @@ export const FluentChatMessageComponent = (props: FluentChatMessageComponentWrap
     );
   }, [message.senderDisplayName, message.senderId, onRenderAvatar, shouldShowAvatar]);
 
+  const setMessageContainerRef = useCallback((node: HTMLDivElement | null) => {
+    removeFluentUIKeyboardNavigationStyles(node);
+  }, []);
+
   const messageBodyProps = useMemo(() => {
     return {
+      ref: setMessageContainerRef,
       // chatItemMessageContainer used in className and style prop as style prop can't handle CSS selectors
       className: mergeClasses(
         chatMessageRenderStyles.bodyCommon,
@@ -157,6 +165,7 @@ export const FluentChatMessageComponent = (props: FluentChatMessageComponentWrap
         styles?.chatItemMessageContainer !== undefined ? createStyleFromV8Style(styles?.chatItemMessageContainer) : {}
     };
   }, [
+    setMessageContainerRef,
     chatMessageRenderStyles.bodyCommon,
     chatMessageRenderStyles.bodyWithoutAvatar,
     chatMessageRenderStyles.bodyHiddenAvatar,

common/config/rush/variants/stable/pnpm-lock.yaml

@@ -108,18 +108,20 @@ export type ChatMyMessageComponentProps = {
   onInsertInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;
   /* @conditional-compile-remove(rich-text-editor-image-upload) */
   inlineImagesWithProgress?: AttachmentMetadataInProgress[];
-  // Optional callback called when editing is complete (submitted or cancelled).
-  onEditComplete?: () => void;
 };
 
 /**
  * @private
  */
 export const ChatMyMessageComponent = (props: ChatMyMessageComponentProps): JSX.Element => {
-  const { onDeleteMessage, onSendMessage, message, onEditComplete, onCancelEditMessage, onUpdateMessage } = props;
+  const { onDeleteMessage, onSendMessage, message, onCancelEditMessage, onUpdateMessage } = props;
   const [isEditing, setIsEditing] = useState(false);
+  const [focusMessageAfterEditing, setFocusMessageAfterEditing] = useState(false);
 
-  const onEditClick = useCallback(() => setIsEditing(true), [setIsEditing]);
+  const onEditClick = useCallback(() => {
+    setIsEditing(true);
+    setFocusMessageAfterEditing(false);
+  }, []);
 
   const clientMessageId = 'clientMessageId' in message ? message.clientMessageId : undefined;
   const content = 'content' in message ? message.content : undefined;
@@ -178,18 +180,20 @@ export const ChatMyMessageComponent = (props: ChatMyMessageComponentProps): JSX.
         { attachments: attachments }
       );
       setIsEditing(false);
-      onEditComplete?.();
+
+      setFocusMessageAfterEditing(true);
     },
-    [message, onEditComplete, onUpdateMessage]
+    [message, onUpdateMessage]
   );
 
   const onCancelHandler = useCallback(
     (messageId: string) => {
       onCancelEditMessage?.(messageId);
       setIsEditing(false);
-      onEditComplete?.();
+
+      setFocusMessageAfterEditing(true);
     },
-    [onEditComplete, onCancelEditMessage]
+    [onCancelEditMessage]
   );
 
   if (isEditing && message.messageType === 'chat') {
@@ -227,6 +231,7 @@ export const ChatMyMessageComponent = (props: ChatMyMessageComponentProps): JSX.
         inlineImageOptions={props.inlineImageOptions}
         /* @conditional-compile-remove(mention) */
         mentionDisplayOptions={props.mentionOptions?.displayOptions}
+        shouldFocusFluentMessageBody={focusMessageAfterEditing}
       />
     );
   }