@azure/communication-react 1.8.0-alpha-202309070012 → 1.8.0-alpha-202309090012

package/dist/communication-react.d.ts

@@ -1135,7 +1135,7 @@ export declare interface CallAdapterSubscribers {
      */
     on(event: 'transferRequested', listener: TransferRequestedListener): void;
     /**
-     * Unsubscribe function for 'capabilitiesChanged' event.
+     * Subscribe function for 'capabilitiesChanged' event.
      */
     on(event: 'capabilitiesChanged', listener: CapabilitiesChangedListener): void;
     /**
@@ -2209,7 +2209,7 @@ export declare type CallErrors = {
  *
  * @public
  */
-export declare type CallErrorTarget = 'Call.addParticipant' | 'Call.dispose' | 'Call.feature' | 'Call.hangUp' | 'Call.hold' | 'Call.mute' | 'Call.muteIncomingAudio' | 'Call.off' | 'Call.on' | 'Call.removeParticipant' | 'Call.resume' | 'Call.sendDtmf' | 'Call.startAudio' | 'Call.startScreenSharing' | 'Call.startVideo' | 'Call.stopScreenSharing' | 'Call.stopAudio' | 'Call.stopVideo' | 'Call.unmute' | 'Call.unmuteIncomingAudio' | 'CallAgent.dispose' | 'CallAgent.feature' | 'CallAgent.join' | 'CallAgent.off' | 'CallAgent.on' | 'CallAgent.startCall' | 'CallClient.createCallAgent' | 'CallClient.createTeamsCallAgent' | 'CallClient.feature' | 'CallClient.getDeviceManager' | /* @conditional-compile-remove(calling-beta-sdk) */ 'CallClient.getEnvironmentInfo' | 'DeviceManager.askDevicePermission' | 'DeviceManager.getCameras' | 'DeviceManager.getMicrophones' | 'DeviceManager.getSpeakers' | 'DeviceManager.off' | 'DeviceManager.on' | 'DeviceManager.selectMicrophone' | 'DeviceManager.selectSpeaker' | 'IncomingCall.accept' | 'IncomingCall.reject' | /* @conditional-compile-remove(calling-beta-sdk) */ /* @conditional-compile-remove(teams-identity-support) */ 'TeamsCall.addParticipant' | 'VideoEffectsFeature.startEffects' | /* @conditional-compile-remove(calling-beta-sdk) */ 'CallAgent.handlePushNotification' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.admit' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.rejectParticipant' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.admitAll';
+export declare type CallErrorTarget = 'Call.addParticipant' | 'Call.dispose' | 'Call.feature' | 'Call.hangUp' | 'Call.hold' | 'Call.mute' | 'Call.muteIncomingAudio' | 'Call.off' | 'Call.on' | 'Call.removeParticipant' | 'Call.resume' | 'Call.sendDtmf' | 'Call.startAudio' | 'Call.startScreenSharing' | 'Call.startVideo' | 'Call.stopScreenSharing' | 'Call.stopAudio' | 'Call.stopVideo' | 'Call.unmute' | 'Call.unmuteIncomingAudio' | 'CallAgent.dispose' | 'CallAgent.feature' | 'CallAgent.join' | 'CallAgent.off' | 'CallAgent.on' | 'CallAgent.startCall' | 'CallClient.createCallAgent' | 'CallClient.createTeamsCallAgent' | 'CallClient.feature' | 'CallClient.getDeviceManager' | /* @conditional-compile-remove(calling-beta-sdk) */ 'CallClient.getEnvironmentInfo' | 'DeviceManager.askDevicePermission' | 'DeviceManager.getCameras' | 'DeviceManager.getMicrophones' | 'DeviceManager.getSpeakers' | 'DeviceManager.off' | 'DeviceManager.on' | 'DeviceManager.selectMicrophone' | 'DeviceManager.selectSpeaker' | 'IncomingCall.accept' | 'IncomingCall.reject' | /* @conditional-compile-remove(calling-beta-sdk) */ /* @conditional-compile-remove(teams-identity-support) */ 'TeamsCall.addParticipant' | 'VideoEffectsFeature.startEffects' | /* @conditional-compile-remove(calling-beta-sdk) */ 'CallAgent.handlePushNotification' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.admit' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.rejectParticipant' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.admitAll' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.setConstraints';
 
 /**
  * Callback for {@link CallAdapterSubscribers} 'callIdChanged' event.
@@ -2861,6 +2861,7 @@ export declare interface CallWithChatAdapterSubscriptions {
     on(event: 'isCaptionsActiveChanged', listener: IsCaptionsActiveChangedListener): void;
     on(event: 'isCaptionLanguageChanged', listener: IsCaptionLanguageChangedListener): void;
     on(event: 'isSpokenLanguageChanged', listener: IsSpokenLanguageChangedListener): void;
+    on(event: 'capabilitiesChanged', listener: CapabilitiesChangedListener): void;
     off(event: 'callEnded', listener: CallEndedListener): void;
     off(event: 'isMutedChanged', listener: IsMutedChangedListener): void;
     off(event: 'callIdChanged', listener: CallIdChangedListener): void;
@@ -2876,6 +2877,7 @@ export declare interface CallWithChatAdapterSubscriptions {
     off(event: 'isCaptionsActiveChanged', listener: IsCaptionsActiveChangedListener): void;
     off(event: 'isCaptionLanguageChanged', listener: IsCaptionLanguageChangedListener): void;
     off(event: 'isSpokenLanguageChanged', listener: IsSpokenLanguageChangedListener): void;
+    off(event: 'capabilitiesChanged', listener: CapabilitiesChangedListener): void;
     on(event: 'messageReceived', listener: MessageReceivedListener): void;
     on(event: 'messageSent', listener: MessageSentListener): void;
     on(event: 'messageRead', listener: MessageReadListener): void;
@@ -3113,6 +3115,16 @@ export declare type CallWithChatCompositeOptions = {
      * if this is not supplied, the composite will not show a unsupported browser page.
      */
     onEnvironmentInfoTroubleshootingClick?: () => void;
+    /**
+     * Remote participant video tile menu options
+     */
+    remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;
+    /**
+     * Options for controlling the local video tile.
+     *
+     * @remarks if 'false' the local video tile will not be rendered.
+     */
+    localVideoTile?: boolean | LocalVideoTileOptions;
     /**
      * Options for controlling the starting layout of the composite's video gallery
      */
@@ -3339,7 +3351,7 @@ export declare interface CallWithChatControlOptions extends CommonCallControlOpt
  *
  * @public
  */
-export declare type CallWithChatEvent = 'callError' | 'chatError' | 'callEnded' | 'isMutedChanged' | 'callIdChanged' | 'isLocalScreenSharingActiveChanged' | 'displayNameChanged' | 'isSpeakingChanged' | 'callParticipantsJoined' | 'callParticipantsLeft' | 'selectedMicrophoneChanged' | 'selectedSpeakerChanged' | /* @conditional-compile-remove(close-captions) */ 'isCaptionsActiveChanged' | /* @conditional-compile-remove(close-captions) */ 'captionsReceived' | /* @conditional-compile-remove(close-captions) */ 'isCaptionLanguageChanged' | /* @conditional-compile-remove(close-captions) */ 'isSpokenLanguageChanged' | 'messageReceived' | 'messageSent' | 'messageRead' | 'chatParticipantsAdded' | 'chatParticipantsRemoved';
+export declare type CallWithChatEvent = 'callError' | 'chatError' | 'callEnded' | 'isMutedChanged' | 'callIdChanged' | 'isLocalScreenSharingActiveChanged' | 'displayNameChanged' | 'isSpeakingChanged' | 'callParticipantsJoined' | 'callParticipantsLeft' | 'selectedMicrophoneChanged' | 'selectedSpeakerChanged' | /* @conditional-compile-remove(close-captions) */ 'isCaptionsActiveChanged' | /* @conditional-compile-remove(close-captions) */ 'captionsReceived' | /* @conditional-compile-remove(close-captions) */ 'isCaptionLanguageChanged' | /* @conditional-compile-remove(close-captions) */ 'isSpokenLanguageChanged' | /* @conditional-compile-remove(capabilities) */ 'capabilitiesChanged' | 'messageReceived' | 'messageSent' | 'messageRead' | 'chatParticipantsAdded' | 'chatParticipantsRemoved';
 
 /**
  * @beta
@@ -7139,7 +7151,6 @@ export declare interface LocalVideoTileOptions {
      * @remarks 'grid' - local video tile will be rendered in the grid view of the videoGallery.
      * 'floating' - local video tile will be rendered in the floating position and will observe overflow gallery
      * local video tile rules and be docked in the bottom corner.
-     * 'hidden' - local video tile will not be rendered.
      * This does not affect the Configuration screen or the side pane Picture in Picture in Picture view.
      */
     position?: 'grid' | 'floating';

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

@@ -178,7 +178,7 @@ const _isValidIdentifier = (identifier) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.8.0-alpha-202309070012';
+var telemetryVersion = '1.8.0-alpha-202309090012';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -15365,7 +15365,7 @@ const _HighContrastAwareIcon = (props) => {
  * Generates default {@link IContextualMenuProps} for buttons that
  * show a drop-down to select devices to use.
  *
- * @private
+ * @internal
  */
 const generateDefaultDeviceMenuProps = (props, strings, primaryActionItem, isSelectCamAllowed = true, isSelectMicAllowed = true) => {
     var _a, _b;
@@ -23744,7 +23744,29 @@ const CallControls = (props) => {
     const raiseHandButtonProps = usePropsFor$1(RaiseHandButton);
     /* @conditional-compile-remove(PSTN-calls) */
     const alternateCallerId = useAdapter().getState().alternateCallerId;
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */ /* @conditional-compile-remove(raise-hand) */
+    const devicesButtonProps = usePropsFor$1(DevicesButton);
+    let numberOfButtons = 0;
+    const screenShareButtonIsEnabled = isEnabled$2(options === null || options === void 0 ? void 0 : options.screenShareButton);
+    if (screenShareButtonIsEnabled) {
+        numberOfButtons++;
+    }
+    const microphoneButtonIsEnabled = isEnabled$2(options === null || options === void 0 ? void 0 : options.microphoneButton);
+    if (microphoneButtonIsEnabled) {
+        numberOfButtons++;
+    }
+    const cameraButtonIsEnabled = isEnabled$2(options === null || options === void 0 ? void 0 : options.cameraButton);
+    if (cameraButtonIsEnabled) {
+        numberOfButtons++;
+    }
+    if (isEnabled$2(options === null || options === void 0 ? void 0 : options.endCallButton)) {
+        numberOfButtons++;
+    }
+    const showParticipantsButtonInControlBar = isEnabled$2(options === null || options === void 0 ? void 0 : options.participantsButton) &&
+        /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
+        !props.isMobile;
+    if (showParticipantsButtonInControlBar) {
+        numberOfButtons++;
+    }
     const moreButtonContextualMenuItems = () => {
         const items = [];
         if (props.isMobile && props.onPeopleButtonClicked && isEnabled$2(options === null || options === void 0 ? void 0 : options.participantsButton)) {
@@ -23795,32 +23817,72 @@ const CallControls = (props) => {
                 }
             });
         }
-        /* @conditional-compile-remove(raise-hand) */
-        if (raiseHandButtonIsEnabled) {
-            items.push({
-                key: 'raiseHandButtonKey',
-                text: raiseHandButtonProps.checked
-                    ? localeStrings.component.strings.raiseHandButton.onLabel
-                    : localeStrings.component.strings.raiseHandButton.offLabel,
-                onClick: () => {
-                    if (raiseHandButtonProps.onToggleRaiseHand) {
-                        raiseHandButtonProps.onToggleRaiseHand();
-                    }
-                },
-                iconProps: { iconName: 'RaiseHandContextualMenuItem', styles: { root: { lineHeight: 0 } } },
-                itemProps: {
-                    styles: buttonFlyoutIncreasedSizeStyles
-                },
-                disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.raiseHandButton),
-                ['data-ui-id']: 'raise-hand-button'
-            });
-        }
         return items;
     };
+    const moreButtonMenuItems = moreButtonContextualMenuItems();
+    let showMoreButton = isEnabled$2(options === null || options === void 0 ? void 0 : options.moreButton) && moreButtonMenuItems.length > 0;
+    if (showMoreButton) {
+        numberOfButtons++;
+    }
+    const customButtons = React.useMemo(() => generateCustomControlBarButtons$1(onFetchCustomButtonPropsTrampoline$1(options), options === null || options === void 0 ? void 0 : options.displayType), [options]);
+    numberOfButtons += React__default['default'].Children.count(customButtons['primary']) + React__default['default'].Children.count(customButtons['secondary']);
+    let showDevicesButtonInControlBar = isEnabled$2(options === null || options === void 0 ? void 0 : options.devicesButton);
+    if (showDevicesButtonInControlBar && (props.isMobile ? numberOfButtons < 5 : true)) {
+        numberOfButtons++;
+    }
+    else {
+        showDevicesButtonInControlBar = false;
+        showMoreButton = isEnabled$2(options === null || options === void 0 ? void 0 : options.moreButton);
+    }
+    /* @conditional-compile-remove(raise-hand) */
+    const raiseHandButtonIsEnabled = isEnabled$2(options === null || options === void 0 ? void 0 : options.raiseHandButton);
+    /* @conditional-compile-remove(raise-hand) */
+    let showRaiseHandButtonInControlBar = raiseHandButtonIsEnabled;
+    /* @conditional-compile-remove(raise-hand) */
+    if (showRaiseHandButtonInControlBar && (props.isMobile ? numberOfButtons < 5 : true)) {
+        numberOfButtons++;
+    }
+    else {
+        // If more button is not present but enabled then replace previous button (devices button) with more button
+        if (!showMoreButton && isEnabled$2(options === null || options === void 0 ? void 0 : options.moreButton)) {
+            showMoreButton = true;
+            showDevicesButtonInControlBar = false;
+        }
+        showRaiseHandButtonInControlBar = false;
+    }
+    if (!showDevicesButtonInControlBar) {
+        const devicesButtonMenu = generateDefaultDeviceMenuProps(devicesButtonProps, localeStrings.component.strings.devicesButton);
+        moreButtonMenuItems.push({
+            key: 'devicesButtonKey',
+            text: localeStrings.component.strings.devicesButton.label,
+            iconProps: { iconName: 'ControlButtonOptions', styles: { root: { lineHeight: 0 } } },
+            subMenuProps: devicesButtonMenu,
+            ['data-ui-id']: 'call-composite-more-menu-devices-button'
+        });
+    }
+    /* @conditional-compile-remove(raise-hand) */
+    if (!showRaiseHandButtonInControlBar) {
+        moreButtonMenuItems.push({
+            key: 'raiseHandButtonKey',
+            text: raiseHandButtonProps.checked
+                ? localeStrings.component.strings.raiseHandButton.onLabel
+                : localeStrings.component.strings.raiseHandButton.offLabel,
+            onClick: () => {
+                if (raiseHandButtonProps.onToggleRaiseHand) {
+                    raiseHandButtonProps.onToggleRaiseHand();
+                }
+            },
+            iconProps: { iconName: 'RaiseHandContextualMenuItem', styles: { root: { lineHeight: 0 } } },
+            itemProps: {
+                styles: buttonFlyoutIncreasedSizeStyles
+            },
+            disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.raiseHandButton),
+            ['data-ui-id']: 'call-composite-more-menu-raise-hand-button'
+        });
+    }
     /* @conditional-compile-remove(PSTN-calls) */
     const [showDialpad, setShowDialpad] = React.useState(false);
     const theme = react.useTheme();
-    const customButtons = React.useMemo(() => generateCustomControlBarButtons$1(onFetchCustomButtonPropsTrampoline$1(options), options === null || options === void 0 ? void 0 : options.displayType), [options]);
     // when props.options is false then we want to hide the whole control bar.
     if (props.options === false) {
         return React__default['default'].createElement(React__default['default'].Fragment, null);
@@ -23829,11 +23891,6 @@ const CallControls = (props) => {
     const onDismissDialpad = () => {
         setShowDialpad(false);
     };
-    const screenShareButtonIsEnabled = isEnabled$2(options === null || options === void 0 ? void 0 : options.screenShareButton);
-    const microphoneButtonIsEnabled = isEnabled$2(options === null || options === void 0 ? void 0 : options.microphoneButton);
-    const cameraButtonIsEnabled = isEnabled$2(options === null || options === void 0 ? void 0 : options.cameraButton);
-    /* @conditional-compile-remove(raise-hand) */
-    const raiseHandButtonIsEnabled = isEnabled$2(options === null || options === void 0 ? void 0 : options.raiseHandButton);
     return (React__default['default'].createElement(react.Stack, { horizontalAlign: "center", className: callControlsContainerStyles },
         /* @conditional-compile-remove(PSTN-calls) */
         React__default['default'].createElement(SendDtmfDialpad, { isMobile: !!props.isMobile, strings: dialpadStrings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad }),
@@ -23841,16 +23898,14 @@ const CallControls = (props) => {
             React__default['default'].createElement(ControlBar, { layout: props.displayVertical ? 'vertical' : 'horizontal', styles: controlBarStyles(theme.semanticColors.bodyBackground) },
                 microphoneButtonIsEnabled && (React__default['default'].createElement(Microphone, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.microphoneButton) })),
                 cameraButtonIsEnabled && (React__default['default'].createElement(Camera, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.cameraButton) })),
-                /* @conditional-compile-remove(raise-hand) */ raiseHandButtonIsEnabled && !props.isMobile && (React__default['default'].createElement(RaiseHand, { displayType: options === null || options === void 0 ? void 0 : options.displayType })),
+                /* @conditional-compile-remove(raise-hand) */ showRaiseHandButtonInControlBar && (React__default['default'].createElement(RaiseHand, { displayType: options === null || options === void 0 ? void 0 : options.displayType })),
                 screenShareButtonIsEnabled && (React__default['default'].createElement(ScreenShare, { option: options === null || options === void 0 ? void 0 : options.screenShareButton, displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.screenShareButton) })),
-                isEnabled$2(options === null || options === void 0 ? void 0 : options.participantsButton) &&
-                    /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
-                    !props.isMobile && (React__default['default'].createElement(Participants, { option: options === null || options === void 0 ? void 0 : options.participantsButton, callInvitationURL: props.callInvitationURL, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, isMobile: props.isMobile, disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.participantsButton) })) && (
+                showParticipantsButtonInControlBar && (React__default['default'].createElement(Participants, { option: options === null || options === void 0 ? void 0 : options.participantsButton, callInvitationURL: props.callInvitationURL, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, isMobile: props.isMobile, disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.participantsButton) })) && (
                 /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
                 React__default['default'].createElement(People, { checked: props.peopleButtonChecked, ariaLabel: peopleButtonStrings === null || peopleButtonStrings === void 0 ? void 0 : peopleButtonStrings.label, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "call-composite-people-button", strings: peopleButtonStrings, disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.participantsButton) })),
-                isEnabled$2(options === null || options === void 0 ? void 0 : options.devicesButton) && (React__default['default'].createElement(Devices, { displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.devicesButton) })),
+                showDevicesButtonInControlBar && (React__default['default'].createElement(Devices, { displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.devicesButton) })),
                 /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */ /* @conditional-compile-remove(raise-hand) */
-                isEnabled$2(options === null || options === void 0 ? void 0 : options.moreButton) && moreButtonContextualMenuItems().length > 0 && (React__default['default'].createElement(MoreButton, { "data-ui-id": "common-call-composite-more-button", strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: { items: moreButtonContextualMenuItems() }, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact' })),
+                showMoreButton && (React__default['default'].createElement(MoreButton, { "data-ui-id": "common-call-composite-more-button", strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: { items: moreButtonMenuItems }, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact' })),
                 customButtons['primary'],
                 isEnabled$2(options === null || options === void 0 ? void 0 : options.endCallButton) && React__default['default'].createElement(EndCall, { displayType: options === null || options === void 0 ? void 0 : options.displayType })))));
 };
@@ -24235,7 +24290,10 @@ const DesktopMoreButton = (props) => {
                             }
                         }
                     }
-                ]
+                ],
+                calloutProps: {
+                    preventDismissOnEvent: _preventDismissOnEvent
+                }
             }
         });
     }
@@ -24559,7 +24617,10 @@ const getDesktopEndCallButtonStyles = (theme) => {
         rootFocused: {
             '@media (forced-colors: active)': {
                 background: 'highlight',
-                border: '1px solid'
+                color: 'highlightText',
+                borderColor: theme.palette.black,
+                borderRadius: 'unset',
+                outline: `3px solid ${theme.palette.black}`
             }
         },
         icon: {
@@ -30975,8 +31036,12 @@ const CallWithChatScreen = (props) => {
         onPermissionsTroubleshootingClick: props.onPermissionsTroubleshootingClick,
         /* @conditional-compile-remove(unsupported-browser) */
         onEnvironmentInfoTroubleshootingClick: props.onEnvironmentInfoTroubleshootingClick,
+        /* @conditional-compile-remove(pinned-participants) */
+        remoteVideoTileMenuOptions: props.remoteVideoTileMenuOptions,
         /* @conditional-compile-remove(gallery-layouts) */
-        galleryOptions: props.galleryOptions
+        galleryOptions: props.galleryOptions,
+        /* @conditional-compile-remove(click-to-call) */
+        localVideoTile: props.localVideoTile
     }), [
         props.callControls,
         callControlOptionsFromProps,
@@ -30992,7 +31057,11 @@ const CallWithChatScreen = (props) => {
         /* @conditional-compile-remove(call-readiness) */
         props.onPermissionsTroubleshootingClick,
         /* @conditional-compile-remove(gallery-layouts) */
-        props.galleryOptions
+        props.galleryOptions,
+        /* @conditional-compile-remove(click-to-call) */
+        props.localVideoTile,
+        /* @conditional-compile-remove(pinned-participants) */
+        props.remoteVideoTileMenuOptions
     ]);
     const onRenderChatContent = React.useCallback(() => (React__default['default'].createElement(ChatComposite, Object.assign({}, chatProps, { fluentTheme: theme, options: {
             topic: false,
@@ -31044,8 +31113,14 @@ const CallWithChatComposite = (props) => {
         React__default['default'].createElement(CallWithChatScreen, Object.assign({}, props, { 
             /* @conditional-compile-remove(call-readiness) */
             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(pinned-participants) */
+            remoteVideoTileMenuOptions: options === null || options === void 0 ? void 0 : options.remoteVideoTileMenuOptions, 
             /* @conditional-compile-remove(file-sharing) */
-            fileSharing: options === null || options === void 0 ? void 0 : options.fileSharing }))));
+            fileSharing: options === null || options === void 0 ? void 0 : options.fileSharing, 
+            /* @conditional-compile-remove(click-to-call) */
+            localVideoTile: options === null || options === void 0 ? void 0 : options.localVideoTile, 
+            /* @conditional-compile-remove(gallery-layouts) */
+            galleryOptions: options === null || options === void 0 ? void 0 : options.galleryOptions }))));
 };
 const hasJoinedCallFn = (page, callStatus) => {
     /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(one-to-n-calling) */