@azure/communication-react 1.4.3-alpha-202212200014.0 → 1.4.3-alpha-202212220013.0

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

@@ -202,7 +202,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.4.3-alpha-202212200014.0';
+var telemetryVersion = '1.4.3-alpha-202212220013.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -7850,6 +7850,206 @@ const ParticipantList = (props) => {
         : onRenderParticipantDefault(participant, strings, myUserId, onRenderAvatar, createParticipantMenuItems, participantItemStyles, props.onParticipantClick, showParticipantOverflowTooltip))));
 };
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * For keyboard navigation - when this component has active focus, enter key and space keys should have the same behavior as mouse click.
+ *
+ * @private
+ */
+const submitWithKeyboard = (e, onSubmit) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+        onSubmit(e);
+    }
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * Maps the individual item in menuProps.items passed in the {@link DrawerMenu} into a UI component.
+ *
+ * @private
+ */
+const DrawerMenuItem = (props) => {
+    var _a;
+    const theme = useTheme();
+    const onClick = (ev) => props.onItemClick && props.onItemClick(ev, props.itemKey);
+    const onKeyPress = (ev) => onClick && submitWithKeyboard(ev, onClick);
+    const secondaryIcon = props.secondaryIconProps ? (React__default['default'].createElement(MenuItemIcon, Object.assign({}, props.secondaryIconProps))) : props.subMenuProps ? (React__default['default'].createElement(MenuItemIcon, { iconName: "ChevronRight" })) : undefined;
+    return (React__default['default'].createElement(react.Stack, { tabIndex: 0, role: "menuitem", horizontal: true, className: react.mergeStyles(drawerMenuItemRootStyles(theme.palette.neutralLight, theme.fonts.small), props.disabled ? disabledDrawerMenuItemRootStyles(theme.palette.neutralQuaternaryAlt) : undefined, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root), onKeyPress: props.disabled ? undefined : onKeyPress, onClick: props.disabled ? undefined : onClick, tokens: menuItemChildrenGap, id: props.id },
+        props.iconProps && (React__default['default'].createElement(react.Stack.Item, { role: "presentation", styles: props.disabled ? { root: { color: theme.palette.neutralTertiaryAlt } } : undefined },
+            React__default['default'].createElement(MenuItemIcon, Object.assign({}, props.iconProps)))),
+        React__default['default'].createElement(react.Stack.Item, { styles: drawerMenuItemTextStyles, grow: true },
+            React__default['default'].createElement(react.Text, { styles: props.disabled ? { root: { color: theme.palette.neutralTertiaryAlt } } : undefined }, props.text)),
+        props.secondaryText && (React__default['default'].createElement(react.Stack.Item, { styles: drawerMenuItemTextStyles, className: react.mergeStyles(secondaryTextStyles$2) },
+            React__default['default'].createElement(react.Text, { styles: {
+                    root: { color: props.disabled ? theme.palette.neutralTertiaryAlt : theme.palette.neutralSecondary }
+                } }, props.secondaryText))),
+        secondaryIcon && React__default['default'].createElement(react.Stack.Item, null, secondaryIcon)));
+};
+const MenuItemIcon = (props) => (React__default['default'].createElement(react.FontIcon, Object.assign({ className: react.mergeStyles(iconStyles$1) }, props)));
+const menuItemChildrenGap = { childrenGap: '0.5rem' };
+const drawerMenuItemRootStyles = (hoverBackground, fontSize) => (Object.assign(Object.assign({}, fontSize), { height: '3rem', lineHeight: '3rem', padding: '0rem 0.75rem', cursor: 'pointer', ':hover, :focus': {
+        background: hoverBackground
+    } }));
+const disabledDrawerMenuItemRootStyles = (background) => ({
+    pointerEvents: 'none',
+    background: background,
+    ':hover, :focus': {
+        background: background
+    }
+});
+/** Ensure long text entries appropriately show ellipsis instead of wrapping to a new line or showing a scrollbar */
+const drawerMenuItemTextStyles = {
+    root: {
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
+    }
+};
+const iconStyles$1 = {
+    // Vertically center icons in the menu item. Using line-height does not work for centering fluent SVG icons.
+    display: 'flex',
+    alignItems: 'center',
+    height: '100%',
+    // This can be removed when we upgrade to fluent-react-icons v2 (that removes the inner span element)
+    ' span': {
+        display: 'flex',
+        alignItems: 'center',
+        height: '100%'
+    }
+};
+const secondaryTextStyles$2 = {
+    // limit width for secondaryText in the menu item so it does not overlap with text on left.
+    maxWidth: '50%'
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * Container that holds the content of the drawer
+ *
+ * @private
+ */
+const DrawerContentContainer = (props) => {
+    var _a;
+    const theme = react.useTheme();
+    const backgroundColor = theme.palette.white;
+    const borderRadius = theme.effects.roundedCorner4;
+    const rootStyles = react.mergeStyles(containerStyles$4(backgroundColor, borderRadius), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root);
+    return React__default['default'].createElement(react.Stack, { className: rootStyles }, props.children);
+};
+const containerStyles$4 = (backgroundColor, borderRadius) => (Object.assign({ background: backgroundColor, borderTopRightRadius: borderRadius, borderTopLeftRadius: borderRadius }, react.AnimationStyles.slideUpIn10));
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * An element that fills the space the DrawerContentContainer does not take up.
+ * This is the element that enables the light dismiss feature.
+ *
+ * @private
+ */
+const DrawerLightDismiss = (props) => {
+    return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(lightDismissContainerStyles, props.styles), grow: true, onClick: () => props.onDismiss() }));
+};
+const lightDismissContainerStyles = { root: { height: '100%' } };
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * A `Drawer` can be used to reveal lightweight views inside your application.
+ * They appear from the bottom of the screen upwards and are light-dismissed.
+ *
+ * @internal
+ */
+const _DrawerSurface = (props) => {
+    var _a, _b, _c;
+    const rootStyles = react.mergeStyles(drawerSurfaceStyles, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root);
+    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(react.FocusTrapZone, { onKeyDown: (e) => {
+                if (e.key === 'Escape' || e.key === 'Esc') {
+                    props.onLightDismiss && props.onLightDismiss();
+                }
+            }, 
+            // 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 }, props.children))));
+};
+const drawerSurfaceStyles = {
+    width: '100%',
+    height: '100%',
+    background: 'rgba(0,0,0,0.4)'
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * Takes a set of menu items and returns a created menu inside a {@link _DrawerSurface}.
+ *
+ * @internal
+ */
+const _DrawerMenu = (props) => {
+    var _a, _b;
+    // This component breaks from a pure component pattern in order to internally support sub menus.
+    // When a sub menu item is clicked the menu items displayed is updated to be that of the submenu.
+    // To track this state we store a list of the keys clicked up until this point.
+    const [selectedKeyPath, setSelectedKeyPath] = React.useState([]);
+    // Get the menu items that should be rendered
+    const menuItemsToRender = React.useMemo(() => {
+        var _a;
+        let items = props.items;
+        for (const subMenuKey of selectedKeyPath) {
+            items = (_a = items === null || items === void 0 ? void 0 : items.find((item) => item.itemKey === subMenuKey)) === null || _a === void 0 ? void 0 : _a.subMenuProps;
+        }
+        return items;
+    }, [props.items, selectedKeyPath]);
+    // When an item is clicked and it contains a submenu, push the key for the submenu. This will ensure
+    // a new render is triggered, menuItemsToRender will be re-calculated and the submenu will render.
+    const onItemClick = React.useCallback((item, ev, itemKey) => {
+        var _a;
+        if (item.subMenuProps) {
+            setSelectedKeyPath([...selectedKeyPath, item.itemKey]);
+        }
+        (_a = item.onItemClick) === null || _a === void 0 ? void 0 : _a.call(item, ev, itemKey);
+    }, [selectedKeyPath]);
+    // Ensure the first item has a border radius that matches the DrawerSurface
+    const borderRadius = useTheme().effects.roundedCorner4;
+    const firstItemStyle = menuItemsToRender && ((_a = menuItemsToRender[0]) === null || _a === void 0 ? void 0 : _a.styles);
+    const modifiedFirstItemStyle = React.useMemo(() => react.merge(firstItemStyle !== null && firstItemStyle !== void 0 ? firstItemStyle : {}, {
+        root: {
+            borderTopRightRadius: borderRadius,
+            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 },
+        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);
+                } })))), menuItemsToRender === null || menuItemsToRender === void 0 ? void 0 :
+            menuItemsToRender.slice(1).map((item, i) => (React__default['default'].createElement(DrawerMenuItem, Object.assign({}, item, { key: `${i + 1}`, onItemClick: (ev, itemKey) => {
+                    onItemClick(item, ev, itemKey);
+                } })))))));
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/** @private */
+const remoteVideoTileWrapperStyle = {
+    height: '100%',
+    width: '100%',
+    position: 'relative'
+};
+/** @private */
+const drawerMenuWrapperStyles = {
+    root: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        // Any zIndex > 0 will work because this is the only absolutely
+        // positioned element in the container.
+        zIndex: 2
+    }
+};
+
 // Copyright (c) Microsoft Corporation.
 /**
  * Helper hook to maintain the video stream lifecycle. This calls onCreateStreamView and onDisposeStreamView
@@ -8432,6 +8632,7 @@ const _RemoteVideoTile = React__default['default'].memo((props) => {
         return videoTileContextualMenuPropsTrampoline(contextualMenuProps);
     }, [contextualMenuProps, showRemoteVideoTileContextualMenu]);
     const showLoadingIndicator = isAvailable && isReceiving === false && participantState !== 'Disconnected';
+    const [drawerMenuItemProps, setDrawerMenuItemProps] = React__default['default'].useState([]);
     const renderVideoStreamElement = React.useMemo(() => {
         // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which
         // implies that, after their threshold, all streams have no child (blank video)
@@ -8441,12 +8642,18 @@ const _RemoteVideoTile = React__default['default'].memo((props) => {
         }
         return (React__default['default'].createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: showLoadingIndicator ? 'loading' : 'none' }));
     }, [renderElement, showLoadingIndicator]);
-    return (React__default['default'].createElement(VideoTile, Object.assign({ key: userId, userId: userId, renderElement: renderVideoStreamElement, displayName: remoteParticipant.displayName, onRenderPlaceholder: onRenderAvatar, isMuted: remoteParticipant.isMuted, isSpeaking: remoteParticipant.isSpeaking, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, showLabel: props.showLabel, 
-        /* @conditional-compile-remove(one-to-n-calling) */
-        /* @conditional-compile-remove(PSTN-calls) */
-        participantState: participantState }, videoTileContextualMenuProps, { 
-        /* @conditional-compile-remove(pinned-participants) */
-        isPinned: props.isPinned })));
+    return (React__default['default'].createElement(react.Stack, { style: remoteVideoTileWrapperStyle },
+        React__default['default'].createElement(VideoTile, Object.assign({ key: userId, userId: userId, renderElement: renderVideoStreamElement, displayName: remoteParticipant.displayName, onRenderPlaceholder: onRenderAvatar, isMuted: remoteParticipant.isMuted, isSpeaking: remoteParticipant.isSpeaking, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, showLabel: props.showLabel, 
+            /* @conditional-compile-remove(one-to-n-calling) */
+            /* @conditional-compile-remove(PSTN-calls) */
+            participantState: participantState }, videoTileContextualMenuProps, { 
+            /* @conditional-compile-remove(pinned-participants) */
+            isPinned: props.isPinned, 
+            /* @conditional-compile-remove(pinned-participants) */
+            onLongTouch: () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))) })),
+        drawerMenuItemProps.length > 0 && (React__default['default'].createElement(react.Layer, { hostId: props.drawerMenuHostId },
+            React__default['default'].createElement(react.Stack, { styles: drawerMenuWrapperStyles },
+                React__default['default'].createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItemProps([]), items: drawerMenuItemProps }))))));
 });
 const videoTileContextualMenuPropsTrampoline = (contextualMenuProps) => {
     if (!contextualMenuProps) {
@@ -8457,6 +8664,25 @@ const videoTileContextualMenuPropsTrampoline = (contextualMenuProps) => {
         contextualMenu: contextualMenuProps
     };
 };
+/* @conditional-compile-remove(pinned-participants) */
+const convertContextualMenuItemsToDrawerMenuItemProps = (contextualMenuProps, onLightDismiss) => {
+    if (!contextualMenuProps) {
+        return [];
+    }
+    return contextualMenuProps.items.map((item) => {
+        return {
+            itemKey: item.key,
+            text: item.text,
+            iconProps: item.iconProps,
+            disabled: item.disabled,
+            onItemClick: () => {
+                var _a;
+                (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
+                onLightDismiss === null || onLightDismiss === void 0 ? void 0 : onLightDismiss();
+            }
+        };
+    });
+};
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -10032,6 +10258,9 @@ const VideoGallery = (props) => {
     const theme = useTheme();
     const localeStrings = useLocale$1().strings.videoGallery;
     const strings = React.useMemo(() => (Object.assign(Object.assign({}, localeStrings), props.strings)), [localeStrings, props.strings]);
+    // @TODO: Provide a default value to this hook using the `drawerMenuHostId` value in the props when VideoGallery props have been updated.
+    // Example: `const drawerMenuHostId = useId('drawerMenuHost', props.drawerMenuHostId);`
+    const drawerMenuHostId = reactHooks.useId('drawerMenuHost');
     const shouldFloatLocalVideo = !!(layout === 'floatingLocalVideo' && remoteParticipants.length > 0);
     const containerRef = React.useRef(null);
     const containerWidth = _useContainerWidth(containerRef);
@@ -10103,7 +10332,7 @@ const VideoGallery = (props) => {
             /* @conditional-compile-remove(PSTN-calls) */
             participantState: participant.state, 
             /* @conditional-compile-remove(pinned-participants) */
-            showRemoteVideoTileContextualMenu: props.showRemoteVideoTileContextualMenu, 
+            showRemoteVideoTileContextualMenu: props.showRemoteVideoTileContextualMenu, drawerMenuHostId: drawerMenuHostId, 
             /* @conditional-compile-remove(pinned-participants) */
             onPinParticipant: onPinParticipant, 
             /* @conditional-compile-remove(pinned-participants) */
@@ -10117,6 +10346,7 @@ const VideoGallery = (props) => {
         onRenderAvatar,
         showMuteIndicator,
         strings,
+        drawerMenuHostId,
         /* @conditional-compile-remove(pinned-participants) */ props.showRemoteVideoTileContextualMenu,
         /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants,
         /* @conditional-compile-remove(pinned-participants) */ onPinParticipant,
@@ -10168,7 +10398,7 @@ const VideoGallery = (props) => {
         }
         return React__default['default'].createElement(DefaultLayout, Object.assign({}, layoutProps));
     }, [layout, layoutProps]);
-    return (React__default['default'].createElement("div", { "data-ui-id": ids.videoGallery, ref: containerRef, className: react.mergeStyles(videoGalleryOuterDivStyle, styles === null || styles === void 0 ? void 0 : styles.root) }, videoGalleryLayout));
+    return (React__default['default'].createElement("div", { id: drawerMenuHostId, "data-ui-id": ids.videoGallery, ref: containerRef, className: react.mergeStyles(videoGalleryOuterDivStyle, styles === null || styles === void 0 ? void 0 : styles.root) }, videoGalleryLayout));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -10828,7 +11058,7 @@ const primaryTextStyles = {
 /**
  * @internal
  */
-const secondaryTextStyles$2 = {
+const secondaryTextStyles$1 = {
     root: {
         margin: 'auto',
         fontWeight: 400,
@@ -10877,7 +11107,7 @@ const SitePermissionsContainer = (props) => {
                 React__default['default'].createElement(react.Icon, { styles: iconPrimaryStyles, iconName: props.microphoneIconName })))),
         React__default['default'].createElement(react.Stack, { styles: textContainerStyles },
             strings && isValidString(strings === null || strings === void 0 ? void 0 : strings.primaryText) && (React__default['default'].createElement(react.Text, { styles: primaryTextStyles }, appName ? _formatString(strings.primaryText, { appName: appName }) : strings.primaryText)),
-            strings && isValidString(strings === null || strings === void 0 ? void 0 : strings.secondaryText) && (React__default['default'].createElement(react.Text, { styles: secondaryTextStyles$2 }, strings === null || strings === void 0 ? void 0 : strings.secondaryText)),
+            strings && isValidString(strings === null || strings === void 0 ? void 0 : strings.secondaryText) && (React__default['default'].createElement(react.Text, { styles: secondaryTextStyles$1 }, strings === null || strings === void 0 ? void 0 : strings.secondaryText)),
             onPrimaryButtonClick && isValidString(strings === null || strings === void 0 ? void 0 : strings.primaryButtonText) && (React__default['default'].createElement(react.PrimaryButton, { styles: react.mergeStyleSets(primaryButtonStyles, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.primaryButton), text: strings === null || strings === void 0 ? void 0 : strings.primaryButtonText, onClick: onPrimaryButtonClick })),
             onTroubleshootingClick && isValidString(strings === null || strings === void 0 ? void 0 : strings.linkText) && (React__default['default'].createElement(react.Link, { styles: react.mergeStyleSets(linkTextStyles$1, (_b = props.styles) === null || _b === void 0 ? void 0 : _b.troubleshootingLink), onClick: onTroubleshootingClick }, strings === null || strings === void 0 ? void 0 : strings.linkText)))));
 };
@@ -11168,19 +11398,6 @@ const screenshareButtonStyles = (theme) => ({
     labelChecked: { color: react.DefaultPalette.white }
 });
 
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-/**
- * For keyboard navigation - when this component has active focus, enter key and space keys should have the same behavior as mouse click.
- *
- * @private
- */
-const submitWithKeyboard = (e, onSubmit) => {
-    if (e.key === 'Enter' || e.key === ' ') {
-        onSubmit(e);
-    }
-};
-
 // Copyright (c) Microsoft Corporation.
 /** @private */
 const PictureInPictureInPicturePrimaryTile = (props) => {
@@ -11246,171 +11463,6 @@ const secondaryTileFloatingStyles = {
     right: '0.125rem'
 };
 
-// Copyright (c) Microsoft Corporation.
-/**
- * Maps the individual item in menuProps.items passed in the {@link DrawerMenu} into a UI component.
- *
- * @private
- */
-const DrawerMenuItem = (props) => {
-    var _a;
-    const theme = useTheme();
-    const onClick = (ev) => props.onItemClick && props.onItemClick(ev, props.itemKey);
-    const onKeyPress = (ev) => onClick && submitWithKeyboard(ev, onClick);
-    const secondaryIcon = props.secondaryIconProps ? (React__default['default'].createElement(MenuItemIcon, Object.assign({}, props.secondaryIconProps))) : props.subMenuProps ? (React__default['default'].createElement(MenuItemIcon, { iconName: "ChevronRight" })) : undefined;
-    return (React__default['default'].createElement(react.Stack, { tabIndex: 0, role: "menuitem", horizontal: true, className: react.mergeStyles(drawerMenuItemRootStyles(theme.palette.neutralLight, theme.fonts.small), props.disabled ? disabledDrawerMenuItemRootStyles(theme.palette.neutralQuaternaryAlt) : undefined, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root), onKeyPress: props.disabled ? undefined : onKeyPress, onClick: props.disabled ? undefined : onClick, tokens: menuItemChildrenGap, id: props.id },
-        props.iconProps && (React__default['default'].createElement(react.Stack.Item, { role: "presentation", styles: props.disabled ? { root: { color: theme.palette.neutralTertiaryAlt } } : undefined },
-            React__default['default'].createElement(MenuItemIcon, Object.assign({}, props.iconProps)))),
-        React__default['default'].createElement(react.Stack.Item, { styles: drawerMenuItemTextStyles, grow: true },
-            React__default['default'].createElement(react.Text, { styles: props.disabled ? { root: { color: theme.palette.neutralTertiaryAlt } } : undefined }, props.text)),
-        props.secondaryText && (React__default['default'].createElement(react.Stack.Item, { styles: drawerMenuItemTextStyles, className: react.mergeStyles(secondaryTextStyles$1) },
-            React__default['default'].createElement(react.Text, { styles: {
-                    root: { color: props.disabled ? theme.palette.neutralTertiaryAlt : theme.palette.neutralSecondary }
-                } }, props.secondaryText))),
-        secondaryIcon && React__default['default'].createElement(react.Stack.Item, null, secondaryIcon)));
-};
-const MenuItemIcon = (props) => (React__default['default'].createElement(react.FontIcon, Object.assign({ className: react.mergeStyles(iconStyles$1) }, props)));
-const menuItemChildrenGap = { childrenGap: '0.5rem' };
-const drawerMenuItemRootStyles = (hoverBackground, fontSize) => (Object.assign(Object.assign({}, fontSize), { height: '3rem', lineHeight: '3rem', padding: '0rem 0.75rem', cursor: 'pointer', ':hover, :focus': {
-        background: hoverBackground
-    } }));
-const disabledDrawerMenuItemRootStyles = (background) => ({
-    pointerEvents: 'none',
-    background: background,
-    ':hover, :focus': {
-        background: background
-    }
-});
-/** Ensure long text entries appropriately show ellipsis instead of wrapping to a new line or showing a scrollbar */
-const drawerMenuItemTextStyles = {
-    root: {
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap'
-    }
-};
-const iconStyles$1 = {
-    // Vertically center icons in the menu item. Using line-height does not work for centering fluent SVG icons.
-    display: 'flex',
-    alignItems: 'center',
-    height: '100%',
-    // This can be removed when we upgrade to fluent-react-icons v2 (that removes the inner span element)
-    ' span': {
-        display: 'flex',
-        alignItems: 'center',
-        height: '100%'
-    }
-};
-const secondaryTextStyles$1 = {
-    // limit width for secondaryText in the menu item so it does not overlap with text on left.
-    maxWidth: '50%'
-};
-
-// Copyright (c) Microsoft Corporation.
-/**
- * Container that holds the content of the drawer
- *
- * @private
- */
-const DrawerContentContainer = (props) => {
-    var _a;
-    const theme = react.useTheme();
-    const backgroundColor = theme.palette.white;
-    const borderRadius = theme.effects.roundedCorner4;
-    const rootStyles = react.mergeStyles(containerStyles$4(backgroundColor, borderRadius), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root);
-    return React__default['default'].createElement(react.Stack, { className: rootStyles }, props.children);
-};
-const containerStyles$4 = (backgroundColor, borderRadius) => (Object.assign({ background: backgroundColor, borderTopRightRadius: borderRadius, borderTopLeftRadius: borderRadius }, react.AnimationStyles.slideUpIn10));
-
-// Copyright (c) Microsoft Corporation.
-/**
- * An element that fills the space the DrawerContentContainer does not take up.
- * This is the element that enables the light dismiss feature.
- *
- * @private
- */
-const DrawerLightDismiss = (props) => {
-    return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(lightDismissContainerStyles, props.styles), grow: true, onClick: () => props.onDismiss() }));
-};
-const lightDismissContainerStyles = { root: { height: '100%' } };
-
-// Copyright (c) Microsoft Corporation.
-/**
- * A `Drawer` can be used to reveal lightweight views inside your application.
- * They appear from the bottom of the screen upwards and are light-dismissed.
- *
- * @internal
- */
-const _DrawerSurface = (props) => {
-    var _a, _b, _c;
-    const rootStyles = react.mergeStyles(drawerSurfaceStyles, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root);
-    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(react.FocusTrapZone, { onKeyDown: (e) => {
-                if (e.key === 'Escape' || e.key === 'Esc') {
-                    props.onLightDismiss && props.onLightDismiss();
-                }
-            }, 
-            // 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 }, props.children))));
-};
-const drawerSurfaceStyles = {
-    width: '100%',
-    height: '100%',
-    background: 'rgba(0,0,0,0.4)'
-};
-
-// Copyright (c) Microsoft Corporation.
-/**
- * Takes a set of menu items and returns a created menu inside a {@link _DrawerSurface}.
- *
- * @internal
- */
-const _DrawerMenu = (props) => {
-    var _a, _b;
-    // This component breaks from a pure component pattern in order to internally support sub menus.
-    // When a sub menu item is clicked the menu items displayed is updated to be that of the submenu.
-    // To track this state we store a list of the keys clicked up until this point.
-    const [selectedKeyPath, setSelectedKeyPath] = React.useState([]);
-    // Get the menu items that should be rendered
-    const menuItemsToRender = React.useMemo(() => {
-        var _a;
-        let items = props.items;
-        for (const subMenuKey of selectedKeyPath) {
-            items = (_a = items === null || items === void 0 ? void 0 : items.find((item) => item.itemKey === subMenuKey)) === null || _a === void 0 ? void 0 : _a.subMenuProps;
-        }
-        return items;
-    }, [props.items, selectedKeyPath]);
-    // When an item is clicked and it contains a submenu, push the key for the submenu. This will ensure
-    // a new render is triggered, menuItemsToRender will be re-calculated and the submenu will render.
-    const onItemClick = React.useCallback((item, ev, itemKey) => {
-        var _a;
-        if (item.subMenuProps) {
-            setSelectedKeyPath([...selectedKeyPath, item.itemKey]);
-        }
-        (_a = item.onItemClick) === null || _a === void 0 ? void 0 : _a.call(item, ev, itemKey);
-    }, [selectedKeyPath]);
-    // Ensure the first item has a border radius that matches the DrawerSurface
-    const borderRadius = useTheme().effects.roundedCorner4;
-    const firstItemStyle = menuItemsToRender && ((_a = menuItemsToRender[0]) === null || _a === void 0 ? void 0 : _a.styles);
-    const modifiedFirstItemStyle = React.useMemo(() => react.merge(firstItemStyle !== null && firstItemStyle !== void 0 ? firstItemStyle : {}, {
-        root: {
-            borderTopRightRadius: borderRadius,
-            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 },
-        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);
-                } })))), menuItemsToRender === null || menuItemsToRender === void 0 ? void 0 :
-            menuItemsToRender.slice(1).map((item, i) => (React__default['default'].createElement(DrawerMenuItem, Object.assign({}, item, { key: `${i + 1}`, onItemClick: (ev, itemKey) => {
-                    onItemClick(item, ev, itemKey);
-                } })))))));
-};
-
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 /**
@@ -18387,7 +18439,7 @@ const CallArrangement = (props) => {
     if (!rolePermissions.cameraButton && props.errorBarProps) {
         errorBarProps = Object.assign(Object.assign({}, props.errorBarProps), { activeErrorMessages: props.errorBarProps.activeErrorMessages.filter((e) => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari') });
     }
-    return (React__default['default'].createElement("div", { ref: containerRef, className: react.mergeStyles(containerDivStyles) },
+    return (React__default['default'].createElement("div", { ref: containerRef, className: react.mergeStyles(containerDivStyles), id: props.id },
         React__default['default'].createElement(react.Stack, { verticalFill: true, horizontalAlign: "stretch", className: containerClassName, "data-ui-id": props.dataUiId },
             React__default['default'].createElement(react.Stack, { grow: true, styles: callArrangementContainerStyles },
                 React__default['default'].createElement(react.Stack.Item, { styles: notificationsContainerStyles },
@@ -18601,7 +18653,7 @@ const MediaGallery = (props) => {
         return (React__default['default'].createElement(VideoGallery, Object.assign({}, videoGalleryProps, { localVideoViewOptions: localVideoViewOptions$2, remoteVideoViewOptions: remoteVideoViewOptions, styles: VideoGalleryStyles, layout: "floatingLocalVideo", showCameraSwitcherInLocalPreview: props.isMobile, localVideoCameraCycleButtonProps: cameraSwitcherProps, onRenderAvatar: onRenderAvatar, 
             /* @conditional-compile-remove(pinned-participants) */
             showRemoteVideoTileContextualMenu: !props.isMobile })));
-    }, [videoGalleryProps, props.isMobile, onRenderAvatar, cameraSwitcherProps]);
+    }, [videoGalleryProps, props.isMobile, cameraSwitcherProps, onRenderAvatar]);
     return (React__default['default'].createElement(React__default['default'].Fragment, null,
         React__default['default'].createElement(Announcer, { announcementString: announcerString, ariaLive: 'polite' }),
         VideoGalleryMemoized));
@@ -18820,7 +18872,8 @@ const CallPage = (props) => {
     const strings = useLocale().strings.call;
     // Reduce the controls shown when mobile view is enabled.
     const callControlOptions = mobileView ? reduceCallControlsForMobile(options === null || options === void 0 ? void 0 : options.callControls) : options === null || options === void 0 ? void 0 : options.callControls;
-    return (React__default['default'].createElement(CallArrangement, { complianceBannerProps: Object.assign(Object.assign({}, complianceBannerProps), { strings }), 
+    const drawerMenuHostId = reactHooks.useId('drawerMenuHost');
+    return (React__default['default'].createElement(CallArrangement, { id: drawerMenuHostId, complianceBannerProps: Object.assign(Object.assign({}, complianceBannerProps), { strings }), 
         // Ignore errors from before current call. This avoids old errors from showing up when a user re-joins a call.
         errorBarProps: (options === null || options === void 0 ? void 0 : options.errorBar) !== false && Object.assign(Object.assign({}, errorBarProps), { ignorePremountErrors: true }), mutedNotificationProps: mutedNotificationProps, callControlProps: {
             callInvitationURL: callInvitationURL,
@@ -18831,7 +18884,7 @@ const CallPage = (props) => {
         /* @conditional-compile-remove(one-to-n-calling) */
         onFetchAvatarPersonaData: onFetchAvatarPersonaData, mobileView: mobileView, 
         /* @conditional-compile-remove(one-to-n-calling) */
-        modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => _isInCall(callStatus) ? (isNetworkHealthy(networkReconnectTileProps.networkReconnectValue) ? (React__default['default'].createElement(MediaGallery, Object.assign({ isMobile: mobileView }, mediaGalleryProps, mediaGalleryHandlers, { onRenderAvatar: onRenderAvatar, onFetchAvatarPersonaData: onFetchAvatarPersonaData }))) : (React__default['default'].createElement(NetworkReconnectTile, Object.assign({}, networkReconnectTileProps)))) : (React__default['default'].createElement(React__default['default'].Fragment, null)), dataUiId: 'call-page' }));
+        modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => _isInCall(callStatus) ? (isNetworkHealthy(networkReconnectTileProps.networkReconnectValue) ? (React__default['default'].createElement(MediaGallery, Object.assign({ isMobile: mobileView }, mediaGalleryProps, mediaGalleryHandlers, { onRenderAvatar: onRenderAvatar, onFetchAvatarPersonaData: onFetchAvatarPersonaData, drawerMenuHostId: drawerMenuHostId }))) : (React__default['default'].createElement(NetworkReconnectTile, Object.assign({}, networkReconnectTileProps)))) : (React__default['default'].createElement(React__default['default'].Fragment, null)), dataUiId: 'call-page' }));
 };
 /**
  * @private
@@ -18917,10 +18970,7 @@ const ConfigurationPageCameraDropdown = (props) => {
     /* @conditional-compile-remove(call-readiness) */
     const cameraBlockedDropdown = (React__default['default'].createElement(_DevicePermissionDropdown, Object.assign({}, props.dropdownProps, { styles: dropDownStyles(theme), constrain: { video: true, audio: false }, strings: devicePermissionDropdownStringsCamera, icon: React__default['default'].createElement(CallCompositeIcon, { iconName: "ControlButtonCameraOn", style: { height: '1.25rem', marginRight: '0.625rem' } }), onClick: props.onClickEnableDevicePermission })));
     /* @conditional-compile-remove(call-readiness) */
-    if (props.callReadinessOptedIn) {
-        return React__default['default'].createElement(React__default['default'].Fragment, null, props.cameraPermissionGranted ? props.cameraGrantedDropdown : cameraBlockedDropdown);
-    }
-    return props.cameraGrantedDropdown;
+    return props.cameraPermissionGranted ? props.cameraGrantedDropdown : cameraBlockedDropdown;
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -18938,12 +18988,7 @@ const ConfigurationPageMicDropdown = (props) => {
     /* @conditional-compile-remove(call-readiness) */
     const microphoneBlockedDropdown = (React__default['default'].createElement(_DevicePermissionDropdown, Object.assign({}, props.dropdownProps, { styles: dropDownStyles(theme), constrain: { video: false, audio: true }, strings: devicePermissionDropdownStringsMicrophone, icon: React__default['default'].createElement(CallCompositeIcon, { iconName: "ControlButtonMicOn", style: { height: '1.25rem', marginRight: '0.625rem' } }), onClick: props.onClickEnableDevicePermission })));
     /* @conditional-compile-remove(call-readiness) */
-    if (props.callReadinessOptedIn) {
-        return React__default['default'].createElement(React__default['default'].Fragment, null,
-            " ",
-            props.micPermissionGranted ? props.micGrantedDropdown : microphoneBlockedDropdown);
-    }
-    return props.micGrantedDropdown;
+    return props.micPermissionGranted ? props.micGrantedDropdown : microphoneBlockedDropdown;
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -18990,7 +19035,7 @@ const localVideoViewOptions = {
  * @private
  */
 const LocalDeviceSettings = (props) => {
-    var _a, _b, _c;
+    var _a;
     const theme = useTheme();
     const locale = useLocale();
     /* @conditional-compile-remove(call-readiness) */
@@ -19056,8 +19101,6 @@ const LocalDeviceSettings = (props) => {
                 /* @conditional-compile-remove(call-readiness) */
                 dropdownProps: dropdownProps, 
                 /* @conditional-compile-remove(call-readiness) */
-                callReadinessOptedIn: (_b = props.callReadinessOptedIn) !== null && _b !== void 0 ? _b : false, 
-                /* @conditional-compile-remove(call-readiness) */
                 onClickEnableDevicePermission: props.onClickEnableDevicePermission }))),
         React__default['default'].createElement(react.Stack, null,
             React__default['default'].createElement(react.Label, { id: 'call-composite-local-sound-settings-label', className: react.mergeStyles(dropDownStyles(theme).label), disabled: !micPermissionGranted }, soundLabel),
@@ -19066,8 +19109,6 @@ const LocalDeviceSettings = (props) => {
                     /* @conditional-compile-remove(call-readiness) */
                     dropdownProps: dropdownProps, 
                     /* @conditional-compile-remove(call-readiness) */
-                    callReadinessOptedIn: (_c = props.callReadinessOptedIn) !== null && _c !== void 0 ? _c : false, 
-                    /* @conditional-compile-remove(call-readiness) */
                     onClickEnableDevicePermission: props.onClickEnableDevicePermission }),
                 React__default['default'].createElement(react.Dropdown, { "aria-labelledby": 'call-composite-local-sound-settings-label', placeholder: hasSpeakers ? defaultPlaceHolder : noSpeakersLabel, styles: dropDownStyles(theme), disabled: props.speakers.length === 0, options: getDropDownList(props.speakers), defaultSelectedKey: props.selectedSpeaker ? props.selectedSpeaker.id : defaultDeviceId(props.speakers), onChange: (event, option, index) => {
                         props.onSelectSpeaker(props.speakers[index !== null && index !== void 0 ? index : 0]);
@@ -19339,9 +19380,7 @@ const ConfigurationPageErrorBar = (props) => {
     /* @conditional-compile-remove(call-readiness) */
     onNetworkingTroubleShootingClick, 
     /* @conditional-compile-remove(call-readiness) */
-    permissionsState, 
-    /* @conditional-compile-remove(call-readiness) */
-    callReadinessOptedIn = false } = props;
+    permissionsState } = props;
     /* @conditional-compile-remove(call-readiness) */
     const permissionTroubleshootingGuideStrings = {
         devicePermissionLinkText: 'Troubleshooting Camera and Microphone Permissions',
@@ -19349,7 +19388,7 @@ const ConfigurationPageErrorBar = (props) => {
         dismissButtonText: 'OK'
     };
     /* @conditional-compile-remove(call-readiness) */
-    if (showTroubleShootingErrorBar && callReadinessOptedIn) {
+    if (showTroubleShootingErrorBar) {
         return (React__default['default'].createElement(_TroubleshootingGuideErrorBar, Object.assign({ troubleshootingGuideStrings: permissionTroubleshootingGuideStrings, onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick, onNetworkingTroubleshootingClick: onNetworkingTroubleShootingClick, permissionsState: permissionsState }, errorBarProps)));
     }
     return React__default['default'].createElement(ErrorBar, Object.assign({}, errorBarProps));
@@ -19548,8 +19587,7 @@ const ConfigurationPage = (props) => {
     const { startCallHandler, mobileView, 
     /* @conditional-compile-remove(call-readiness) */ deviceChecks, 
     /* @conditional-compile-remove(call-readiness) */ onPermissionsTroubleshootingClick, 
-    /* @conditional-compile-remove(call-readiness) */ onNetworkingTroubleShootingClick, 
-    /* @conditional-compile-remove(call-readiness) */ callReadinessOptedIn = false } = props;
+    /* @conditional-compile-remove(call-readiness) */ onNetworkingTroubleShootingClick } = props;
     const options = useAdaptedSelector(getSelector$1(DevicesButton));
     const localDeviceSettingsHandlers = useHandlers();
     const { video: cameraPermissionGranted, audio: microphonePermissionGranted } = useSelector$1(devicePermissionSelector);
@@ -19646,24 +19684,15 @@ const ConfigurationPage = (props) => {
                 /* @conditional-compile-remove(call-readiness) */
                 onNetworkingTroubleShootingClick: onNetworkingTroubleShootingClick, 
                 /* @conditional-compile-remove(call-readiness) */
-                onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick, errorBarProps: errorBarProps, 
-                /* @conditional-compile-remove(call-readiness) */
-                callReadinessOptedIn: callReadinessOptedIn })),
+                onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick, errorBarProps: errorBarProps })),
         /* @conditional-compile-remove(call-readiness) */
         // show the following screen if permission API is availible (not unsupported) and videoState, audioState is assigned values
-        callReadinessOptedIn &&
-            videoState &&
-            videoState !== 'unsupported' &&
-            audioState &&
-            audioState !== 'unsupported' && (React__default['default'].createElement(CallReadinessModal, { mobileView: mobileView, 
+        videoState && videoState !== 'unsupported' && audioState && audioState !== 'unsupported' && (React__default['default'].createElement(CallReadinessModal, { mobileView: mobileView, 
             /* @conditional-compile-remove(unsupported-browser) */
             environmentInfo: environmentInfo, permissionsState: permissionsState, isPermissionsModalDismissed: isPermissionsModalDismissed, setIsPermissionsModalDismissed: setIsPermissionsModalDismissed, onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick })),
         /* @conditional-compile-remove(call-readiness) */
         // show the following screen if permission API is not availible (unsupported) and videoState, audioState is assigned values
-        callReadinessOptedIn &&
-            videoState &&
-            audioState &&
-            (videoState === 'unsupported' || audioState === 'unsupported') && (React__default['default'].createElement(CallReadinessModalFallBack, { mobileView: mobileView, checkPermissionModalShowing: forceShowingCheckPermissions, permissionsState: permissionsState, isPermissionsModalDismissed: isPermissionsModalDismissed, 
+        videoState && audioState && (videoState === 'unsupported' || audioState === 'unsupported') && (React__default['default'].createElement(CallReadinessModalFallBack, { mobileView: mobileView, checkPermissionModalShowing: forceShowingCheckPermissions, permissionsState: permissionsState, isPermissionsModalDismissed: isPermissionsModalDismissed, 
             /* @conditional-compile-remove(unsupported-browser) */
             environmentInfo: environmentInfo, setIsPermissionsModalDismissed: setIsPermissionsModalDismissed, onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick })),
         React__default['default'].createElement(react.Stack, { grow: true, horizontal: !mobileWithPreview, horizontalAlign: mobileWithPreview ? 'stretch' : 'center', verticalAlign: "center", tokens: mobileWithPreview ? configurationStackTokensMobile : configurationStackTokensDesktop },
@@ -19681,8 +19710,6 @@ const ConfigurationPage = (props) => {
                         /* @conditional-compile-remove(call-readiness) */ videoState), microphonePermissionGranted: micPermissionGrantedTrampoline(microphonePermissionGranted, 
                         /* @conditional-compile-remove(call-readiness) */ audioState), 
                         /* @conditional-compile-remove(call-readiness) */
-                        callReadinessOptedIn: callReadinessOptedIn, 
-                        /* @conditional-compile-remove(call-readiness) */
                         onClickEnableDevicePermission: () => {
                             setIsPermissionsModalDismissed(true);
                         } })))),
@@ -20124,7 +20151,7 @@ var __awaiter$5 = (window && window.__awaiter) || function (thisArg, _arguments,
     });
 };
 const MainScreen = (props) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d;
     const { callInvitationUrl, onRenderAvatar, onFetchAvatarPersonaData, onFetchParticipantMenuItems } = props;
     const page = useSelector$1(getPage);
     const adapter = useAdapter();
@@ -20151,9 +20178,7 @@ const MainScreen = (props) => {
                 /* @conditional-compile-remove(call-readiness) */
                 onPermissionsTroubleshootingClick: (_b = props.options) === null || _b === void 0 ? void 0 : _b.onPermissionsTroubleshootingClick, 
                 /* @conditional-compile-remove(call-readiness) */
-                onNetworkingTroubleShootingClick: (_c = props.options) === null || _c === void 0 ? void 0 : _c.onNetworkingTroubleShootingClick, 
-                /* @conditional-compile-remove(call-readiness) */
-                callReadinessOptedIn: (_d = props.options) === null || _d === void 0 ? void 0 : _d.callReadinessOptedIn }));
+                onNetworkingTroubleShootingClick: (_c = props.options) === null || _c === void 0 ? void 0 : _c.onNetworkingTroubleShootingClick }));
             break;
         case 'accessDeniedTeamsMeeting':
             pageElement = (React__default['default'].createElement(NoticePage, { iconName: "NoticePageAccessDeniedTeamsMeeting", title: locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedTitle, moreDetails: locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails, dataUiId: 'access-denied-teams-meeting-page' }));
@@ -20188,7 +20213,7 @@ const MainScreen = (props) => {
         case 'unsupportedEnvironment':
             pageElement = (React__default['default'].createElement(React__default['default'].Fragment, null, 
             /* @conditional-compile-remove(unsupported-browser) */
-            React__default['default'].createElement(UnsupportedBrowserPage, { onTroubleshootingClick: (_e = props.options) === null || _e === void 0 ? void 0 : _e.onEnvironmentInfoTroubleshootingClick, environmentInfo: adapter.getState().environmentInfo })));
+            React__default['default'].createElement(UnsupportedBrowserPage, { onTroubleshootingClick: (_d = props.options) === null || _d === void 0 ? void 0 : _d.onEnvironmentInfoTroubleshootingClick, environmentInfo: adapter.getState().environmentInfo })));
             break;
     }
     if (!pageElement) {
@@ -22299,16 +22324,12 @@ const CallWithChatScreen = (props) => {
         /* @conditional-compile-remove(call-readiness) */
         deviceChecks: props.deviceChecks,
         /* @conditional-compile-remove(call-readiness) */
-        callReadinessOptedIn: props.callReadinessOptedIn,
-        /* @conditional-compile-remove(call-readiness) */
         onNetworkingTroubleShootingClick: props.onNetworkingTroubleShootingClick,
         /* @conditional-compile-remove(call-readiness) */
         onPermissionsTroubleshootingClick: props.onPermissionsTroubleshootingClick,
         /* @conditional-compile-remove(unsupported-browser) */
         onEnvironmentInfoTroubleshootingClick: props.onEnvironmentInfoTroubleshootingClick
     }), [
-        /* @conditional-compile-remove(call-readiness) */
-        props.callReadinessOptedIn,
         /* @conditional-compile-remove(call-readiness) */
         props.deviceChecks,
         /* @conditional-compile-remove(unsupported-browser) */
@@ -22363,9 +22384,7 @@ const CallWithChatComposite = (props) => {
     return (React__default['default'].createElement(BaseProvider, { fluentTheme: fluentTheme, rtl: rtl, locale: props.locale, icons: props.icons },
         React__default['default'].createElement(CallWithChatScreen, Object.assign({}, props, { 
             /* @conditional-compile-remove(call-readiness) */
-            deviceChecks: options === null || options === void 0 ? void 0 : options.deviceChecks, 
-            /* @conditional-compile-remove(call-readiness) */
-            callReadinessOptedIn: options === null || options === void 0 ? void 0 : options.callReadinessOptedIn, callWithChatAdapter: adapter, formFactor: formFactor, callControls: options === null || options === void 0 ? void 0 : options.callControls, joinInvitationURL: joinInvitationURL, fluentTheme: fluentTheme, 
+            deviceChecks: options === null || options === void 0 ? void 0 : options.deviceChecks, callWithChatAdapter: adapter, formFactor: formFactor, callControls: options === null || options === void 0 ? void 0 : options.callControls, joinInvitationURL: joinInvitationURL, fluentTheme: fluentTheme, 
             /* @conditional-compile-remove(file-sharing) */
             fileSharing: options === null || options === void 0 ? void 0 : options.fileSharing }))));
 };