@azure/communication-react 1.5.1-alpha-202305250013 → 1.5.1-alpha-202305270013

package/dist/dist-cjs/communication-react/index.js

@@ -165,7 +165,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.5.1-alpha-202305250013';
+var telemetryVersion = '1.5.1-alpha-202305270013';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -392,6 +392,12 @@ const getCaptionsStatus = (state, props) => {
 };
 /* @conditional-compile-remove(close-captions) */
 /** @private */
+const getStartCaptionsInProgress = (state, props) => {
+    var _a;
+    return (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.captionsFeature.startCaptionsInProgress;
+};
+/* @conditional-compile-remove(close-captions) */
+/** @private */
 const getCurrentCaptionLanguage = (state, props) => {
     var _a;
     return (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.captionsFeature.currentCaptionLanguage;
@@ -1025,7 +1031,7 @@ const _changeSpokenLanguageSelector = reselect__namespace.createSelector([getSup
  *
  * @internal
  */
-const _captionsBannerSelector = reselect__namespace.createSelector([getCaptions, getCaptionsStatus], (captions, isCaptionsFeatureActive) => {
+const _captionsBannerSelector = reselect__namespace.createSelector([getCaptions, getCaptionsStatus, getStartCaptionsInProgress], (captions, isCaptionsFeatureActive, startCaptionsInProgress) => {
     // Following Teams app logic, no matter how many 'Partial' captions come,
     // we only pick first one according to start time, and all the other partial captions will be filtered out
     // This will give customers a stable captions experience when others talking over the dominant speaker
@@ -1044,7 +1050,8 @@ const _captionsBannerSelector = reselect__namespace.createSelector([getCaptions,
     });
     return {
         captions: captionsInfo !== null && captionsInfo !== void 0 ? captionsInfo : [],
-        isCaptionsOn: isCaptionsFeatureActive !== null && isCaptionsFeatureActive !== void 0 ? isCaptionsFeatureActive : false
+        isCaptionsOn: isCaptionsFeatureActive !== null && isCaptionsFeatureActive !== void 0 ? isCaptionsFeatureActive : false,
+        startCaptionsInProgress: startCaptionsInProgress !== null && startCaptionsInProgress !== void 0 ? startCaptionsInProgress : false
     };
 });
 /* @conditional-compile-remove(close-captions) */
@@ -1448,7 +1455,8 @@ function convertSdkCallToDeclarativeCall(call) {
             supportedCaptionLanguages: [],
             currentCaptionLanguage: '',
             currentSpokenLanguage: '',
-            isCaptionsFeatureActive: false
+            isCaptionsFeatureActive: false,
+            startCaptionsInProgress: false
         }
     };
 }
@@ -2101,6 +2109,15 @@ class CallContext$2 {
         });
     }
     /* @conditional-compile-remove(close-captions) */
+    setStartCaptionsInProgress(callId, startCaptionsInProgress) {
+        this.modifyState((draft) => {
+            const call = draft.calls[this._callIdHistory.latestCallId(callId)];
+            if (call) {
+                call.captionsFeature.startCaptionsInProgress = startCaptionsInProgress;
+            }
+        });
+    }
+    /* @conditional-compile-remove(close-captions) */
     setSelectedSpokenLanguage(callId, spokenLanguage) {
         this.modifyState((draft) => {
             const call = draft.calls[this._callIdHistory.latestCallId(callId)];
@@ -3690,8 +3707,8 @@ class ProxyTeamsCaptionsFeature {
             case 'startCaptions':
                 return this._context.withAsyncErrorTeedToState((...args) => __awaiter$B(this, void 0, void 0, function* () {
                     var _a, _b;
+                    this._context.setStartCaptionsInProgress(this._call.id, true);
                     const ret = yield target.startCaptions(...args);
-                    this._context.setIsCaptionActive(this._call.id, true);
                     this._context.setSelectedSpokenLanguage(this._call.id, (_b = (_a = args[0]) === null || _a === void 0 ? void 0 : _a.spokenLanguage) !== null && _b !== void 0 ? _b : 'en-us');
                     return ret;
                 }), 'Call.feature');
@@ -3699,6 +3716,7 @@ class ProxyTeamsCaptionsFeature {
                 return this._context.withAsyncErrorTeedToState((...args) => __awaiter$B(this, void 0, void 0, function* () {
                     const ret = yield target.stopCaptions(...args);
                     this._context.setIsCaptionActive(this._call.id, false);
+                    this._context.setStartCaptionsInProgress(this._call.id, false);
                     return ret;
                 }), 'Call.feature');
             case 'setSpokenLanguage':
@@ -5028,7 +5046,7 @@ function chunk(options, itemsPerRow) {
 /**
  * @private
  */
-const defaultSpokenLanguage$1 = 'en-us';
+const defaultSpokenLanguage = 'en-us';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -6068,9 +6086,17 @@ const InputBoxComponent = (props) => {
     // Index of the previous selection end in the text field
     const [selectionEndValue, setSelectionEndValue] = React.useState(null);
     /* @conditional-compile-remove(mention) */
-    // Boolean value to check if onMouseDown event should be handled during select as selection range for onMouseDown event is not updated yet and the selection range for mouse click/taps will be updated in onSelect event if needed.
+    // Boolean value to check if onMouseDown event should be handled during select as selection range
+    // for onMouseDown event is not updated yet and the selection range for mouse click/taps will be
+    // updated in onSelect event if needed.
     const [shouldHandleOnMouseDownDuringSelect, setShouldHandleOnMouseDownDuringSelect] = React.useState(true);
     /* @conditional-compile-remove(mention) */
+    // Point of start of touch/mouse selection
+    const [interactionStartPoint, setInteractionStartPoint] = React.useState();
+    /* @conditional-compile-remove(mention) */
+    // Target selection from mouse movement
+    const [targetSelection, setTargetSelection] = React.useState();
+    /* @conditional-compile-remove(mention) */
     // Caret position in the text field
     const [caretPosition, setCaretPosition] = React.useState(undefined);
     /* @conditional-compile-remove(mention) */
@@ -6239,10 +6265,6 @@ const InputBoxComponent = (props) => {
     /* @conditional-compile-remove(mention) */
     const debouncedQueryUpdate = useDebounce.useDebouncedCallback((query) => __awaiter$w(void 0, void 0, void 0, function* () {
         var _a;
-        if (query === undefined) {
-            updateMentionSuggestions([]);
-            return;
-        }
         const suggestions = (_a = (yield (mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.onQueryUpdated(query)))) !== null && _a !== void 0 ? _a : [];
         if (suggestions.length === 0) {
             setActiveSuggestionIndex(undefined);
@@ -6332,33 +6354,54 @@ const InputBoxComponent = (props) => {
     }, [setSelectionStartValue, setSelectionEndValue]);
     /* @conditional-compile-remove(mention) */
     const handleOnSelect = React.useCallback((event, inputTextValue, tags, shouldHandleOnMouseDownDuringSelect, selectionStartValue, selectionEndValue) => {
-        var _a, _b, _c;
-        /* @conditional-compile-remove(mention) */
-        if (shouldHandleOnMouseDownDuringSelect && event.currentTarget.selectionStart !== null) {
-            // on select was triggered by mouse down
-            const mentionTag = findMentionTagForSelection(tags, event.currentTarget.selectionStart);
-            if (mentionTag !== undefined && mentionTag.plainTextBeginIndex !== undefined) {
-                // handle mention click
-                if (event.currentTarget.selectionDirection === null) {
-                    event.currentTarget.setSelectionRange(mentionTag.plainTextBeginIndex, (_a = mentionTag.plainTextEndIndex) !== null && _a !== void 0 ? _a : mentionTag.plainTextBeginIndex);
+        if (shouldHandleOnMouseDownDuringSelect) {
+            if (targetSelection !== undefined) {
+                setSelectionStartValue(targetSelection.start);
+                setSelectionEndValue(targetSelection.end);
+                event.currentTarget.setSelectionRange(targetSelection.start, targetSelection.end);
+                setTargetSelection(undefined);
+            }
+            else if (event.currentTarget.selectionStart !== null) {
+                // on select was triggered by mouse down/up with no movement
+                const mentionTag = findMentionTagForSelection(tags, event.currentTarget.selectionStart);
+                if (mentionTag !== undefined && mentionTag.plainTextBeginIndex !== undefined) {
+                    // handle mention click
+                    // Get range of word that was clicked on
+                    const selectionRange = rangeOfWordInSelection({
+                        textInput: inputTextValue,
+                        selectionStart: event.currentTarget.selectionStart,
+                        selectionEnd: event.currentTarget.selectionEnd,
+                        tag: mentionTag
+                    });
+                    if (event.currentTarget.selectionDirection === null) {
+                        event.currentTarget.setSelectionRange(selectionRange.start, selectionRange.end);
+                    }
+                    else {
+                        event.currentTarget.setSelectionRange(selectionRange.start, selectionRange.end, event.currentTarget.selectionDirection);
+                    }
+                    setSelectionStartValue(selectionRange.start);
+                    setSelectionEndValue(selectionRange.end);
                 }
                 else {
-                    event.currentTarget.setSelectionRange(mentionTag.plainTextBeginIndex, (_b = mentionTag.plainTextEndIndex) !== null && _b !== void 0 ? _b : mentionTag.plainTextBeginIndex, event.currentTarget.selectionDirection);
+                    setSelectionStartValue(event.currentTarget.selectionStart);
+                    setSelectionEndValue(event.currentTarget.selectionEnd);
                 }
-                setSelectionStartValue(mentionTag.plainTextBeginIndex);
-                setSelectionEndValue((_c = mentionTag.plainTextEndIndex) !== null && _c !== void 0 ? _c : mentionTag.plainTextBeginIndex);
-            }
-            else {
-                setSelectionStartValue(event.currentTarget.selectionStart);
-                setSelectionEndValue(event.currentTarget.selectionEnd);
             }
         }
         else {
             // selection was changed by keyboard
             updateSelectionIndexesWithMentionIfNeeded(event, inputTextValue, selectionStartValue, selectionEndValue, tags);
         }
-        // don't set setShouldHandleOnMouseDownDuringSelect(false) here as setSelectionRange could trigger additional calls of onSelect event and they may not be handled correctly (because of setSelectionRange calls or rerender)
-    }, [updateSelectionIndexesWithMentionIfNeeded]);
+        // don't set setShouldHandleOnMouseDownDuringSelect(false) here as setSelectionRange
+        // could trigger additional calls of onSelect event and they may not be handled correctly
+        // (because of setSelectionRange calls or rerender)
+    }, [
+        updateSelectionIndexesWithMentionIfNeeded,
+        targetSelection,
+        setTargetSelection,
+        setSelectionStartValue,
+        setSelectionEndValue
+    ]);
     /* @conditional-compile-remove(mention) */
     const handleOnChange = React.useCallback((event, tagsValue, htmlTextValue, inputTextValue, currentTriggerStartIndex, previousSelectionStart, previousSelectionEnd, currentSelectionStart, currentSelectionEnd, updatedValue) => __awaiter$w(void 0, void 0, void 0, function* () {
         var _b;
@@ -6417,7 +6460,7 @@ const InputBoxComponent = (props) => {
                     setCurrentTriggerStartIndex(tagIndex);
                 }
                 if (tagIndex === -1) {
-                    yield debouncedQueryUpdate(undefined);
+                    updateMentionSuggestions([]);
                 }
                 else {
                     // In the middle of a @mention lookup
@@ -6467,11 +6510,43 @@ const InputBoxComponent = (props) => {
             }
         }
         onChange && onChange(event, result);
-    }), [onChange, mentionLookupOptions, setCaretIndex, setCaretPosition, debouncedQueryUpdate]);
+    }), [onChange, mentionLookupOptions, setCaretIndex, setCaretPosition, updateMentionSuggestions, debouncedQueryUpdate]);
     const getInputFieldTextValue = () => {
         /* @conditional-compile-remove(mention) */
         return inputTextValue;
     };
+    /* @conditional-compile-remove(mention) */
+    // Adjust the selection range based on a mouse / touch interaction
+    const handleOnMove = React.useCallback((event) => {
+        var _a;
+        let targetStart = event.currentTarget.selectionStart;
+        let targetEnd = event.currentTarget.selectionEnd;
+        // Should we do anything?
+        if (interactionStartPoint !== undefined &&
+            // And did selection change?
+            targetStart !== null &&
+            (targetStart !== (targetSelection === null || targetSelection === void 0 ? void 0 : targetSelection.start) || targetEnd !== (targetSelection === null || targetSelection === void 0 ? void 0 : targetSelection.end))) {
+            const direction = event.clientX > interactionStartPoint.x ? 'forward' : 'backward';
+            const mentionTag = findMentionTagForSelection(tagsValue, direction === 'backward'
+                ? event.currentTarget.selectionStart
+                : (_a = event.currentTarget.selectionEnd) !== null && _a !== void 0 ? _a : event.currentTarget.selectionStart);
+            let updateCurrentTarget = false;
+            if (mentionTag !== undefined && mentionTag.plainTextBeginIndex !== undefined) {
+                targetStart = Math.min(mentionTag.plainTextBeginIndex, targetStart);
+                if (mentionTag.plainTextEndIndex !== undefined && targetEnd !== null) {
+                    targetEnd = Math.max(mentionTag.plainTextEndIndex, targetEnd);
+                }
+                updateCurrentTarget = true;
+                setShouldHandleOnMouseDownDuringSelect(false);
+            }
+            // Update selection range
+            setTargetSelection({ start: targetStart, end: targetEnd });
+            if (updateCurrentTarget) {
+                // Only set the control, if the values are updated
+                event.currentTarget.setSelectionRange(targetStart, targetEnd, direction);
+            }
+        }
+    }, [setTargetSelection, targetSelection, setShouldHandleOnMouseDownDuringSelect, interactionStartPoint, tagsValue]);
     return (React__default['default'].createElement(react.Stack, { className: mergedRootStyle },
         React__default['default'].createElement("div", { className: mergedTextContainerStyle },
             /* @conditional-compile-remove(mention) */ mentionSuggestions.length > 0 && (React__default['default'].createElement(_MentionPopover, { suggestions: mentionSuggestions, activeSuggestionIndex: activeSuggestionIndex, target: inputBoxRef, targetPositionOffset: caretPosition, onRenderSuggestionItem: mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.onRenderSuggestionItem, onSuggestionSelected: onSuggestionSelected, onDismiss: () => {
@@ -6503,8 +6578,9 @@ const InputBoxComponent = (props) => {
                     handleOnSelect(e, inputTextValue, tagsValue, shouldHandleOnMouseDownDuringSelect, selectionStartValue, selectionEndValue);
                 }, 
                 /* @conditional-compile-remove(mention) */
-                onMouseDown: () => {
-                    // as events order is onMouseDown -> onSelect -> onClick
+                onMouseDown: (e) => {
+                    setInteractionStartPoint({ x: e.clientX, y: e.clientY });
+                    // as events order is onMouseDown -> onMouseMove -> onMouseUp -> onSelect -> onClick
                     // onClick and onMouseDown can't handle clicking on mention event because
                     // onMouseDown doesn't have correct selectionRange yet and
                     // onClick already has wrong range as it's called after onSelect that updates the selection range
@@ -6512,11 +6588,27 @@ const InputBoxComponent = (props) => {
                     setShouldHandleOnMouseDownDuringSelect(true);
                 }, 
                 /* @conditional-compile-remove(mention) */
-                onTouchStart: () => {
+                onMouseMove: handleOnMove, 
+                /* @conditional-compile-remove(mention) */
+                onMouseUp: () => {
+                    setInteractionStartPoint(undefined);
+                }, 
+                /* @conditional-compile-remove(mention) */
+                onTouchStart: (e) => {
+                    setInteractionStartPoint({
+                        x: e.targetTouches.item(0).clientX,
+                        y: e.targetTouches.item(0).clientY
+                    });
                     // see onMouseDown for more details
                     setShouldHandleOnMouseDownDuringSelect(true);
                 }, 
                 /* @conditional-compile-remove(mention) */
+                onTouchMove: handleOnMove, 
+                /* @conditional-compile-remove(mention) */
+                onTouchEnd: () => {
+                    setInteractionStartPoint(undefined);
+                }, 
+                /* @conditional-compile-remove(mention) */
                 onBlur: () => {
                     // setup all flags to default values when text field loses focus
                     setShouldHandleOnMouseDownDuringSelect(false);
@@ -6602,6 +6694,31 @@ const findMentionTagForSelection = (tags, selection) => {
     return mentionTag;
 };
 /* @conditional-compile-remove(mention) */
+const rangeOfWordInSelection = ({ textInput, selectionStart, selectionEnd, tag }) => {
+    var _a;
+    if (tag.plainTextBeginIndex === undefined) {
+        return { start: selectionStart, end: selectionEnd === null ? selectionStart : selectionEnd };
+    }
+    // Look at start word index and optionally end word index.
+    // Select combination of the two and return the range.
+    let start = selectionStart;
+    let end = selectionEnd === null ? selectionStart : selectionEnd;
+    const firstWordStartIndex = textInput.lastIndexOf(' ', selectionStart);
+    if (firstWordStartIndex === tag.plainTextBeginIndex) {
+        start = firstWordStartIndex;
+    }
+    else {
+        start = Math.max(firstWordStartIndex + 1, tag.plainTextBeginIndex);
+    }
+    const firstWordEndIndex = textInput.indexOf(' ', selectionStart);
+    end = Math.max(firstWordEndIndex + 1, (_a = tag.plainTextEndIndex) !== null && _a !== void 0 ? _a : firstWordEndIndex + 1);
+    if (selectionEnd !== null && tag.plainTextEndIndex !== undefined) {
+        const lastWordEndIndex = textInput.indexOf(' ', selectionEnd);
+        end = Math.max(lastWordEndIndex > -1 ? lastWordEndIndex : tag.plainTextEndIndex, selectionEnd);
+    }
+    return { start, end };
+};
+/* @conditional-compile-remove(mention) */
 /**
  * Find a new the selection index.
  *
@@ -8159,6 +8276,16 @@ const chatMessageMenuStyle = react.mergeStyles({
     cursor: 'pointer',
     overflow: 'hidden'
 });
+/**
+ * @private
+ */
+const chatMessageEditContainerStyle = {
+    margin: 0,
+    padding: 0,
+    maxWidth: 'unset',
+    minWidth: 'unset',
+    backgroundColor: 'transparent'
+};
 /**
  * Styles that can be applied to ensure flyout items have the minimum touch target size.
  *
@@ -8247,31 +8374,34 @@ const ChatMessageComponentAsEditBox = (props) => {
                     setAttachedFilesMetadata(attachedFilesMetadata === null || attachedFilesMetadata === void 0 ? void 0 : attachedFilesMetadata.filter((file) => file.name !== fileId));
                 } }))));
     }, [attachedFilesMetadata]);
-    return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(borderAndBoxShadowStyle({
-            theme,
-            hasErrorMessage: message.failureReason !== undefined,
-            disabled: false
-        })) },
-        React__default['default'].createElement(InputBoxComponent, { inlineChildren: props.inlineEditButtons, id: 'editbox', textFieldRef: editTextFieldRef, inputClassName: editBoxStyle(props.inlineEditButtons), placeholderText: strings.editBoxPlaceholderText, textValue: textValue, onChange: setText, onEnterKeyDown: () => {
-                submitEnabled &&
-                    onSubmit(textValue, message.metadata, {
-                        attachedFilesMetadata
-                    });
-            }, supportNewline: false, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, errorMessage: textTooLongMessage, styles: editBoxStyles, 
-            /* @conditional-compile-remove(mention) */
-            mentionLookupOptions: mentionLookupOptions },
-            React__default['default'].createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxCancelButton, tooltipContent: strings.editBoxCancelButton, onRenderIcon: onRenderThemedCancelIcon, onClick: () => {
-                    onCancel && onCancel(message.messageId);
-                }, id: 'dismissIconWrapper' }),
-            React__default['default'].createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxSubmitButton, tooltipContent: strings.editBoxSubmitButton, onRenderIcon: onRenderThemedSubmitIcon, onClick: (e) => {
+    const getContent = () => {
+        return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(borderAndBoxShadowStyle({
+                theme,
+                hasErrorMessage: message.failureReason !== undefined,
+                disabled: false
+            })) },
+            React__default['default'].createElement(InputBoxComponent, { inlineChildren: props.inlineEditButtons, id: 'editbox', textFieldRef: editTextFieldRef, inputClassName: editBoxStyle(props.inlineEditButtons), placeholderText: strings.editBoxPlaceholderText, textValue: textValue, onChange: setText, onEnterKeyDown: () => {
                     submitEnabled &&
                         onSubmit(textValue, message.metadata, {
                             attachedFilesMetadata
                         });
-                    e.stopPropagation();
-                }, id: 'submitIconWrapper' })),
-        message.failureReason && (React__default['default'].createElement("div", { className: react.mergeStyles(chatMessageFailedTagStyle(theme), { padding: '0.5rem' }) }, message.failureReason)),
-        onRenderFileUploads()));
+                }, supportNewline: false, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, errorMessage: textTooLongMessage, styles: editBoxStyles, 
+                /* @conditional-compile-remove(mention) */
+                mentionLookupOptions: mentionLookupOptions },
+                React__default['default'].createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxCancelButton, tooltipContent: strings.editBoxCancelButton, onRenderIcon: onRenderThemedCancelIcon, onClick: () => {
+                        onCancel && onCancel(message.messageId);
+                    }, id: 'dismissIconWrapper' }),
+                React__default['default'].createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxSubmitButton, tooltipContent: strings.editBoxSubmitButton, onRenderIcon: onRenderThemedSubmitIcon, onClick: (e) => {
+                        submitEnabled &&
+                            onSubmit(textValue, message.metadata, {
+                                attachedFilesMetadata
+                            });
+                        e.stopPropagation();
+                    }, id: 'submitIconWrapper' })),
+            message.failureReason && (React__default['default'].createElement("div", { className: react.mergeStyles(chatMessageFailedTagStyle(theme), { padding: '0.5rem' }) }, message.failureReason)),
+            onRenderFileUploads()));
+    };
+    return React__default['default'].createElement(i.Message, { styles: chatMessageEditContainerStyle, content: getContent() });
 };
 const isMessageTooLong = (messageText) => messageText.length > MAXIMUM_LENGTH_OF_MESSAGE;
 const isMessageEmpty = (messageText, attachedFilesMetadata) => messageText.trim().length === 0 && attachedFilesMetadata.length === 0;
@@ -10285,10 +10415,13 @@ const lightDismissContainerStyles = { root: { height: '100%' } };
  * @internal
  */
 const _DrawerSurface = (props) => {
-    var _a, _b, _c;
-    const rootStyles = react.mergeStyles(drawerSurfaceStyles, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root);
+    var _a, _b, _c, _d;
+    const rootStyles = props.disableMaxHeight
+        ? react.mergeStyles(drawerSurfaceStyles, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root)
+        : react.mergeStyles(drawerSurfaceStyles, focusTrapZoneStyles, (_b = props.styles) === null || _b === void 0 ? void 0 : _b.root);
+    const containerStyles = react.mergeStyleSets(drawerContentContainerStyles, (_c = props.styles) === null || _c === void 0 ? void 0 : _c.drawerContentContainer);
     return (React__default['default'].createElement(react.Stack, { className: rootStyles },
-        React__default['default'].createElement(DrawerLightDismiss, { styles: (_b = props.styles) === null || _b === void 0 ? void 0 : _b.lightDismissRoot, onDismiss: props.onLightDismiss }),
+        React__default['default'].createElement(DrawerLightDismiss, { styles: (_d = props.styles) === null || _d === void 0 ? void 0 : _d.lightDismissRoot, onDismiss: props.onLightDismiss }),
         React__default['default'].createElement(react.FocusTrapZone, { onKeyDown: (e) => {
                 if (e.key === 'Escape' || e.key === 'Esc') {
                     props.onLightDismiss && props.onLightDismiss();
@@ -10297,13 +10430,28 @@ const _DrawerSurface = (props) => {
             // Ensure when the focus trap has focus, the light dismiss area can still be clicked with mouse to dismiss.
             // Note: this still correctly captures keyboard focus, this just allows mouse click outside of the focus trap.
             isClickableOutsideFocusTrap: true },
-            React__default['default'].createElement(DrawerContentContainer, { styles: (_c = props.styles) === null || _c === void 0 ? void 0 : _c.drawerContentContainer, heading: props.heading }, props.children))));
+            React__default['default'].createElement(DrawerContentContainer, { styles: containerStyles, heading: props.heading }, props.children))));
 };
 const drawerSurfaceStyles = {
     width: '100%',
     height: '100%',
     background: 'rgba(0,0,0,0.4)'
 };
+const focusTrapZoneStyles = {
+    // Targets FocusTrapZone in drawer.
+    // Setting percentage to Height to transform a container does not work unless the
+    // direct parent container also has a Height set other than 'auto'.
+    '> div:nth-child(2)': {
+        maxHeight: '75%',
+        overflow: 'auto'
+    }
+};
+const drawerContentContainerStyles = {
+    root: {
+        // Needed to fill max height from parent, drawerSurfaceStyles
+        height: '100%'
+    }
+};
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -10344,7 +10492,7 @@ const _DrawerMenu = (props) => {
             borderTopLeftRadius: borderRadius
         }
     }), [firstItemStyle, borderRadius]);
-    return (React__default['default'].createElement(_DrawerSurface, { styles: (_b = props.styles) === null || _b === void 0 ? void 0 : _b.drawerSurfaceStyles, onLightDismiss: props.onLightDismiss, heading: props.heading },
+    return (React__default['default'].createElement(_DrawerSurface, { disableMaxHeight: props.disableMaxHeight, styles: (_b = props.styles) === null || _b === void 0 ? void 0 : _b.drawerSurfaceStyles, onLightDismiss: props.onLightDismiss, heading: props.heading },
         React__default['default'].createElement(react.Stack, { styles: props.styles, role: "menu", "data-ui-id": "drawer-menu" }, menuItemsToRender === null || menuItemsToRender === void 0 ? void 0 :
             menuItemsToRender.slice(0, 1).map((item) => (React__default['default'].createElement(DrawerMenuItem, Object.assign({}, item, { key: '0', styles: modifiedFirstItemStyle, onItemClick: (ev, itemKey) => {
                     onItemClick(item, ev, itemKey);
@@ -10703,7 +10851,8 @@ const moreButtonStyles = {
         zIndex: 1,
         color: 'inherit',
         top: '-0.125rem',
-        height: '100%'
+        height: '100%',
+        padding: '0rem'
     },
     rootHovered: {
         background: 'none'
@@ -10825,8 +10974,7 @@ const DEFAULT_PERSONA_MIN_SIZE_PX = 32;
 const DefaultPlaceholder = (props) => {
     const { text, noVideoAvailableAriaLabel, coinSize, hidePersonaDetails } = props;
     return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles({ position: 'absolute', height: '100%', width: '100%' }) },
-        React__default['default'].createElement(react.Stack, { styles: defaultPersonaStyles },
-            React__default['default'].createElement(react.Persona, { coinSize: coinSize, hidePersonaDetails: hidePersonaDetails, text: text !== null && text !== void 0 ? text : '', initialsTextColor: "white", "aria-label": noVideoAvailableAriaLabel !== null && noVideoAvailableAriaLabel !== void 0 ? noVideoAvailableAriaLabel : '', showOverflowTooltip: false }))));
+        React__default['default'].createElement(react.Stack, { styles: defaultPersonaStyles }, coinSize && (React__default['default'].createElement(react.Persona, { coinSize: coinSize, hidePersonaDetails: hidePersonaDetails, text: text !== null && text !== void 0 ? text : '', initialsTextColor: "white", "aria-label": noVideoAvailableAriaLabel !== null && noVideoAvailableAriaLabel !== void 0 ? noVideoAvailableAriaLabel : '', showOverflowTooltip: false })))));
 };
 const defaultPersonaStyles = { root: { margin: 'auto', maxHeight: '100%' } };
 /* @conditional-compile-remove(pinned-participants) */
@@ -10863,7 +11011,7 @@ const VideoTile = (props) => {
     const [isHovered, setIsHovered] = React.useState(false);
     /* @conditional-compile-remove(pinned-participants) */
     const [isFocused, setIsFocused] = React.useState(false);
-    const [personaSize, setPersonaSize] = React.useState(100);
+    const [personaSize, setPersonaSize] = React.useState();
     const videoTileRef = React.useRef(null);
     const locale = useLocale$1();
     const theme = useTheme();
@@ -10947,7 +11095,7 @@ const VideoTile = (props) => {
                 }) }, onRenderPlaceholder ? (onRenderPlaceholder(userId !== null && userId !== void 0 ? userId : '', placeholderOptions, DefaultPlaceholder)) : (React__default['default'].createElement(DefaultPlaceholder, Object.assign({}, placeholderOptions))))),
             (canShowLabel || participantStateString) && (React__default['default'].createElement(react.Stack, { horizontal: true, className: tileInfoContainerStyle, tokens: tileInfoContainerTokens },
                 React__default['default'].createElement(react.Stack, { horizontal: true, className: tileInfoStyle },
-                    canShowLabel && (React__default['default'].createElement(react.Text, { className: react.mergeStyles(displayNameStyle), title: displayName, style: { color: participantStateString ? theme.palette.neutralSecondary : 'inherit' } }, displayName)),
+                    canShowLabel && (React__default['default'].createElement(react.Text, { className: react.mergeStyles(displayNameStyle), title: displayName, style: { color: participantStateString ? theme.palette.neutralSecondary : 'inherit' }, "data-ui-id": "video-tile-display-name" }, displayName)),
                     participantStateString && (React__default['default'].createElement(react.Text, { className: react.mergeStyles(participantStateStringStyles(theme)) }, bracketedParticipantString(participantStateString, !!canShowLabel))),
                     showMuteIndicator && isMuted && (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(iconContainerStyle) },
                         React__default['default'].createElement(react.Icon, { iconName: "VideoTileMicOff" }))),
@@ -13690,6 +13838,9 @@ const generateDefaultDeviceMenuProps = (props, strings, primaryActionItem, isSel
                         key: 'sectionCamera',
                         title: strings.cameraMenuTooltip,
                         subMenuProps: {
+                            calloutProps: {
+                                preventDismissOnEvent: _preventDismissOnEvent
+                            },
                             items: cameras.map((camera) => ({
                                 key: camera.id,
                                 text: camera.name,
@@ -13730,6 +13881,9 @@ const generateDefaultDeviceMenuProps = (props, strings, primaryActionItem, isSel
                         key: key,
                         title: title,
                         subMenuProps: {
+                            calloutProps: {
+                                preventDismissOnEvent: _preventDismissOnEvent
+                            },
                             items: microphones.map((microphone) => ({
                                 key: microphone.id,
                                 text: microphone.name,
@@ -13762,6 +13916,9 @@ const generateDefaultDeviceMenuProps = (props, strings, primaryActionItem, isSel
                     {
                         key: 'sectionSpeaker',
                         subMenuProps: {
+                            calloutProps: {
+                                preventDismissOnEvent: _preventDismissOnEvent
+                            },
                             items: speakers.map((speaker) => ({
                                 key: speaker.id,
                                 text: speaker.name,
@@ -15581,6 +15738,12 @@ const captionContainerClassName = react.mergeStyles({
  * @private
  */
 const captionsBannerClassName = react.mergeStyles(Object.assign({ height: _pxToRem(100), overflowY: 'auto', overflowX: 'hidden' }, scrollbarStyles));
+/**
+ * @private
+ */
+const loadingBannerClassName = react.mergeStyles({
+    height: _pxToRem(100)
+});
 /**
  * @private
  */
@@ -15629,7 +15792,7 @@ const _Caption = (props) => {
  * A component for displaying a CaptionsBanner with user icon, displayName and captions text.
  */
 const _CaptionsBanner = (props) => {
-    const { captions, isCaptionsOn, onRenderAvatar } = props;
+    const { captions, isCaptionsOn, startCaptionsInProgress, onRenderAvatar, strings } = props;
     const captionsScrollDivRef = React.useRef(null);
     const [isAtBottomOfScroll, setIsAtBottomOfScroll] = React.useState(true);
     const scrollToBottom = () => {
@@ -15658,12 +15821,14 @@ const _CaptionsBanner = (props) => {
             scrollToBottom();
         }
     }, [captions, isAtBottomOfScroll]);
-    return (React__default['default'].createElement(React__default['default'].Fragment, null, isCaptionsOn && (React__default['default'].createElement(react.FocusZone, { as: "ul", className: captionsContainerClassName },
-        React__default['default'].createElement(c, { innerRef: captionsScrollDivRef },
+    return (React__default['default'].createElement(React__default['default'].Fragment, null, startCaptionsInProgress && (React__default['default'].createElement(react.FocusZone, { as: "ul", className: captionsContainerClassName },
+        isCaptionsOn && (React__default['default'].createElement(c, { innerRef: captionsScrollDivRef },
             React__default['default'].createElement(react.Stack, { verticalAlign: "start", className: captionsBannerClassName }, captions.map((caption) => {
                 return (React__default['default'].createElement("div", { key: caption.id, className: captionContainerClassName, "data-is-focusable": true },
                     React__default['default'].createElement(_Caption, Object.assign({}, caption, { onRenderAvatar: onRenderAvatar }))));
-            })))))));
+            })))),
+        !isCaptionsOn && (React__default['default'].createElement(react.Stack, { verticalAlign: "center", className: loadingBannerClassName, "data-is-focusable": true },
+            React__default['default'].createElement(react.Spinner, { label: strings === null || strings === void 0 ? void 0 : strings.captionsBannerSpinnerText, ariaLive: "assertive", labelPosition: "right" })))))));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -15777,14 +15942,24 @@ const _CaptionsSettingsModal = (props) => {
     const { supportedSpokenLanguages, currentSpokenLanguage, isCaptionsFeatureActive, showModal, onSetSpokenLanguage, onDismissCaptionsSettings, onStartCaptions, strings, captionsAvailableLanguageStrings } = props;
     const theme = react.useTheme();
     const [selectedItem, setSelectedItem] = React.useState({
-        key: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage$1,
-        text: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage$1
+        key: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage,
+        text: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage
     });
+    const [hasSetSpokenLanguage, setHasSetSpokenLanguage] = React.useState(false);
     const onDismiss = React.useCallback(() => {
         if (onDismissCaptionsSettings) {
             onDismissCaptionsSettings();
         }
     }, [onDismissCaptionsSettings]);
+    React.useEffect(() => {
+        // set spoken language when start captions with a spoken language specified.
+        // this is to fix the bug when a second user starts captions with a new spoken language, captions bot ignore that spoken language
+        if (isCaptionsFeatureActive && !hasSetSpokenLanguage) {
+            onSetSpokenLanguage(selectedItem.key.toString());
+            // we only need to call set spoken language once when first starting captions
+            setHasSetSpokenLanguage(true);
+        }
+    }, [isCaptionsFeatureActive, onSetSpokenLanguage, selectedItem.key, hasSetSpokenLanguage]);
     const onConfirm = React.useCallback(() => __awaiter$p(void 0, void 0, void 0, function* () {
         const languageCode = selectedItem.key.toString();
         if (isCaptionsFeatureActive) {
@@ -15792,9 +15967,6 @@ const _CaptionsSettingsModal = (props) => {
         }
         else {
             yield onStartCaptions({ spokenLanguage: languageCode });
-            // set spoken language when start captions with a spoken language specified.
-            // this is to fix the bug when a second user starts captions with a new spoken language, captions bot ignore that spoken language
-            onSetSpokenLanguage(languageCode);
         }
         onDismiss();
     }), [onDismiss, isCaptionsFeatureActive, onSetSpokenLanguage, onStartCaptions, selectedItem.key]);
@@ -15816,7 +15988,7 @@ const _CaptionsSettingsModal = (props) => {
     }), []);
     const CaptionsSettingsComponent = React.useCallback(() => {
         return (React__default['default'].createElement(react.Stack, null,
-            React__default['default'].createElement(react.Dropdown, { label: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsDropdownLabel, selectedKey: selectedItem ? selectedItem.key : undefined, onChange: onChange, calloutProps: calloutProps, placeholder: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage$1, options: dropdownOptions, styles: dropdownStyles }),
+            React__default['default'].createElement(react.Dropdown, { label: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsDropdownLabel, selectedKey: selectedItem ? selectedItem.key : undefined, onChange: onChange, calloutProps: calloutProps, placeholder: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage, options: dropdownOptions, styles: dropdownStyles }),
             React__default['default'].createElement(react.Text, { className: dropdownInfoTextStyle(theme) }, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsDropdownInfoText)));
     }, [
         calloutProps,
@@ -18330,7 +18502,7 @@ const CallCompositeIcon = (props) => (React__default['default'].createElement(re
  */
 const CallWithChatCompositeIcon = (props) => (React__default['default'].createElement(react.FontIcon, Object.assign({}, props)));
 
-var call$d={cameraLabel:"Camera",noCamerasLabel:"No cameras found",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",videoEffectsPaneTitle:"Effects",videoEffectsPaneBackgroundSelectionTitle:"Background",configurationPageVideoEffectsButtonLabel:"Effects",unableToStartVideoEffect:"Unable to apply video effect.",blurBackgroundEffectButtonLabel:"Blur",blurBackgroundTooltip:"Blur Background",removeBackgroundEffectButtonLabel:"None",removeBackgroundTooltip:"Remove Background",cameraOffBackgroundEffectWarningText:"Your camera is off. Turn on camera to see video effect.",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",deniedPermissionToRoomDetails:"You do not have permission to join this room.",deniedPermissionToRoomTitle:"Permission denied to room",peopleButtonLabel:"People",peoplePaneTitle:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"Room ID provided is not valid.",roomNotFoundTitle:"Room not found",soundLabel:"Sound",noMicrophonesLabel:"No microphones found",noSpeakersLabel:"No speakers found",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number",outboundCallingNoticeString:"Calling...",participantJoinedNoticeString:"{displayName} joined",twoParticipantJoinedNoticeString:"{displayName1} and {displayName2} have joined",threeParticipantJoinedNoticeString:"{displayName1}, {displayName2} and {displayName3} have joined",participantLeftNoticeString:"{displayName} left",twoParticipantLeftNoticeString:"{displayName1} and {displayName2} have left",threeParticipantLeftNoticeString:"{displayName1}, {displayName2} and {displayName3} have left",unnamedParticipantString:"unnamed participant",manyUnnamedParticipantsJoined:"unnamed participant and {numOfParticipants} other participants joined",manyUnnamedParticipantsLeft:"unnamed participant and {numOfParticipants} other participants left",manyParticipantsJoined:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants joined",manyParticipantsLeft:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants left",liveCaptionsLabel:"Live captions",captionsSettingsLabel:"Caption settings",startCaptionsButtonOnLabel:"Turn on captions",startCaptionsButtonOffLabel:"Turn off captions",startCaptionsButtonTooltipOnContent:"Turn off captions",startCaptionsButtonTooltipOffContent:"Turn on captions",captionsSettingsModalTitle:"What language is being spoken?",captionsSettingsDropdownLabel:"Spoken language",captionsSettingsDropdownInfoText:"Language that everyone on this call is speaking.",captionsSettingsConfirmButtonLabel:"Confirm",captionsSettingsCancelButtonLabel:"Cancel",captionsSettingsModalAriaLabel:"Captions Setting Modal",captionsSettingsCloseModalButtonAriaLabel:"Close Captions Setting",captionsBannerMoreButtonCallingLabel:"More",captionsBannerMoreButtonTooltip:"More options",captionsAvailableLanguageStrings:{"ar-ae":"Arabic - U.A.E.","ar-sa":"Arabic - Saudi Arabia","da-dk":"Danish","de-de":"German - Germany","en-au":"English - Australia","en-ca":"English - Canada","en-gb":"English - United Kingdom","en-in":"English - India","en-nz":"English - New Zealand","en-us":"English - United States","es-es":"Spanish - Spain (Modern Sort)","es-mx":"Spanish - Mexico","fi-fi":"Finnish","fr-ca":"French - Canada","fr-fr":"French - France","hi-in":"Hindi","it-it":"Italian - Italy","ja-jp":"Japanese","ko-kr":"Korean","nb-no":"Norwegian (Bokmål)","nl-be":"Dutch - Belgium","nl-nl":"Dutch - Netherlands","pl-pl":"Polish","pt-br":"Portuguese - Brazil","ru-ru":"Russian","sv-se":"Swedish","zh-cn":"Chinese - People's Republic of China","zh-hk":"Chinese - Hong Kong SAR","cs-cz":"Czech","pt-pt":"Portuguese - Portugal","tr-tr":"Turkish","vi-vn":"Vietnamese","th-th":"Thai","he-il":"Hebrew","cy-gb":"Welsh","uk-ua":"Ukrainian","el-gr":"Greek","hu-hu":"Hungarian","ro-ro":"Romanian","sk-sk":"Slovak","zh-tw":"Chinese - Taiwan"}};var chat$d={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$d={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerCaptionsMenuTitle:"Live captions",moreDrawerSpokenLanguageMenuTitle:"Spoken language",peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number"};var en_US = {call:call$d,chat:chat$d,callWithChat:callWithChat$d};
+var call$d={cameraLabel:"Camera",noCamerasLabel:"No cameras found",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",videoEffectsPaneTitle:"Effects",videoEffectsPaneBackgroundSelectionTitle:"Background",configurationPageVideoEffectsButtonLabel:"Effects",unableToStartVideoEffect:"Unable to apply video effect.",blurBackgroundEffectButtonLabel:"Blur",blurBackgroundTooltip:"Blur Background",removeBackgroundEffectButtonLabel:"None",removeBackgroundTooltip:"Remove Background",cameraOffBackgroundEffectWarningText:"Your camera is off. Turn on camera to see video effect.",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",deniedPermissionToRoomDetails:"You do not have permission to join this room.",deniedPermissionToRoomTitle:"Permission denied to room",peopleButtonLabel:"People",peoplePaneTitle:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"Room ID provided is not valid.",roomNotFoundTitle:"Room not found",soundLabel:"Sound",noMicrophonesLabel:"No microphones found",noSpeakersLabel:"No speakers found",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number",outboundCallingNoticeString:"Calling...",participantJoinedNoticeString:"{displayName} joined",twoParticipantJoinedNoticeString:"{displayName1} and {displayName2} have joined",threeParticipantJoinedNoticeString:"{displayName1}, {displayName2} and {displayName3} have joined",participantLeftNoticeString:"{displayName} left",twoParticipantLeftNoticeString:"{displayName1} and {displayName2} have left",threeParticipantLeftNoticeString:"{displayName1}, {displayName2} and {displayName3} have left",unnamedParticipantString:"unnamed participant",manyUnnamedParticipantsJoined:"unnamed participant and {numOfParticipants} other participants joined",manyUnnamedParticipantsLeft:"unnamed participant and {numOfParticipants} other participants left",manyParticipantsJoined:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants joined",manyParticipantsLeft:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants left",liveCaptionsLabel:"Live captions",captionsSettingsLabel:"Caption settings",startCaptionsButtonOnLabel:"Turn on captions",startCaptionsButtonOffLabel:"Turn off captions",startCaptionsButtonTooltipOnContent:"Turn off captions",startCaptionsButtonTooltipOffContent:"Turn on captions",captionsSettingsModalTitle:"What language is being spoken?",captionsSettingsDropdownLabel:"Spoken language",captionsSettingsDropdownInfoText:"Language that everyone on this call is speaking.",captionsSettingsConfirmButtonLabel:"Confirm",captionsSettingsCancelButtonLabel:"Cancel",captionsSettingsModalAriaLabel:"Captions Setting Modal",captionsSettingsCloseModalButtonAriaLabel:"Close Captions Setting",captionsBannerMoreButtonCallingLabel:"More",captionsBannerMoreButtonTooltip:"More options",captionsAvailableLanguageStrings:{"ar-ae":"Arabic - U.A.E.","ar-sa":"Arabic - Saudi Arabia","da-dk":"Danish","de-de":"German - Germany","en-au":"English - Australia","en-ca":"English - Canada","en-gb":"English - United Kingdom","en-in":"English - India","en-nz":"English - New Zealand","en-us":"English - United States","es-es":"Spanish - Spain (Modern Sort)","es-mx":"Spanish - Mexico","fi-fi":"Finnish","fr-ca":"French - Canada","fr-fr":"French - France","hi-in":"Hindi","it-it":"Italian - Italy","ja-jp":"Japanese","ko-kr":"Korean","nb-no":"Norwegian (Bokmål)","nl-be":"Dutch - Belgium","nl-nl":"Dutch - Netherlands","pl-pl":"Polish","pt-br":"Portuguese - Brazil","ru-ru":"Russian","sv-se":"Swedish","zh-cn":"Chinese - People's Republic of China","zh-hk":"Chinese - Hong Kong SAR","cs-cz":"Czech","pt-pt":"Portuguese - Portugal","tr-tr":"Turkish","vi-vn":"Vietnamese","th-th":"Thai","he-il":"Hebrew","cy-gb":"Welsh","uk-ua":"Ukrainian","el-gr":"Greek","hu-hu":"Hungarian","ro-ro":"Romanian","sk-sk":"Slovak","zh-tw":"Chinese - Taiwan"},captionsBannerSpinnerText:"Starting captions..."};var chat$d={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$d={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerCaptionsMenuTitle:"Live captions",moreDrawerSpokenLanguageMenuTitle:"Spoken language",peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number"};var en_US = {call:call$d,chat:chat$d,callWithChat:callWithChat$d};
 
 var call$c={cameraLabel:"Camera",noCamerasLabel:"No cameras found",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",videoEffectsPaneTitle:"Effects",videoEffectsPaneBackgroundSelectionTitle:"Background",configurationPageVideoEffectsButtonLabel:"Effects",unableToStartVideoEffect:"Unable to apply video effect.",blurBackgroundEffectButtonLabel:"Blur",blurBackgroundTooltip:"Blur Background",removeBackgroundEffectButtonLabel:"None",removeBackgroundTooltip:"Remove Background",cameraOffBackgroundEffectWarningText:"Your camera is off. Turn on camera to see video effect.",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",deniedPermissionToRoomDetails:"You do not have permission to join this room.",deniedPermissionToRoomTitle:"Permission denied to room",peopleButtonLabel:"People",peoplePaneTitle:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"Room ID provided is not valid.",roomNotFoundTitle:"Room not found",soundLabel:"Sound",noMicrophonesLabel:"No microphones found",noSpeakersLabel:"No speakers found",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number",outboundCallingNoticeString:"Calling...",participantJoinedNoticeString:"{displayName} joined",twoParticipantJoinedNoticeString:"{displayName1} and {displayName2} have joined",threeParticipantJoinedNoticeString:"{displayName1}, {displayName2} and {displayName3} have joined",participantLeftNoticeString:"{displayName} left",twoParticipantLeftNoticeString:"{displayName1} and {displayName2} have left",threeParticipantLeftNoticeString:"{displayName1}, {displayName2} and {displayName3} have left",unnamedParticipantString:"unnamed participant",manyUnnamedParticipantsJoined:"unnamed participant and {numOfParticipants} other participants joined",manyUnnamedParticipantsLeft:"unnamed participant and {numOfParticipants} other participants left",manyParticipantsJoined:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants joined",manyParticipantsLeft:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants left",liveCaptionsLabel:"Live captions",captionsSettingsLabel:"Caption settings",startCaptionsButtonOnLabel:"Turn on captions",startCaptionsButtonOffLabel:"Turn off captions",startCaptionsButtonTooltipOnContent:"Turn off captions",startCaptionsButtonTooltipOffContent:"Turn on captions",captionsSettingsModalTitle:"What language is being spoken?",captionsSettingsDropdownLabel:"Spoken language",captionsSettingsDropdownInfoText:"Language that everyone on this call is speaking.",captionsSettingsConfirmButtonLabel:"Confirm",captionsSettingsCancelButtonLabel:"Cancel",captionsSettingsModalAriaLabel:"Captions Setting Modal",captionsSettingsCloseModalButtonAriaLabel:"Close Captions Setting",captionsBannerMoreButtonCallingLabel:"More",captionsBannerMoreButtonTooltip:"More options",captionsAvailableLanguageStrings:{"ar-ae":"Arabic - U.A.E.","ar-sa":"Arabic - Saudi Arabia","da-dk":"Danish","de-de":"German - Germany","en-au":"English - Australia","en-ca":"English - Canada","en-gb":"English - United Kingdom","en-in":"English - India","en-nz":"English - New Zealand","en-us":"English - United States","es-es":"Spanish - Spain (Modern Sort)","es-mx":"Spanish - Mexico","fi-fi":"Finnish","fr-ca":"French - Canada","fr-fr":"French - France","hi-in":"Hindi","it-it":"Italian - Italy","ja-jp":"Japanese","ko-kr":"Korean","nb-no":"Norwegian (Bokmål)","nl-be":"Dutch - Belgium","nl-nl":"Dutch - Netherlands","pl-pl":"Polish","pt-br":"Portuguese - Brazil","ru-ru":"Russian","sv-se":"Swedish","zh-cn":"Chinese - People's Republic of China","zh-hk":"Chinese - Hong Kong SAR","cs-cz":"Czech","pt-pt":"Portuguese - Portugal","tr-tr":"Turkish","vi-vn":"Vietnamese","th-th":"Thai","he-il":"Hebrew","cy-gb":"Welsh","uk-ua":"Ukrainian","el-gr":"Greek","hu-hu":"Hungarian","ro-ro":"Romanian","sk-sk":"Slovak","zh-tw":"Chinese - Taiwan"}};var chat$c={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$c={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerCaptionsMenuTitle:"Live captions",moreDrawerSpokenLanguageMenuTitle:"Spoken language",peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number"};var en_GB = {call:call$c,chat:chat$c,callWithChat:callWithChat$c};
 
@@ -20742,9 +20914,6 @@ const CaptionsBannerMoreButton = (props) => {
         yield startCaptionsButtonHandlers.onStartCaptions({
             spokenLanguage: startCaptionsButtonProps.currentSpokenLanguage
         });
-        // set spoken language when start captions with a spoken language specified.
-        // this is to fix the bug when a second user starts captions with a new spoken language, captions bot ignore that spoken language
-        startCaptionsButtonHandlers.onSetSpokenLanguage(startCaptionsButtonProps.currentSpokenLanguage);
     }), [startCaptionsButtonHandlers, startCaptionsButtonProps.currentSpokenLanguage]);
     /* @conditional-compile-remove(close-captions) */
     moreButtonContextualMenuItems.push({
@@ -20824,15 +20993,21 @@ const CaptionsBanner = (props) => {
         right: 0,
         top: 0
     });
+    /* @conditional-compile-remove(close-captions) */
+    const strings = useLocale().strings.call;
+    /* @conditional-compile-remove(close-captions) */
+    const captionsBannerStrings = {
+        captionsBannerSpinnerText: strings.captionsBannerSpinnerText
+    };
     return (React__default['default'].createElement(React__default['default'].Fragment, null,
         /* @conditional-compile-remove(close-captions) */ isCaptionsSettingsOpen && (React__default['default'].createElement(CaptionsSettingsModal, { showCaptionsSettingsModal: isCaptionsSettingsOpen, onDismissCaptionsSettings: onDismissCaptionsSettings })),
-        /* @conditional-compile-remove(close-captions) */ captionsBannerProps.captions.length > 0 &&
-            captionsBannerProps.isCaptionsOn && (React__default['default'].createElement("div", { className: containerClassName },
+        /* @conditional-compile-remove(close-captions) */
+        React__default['default'].createElement("div", { className: containerClassName },
             React__default['default'].createElement(react.Stack, { horizontalAlign: "center" },
                 React__default['default'].createElement(react.Stack.Item, { style: { width: props.isMobile ? mobileViewBannerWidth : desktopViewBannerWidth } },
-                    React__default['default'].createElement(_CaptionsBanner, Object.assign({}, captionsBannerProps, handlers)))),
-            !props.isMobile && (React__default['default'].createElement("div", { className: floatingChildClassName },
-                React__default['default'].createElement(CaptionsBannerMoreButton, { onCaptionsSettingsClick: onClickCaptionsSettings })))))));
+                    React__default['default'].createElement(_CaptionsBanner, Object.assign({}, captionsBannerProps, handlers, { strings: captionsBannerStrings })))),
+            !props.isMobile && captionsBannerProps.isCaptionsOn && (React__default['default'].createElement("div", { className: floatingChildClassName },
+                React__default['default'].createElement(CaptionsBannerMoreButton, { onCaptionsSettingsClick: onClickCaptionsSettings }))))));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -21227,7 +21402,7 @@ const SendDtmfDialpad = (props) => {
     const dialpadStyle = React.useMemo(() => themedDialpadStyle$1(isMobile, theme), [theme, isMobile]);
     if (isMobile) {
         return (React__default['default'].createElement(react.Stack, null, showDialpad && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStyles() },
-            React__default['default'].createElement(_DrawerSurface, { onLightDismiss: onDismissTriggered },
+            React__default['default'].createElement(_DrawerSurface, { disableMaxHeight: true, onLightDismiss: onDismissTriggered },
                 React__default['default'].createElement(react.Stack, { style: { padding: '1rem' } },
                     React__default['default'].createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { showDeleteButton: false, textFieldValue: textFieldValue, onChange: onChange, strings: strings, isMobile: isMobile }))))))));
     }
@@ -21605,9 +21780,6 @@ const DesktopMoreButton = (props) => {
         yield startCaptionsButtonHandlers.onStartCaptions({
             spokenLanguage: startCaptionsButtonProps.currentSpokenLanguage
         });
-        // set spoken language when start captions with a spoken language specified.
-        // this is to fix the bug when a second user starts captions with a new spoken language, captions bot ignore that spoken language
-        startCaptionsButtonHandlers.onSetSpokenLanguage(startCaptionsButtonProps.currentSpokenLanguage);
     }), [startCaptionsButtonHandlers, startCaptionsButtonProps.currentSpokenLanguage]);
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */
     const moreButtonStrings = React.useMemo(() => ({
@@ -22092,116 +22264,12 @@ const callStatusSelector = reselect.createSelector([getCallStatus, getIsScreenSh
     };
 });
 
-// Copyright (c) Microsoft Corporation.
-/**
- * Default Modal PIP related pixel measurements used for ModalLocalAndremotePIP and common/utils.
- *
- * @private
- */
-const MODAL_PIP_DEFAULT_PX = {
-    rightPositionPx: 16,
-    topPositionPx: 52,
-    widthPx: 88,
-    heightPx: 128
-};
-/**
- * @private
- */
-const getPipStyles = (theme) => ({
-    modal: {
-        main: Object.assign(Object.assign({ borderRadius: theme.effects.roundedCorner4, boxShadow: theme.effects.elevation8, 
-            // Above the message thread / people pane.
-            zIndex: 2 }, (theme.rtl
-            ? { left: _pxToRem(MODAL_PIP_DEFAULT_PX.rightPositionPx) }
-            : { right: _pxToRem(MODAL_PIP_DEFAULT_PX.rightPositionPx) })), { top: _pxToRem(MODAL_PIP_DEFAULT_PX.topPositionPx) })
-    }
-});
-/**
- * @private
- */
-const PIPContainerStyle = {
-    root: { position: 'absolute', width: '100%', height: '100%', pointerEvents: 'none' }
-};
-/**
- * @private
- */
-const hiddenStyle = react.concatStyleSets(PIPContainerStyle, { root: { display: 'none' } });
-/**
- * @private
- */
-const modalStyle = {
-    main: {
-        minWidth: 'min-content',
-        minHeight: 'min-content',
-        position: 'absolute',
-        overflow: 'hidden',
-        // pointer events for root Modal div set to auto to make LocalAndRemotePIP interactive
-        pointerEvents: 'auto',
-        touchAction: 'none'
-    },
-    root: {
-        width: '100%',
-        height: '100%',
-        // pointer events for root Modal div set to none to make descendants interactive
-        pointerEvents: 'none'
-    }
-};
-/**
- * Styles for layer host to bound the modal wrapping PiPiP in the mobile pane.
- * @private
- */
-const modalLayerHostStyle = {
-    display: 'flex',
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    width: '100%',
-    height: '100%',
-    overflow: 'hidden',
-    zIndex: '100000',
-    // pointer events for layerHost set to none to make descendants interactive
-    pointerEvents: 'none'
-};
-
-// Copyright (c) Microsoft Corporation.
-/**
- * @private
- */
-// Use document.getElementById until Fluent's Stack supports componentRef property: https://github.com/microsoft/fluentui/issues/20410
-const useMinMaxDragPosition = (modalLayerHostId, rtl) => {
-    const modalHostRef = React.useRef(document.getElementById(modalLayerHostId));
-    const modalHostWidth = _useContainerWidth(modalHostRef);
-    const modalHostHeight = _useContainerHeight(modalHostRef);
-    const minDragPosition = React.useMemo(() => modalHostWidth === undefined
-        ? undefined
-        : {
-            x: rtl
-                ? -1 * MODAL_PIP_DEFAULT_PX.rightPositionPx
-                : MODAL_PIP_DEFAULT_PX.rightPositionPx - modalHostWidth + MODAL_PIP_DEFAULT_PX.widthPx,
-            y: -1 * MODAL_PIP_DEFAULT_PX.topPositionPx
-        }, [modalHostWidth, rtl]);
-    const maxDragPosition = React.useMemo(() => modalHostWidth === undefined || modalHostHeight === undefined
-        ? undefined
-        : {
-            x: rtl
-                ? modalHostWidth - MODAL_PIP_DEFAULT_PX.rightPositionPx - MODAL_PIP_DEFAULT_PX.widthPx
-                : MODAL_PIP_DEFAULT_PX.rightPositionPx,
-            y: modalHostHeight - MODAL_PIP_DEFAULT_PX.topPositionPx - MODAL_PIP_DEFAULT_PX.heightPx
-        }, [modalHostHeight, modalHostWidth, rtl]);
-    return { minDragPosition: minDragPosition, maxDragPosition: maxDragPosition };
-};
-/**
- * @private
- */
-const defaultSpokenLanguage = 'en-us';
-
 // Copyright (c) Microsoft Corporation.
 /**
  * @private
  */
 const spokenLanguageDrawerStyles = (theme) => ({
     root: {
-        height: _pxToRem(300),
         overflow: 'auto'
     },
     drawerSurfaceStyles: {
@@ -22418,18 +22486,13 @@ const MoreDrawer = (props) => {
     /* @conditional-compile-remove(close-captions) */
     const [isSpokenLanguageDrawerOpen, setIsSpokenLanguageDrawerOpen] = React.useState(false);
     /* @conditional-compile-remove(close-captions) */
-    const [currentSpokenLanguage, setCurrentSpokenLanguage] = React.useState(startCaptionsButtonProps.currentSpokenLanguage === ''
-        ? defaultSpokenLanguage
-        : startCaptionsButtonProps.currentSpokenLanguage);
+    const [currentSpokenLanguage, setCurrentSpokenLanguage] = React.useState(startCaptionsButtonProps.currentSpokenLanguage);
     /* @conditional-compile-remove(close-captions) */
     const onToggleChange = React.useCallback(() => __awaiter$b(void 0, void 0, void 0, function* () {
         if (!startCaptionsButtonProps.checked) {
             yield startCaptionsButtonHandlers.onStartCaptions({
                 spokenLanguage: currentSpokenLanguage
             });
-            // set spoken language when start captions with a spoken language specified.
-            // this is to fix the bug when a second user starts captions with a new spoken language, captions bot ignore that spoken language
-            startCaptionsButtonHandlers.onSetSpokenLanguage(currentSpokenLanguage);
         }
         else {
             startCaptionsButtonHandlers.onStopCaptions();
@@ -22969,7 +23032,7 @@ const CallingDialpad = (props) => {
     };
     if (isMobile) {
         return (React__default['default'].createElement(react.Stack, { "data-ui-id": "call-with-chat-composite-dialpad" }, showDialpad && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStyles() },
-            React__default['default'].createElement(_DrawerSurface, { onLightDismiss: onDismissTriggered },
+            React__default['default'].createElement(_DrawerSurface, { onLightDismiss: onDismissTriggered, disableMaxHeight: true },
                 React__default['default'].createElement(react.Stack, { style: { padding: '1rem' } }, dialpadComponent()))))));
     }
     return (React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(react.Modal, { titleAriaId: strings.dialpadModalAriaLabel, isOpen: showDialpad, onDismiss: onDismissTriggered, isBlocking: true, styles: dialpadModalStyle, "data-ui-id": "call-with-chat-composite-dialpad" },
@@ -23054,7 +23117,7 @@ const AddPeopleDropdown = (props) => {
             defaultMenuProps.items.length > 0 && (React__default['default'].createElement(react.Stack.Item, { styles: copyLinkButtonContainerStyles },
                 React__default['default'].createElement(react.PrimaryButton, { onClick: setDrawerMenuItemsForAddPeople, styles: copyLinkButtonStylesThemed, onRenderIcon: () => PeoplePaneAddPersonIconTrampoline(), text: strings.peoplePaneAddPeopleButtonLabel, "data-ui-id": "call-add-people-button" }))),
             addPeopleDrawerMenuItems.length > 0 && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStyles(), "data-ui-id": "call-add-people-dropdown" },
-                React__default['default'].createElement(_DrawerMenu, { onLightDismiss: () => setAddPeopleDrawerMenuItems([]), items: addPeopleDrawerMenuItems }))),
+                React__default['default'].createElement(_DrawerMenu, { disableMaxHeight: true, onLightDismiss: () => setAddPeopleDrawerMenuItems([]), items: addPeopleDrawerMenuItems }))),
             alternateCallerId && (React__default['default'].createElement(CallingDialpad, { isMobile: true, strings: strings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad, onAddParticipant: onAddParticipant, alternateCallerId: alternateCallerId }))));
     }
     return (React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(react.Stack, null,
@@ -23617,6 +23680,77 @@ const localAndRemotePIPSelector = reselect__namespace.createSelector([getDisplay
     };
 });
 
+// Copyright (c) Microsoft Corporation.
+/**
+ * Default Modal PIP related pixel measurements used for ModalLocalAndremotePIP and common/utils.
+ *
+ * @private
+ */
+const MODAL_PIP_DEFAULT_PX = {
+    rightPositionPx: 16,
+    topPositionPx: 52,
+    widthPx: 88,
+    heightPx: 128
+};
+/**
+ * @private
+ */
+const getPipStyles = (theme) => ({
+    modal: {
+        main: Object.assign(Object.assign({ borderRadius: theme.effects.roundedCorner4, boxShadow: theme.effects.elevation8, 
+            // Above the message thread / people pane.
+            zIndex: 2 }, (theme.rtl
+            ? { left: _pxToRem(MODAL_PIP_DEFAULT_PX.rightPositionPx) }
+            : { right: _pxToRem(MODAL_PIP_DEFAULT_PX.rightPositionPx) })), { top: _pxToRem(MODAL_PIP_DEFAULT_PX.topPositionPx) })
+    }
+});
+/**
+ * @private
+ */
+const PIPContainerStyle = {
+    root: { position: 'absolute', width: '100%', height: '100%', pointerEvents: 'none' }
+};
+/**
+ * @private
+ */
+const hiddenStyle = react.concatStyleSets(PIPContainerStyle, { root: { display: 'none' } });
+/**
+ * @private
+ */
+const modalStyle = {
+    main: {
+        minWidth: 'min-content',
+        minHeight: 'min-content',
+        position: 'absolute',
+        overflow: 'hidden',
+        // pointer events for root Modal div set to auto to make LocalAndRemotePIP interactive
+        pointerEvents: 'auto',
+        touchAction: 'none'
+    },
+    root: {
+        width: '100%',
+        height: '100%',
+        // pointer events for root Modal div set to none to make descendants interactive
+        pointerEvents: 'none'
+    }
+};
+/**
+ * Styles for layer host to bound the modal wrapping PiPiP in the mobile pane.
+ * @private
+ */
+const modalLayerHostStyle = {
+    display: 'flex',
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    width: '100%',
+    height: '100%',
+    overflow: 'hidden',
+    zIndex: '100000',
+    // pointer events for layerHost set to none to make descendants interactive
+    pointerEvents: 'none'
+};
+
 // Copyright (c) Microsoft Corporation.
 /**
  * Drag options for Modal in {@link ModalLocalAndRemotePIP} component
@@ -23663,6 +23797,34 @@ const ModalLocalAndRemotePIP = (props) => {
         !props.hidden && localAndRemotePIP)));
 };
 
+// Copyright (c) Microsoft Corporation.
+/**
+ * @private
+ */
+// Use document.getElementById until Fluent's Stack supports componentRef property: https://github.com/microsoft/fluentui/issues/20410
+const useMinMaxDragPosition = (modalLayerHostId, rtl) => {
+    const modalHostRef = React.useRef(document.getElementById(modalLayerHostId));
+    const modalHostWidth = _useContainerWidth(modalHostRef);
+    const modalHostHeight = _useContainerHeight(modalHostRef);
+    const minDragPosition = React.useMemo(() => modalHostWidth === undefined
+        ? undefined
+        : {
+            x: rtl
+                ? -1 * MODAL_PIP_DEFAULT_PX.rightPositionPx
+                : MODAL_PIP_DEFAULT_PX.rightPositionPx - modalHostWidth + MODAL_PIP_DEFAULT_PX.widthPx,
+            y: -1 * MODAL_PIP_DEFAULT_PX.topPositionPx
+        }, [modalHostWidth, rtl]);
+    const maxDragPosition = React.useMemo(() => modalHostWidth === undefined || modalHostHeight === undefined
+        ? undefined
+        : {
+            x: rtl
+                ? modalHostWidth - MODAL_PIP_DEFAULT_PX.rightPositionPx - MODAL_PIP_DEFAULT_PX.widthPx
+                : MODAL_PIP_DEFAULT_PX.rightPositionPx,
+            y: modalHostHeight - MODAL_PIP_DEFAULT_PX.topPositionPx - MODAL_PIP_DEFAULT_PX.heightPx
+        }, [modalHostHeight, modalHostWidth, rtl]);
+    return { minDragPosition: minDragPosition, maxDragPosition: maxDragPosition };
+};
+
 // Copyright (c) Microsoft Corporation.
 /**
  * @private
@@ -24028,8 +24190,7 @@ const MediaGallery = (props) => {
     }, [cameraSwitcherCallback, cameraSwitcherCameras]);
     const onRenderAvatar = React.useCallback((userId, options) => {
         return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles({ position: 'absolute', height: '100%', width: '100%' }) },
-            React__default['default'].createElement(react.Stack, { styles: { root: { margin: 'auto', maxHeight: '100%' } } },
-                React__default['default'].createElement(AvatarPersona, Object.assign({ userId: userId }, options, { dataProvider: props.onFetchAvatarPersonaData })))));
+            React__default['default'].createElement(react.Stack, { styles: { root: { margin: 'auto', maxHeight: '100%' } } }, (options === null || options === void 0 ? void 0 : options.coinSize) && (React__default['default'].createElement(AvatarPersona, Object.assign({ userId: userId }, options, { dataProvider: props.onFetchAvatarPersonaData }))))));
     }, [props.onFetchAvatarPersonaData]);
     useLocalVideoStartTrigger(!!props.isVideoStreamOn);
     /* @conditional-compile-remove(pinned-participants) */
@@ -25001,7 +25162,7 @@ const CallReadinessModal = (props) => {
             }
         };
     if (mobileView && modal !== undefined) {
-        return (React__default['default'].createElement(React__default['default'].Fragment, null, isPermissionsModalDismissed && (React__default['default'].createElement(_DrawerSurface, { onLightDismiss: onLightDismissTriggered, styles: drawerContainerStyles(DRAWER_HIGH_Z_BAND) }, modal()))));
+        return (React__default['default'].createElement(React__default['default'].Fragment, null, isPermissionsModalDismissed && (React__default['default'].createElement(_DrawerSurface, { disableMaxHeight: true, onLightDismiss: onLightDismissTriggered, styles: drawerContainerStyles(DRAWER_HIGH_Z_BAND) }, modal()))));
     }
     else if (!mobileView && modal !== undefined) {
         return (React__default['default'].createElement(_ModalClone, { styles: {
@@ -25070,7 +25231,7 @@ const CallReadinessModalFallBack = (props) => {
         };
     if (mobileView) {
         return (React__default['default'].createElement(React__default['default'].Fragment, null,
-            (checkPermissionModalShowing || audioState === 'prompt' || videoState === 'prompt') && (React__default['default'].createElement(_DrawerSurface, { onLightDismiss: onLightDismissTriggered, styles: drawerContainerStyles(DRAWER_HIGH_Z_BAND) },
+            (checkPermissionModalShowing || audioState === 'prompt' || videoState === 'prompt') && (React__default['default'].createElement(_DrawerSurface, { disableMaxHeight: true, onLightDismiss: onLightDismissTriggered, styles: drawerContainerStyles(DRAWER_HIGH_Z_BAND) },
                 React__default['default'].createElement(CameraAndMicrophoneSitePermissions, { appName: 'app', 
                     /* @conditional-compile-remove(unsupported-browser) */
                     browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
@@ -25078,7 +25239,7 @@ const CallReadinessModalFallBack = (props) => {
                             onPermissionsTroubleshootingClick(permissionsState);
                         }
                         : undefined, kind: "check" }))),
-            isPermissionsModalDismissed && !checkPermissionModalShowing && modal !== undefined && (React__default['default'].createElement(_DrawerSurface, { onLightDismiss: onLightDismissTriggered, styles: drawerContainerStyles(DRAWER_HIGH_Z_BAND) }, modal()))));
+            isPermissionsModalDismissed && !checkPermissionModalShowing && modal !== undefined && (React__default['default'].createElement(_DrawerSurface, { disableMaxHeight: true, onLightDismiss: onLightDismissTriggered, styles: drawerContainerStyles(DRAWER_HIGH_Z_BAND) }, modal()))));
     }
     else {
         return (React__default['default'].createElement(React__default['default'].Fragment, null,