@azure/communication-react 1.4.3-alpha-202301050013.0 → 1.4.3-alpha-202301070013.0

package/dist/communication-react.d.ts

@@ -26,6 +26,7 @@ import { CallClientOptions } from '@azure/communication-calling';
 import { CallDirection } from '@azure/communication-calling';
 import { CallEndReason } from '@azure/communication-calling';
 import { CallerInfo } from '@azure/communication-calling';
+import { CallKind } from '@azure/communication-calling';
 import { CallState as CallState_2 } from '@azure/communication-calling';
 import { ChatClient } from '@azure/communication-chat';
 import { ChatClientOptions } from '@azure/communication-chat';
@@ -1887,7 +1888,7 @@ export declare interface CallState {
     /**
      * Type of the call.
      */
-    type: 'Teams' | 'ACS';
+    kind: CallKind;
     /**
      * Proxy of {@link @azure/communication-calling#Call.callerInfo}.
      */
@@ -7838,7 +7839,7 @@ export declare interface UnsupportedBrowserProps {
     /** Handler to perform an action when the help link is actioned */
     onTroubleshootingClick?: () => void;
     /** String overrides for the component */
-    strings: UnsupportedBrowserStrings;
+    strings?: UnsupportedBrowserStrings;
 }
 
 /**
@@ -7909,7 +7910,7 @@ export declare interface UnsupportedOperatingSystemProps {
     /** Handler to perform a action when the help link is actioned */
     onTroubleshootingClick?: () => void;
     /** String overrides for the component */
-    strings: UnsupportedOperatingSystemStrings;
+    strings?: UnsupportedOperatingSystemStrings;
 }
 
 /**

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

@@ -123,12 +123,6 @@ const memoizeFnAll = (fnToMemoize, shouldCacheUpdate = Object.is) => {
 };
 
 // Copyright (c) Microsoft Corporation.
-const COMMUNICATION_USER_PREFIX = '8:acs:';
-const PHONE_NUMBER_PREFIX = '4:';
-const TEAMS_DOD_PREFIX = '8:dod:';
-const TEAMS_GCCH_PREFIX = '8:gcch:';
-const TEAMS_USER_PREFIX = '8:orgid:';
-const TEAMS_VISITOR_PREFIX = '8:teamsvisitor:';
 /**
  * A string representation of a {@link @azure/communication-common#CommunicationIdentifier}.
  *
@@ -140,25 +134,7 @@ const TEAMS_VISITOR_PREFIX = '8:teamsvisitor:';
  * @public
  */
 const toFlatCommunicationIdentifier = (identifier) => {
-    if (communicationCommon.isCommunicationUserIdentifier(identifier)) {
-        return identifier.communicationUserId;
-    }
-    if (communicationCommon.isMicrosoftTeamsUserIdentifier(identifier)) {
-        if (identifier.isAnonymous) {
-            return TEAMS_VISITOR_PREFIX + identifier.microsoftTeamsUserId;
-        }
-        if (identifier.cloud === 'dod') {
-            return TEAMS_DOD_PREFIX + identifier.microsoftTeamsUserId;
-        }
-        if (identifier.cloud === 'gcch') {
-            return TEAMS_GCCH_PREFIX + identifier.microsoftTeamsUserId;
-        }
-        return TEAMS_USER_PREFIX + identifier.microsoftTeamsUserId;
-    }
-    if (communicationCommon.isPhoneNumberIdentifier(identifier)) {
-        return PHONE_NUMBER_PREFIX + identifier.phoneNumber;
-    }
-    return identifier.id;
+    return communicationCommon.getIdentifierRawId(identifier);
 };
 /**
  * Reverse operation of {@link toFlatCommunicationIdentifier}.
@@ -166,27 +142,7 @@ const toFlatCommunicationIdentifier = (identifier) => {
  * @public
  */
 const fromFlatCommunicationIdentifier = (id) => {
-    if (id.startsWith(COMMUNICATION_USER_PREFIX)) {
-        // The prefix is preserved for this variant of the identifier.
-        return { communicationUserId: id };
-    }
-    if (id.startsWith(PHONE_NUMBER_PREFIX) || id.startsWith('+')) {
-        const isPhoneNumber = id.startsWith(PHONE_NUMBER_PREFIX) ? id.replace(PHONE_NUMBER_PREFIX, '') : id;
-        return { phoneNumber: isPhoneNumber };
-    }
-    if (id.startsWith(TEAMS_USER_PREFIX)) {
-        return { microsoftTeamsUserId: id.replace(TEAMS_USER_PREFIX, '') };
-    }
-    if (id.startsWith(TEAMS_DOD_PREFIX)) {
-        return { microsoftTeamsUserId: id.replace(TEAMS_DOD_PREFIX, ''), cloud: 'dod' };
-    }
-    if (id.startsWith(TEAMS_GCCH_PREFIX)) {
-        return { microsoftTeamsUserId: id.replace(TEAMS_GCCH_PREFIX, ''), cloud: 'gcch' };
-    }
-    if (id.startsWith(TEAMS_VISITOR_PREFIX)) {
-        return { microsoftTeamsUserId: id.replace(TEAMS_VISITOR_PREFIX, ''), isAnonymous: true };
-    }
-    return { id };
+    return communicationCommon.createIdentifierFromRawId(id);
 };
 /**
  * Returns a CommunicationIdentifier.
@@ -202,7 +158,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-202301050013.0';
+var telemetryVersion = '1.4.3-alpha-202301070013.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -1886,7 +1842,7 @@ function convertSdkCallToDeclarativeCall(call) {
     return {
         id: call.id,
         /* @conditional-compile-remove(teams-identity-support) */
-        type: _isACSCall(call) ? 'ACS' : 'Teams',
+        kind: _isACSCall(call) ? 'Call' : 'TeamsCall',
         callerInfo: call.callerInfo,
         state: call.state,
         callEndReason: call.callEndReason,
@@ -7609,13 +7565,15 @@ const ParticipantItem = (props) => {
     const localeStrings = useLocale$1().strings.participantItem;
     const ids = useIdentifiers();
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
+    // For 'me' show empty name so avatar will get 'Person' icon, when there is no name
+    const meAvatarText = (displayName === null || displayName === void 0 ? void 0 : displayName.trim()) || '';
     const avatarOptions = {
-        text: (displayName === null || displayName === void 0 ? void 0 : displayName.trim()) || strings.displayNamePlaceholder,
+        text: me ? meAvatarText : (displayName === null || displayName === void 0 ? void 0 : displayName.trim()) || strings.displayNamePlaceholder,
         size: react.PersonaSize.size32,
         presence: presence,
         initialsTextColor: 'white',
         showOverflowTooltip: showParticipantOverflowTooltip,
-        showUnknownPersonaCoin: !(displayName === null || displayName === void 0 ? void 0 : displayName.trim()) || displayName === strings.displayNamePlaceholder
+        showUnknownPersonaCoin: !me && (!(displayName === null || displayName === void 0 ? void 0 : displayName.trim()) || displayName === strings.displayNamePlaceholder)
     };
     const avatar = onRenderAvatar ? (onRenderAvatar(userId !== null && userId !== void 0 ? userId : '', avatarOptions)) : (React__default['default'].createElement(react.Persona, Object.assign({ className: react.mergeStyles({
             // Prevents persona text from being vertically truncated if a global line height is less than 1.15.
@@ -8519,7 +8477,7 @@ const VideoTile = (props) => {
     ]);
     const placeholderOptions = {
         userId,
-        text: initialsName || displayName,
+        text: initialsName !== null && initialsName !== void 0 ? initialsName : displayName,
         noVideoAvailableAriaLabel,
         coinSize: personaSize,
         styles: defaultPersonaStyles,
@@ -8530,21 +8488,21 @@ const VideoTile = (props) => {
     const ids = useIdentifiers();
     const canShowLabel = showLabel && (displayName || (showMuteIndicator && isMuted));
     const participantStateString = participantStateStringTrampoline(props, locale);
-    return (React__default['default'].createElement(reactNorthstar.Ref, { innerRef: videoTileRef },
-        React__default['default'].createElement(react.Stack, Object.assign({ "data-ui-id": ids.videoTile, className: react.mergeStyles(rootStyles, {
-                background: theme.palette.neutralLighter,
-                borderRadius: theme.effects.roundedCorner4
-            }, isSpeaking && {
-                '&::before': {
-                    content: `''`,
-                    position: 'absolute',
-                    zIndex: 1,
-                    border: `0.25rem solid ${theme.palette.themePrimary}`,
-                    borderRadius: theme.effects.roundedCorner4,
-                    width: '100%',
-                    height: '100%'
-                }
-            }, styles === null || styles === void 0 ? void 0 : styles.root) }, longPressHandlersTrampoline),
+    return (React__default['default'].createElement(react.Stack, Object.assign({ "data-ui-id": ids.videoTile, className: react.mergeStyles(rootStyles, {
+            background: theme.palette.neutralLighter,
+            borderRadius: theme.effects.roundedCorner4
+        }, isSpeaking && {
+            '&::before': {
+                content: `''`,
+                position: 'absolute',
+                zIndex: 1,
+                border: `0.25rem solid ${theme.palette.themePrimary}`,
+                borderRadius: theme.effects.roundedCorner4,
+                width: '100%',
+                height: '100%'
+            }
+        }, styles === null || styles === void 0 ? void 0 : styles.root) }, longPressHandlersTrampoline),
+        React__default['default'].createElement("div", { ref: videoTileRef, style: { width: '100%', height: '100%' } },
             isVideoRendered ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(videoContainerStyles, isMirrored && { transform: 'scaleX(-1)' }, styles === null || styles === void 0 ? void 0 : styles.videoContainer) }, renderElement)) : (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(videoContainerStyles), style: { opacity: participantStateString ? 0.4 : 1 } }, 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 },
@@ -10288,7 +10246,7 @@ const VideoGallery = (props) => {
         const localVideoTileStyles = react.concatStyleSets(shouldFloatLocalVideo ? floatingLocalVideoTileStyle : {}, {
             root: { borderRadius: theme.effects.roundedCorner4 }
         }, styles === null || styles === void 0 ? void 0 : styles.localVideo);
-        const initialsName = !localParticipant.displayName ? strings.displayNamePlaceholder : localParticipant.displayName;
+        const initialsName = !localParticipant.displayName ? '' : localParticipant.displayName;
         return (React__default['default'].createElement(react.Stack, { key: "local-video-tile-key", tabIndex: 0, "aria-label": strings.localVideoMovementLabel, role: 'dialog' },
             React__default['default'].createElement(_LocalVideoTile, { userId: localParticipant.userId, onCreateLocalStreamView: onCreateLocalStreamView, onDisposeLocalStreamView: onDisposeLocalStreamView, isAvailable: (_a = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable, isMuted: localParticipant.isMuted, renderElement: (_b = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement, displayName: isNarrow ? '' : strings.localVideoLabel, initialsName: initialsName, localVideoViewOptions: localVideoViewOptions, onRenderAvatar: onRenderAvatar, showLabel: !(shouldFloatLocalVideo && isNarrow), showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles })));
     }, [
@@ -10307,7 +10265,6 @@ const VideoGallery = (props) => {
         strings.localVideoLabel,
         strings.localVideoMovementLabel,
         strings.localVideoSelectedDescription,
-        strings.displayNamePlaceholder,
         styles === null || styles === void 0 ? void 0 : styles.localVideo,
         theme.effects.roundedCorner4,
         /* @conditional-compile-remove(rooms) */ permissions.cameraButton
@@ -12117,7 +12074,12 @@ const UnsupportedEnvironment = (props) => {
  */
 const UnsupportedBrowser = (props) => {
     const { onTroubleshootingClick, strings } = props;
-    return React__default['default'].createElement(UnsupportedEnvironment, { onTroubleshootingClick: onTroubleshootingClick, strings: strings });
+    const locale = useLocale$1();
+    return (React__default['default'].createElement(UnsupportedEnvironment, { onTroubleshootingClick: onTroubleshootingClick, strings: Object.assign(Object.assign({}, unsupportedBrowserStringsTrampoline(locale)), strings) }));
+};
+const unsupportedBrowserStringsTrampoline = (locale) => {
+    /* @conditional-compile-remove(unsupported-browser) */
+    return locale.strings.UnsupportedBrowser;
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -12129,7 +12091,12 @@ const UnsupportedBrowser = (props) => {
  */
 const UnsupportedBrowserVersion = (props) => {
     const { onTroubleshootingClick, strings, onContinueAnywayClick } = props;
-    return (React__default['default'].createElement(UnsupportedEnvironment, { onTroubleshootingClick: onTroubleshootingClick, strings: strings, onContinueAnywayClick: onContinueAnywayClick }));
+    const locale = useLocale$1();
+    return (React__default['default'].createElement(UnsupportedEnvironment, { onTroubleshootingClick: onTroubleshootingClick, strings: Object.assign(Object.assign({}, unsupportedBrowserVersionStringsTrampoline(locale)), strings), onContinueAnywayClick: onContinueAnywayClick }));
+};
+const unsupportedBrowserVersionStringsTrampoline = (locale) => {
+    /* @conditional-compile-remove(unsupported-browser) */
+    return locale.strings.UnsupportedBrowserVersion;
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -12140,7 +12107,12 @@ const UnsupportedBrowserVersion = (props) => {
  */
 const UnsupportedOperatingSystem = (props) => {
     const { onTroubleshootingClick, strings } = props;
-    return React__default['default'].createElement(UnsupportedEnvironment, { onTroubleshootingClick: onTroubleshootingClick, strings: strings });
+    const locale = useLocale$1();
+    return (React__default['default'].createElement(UnsupportedEnvironment, { onTroubleshootingClick: onTroubleshootingClick, strings: Object.assign(Object.assign({}, unsupportedOperatingSystemStringsTrampoline(locale)), strings) }));
+};
+const unsupportedOperatingSystemStringsTrampoline = (locale) => {
+    /* @conditional-compile-remove(unsupported-browser) */
+    return locale.strings.UnsupportedOperatingSystem;
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -17669,6 +17641,7 @@ const modalLayerHostStyle = {
     width: '100%',
     height: '100%',
     overflow: 'hidden',
+    zIndex: '100000',
     // pointer events for layerHost set to none to make descendants interactive
     pointerEvents: 'none'
 };
@@ -18573,7 +18546,7 @@ const createAnnouncmentString = (direction, participants, strings) => {
      * Filter participants into two arrays to put all the unnamed participants at the back of the
      * names being announced.
      */
-    const unnamedParticipants = participants.filter((p) => p.displayName === undefined);
+    const unnamedParticipants = participants.filter((p) => !p.displayName);
     const namedParicipants = participants.filter((p) => p.displayName);
     const sortedParticipants = namedParicipants.concat(unnamedParticipants);
     /**
@@ -19487,7 +19460,10 @@ const CallReadinessModal = (props) => {
         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()))));
     }
     else if (!mobileView && modal !== undefined) {
-        return (React__default['default'].createElement(react.Modal, { isOpen: isPermissionsModalDismissed, isBlocking: false, onDismiss: () => {
+        return (React__default['default'].createElement(_ModalClone, { styles: {
+                root: { position: 'unset' },
+                main: { position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }
+            }, layerProps: { hostId: props.modalLayerHostId }, isOpen: isPermissionsModalDismissed, isBlocking: false, onDismiss: () => {
                 setIsPermissionsModalDismissed(false);
             }, overlay: { styles: { root: { background: 'rgba(0,0,0,0.9)' } } } }, modal()));
     }
@@ -19562,7 +19538,10 @@ const CallReadinessModalFallBack = (props) => {
     }
     else {
         return (React__default['default'].createElement(React__default['default'].Fragment, null,
-            (checkPermissionModalShowing || audioState === 'prompt' || videoState === 'prompt') && (React__default['default'].createElement(react.Modal, { isOpen: isPermissionsModalDismissed, isBlocking: false, onDismiss: () => {
+            (checkPermissionModalShowing || audioState === 'prompt' || videoState === 'prompt') && (React__default['default'].createElement(_ModalClone, { styles: {
+                    root: { position: 'unset' },
+                    main: { position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }
+                }, layerProps: { hostId: props.modalLayerHostId }, isOpen: isPermissionsModalDismissed, isBlocking: false, onDismiss: () => {
                     setIsPermissionsModalDismissed(false);
                 }, overlay: { styles: { root: { background: 'rgba(0,0,0,0.9)' } } } },
                 React__default['default'].createElement(CameraAndMicrophoneSitePermissions, { appName: 'app', 
@@ -19572,7 +19551,10 @@ const CallReadinessModalFallBack = (props) => {
                             onPermissionsTroubleshootingClick(permissionsState);
                         }
                         : undefined, type: "check" }))),
-            !checkPermissionModalShowing && modal !== undefined && (React__default['default'].createElement(react.Modal, { isOpen: isPermissionsModalDismissed, isBlocking: false, onDismiss: () => {
+            !checkPermissionModalShowing && modal !== undefined && (React__default['default'].createElement(_ModalClone, { styles: {
+                    root: { position: 'unset' },
+                    main: { position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }
+                }, layerProps: { hostId: props.modalLayerHostId }, isOpen: isPermissionsModalDismissed, isBlocking: false, onDismiss: () => {
                     setIsPermissionsModalDismissed(false);
                 }, overlay: { styles: { root: { background: 'rgba(0,0,0,0.9)' } } } }, modal()))));
     }
@@ -19585,6 +19567,7 @@ const CallReadinessModalFallBack = (props) => {
 const ConfigurationPage = (props) => {
     var _a, _b;
     const { startCallHandler, mobileView, 
+    /* @conditional-compile-remove(call-readiness) */ modalLayerHostId, 
     /* @conditional-compile-remove(call-readiness) */ deviceChecks, 
     /* @conditional-compile-remove(call-readiness) */ onPermissionsTroubleshootingClick, 
     /* @conditional-compile-remove(call-readiness) */ onNetworkingTroubleShootingClick } = props;
@@ -19687,12 +19670,20 @@ const ConfigurationPage = (props) => {
                 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
-        videoState && videoState !== 'unsupported' && audioState && audioState !== 'unsupported' && (React__default['default'].createElement(CallReadinessModal, { mobileView: mobileView, 
+        videoState && videoState !== 'unsupported' && audioState && audioState !== 'unsupported' && (React__default['default'].createElement(CallReadinessModal
+        /* @conditional-compile-remove(call-readiness) */
+        , { 
+            /* @conditional-compile-remove(call-readiness) */
+            modalLayerHostId: modalLayerHostId, 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
-        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
+        /* @conditional-compile-remove(call-readiness) */
+        , { 
+            /* @conditional-compile-remove(call-readiness) */
+            modalLayerHostId: modalLayerHostId, 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 },
@@ -20174,6 +20165,8 @@ const MainScreen = (props) => {
                     adapter.joinCall();
                 }, 
                 /* @conditional-compile-remove(call-readiness) */
+                modalLayerHostId: props.modalLayerHostId, 
+                /* @conditional-compile-remove(call-readiness) */
                 deviceChecks: (_a = props.options) === null || _a === void 0 ? void 0 : _a.deviceChecks, 
                 /* @conditional-compile-remove(call-readiness) */
                 onPermissionsTroubleshootingClick: (_b = props.options) === null || _b === void 0 ? void 0 : _b.onPermissionsTroubleshootingClick, 
@@ -20261,7 +20254,7 @@ const CallComposite = (props) => {
         React__default['default'].createElement(BaseProvider, Object.assign({}, props),
             React__default['default'].createElement(CallAdapterProvider, { adapter: adapter },
                 React__default['default'].createElement(MainScreen, { callInvitationUrl: callInvitationUrl, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, mobileView: mobileView, 
-                    /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
+                    /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) @conditional-compile-remove(call-readiness) */
                     modalLayerHostId: modalLayerHostId, options: options, 
                     /* @conditional-compile-remove(rooms) */
                     roleHint: roleHint }),
@@ -20273,8 +20266,8 @@ const CallComposite = (props) => {
                 // Warning: this is fragile and works because the call arrangement page is only rendered after the call has connected and thus this
                 // LayerHost will be guaranteed to have rendered (and subsequently mounted in the DOM). This ensures the DOM element will be available
                 // before the call to `document.getElementById(modalLayerHostId)` is made.
-                /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
-                mobileView && React__default['default'].createElement(react.LayerHost, { id: modalLayerHostId, className: react.mergeStyles(modalLayerHostStyle) })))));
+                /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) @conditional-compile-remove(call-readiness) */
+                React__default['default'].createElement(react.LayerHost, { id: modalLayerHostId, className: react.mergeStyles(modalLayerHostStyle) })))));
 };
 const holdPageTrampoline = () => {
     /* @conditional-compile-remove(one-to-n-calling) */