@azure/communication-react 1.15.0-alpha-202404100012 → 1.15.0-alpha-202404120012

package/dist/communication-react.d.ts

@@ -1813,7 +1813,7 @@ export declare type CallCompositeOptions = {
  *
  * @public
  */
-export declare type CallCompositePage = 'accessDeniedTeamsMeeting' | 'call' | 'configuration' | /* @conditional-compile-remove(PSTN-calls) */ 'hold' | 'joinCallFailedDueToNoNetwork' | 'leftCall' | 'leaving' | 'lobby' | 'removedFromCall' | /* @conditional-compile-remove(unsupported-browser) */ 'unsupportedEnvironment' | /* @conditional-compile-remove(call-transfer) */ 'transferring';
+export declare type CallCompositePage = 'accessDeniedTeamsMeeting' | 'call' | 'configuration' | /* @conditional-compile-remove(PSTN-calls) */ 'hold' | 'joinCallFailedDueToNoNetwork' | 'leftCall' | 'leaving' | 'lobby' | 'removedFromCall' | /* @conditional-compile-remove(unsupported-browser) */ 'unsupportedEnvironment' | 'transferring';
 
 /**
  * Props for {@link CallComposite}.
@@ -9622,6 +9622,10 @@ export declare interface RichTextSendBoxProps {
      * Callback function used when the send button is clicked.
      */
     onSendMessage: (content: string) => Promise<void>;
+    /**
+     * Optional callback called when user is typing
+     */
+    onTyping?: () => Promise<void>;
 }
 
 /**

package/dist/dist-cjs/communication-react/{ChatMessageComponentAsRichTextEditBox-CeSMD9E_.js → ChatMessageComponentAsRichTextEditBox-D-WbqlKS.js}

@@ -4,7 +4,7 @@ var react = require('@fluentui/react');
 var reactChat = require('@fluentui-contrib/react-chat');
 var reactComponents = require('@fluentui/react-components');
 require('@azure/communication-common');
-var index = require('./index-DtankK1c.js');
+var index = require('./index-DOoeY2q0.js');
 var React = require('react');
 require('reselect');
 require('@azure/communication-calling');
@@ -125,4 +125,4 @@ const ChatMessageComponentAsRichTextEditBox = (props) => {
 };
 
 exports.ChatMessageComponentAsRichTextEditBox = ChatMessageComponentAsRichTextEditBox;
-//# sourceMappingURL=ChatMessageComponentAsRichTextEditBox-CeSMD9E_.js.map
+//# sourceMappingURL=ChatMessageComponentAsRichTextEditBox-D-WbqlKS.js.map

package/dist/dist-cjs/communication-react/{ChatMessageComponentAsRichTextEditBox-CeSMD9E_.js.map → ChatMessageComponentAsRichTextEditBox-D-WbqlKS.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageComponentAsRichTextEditBox-CeSMD9E_.js","sources":["../../../../react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsRichTextEditBox.tsx"],"sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useTheme } from '../../../theming';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { editBoxWidthStyles, richTextEditBoxActionButtonIcon } from '../../styles/EditBox.styles';\nimport { InputBoxButton } from '../../InputBoxButton';\nimport { MessageThreadStrings } from '../../MessageThread';\nimport { useChatMyMessageStyles } from '../../styles/MessageThread.styles';\nimport { ChatMessage } from '../../../types';\nimport { _AttachmentUploadCards } from '../../AttachmentUploadCards';\n/* @conditional-compile-remove(attachment-upload) */\nimport { AttachmentMetadata } from '../../../types/Attachment';\nimport { useChatMessageRichTextEditContainerStyles } from '../../styles/ChatMessageComponent.styles';\nimport { MAXIMUM_LENGTH_OF_MESSAGE } from '../../utils/SendBoxUtils';\nimport {\n  getMessageState,\n  onRenderCancelIcon,\n  onRenderSubmitIcon\n} from '../../utils/ChatMessageComponentAsEditBoxUtils';\n/* @conditional-compile-remove(attachment-upload) */\nimport { getMessageWithAttachmentMetadata } from '../../utils/ChatMessageComponentAsEditBoxUtils';\nimport { RichTextEditorComponentRef } from '../../RichTextEditor/RichTextEditor';\nimport { RichTextInputBoxComponent } from '../../RichTextEditor/RichTextInputBoxComponent';\nimport { editBoxRichTextEditorStyle, richTextActionButtonsStyle } from '../../styles/RichTextEditor.styles';\nimport { RichTextSendBoxErrors } from '../../RichTextEditor/RichTextSendBoxErrors';\nimport { useLocale } from '../../../localization';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { FluentV9ThemeProvider } from '../../../theming/FluentV9ThemeProvider';\n/* @conditional-compile-remove(attachment-upload) */\nimport { attachmentUploadCardsStyles } from '../../styles/SendBox.styles';\n\n/** @private */\nexport type ChatMessageComponentAsRichTextEditBoxProps = {\n  onCancel?: (messageId: string) => void;\n  onSubmit: (\n    text: string,\n    metadata?: Record<string, string>,\n    options?: {\n      /* @conditional-compile-remove(attachment-upload) */\n      attachmentMetadata?: AttachmentMetadata[];\n    }\n  ) => void;\n  message: ChatMessage;\n  strings: MessageThreadStrings;\n};\n\n/**\n * @private\n */\nexport const ChatMessageComponentAsRichTextEditBox = (\n  props: ChatMessageComponentAsRichTextEditBoxProps\n): JSX.Element => {\n  const { onCancel, onSubmit, strings, message } = props;\n\n  const [textValue, setTextValue] = useState<string>(message.content || '');\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  const [attachmentMetadata, setAttachmentMetadata] = useState(getMessageWithAttachmentMetadata(message));\n  const editTextFieldRef = React.useRef<RichTextEditorComponentRef>(null);\n  const theme = useTheme();\n  const messageState = getMessageState(\n    textValue,\n    /* @conditional-compile-remove(attachment-upload) */ attachmentMetadata ?? []\n  );\n  const submitEnabled = messageState === 'OK';\n\n  const editContainerStyles = useChatMessageRichTextEditContainerStyles();\n  const chatMyMessageStyles = useChatMyMessageStyles();\n  const locale = useLocale().strings;\n\n  const setText = (newValue?: string): void => {\n    setTextValue(newValue ?? '');\n  };\n\n  const textTooLongMessage =\n    messageState === 'too long'\n      ? _formatString(strings.editBoxTextLimit, { limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}` })\n      : undefined;\n\n  const iconClassName = useCallback(\n    (isHover: boolean) => {\n      const color = isHover ? theme.palette.accent : theme.palette.neutralSecondary;\n      return mergeStyles(richTextEditBoxActionButtonIcon, { color });\n    },\n    [theme.palette.accent, theme.palette.neutralSecondary]\n  );\n\n  const onRenderThemedCancelIcon = useCallback(\n    (isHover: boolean) => {\n      return onRenderCancelIcon(iconClassName(isHover));\n    },\n    [iconClassName]\n  );\n\n  const onRenderThemedSubmitIcon = useCallback(\n    (isHover: boolean) => {\n      return onRenderSubmitIcon(iconClassName(isHover));\n    },\n    [iconClassName]\n  );\n\n  const actionButtons = useMemo(() => {\n    return (\n      <Stack horizontal>\n        <InputBoxButton\n          className={richTextActionButtonsStyle}\n          ariaLabel={strings.editBoxCancelButton}\n          tooltipContent={strings.editBoxCancelButton}\n          onRenderIcon={onRenderThemedCancelIcon}\n          onClick={() => {\n            onCancel && onCancel(message.messageId);\n          }}\n          id={'dismissIconWrapper'}\n        />\n        <InputBoxButton\n          className={richTextActionButtonsStyle}\n          ariaLabel={strings.editBoxSubmitButton}\n          tooltipContent={strings.editBoxSubmitButton}\n          onRenderIcon={onRenderThemedSubmitIcon}\n          onClick={(e) => {\n            submitEnabled &&\n              onSubmit(\n                textValue,\n                message.metadata,\n                /* @conditional-compile-remove(attachment-upload) */ {\n                  attachmentMetadata\n                }\n              );\n            e.stopPropagation();\n          }}\n          id={'submitIconWrapper'}\n        />\n      </Stack>\n    );\n  }, [\n    /* @conditional-compile-remove(attachment-upload) */ attachmentMetadata,\n    message.messageId,\n    message.metadata,\n    onCancel,\n    onRenderThemedCancelIcon,\n    onRenderThemedSubmitIcon,\n    onSubmit,\n    strings.editBoxCancelButton,\n    strings.editBoxSubmitButton,\n    submitEnabled,\n    textValue\n  ]);\n  const richTextLocaleStrings = useMemo(() => {\n    /* @conditional-compile-remove(rich-text-editor) */\n    return locale.richTextSendBox;\n    return locale.sendBox;\n  }, [/* @conditional-compile-remove(rich-text-editor) */ locale.richTextSendBox, locale.sendBox]);\n\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  const onCancelAttachmentUpload = useCallback(\n    (attachmentId: string) => {\n      setAttachmentMetadata(attachmentMetadata?.filter((attachment) => attachment.id !== attachmentId));\n    },\n    [attachmentMetadata]\n  );\n\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  const onRenderAttachmentUploads = useCallback(() => {\n    return (\n      <Stack className={attachmentUploadCardsStyles}>\n        <FluentV9ThemeProvider v8Theme={theme}>\n          <_AttachmentUploadCards\n            activeAttachmentUploads={attachmentMetadata}\n            onCancelAttachmentUpload={onCancelAttachmentUpload}\n          />\n        </FluentV9ThemeProvider>\n      </Stack>\n    );\n  }, [attachmentMetadata, onCancelAttachmentUpload, theme]);\n\n  const getContent = (): JSX.Element => {\n    return (\n      <Stack className={mergeStyles(editBoxWidthStyles)}>\n        <RichTextSendBoxErrors textTooLongMessage={textTooLongMessage} systemMessage={message.failureReason} />\n        <RichTextInputBoxComponent\n          placeholderText={strings.editBoxPlaceholderText}\n          onChange={setText}\n          editorComponentRef={editTextFieldRef}\n          initialContent={message.content}\n          content={textValue}\n          strings={richTextLocaleStrings}\n          disabled={false}\n          actionComponents={actionButtons}\n          richTextEditorStyleProps={editBoxRichTextEditorStyle}\n          isHorizontalLayoutDisabled={true}\n          /* @conditional-compile-remove(attachment-upload) */\n          onRenderAttachmentUploads={onRenderAttachmentUploads}\n        />\n      </Stack>\n    );\n  };\n\n  const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n  return (\n    <ChatMyMessage\n      attached={attached}\n      root={{\n        className: chatMyMessageStyles.root\n      }}\n      body={{\n        className: mergeClasses(\n          editContainerStyles.body,\n          attached !== 'top' ? editContainerStyles.bodyAttached : undefined\n        )\n      }}\n    >\n      {getContent()}\n    </ChatMyMessage>\n  );\n};\n"],"names":["useState","getMessageWithAttachmentMetadata","useTheme","getMessageState","useChatMessageRichTextEditContainerStyles","useChatMyMessageStyles","useLocale","_formatString","MAXIMUM_LENGTH_OF_MESSAGE","useCallback","mergeStyles","richTextEditBoxActionButtonIcon","onRenderCancelIcon","onRenderSubmitIcon","useMemo","Stack","InputBoxButton","richTextActionButtonsStyle","attachmentUploadCardsStyles","FluentV9ThemeProvider","_AttachmentUploadCards","editBoxWidthStyles","RichTextSendBoxErrors","RichTextInputBoxComponent","editBoxRichTextEditorStyle","ChatMyMessage","mergeClasses"],"mappings":"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"}
+{"version":3,"file":"ChatMessageComponentAsRichTextEditBox-D-WbqlKS.js","sources":["../../../../react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsRichTextEditBox.tsx"],"sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useTheme } from '../../../theming';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { editBoxWidthStyles, richTextEditBoxActionButtonIcon } from '../../styles/EditBox.styles';\nimport { InputBoxButton } from '../../InputBoxButton';\nimport { MessageThreadStrings } from '../../MessageThread';\nimport { useChatMyMessageStyles } from '../../styles/MessageThread.styles';\nimport { ChatMessage } from '../../../types';\nimport { _AttachmentUploadCards } from '../../AttachmentUploadCards';\n/* @conditional-compile-remove(attachment-upload) */\nimport { AttachmentMetadata } from '../../../types/Attachment';\nimport { useChatMessageRichTextEditContainerStyles } from '../../styles/ChatMessageComponent.styles';\nimport { MAXIMUM_LENGTH_OF_MESSAGE } from '../../utils/SendBoxUtils';\nimport {\n  getMessageState,\n  onRenderCancelIcon,\n  onRenderSubmitIcon\n} from '../../utils/ChatMessageComponentAsEditBoxUtils';\n/* @conditional-compile-remove(attachment-upload) */\nimport { getMessageWithAttachmentMetadata } from '../../utils/ChatMessageComponentAsEditBoxUtils';\nimport { RichTextEditorComponentRef } from '../../RichTextEditor/RichTextEditor';\nimport { RichTextInputBoxComponent } from '../../RichTextEditor/RichTextInputBoxComponent';\nimport { editBoxRichTextEditorStyle, richTextActionButtonsStyle } from '../../styles/RichTextEditor.styles';\nimport { RichTextSendBoxErrors } from '../../RichTextEditor/RichTextSendBoxErrors';\nimport { useLocale } from '../../../localization';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { FluentV9ThemeProvider } from '../../../theming/FluentV9ThemeProvider';\n/* @conditional-compile-remove(attachment-upload) */\nimport { attachmentUploadCardsStyles } from '../../styles/SendBox.styles';\n\n/** @private */\nexport type ChatMessageComponentAsRichTextEditBoxProps = {\n  onCancel?: (messageId: string) => void;\n  onSubmit: (\n    text: string,\n    metadata?: Record<string, string>,\n    options?: {\n      /* @conditional-compile-remove(attachment-upload) */\n      attachmentMetadata?: AttachmentMetadata[];\n    }\n  ) => void;\n  message: ChatMessage;\n  strings: MessageThreadStrings;\n};\n\n/**\n * @private\n */\nexport const ChatMessageComponentAsRichTextEditBox = (\n  props: ChatMessageComponentAsRichTextEditBoxProps\n): JSX.Element => {\n  const { onCancel, onSubmit, strings, message } = props;\n\n  const [textValue, setTextValue] = useState<string>(message.content || '');\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  const [attachmentMetadata, setAttachmentMetadata] = useState(getMessageWithAttachmentMetadata(message));\n  const editTextFieldRef = React.useRef<RichTextEditorComponentRef>(null);\n  const theme = useTheme();\n  const messageState = getMessageState(\n    textValue,\n    /* @conditional-compile-remove(attachment-upload) */ attachmentMetadata ?? []\n  );\n  const submitEnabled = messageState === 'OK';\n\n  const editContainerStyles = useChatMessageRichTextEditContainerStyles();\n  const chatMyMessageStyles = useChatMyMessageStyles();\n  const locale = useLocale().strings;\n\n  const setText = (newValue?: string): void => {\n    setTextValue(newValue ?? '');\n  };\n\n  const textTooLongMessage =\n    messageState === 'too long'\n      ? _formatString(strings.editBoxTextLimit, { limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}` })\n      : undefined;\n\n  const iconClassName = useCallback(\n    (isHover: boolean) => {\n      const color = isHover ? theme.palette.accent : theme.palette.neutralSecondary;\n      return mergeStyles(richTextEditBoxActionButtonIcon, { color });\n    },\n    [theme.palette.accent, theme.palette.neutralSecondary]\n  );\n\n  const onRenderThemedCancelIcon = useCallback(\n    (isHover: boolean) => {\n      return onRenderCancelIcon(iconClassName(isHover));\n    },\n    [iconClassName]\n  );\n\n  const onRenderThemedSubmitIcon = useCallback(\n    (isHover: boolean) => {\n      return onRenderSubmitIcon(iconClassName(isHover));\n    },\n    [iconClassName]\n  );\n\n  const actionButtons = useMemo(() => {\n    return (\n      <Stack horizontal>\n        <InputBoxButton\n          className={richTextActionButtonsStyle}\n          ariaLabel={strings.editBoxCancelButton}\n          tooltipContent={strings.editBoxCancelButton}\n          onRenderIcon={onRenderThemedCancelIcon}\n          onClick={() => {\n            onCancel && onCancel(message.messageId);\n          }}\n          id={'dismissIconWrapper'}\n        />\n        <InputBoxButton\n          className={richTextActionButtonsStyle}\n          ariaLabel={strings.editBoxSubmitButton}\n          tooltipContent={strings.editBoxSubmitButton}\n          onRenderIcon={onRenderThemedSubmitIcon}\n          onClick={(e) => {\n            submitEnabled &&\n              onSubmit(\n                textValue,\n                message.metadata,\n                /* @conditional-compile-remove(attachment-upload) */ {\n                  attachmentMetadata\n                }\n              );\n            e.stopPropagation();\n          }}\n          id={'submitIconWrapper'}\n        />\n      </Stack>\n    );\n  }, [\n    /* @conditional-compile-remove(attachment-upload) */ attachmentMetadata,\n    message.messageId,\n    message.metadata,\n    onCancel,\n    onRenderThemedCancelIcon,\n    onRenderThemedSubmitIcon,\n    onSubmit,\n    strings.editBoxCancelButton,\n    strings.editBoxSubmitButton,\n    submitEnabled,\n    textValue\n  ]);\n  const richTextLocaleStrings = useMemo(() => {\n    /* @conditional-compile-remove(rich-text-editor) */\n    return locale.richTextSendBox;\n    return locale.sendBox;\n  }, [/* @conditional-compile-remove(rich-text-editor) */ locale.richTextSendBox, locale.sendBox]);\n\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  const onCancelAttachmentUpload = useCallback(\n    (attachmentId: string) => {\n      setAttachmentMetadata(attachmentMetadata?.filter((attachment) => attachment.id !== attachmentId));\n    },\n    [attachmentMetadata]\n  );\n\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  const onRenderAttachmentUploads = useCallback(() => {\n    return (\n      <Stack className={attachmentUploadCardsStyles}>\n        <FluentV9ThemeProvider v8Theme={theme}>\n          <_AttachmentUploadCards\n            activeAttachmentUploads={attachmentMetadata}\n            onCancelAttachmentUpload={onCancelAttachmentUpload}\n          />\n        </FluentV9ThemeProvider>\n      </Stack>\n    );\n  }, [attachmentMetadata, onCancelAttachmentUpload, theme]);\n\n  const getContent = (): JSX.Element => {\n    return (\n      <Stack className={mergeStyles(editBoxWidthStyles)}>\n        <RichTextSendBoxErrors textTooLongMessage={textTooLongMessage} systemMessage={message.failureReason} />\n        <RichTextInputBoxComponent\n          placeholderText={strings.editBoxPlaceholderText}\n          onChange={setText}\n          editorComponentRef={editTextFieldRef}\n          initialContent={message.content}\n          content={textValue}\n          strings={richTextLocaleStrings}\n          disabled={false}\n          actionComponents={actionButtons}\n          richTextEditorStyleProps={editBoxRichTextEditorStyle}\n          isHorizontalLayoutDisabled={true}\n          /* @conditional-compile-remove(attachment-upload) */\n          onRenderAttachmentUploads={onRenderAttachmentUploads}\n        />\n      </Stack>\n    );\n  };\n\n  const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n  return (\n    <ChatMyMessage\n      attached={attached}\n      root={{\n        className: chatMyMessageStyles.root\n      }}\n      body={{\n        className: mergeClasses(\n          editContainerStyles.body,\n          attached !== 'top' ? editContainerStyles.bodyAttached : undefined\n        )\n      }}\n    >\n      {getContent()}\n    </ChatMyMessage>\n  );\n};\n"],"names":["useState","getMessageWithAttachmentMetadata","useTheme","getMessageState","useChatMessageRichTextEditContainerStyles","useChatMyMessageStyles","useLocale","_formatString","MAXIMUM_LENGTH_OF_MESSAGE","useCallback","mergeStyles","richTextEditBoxActionButtonIcon","onRenderCancelIcon","onRenderSubmitIcon","useMemo","Stack","InputBoxButton","richTextActionButtonsStyle","attachmentUploadCardsStyles","FluentV9ThemeProvider","_AttachmentUploadCards","editBoxWidthStyles","RichTextSendBoxErrors","RichTextInputBoxComponent","editBoxRichTextEditorStyle","ChatMyMessage","mergeClasses"],"mappings":"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"}

package/dist/dist-cjs/communication-react/{index-DtankK1c.js → index-DOoeY2q0.js}

@@ -176,7 +176,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.15.0-alpha-202404100012';
+var telemetryVersion = '1.15.0-alpha-202404120012';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -1807,7 +1807,6 @@ function convertSdkCallToDeclarativeCall(call) {
             /* @conditional-compile-remove(acs-close-captions) */
             captionsKind: _isTeamsCall(call) ? 'TeamsCaptions' : 'Captions'
         },
-        /* @conditional-compile-remove(call-transfer) */
         transfer: {
             acceptedTransfers: {}
         },
@@ -2766,7 +2765,6 @@ let CallContext$2 = class CallContext {
             }
         });
     }
-    /* @conditional-compile-remove(call-transfer) */
     setAcceptedTransfer(callId, acceptedTransfer) {
         this.modifyState((draft) => {
             const call = draft.calls[this._callIdHistory.latestCallId(callId)];
@@ -4688,7 +4686,6 @@ class ProxyCallCommon {
                         proxyFeature = new ProxyTeamsCaptions(this._context, target);
                         return { captions: new Proxy(captionsFeature, proxyFeature) };
                     }
-                    /* @conditional-compile-remove(call-transfer) */
                     if (args[0] === communicationCalling.Features.Transfer) {
                         const transferFeature = target.feature(communicationCalling.Features.Transfer);
                         const proxyFeature = new ProxyTransferCallFeature(this._context, target);
@@ -4815,7 +4812,6 @@ class ProxySpotlightCallFeature {
         }
     }
 }
-/* @conditional-compile-remove(call-transfer) */
 /**
  * @private
  */
@@ -10585,7 +10581,7 @@ const RichTextInputBoxComponent = (props) => {
     /* @conditional-compile-remove(attachment-upload) */
     onRenderAttachmentUploads, 
     /* @conditional-compile-remove(attachment-upload) */
-    hasAttachments, richTextEditorStyleProps, isHorizontalLayoutDisabled = false, content, autoFocus } = props;
+    hasAttachments, richTextEditorStyleProps, isHorizontalLayoutDisabled = false, content, autoFocus, onTyping } = props;
     const theme = useTheme();
     const [showRichTextEditorFormatting, setShowRichTextEditorFormatting] = React.useState(false);
     const onRenderRichTextEditorIcon = React.useCallback((isHover) => (React.createElement(react.Icon, { iconName: isHover || showRichTextEditorFormatting ? 'RichTextEditorButtonIconFilled' : 'RichTextEditorButtonIcon', className: richTextFormatButtonIconStyle(theme, !disabled && (isHover || showRichTextEditorFormatting)) })), [disabled, showRichTextEditorFormatting, theme]);
@@ -10619,7 +10615,10 @@ const RichTextInputBoxComponent = (props) => {
             ev.preventDefault();
             onEnterKeyDown && onEnterKeyDown();
         }
-    }, [onEnterKeyDown, showRichTextEditorFormatting]);
+        else {
+            onTyping === null || onTyping === void 0 ? void 0 : onTyping();
+        }
+    }, [onEnterKeyDown, showRichTextEditorFormatting, onTyping]);
     const useHorizontalLayout = React.useMemo(() => {
         return (!isHorizontalLayoutDisabled &&
             !showRichTextEditorFormatting &&
@@ -10716,7 +10715,7 @@ const isMessageEmpty$1 = (message) => {
  * @beta
  */
 const RichTextSendBox = (props) => {
-    const { disabled = false, systemMessage, autoFocus, onSendMessage, 
+    const { disabled = false, systemMessage, autoFocus, onSendMessage, onTyping, 
     /* @conditional-compile-remove(attachment-upload) */
     activeAttachmentUploads, 
     /* @conditional-compile-remove(attachment-upload) */
@@ -10854,7 +10853,7 @@ const RichTextSendBox = (props) => {
         , { 
             // in case when format bar is shown, the editor is re-rendered that causes the content to be lost
             // setting the content will ensure that the latest content is used when editor is re-rendered
-            content: contentValue, placeholderText: strings.placeholderText, autoFocus: autoFocus, onChange: setContent, onEnterKeyDown: sendMessageOnClick, editorComponentRef: editorComponentRef, strings: strings, disabled: disabled, actionComponents: sendButton, richTextEditorStyleProps: sendBoxRichTextEditorStyle, 
+            content: contentValue, placeholderText: strings.placeholderText, autoFocus: autoFocus, onChange: setContent, onEnterKeyDown: sendMessageOnClick, onTyping: onTyping, editorComponentRef: editorComponentRef, strings: strings, disabled: disabled, actionComponents: sendButton, richTextEditorStyleProps: sendBoxRichTextEditorStyle, 
             /* @conditional-compile-remove(attachment-upload) */
             onRenderAttachmentUploads: onRenderAttachmentUploads, 
             /* @conditional-compile-remove(attachment-upload) */
@@ -12655,7 +12654,7 @@ const ChatMessageComponentAsEditBox = (props) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /* @conditional-compile-remove(rich-text-editor) */
-const ChatMessageComponentAsRichTextEditBox = React.lazy(() => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-CeSMD9E_.js'); }).then((module) => ({
+const ChatMessageComponentAsRichTextEditBox = React.lazy(() => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-D-WbqlKS.js'); }).then((module) => ({
     default: module.ChatMessageComponentAsRichTextEditBox
 })));
 /**
@@ -15124,7 +15123,8 @@ const raiseHandContainerStyles = (theme, limitedSpace) => react.mergeStyles({
     borderRadius: '1rem',
     margin: '0.5rem',
     width: 'fit-content',
-    position: 'absolute'
+    position: 'absolute',
+    top: 0
 }, limitedSpace && raiseHandLimitedSpaceStyles);
 /**
  * @private
@@ -15281,71 +15281,6 @@ function useLongPress(props) {
     ]);
 }
 
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-/**
- * @private
- */
-const videoGalleryOuterDivStyle = react.mergeStyles({ position: 'relative', width: '100%', height: '100%' });
-/**
- * @private
- */
-const localVideoCameraCycleButtonStyles = (theme, size) => {
-    return {
-        root: {
-            position: 'absolute',
-            width: size === 'large' ? _pxToRem(40) : _pxToRem(32),
-            height: size === 'large' ? _pxToRem(40) : _pxToRem(32),
-            right: '0rem',
-            top: '0rem',
-            color: '#FFFFFF', // only shows up on running video feed to we want to force specific colours.
-            zIndex: 2, // shows the button directly over the local video feed.
-            background: 'rgba(0,0,0,0.4)',
-            borderRadius: theme.effects.roundedCorner2
-        },
-        rootFocused: {
-            // styles to remove the unwanted white highlight and blue colour after tapping on button.
-            color: '#FFFFFF',
-            background: 'rgba(0,0,0,0.4)' // sets opacity of background to be visible on all backdrops in video stream.
-        },
-        rootDisabled: {
-            // In the disabled state, FluentUI sets the position to relative. We need to override this to keep the button correctly positioned.
-            position: 'absolute'
-        },
-        icon: {
-            paddingLeft: _pxToRem(3),
-            paddingRight: _pxToRem(3),
-            margin: 0
-        },
-        flexContainer: {
-            paddingBottom: _pxToRem(8),
-            height: 'unset'
-        }
-    };
-};
-/**
- * @private
- */
-const localVideoTileContainerStyles = {
-    root: { width: '100%', height: '100%' }
-};
-/**
- * @private
- */
-//TODO Can be removed once the overlay mitigation has been implemented at the SDK layer
-const pptLiveOverlayStyles = {
-    root: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-        backgroundColor: 'transparent',
-        pointerEvents: 'none',
-        zIndex: 0
-    }
-};
-
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // Coin max size is set to PersonaSize.size100
@@ -15408,6 +15343,33 @@ const VideoTile = (props) => {
         const currentObserver = observer.current;
         return () => currentObserver.disconnect();
     }, [videoTileRef]);
+    /* @conditional-compile-remove(ppt-live) */
+    // TODO: Remove after calling sdk fix the keybaord focus
+    React.useEffect(() => {
+        // PPTLive display name is undefined, return as it is not screen share
+        if (displayName !== undefined) {
+            return;
+        }
+        let observer;
+        if (videoTileRef.current) {
+            observer = new MutationObserver((mutationsList) => {
+                for (const mutation of mutationsList) {
+                    if (mutation.type === 'childList') {
+                        const iframe = document.querySelector('iframe');
+                        if (iframe) {
+                            if (!iframe.getAttribute('tabIndex')) {
+                                iframe.setAttribute('tabIndex', '-1');
+                            }
+                        }
+                    }
+                }
+            });
+            observer.observe(videoTileRef.current, { childList: true, subtree: true });
+        }
+        return () => {
+            observer === null || observer === void 0 ? void 0 : observer.disconnect();
+        };
+    }, [displayName, renderElement]);
     const useLongPressProps = React.useMemo(() => {
         return {
             onLongPress: () => {
@@ -15467,9 +15429,6 @@ const VideoTile = (props) => {
                 }) }, onRenderPlaceholder ? (onRenderPlaceholder(userId !== null && userId !== void 0 ? userId : '', placeholderOptions, DefaultPlaceholder)) : (React.createElement(DefaultPlaceholder, Object.assign({}, placeholderOptions))))),
             /* @conditional-compile-remove(reaction) */
             reactionOverlay,
-            /* @conditional-compile-remove(ppt-live) */
-            // TODO Can be removed once the overlay mitigation has been implemented at the SDK layer
-            React.createElement(react.Stack, { className: react.mergeStyles(videoContainerStyles, pptLiveOverlayStyles) }),
             (canShowLabel || participantStateString) && (React.createElement(react.Stack, { horizontal: true, className: tileInfoContainerStyle, tokens: tileInfoContainerTokens },
                 React.createElement(react.Stack, { horizontal: true, className: tileInfoStyle },
                     canShowLabel && (React.createElement(react.Text, { className: react.mergeStyles(displayNameStyle), title: displayName, style: { color: participantStateString ? theme.palette.neutralSecondary : 'inherit' }, "data-ui-id": "video-tile-display-name" }, displayName)),
@@ -16202,11 +16161,11 @@ const MeetingReactionOverlay = (props) => {
         return () => currentObserver.disconnect();
     }, [videoTileRef]);
     if (overlayMode === 'grid-tiles') {
-        return (React.createElement("div", { ref: videoTileRef, style: { width: '100%', height: '100%' } },
+        return (React.createElement("div", { ref: videoTileRef, style: { width: '100%', height: '100%', pointerEvents: 'none' } },
             React.createElement(ParticipantVideoTileOverlay, { emojiSize: emojiSizePx, reaction: reaction, reactionResources: reactionResources })));
     }
     else if (props.overlayMode === 'screen-share' || props.overlayMode === 'content-share') {
-        return (React.createElement("div", { ref: videoTileRef, style: { width: '100%', height: '100%' } },
+        return (React.createElement("div", { ref: videoTileRef, style: { width: '100%', height: '100%', pointerEvents: 'none' } },
             React.createElement(RemoteContentShareReactionOverlay, { hostDivHeight: divHeight, hostDivWidth: divWidth, reactionResources: reactionResources, localParticipant: localParticipant, remoteParticipants: remoteParticipants })));
     }
     else {
@@ -16475,6 +16434,55 @@ const LoadingSpinner = (props) => {
         React.createElement(react.Spinner, { label: props.loadingMessage, size: react.SpinnerSize.xSmall, "aria-live": 'assertive' })));
 };
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * @private
+ */
+const videoGalleryOuterDivStyle = react.mergeStyles({ position: 'relative', width: '100%', height: '100%' });
+/**
+ * @private
+ */
+const localVideoCameraCycleButtonStyles = (theme, size) => {
+    return {
+        root: {
+            position: 'absolute',
+            width: size === 'large' ? _pxToRem(40) : _pxToRem(32),
+            height: size === 'large' ? _pxToRem(40) : _pxToRem(32),
+            right: '0rem',
+            top: '0rem',
+            color: '#FFFFFF', // only shows up on running video feed to we want to force specific colours.
+            zIndex: 2, // shows the button directly over the local video feed.
+            background: 'rgba(0,0,0,0.4)',
+            borderRadius: theme.effects.roundedCorner2
+        },
+        rootFocused: {
+            // styles to remove the unwanted white highlight and blue colour after tapping on button.
+            color: '#FFFFFF',
+            background: 'rgba(0,0,0,0.4)' // sets opacity of background to be visible on all backdrops in video stream.
+        },
+        rootDisabled: {
+            // In the disabled state, FluentUI sets the position to relative. We need to override this to keep the button correctly positioned.
+            position: 'absolute'
+        },
+        icon: {
+            paddingLeft: _pxToRem(3),
+            paddingRight: _pxToRem(3),
+            margin: 0
+        },
+        flexContainer: {
+            paddingBottom: _pxToRem(8),
+            height: 'unset'
+        }
+    };
+};
+/**
+ * @private
+ */
+const localVideoTileContainerStyles = {
+    root: { width: '100%', height: '100%' }
+};
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 var __awaiter$A = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -27134,29 +27142,30 @@ const ChatScreen = (props) => {
         setIsImageOverlayOpen(true);
         setOverlayImageItem(overlayImage);
     }, [adapter, onRenderAvatarCallback, userId]);
-    const inlineImageOptions = {
-        onRenderInlineImage: (inlineImage, defaultOnRender) => {
-            var _a, _b;
-            const message = adapter.getState().thread.chatMessages[inlineImage.messageId];
-            const attachment = (_b = (_a = message === null || message === void 0 ? void 0 : message.content) === null || _a === void 0 ? void 0 : _a.attachments) === null || _b === void 0 ? void 0 : _b.find((attachment) => attachment.id === inlineImage.imageAttributes.id);
-            if (attachment === undefined) {
-                return defaultOnRender(inlineImage);
-            }
-            let pointerEvents = inlineImage.imageAttributes.src === '' ? 'none' : 'auto';
-            const resourceCache = message.resourceCache;
-            if (resourceCache &&
-                attachment.previewUrl &&
-                resourceCache[attachment.previewUrl] &&
-                resourceCache[attachment.previewUrl].error) {
-                pointerEvents = 'none';
-            }
-            return (React.createElement("span", { key: inlineImage.imageAttributes.id, onClick: () => onInlineImageClicked(inlineImage.imageAttributes.id || '', inlineImage.messageId), tabIndex: 0, role: "button", onKeyDown: (e) => {
-                    if (e.key === 'Enter') {
-                        onInlineImageClicked(inlineImage.imageAttributes.id || '', inlineImage.messageId);
-                    }
-                }, style: { cursor: 'pointer', pointerEvents } }, defaultOnRender(inlineImage)));
+    const onRenderInlineImage = React.useCallback((inlineImage, defaultOnRender) => {
+        var _a, _b;
+        const message = adapter.getState().thread.chatMessages[inlineImage.messageId];
+        const attachment = (_b = (_a = message === null || message === void 0 ? void 0 : message.content) === null || _a === void 0 ? void 0 : _a.attachments) === null || _b === void 0 ? void 0 : _b.find((attachment) => attachment.id === inlineImage.imageAttributes.id);
+        if (attachment === undefined) {
+            return defaultOnRender(inlineImage);
         }
-    };
+        let pointerEvents = inlineImage.imageAttributes.src === '' ? 'none' : 'auto';
+        const resourceCache = message.resourceCache;
+        if (resourceCache &&
+            attachment.previewUrl &&
+            resourceCache[attachment.previewUrl] &&
+            resourceCache[attachment.previewUrl].error) {
+            pointerEvents = 'none';
+        }
+        return (React.createElement("span", { key: inlineImage.imageAttributes.id, onClick: () => onInlineImageClicked(inlineImage.imageAttributes.id || '', inlineImage.messageId), tabIndex: 0, role: "button", onKeyDown: (e) => {
+                if (e.key === 'Enter') {
+                    onInlineImageClicked(inlineImage.imageAttributes.id || '', inlineImage.messageId);
+                }
+            }, style: { cursor: 'pointer', pointerEvents } }, defaultOnRender(inlineImage)));
+    }, [adapter, onInlineImageClicked]);
+    const inlineImageOptions = React.useMemo(() => {
+        return { onRenderInlineImage: onRenderInlineImage };
+    }, [onRenderInlineImage]);
     const onDownloadButtonClicked = React.useCallback((imageSrc) => {
         if (imageSrc === '') {
             return;
@@ -27651,7 +27660,6 @@ const getCallCompositePage = (call, previousCall, transferCall, unsupportedBrows
     if (isUnsupportedEnvironment(unsupportedBrowserInfo === null || unsupportedBrowserInfo === void 0 ? void 0 : unsupportedBrowserInfo.environmentInfo, unsupportedBrowserInfo === null || unsupportedBrowserInfo === void 0 ? void 0 : unsupportedBrowserInfo.unsupportedBrowserVersionOptedIn)) {
         return 'unsupportedEnvironment';
     }
-    /* @conditional-compile-remove(call-transfer) */
     if (transferCall !== undefined) {
         return 'transferring';
     }
@@ -28604,7 +28612,6 @@ const getRole = (state) => { var _a; return (_a = state.call) === null || _a ===
  * @private
  */
 const getPage = (state) => state.page;
-/* @conditional-compile-remove(call-transfer) */
 /**
  * @private
  */
@@ -34726,51 +34733,40 @@ const TransferPage = (props) => {
     const errorBarProps = usePropsFor$1(ErrorBar);
     const strings = useLocale().strings.call;
     const remoteParticipants = useSelector$1(getRemoteParticipants);
-    /* @conditional-compile-remove(call-transfer) */
     const transferCall = useSelector$1(getTransferCall);
-    /* @conditional-compile-remove(call-transfer) */
     const [announcerString, setAnnouncerString] = React.useState(undefined);
     // Reduce the controls shown when mobile view is enabled.
     const callControlOptions = props.mobileView
         ? reduceCallControlsForMobile((_a = props.options) === null || _a === void 0 ? void 0 : _a.callControls)
         : (_b = props.options) === null || _b === void 0 ? void 0 : _b.callControls;
     const transferor = React.useMemo(() => { var _a; return (remoteParticipants ? (_a = Object.values(remoteParticipants)) === null || _a === void 0 ? void 0 : _a[0] : undefined); }, [remoteParticipants]);
-    /* @conditional-compile-remove(call-transfer) */
     const transferTarget = React.useMemo(() => { var _a; return ((transferCall === null || transferCall === void 0 ? void 0 : transferCall.remoteParticipants) ? (_a = Object.values(transferCall.remoteParticipants)) === null || _a === void 0 ? void 0 : _a[0] : undefined); }, [transferCall]);
-    /* @conditional-compile-remove(call-transfer) */
     const pageSubject = React.useMemo(() => {
         if (transferCall && (transferTarget === null || transferTarget === void 0 ? void 0 : transferTarget.displayName)) {
             return 'transferTarget';
         }
         return 'transferor';
     }, [transferCall, transferTarget === null || transferTarget === void 0 ? void 0 : transferTarget.displayName]);
-    /* @conditional-compile-remove(call-transfer) */
     React.useEffect(() => {
         setAnnouncerString(strings.transferPageNoticeString);
     }, [strings.transferPageNoticeString]);
     let transferTileParticipant = transferor;
-    /* @conditional-compile-remove(call-transfer) */
     if (pageSubject === 'transferTarget') {
         transferTileParticipant = transferTarget;
     }
-    let transferParticipantDisplayName = (_c = transferor === null || transferor === void 0 ? void 0 : transferor.displayName) !== null && _c !== void 0 ? _c : 
-    /* @conditional-compile-remove(call-transfer) */ strings.transferPageUnknownTransferorDisplayName;
-    /* @conditional-compile-remove(call-transfer) */
+    let transferParticipantDisplayName = (_c = transferor === null || transferor === void 0 ? void 0 : transferor.displayName) !== null && _c !== void 0 ? _c : strings.transferPageUnknownTransferorDisplayName;
     if (pageSubject === 'transferTarget') {
         transferParticipantDisplayName =
             (_d = transferTarget === null || transferTarget === void 0 ? void 0 : transferTarget.displayName) !== null && _d !== void 0 ? _d : strings.transferPageUnknownTransferTargetDisplayName;
     }
     return (React.createElement(react.Stack, { className: react.mergeStyles(pageContainer) },
-        /* @conditional-compile-remove(call-transfer) */
         React.createElement(Announcer$1, { announcementString: announcerString, ariaLive: "polite" }),
         React.createElement(CallArrangement, { complianceBannerProps: { strings }, 
             // Ignore errors from before current call. This avoids old errors from showing up when a user re-joins a call.
             errorBarProps: ((_e = props.options) === null || _e === void 0 ? void 0 : _e.errorBar) !== false && errorBarProps, callControlProps: {
                 options: callControlOptions,
                 increaseFlyoutItemSize: props.mobileView
-            }, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => (React.createElement(TransferTile, { userId: transferTileParticipant ? toFlatCommunicationIdentifier(transferTileParticipant === null || transferTileParticipant === void 0 ? void 0 : transferTileParticipant.identifier) : undefined, displayName: transferParticipantDisplayName, initialsName: transferParticipantDisplayName, 
-                /* @conditional-compile-remove(call-transfer) */
-                statusText: pageSubject === 'transferTarget'
+            }, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => (React.createElement(TransferTile, { userId: transferTileParticipant ? toFlatCommunicationIdentifier(transferTileParticipant === null || transferTileParticipant === void 0 ? void 0 : transferTileParticipant.identifier) : undefined, displayName: transferParticipantDisplayName, initialsName: transferParticipantDisplayName, statusText: pageSubject === 'transferTarget'
                     ? strings.transferPageTransferTargetText
                     : strings.transferPageTransferorText, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData })), dataUiId: 'transfer-page', updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: props.latestErrors, onDismissError: props.onDismissError })));
 };
@@ -35583,7 +35579,6 @@ const MainScreen = (props) => {
         case 'lobby':
             pageElement = (React.createElement(LobbyPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: latestErrors, onDismissError: onDismissError, capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps }));
             break;
-        /* @conditional-compile-remove(call-transfer) */
         case 'transferring':
             pageElement = (React.createElement(TransferPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, onFetchAvatarPersonaData: onFetchAvatarPersonaData, latestErrors: latestErrors, onDismissError: onDismissError, capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps }));
             break;
@@ -35980,14 +35975,11 @@ class CallContext {
             environmentInfo: this.state.environmentInfo,
             unsupportedBrowserVersionOptedIn: this.state.unsupportedBrowserVersionsAllowed
         };
-        /* @conditional-compile-remove(call-transfer) */
         const latestAcceptedTransfer = (call === null || call === void 0 ? void 0 : call.transfer.acceptedTransfers)
             ? findLatestAcceptedTransfer(call.transfer.acceptedTransfers)
             : undefined;
-        /* @conditional-compile-remove(call-transfer) */
         const transferCall = latestAcceptedTransfer ? clientState.calls[latestAcceptedTransfer.callId] : undefined;
-        const newPage = getCallCompositePage(call, latestEndedCall, 
-        /* @conditional-compile-remove(call-transfer) */ transferCall, 
+        const newPage = getCallCompositePage(call, latestEndedCall, transferCall, 
         /* @conditional-compile-remove(unsupported-browser) */ environmentInfo);
         if (!IsCallEndedPage(oldPage) && IsCallEndedPage(newPage)) {
             this.emitter.emit('callEnded', { callId: this.callId });
@@ -36000,8 +35992,7 @@ class CallContext {
             this.setState(Object.assign(Object.assign({}, this.state), { userId: clientState.userId, displayName: (_a = clientState.callAgent) === null || _a === void 0 ? void 0 : _a.displayName, call, page: newPage, endedCall: latestEndedCall, devices: clientState.deviceManager, latestErrors: clientState.latestErrors, cameraStatus: (call === null || call === void 0 ? void 0 : call.localVideoStreams.find((s) => s.mediaStreamType === 'Video')) ||
                     clientState.deviceManager.unparentedViews.find((s) => s.mediaStreamType === 'Video')
                     ? 'On'
-                    : 'Off', 
-                /* @conditional-compile-remove(call-transfer) */ acceptedTransferCallState: transferCall }));
+                    : 'Off', acceptedTransferCallState: transferCall }));
         }
     }
     /* @conditional-compile-remove(unsupported-browser) */
@@ -36014,7 +36005,6 @@ class CallContext {
     setSelectedVideoBackgroundEffect(selectedVideoBackgroundEffect) {
         this.setState(Object.assign(Object.assign({}, this.state), { selectedVideoBackgroundEffect }));
     }
-    /* @conditional-compile-remove(call-transfer) */
     setAcceptedTransferCall(call) {
         this.setState(Object.assign(Object.assign({}, this.state), { acceptedTransferCallState: call }));
     }
@@ -36033,7 +36023,6 @@ const findLatestEndedCall = (calls) => {
     }
     return latestCall;
 };
-/* @conditional-compile-remove(call-transfer) */
 const findLatestAcceptedTransfer = (acceptedTransfers) => {
     var _a, _b, _c, _d;
     const acceptedTransferValues = Object.values(acceptedTransfers);
@@ -36119,7 +36108,6 @@ class AzureCommunicationCallAdapter {
         this.onClientStateChange = onStateChange;
         this.subscribeDeviceManagerEvents();
         this.callClient.onStateChange(onStateChange);
-        /* @conditional-compile-remove(call-transfer) */
         if (this.callAgent.kind === 'CallAgent') {
             const onCallsUpdated = (args) => {
                 var _a;
@@ -36780,7 +36768,6 @@ class AzureCommunicationCallAdapter {
         /* @conditional-compile-remove(close-captions) */
         (_e = this.call) === null || _e === void 0 ? void 0 : _e.on('stateChanged', this.subscribeToCaptionEvents.bind(this));
         (_f = this.call) === null || _f === void 0 ? void 0 : _f.on('roleChanged', this.roleChanged.bind(this));
-        /* @conditional-compile-remove(call-transfer) */
         (_g = this.call) === null || _g === void 0 ? void 0 : _g.feature(communicationCalling.Features.Transfer).on('transferAccepted', this.transferAccepted.bind(this));
         (_h = this.call) === null || _h === void 0 ? void 0 : _h.feature(communicationCalling.Features.Capabilities).on('capabilitiesChanged', this.capabilitiesChanged.bind(this));
         /* @conditional-compile-remove(spotlight) */
@@ -36855,7 +36842,6 @@ class AzureCommunicationCallAdapter {
             activeCaptionLanguage: captionsFeature.activeCaptionLanguage
         });
     }
-    /* @conditional-compile-remove(call-transfer) */
     transferAccepted(args) {
         this.emitter.emit('transferAccepted', args);
     }
@@ -39626,4 +39612,4 @@ exports.useTeamsCall = useTeamsCall;
 exports.useTeamsCallAdapter = useTeamsCallAdapter;
 exports.useTeamsCallAgent = useTeamsCallAgent;
 exports.useTheme = useTheme;
-//# sourceMappingURL=index-DtankK1c.js.map
+//# sourceMappingURL=index-DOoeY2q0.js.map