@azure/communication-react 1.8.0-alpha-202309060012 → 1.8.0-alpha-202309080012

package/dist/communication-react.d.ts

@@ -316,7 +316,7 @@ export declare type AzureCommunicationCallAdapterArgs = {
 /**
  * Optional parameters to create {@link AzureCommunicationCallAdapter}
  *
- * @beta
+ * @public
  */
 export declare type AzureCommunicationCallAdapterOptions = CommonCallAdapterOptions;
 
@@ -879,13 +879,13 @@ export declare interface CallAdapterCallOperations {
     /**
      * Start the video background effect.
      *
-     * @beta
+     * @public
      */
     startVideoBackgroundEffect(videoBackgroundEffect: VideoBackgroundEffect): Promise<void>;
     /**
      * Stop the video background effect.
      *
-     * @beta
+     * @public
      */
     stopVideoBackgroundEffects(): Promise<void>;
     /**
@@ -893,13 +893,13 @@ export declare interface CallAdapterCallOperations {
      *
      * @param backgroundImages - Array of custom background images.
      *
-     * @beta
+     * @public
      */
     updateBackgroundPickerImages(backgroundImages: VideoBackgroundImage[]): void;
     /**
      * Update the selected video background effect.
      *
-     * @beta
+     * @public
      */
     updateSelectedVideoBackgroundEffect(selectedVideoBackground: VideoBackgroundEffect): 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' | /* @conditional-compile-remove(video-background-effects) */ '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.
@@ -2243,7 +2243,7 @@ export declare interface CallingHandlers extends CommonCallingHandlers {
 
 /**
  * Configuration options to include video effect background dependency.
- * @beta
+ * @public
  */
 export declare type CallingHandlersOptions = {
     onResolveVideoBackgroundEffectsDependency?: () => Promise<VideoBackgroundEffectsDependency>;
@@ -2807,13 +2807,13 @@ export declare interface CallWithChatAdapterManagement {
     /**
      * Start the video background effect.
      *
-     * @beta
+     * @public
      */
     startVideoBackgroundEffect(videoBackgroundEffect: VideoBackgroundEffect): Promise<void>;
     /**
      * Stop the video background effect.
      *
-     * @beta
+     * @public
      */
     stopVideoBackgroundEffects(): Promise<void>;
     /**
@@ -2821,13 +2821,13 @@ export declare interface CallWithChatAdapterManagement {
      *
      * @param backgroundImages - Array of custom background images.
      *
-     * @beta
+     * @public
      */
     updateBackgroundPickerImages(backgroundImages: VideoBackgroundImage[]): void;
     /**
      * Update the selected video background effect
      *
-     * @beta
+     * @public
      */
     updateSelectedVideoBackgroundEffect(selectedVideoBackground: VideoBackgroundEffect): void;
 }
@@ -3113,6 +3113,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
      */
@@ -3435,7 +3445,7 @@ export declare interface CameraButtonProps extends ControlBarButtonProps {
     /**
      * Callback when a effects is clicked
      */
-    onShowVideoEffectsPicker?: (showVideoEffectsOptions: boolean) => void;
+    onClickVideoEffects?: (showVideoEffects: boolean) => void;
 }
 
 /**
@@ -4378,7 +4388,7 @@ export declare interface CommonCallAdapter extends AdapterState<CallAdapterState
 /**
  * Common optional parameters to create {@link AzureCommunicationCallAdapter} or {@link TeamsCallAdapter}
  *
- * @beta
+ * @public
  */
 export declare type CommonCallAdapterOptions = {
     /**
@@ -7109,7 +7119,7 @@ export declare interface LocalVideoStreamState {
     view?: VideoStreamRendererViewState;
     /**
      * Stores the state of the video effects.
-     * @beta
+     * @public
      */
     videoEffects?: LocalVideoStreamVideoEffectsState;
 }
@@ -7117,7 +7127,7 @@ export declare interface LocalVideoStreamState {
 /**
  * State only version of a LocalVideoStream's {@link @azure/communication-calling#VideoEffectsFeature}.
  *
- * @beta
+ * @public
  */
 export declare interface LocalVideoStreamVideoEffectsState {
     /**
@@ -7139,7 +7149,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';
@@ -7967,14 +7976,14 @@ defaultOnRender?: (props: CustomAvatarOptions) => JSX.Element) => JSX.Element;
 /**
  * Dependency resolution for video background effects.
  *
- * @beta
+ * @public
  */
 export declare const onResolveVideoEffectDependency: () => Promise<VideoBackgroundEffectsDependency>;
 
 /**
  *
  * Dependency resolution for video background effects using lazy loading.
- * @beta
+ * @public
  */
 export declare const onResolveVideoEffectDependencyLazy: () => Promise<VideoBackgroundEffectsDependency>;
 
@@ -9209,7 +9218,7 @@ export declare interface StatefulDeviceManager extends DeviceManager {
      * {@link @azure/communication-calling#Call}. This is useful for developers who want to interact with rendered
      * video streams before they have started a call. See also {@link @azure/communication-react#CallClient.createView}.
      *
-     * @beta
+     * @public
      */
     getUnparentedVideoStreams: () => LocalVideoStream[];
 }
@@ -9267,7 +9276,7 @@ export declare interface SystemMessageCommon extends MessageCommon {
 /**
  * Optional parameters to create {@link TeamsCallAdapter}
  *
- * @beta
+ * @public
  */
 export declare type TeamsAdapterOptions = CommonCallAdapterOptions;
 
@@ -9889,7 +9898,7 @@ export declare interface VerticalGalleryStyles extends BaseCustomStyles {
 /**
  * Contains the attibutes of the blur video background effect
  *
- * @beta
+ * @public
  */
 export declare interface VideoBackgroundBlurEffect extends BackgroundBlurConfig {
     /**
@@ -9901,14 +9910,14 @@ export declare interface VideoBackgroundBlurEffect extends BackgroundBlurConfig
 /**
  * Contains the attibutes of a selected video background effect
  *
- * @beta
+ * @public
  */
 export declare type VideoBackgroundEffect = VideoBackgroundNoEffect | VideoBackgroundBlurEffect | VideoBackgroundReplacementEffect;
 
 /**
  * Dependency type to be injected for video background effects
  *
- * @beta
+ * @public
  */
 export declare type VideoBackgroundEffectsDependency = {
     createBackgroundBlurEffect: (config?: BackgroundBlurConfig) => BackgroundBlurEffect;
@@ -9918,7 +9927,7 @@ export declare type VideoBackgroundEffectsDependency = {
 /**
  * Contains the attibutes of a background image like url, name etc.
  *
- * @beta
+ * @public
  */
 export declare interface VideoBackgroundImage {
     /**
@@ -9938,7 +9947,7 @@ export declare interface VideoBackgroundImage {
 /**
  * Contains the attibutes to remove video background effect
  *
- * @beta
+ * @public
  */
 export declare interface VideoBackgroundNoEffect {
     /**
@@ -9950,7 +9959,7 @@ export declare interface VideoBackgroundNoEffect {
 /**
  * Contains the attibutes of a selected replacement video background effect
  *
- * @beta
+ * @public
  */
 export declare interface VideoBackgroundReplacementEffect extends BackgroundReplacementConfig {
     /**

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-202309060012';
+var telemetryVersion = '1.8.0-alpha-202309080012';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -405,7 +405,7 @@ const getLatestErrors$1 = (state) => state.latestErrors;
  * @private
  */
 const getDiagnostics = (state, props) => { var _a; return (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.diagnostics; };
-/* @conditional-compile-remove(PSTN-calls) */
+/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(raise-hand) */
 /**
  * @private
  */
@@ -15596,15 +15596,15 @@ const CameraButton = (props) => {
     }), [cameraOn, localVideoViewOptions, onToggleCamera, toggleAnnouncerString]);
     const splitButtonMenuItems = [];
     /* @conditional-compile-remove(video-background-effects) */
-    if (props.onShowVideoEffectsPicker) {
+    if (props.onClickVideoEffects) {
         splitButtonMenuItems.push({
             key: 'effects',
             'data-ui-id': 'camera-split-button-video-effects',
             text: strings.videoEffectsMenuItemTitle,
             iconProps: { iconName: 'ControlButtonVideoEffectsOption', styles: { root: { lineHeight: 0 } } },
             onClick: () => {
-                if (props.onShowVideoEffectsPicker) {
-                    props.onShowVideoEffectsPicker(true);
+                if (props.onClickVideoEffects) {
+                    props.onClickVideoEffects(true);
                 }
             }
         });
@@ -18336,7 +18336,9 @@ const findSelector$1 = (component) => {
 /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(raise-hand) */
 const findConditionalCompiledSelector = (component) => {
     switch (component) {
+        /* @conditional-compile-remove(PSTN-calls) */
         case HoldButton:
+            /* @conditional-compile-remove(PSTN-calls) */
             return holdButtonSelector;
         /* @conditional-compile-remove(raise-hand) */
         case RaiseHandButton:
@@ -23168,7 +23170,7 @@ const Camera = (props) => {
             ? () => React__default['default'].createElement(_HighContrastAwareIcon, { disabled: true, iconName: 'ControlButtonCameraProhibited' })
             : undefined, 
         /* @conditional-compile-remove(video-background-effects) */
-        onShowVideoEffectsPicker: props.onShowVideoEffectsPicker, componentRef: props.componentRef })));
+        onClickVideoEffects: props.onClickVideoEffects, componentRef: props.componentRef })));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -23717,7 +23719,7 @@ const CallControls = (props) => {
     const options = React.useMemo(() => (typeof props.options === 'boolean' ? {} : props.options), [props.options]);
     /* @conditional-compile-remove(PSTN-calls) */
     const adapter = useAdapter();
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */ /* @conditional-compile-remove(raise-hand) */
     const localeStrings = useLocale();
     /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
     const peopleButtonStrings = React.useMemo(() => ({
@@ -23725,7 +23727,7 @@ const CallControls = (props) => {
         tooltipOffContent: localeStrings.strings.call.peopleButtonTooltipOpen,
         tooltipOnContent: localeStrings.strings.call.peopleButtonTooltipClose
     }), [localeStrings]);
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */ /* @conditional-compile-remove(raise-hand) */
     const moreButtonStrings = React.useMemo(() => ({
         label: localeStrings.strings.call.moreButtonCallingLabel,
         tooltipOffContent: localeStrings.strings.callWithChat.moreDrawerButtonTooltip
@@ -23742,7 +23744,7 @@ 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(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */ /* @conditional-compile-remove(raise-hand) */
     const moreButtonContextualMenuItems = () => {
         const items = [];
         if (props.isMobile && props.onPeopleButtonClicked && isEnabled$2(options === null || options === void 0 ? void 0 : options.participantsButton)) {
@@ -23847,7 +23849,7 @@ const CallControls = (props) => {
                 /* @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) })),
-                /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */
+                /* @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' })),
                 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 })))));
@@ -24429,7 +24431,7 @@ const CommonCallControlBar = (props) => {
                                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
                                         disabled: props.disableButtonsForHoldScreen || isDisabled$3(options.cameraButton), 
                                         /* @conditional-compile-remove(video-background-effects) */
-                                        onShowVideoEffectsPicker: props.onShowVideoEffectsPicker, componentRef: props.cameraButtonRef })),
+                                        onClickVideoEffects: props.onClickVideoEffects, componentRef: props.cameraButtonRef })),
                                     /* @conditional-compile-remove(raise-hand) */ !props.mobileView &&
                                         isEnabled$1(options.raiseHandButton) && (React__default['default'].createElement(RaiseHand, { displayType: options.displayType, styles: commonButtonStyles, 
                                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
@@ -24557,7 +24559,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: {
@@ -24722,7 +24727,7 @@ const MoreDrawer = (props) => {
     const theme = react.useTheme();
     const drawerMenuItems = [];
     const { speakers, onSelectSpeaker, onLightDismiss } = props;
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */ /* @conditional-compile-remove(raise-hand) */
     const localeStrings = useLocale();
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
     const holdButtonProps = usePropsFor$1(HoldButton);
@@ -26508,7 +26513,7 @@ const CallArrangement = (props) => {
                     /* @conditional-compile-remove(close-captions) */
                     isCaptionsOn: isCaptionsOn, 
                     /* @conditional-compile-remove(video-background-effects) */
-                    onShowVideoEffectsPicker: onResolveVideoEffectDependency ? openVideoEffectsPane : undefined, 
+                    onClickVideoEffects: onResolveVideoEffectDependency ? openVideoEffectsPane : undefined, 
                     /* @conditional-compile-remove(PSTN-calls) */
                     onClickShowDialpad: alternateCallerId ? onClickShowDialpad : undefined, displayVertical: verticalControlBar, 
                     /* @conditional-compile-remove(gallery-layouts) */
@@ -27456,7 +27461,7 @@ const LocalDeviceSettings = (props) => {
             React__default['default'].createElement(react.Stack, { horizontal: true, horizontalAlign: "space-between", styles: cameraAndVideoEffectsContainerStyleDesktop },
                 React__default['default'].createElement(react.Label, { id: 'call-composite-local-camera-settings-label', className: react.mergeStyles(dropDownStyles(theme).label), disabled: !cameraPermissionGranted }, cameraLabel),
                 /* @conditional-compile-remove(video-background-effects) */
-                onResolveVideoEffectDependency && (React__default['default'].createElement(react.DefaultButton, { iconProps: { iconName: 'ConfigurationScreenVideoEffectsButton' }, styles: effectsButtonStyles(theme), onClick: props.onVideoEffectsClick, "data-ui-id": 'call-config-video-effects-button' }, locale.strings.call.configurationPageVideoEffectsButtonLabel))),
+                onResolveVideoEffectDependency && (React__default['default'].createElement(react.DefaultButton, { iconProps: { iconName: 'ConfigurationScreenVideoEffectsButton' }, styles: effectsButtonStyles(theme), onClick: props.onClickVideoEffects, "data-ui-id": 'call-config-video-effects-button' }, locale.strings.call.configurationPageVideoEffectsButtonLabel))),
             React__default['default'].createElement(ConfigurationPageCameraDropdown, { cameraGrantedDropdown: cameraGrantedDropdown, cameraPermissionGranted: cameraPermissionGranted !== null && cameraPermissionGranted !== void 0 ? cameraPermissionGranted : false, 
                 /* @conditional-compile-remove(call-readiness) */
                 dropdownProps: dropdownProps, 
@@ -28050,7 +28055,7 @@ const ConfigurationPage = (props) => {
                                 setIsPermissionsModalDismissed(true);
                             }, 
                             /* @conditional-compile-remove(video-background-effects) */
-                            onVideoEffectsClick: toggleVideoEffectsPane })))),
+                            onClickVideoEffects: toggleVideoEffectsPane })))),
                     React__default['default'].createElement(react.Stack, { styles: mobileWithPreview ? startCallButtonContainerStyleMobile : startCallButtonContainerStyleDesktop },
                         React__default['default'].createElement(StartCallButton, { className: mobileWithPreview ? startCallButtonStyleMobile : undefined, onClick: startCall, disabled: disableStartCallButton })))),
             React__default['default'].createElement(react.Panel
@@ -30973,8 +30978,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,
@@ -30990,7 +30999,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,
@@ -31042,8 +31055,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) */
@@ -31960,7 +31979,7 @@ var __awaiter$1 = (window && window.__awaiter) || function (thisArg, _arguments,
 /**
  *
  * Dependency resolution for video background effects using lazy loading.
- * @beta
+ * @public
  */
 const onResolveVideoEffectDependencyLazy = () => __awaiter$1(void 0, void 0, void 0, function* () {
     const module = yield Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@azure/communication-calling-effects')); });
@@ -31990,7 +32009,7 @@ var __awaiter = (window && window.__awaiter) || function (thisArg, _arguments, P
 /**
  * Dependency resolution for video background effects.
  *
- * @beta
+ * @public
  */
 const onResolveVideoEffectDependency = () => __awaiter(void 0, void 0, void 0, function* () {
     const createBackgroundBlurEffect = (config) => {