@azure/communication-react 1.19.0-alpha-202408250016 → 1.19.0-alpha-202408270015

package/dist/dist-cjs/communication-react/{index-Bqw-4OaM.js → index-DejG4i9h.js}

@@ -189,7 +189,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.19.0-alpha-202408250016';
+var telemetryVersion = '1.19.0-alpha-202408270015';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -10753,7 +10753,7 @@ class _ErrorBoundary extends React.Component {
 // 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-vvmyDrAz.js'); }));
+const ChatMessageComponentAsRichTextEditBox = React.lazy(() => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-qEJmtx93.js'); }));
 /**
  * @private
  * Use this function to load RoosterJS dependencies early in the lifecycle.
@@ -10761,7 +10761,7 @@ const ChatMessageComponentAsRichTextEditBox = React.lazy(() => Promise.resolve()
  *
  * @conditional-compile-remove(rich-text-editor)
  */
-const loadChatMessageComponentAsRichTextEditBox = () => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-vvmyDrAz.js'); });
+const loadChatMessageComponentAsRichTextEditBox = () => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-qEJmtx93.js'); });
 /**
  * @private
  */
@@ -12567,13 +12567,13 @@ const DrawerContentContainer = (props) => {
     const theme = react.useTheme();
     const backgroundColor = theme.palette.white;
     const borderRadius = theme.effects.roundedCorner4;
-    const rootStyles = react.mergeStyles(containerStyles$5(backgroundColor, borderRadius), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root);
+    const rootStyles = react.mergeStyles(containerStyles$6(backgroundColor, borderRadius), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root);
     return (React.createElement(react.Stack, { className: rootStyles },
         props.heading && (React.createElement(react.Stack, { className: react.mergeStyles(headingContainerStyles) },
             React.createElement(react.Text, { className: react.mergeStyles(headingStyles(theme)) }, props.heading))),
         props.children));
 };
-const containerStyles$5 = (backgroundColor, borderRadius) => (Object.assign({ background: backgroundColor, borderTopRightRadius: borderRadius, borderTopLeftRadius: borderRadius }, react.AnimationStyles.slideUpIn10));
+const containerStyles$6 = (backgroundColor, borderRadius) => (Object.assign({ background: backgroundColor, borderTopRightRadius: borderRadius, borderTopLeftRadius: borderRadius }, react.AnimationStyles.slideUpIn10));
 const headingContainerStyles = {
     textAlign: 'center',
     width: '100%',
@@ -18358,7 +18358,7 @@ const secondaryTileFloatingStyles = {
 /**
  * @private
  */
-const containerStyles$4 = (theme) => {
+const containerStyles$5 = (theme) => {
     return {
         maxWidth: '16rem',
         textAlign: 'center',
@@ -18738,7 +18738,7 @@ const DialpadContainer = (props) => {
         const modifiedInput = plainTextValue.substring(0, plainTextValue.length - 1);
         setText(modifiedInput);
     };
-    return (React.createElement(react.Stack, { className: react.mergeStyles(containerStyles$4(theme), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root), "data-test-id": "dialpadContainer", "data-ui-id": "dialpadContainer", horizontalAlign: 'center' },
+    return (React.createElement(react.Stack, { className: react.mergeStyles(containerStyles$5(theme), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root), "data-test-id": "dialpadContainer", "data-ui-id": "dialpadContainer", horizontalAlign: 'center' },
         dialpadMode === 'dialer' && (React.createElement(react.TextField, { styles: react.concatStyleSets(textFieldStyles(theme, plainTextValue !== ''), (_b = props.styles) === null || _b === void 0 ? void 0 : _b.textField), value: textFieldValue ? textFieldValue : _formatPhoneNumber(plainTextValue), 
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             onChange: (e) => {
@@ -19139,7 +19139,7 @@ const linkTextStyles = {
 /**
  * @internal
  */
-const containerStyles$3 = {
+const containerStyles$4 = {
     root: {
         maxWidth: _pxToRem(375),
         padding: '2rem'
@@ -19166,7 +19166,7 @@ const continueAnywayButtonStyles = (theme) => {
 const UnsupportedEnvironmentContainer = (props) => {
     const { onTroubleshootingClick, strings, onContinueAnywayClick } = props;
     const theme = useTheme();
-    return (React.createElement(react.Stack, { styles: containerStyles$3, tokens: { childrenGap: '2rem' } },
+    return (React.createElement(react.Stack, { styles: containerStyles$4, tokens: { childrenGap: '2rem' } },
         React.createElement(react.Icon, { iconName: "UnsupportedEnvironmentWarning", "data-ui-id": "unsupported-environment-icon" }),
         React.createElement(react.Stack, { styles: testContainerStyles, tokens: { childrenGap: '0.25rem' } },
             React.createElement(react.Text, { styles: mainTextStyles }, strings === null || strings === void 0 ? void 0 : strings.primaryText),
@@ -20109,7 +20109,7 @@ const messageTextStyle = (theme) => react.mergeStyles({
 /**
  * @private
  */
-const titleTextClassName = react.mergeStyles({
+const titleTextClassName$1 = react.mergeStyles({
     fontWeight: 400,
     fontSize: _pxToRem(14),
     lineHeight: _pxToRem(16),
@@ -20118,7 +20118,7 @@ const titleTextClassName = react.mergeStyles({
 /**
  * @private
  */
-const containerStyles$2 = (theme) => react.mergeStyles({
+const containerStyles$3 = (theme) => react.mergeStyles({
     boxShadow: theme.effects.elevation8,
     width: '20rem',
     padding: '0.75rem',
@@ -20172,11 +20172,11 @@ const Notification = (props) => {
         }
     }
     return (React.createElement(react.Stack, { horizontalAlign: "center" },
-        React.createElement(react.Stack, { "data-ui-id": "notification-bar", className: containerStyles$2(theme) },
+        React.createElement(react.Stack, { "data-ui-id": "notification-bar", className: containerStyles$3(theme) },
             React.createElement(react.Stack, { horizontal: true, horizontalAlign: "space-between" },
                 React.createElement(react.Stack, { horizontal: true },
                     React.createElement(react.Icon, Object.assign({ className: notificationIconClassName, iconName: (_b = (_a = props.notificationIconProps) === null || _a === void 0 ? void 0 : _a.iconName) !== null && _b !== void 0 ? _b : 'ErrorBadge' }, props.notificationIconProps)),
-                    React.createElement(react.Text, { className: titleTextClassName }, strings === null || strings === void 0 ? void 0 : strings.title)),
+                    React.createElement(react.Text, { className: titleTextClassName$1 }, strings === null || strings === void 0 ? void 0 : strings.title)),
                 React.createElement(react.IconButton, { iconProps: cancelIcon, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.dismissButtonAriaLabel, "aria-live": 'polite', onClick: props.onDismiss })),
             React.createElement(react.Text, { className: messageTextStyle(theme) }, strings === null || strings === void 0 ? void 0 : strings.message),
             React.createElement(react.Stack, { horizontal: true, horizontalAlign: "space-evenly" },
@@ -22982,7 +22982,7 @@ const AttachmentDownloadErrorBar = (props) => {
 /**
  * Wrapper for RichTextSendBox component to allow us to use usePropsFor with richTextSendBox with lazy loading
  */
-const RichTextSendBoxWrapper = React.lazy(() => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-BXGkZC3x.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper })));
+const RichTextSendBoxWrapper = React.lazy(() => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-BgnerjU-.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper })));
 /**
  * @private
  * Use this function to load RoosterJS dependencies early in the lifecycle.
@@ -22990,7 +22990,7 @@ const RichTextSendBoxWrapper = React.lazy(() => Promise.resolve().then(function
  *
 /* @conditional-compile-remove(rich-text-editor-composite-support)
  */
-const loadRichTextSendBox = () => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-BXGkZC3x.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper }));
+const loadRichTextSendBox = () => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-BgnerjU-.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper }));
 /**
  * @private
  */
@@ -23915,7 +23915,7 @@ const getLatestErrors = (state) => state.latestErrors;
 /**
  * @private
  */
-const getLatestNotifications = (state) => state.latestNotifications;
+const getLatestNotifications$1 = (state) => state.latestNotifications;
 /**
  * @private
  */
@@ -24885,7 +24885,7 @@ const createDefaultTeamsCallingHandlers = memoizeOne((callClient, callAgent, dev
  */
 const notificationStackSelector = reselect.createSelector([
     getLatestErrors,
-    /* @conditional-compile-remove(breakout-rooms) */ getLatestNotifications,
+    /* @conditional-compile-remove(breakout-rooms) */ getLatestNotifications$1,
     getDiagnostics,
     getDeviceManager$1,
     getEnvironmentInfo,
@@ -28135,16 +28135,13 @@ class BreakoutRoomsSubscriber {
             clearTimeout(this._breakoutRoomClosingSoonTimeoutId);
         };
         this.onBreakoutRoomsUpdated = (eventData) => {
-            if (!eventData.data) {
-                return;
-            }
             if (eventData.type === 'assignedBreakoutRooms') {
                 this.onAssignedBreakoutRoomUpdated(eventData.data);
             }
             else if (eventData.type === 'join') {
                 this.onBreakoutRoomsJoined(eventData.data);
             }
-            else if (eventData.type === 'breakoutRoomsSettings') {
+            else if (eventData.type === 'breakoutRoomsSettings' && eventData.data) {
                 this.onBreakoutRoomSettingsUpdated(eventData.data);
             }
         };
@@ -28157,6 +28154,10 @@ class BreakoutRoomsSubscriber {
             if (callState === undefined) {
                 return;
             }
+            if (!breakoutRoom) {
+                this._context.setAssignedBreakoutRoom(this._callIdRef.callId, breakoutRoom);
+                return;
+            }
             if (breakoutRoom.state === 'open' &&
                 (currentAssignedBreakoutRoom === null || currentAssignedBreakoutRoom === void 0 ? void 0 : currentAssignedBreakoutRoom.state) === 'open' &&
                 ((_b = currentAssignedBreakoutRoom === null || currentAssignedBreakoutRoom === void 0 ? void 0 : currentAssignedBreakoutRoom.call) === null || _b === void 0 ? void 0 : _b.id) !== ((_c = breakoutRoom.call) === null || _c === void 0 ? void 0 : _c.id)) {
@@ -30911,7 +30912,8 @@ const getEndedCallPageProps = (locale, endedCall) => {
  *
  * @private
  */
-const getCallCompositePage = (call, previousCall, transferCall, unsupportedBrowserInfo) => {
+const getCallCompositePage = (call, previousCall, transferCall, originCall, unsupportedBrowserInfo) => {
+    var _a;
     /* @conditional-compile-remove(unsupported-browser) */
     if (isUnsupportedEnvironment(unsupportedBrowserInfo === null || unsupportedBrowserInfo === void 0 ? void 0 : unsupportedBrowserInfo.environmentInfo, unsupportedBrowserInfo === null || unsupportedBrowserInfo === void 0 ? void 0 : unsupportedBrowserInfo.unsupportedBrowserVersionOptedIn)) {
         return 'unsupportedEnvironment';
@@ -30947,6 +30949,10 @@ const getCallCompositePage = (call, previousCall, transferCall, unsupportedBrows
             return 'configuration';
         }
     }
+    // /* @conditional-compile-remove(breakout-rooms) */
+    if (((_a = previousCall === null || previousCall === void 0 ? void 0 : previousCall.breakoutRooms) === null || _a === void 0 ? void 0 : _a.breakoutRoomOriginCallId) && originCall) {
+        return 'call';
+    }
     if (previousCall) {
         const reason = getCallEndReason(previousCall);
         switch (reason) {
@@ -32057,6 +32063,11 @@ const getBreakoutRoomSettings = (state) => { var _a, _b; return (_b = (_a = stat
  * @private
  */
 const getBreakoutRoomDisplayName = (state) => { var _a, _b; return (_b = (_a = state.call) === null || _a === void 0 ? void 0 : _a.breakoutRooms) === null || _b === void 0 ? void 0 : _b.breakoutRoomDisplayName; };
+/* @conditional-compile-remove(breakout-rooms) */
+/**
+ * @private
+ */
+const getLatestNotifications = (state) => state.latestNotifications;
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -33504,7 +33515,12 @@ const CommonCallControlBar = (props) => {
     /* @conditional-compile-remove(breakout-rooms) */
     const assignedBreakoutRoom = useSelector$1(getAssignedBreakoutRoom);
     /* @conditional-compile-remove(breakout-rooms) */
+    const latestNotifications = useSelector$1(getLatestNotifications);
+    /* @conditional-compile-remove(breakout-rooms) */
     const breakoutRoomSettings = useSelector$1(getBreakoutRoomSettings);
+    /* @conditional-compile-remove(breakout-rooms) */
+    const movingToBreakoutRoomAutomatically = (assignedBreakoutRoom === null || assignedBreakoutRoom === void 0 ? void 0 : assignedBreakoutRoom.autoMoveParticipantToBreakoutRoom) &&
+        (latestNotifications['assignedBreakoutRoomOpened'] || latestNotifications['assignedBreakoutRoomChanged']);
     const handleResize = React.useCallback(() => {
         setControlBarButtonsWidth(controlBarContainerRef.current ? controlBarContainerRef.current.offsetWidth : 0);
         setPanelsButtonsWidth(sidepaneControlsRef.current ? sidepaneControlsRef.current.offsetWidth : 0);
@@ -33623,7 +33639,10 @@ const CommonCallControlBar = (props) => {
                             React.createElement("div", { ref: controlBarContainerRef },
                                 React.createElement(ControlBar, { layout: props.displayVertical ? 'vertical' : 'horizontal', styles: centerContainerStyles },
                                     /* @conditional-compile-remove(breakout-rooms) */
-                                    assignedBreakoutRoom && assignedBreakoutRoom.state === 'open' && (React.createElement(react.PrimaryButton, { text: callStrings.joinBreakoutRoomButtonLabel, onClick: () => __awaiter$l(void 0, void 0, void 0, function* () {
+                                    !props.mobileView &&
+                                        assignedBreakoutRoom &&
+                                        assignedBreakoutRoom.state === 'open' &&
+                                        !movingToBreakoutRoomAutomatically && (React.createElement(react.PrimaryButton, { text: callStrings.joinBreakoutRoomButtonLabel, onClick: () => __awaiter$l(void 0, void 0, void 0, function* () {
                                             assignedBreakoutRoom.join();
                                         }), styles: commonButtonStyles })),
                                     microphoneButtonIsEnabled && (React.createElement(Microphone, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, 
@@ -36334,6 +36353,81 @@ const useCompositeStringsForNotificationStackStrings = (locale) => {
     return notificationStackStrings;
 };
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * A component to show a banner in the UI.
+ *
+ * @private
+ */
+const Banner = (props) => {
+    var _a, _b;
+    const strings = props.strings;
+    const theme = react.useTheme();
+    return (React.createElement(react.Stack, { horizontalAlign: "center" },
+        React.createElement(react.Stack, { "data-ui-id": "banner", className: containerStyles$2(theme) },
+            React.createElement(react.Stack, { horizontal: true, horizontalAlign: "space-between" },
+                React.createElement(react.Stack, { horizontal: true },
+                    ((_a = props.iconProps) === null || _a === void 0 ? void 0 : _a.iconName) && (React.createElement(react.Icon, Object.assign({ className: bannerIconClassName, iconName: (_b = props.iconProps) === null || _b === void 0 ? void 0 : _b.iconName }, props.iconProps))),
+                    React.createElement(react.Text, { className: titleTextClassName }, strings === null || strings === void 0 ? void 0 : strings.title)),
+                props.primaryButton ? (React.createElement(react.PrimaryButton, { text: strings === null || strings === void 0 ? void 0 : strings.primaryButtonLabel, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.primaryButtonLabel, onClick: props.onClickButton })) : (React.createElement(react.DefaultButton, { text: strings === null || strings === void 0 ? void 0 : strings.primaryButtonLabel, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.primaryButtonLabel, onClick: props.onClickButton }))))));
+};
+const titleTextClassName = react.mergeStyles({
+    fontWeight: 400,
+    fontSize: _pxToRem(14),
+    lineHeight: _pxToRem(16),
+    alignSelf: 'center'
+});
+const containerStyles$2 = (theme) => react.mergeStyles({
+    boxShadow: theme.effects.elevation8,
+    width: '20rem',
+    padding: '0.75rem',
+    borderRadius: '0.25rem',
+    position: 'relative',
+    backgroundColor: theme.palette.white
+});
+const bannerIconClassName = react.mergeStyles({
+    fontSize: '1.25rem',
+    alignSelf: 'center',
+    marginRight: '0.5rem',
+    svg: {
+        width: '1.25rem',
+        height: '1.25rem'
+    }
+});
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* @conditional-compile-remove(breakout-rooms) */
+/* @conditional-compile-remove(breakout-rooms) */
+/**
+ * @private
+ */
+const BreakoutRoomsBanner = (props) => {
+    const { latestNotifications, locale, adapter } = props;
+    const assignedBreakoutRoom = useSelector$1(getAssignedBreakoutRoom);
+    const breakoutRoomSettings = useSelector$1(getBreakoutRoomSettings);
+    const autoMoveToBreakoutRoomCurrentlyInEffect = (assignedBreakoutRoom === null || assignedBreakoutRoom === void 0 ? void 0 : assignedBreakoutRoom.autoMoveParticipantToBreakoutRoom) &&
+        (latestNotifications === null || latestNotifications === void 0 ? void 0 : latestNotifications.find((notification) => notification.type === 'assignedBreakoutRoomOpened' || notification.type === 'assignedBreakoutRoomChanged'));
+    if (assignedBreakoutRoom && assignedBreakoutRoom.state === 'open' && !autoMoveToBreakoutRoomCurrentlyInEffect) {
+        return (React.createElement(react.Stack, { styles: bannerNotificationStyles },
+            React.createElement(Banner, { strings: {
+                    title: assignedBreakoutRoom.displayName
+                        ? locale.strings.call.joinBreakoutRoomBannerTitle.replace('{roomName}', assignedBreakoutRoom.displayName)
+                        : locale.strings.call.joinBreakoutRoomBannerTitle,
+                    primaryButtonLabel: locale.strings.call.joinBreakoutRoomBannerButtonLabel
+                }, onClickButton: () => assignedBreakoutRoom.join(), iconProps: { iconName: 'NotificationBarBreakoutRoomPromptJoin' }, primaryButton: true })));
+    }
+    else if (breakoutRoomSettings && breakoutRoomSettings.disableReturnToMainMeeting !== true) {
+        return (React.createElement(react.Stack, { styles: bannerNotificationStyles },
+            React.createElement(Banner, { strings: {
+                    title: locale.strings.call.returnFromBreakoutRoomBannerTitle,
+                    primaryButtonLabel: locale.strings.call.returnFromBreakoutRoomBannerButtonLabel
+                }, onClickButton: () => adapter.returnFromBreakoutRoom(), iconProps: { iconName: 'NotificationBarBreakoutRoomClosingSoon' } })));
+    }
+    return undefined;
+};
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /**
@@ -36586,6 +36680,13 @@ const CallArrangement = (props) => {
         : (_f = props.capabilitiesChangedNotificationBarProps) === null || _f === void 0 ? void 0 : _f.capabilitiesChangedNotifications;
     /* @conditional-compile-remove(breakout-rooms) */
     const notificationStackStrings = useCompositeStringsForNotificationStackStrings(locale);
+    let latestNotifications = props.latestNotifications;
+    /* @conditional-compile-remove(breakout-rooms) */
+    // Filter out breakout room notification that prompts user to join breakout room when in mobile view. We will
+    // replace it with a non-dismissible banner
+    latestNotifications = props.mobileView
+        ? (latestNotifications !== null && latestNotifications !== void 0 ? latestNotifications : []).filter((notification) => notification.type !== 'assignedBreakoutRoomOpenedPromptJoin')
+        : latestNotifications;
     return (React.createElement("div", { ref: containerRef, className: react.mergeStyles(containerDivStyles), id: props.id },
         React.createElement(react.Stack, { verticalFill: true, horizontalAlign: "stretch", className: containerClassName, "data-ui-id": props.dataUiId },
             React.createElement(react.Stack, { reversed: true, horizontal: verticalControlBar, grow: true, styles: callArrangementContainerStyles(verticalControlBar) },
@@ -36616,10 +36717,12 @@ const CallArrangement = (props) => {
                         React.createElement(react.Stack.Item, { styles: callGalleryStyles, grow: true },
                             React.createElement(react.Stack, { verticalFill: true, styles: mediaGalleryContainerStyles$1 },
                                 React.createElement(react.Stack.Item, { styles: notificationsContainerStyles },
+                                    /* @conditional-compile-remove(breakout-rooms) */
+                                    props.mobileView && (React.createElement(BreakoutRoomsBanner, { latestNotifications: latestNotifications, locale: locale, adapter: adapter })),
                                     props.showErrorNotifications && (React.createElement(react.Stack, { styles: notificationStackStyles, horizontalAlign: "center", verticalAlign: "center" },
                                         React.createElement(NotificationStack, { onDismissNotification: props.onDismissError, activeNotifications: filteredLatestErrorNotifications }))),
-                                    props.latestNotifications && (React.createElement(react.Stack, { styles: notificationStackStyles, horizontalAlign: "center", verticalAlign: "center" },
-                                        React.createElement(NotificationStack, { activeNotifications: props.latestNotifications, onDismissNotification: props.onDismissNotification, 
+                                    latestNotifications && (React.createElement(react.Stack, { styles: notificationStackStyles, horizontalAlign: "center", verticalAlign: "center" },
+                                        React.createElement(NotificationStack, { activeNotifications: latestNotifications, onDismissNotification: props.onDismissNotification, 
                                             /* @conditional-compile-remove(breakout-rooms) */
                                             strings: notificationStackStrings }))),
                                     props.capabilitiesChangedNotificationBarProps &&
@@ -39970,7 +40073,7 @@ class CallContext {
         this.emitter.off('callEnded', handler);
     }
     updateClientState(clientState) {
-        var _a;
+        var _a, _b, _c, _d, _e;
         let call = this.callId ? clientState.calls[this.callId] : undefined;
         const latestEndedCall = clientState.callsEnded ? findLatestEndedCall(clientState.callsEnded) : undefined;
         // As the state is transitioning to a new state, trigger appropriate callback events.
@@ -39984,7 +40087,14 @@ class CallContext {
             ? findLatestAcceptedTransfer(call.transfer.acceptedTransfers)
             : undefined;
         const transferCall = latestAcceptedTransfer ? clientState.calls[latestAcceptedTransfer.callId] : undefined;
+        /* @conditional-compile-remove(breakout-rooms) */
+        const originCall = ((_a = call === null || call === void 0 ? void 0 : call.breakoutRooms) === null || _a === void 0 ? void 0 : _a.breakoutRoomOriginCallId)
+            ? clientState.calls[(_b = call === null || call === void 0 ? void 0 : call.breakoutRooms) === null || _b === void 0 ? void 0 : _b.breakoutRoomOriginCallId]
+            : ((_c = latestEndedCall === null || latestEndedCall === void 0 ? void 0 : latestEndedCall.breakoutRooms) === null || _c === void 0 ? void 0 : _c.breakoutRoomOriginCallId)
+                ? clientState.calls[(_d = latestEndedCall === null || latestEndedCall === void 0 ? void 0 : latestEndedCall.breakoutRooms) === null || _d === void 0 ? void 0 : _d.breakoutRoomOriginCallId]
+                : undefined;
         const newPage = getCallCompositePage(call, latestEndedCall, transferCall, 
+        /* @conditional-compile-remove(breakout-rooms) */ originCall, 
         /* @conditional-compile-remove(unsupported-browser) */ environmentInfo);
         if (!IsCallEndedPage(oldPage) && IsCallEndedPage(newPage)) {
             this.emitter.emit('callEnded', { callId: this.callId });
@@ -39994,7 +40104,7 @@ class CallContext {
             call = undefined;
         }
         if (this.state.page) {
-            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, 
+            this.setState(Object.assign(Object.assign({}, this.state), { userId: clientState.userId, displayName: (_e = clientState.callAgent) === null || _e === void 0 ? void 0 : _e.displayName, call, page: newPage, endedCall: latestEndedCall, devices: clientState.deviceManager, latestErrors: clientState.latestErrors, 
                 /* @conditional-compile-remove(breakout-rooms) */ latestNotifications: clientState.latestNotifications, cameraStatus: (call === null || call === void 0 ? void 0 : call.localVideoStreams.find((s) => s.mediaStreamType === 'Video')) ||
                     clientState.deviceManager.unparentedViews.find((s) => s.mediaStreamType === 'Video')
                     ? 'On'
@@ -40307,6 +40417,8 @@ class AzureCommunicationCallAdapter {
                 ? { localVideoStreams: [new communicationCalling.LocalVideoStream(selectedCamera)] }
                 : {};
             const call = this._joinCall(audioOptions, videoOptions);
+            /* @conditional-compile-remove(breakout-rooms) */
+            this.originCall = call;
             this.processNewCall(call);
             return call;
         });
@@ -40714,28 +40826,18 @@ class AzureCommunicationCallAdapter {
     /* @conditional-compile-remove(breakout-rooms) */
     returnFromBreakoutRoom() {
         return __awaiter$9(this, void 0, void 0, function* () {
-            var _a, _b, _c, _d;
-            if (this.call === undefined) {
-                return;
-            }
-            // Find call state of current call from stateful layer. The current call state of breakout room may not be present in calls array
-            // if the breakout room call is ended. So search the callsEnded array as well.
-            const callState = this.callClient.getState().calls[(_a = this.call) === null || _a === void 0 ? void 0 : _a.id]
-                ? this.callClient.getState().callsEnded[(_b = this.call) === null || _b === void 0 ? void 0 : _b.id]
-                : undefined;
-            // Find origin call id from breakout room call state
-            const originCallId = (_c = callState === null || callState === void 0 ? void 0 : callState.breakoutRooms) === null || _c === void 0 ? void 0 : _c.breakoutRoomOriginCallId;
-            // Find origin call from call agent
-            const originCall = (_d = this.callAgent) === null || _d === void 0 ? void 0 : _d.calls.find((callAgentCall) => {
-                return callAgentCall.id === originCallId;
-            });
-            if (!originCall) {
+            var _a;
+            if (!this.originCall) {
                 throw new Error('Could not return from breakout room because the origin call could not be retrieved.');
             }
+            if (((_a = this.call) === null || _a === void 0 ? void 0 : _a.id) === this.originCall.id) {
+                console.error('Return from breakout room will not be done because current call is the origin call.');
+                return;
+            }
             const breakoutRoomCall = this.call;
-            this.processNewCall(originCall);
+            this.processNewCall(this.originCall);
             yield this.resumeCall();
-            if ((breakoutRoomCall === null || breakoutRoomCall === void 0 ? void 0 : breakoutRoomCall.state) === 'Connected') {
+            if ((breakoutRoomCall === null || breakoutRoomCall === void 0 ? void 0 : breakoutRoomCall.state) && !['Disconnecting', 'Disconnected'].includes(breakoutRoomCall.state)) {
                 breakoutRoomCall.hangUp();
             }
         });
@@ -40823,7 +40925,7 @@ class AzureCommunicationCallAdapter {
         }
     }
     unsubscribeCallEvents() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         for (const subscriber of this.participantSubscribers.values()) {
             subscriber.unsubscribeAll();
         }
@@ -40837,6 +40939,12 @@ class AzureCommunicationCallAdapter {
         if (this.callingSoundSubscriber) {
             this.callingSoundSubscriber.unsubscribeAll();
         }
+        /* @conditional-compile-remove(breakout-rooms) */
+        const breakoutRoomsFeature = (_f = this.call) === null || _f === void 0 ? void 0 : _f.feature(communicationCalling.Features.BreakoutRooms);
+        /* @conditional-compile-remove(breakout-rooms) */
+        if (breakoutRoomsFeature) {
+            breakoutRoomsFeature.off('breakoutRoomsUpdated', this.breakoutRoomsUpdated.bind(this));
+        }
     }
     /* @conditional-compile-remove(acs-close-captions) */
     captionsKindChanged() {
@@ -40929,19 +41037,21 @@ class AzureCommunicationCallAdapter {
     }
     /* @conditional-compile-remove(breakout-rooms) */
     breakoutRoomsUpdated(eventData) {
-        if (eventData.data) {
-            if (eventData.type === 'assignedBreakoutRooms') {
-                this.assignedBreakoutRoomUpdated(eventData.data);
-            }
-            else if (eventData.type === 'join') {
-                this.breakoutRoomJoined(eventData.data);
-            }
+        if (eventData.type === 'assignedBreakoutRooms') {
+            this.assignedBreakoutRoomUpdated(eventData.data);
+        }
+        else if (eventData.type === 'join') {
+            this.breakoutRoomJoined(eventData.data);
         }
         this.emitter.emit('breakoutRoomsUpdated', eventData);
     }
     /* @conditional-compile-remove(breakout-rooms) */
     assignedBreakoutRoomUpdated(breakoutRoom) {
-        if (breakoutRoom.state === 'closed') {
+        var _a, _b, _c;
+        if (!((_a = this.call) === null || _a === void 0 ? void 0 : _a.id)) {
+            return;
+        }
+        if (((_b = this.originCall) === null || _b === void 0 ? void 0 : _b.id) !== ((_c = this.call) === null || _c === void 0 ? void 0 : _c.id) && (!breakoutRoom || breakoutRoom.state === 'closed')) {
             this.returnFromBreakoutRoom();
         }
     }
@@ -42864,12 +42974,16 @@ class AzureCommunicationCallWithChatAdapter {
     /* @conditional-compile-remove(breakout-rooms) */
     returnFromBreakoutRoom() {
         return __awaiter$6(this, void 0, void 0, function* () {
-            var _a;
-            if (this.originCallChatAdapter) {
-                (_a = this.breakoutRoomChatAdapter) === null || _a === void 0 ? void 0 : _a.dispose();
+            var _a, _b, _c, _d;
+            if (this.originCallChatAdapter &&
+                ((_a = this.context.getState().chat) === null || _a === void 0 ? void 0 : _a.threadId) !== this.originCallChatAdapter.getState().thread.threadId) {
+                (_b = this.breakoutRoomChatAdapter) === null || _b === void 0 ? void 0 : _b.dispose();
                 this.updateChatAdapter(this.originCallChatAdapter);
             }
-            yield this.callAdapter.returnFromBreakoutRoom();
+            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) {
+                yield this.callAdapter.returnFromBreakoutRoom();
+            }
         });
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -42969,6 +43083,10 @@ class AzureCommunicationCallWithChatAdapter {
             case 'spotlightChanged':
                 this.callAdapter.on('spotlightChanged', listener);
                 break;
+            /* @conditional-compile-remove(breakout-rooms) */
+            case 'breakoutRoomsUpdated':
+                this.callAdapter.on('breakoutRoomsUpdated', listener);
+                break;
             default:
                 throw `Unknown AzureCommunicationCallWithChatAdapter Event: ${event}`;
         }
@@ -43070,6 +43188,10 @@ class AzureCommunicationCallWithChatAdapter {
             case 'spotlightChanged':
                 this.callAdapter.off('spotlightChanged', listener);
                 break;
+            /* @conditional-compile-remove(breakout-rooms) */
+            case 'breakoutRoomsUpdated':
+                this.callAdapter.off('breakoutRoomsUpdated', listener);
+                break;
             default:
                 throw `Unknown AzureCommunicationCallWithChatAdapter Event: ${event}`;
         }
@@ -44112,4 +44234,4 @@ exports.useTeamsCall = useTeamsCall;
 exports.useTeamsCallAdapter = useTeamsCallAdapter;
 exports.useTeamsCallAgent = useTeamsCallAgent;
 exports.useTheme = useTheme;
-//# sourceMappingURL=index-Bqw-4OaM.js.map
+//# sourceMappingURL=index-DejG4i9h.js.map