@azure/communication-react 1.4.3-alpha-202301040014.0 → 1.4.3-alpha-202301060015.0

package/dist/communication-react.d.ts

@@ -7838,7 +7838,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 +7909,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

@@ -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-202301040014.0';
+var telemetryVersion = '1.4.3-alpha-202301060015.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -8530,21 +8530,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 },
@@ -12117,7 +12117,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 +12134,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 +12150,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 +17684,7 @@ const modalLayerHostStyle = {
     width: '100%',
     height: '100%',
     overflow: 'hidden',
+    zIndex: '100000',
     // pointer events for layerHost set to none to make descendants interactive
     pointerEvents: 'none'
 };
@@ -19487,7 +19503,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 +19581,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 +19594,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 +19610,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 +19713,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 +20208,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 +20297,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 +20309,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) */