Merge branch 'main' into cnwankwo/CallFeatureStream

change-beta/@azure-communication-react-a85dec19-9bd4-4ac6-8139-0ddb5ea2e43f.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "",
+  "comment": "Resolve issue where rich text editor tool bar would not focus when shown. Also fixed issue where editor component would remount when showing/hiding toolbar.",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-a85dec19-9bd4-4ac6-8139-0ddb5ea2e43f.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "",
+  "comment": "Resolve issue where rich text editor tool bar would not focus when shown. Also fixed issue where editor component would remount when showing/hiding toolbar.",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/communication-react/review/beta/communication-react.api.md

@@ -4433,6 +4433,7 @@ export interface RichTextStrings {
     richTextNewNumberedListItemAnnouncement: string;
     richTextNumberedListAppliedAnnouncement: string;
     richTextNumberListTooltip: string;
+    richTextToolbarAriaLabel: string;
     richTextToolbarMoreButtonAriaLabel: string;
     richTextUnderlineTooltip: string;
 }

packages/react-components/src/components/RichTextEditor/RichTextEditor.tsx

@@ -130,6 +130,7 @@ export const RichTextEditor = React.forwardRef<RichTextEditorComponentRef, RichT
   } = props;
   const editor = useRef<IEditor | null>(null);
   const editorDiv = useRef<HTMLDivElement>(null);
+  const toolbarRef = useRef<HTMLDivElement>(null);
   const theme = useTheme();
   const [contextMenuProps, setContextMenuProps] = useState<IContextualMenuProps | null>(null);
   const previousThemeDirection = useRef(themeDirection(theme));
@@ -149,6 +150,16 @@ export const RichTextEditor = React.forwardRef<RichTextEditorComponentRef, RichT
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    if (editor.current) {
+      if (showRichTextEditorFormatting) {
+        toolbarRef.current?.focus();
+      } else {
+        editor.current?.focus();
+      }
+    }
+  }, [showRichTextEditorFormatting]);
+
   useImperativeHandle(ref, () => {
     return {
       focus() {
@@ -460,7 +471,7 @@ export const RichTextEditor = React.forwardRef<RichTextEditorComponentRef, RichT
 
   return (
     <div data-testid={'rich-text-editor-wrapper'}>
-      {showRichTextEditorFormatting && toolbar}
+      <div ref={toolbarRef}>{showRichTextEditorFormatting && toolbar}</div>
       <div className={richTextEditorWrapperStyle(theme)}>
         {/* div that is used by Rooster JS as a parent of the editor */}
         <div

packages/react-components/src/components/RichTextEditor/RichTextInputBoxComponent.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import React, { ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { ReactNode, useCallback, useMemo, useState } from 'react';
 import { BaseCustomStyles } from '../../types';
 import { RichTextEditor, RichTextEditorComponentRef, RichTextEditorStyleProps } from './RichTextEditor';
 import { RichTextSendBoxStrings } from './RichTextSendBox';
@@ -105,15 +105,6 @@ export const RichTextInputBoxComponent = (props: RichTextInputBoxComponentProps)
     [disabled, showRichTextEditorFormatting, theme]
   );
 
-  useEffect(() => {
-    if (showRichTextEditorFormatting !== undefined) {
-      // Focus the editor when toolbar shown/hidden
-      editorComponentRef.current?.focus();
-    }
-    // we don't need execute this useEffect if editorComponentRef is changed
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [showRichTextEditorFormatting]);
-
   const actionButtons = useMemo(() => {
     return (
       <Stack.Item align="end" className={richTextActionButtonsStackStyle}>
@@ -189,12 +180,16 @@ export const RichTextInputBoxComponent = (props: RichTextInputBoxComponentProps)
       })}
     >
       {/* This layout is used for the compact view when formatting options are not shown */}
-      <Stack
-        grow
-        horizontal={useHorizontalLayout}
-        horizontalAlign={useHorizontalLayout ? 'end' : 'space-between'}
+      {/* We don't use a stack here as there is a bug in Fluent Stack that causes remount of children when using wrap */}
+      <div
         className={inputBoxContentStackStyle}
-        wrap={useHorizontalLayout}
+        style={{
+          display: 'flex',
+          flexGrow: 1,
+          flexDirection: useHorizontalLayout ? 'row' : 'column',
+          justifyContent: useHorizontalLayout ? 'flex-end' : 'space-between',
+          flexWrap: useHorizontalLayout ? 'wrap' : 'nowrap'
+        }}
       >
         {/* Fixes the issue when flex box can grow to be bigger than parent */}
         <Stack grow className={inputBoxRichTextStackStyle}>
@@ -220,7 +215,7 @@ export const RichTextInputBoxComponent = (props: RichTextInputBoxComponentProps)
           {/* @conditional-compile-remove(file-sharing-acs) */ onRenderAttachmentUploads && onRenderAttachmentUploads()}
         </Stack>
         {actionButtons}
-      </Stack>
+      </div>
     </div>
   );
 };

packages/react-components/src/components/RichTextEditor/RichTextSendBox.tsx

@@ -144,6 +144,10 @@ export interface RichTextStrings {
    * Text for the delete table menu.
    */
   richTextDeleteTableMenu: string;
+  /**
+   * Text for the rich text toolbar.
+   */
+  richTextToolbarAriaLabel: string;
   /**
    * Text for the rich text toolbar more button.
    */

packages/react-components/src/components/RichTextEditor/Toolbar/RichTextToolbar.tsx

@@ -258,6 +258,7 @@ export const RichTextToolbar = (props: RichTextToolbarProps): JSX.Element => {
       data-testid={'rich-text-editor-toolbar'}
       styles={richTextToolbarStyle}
       overflowButtonProps={overflowButtonProps}
+      aria-label={strings.richTextToolbarAriaLabel}
     />
   );
 };

packages/react-components/src/localization/locales/en-US/strings.json

@@ -58,6 +58,7 @@
     "richTextDeleteColumnMenu": "Delete column",
     "richTextDeleteRowMenu": "Delete row",
     "richTextDeleteTableMenu": "Delete table",
+    "richTextToolbarAriaLabel": "Message Formatting Toolbar",
     "richTextToolbarMoreButtonAriaLabel": "More options",
     "attachmentMoreMenu": "More Options",
     "richTextNewBulletedListItemAnnouncement": "Bullet, new line",