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

package/dist/communication-react.d.ts

@@ -7831,7 +7831,7 @@ export declare interface ScreenShareButtonStrings {
  *
  * @beta
  */
-export declare type SelectedVideoBackgroundEffect = VideoBackgroundNoneEffect | VideoBackgroundBlurEffect | VideoBackgroundReplacementEffect;
+export declare type SelectedVideoBackgroundEffect = VideoBackgroundNoEffect | VideoBackgroundBlurEffect | VideoBackgroundReplacementEffect;
 
 /**
  * An optimized selector that refines {@link ClientState} updates into props for React Components in this library.
@@ -8969,7 +8969,7 @@ export declare interface VideoBackgroundImage {
  *
  * @beta
  */
-export declare interface VideoBackgroundNoneEffect {
+export declare interface VideoBackgroundNoEffect {
     /**
      * Name of effect to remove video background effect
      */

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-202305260013';
+var telemetryVersion = '1.5.1-alpha-202305270013';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -6086,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) */
@@ -6257,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);
@@ -6350,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;
@@ -6435,7 +6460,7 @@ const InputBoxComponent = (props) => {
                     setCurrentTriggerStartIndex(tagIndex);
                 }
                 if (tagIndex === -1) {
-                    yield debouncedQueryUpdate(undefined);
+                    updateMentionSuggestions([]);
                 }
                 else {
                     // In the middle of a @mention lookup
@@ -6485,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: () => {
@@ -6521,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
@@ -6530,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);
@@ -6620,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.
  *
@@ -10316,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();
@@ -10328,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.
 /**
@@ -10375,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);
@@ -10734,7 +10851,8 @@ const moreButtonStyles = {
         zIndex: 1,
         color: 'inherit',
         top: '-0.125rem',
-        height: '100%'
+        height: '100%',
+        padding: '0rem'
     },
     rootHovered: {
         background: 'none'
@@ -13720,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,
@@ -13760,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,
@@ -13792,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,
@@ -21275,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 }))))))));
     }
@@ -22143,7 +22270,6 @@ const callStatusSelector = reselect.createSelector([getCallStatus, getIsScreenSh
  */
 const spokenLanguageDrawerStyles = (theme) => ({
     root: {
-        height: _pxToRem(300),
         overflow: 'auto'
     },
     drawerSurfaceStyles: {
@@ -22906,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" },
@@ -22991,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,
@@ -25036,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: {
@@ -25105,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
@@ -25113,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,