@azure/communication-react 1.24.0-alpha-202502050016 → 1.24.0-alpha-202502070016

package/dist/dist-esm/react-components/src/components/RichTextEditor/Toolbar/RichTextToolbar.js

@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { CommandBar, ContextualMenuItemType, Icon } from '@fluentui/react';
 import { toolbarButtonStyle, ribbonDividerStyle, ribbonOverflowButtonStyle, richTextToolbarStyle } from '../../styles/RichTextEditor.styles';
 import { useTheme } from '../../../theming';
@@ -18,6 +18,7 @@ export const RichTextToolbar = (props) => {
     const theme = useTheme();
     // need to re-render the buttons when format state changes
     const [formatState, setFormatState] = React.useState(undefined);
+    const commandBarRef = useRef(null);
     useEffect(() => {
         // update the format state on editor events
         plugin.onFormatChanged = setFormatState;
@@ -199,7 +200,14 @@ export const RichTextToolbar = (props) => {
             }
         };
     }, [strings.richTextToolbarMoreButtonAriaLabel, theme]);
-    return (React.createElement(CommandBar, { items: buttons, "data-testid": 'rich-text-editor-toolbar', styles: richTextToolbarStyle, overflowButtonProps: overflowButtonProps, "aria-label": strings.richTextToolbarAriaLabel }));
+    useEffect(() => {
+        // delay focus to ensure the command bar is rendered
+        setTimeout(() => {
+            var _a;
+            (_a = commandBarRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }, 25);
+    }, []);
+    return (React.createElement(CommandBar, { items: buttons, "data-testid": 'rich-text-editor-toolbar', styles: richTextToolbarStyle, overflowButtonProps: overflowButtonProps, componentRef: commandBarRef, "aria-label": strings.richTextToolbarAriaLabel }));
 };
 const getCommandBarItem = ({ key, icon, onClick, text, canCheck = true, checked = false, disabled = false, theme, dataTestId }) => {
     return {

package/dist/dist-esm/react-components/src/components/RichTextEditor/Toolbar/RichTextToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextToolbar.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/RichTextEditor/Toolbar/RichTextToolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport { RichTextToolbarPlugin } from '../Plugins/RichTextToolbarPlugin';\nimport { CommandBar, ContextualMenuItemType, Icon } from '@fluentui/react';\nimport type { ICommandBarItemProps, Theme } from '@fluentui/react';\nimport {\n  toolbarButtonStyle,\n  ribbonDividerStyle,\n  ribbonOverflowButtonStyle,\n  richTextToolbarStyle\n} from '../../styles/RichTextEditor.styles';\nimport { useTheme } from '../../../theming';\nimport { ContentModelFormatState } from 'roosterjs-content-model-types';\nimport {\n  toggleBold,\n  toggleItalic,\n  toggleUnderline,\n  toggleBullet,\n  toggleNumbering,\n  setIndentation,\n  insertTable\n} from 'roosterjs-content-model-api';\nimport { RichTextStrings } from '../RichTextSendBox';\nimport { richTextInsertTableCommandBarItem } from './Table/RichTextInsertTableCommandBarItem';\n\nconst MaxRowsNumber = 5;\nconst MaxColumnsNumber = 5;\n\n/**\n * Props for {@link RichTextToolbar}.\n *\n * @private\n */\nexport interface RichTextToolbarProps {\n  // The rich text toolbar plugin used for connect editor and the ribbon.\n  plugin: RichTextToolbarPlugin;\n  // Strings for localization.\n  strings: Partial<RichTextStrings>;\n}\n\n/**\n * A component to display rich text toolbar.\n *\n * @beta\n */\nexport const RichTextToolbar = (props: RichTextToolbarProps): JSX.Element => {\n  const { plugin, strings } = props;\n  const theme = useTheme();\n  // need to re-render the buttons when format state changes\n  const [formatState, setFormatState] = React.useState<ContentModelFormatState | undefined>(undefined);\n\n  useEffect(() => {\n    // update the format state on editor events\n    plugin.onFormatChanged = setFormatState;\n    // plugin editor ready event may happen before onFormatChanged is set\n    // call update format function to ensure the format state is set\n    plugin.updateFormat();\n  }, [plugin]);\n\n  const boldButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-bold-button',\n      key: 'RichTextToolbarBoldButton',\n      icon: 'RichTextBoldButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          toggleBold(editor);\n        });\n      },\n      text: strings.richTextBoldTooltip,\n      checked: formatState !== undefined && formatState.isBold === true,\n      theme: theme\n    });\n  }, [formatState, plugin, strings.richTextBoldTooltip, theme]);\n\n  const italicButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-italic-button',\n      key: 'RichTextToolbarItalicButton',\n      icon: 'RichTextItalicButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          toggleItalic(editor);\n        });\n      },\n      text: strings.richTextItalicTooltip,\n      checked: formatState !== undefined && formatState?.isItalic === true,\n      theme: theme\n    });\n  }, [formatState, plugin, strings.richTextItalicTooltip, theme]);\n\n  const underlineButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-underline-button',\n      key: 'RichTextToolbarUnderlineButton',\n      icon: 'RichTextUnderlineButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          toggleUnderline(editor);\n        });\n      },\n      text: strings.richTextUnderlineTooltip,\n      checked: formatState !== undefined && formatState?.isUnderline === true,\n      theme: theme\n    });\n  }, [formatState, plugin, strings.richTextUnderlineTooltip, theme]);\n\n  const bulletListButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-bullet-list-button',\n      key: 'RichTextToolbarBulletListButton',\n      icon: 'RichTextBulletListButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          // check the format state to see if the bulleted list is already applied\n          const isBullet = formatState?.isBullet;\n          toggleBullet(editor);\n          // the bulleted list was added\n          if (!isBullet) {\n            setTimeout(() => {\n              // a small delay and polite aria live are needed for MacOS VoiceOver to announce the change\n              editor.announce({ ariaLiveMode: 'polite', text: strings.richTextBulletedListAppliedAnnouncement });\n            }, 50);\n          }\n        });\n      },\n      text: strings.richTextBulletListTooltip,\n      checked: formatState !== undefined && formatState?.isBullet === true,\n      theme: theme\n    });\n  }, [formatState, plugin, strings.richTextBulletListTooltip, strings.richTextBulletedListAppliedAnnouncement, theme]);\n\n  const numberListButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-number-list-button',\n      key: 'RichTextToolbarNumberListButton',\n      icon: 'RichTextNumberListButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          // check the format state to see if the numbered list is already applied\n          const isNumbering = formatState?.isNumbering;\n          toggleNumbering(editor);\n          // the numbered list was added\n          if (!isNumbering) {\n            // a small delay and polite aria live are needed for MacOS VoiceOver to announce the change\n            setTimeout(() => {\n              editor.announce({ ariaLiveMode: 'polite', text: strings.richTextNumberedListAppliedAnnouncement });\n            }, 50);\n          }\n        });\n      },\n      text: strings.richTextNumberListTooltip,\n      checked: formatState !== undefined && formatState?.isNumbering === true,\n      theme: theme\n    });\n  }, [formatState, plugin, strings.richTextNumberListTooltip, strings.richTextNumberedListAppliedAnnouncement, theme]);\n\n  const indentDecreaseButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-indent-decrease-button',\n      key: 'RichTextToolbarIndentDecreaseButton',\n      icon: 'RichTextIndentDecreaseButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          setIndentation(editor, 'outdent');\n        });\n      },\n      text: strings.richTextDecreaseIndentTooltip,\n      canCheck: false,\n      theme: theme\n    });\n  }, [plugin, strings.richTextDecreaseIndentTooltip, theme]);\n\n  const indentIncreaseButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-indent-increase-button',\n      key: 'RichTextToolbarIndentIncreaseButton',\n      icon: 'RichTextIndentIncreaseButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          setIndentation(editor, 'indent');\n        });\n      },\n      text: strings.richTextIncreaseIndentTooltip,\n      canCheck: false,\n      theme: theme\n    });\n  }, [plugin, strings.richTextIncreaseIndentTooltip, theme]);\n\n  const divider = useCallback(\n    (key: string) => {\n      return dividerCommandBarItem(theme, key);\n    },\n    [theme]\n  );\n\n  const tableButton: ICommandBarItemProps = useMemo(() => {\n    return richTextInsertTableCommandBarItem(\n      theme,\n      MaxRowsNumber,\n      MaxColumnsNumber,\n      strings,\n      (column: number, row: number) => {\n        plugin.onToolbarButtonClick((editor) => {\n          //add format\n          insertTable(editor, column, row);\n          // when subMenuProps is used and the menu is dismissed, focus is set to the command bar item that opened the menu\n          // set focus to editor on next re-render\n          setTimeout(() => {\n            editor.focus();\n          });\n        });\n      }\n    );\n  }, [plugin, strings, theme]);\n\n  const buttons: ICommandBarItemProps[] = useMemo(() => {\n    return [\n      boldButton,\n      italicButton,\n      underlineButton,\n      divider('RichTextRibbonTextFormatDivider'),\n      bulletListButton,\n      numberListButton,\n      indentDecreaseButton,\n      indentIncreaseButton,\n      divider('RichTextRibbonTableDivider'),\n      tableButton\n    ];\n  }, [\n    boldButton,\n    italicButton,\n    underlineButton,\n    divider,\n    bulletListButton,\n    numberListButton,\n    indentDecreaseButton,\n    indentIncreaseButton,\n    tableButton\n  ]);\n\n  const overflowButtonProps = useMemo(() => {\n    return {\n      ariaLabel: strings.richTextToolbarMoreButtonAriaLabel,\n      styles: toolbarButtonStyle(theme),\n      menuProps: {\n        items: [], // CommandBar will determine items rendered in overflow\n        isBeakVisible: false,\n        styles: ribbonOverflowButtonStyle(theme)\n      }\n    };\n  }, [strings.richTextToolbarMoreButtonAriaLabel, theme]);\n\n  return (\n    <CommandBar\n      items={buttons}\n      data-testid={'rich-text-editor-toolbar'}\n      styles={richTextToolbarStyle}\n      overflowButtonProps={overflowButtonProps}\n      aria-label={strings.richTextToolbarAriaLabel}\n    />\n  );\n};\n\nconst getCommandBarItem = ({\n  key,\n  icon,\n  onClick,\n  text,\n  canCheck = true,\n  checked = false,\n  disabled = false,\n  theme,\n  dataTestId\n}: {\n  key: string;\n  icon: string;\n  onClick: () => void;\n  text?: string;\n  canCheck?: boolean;\n  checked?: boolean;\n  disabled?: boolean;\n  theme: Theme;\n  dataTestId: string;\n}): ICommandBarItemProps => {\n  return {\n    role: canCheck ? 'menuitemcheckbox' : 'menuitem',\n    'aria-checked': canCheck ? checked : undefined, // `menuitem` role doesn't support `aria-checked`\n    'data-testid': dataTestId,\n    key: key,\n    iconProps: { iconName: icon },\n    onClick: onClick,\n    text: text,\n    ariaLabel: text,\n    iconOnly: true,\n    canCheck: canCheck,\n    buttonStyles: {\n      ...toolbarButtonStyle(theme)\n    },\n    checked: checked,\n    disabled: disabled\n  };\n};\n\nconst dividerCommandBarItem = (theme: Theme, key: string): ICommandBarItemProps => {\n  return {\n    key: key,\n    disabled: true,\n    // show the item correctly for the overflow menu\n    itemType: ContextualMenuItemType.Divider,\n    // this is still needed to remove checkmark icon space even though it is a divider\n    canCheck: false,\n    onRender: () => <Icon iconName=\"RichTextDividerIcon\" className={ribbonDividerStyle(theme)} />\n  };\n};\n"]}
+{"version":3,"file":"RichTextToolbar.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/RichTextEditor/Toolbar/RichTextToolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React, { useCallback, useEffect, useMemo, useRef } from 'react';\nimport { RichTextToolbarPlugin } from '../Plugins/RichTextToolbarPlugin';\nimport { CommandBar, ContextualMenuItemType, Icon } from '@fluentui/react';\nimport type { ICommandBarItemProps, ICommandBar, Theme } from '@fluentui/react';\nimport {\n  toolbarButtonStyle,\n  ribbonDividerStyle,\n  ribbonOverflowButtonStyle,\n  richTextToolbarStyle\n} from '../../styles/RichTextEditor.styles';\nimport { useTheme } from '../../../theming';\nimport { ContentModelFormatState } from 'roosterjs-content-model-types';\nimport {\n  toggleBold,\n  toggleItalic,\n  toggleUnderline,\n  toggleBullet,\n  toggleNumbering,\n  setIndentation,\n  insertTable\n} from 'roosterjs-content-model-api';\nimport { RichTextStrings } from '../RichTextSendBox';\nimport { richTextInsertTableCommandBarItem } from './Table/RichTextInsertTableCommandBarItem';\n\nconst MaxRowsNumber = 5;\nconst MaxColumnsNumber = 5;\n\n/**\n * Props for {@link RichTextToolbar}.\n *\n * @private\n */\nexport interface RichTextToolbarProps {\n  // The rich text toolbar plugin used for connect editor and the ribbon.\n  plugin: RichTextToolbarPlugin;\n  // Strings for localization.\n  strings: Partial<RichTextStrings>;\n}\n\n/**\n * A component to display rich text toolbar.\n *\n * @beta\n */\nexport const RichTextToolbar = (props: RichTextToolbarProps): JSX.Element => {\n  const { plugin, strings } = props;\n  const theme = useTheme();\n  // need to re-render the buttons when format state changes\n  const [formatState, setFormatState] = React.useState<ContentModelFormatState | undefined>(undefined);\n\n  const commandBarRef = useRef<ICommandBar>(null);\n\n  useEffect(() => {\n    // update the format state on editor events\n    plugin.onFormatChanged = setFormatState;\n    // plugin editor ready event may happen before onFormatChanged is set\n    // call update format function to ensure the format state is set\n    plugin.updateFormat();\n  }, [plugin]);\n\n  const boldButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-bold-button',\n      key: 'RichTextToolbarBoldButton',\n      icon: 'RichTextBoldButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          toggleBold(editor);\n        });\n      },\n      text: strings.richTextBoldTooltip,\n      checked: formatState !== undefined && formatState.isBold === true,\n      theme: theme\n    });\n  }, [formatState, plugin, strings.richTextBoldTooltip, theme]);\n\n  const italicButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-italic-button',\n      key: 'RichTextToolbarItalicButton',\n      icon: 'RichTextItalicButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          toggleItalic(editor);\n        });\n      },\n      text: strings.richTextItalicTooltip,\n      checked: formatState !== undefined && formatState?.isItalic === true,\n      theme: theme\n    });\n  }, [formatState, plugin, strings.richTextItalicTooltip, theme]);\n\n  const underlineButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-underline-button',\n      key: 'RichTextToolbarUnderlineButton',\n      icon: 'RichTextUnderlineButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          toggleUnderline(editor);\n        });\n      },\n      text: strings.richTextUnderlineTooltip,\n      checked: formatState !== undefined && formatState?.isUnderline === true,\n      theme: theme\n    });\n  }, [formatState, plugin, strings.richTextUnderlineTooltip, theme]);\n\n  const bulletListButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-bullet-list-button',\n      key: 'RichTextToolbarBulletListButton',\n      icon: 'RichTextBulletListButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          // check the format state to see if the bulleted list is already applied\n          const isBullet = formatState?.isBullet;\n          toggleBullet(editor);\n          // the bulleted list was added\n          if (!isBullet) {\n            setTimeout(() => {\n              // a small delay and polite aria live are needed for MacOS VoiceOver to announce the change\n              editor.announce({ ariaLiveMode: 'polite', text: strings.richTextBulletedListAppliedAnnouncement });\n            }, 50);\n          }\n        });\n      },\n      text: strings.richTextBulletListTooltip,\n      checked: formatState !== undefined && formatState?.isBullet === true,\n      theme: theme\n    });\n  }, [formatState, plugin, strings.richTextBulletListTooltip, strings.richTextBulletedListAppliedAnnouncement, theme]);\n\n  const numberListButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-number-list-button',\n      key: 'RichTextToolbarNumberListButton',\n      icon: 'RichTextNumberListButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          // check the format state to see if the numbered list is already applied\n          const isNumbering = formatState?.isNumbering;\n          toggleNumbering(editor);\n          // the numbered list was added\n          if (!isNumbering) {\n            // a small delay and polite aria live are needed for MacOS VoiceOver to announce the change\n            setTimeout(() => {\n              editor.announce({ ariaLiveMode: 'polite', text: strings.richTextNumberedListAppliedAnnouncement });\n            }, 50);\n          }\n        });\n      },\n      text: strings.richTextNumberListTooltip,\n      checked: formatState !== undefined && formatState?.isNumbering === true,\n      theme: theme\n    });\n  }, [formatState, plugin, strings.richTextNumberListTooltip, strings.richTextNumberedListAppliedAnnouncement, theme]);\n\n  const indentDecreaseButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-indent-decrease-button',\n      key: 'RichTextToolbarIndentDecreaseButton',\n      icon: 'RichTextIndentDecreaseButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          setIndentation(editor, 'outdent');\n        });\n      },\n      text: strings.richTextDecreaseIndentTooltip,\n      canCheck: false,\n      theme: theme\n    });\n  }, [plugin, strings.richTextDecreaseIndentTooltip, theme]);\n\n  const indentIncreaseButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-indent-increase-button',\n      key: 'RichTextToolbarIndentIncreaseButton',\n      icon: 'RichTextIndentIncreaseButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          setIndentation(editor, 'indent');\n        });\n      },\n      text: strings.richTextIncreaseIndentTooltip,\n      canCheck: false,\n      theme: theme\n    });\n  }, [plugin, strings.richTextIncreaseIndentTooltip, theme]);\n\n  const divider = useCallback(\n    (key: string) => {\n      return dividerCommandBarItem(theme, key);\n    },\n    [theme]\n  );\n\n  const tableButton: ICommandBarItemProps = useMemo(() => {\n    return richTextInsertTableCommandBarItem(\n      theme,\n      MaxRowsNumber,\n      MaxColumnsNumber,\n      strings,\n      (column: number, row: number) => {\n        plugin.onToolbarButtonClick((editor) => {\n          //add format\n          insertTable(editor, column, row);\n          // when subMenuProps is used and the menu is dismissed, focus is set to the command bar item that opened the menu\n          // set focus to editor on next re-render\n          setTimeout(() => {\n            editor.focus();\n          });\n        });\n      }\n    );\n  }, [plugin, strings, theme]);\n\n  const buttons: ICommandBarItemProps[] = useMemo(() => {\n    return [\n      boldButton,\n      italicButton,\n      underlineButton,\n      divider('RichTextRibbonTextFormatDivider'),\n      bulletListButton,\n      numberListButton,\n      indentDecreaseButton,\n      indentIncreaseButton,\n      divider('RichTextRibbonTableDivider'),\n      tableButton\n    ];\n  }, [\n    boldButton,\n    italicButton,\n    underlineButton,\n    divider,\n    bulletListButton,\n    numberListButton,\n    indentDecreaseButton,\n    indentIncreaseButton,\n    tableButton\n  ]);\n\n  const overflowButtonProps = useMemo(() => {\n    return {\n      ariaLabel: strings.richTextToolbarMoreButtonAriaLabel,\n      styles: toolbarButtonStyle(theme),\n      menuProps: {\n        items: [], // CommandBar will determine items rendered in overflow\n        isBeakVisible: false,\n        styles: ribbonOverflowButtonStyle(theme)\n      }\n    };\n  }, [strings.richTextToolbarMoreButtonAriaLabel, theme]);\n\n  useEffect(() => {\n    // delay focus to ensure the command bar is rendered\n    setTimeout(() => {\n      commandBarRef.current?.focus();\n    }, 25);\n  }, []);\n\n  return (\n    <CommandBar\n      items={buttons}\n      data-testid={'rich-text-editor-toolbar'}\n      styles={richTextToolbarStyle}\n      overflowButtonProps={overflowButtonProps}\n      componentRef={commandBarRef}\n      aria-label={strings.richTextToolbarAriaLabel}\n    />\n  );\n};\n\nconst getCommandBarItem = ({\n  key,\n  icon,\n  onClick,\n  text,\n  canCheck = true,\n  checked = false,\n  disabled = false,\n  theme,\n  dataTestId\n}: {\n  key: string;\n  icon: string;\n  onClick: () => void;\n  text?: string;\n  canCheck?: boolean;\n  checked?: boolean;\n  disabled?: boolean;\n  theme: Theme;\n  dataTestId: string;\n}): ICommandBarItemProps => {\n  return {\n    role: canCheck ? 'menuitemcheckbox' : 'menuitem',\n    'aria-checked': canCheck ? checked : undefined, // `menuitem` role doesn't support `aria-checked`\n    'data-testid': dataTestId,\n    key: key,\n    iconProps: { iconName: icon },\n    onClick: onClick,\n    text: text,\n    ariaLabel: text,\n    iconOnly: true,\n    canCheck: canCheck,\n    buttonStyles: {\n      ...toolbarButtonStyle(theme)\n    },\n    checked: checked,\n    disabled: disabled\n  };\n};\n\nconst dividerCommandBarItem = (theme: Theme, key: string): ICommandBarItemProps => {\n  return {\n    key: key,\n    disabled: true,\n    // show the item correctly for the overflow menu\n    itemType: ContextualMenuItemType.Divider,\n    // this is still needed to remove checkmark icon space even though it is a divider\n    canCheck: false,\n    onRender: () => <Icon iconName=\"RichTextDividerIcon\" className={ribbonDividerStyle(theme)} />\n  };\n};\n"]}

package/dist/dist-esm/react-components/src/components/styles/Captions.style.d.ts

@@ -1,5 +1,5 @@
 import { IStackStyles, ITheme } from '@fluentui/react';
-import { IButtonStyles } from '@fluentui/react';
+import { IButtonStyles, ITextFieldStyles } from '@fluentui/react';
 /**
  * @private
  */
@@ -24,6 +24,10 @@ export declare const rttContainerClassName: (theme: ITheme, isTyping: boolean) =
  * @private
  */
 export declare const rttDisclosureBannerClassName: () => string;
+/**
+ * @private
+ */
+export declare const realTimeTextInputBoxStyles: (theme: ITheme) => Partial<ITextFieldStyles>;
 /**
  * @private
  */

package/dist/dist-esm/react-components/src/components/styles/Captions.style.js

@@ -55,10 +55,24 @@ export const rttContainerClassName = (theme, isTyping) => {
  */
 export const rttDisclosureBannerClassName = () => {
     return mergeStyles({
+        padding: '0.25rem',
         paddingTop: '0.5rem'
     });
 };
 /* @conditional-compile-remove(rtt) */
+/**
+ * @private
+ */
+export const realTimeTextInputBoxStyles = (theme) => ({
+    root: {
+        marginBottom: _pxToRem(8)
+    },
+    fieldGroup: {
+        borderRadius: _pxToRem(4),
+        borderColor: theme.palette.neutralQuaternaryAlt
+    }
+});
+/* @conditional-compile-remove(rtt) */
 /**
  * @private
  */

package/dist/dist-esm/react-components/src/components/styles/Captions.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"Captions.style.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/Captions.style.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStackStyles, ITheme, mergeStyles } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(rtt) */\nimport { IButtonStyles } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const iconClassName = mergeStyles({\n  marginRight: _pxToRem(8)\n});\n\n/**\n * @private\n */\nexport const displayNameClassName = mergeStyles({\n  fontWeight: 400,\n  fontSize: _pxToRem(12),\n  lineHeight: _pxToRem(16)\n});\n\n/* @conditional-compile-remove(rtt) */\n/**\n * @private\n */\nexport const bannerTitleContainerClassName = mergeStyles({\n  paddingBottom: _pxToRem(10)\n});\n\n/* @conditional-compile-remove(rtt) */\n/**\n * @private\n */\nexport const isTypingClassName = (theme: ITheme): string => {\n  return mergeStyles({\n    backgroundColor: theme.palette.themeLighter,\n    color: theme.palette.themeDarker,\n    borderRadius: _pxToRem(4),\n    marginLeft: _pxToRem(4),\n    fontWeight: 400,\n    paddingLeft: _pxToRem(4),\n    paddingRight: _pxToRem(4),\n    fontSize: _pxToRem(11),\n    lineHeight: _pxToRem(16)\n  });\n};\n/* @conditional-compile-remove(rtt) */\n/**\n * @private\n */\nexport const rttContainerClassName = (theme: ITheme, isTyping: boolean): string => {\n  return mergeStyles({\n    borderLeft: isTyping ? `2px solid ${theme.palette.themeLighter}` : 'none'\n  });\n};\n\n/* @conditional-compile-remove(rtt) */\n/**\n * @private\n */\nexport const rttDisclosureBannerClassName = (): string => {\n  return mergeStyles({\n    paddingTop: '0.5rem'\n  });\n};\n\n/* @conditional-compile-remove(rtt) */\n/**\n * @private\n */\nexport const expandIconClassName = (theme: ITheme): IButtonStyles => {\n  return {\n    root: {\n      color: theme.palette.neutralPrimary,\n      width: '1rem',\n      height: '1rem'\n    },\n    rootHovered: {\n      color: theme.palette.neutralDark\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const captionClassName = mergeStyles({\n  fontWeight: 400,\n  fontSize: _pxToRem(16),\n  lineHeight: _pxToRem(22),\n  width: '100%'\n});\n\n/**\n * @private\n */\nexport const captionsContainerClassName = mergeStyles({\n  height: '100%',\n  margin: 0,\n  overflow: 'auto',\n  padding: 0,\n  overflowX: 'hidden'\n});\n\n/**\n * @private\n */\nexport const captionContainerClassName = mergeStyles({\n  marginTop: _pxToRem(6),\n  marginBottom: _pxToRem(6),\n  textAlign: 'unset', // ensure RTL spoken language captions are appropriately aligned to the right\n  overflowAnchor: 'auto'\n});\n\n/** Reset styling set by the `ul` element */\nconst resetUlStyling = {\n  listStyleType: 'none',\n  padding: 0,\n  margin: 0\n};\n\n/**\n * @private\n */\nexport const captionsBannerClassName = (formFactor: 'default' | 'compact', isExpanded?: boolean): string => {\n  return mergeStyles({\n    ...resetUlStyling,\n    overflowX: 'hidden',\n    height: formFactor === 'compact' ? (isExpanded ? '40vh' : '4.5rem') : '8.75rem',\n    overflowY: 'auto'\n  });\n};\n\n/**\n * @private\n */\nexport const captionsBannerFullHeightClassName = (theme: ITheme): string => {\n  return mergeStyles({\n    ...resetUlStyling,\n    overflowX: 'hidden',\n    overflowY: 'auto',\n    height: '100%',\n    width: '100%',\n    position: 'absolute',\n    backgroundColor: theme.palette.white,\n    left: 0\n  });\n};\n\n/**\n * @private\n */\nexport const loadingBannerStyles = (formFactor: 'default' | 'compact'): IStackStyles => {\n  return {\n    root: {\n      height: formFactor === 'compact' ? '4.5rem' : '8.75rem'\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const loadingBannerFullHeightStyles = (theme: ITheme): IStackStyles => {\n  return {\n    root: {\n      height: '100%',\n      width: '100%',\n      position: 'absolute',\n      left: 0,\n      backgroundColor: theme.palette.white\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const captionsContentContainerClassName = mergeStyles({\n  width: '100%',\n  paddingInlineEnd: _pxToRem(4)\n});\n\n/**\n * @private\n */\nexport const displayNameContainerClassName = mergeStyles({\n  overflow: 'hidden',\n  textOverflow: 'ellipsis'\n});\n"]}
+{"version":3,"file":"Captions.style.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/Captions.style.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStackStyles, ITheme, mergeStyles } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(rtt) */\nimport { IButtonStyles, ITextFieldStyles } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const iconClassName = mergeStyles({\n  marginRight: _pxToRem(8)\n});\n\n/**\n * @private\n */\nexport const displayNameClassName = mergeStyles({\n  fontWeight: 400,\n  fontSize: _pxToRem(12),\n  lineHeight: _pxToRem(16)\n});\n\n/* @conditional-compile-remove(rtt) */\n/**\n * @private\n */\nexport const bannerTitleContainerClassName = mergeStyles({\n  paddingBottom: _pxToRem(10)\n});\n\n/* @conditional-compile-remove(rtt) */\n/**\n * @private\n */\nexport const isTypingClassName = (theme: ITheme): string => {\n  return mergeStyles({\n    backgroundColor: theme.palette.themeLighter,\n    color: theme.palette.themeDarker,\n    borderRadius: _pxToRem(4),\n    marginLeft: _pxToRem(4),\n    fontWeight: 400,\n    paddingLeft: _pxToRem(4),\n    paddingRight: _pxToRem(4),\n    fontSize: _pxToRem(11),\n    lineHeight: _pxToRem(16)\n  });\n};\n/* @conditional-compile-remove(rtt) */\n/**\n * @private\n */\nexport const rttContainerClassName = (theme: ITheme, isTyping: boolean): string => {\n  return mergeStyles({\n    borderLeft: isTyping ? `2px solid ${theme.palette.themeLighter}` : 'none'\n  });\n};\n\n/* @conditional-compile-remove(rtt) */\n/**\n * @private\n */\nexport const rttDisclosureBannerClassName = (): string => {\n  return mergeStyles({\n    padding: '0.25rem',\n    paddingTop: '0.5rem'\n  });\n};\n\n/* @conditional-compile-remove(rtt) */\n/**\n * @private\n */\nexport const realTimeTextInputBoxStyles = (theme: ITheme): Partial<ITextFieldStyles> => ({\n  root: {\n    marginBottom: _pxToRem(8)\n  },\n  fieldGroup: {\n    borderRadius: _pxToRem(4),\n    borderColor: theme.palette.neutralQuaternaryAlt\n  }\n});\n\n/* @conditional-compile-remove(rtt) */\n/**\n * @private\n */\nexport const expandIconClassName = (theme: ITheme): IButtonStyles => {\n  return {\n    root: {\n      color: theme.palette.neutralPrimary,\n      width: '1rem',\n      height: '1rem'\n    },\n    rootHovered: {\n      color: theme.palette.neutralDark\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const captionClassName = mergeStyles({\n  fontWeight: 400,\n  fontSize: _pxToRem(16),\n  lineHeight: _pxToRem(22),\n  width: '100%'\n});\n\n/**\n * @private\n */\nexport const captionsContainerClassName = mergeStyles({\n  height: '100%',\n  margin: 0,\n  overflow: 'auto',\n  padding: 0,\n  overflowX: 'hidden'\n});\n\n/**\n * @private\n */\nexport const captionContainerClassName = mergeStyles({\n  marginTop: _pxToRem(6),\n  marginBottom: _pxToRem(6),\n  textAlign: 'unset', // ensure RTL spoken language captions are appropriately aligned to the right\n  overflowAnchor: 'auto'\n});\n\n/** Reset styling set by the `ul` element */\nconst resetUlStyling = {\n  listStyleType: 'none',\n  padding: 0,\n  margin: 0\n};\n\n/**\n * @private\n */\nexport const captionsBannerClassName = (formFactor: 'default' | 'compact', isExpanded?: boolean): string => {\n  return mergeStyles({\n    ...resetUlStyling,\n    overflowX: 'hidden',\n    height: formFactor === 'compact' ? (isExpanded ? '40vh' : '4.5rem') : '8.75rem',\n    overflowY: 'auto'\n  });\n};\n\n/**\n * @private\n */\nexport const captionsBannerFullHeightClassName = (theme: ITheme): string => {\n  return mergeStyles({\n    ...resetUlStyling,\n    overflowX: 'hidden',\n    overflowY: 'auto',\n    height: '100%',\n    width: '100%',\n    position: 'absolute',\n    backgroundColor: theme.palette.white,\n    left: 0\n  });\n};\n\n/**\n * @private\n */\nexport const loadingBannerStyles = (formFactor: 'default' | 'compact'): IStackStyles => {\n  return {\n    root: {\n      height: formFactor === 'compact' ? '4.5rem' : '8.75rem'\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const loadingBannerFullHeightStyles = (theme: ITheme): IStackStyles => {\n  return {\n    root: {\n      height: '100%',\n      width: '100%',\n      position: 'absolute',\n      left: 0,\n      backgroundColor: theme.palette.white\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const captionsContentContainerClassName = mergeStyles({\n  width: '100%',\n  paddingInlineEnd: _pxToRem(4)\n});\n\n/**\n * @private\n */\nexport const displayNameContainerClassName = mergeStyles({\n  overflow: 'hidden',\n  textOverflow: 'ellipsis'\n});\n"]}

package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.js

@@ -201,7 +201,9 @@ const CallWithChatScreen = (props) => {
     ]);
     let chatPaneTitle = callWithChatStrings.chatPaneTitle;
     /* @conditional-compile-remove(breakout-rooms) */
-    if ((_b = (_a = callAdapter.getState().call) === null || _a === void 0 ? void 0 : _a.breakoutRooms) === null || _b === void 0 ? void 0 : _b.breakoutRoomOriginCallId) {
+    // If breakout room settings are defined then we know we are in a breakout room so we should
+    // use the breakout room chat pane title.
+    if ((_b = (_a = callAdapter.getState().call) === null || _a === void 0 ? void 0 : _a.breakoutRooms) === null || _b === void 0 ? void 0 : _b.breakoutRoomSettings) {
         chatPaneTitle = callWithChatStrings.breakoutRoomChatPaneTitle;
     }
     const sidePaneHeaderRenderer = useCallback(() => {

package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.js.map

@@ -1 +1 @@
-{"version":3,"file":"CallWithChatComposite.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useState, useMemo, useEffect, useRef } from 'react';\nimport { mergeStyles, PartialTheme, Stack, Theme } from '@fluentui/react';\n/* @conditional-compile-remove(breakout-rooms) */\nimport { Spinner, SpinnerSize } from '@fluentui/react';\nimport { CallCompositePage } from '../CallComposite';\nimport { CallSurvey } from '@azure/communication-calling';\nimport { CallState } from '@azure/communication-calling';\nimport { callCompositeContainerStyles, compositeOuterContainerStyles } from './styles/CallWithChatCompositeStyles';\n/* @conditional-compile-remove(breakout-rooms) */\nimport { chatSpinnerContainerStyles } from './styles/CallWithChatCompositeStyles';\nimport { CallWithChatAdapter } from './adapter/CallWithChatAdapter';\nimport { CallWithChatBackedCallAdapter } from './adapter/CallWithChatBackedCallAdapter';\nimport { CallWithChatBackedChatAdapter } from './adapter/CallWithChatBackedChatAdapter';\nimport { CallAdapter } from '../CallComposite';\nimport { ChatComposite, ChatAdapter, ChatCompositeOptions } from '../ChatComposite';\nimport { BaseProvider, BaseCompositeProps } from '../common/BaseComposite';\nimport { CallWithChatCompositeIcons } from '../common/icons';\nimport { AvatarPersonaDataCallback } from '../common/AvatarPersona';\nimport { CallWithChatAdapterState } from './state/CallWithChatAdapterState';\nimport { CallSurveyImprovementSuggestions } from '@internal/react-components';\nimport {\n  ParticipantMenuItemsCallback,\n  _useContainerHeight,\n  _useContainerWidth,\n  useTheme\n} from '@internal/react-components';\nimport { useId } from '@fluentui/react-hooks';\nimport { containerDivStyles } from '../common/ContainerRectProps';\nimport { useCallWithChatCompositeStrings } from './hooks/useCallWithChatCompositeStrings';\nimport { CallCompositeInner, CallCompositeOptions } from '../CallComposite/CallComposite';\nimport { RemoteVideoTileMenuOptions } from '../CallComposite/CallComposite';\nimport { LocalVideoTileOptions } from '../CallComposite/CallComposite';\n/* @conditional-compile-remove(call-readiness) */\nimport { DeviceCheckOptions } from '../CallComposite/CallComposite';\nimport { CommonCallControlOptions } from '../common/types/CommonCallControlOptions';\nimport { ChatButtonWithUnreadMessagesBadge } from './ChatButton/ChatButtonWithUnreadMessagesBadge';\nimport { getDesktopCommonButtonStyles } from '../common/ControlBar/CommonCallControlBar';\nimport { InjectedSidePaneProps } from '../CallComposite/components/SidePane/SidePaneProvider';\nimport { isDisabled } from '../CallComposite/utils';\nimport {\n  CustomCallControlButtonCallback,\n  CustomCallControlButtonCallbackArgs\n} from '../common/ControlBar/CustomButton';\nimport { SidePaneHeader } from '../common/SidePaneHeader';\nimport { CallControlOptions } from '../CallComposite/types/CallControlOptions';\nimport { useUnreadMessagesTracker } from './ChatButton/useUnreadMessagesTracker';\nimport { VideoGalleryLayout } from '@internal/react-components';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { AttachmentOptions } from '@internal/react-components';\n/* @conditional-compile-remove(breakout-rooms) */\nimport { useLocale } from '../localization';\n\n/**\n * Props required for the {@link CallWithChatComposite}\n *\n * @public\n */\nexport interface CallWithChatCompositeProps extends BaseCompositeProps<CallWithChatCompositeIcons> {\n  adapter: CallWithChatAdapter;\n  /**\n   * Fluent theme for the composite.\n   *\n   * Defaults to a light theme if undefined.\n   */\n  fluentTheme?: PartialTheme | Theme;\n  /**\n   * Optimizes the composite form factor for either desktop or mobile.\n   * @remarks `mobile` is currently only optimized for Portrait mode on mobile devices and does not support landscape.\n   * @defaultValue 'desktop'\n   */\n  formFactor?: 'desktop' | 'mobile';\n  /**\n   * URL that can be used to copy a call-with-chat invite to the Users clipboard.\n   */\n  joinInvitationURL?: string;\n  /**\n   * Flags to enable/disable or customize UI elements of the {@link CallWithChatComposite}\n   */\n  options?: CallWithChatCompositeOptions;\n}\n\n/**\n * Customization options for the control bar in calling with chat experience.\n *\n * @public\n */\nexport interface CallWithChatControlOptions extends CommonCallControlOptions {\n  /**\n   * Show or hide the chat button in the call-with-chat composite control bar.\n   * @defaultValue true\n   */\n  chatButton?: boolean | { disabled: boolean };\n}\n\n/**\n * Optional features of the {@link CallWithChatComposite}.\n *\n * @public\n */\nexport type CallWithChatCompositeOptions = {\n  /**\n   * Call control options to change what buttons show on the call-with-chat composite control bar.\n   * If using the boolean values, true will cause default behavior across the whole control bar. False hides the whole control bar.\n   */\n  callControls?: boolean | CallWithChatControlOptions;\n  /* @conditional-compile-remove(file-sharing-acs) */\n  /**\n   * Properties for configuring the File Sharing feature.\n   * If undefined, file sharing feature will be disabled.\n   * @beta\n   */\n  attachmentOptions?: AttachmentOptions;\n  /* @conditional-compile-remove(call-readiness) */\n  /**\n   * Device permissions check options for your call.\n   * Here you can choose what device permissions you prompt the user for,\n   * as well as what device permissions must be accepted before starting a call.\n   */\n  deviceChecks?: DeviceCheckOptions;\n  /* @conditional-compile-remove(call-readiness) */\n  /**\n   * Callback you may provide to supply users with further steps to troubleshoot why they have been\n   * unable to grant your site the required permissions for the call.\n   *\n   * @example\n   * ```ts\n   * onPermissionsTroubleshootingClick: () =>\n   *  window.open('https://contoso.com/permissions-troubleshooting', '_blank');\n   * ```\n   *\n   * @remarks\n   * if this is not supplied, the composite will not show a 'further troubleshooting' link.\n   */\n  onPermissionsTroubleshootingClick?: (permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  }) => void;\n  /* @conditional-compile-remove(call-readiness) */\n  /**\n   * Optional callback to supply users with further troubleshooting steps for network issues\n   * experienced when connecting to a call.\n   *\n   * @example\n   * ```ts\n   * onNetworkingTroubleShootingClick?: () =>\n   *  window.open('https://contoso.com/network-troubleshooting', '_blank');\n   * ```\n   *\n   * @remarks\n   * if this is not supplied, the composite will not show a 'network troubleshooting' link.\n   */\n  onNetworkingTroubleShootingClick?: () => void;\n  /* @conditional-compile-remove(unsupported-browser) */\n  /**\n   * Callback you may provide to supply users with a provided page to showcase supported browsers by ACS.\n   *\n   * @example\n   * ```ts\n   * onBrowserTroubleShootingClick?: () =>\n   *  window.open('https://contoso.com/browser-troubleshooting', '_blank');\n   * ```\n   *\n   * @remarks\n   * if this is not supplied, the composite will not show a unsupported browser page.\n   */\n  onEnvironmentInfoTroubleshootingClick?: () => void;\n  /**\n   * Remote participant video tile menu options\n   */\n  remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;\n  /**\n   * Options for controlling the local video tile.\n   *\n   * @remarks if 'false' the local video tile will not be rendered.\n   */\n  localVideoTile?: boolean | LocalVideoTileOptions;\n  /**\n   * Options for controlling the starting layout of the composite's video gallery\n   */\n  galleryOptions?: {\n    /**\n     * Layout for the gallery when the call starts\n     */\n    layout?: VideoGalleryLayout;\n  };\n  /**\n   * Options for end of call survey\n   */\n  surveyOptions?: {\n    /**\n     * Disable call survey at the end of a call.\n     * @defaultValue false\n     */\n    disableSurvey?: boolean;\n    /**\n     * Optional callback to redirect users to custom screens when survey is done, note that default end call screen will be shown if this callback is not provided\n     * This callback can be used to redirect users to different screens depending on survey state, whether it is submitted, skipped or has a problem when submitting the survey\n     */\n    onSurveyClosed?: (surveyState: 'sent' | 'skipped' | 'error', surveyError?: string) => void;\n    /**\n     * Optional callback to handle survey data including free form text response\n     * Note that free form text response survey option is only going to be enabled when this callback is provided\n     * User will need to handle all free form text response on their own\n     */\n    onSurveySubmitted?: (\n      callId: string,\n      surveyId: string,\n      /**\n       * This is the survey results containing star survey data and API tag survey data.\n       * This part of the result will always be sent to the calling sdk\n       * This callback provides user with the ability to gain access to survey data\n       */\n      submittedSurvey: CallSurvey,\n      /**\n       * This is the survey results containing free form text\n       * This part of the result will not be handled by composites\n       * User will need to collect and handle this information 100% on their own\n       * Free form text survey is not going to show in the UI if onSurveySubmitted is not populated\n       */\n      improvementSuggestions: CallSurveyImprovementSuggestions\n    ) => Promise<void>;\n  };\n  /**\n   * Options for setting additional customizations related to personalized branding.\n   */\n  branding?: {\n    /**\n     * Logo displayed on the configuration page.\n     */\n    logo?: {\n      /**\n       * URL for the logo image.\n       *\n       * @remarks\n       * Recommended size is 80x80 pixels.\n       */\n      url: string;\n      /**\n       * Alt text for the logo image.\n       */\n      alt?: string;\n      /**\n       * The logo can be displayed as a circle.\n       *\n       * @defaultValue 'unset'\n       */\n      shape?: 'unset' | 'circle';\n    };\n    /**\n     * Background image displayed on the configuration page.\n     */\n    backgroundImage?: {\n      /**\n       * URL for the background image.\n       *\n       * @remarks\n       * Background image should be larger than 576x567 pixels and smaller than 2048x2048 pixels pixels.\n       */\n      url: string;\n    };\n  };\n  /**\n   * Options for settings related to spotlight.\n   */\n  spotlight?: {\n    /**\n     * Flag to hide the menu buttons to start and stop spotlight for remote participants and the local participant.\n     * @defaultValue false\n     */\n    hideSpotlightButtons?: boolean;\n  };\n\n  /* @conditional-compile-remove(rich-text-editor-composite-support) */\n  /**\n   * Enables rich text editor for the send and edit boxes\n   * @defaultValue `false`\n   *\n   * @beta\n   */\n  richTextEditor?: boolean;\n};\n\ntype CallWithChatScreenProps = {\n  callWithChatAdapter: CallWithChatAdapter;\n  fluentTheme?: PartialTheme | Theme;\n  formFactor?: 'desktop' | 'mobile';\n  joinInvitationURL?: string;\n  callControls?: boolean | CallWithChatControlOptions;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  /* @conditional-compile-remove(file-sharing-acs) */\n  attachmentOptions?: AttachmentOptions;\n  rtl?: boolean;\n  /* @conditional-compile-remove(call-readiness) */\n  deviceChecks?: DeviceCheckOptions;\n  /* @conditional-compile-remove(call-readiness) */\n  onPermissionsTroubleshootingClick?: (permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  }) => void;\n  /* @conditional-compile-remove(call-readiness) */\n  onNetworkingTroubleShootingClick?: () => void;\n  /* @conditional-compile-remove(unsupported-browser) */\n  onEnvironmentInfoTroubleshootingClick?: () => void;\n  remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;\n  localVideoTile?: boolean | LocalVideoTileOptions;\n  galleryOptions?: {\n    layout?: VideoGalleryLayout;\n  };\n  /**\n   * Options for end of call survey\n   */\n  surveyOptions?: {\n    /**\n     * Disable call survey at the end of a call.\n     * @defaultValue false\n     */\n    disableSurvey?: boolean;\n    /**\n     * Optional callback to redirect users to custom screens when survey is done, note that default end call screen will be shown if this callback is not provided\n     * This callback can be used to redirect users to different screens depending on survey state, whether it is submitted, skipped or has a problem when submitting the survey\n     */\n    onSurveyClosed?: (surveyState: 'sent' | 'skipped' | 'error', surveyError?: string) => void;\n    /**\n     * Optional callback to handle survey data including free form text response\n     * Note that free form text response survey option is only going to be enabled when this callback is provided\n     * User will need to handle all free form text response on their own\n     */\n    onSurveySubmitted?: (\n      callId: string,\n      surveyId: string,\n      /**\n       * This is the survey results containing star survey data and API tag survey data.\n       * This part of the result will always be sent to the calling sdk\n       * This callback provides user with the ability to gain access to survey data\n       */\n      submittedSurvey: CallSurvey,\n      /**\n       * This is the survey results containing free form text\n       * This part of the result will not be handled by composites\n       * User will need to collect and handle this information 100% on their own\n       * Free form text survey is not going to show in the UI if onSurveySubmitted is not populated\n       */\n      improvementSuggestions: CallSurveyImprovementSuggestions\n    ) => Promise<void>;\n  };\n  logo?: {\n    url: string;\n    alt?: string;\n    shape?: 'unset' | 'circle';\n  };\n  backgroundImage?: {\n    url: string;\n  };\n  spotlight?: {\n    hideSpotlightButtons?: boolean;\n  };\n  /* @conditional-compile-remove(rich-text-editor-composite-support) */\n  richTextEditor?: boolean;\n};\n\nconst CallWithChatScreen = (props: CallWithChatScreenProps): JSX.Element => {\n  const { callWithChatAdapter, fluentTheme, formFactor = 'desktop' } = props;\n  const { surveyOptions } = props;\n  const mobileView = formFactor === 'mobile';\n\n  if (!callWithChatAdapter) {\n    throw new Error('CallWithChatAdapter is undefined');\n  }\n\n  const callAdapter: CallAdapter = useMemo(\n    () => new CallWithChatBackedCallAdapter(callWithChatAdapter),\n    [callWithChatAdapter]\n  );\n\n  const [currentCallState, setCurrentCallState] = useState<CallState>();\n  const [isChatInitialized, setIsChatInitialized] = useState(false);\n  const [currentPage, setCurrentPage] = useState<CallCompositePage>();\n  const [isChatOpen, setIsChatOpen] = useState(false);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const updateCallWithChatPage = (newState: CallWithChatAdapterState): void => {\n      setCurrentPage(newState.page);\n      setCurrentCallState(newState.call?.state);\n      setIsChatInitialized(newState.chat ? true : false);\n    };\n    updateCallWithChatPage(callWithChatAdapter.getState());\n    callWithChatAdapter.onStateChange(updateCallWithChatPage);\n    return () => {\n      callWithChatAdapter.offStateChange(updateCallWithChatPage);\n    };\n  }, [callWithChatAdapter]);\n\n  const chatAdapter: ChatAdapter = useMemo(() => {\n    return new CallWithChatBackedChatAdapter(callWithChatAdapter);\n  }, [callWithChatAdapter]);\n\n  /** Constant setting of id for the parent stack of the composite */\n  const compositeParentDivId = useId('callWithChatCompositeParentDiv-internal');\n\n  const closeChat = useCallback(() => {\n    setIsChatOpen(false);\n  }, []);\n  const openChat = useCallback(() => {\n    setIsChatOpen(true);\n    // timeout is required to give the window time to render the sendbox so we have something to send focus to.\n    // TODO: Selecting elements in the DOM via attributes is not stable. We should expose an API from ChatComposite to be able to focus on the sendbox.\n    const chatFocusTimeout = setInterval(() => {\n      const callWithChatCompositeRootDiv = document.querySelector(`[id=\"${compositeParentDivId}\"]`);\n      const sendbox = callWithChatCompositeRootDiv?.querySelector(`[id=\"sendbox\"]`) as HTMLTextAreaElement;\n      if (sendbox !== null) {\n        sendbox.focus();\n        clearInterval(chatFocusTimeout);\n      }\n    }, 3);\n    setTimeout(() => {\n      clearInterval(chatFocusTimeout);\n    }, 300);\n  }, [compositeParentDivId]);\n\n  const isOnHold = currentPage === 'hold';\n  useEffect(() => {\n    if (isOnHold) {\n      closeChat();\n    }\n  }, [closeChat, isOnHold]);\n\n  const hasJoinedCall = !!(currentPage && hasJoinedCallFn(currentPage, currentCallState ?? 'None'));\n  const toggleChat = useCallback(() => {\n    isChatOpen || !hasJoinedCall ? closeChat() : openChat();\n  }, [closeChat, hasJoinedCall, isChatOpen, openChat]);\n\n  const callWithChatStrings = useCallWithChatCompositeStrings();\n  const chatButtonStrings = useMemo(\n    () => ({\n      label: callWithChatStrings.chatButtonLabel,\n      tooltipOffContent: callWithChatStrings.chatButtonTooltipOpen,\n      tooltipOnContent: callWithChatStrings.chatButtonTooltipClose\n    }),\n    [callWithChatStrings]\n  );\n  const theme = useTheme();\n  const commonButtonStyles = useMemo(\n    () => (!mobileView ? getDesktopCommonButtonStyles(theme) : undefined),\n    [mobileView, theme]\n  );\n\n  const showChatButton = checkShowChatButton(props.callControls);\n  const chatButtonDisabled =\n    showChatButton && (checkChatButtonIsDisabled(props.callControls) || !hasJoinedCall || isOnHold);\n  const chatTabHeaderProps = useMemo(\n    () =>\n      mobileView && showChatButton\n        ? {\n            onClick: toggleChat,\n            disabled: chatButtonDisabled\n          }\n        : undefined,\n    [chatButtonDisabled, mobileView, toggleChat, showChatButton]\n  );\n\n  const unreadChatMessagesCount = useUnreadMessagesTracker(chatAdapter, isChatOpen, isChatInitialized);\n\n  const customChatButton: CustomCallControlButtonCallback = useCallback(\n    (args: CustomCallControlButtonCallbackArgs) => ({\n      placement: mobileView ? 'primary' : 'secondary',\n      onRenderButton: () => (\n        <ChatButtonWithUnreadMessagesBadge\n          checked={isChatOpen}\n          showLabel={args.displayType !== 'compact'}\n          onClick={toggleChat}\n          disabled={chatButtonDisabled}\n          strings={chatButtonStrings}\n          styles={commonButtonStyles}\n          newMessageLabel={callWithChatStrings.chatButtonNewMessageNotificationLabel}\n          unreadChatMessagesCount={unreadChatMessagesCount}\n          // As chat is disabled when on hold, we don't want to show the unread badge when on hold\n          hideUnreadChatMessagesBadge={isOnHold}\n          disableTooltip={mobileView}\n        />\n      )\n    }),\n    [\n      callWithChatStrings.chatButtonNewMessageNotificationLabel,\n      chatButtonStrings,\n      commonButtonStyles,\n      isChatOpen,\n      chatButtonDisabled,\n      mobileView,\n      toggleChat,\n      unreadChatMessagesCount,\n      isOnHold\n    ]\n  );\n\n  const callControlOptionsFromProps = useMemo(\n    () => ({\n      ...(typeof props.callControls === 'object' ? props.callControls : {})\n    }),\n    [props.callControls]\n  );\n\n  const injectedCustomButtonsFromProps = useMemo(() => {\n    return [...(callControlOptionsFromProps.onFetchCustomButtonProps ?? [])];\n  }, [callControlOptionsFromProps]);\n\n  const callCompositeOptions: CallCompositeOptions = useMemo(\n    () => ({\n      callControls:\n        props.callControls === false\n          ? false\n          : ({\n              ...callControlOptionsFromProps,\n              onFetchCustomButtonProps: [\n                ...(showChatButton ? [customChatButton] : []),\n                ...injectedCustomButtonsFromProps\n              ],\n              legacyControlBarExperience: false\n            } as CallControlOptions),\n      /* @conditional-compile-remove(call-readiness) */\n      deviceChecks: props.deviceChecks,\n      /* @conditional-compile-remove(call-readiness) */\n      onNetworkingTroubleShootingClick: props.onNetworkingTroubleShootingClick,\n      /* @conditional-compile-remove(call-readiness) */\n      onPermissionsTroubleshootingClick: props.onPermissionsTroubleshootingClick,\n      /* @conditional-compile-remove(unsupported-browser) */\n      onEnvironmentInfoTroubleshootingClick: props.onEnvironmentInfoTroubleshootingClick,\n      remoteVideoTileMenuOptions: props.remoteVideoTileMenuOptions,\n\n      galleryOptions: props.galleryOptions,\n      localVideoTile: props.localVideoTile,\n      surveyOptions: surveyOptions,\n      branding: {\n        logo: props.logo,\n        backgroundImage: props.backgroundImage\n      },\n      spotlight: props.spotlight\n    }),\n    [\n      props.callControls,\n      callControlOptionsFromProps,\n      showChatButton,\n      customChatButton,\n      injectedCustomButtonsFromProps,\n      /* @conditional-compile-remove(call-readiness) */\n      props.deviceChecks,\n      /* @conditional-compile-remove(unsupported-browser) */\n      props.onEnvironmentInfoTroubleshootingClick,\n      /* @conditional-compile-remove(call-readiness) */\n      props.onNetworkingTroubleShootingClick,\n      /* @conditional-compile-remove(call-readiness) */\n      props.onPermissionsTroubleshootingClick,\n      props.galleryOptions,\n      props.localVideoTile,\n      props.remoteVideoTileMenuOptions,\n      surveyOptions,\n      props.logo,\n      props.backgroundImage,\n      props.spotlight\n    ]\n  );\n\n  const chatCompositeOptions: ChatCompositeOptions = useMemo(\n    () => ({\n      topic: false,\n      /* @conditional-compile-remove(chat-composite-participant-pane) */\n      participantPane: false,\n      /* @conditional-compile-remove(file-sharing-acs) */\n      attachmentOptions: props.attachmentOptions,\n      /* @conditional-compile-remove(rich-text-editor-composite-support) */\n      richTextEditor: props.richTextEditor\n    }),\n    [\n      /* @conditional-compile-remove(file-sharing-acs) */\n      props.attachmentOptions,\n      /* @conditional-compile-remove(rich-text-editor-composite-support) */\n      props.richTextEditor\n    ]\n  );\n\n  /* @conditional-compile-remove(breakout-rooms) */\n  const chatSpinnerLabel = useLocale().strings.callWithChat.chatContentSpinnerLabel;\n\n  const onRenderChatContent = useCallback((): JSX.Element => {\n    /* @conditional-compile-remove(breakout-rooms) */\n    if (!isChatInitialized) {\n      return (\n        <Stack styles={chatSpinnerContainerStyles}>\n          <Spinner label={chatSpinnerLabel} size={SpinnerSize.large} />\n        </Stack>\n      );\n    }\n    return (\n      <ChatComposite\n        adapter={chatAdapter}\n        fluentTheme={theme}\n        options={chatCompositeOptions}\n        onFetchAvatarPersonaData={props.onFetchAvatarPersonaData}\n      />\n    );\n  }, [\n    chatAdapter,\n    props.onFetchAvatarPersonaData,\n    chatCompositeOptions,\n    theme,\n    /* @conditional-compile-remove(breakout-rooms) */ isChatInitialized,\n    /* @conditional-compile-remove(breakout-rooms) */ chatSpinnerLabel\n  ]);\n\n  let chatPaneTitle = callWithChatStrings.chatPaneTitle;\n  /* @conditional-compile-remove(breakout-rooms) */\n  if (callAdapter.getState().call?.breakoutRooms?.breakoutRoomOriginCallId) {\n    chatPaneTitle = callWithChatStrings.breakoutRoomChatPaneTitle;\n  }\n\n  const sidePaneHeaderRenderer = useCallback(\n    () => (\n      <SidePaneHeader\n        headingText={chatPaneTitle}\n        onClose={closeChat}\n        dismissSidePaneButtonAriaLabel={callWithChatStrings.dismissSidePaneButtonLabel ?? ''}\n        mobileView={mobileView}\n        chatButtonPresent={showChatButton}\n      />\n    ),\n    [chatPaneTitle, closeChat, callWithChatStrings.dismissSidePaneButtonLabel, mobileView, showChatButton]\n  );\n\n  const sidePaneContentRenderer = useMemo(\n    () => (hasJoinedCall ? onRenderChatContent : undefined),\n    [hasJoinedCall, onRenderChatContent]\n  );\n\n  const sidePaneRenderer = useMemo(\n    () => ({\n      contentRenderer: sidePaneContentRenderer,\n      headerRenderer: sidePaneHeaderRenderer,\n      id: 'chat'\n    }),\n    [sidePaneContentRenderer, sidePaneHeaderRenderer]\n  );\n\n  const overrideSidePaneProps: InjectedSidePaneProps = useMemo(\n    () => ({\n      renderer: sidePaneRenderer,\n      isActive: isChatOpen,\n      persistRenderingWhenClosed: true\n    }),\n    [isChatOpen, sidePaneRenderer]\n  );\n\n  const onSidePaneIdChange = useCallback(\n    (sidePaneId: string | undefined) => {\n      // If the pane is switched to something other than chat, removing rendering chat.\n      if (sidePaneId && sidePaneId !== 'chat') {\n        closeChat();\n      }\n    },\n    [closeChat]\n  );\n\n  // When the call ends ensure the side pane is set to closed to prevent the side pane being open if the call is re-joined.\n  useEffect(() => {\n    callAdapter.on('callEnded', closeChat);\n    return () => {\n      callAdapter.off('callEnded', closeChat);\n    };\n  }, [callAdapter, closeChat]);\n\n  return (\n    <div ref={containerRef} className={mergeStyles(containerDivStyles)}>\n      <Stack verticalFill grow styles={compositeOuterContainerStyles} id={compositeParentDivId}>\n        <Stack horizontal grow>\n          <Stack.Item grow styles={callCompositeContainerStyles(mobileView)}>\n            <CallCompositeInner\n              {...props}\n              formFactor={formFactor}\n              options={callCompositeOptions}\n              adapter={callAdapter}\n              fluentTheme={fluentTheme}\n              callInvitationUrl={props.joinInvitationURL}\n              overrideSidePane={overrideSidePaneProps}\n              onSidePaneIdChange={onSidePaneIdChange}\n              mobileChatTabHeader={chatTabHeaderProps}\n              onCloseChatPane={closeChat}\n            />\n          </Stack.Item>\n        </Stack>\n      </Stack>\n    </div>\n  );\n};\n\n/**\n * CallWithChatComposite brings together key components to provide a full call with chat experience out of the box.\n *\n * @public\n */\nexport const CallWithChatComposite = (props: CallWithChatCompositeProps): JSX.Element => {\n  const { adapter, fluentTheme, rtl, formFactor, joinInvitationURL, options } = props;\n  return (\n    <BaseProvider\n      fluentTheme={fluentTheme}\n      rtl={rtl}\n      locale={props.locale}\n      icons={props.icons}\n      formFactor={props.formFactor}\n    >\n      <CallWithChatScreen\n        {...props}\n        /* @conditional-compile-remove(call-readiness) */\n        deviceChecks={options?.deviceChecks}\n        callWithChatAdapter={adapter}\n        formFactor={formFactor}\n        callControls={options?.callControls}\n        joinInvitationURL={joinInvitationURL}\n        fluentTheme={fluentTheme}\n        remoteVideoTileMenuOptions={options?.remoteVideoTileMenuOptions}\n        /* @conditional-compile-remove(file-sharing-acs) */\n        attachmentOptions={options?.attachmentOptions}\n        localVideoTile={options?.localVideoTile}\n        galleryOptions={options?.galleryOptions}\n        logo={options?.branding?.logo}\n        backgroundImage={options?.branding?.backgroundImage}\n        surveyOptions={options?.surveyOptions}\n        spotlight={options?.spotlight}\n        /* @conditional-compile-remove(rich-text-editor-composite-support) */\n        richTextEditor={options?.richTextEditor}\n      />\n    </BaseProvider>\n  );\n};\n\nconst hasJoinedCallFn = (page: CallCompositePage, callStatus: CallState): boolean => {\n  return (\n    (page === 'call' &&\n      (callStatus === 'Connected' || callStatus === 'RemoteHold' || callStatus === 'Disconnecting')) ||\n    (page === 'hold' && (callStatus === 'LocalHold' || callStatus === 'Disconnecting'))\n  );\n};\n\nconst checkShowChatButton = (callControls?: boolean | CallWithChatControlOptions): boolean => {\n  if (callControls === undefined || callControls === true) {\n    return true;\n  }\n  if (callControls === false) {\n    return false;\n  }\n  return callControls.chatButton !== false;\n};\n\nconst checkChatButtonIsDisabled = (callControls?: boolean | CallWithChatControlOptions): boolean => {\n  return typeof callControls === 'object' && isDisabled(callControls?.chatButton);\n};\n"]}
+{"version":3,"file":"CallWithChatComposite.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useState, useMemo, useEffect, useRef } from 'react';\nimport { mergeStyles, PartialTheme, Stack, Theme } from '@fluentui/react';\n/* @conditional-compile-remove(breakout-rooms) */\nimport { Spinner, SpinnerSize } from '@fluentui/react';\nimport { CallCompositePage } from '../CallComposite';\nimport { CallSurvey } from '@azure/communication-calling';\nimport { CallState } from '@azure/communication-calling';\nimport { callCompositeContainerStyles, compositeOuterContainerStyles } from './styles/CallWithChatCompositeStyles';\n/* @conditional-compile-remove(breakout-rooms) */\nimport { chatSpinnerContainerStyles } from './styles/CallWithChatCompositeStyles';\nimport { CallWithChatAdapter } from './adapter/CallWithChatAdapter';\nimport { CallWithChatBackedCallAdapter } from './adapter/CallWithChatBackedCallAdapter';\nimport { CallWithChatBackedChatAdapter } from './adapter/CallWithChatBackedChatAdapter';\nimport { CallAdapter } from '../CallComposite';\nimport { ChatComposite, ChatAdapter, ChatCompositeOptions } from '../ChatComposite';\nimport { BaseProvider, BaseCompositeProps } from '../common/BaseComposite';\nimport { CallWithChatCompositeIcons } from '../common/icons';\nimport { AvatarPersonaDataCallback } from '../common/AvatarPersona';\nimport { CallWithChatAdapterState } from './state/CallWithChatAdapterState';\nimport { CallSurveyImprovementSuggestions } from '@internal/react-components';\nimport {\n  ParticipantMenuItemsCallback,\n  _useContainerHeight,\n  _useContainerWidth,\n  useTheme\n} from '@internal/react-components';\nimport { useId } from '@fluentui/react-hooks';\nimport { containerDivStyles } from '../common/ContainerRectProps';\nimport { useCallWithChatCompositeStrings } from './hooks/useCallWithChatCompositeStrings';\nimport { CallCompositeInner, CallCompositeOptions } from '../CallComposite/CallComposite';\nimport { RemoteVideoTileMenuOptions } from '../CallComposite/CallComposite';\nimport { LocalVideoTileOptions } from '../CallComposite/CallComposite';\n/* @conditional-compile-remove(call-readiness) */\nimport { DeviceCheckOptions } from '../CallComposite/CallComposite';\nimport { CommonCallControlOptions } from '../common/types/CommonCallControlOptions';\nimport { ChatButtonWithUnreadMessagesBadge } from './ChatButton/ChatButtonWithUnreadMessagesBadge';\nimport { getDesktopCommonButtonStyles } from '../common/ControlBar/CommonCallControlBar';\nimport { InjectedSidePaneProps } from '../CallComposite/components/SidePane/SidePaneProvider';\nimport { isDisabled } from '../CallComposite/utils';\nimport {\n  CustomCallControlButtonCallback,\n  CustomCallControlButtonCallbackArgs\n} from '../common/ControlBar/CustomButton';\nimport { SidePaneHeader } from '../common/SidePaneHeader';\nimport { CallControlOptions } from '../CallComposite/types/CallControlOptions';\nimport { useUnreadMessagesTracker } from './ChatButton/useUnreadMessagesTracker';\nimport { VideoGalleryLayout } from '@internal/react-components';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { AttachmentOptions } from '@internal/react-components';\n/* @conditional-compile-remove(breakout-rooms) */\nimport { useLocale } from '../localization';\n\n/**\n * Props required for the {@link CallWithChatComposite}\n *\n * @public\n */\nexport interface CallWithChatCompositeProps extends BaseCompositeProps<CallWithChatCompositeIcons> {\n  adapter: CallWithChatAdapter;\n  /**\n   * Fluent theme for the composite.\n   *\n   * Defaults to a light theme if undefined.\n   */\n  fluentTheme?: PartialTheme | Theme;\n  /**\n   * Optimizes the composite form factor for either desktop or mobile.\n   * @remarks `mobile` is currently only optimized for Portrait mode on mobile devices and does not support landscape.\n   * @defaultValue 'desktop'\n   */\n  formFactor?: 'desktop' | 'mobile';\n  /**\n   * URL that can be used to copy a call-with-chat invite to the Users clipboard.\n   */\n  joinInvitationURL?: string;\n  /**\n   * Flags to enable/disable or customize UI elements of the {@link CallWithChatComposite}\n   */\n  options?: CallWithChatCompositeOptions;\n}\n\n/**\n * Customization options for the control bar in calling with chat experience.\n *\n * @public\n */\nexport interface CallWithChatControlOptions extends CommonCallControlOptions {\n  /**\n   * Show or hide the chat button in the call-with-chat composite control bar.\n   * @defaultValue true\n   */\n  chatButton?: boolean | { disabled: boolean };\n}\n\n/**\n * Optional features of the {@link CallWithChatComposite}.\n *\n * @public\n */\nexport type CallWithChatCompositeOptions = {\n  /**\n   * Call control options to change what buttons show on the call-with-chat composite control bar.\n   * If using the boolean values, true will cause default behavior across the whole control bar. False hides the whole control bar.\n   */\n  callControls?: boolean | CallWithChatControlOptions;\n  /* @conditional-compile-remove(file-sharing-acs) */\n  /**\n   * Properties for configuring the File Sharing feature.\n   * If undefined, file sharing feature will be disabled.\n   * @beta\n   */\n  attachmentOptions?: AttachmentOptions;\n  /* @conditional-compile-remove(call-readiness) */\n  /**\n   * Device permissions check options for your call.\n   * Here you can choose what device permissions you prompt the user for,\n   * as well as what device permissions must be accepted before starting a call.\n   */\n  deviceChecks?: DeviceCheckOptions;\n  /* @conditional-compile-remove(call-readiness) */\n  /**\n   * Callback you may provide to supply users with further steps to troubleshoot why they have been\n   * unable to grant your site the required permissions for the call.\n   *\n   * @example\n   * ```ts\n   * onPermissionsTroubleshootingClick: () =>\n   *  window.open('https://contoso.com/permissions-troubleshooting', '_blank');\n   * ```\n   *\n   * @remarks\n   * if this is not supplied, the composite will not show a 'further troubleshooting' link.\n   */\n  onPermissionsTroubleshootingClick?: (permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  }) => void;\n  /* @conditional-compile-remove(call-readiness) */\n  /**\n   * Optional callback to supply users with further troubleshooting steps for network issues\n   * experienced when connecting to a call.\n   *\n   * @example\n   * ```ts\n   * onNetworkingTroubleShootingClick?: () =>\n   *  window.open('https://contoso.com/network-troubleshooting', '_blank');\n   * ```\n   *\n   * @remarks\n   * if this is not supplied, the composite will not show a 'network troubleshooting' link.\n   */\n  onNetworkingTroubleShootingClick?: () => void;\n  /* @conditional-compile-remove(unsupported-browser) */\n  /**\n   * Callback you may provide to supply users with a provided page to showcase supported browsers by ACS.\n   *\n   * @example\n   * ```ts\n   * onBrowserTroubleShootingClick?: () =>\n   *  window.open('https://contoso.com/browser-troubleshooting', '_blank');\n   * ```\n   *\n   * @remarks\n   * if this is not supplied, the composite will not show a unsupported browser page.\n   */\n  onEnvironmentInfoTroubleshootingClick?: () => void;\n  /**\n   * Remote participant video tile menu options\n   */\n  remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;\n  /**\n   * Options for controlling the local video tile.\n   *\n   * @remarks if 'false' the local video tile will not be rendered.\n   */\n  localVideoTile?: boolean | LocalVideoTileOptions;\n  /**\n   * Options for controlling the starting layout of the composite's video gallery\n   */\n  galleryOptions?: {\n    /**\n     * Layout for the gallery when the call starts\n     */\n    layout?: VideoGalleryLayout;\n  };\n  /**\n   * Options for end of call survey\n   */\n  surveyOptions?: {\n    /**\n     * Disable call survey at the end of a call.\n     * @defaultValue false\n     */\n    disableSurvey?: boolean;\n    /**\n     * Optional callback to redirect users to custom screens when survey is done, note that default end call screen will be shown if this callback is not provided\n     * This callback can be used to redirect users to different screens depending on survey state, whether it is submitted, skipped or has a problem when submitting the survey\n     */\n    onSurveyClosed?: (surveyState: 'sent' | 'skipped' | 'error', surveyError?: string) => void;\n    /**\n     * Optional callback to handle survey data including free form text response\n     * Note that free form text response survey option is only going to be enabled when this callback is provided\n     * User will need to handle all free form text response on their own\n     */\n    onSurveySubmitted?: (\n      callId: string,\n      surveyId: string,\n      /**\n       * This is the survey results containing star survey data and API tag survey data.\n       * This part of the result will always be sent to the calling sdk\n       * This callback provides user with the ability to gain access to survey data\n       */\n      submittedSurvey: CallSurvey,\n      /**\n       * This is the survey results containing free form text\n       * This part of the result will not be handled by composites\n       * User will need to collect and handle this information 100% on their own\n       * Free form text survey is not going to show in the UI if onSurveySubmitted is not populated\n       */\n      improvementSuggestions: CallSurveyImprovementSuggestions\n    ) => Promise<void>;\n  };\n  /**\n   * Options for setting additional customizations related to personalized branding.\n   */\n  branding?: {\n    /**\n     * Logo displayed on the configuration page.\n     */\n    logo?: {\n      /**\n       * URL for the logo image.\n       *\n       * @remarks\n       * Recommended size is 80x80 pixels.\n       */\n      url: string;\n      /**\n       * Alt text for the logo image.\n       */\n      alt?: string;\n      /**\n       * The logo can be displayed as a circle.\n       *\n       * @defaultValue 'unset'\n       */\n      shape?: 'unset' | 'circle';\n    };\n    /**\n     * Background image displayed on the configuration page.\n     */\n    backgroundImage?: {\n      /**\n       * URL for the background image.\n       *\n       * @remarks\n       * Background image should be larger than 576x567 pixels and smaller than 2048x2048 pixels pixels.\n       */\n      url: string;\n    };\n  };\n  /**\n   * Options for settings related to spotlight.\n   */\n  spotlight?: {\n    /**\n     * Flag to hide the menu buttons to start and stop spotlight for remote participants and the local participant.\n     * @defaultValue false\n     */\n    hideSpotlightButtons?: boolean;\n  };\n\n  /* @conditional-compile-remove(rich-text-editor-composite-support) */\n  /**\n   * Enables rich text editor for the send and edit boxes\n   * @defaultValue `false`\n   *\n   * @beta\n   */\n  richTextEditor?: boolean;\n};\n\ntype CallWithChatScreenProps = {\n  callWithChatAdapter: CallWithChatAdapter;\n  fluentTheme?: PartialTheme | Theme;\n  formFactor?: 'desktop' | 'mobile';\n  joinInvitationURL?: string;\n  callControls?: boolean | CallWithChatControlOptions;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  /* @conditional-compile-remove(file-sharing-acs) */\n  attachmentOptions?: AttachmentOptions;\n  rtl?: boolean;\n  /* @conditional-compile-remove(call-readiness) */\n  deviceChecks?: DeviceCheckOptions;\n  /* @conditional-compile-remove(call-readiness) */\n  onPermissionsTroubleshootingClick?: (permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  }) => void;\n  /* @conditional-compile-remove(call-readiness) */\n  onNetworkingTroubleShootingClick?: () => void;\n  /* @conditional-compile-remove(unsupported-browser) */\n  onEnvironmentInfoTroubleshootingClick?: () => void;\n  remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;\n  localVideoTile?: boolean | LocalVideoTileOptions;\n  galleryOptions?: {\n    layout?: VideoGalleryLayout;\n  };\n  /**\n   * Options for end of call survey\n   */\n  surveyOptions?: {\n    /**\n     * Disable call survey at the end of a call.\n     * @defaultValue false\n     */\n    disableSurvey?: boolean;\n    /**\n     * Optional callback to redirect users to custom screens when survey is done, note that default end call screen will be shown if this callback is not provided\n     * This callback can be used to redirect users to different screens depending on survey state, whether it is submitted, skipped or has a problem when submitting the survey\n     */\n    onSurveyClosed?: (surveyState: 'sent' | 'skipped' | 'error', surveyError?: string) => void;\n    /**\n     * Optional callback to handle survey data including free form text response\n     * Note that free form text response survey option is only going to be enabled when this callback is provided\n     * User will need to handle all free form text response on their own\n     */\n    onSurveySubmitted?: (\n      callId: string,\n      surveyId: string,\n      /**\n       * This is the survey results containing star survey data and API tag survey data.\n       * This part of the result will always be sent to the calling sdk\n       * This callback provides user with the ability to gain access to survey data\n       */\n      submittedSurvey: CallSurvey,\n      /**\n       * This is the survey results containing free form text\n       * This part of the result will not be handled by composites\n       * User will need to collect and handle this information 100% on their own\n       * Free form text survey is not going to show in the UI if onSurveySubmitted is not populated\n       */\n      improvementSuggestions: CallSurveyImprovementSuggestions\n    ) => Promise<void>;\n  };\n  logo?: {\n    url: string;\n    alt?: string;\n    shape?: 'unset' | 'circle';\n  };\n  backgroundImage?: {\n    url: string;\n  };\n  spotlight?: {\n    hideSpotlightButtons?: boolean;\n  };\n  /* @conditional-compile-remove(rich-text-editor-composite-support) */\n  richTextEditor?: boolean;\n};\n\nconst CallWithChatScreen = (props: CallWithChatScreenProps): JSX.Element => {\n  const { callWithChatAdapter, fluentTheme, formFactor = 'desktop' } = props;\n  const { surveyOptions } = props;\n  const mobileView = formFactor === 'mobile';\n\n  if (!callWithChatAdapter) {\n    throw new Error('CallWithChatAdapter is undefined');\n  }\n\n  const callAdapter: CallAdapter = useMemo(\n    () => new CallWithChatBackedCallAdapter(callWithChatAdapter),\n    [callWithChatAdapter]\n  );\n\n  const [currentCallState, setCurrentCallState] = useState<CallState>();\n  const [isChatInitialized, setIsChatInitialized] = useState(false);\n  const [currentPage, setCurrentPage] = useState<CallCompositePage>();\n  const [isChatOpen, setIsChatOpen] = useState(false);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const updateCallWithChatPage = (newState: CallWithChatAdapterState): void => {\n      setCurrentPage(newState.page);\n      setCurrentCallState(newState.call?.state);\n      setIsChatInitialized(newState.chat ? true : false);\n    };\n    updateCallWithChatPage(callWithChatAdapter.getState());\n    callWithChatAdapter.onStateChange(updateCallWithChatPage);\n    return () => {\n      callWithChatAdapter.offStateChange(updateCallWithChatPage);\n    };\n  }, [callWithChatAdapter]);\n\n  const chatAdapter: ChatAdapter = useMemo(() => {\n    return new CallWithChatBackedChatAdapter(callWithChatAdapter);\n  }, [callWithChatAdapter]);\n\n  /** Constant setting of id for the parent stack of the composite */\n  const compositeParentDivId = useId('callWithChatCompositeParentDiv-internal');\n\n  const closeChat = useCallback(() => {\n    setIsChatOpen(false);\n  }, []);\n  const openChat = useCallback(() => {\n    setIsChatOpen(true);\n    // timeout is required to give the window time to render the sendbox so we have something to send focus to.\n    // TODO: Selecting elements in the DOM via attributes is not stable. We should expose an API from ChatComposite to be able to focus on the sendbox.\n    const chatFocusTimeout = setInterval(() => {\n      const callWithChatCompositeRootDiv = document.querySelector(`[id=\"${compositeParentDivId}\"]`);\n      const sendbox = callWithChatCompositeRootDiv?.querySelector(`[id=\"sendbox\"]`) as HTMLTextAreaElement;\n      if (sendbox !== null) {\n        sendbox.focus();\n        clearInterval(chatFocusTimeout);\n      }\n    }, 3);\n    setTimeout(() => {\n      clearInterval(chatFocusTimeout);\n    }, 300);\n  }, [compositeParentDivId]);\n\n  const isOnHold = currentPage === 'hold';\n  useEffect(() => {\n    if (isOnHold) {\n      closeChat();\n    }\n  }, [closeChat, isOnHold]);\n\n  const hasJoinedCall = !!(currentPage && hasJoinedCallFn(currentPage, currentCallState ?? 'None'));\n  const toggleChat = useCallback(() => {\n    isChatOpen || !hasJoinedCall ? closeChat() : openChat();\n  }, [closeChat, hasJoinedCall, isChatOpen, openChat]);\n\n  const callWithChatStrings = useCallWithChatCompositeStrings();\n  const chatButtonStrings = useMemo(\n    () => ({\n      label: callWithChatStrings.chatButtonLabel,\n      tooltipOffContent: callWithChatStrings.chatButtonTooltipOpen,\n      tooltipOnContent: callWithChatStrings.chatButtonTooltipClose\n    }),\n    [callWithChatStrings]\n  );\n  const theme = useTheme();\n  const commonButtonStyles = useMemo(\n    () => (!mobileView ? getDesktopCommonButtonStyles(theme) : undefined),\n    [mobileView, theme]\n  );\n\n  const showChatButton = checkShowChatButton(props.callControls);\n  const chatButtonDisabled =\n    showChatButton && (checkChatButtonIsDisabled(props.callControls) || !hasJoinedCall || isOnHold);\n  const chatTabHeaderProps = useMemo(\n    () =>\n      mobileView && showChatButton\n        ? {\n            onClick: toggleChat,\n            disabled: chatButtonDisabled\n          }\n        : undefined,\n    [chatButtonDisabled, mobileView, toggleChat, showChatButton]\n  );\n\n  const unreadChatMessagesCount = useUnreadMessagesTracker(chatAdapter, isChatOpen, isChatInitialized);\n\n  const customChatButton: CustomCallControlButtonCallback = useCallback(\n    (args: CustomCallControlButtonCallbackArgs) => ({\n      placement: mobileView ? 'primary' : 'secondary',\n      onRenderButton: () => (\n        <ChatButtonWithUnreadMessagesBadge\n          checked={isChatOpen}\n          showLabel={args.displayType !== 'compact'}\n          onClick={toggleChat}\n          disabled={chatButtonDisabled}\n          strings={chatButtonStrings}\n          styles={commonButtonStyles}\n          newMessageLabel={callWithChatStrings.chatButtonNewMessageNotificationLabel}\n          unreadChatMessagesCount={unreadChatMessagesCount}\n          // As chat is disabled when on hold, we don't want to show the unread badge when on hold\n          hideUnreadChatMessagesBadge={isOnHold}\n          disableTooltip={mobileView}\n        />\n      )\n    }),\n    [\n      callWithChatStrings.chatButtonNewMessageNotificationLabel,\n      chatButtonStrings,\n      commonButtonStyles,\n      isChatOpen,\n      chatButtonDisabled,\n      mobileView,\n      toggleChat,\n      unreadChatMessagesCount,\n      isOnHold\n    ]\n  );\n\n  const callControlOptionsFromProps = useMemo(\n    () => ({\n      ...(typeof props.callControls === 'object' ? props.callControls : {})\n    }),\n    [props.callControls]\n  );\n\n  const injectedCustomButtonsFromProps = useMemo(() => {\n    return [...(callControlOptionsFromProps.onFetchCustomButtonProps ?? [])];\n  }, [callControlOptionsFromProps]);\n\n  const callCompositeOptions: CallCompositeOptions = useMemo(\n    () => ({\n      callControls:\n        props.callControls === false\n          ? false\n          : ({\n              ...callControlOptionsFromProps,\n              onFetchCustomButtonProps: [\n                ...(showChatButton ? [customChatButton] : []),\n                ...injectedCustomButtonsFromProps\n              ],\n              legacyControlBarExperience: false\n            } as CallControlOptions),\n      /* @conditional-compile-remove(call-readiness) */\n      deviceChecks: props.deviceChecks,\n      /* @conditional-compile-remove(call-readiness) */\n      onNetworkingTroubleShootingClick: props.onNetworkingTroubleShootingClick,\n      /* @conditional-compile-remove(call-readiness) */\n      onPermissionsTroubleshootingClick: props.onPermissionsTroubleshootingClick,\n      /* @conditional-compile-remove(unsupported-browser) */\n      onEnvironmentInfoTroubleshootingClick: props.onEnvironmentInfoTroubleshootingClick,\n      remoteVideoTileMenuOptions: props.remoteVideoTileMenuOptions,\n\n      galleryOptions: props.galleryOptions,\n      localVideoTile: props.localVideoTile,\n      surveyOptions: surveyOptions,\n      branding: {\n        logo: props.logo,\n        backgroundImage: props.backgroundImage\n      },\n      spotlight: props.spotlight\n    }),\n    [\n      props.callControls,\n      callControlOptionsFromProps,\n      showChatButton,\n      customChatButton,\n      injectedCustomButtonsFromProps,\n      /* @conditional-compile-remove(call-readiness) */\n      props.deviceChecks,\n      /* @conditional-compile-remove(unsupported-browser) */\n      props.onEnvironmentInfoTroubleshootingClick,\n      /* @conditional-compile-remove(call-readiness) */\n      props.onNetworkingTroubleShootingClick,\n      /* @conditional-compile-remove(call-readiness) */\n      props.onPermissionsTroubleshootingClick,\n      props.galleryOptions,\n      props.localVideoTile,\n      props.remoteVideoTileMenuOptions,\n      surveyOptions,\n      props.logo,\n      props.backgroundImage,\n      props.spotlight\n    ]\n  );\n\n  const chatCompositeOptions: ChatCompositeOptions = useMemo(\n    () => ({\n      topic: false,\n      /* @conditional-compile-remove(chat-composite-participant-pane) */\n      participantPane: false,\n      /* @conditional-compile-remove(file-sharing-acs) */\n      attachmentOptions: props.attachmentOptions,\n      /* @conditional-compile-remove(rich-text-editor-composite-support) */\n      richTextEditor: props.richTextEditor\n    }),\n    [\n      /* @conditional-compile-remove(file-sharing-acs) */\n      props.attachmentOptions,\n      /* @conditional-compile-remove(rich-text-editor-composite-support) */\n      props.richTextEditor\n    ]\n  );\n\n  /* @conditional-compile-remove(breakout-rooms) */\n  const chatSpinnerLabel = useLocale().strings.callWithChat.chatContentSpinnerLabel;\n\n  const onRenderChatContent = useCallback((): JSX.Element => {\n    /* @conditional-compile-remove(breakout-rooms) */\n    if (!isChatInitialized) {\n      return (\n        <Stack styles={chatSpinnerContainerStyles}>\n          <Spinner label={chatSpinnerLabel} size={SpinnerSize.large} />\n        </Stack>\n      );\n    }\n    return (\n      <ChatComposite\n        adapter={chatAdapter}\n        fluentTheme={theme}\n        options={chatCompositeOptions}\n        onFetchAvatarPersonaData={props.onFetchAvatarPersonaData}\n      />\n    );\n  }, [\n    chatAdapter,\n    props.onFetchAvatarPersonaData,\n    chatCompositeOptions,\n    theme,\n    /* @conditional-compile-remove(breakout-rooms) */ isChatInitialized,\n    /* @conditional-compile-remove(breakout-rooms) */ chatSpinnerLabel\n  ]);\n\n  let chatPaneTitle = callWithChatStrings.chatPaneTitle;\n  /* @conditional-compile-remove(breakout-rooms) */\n  // If breakout room settings are defined then we know we are in a breakout room so we should\n  // use the breakout room chat pane title.\n  if (callAdapter.getState().call?.breakoutRooms?.breakoutRoomSettings) {\n    chatPaneTitle = callWithChatStrings.breakoutRoomChatPaneTitle;\n  }\n\n  const sidePaneHeaderRenderer = useCallback(\n    () => (\n      <SidePaneHeader\n        headingText={chatPaneTitle}\n        onClose={closeChat}\n        dismissSidePaneButtonAriaLabel={callWithChatStrings.dismissSidePaneButtonLabel ?? ''}\n        mobileView={mobileView}\n        chatButtonPresent={showChatButton}\n      />\n    ),\n    [chatPaneTitle, closeChat, callWithChatStrings.dismissSidePaneButtonLabel, mobileView, showChatButton]\n  );\n\n  const sidePaneContentRenderer = useMemo(\n    () => (hasJoinedCall ? onRenderChatContent : undefined),\n    [hasJoinedCall, onRenderChatContent]\n  );\n\n  const sidePaneRenderer = useMemo(\n    () => ({\n      contentRenderer: sidePaneContentRenderer,\n      headerRenderer: sidePaneHeaderRenderer,\n      id: 'chat'\n    }),\n    [sidePaneContentRenderer, sidePaneHeaderRenderer]\n  );\n\n  const overrideSidePaneProps: InjectedSidePaneProps = useMemo(\n    () => ({\n      renderer: sidePaneRenderer,\n      isActive: isChatOpen,\n      persistRenderingWhenClosed: true\n    }),\n    [isChatOpen, sidePaneRenderer]\n  );\n\n  const onSidePaneIdChange = useCallback(\n    (sidePaneId: string | undefined) => {\n      // If the pane is switched to something other than chat, removing rendering chat.\n      if (sidePaneId && sidePaneId !== 'chat') {\n        closeChat();\n      }\n    },\n    [closeChat]\n  );\n\n  // When the call ends ensure the side pane is set to closed to prevent the side pane being open if the call is re-joined.\n  useEffect(() => {\n    callAdapter.on('callEnded', closeChat);\n    return () => {\n      callAdapter.off('callEnded', closeChat);\n    };\n  }, [callAdapter, closeChat]);\n\n  return (\n    <div ref={containerRef} className={mergeStyles(containerDivStyles)}>\n      <Stack verticalFill grow styles={compositeOuterContainerStyles} id={compositeParentDivId}>\n        <Stack horizontal grow>\n          <Stack.Item grow styles={callCompositeContainerStyles(mobileView)}>\n            <CallCompositeInner\n              {...props}\n              formFactor={formFactor}\n              options={callCompositeOptions}\n              adapter={callAdapter}\n              fluentTheme={fluentTheme}\n              callInvitationUrl={props.joinInvitationURL}\n              overrideSidePane={overrideSidePaneProps}\n              onSidePaneIdChange={onSidePaneIdChange}\n              mobileChatTabHeader={chatTabHeaderProps}\n              onCloseChatPane={closeChat}\n            />\n          </Stack.Item>\n        </Stack>\n      </Stack>\n    </div>\n  );\n};\n\n/**\n * CallWithChatComposite brings together key components to provide a full call with chat experience out of the box.\n *\n * @public\n */\nexport const CallWithChatComposite = (props: CallWithChatCompositeProps): JSX.Element => {\n  const { adapter, fluentTheme, rtl, formFactor, joinInvitationURL, options } = props;\n  return (\n    <BaseProvider\n      fluentTheme={fluentTheme}\n      rtl={rtl}\n      locale={props.locale}\n      icons={props.icons}\n      formFactor={props.formFactor}\n    >\n      <CallWithChatScreen\n        {...props}\n        /* @conditional-compile-remove(call-readiness) */\n        deviceChecks={options?.deviceChecks}\n        callWithChatAdapter={adapter}\n        formFactor={formFactor}\n        callControls={options?.callControls}\n        joinInvitationURL={joinInvitationURL}\n        fluentTheme={fluentTheme}\n        remoteVideoTileMenuOptions={options?.remoteVideoTileMenuOptions}\n        /* @conditional-compile-remove(file-sharing-acs) */\n        attachmentOptions={options?.attachmentOptions}\n        localVideoTile={options?.localVideoTile}\n        galleryOptions={options?.galleryOptions}\n        logo={options?.branding?.logo}\n        backgroundImage={options?.branding?.backgroundImage}\n        surveyOptions={options?.surveyOptions}\n        spotlight={options?.spotlight}\n        /* @conditional-compile-remove(rich-text-editor-composite-support) */\n        richTextEditor={options?.richTextEditor}\n      />\n    </BaseProvider>\n  );\n};\n\nconst hasJoinedCallFn = (page: CallCompositePage, callStatus: CallState): boolean => {\n  return (\n    (page === 'call' &&\n      (callStatus === 'Connected' || callStatus === 'RemoteHold' || callStatus === 'Disconnecting')) ||\n    (page === 'hold' && (callStatus === 'LocalHold' || callStatus === 'Disconnecting'))\n  );\n};\n\nconst checkShowChatButton = (callControls?: boolean | CallWithChatControlOptions): boolean => {\n  if (callControls === undefined || callControls === true) {\n    return true;\n  }\n  if (callControls === false) {\n    return false;\n  }\n  return callControls.chatButton !== false;\n};\n\nconst checkChatButtonIsDisabled = (callControls?: boolean | CallWithChatControlOptions): boolean => {\n  return typeof callControls === 'object' && isDisabled(callControls?.chatButton);\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/AzureCommunicationCallWithChatAdapter.js

@@ -678,8 +678,10 @@ export class AzureCommunicationCallWithChatAdapter {
                 (_b = this.breakoutRoomChatAdapter) === null || _b === void 0 ? void 0 : _b.dispose();
                 this.updateChatAdapter(this.originCallChatAdapter);
             }
-            const originCallId = (_d = (_c = this.callAdapter.getState().call) === null || _c === void 0 ? void 0 : _c.breakoutRooms) === null || _d === void 0 ? void 0 : _d.breakoutRoomOriginCallId;
-            if (originCallId) {
+            // Check if breakout room settings are defined to verify the user is in a breakout room before
+            // returning to the origin call.
+            const breakoutRoomSettings = (_d = (_c = this.context.getState().call) === null || _c === void 0 ? void 0 : _c.breakoutRooms) === null || _d === void 0 ? void 0 : _d.breakoutRoomSettings;
+            if (breakoutRoomSettings) {
                 yield this.callAdapter.returnFromBreakoutRoom();
             }
         });