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

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';
 
 /**
  * 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;
 }
@@ -3435,7 +3435,7 @@ export declare interface CameraButtonProps extends ControlBarButtonProps {
     /**
      * Callback when a effects is clicked
      */
-    onShowVideoEffectsPicker?: (showVideoEffectsOptions: boolean) => void;
+    onClickVideoEffects?: (showVideoEffects: boolean) => void;
 }
 
 /**
@@ -3560,14 +3560,14 @@ export declare type CancelEditCallback = (messageId: string) => void;
 /**
  * Callback for {@link CallAdapterSubscribers} 'capabilitiesChanged' event.
  *
- * @beta
+ * @public
  */
 export declare type CapabilitiesChangedListener = (data: CapabilitiesChangeInfo) => void;
 
 /**
  * State only version of {@link @azure/communication-calling#CapabilitiesFeature}
  *
- * @beta
+ * @public
  */
 export declare interface CapabilitiesFeatureState {
     /**
@@ -3582,7 +3582,7 @@ export declare interface CapabilitiesFeatureState {
 
 /**
  * Strings for capability changed notification
- * @beta
+ * @public
  */
 export declare interface CapabilityChangedNotificationStrings {
     /**
@@ -3627,7 +3627,7 @@ export declare interface CapabilityChangedNotificationStrings {
 }
 
 /**
- * @beta
+ * @public
  * caption language strings for captions setting modal
  */
 export declare interface CaptionLanguageStrings {
@@ -3666,7 +3666,7 @@ export declare interface CaptionLanguageStrings {
 }
 
 /**
- * @beta
+ * @public
  */
 export declare interface CaptionsCallFeatureState {
     /**
@@ -3700,7 +3700,7 @@ export declare interface CaptionsCallFeatureState {
 }
 
 /**
- * @beta
+ * @public
  */
 export declare interface CaptionsInfo {
     /**
@@ -3736,7 +3736,7 @@ export declare interface CaptionsInfo {
 /**
  * options bag to start captions
  *
- * @beta
+ * @public
  */
 export declare type CaptionsOptions = {
     spokenLanguage: string;
@@ -3745,7 +3745,7 @@ export declare type CaptionsOptions = {
 /**
  * Callback for {@link CallAdapterSubscribers} 'captionsReceived' event.
  *
- * @beta
+ * @public
  */
 export declare type CaptionsReceivedListener = (event: {
     captionsInfo: CaptionsInfo;
@@ -4378,7 +4378,7 @@ export declare interface CommonCallAdapter extends AdapterState<CallAdapterState
 /**
  * Common optional parameters to create {@link AzureCommunicationCallAdapter} or {@link TeamsCallAdapter}
  *
- * @beta
+ * @public
  */
 export declare type CommonCallAdapterOptions = {
     /**
@@ -6947,7 +6947,7 @@ export declare interface IncomingCallState {
 /**
  * Callback for {@link CallAdapterSubscribers} 'isCaptionLanguageChanged' event.
  *
- * @beta
+ * @public
  */
 export declare type IsCaptionLanguageChangedListener = (event: {
     activeCaptionLanguage: string;
@@ -6956,7 +6956,7 @@ export declare type IsCaptionLanguageChangedListener = (event: {
 /**
  * Callback for {@link CallAdapterSubscribers} 'isCaptionsActiveChanged' event.
  *
- * @beta
+ * @public
  */
 export declare type IsCaptionsActiveChangedListener = (event: {
     isActive: boolean;
@@ -6994,7 +6994,7 @@ export declare type IsSpeakingChangedListener = (event: {
 /**
  * Callback for {@link CallAdapterSubscribers} 'isSpokenLanguageChanged' event.
  *
- * @beta
+ * @public
  */
 export declare type IsSpokenLanguageChangedListener = (event: {
     activeSpokenLanguage: string;
@@ -7109,7 +7109,7 @@ export declare interface LocalVideoStreamState {
     view?: VideoStreamRendererViewState;
     /**
      * Stores the state of the video effects.
-     * @beta
+     * @public
      */
     videoEffects?: LocalVideoStreamVideoEffectsState;
 }
@@ -7117,7 +7117,7 @@ export declare interface LocalVideoStreamState {
 /**
  * State only version of a LocalVideoStream's {@link @azure/communication-calling#VideoEffectsFeature}.
  *
- * @beta
+ * @public
  */
 export declare interface LocalVideoStreamVideoEffectsState {
     /**
@@ -7967,14 +7967,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>;
 
@@ -8927,7 +8927,7 @@ export declare interface SitePermissionsStyles extends BaseCustomStyles {
 }
 
 /**
- * @beta
+ * @public
  * spoken language strings for captions setting modal
  */
 export declare interface SpokenLanguageStrings {
@@ -9209,7 +9209,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 +9267,7 @@ export declare interface SystemMessageCommon extends MessageCommon {
 /**
  * Optional parameters to create {@link TeamsCallAdapter}
  *
- * @beta
+ * @public
  */
 export declare type TeamsAdapterOptions = CommonCallAdapterOptions;
 
@@ -9889,7 +9889,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 +9901,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 +9918,7 @@ export declare type VideoBackgroundEffectsDependency = {
 /**
  * Contains the attibutes of a background image like url, name etc.
  *
- * @beta
+ * @public
  */
 export declare interface VideoBackgroundImage {
     /**
@@ -9938,7 +9938,7 @@ export declare interface VideoBackgroundImage {
 /**
  * Contains the attibutes to remove video background effect
  *
- * @beta
+ * @public
  */
 export declare interface VideoBackgroundNoEffect {
     /**
@@ -9950,7 +9950,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-202309020012';
+var telemetryVersion = '1.8.0-alpha-202309070012';
 
 // 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
  */
@@ -1955,7 +1955,7 @@ class CallContext$2 {
             }
         });
     }
-    /* @conditional-compile-remove(rooms) */
+    /* @conditional-compile-remove(rooms) */ /* @conditional-compile-remove(capabilities) */
     setRole(callId, role) {
         this.modifyState((draft) => {
             const call = draft.calls[this._callIdHistory.latestCallId(callId)];
@@ -3586,7 +3586,7 @@ class CallSubscriber {
             this._call.on('remoteParticipantsUpdated', this.remoteParticipantsUpdated);
             this._call.on('localVideoStreamsUpdated', this.localVideoStreamsUpdated);
             this._call.on('isMutedChanged', this.isMuteChanged);
-            /* @conditional-compile-remove(rooms) */
+            /* @conditional-compile-remove(rooms) */ /* @conditional-compile-remove(capabilities) */
             this._call.on('roleChanged', this.callRoleChangedHandler);
             this._call.feature(communicationCalling.Features.DominantSpeakers).on('dominantSpeakersChanged', this.dominantSpeakersChanged);
             /* @conditional-compile-remove(total-participant-count) */
@@ -3612,7 +3612,7 @@ class CallSubscriber {
             this._call.off('remoteParticipantsUpdated', this.remoteParticipantsUpdated);
             this._call.off('localVideoStreamsUpdated', this.localVideoStreamsUpdated);
             this._call.off('isMutedChanged', this.isMuteChanged);
-            /* @conditional-compile-remove(rooms) */
+            /* @conditional-compile-remove(rooms) */ /* @conditional-compile-remove(capabilities) */
             this._call.off('roleChanged', this.callRoleChangedHandler);
             /* @conditional-compile-remove(total-participant-count) */
             this._call.off('totalParticipantCountChanged', this.totalParticipantCountChangedHandler);
@@ -3662,7 +3662,7 @@ class CallSubscriber {
         this.isMuteChanged = () => {
             this._context.setCallIsMicrophoneMuted(this._callIdRef.callId, this._call.isMuted);
         };
-        /* @conditional-compile-remove(rooms) */
+        /* @conditional-compile-remove(rooms) */ /* @conditional-compile-remove(capabilities) */
         this.callRoleChangedHandler = () => {
             this._context.setRole(this._callIdRef.callId, this._call.role);
         };
@@ -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);
                 }
             }
         });
@@ -17667,6 +17667,14 @@ const _CaptionsSettingsModal = (props) => {
             };
         });
     }, [supportedCaptionLanguages, captionLanguageStrings]);
+    const sortedSpokenLanguageDropdownOptions = React.useMemo(() => {
+        const copy = [...spokenLanguageDropdownOptions];
+        return copy.sort((a, b) => (a.text > b.text ? 1 : -1));
+    }, [spokenLanguageDropdownOptions]);
+    const sortedCaptionLanguageDropdownOptions = React.useMemo(() => {
+        const copy = [...captionLanguageDropdownOptions];
+        return copy.sort((a, b) => (a.text > b.text ? 1 : -1));
+    }, [captionLanguageDropdownOptions]);
     const onSpokenLanguageChange = (event, option) => {
         if (option) {
             setSelectedSpokenLanguage(option);
@@ -17686,17 +17694,17 @@ const _CaptionsSettingsModal = (props) => {
             ? currentCaptionLanguage
             : _spokenLanguageToCaptionLanguage[placeholderSpokenLanguage];
         return (React__default['default'].createElement(react.Stack, null,
-            React__default['default'].createElement(react.Dropdown, { label: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsSpokenLanguageDropdownLabel, selectedKey: selectedSpokenLanguage ? selectedSpokenLanguage.key : undefined, onChange: onSpokenLanguageChange, calloutProps: calloutProps, placeholder: placeholderSpokenLanguage, options: spokenLanguageDropdownOptions, styles: dropdownStyles }),
+            React__default['default'].createElement(react.Dropdown, { label: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsSpokenLanguageDropdownLabel, selectedKey: selectedSpokenLanguage ? selectedSpokenLanguage.key : undefined, onChange: onSpokenLanguageChange, calloutProps: calloutProps, placeholder: placeholderSpokenLanguage, options: sortedSpokenLanguageDropdownOptions, styles: dropdownStyles }),
             React__default['default'].createElement(react.Text, { className: dropdownInfoTextStyle(theme) }, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsSpokenLanguageDropdownInfoText),
             changeCaptionLanguage && (React__default['default'].createElement(React__default['default'].Fragment, null,
-                React__default['default'].createElement(react.Dropdown, { label: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCaptionLanguageDropdownLabel, selectedKey: selectedCaptionLanguage ? selectedCaptionLanguage.key : undefined, onChange: onCaptionLanguageChange, calloutProps: calloutProps, placeholder: placeholderCaptionLanguage, options: captionLanguageDropdownOptions, styles: dropdownStyles }),
+                React__default['default'].createElement(react.Dropdown, { label: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCaptionLanguageDropdownLabel, selectedKey: selectedCaptionLanguage ? selectedCaptionLanguage.key : undefined, onChange: onCaptionLanguageChange, calloutProps: calloutProps, placeholder: placeholderCaptionLanguage, options: sortedCaptionLanguageDropdownOptions, styles: dropdownStyles }),
                 React__default['default'].createElement(react.Text, { className: dropdownInfoTextStyle(theme) }, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCaptionLanguageDropdownInfoText)))));
     }, [
         calloutProps,
         currentSpokenLanguage,
         currentCaptionLanguage,
-        spokenLanguageDropdownOptions,
-        captionLanguageDropdownOptions,
+        sortedSpokenLanguageDropdownOptions,
+        sortedCaptionLanguageDropdownOptions,
         selectedCaptionLanguage,
         selectedSpokenLanguage,
         strings === null || strings === void 0 ? void 0 : strings.captionsSettingsSpokenLanguageDropdownInfoText,
@@ -18328,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:
@@ -23146,7 +23156,7 @@ const Camera = (props) => {
     var _a, _b, _c;
     const cameraButtonProps = usePropsFor$1(CameraButton);
     const styles = React.useMemo(() => { var _a; return concatButtonBaseStyles((_a = props.styles) !== null && _a !== void 0 ? _a : {}); }, [props.styles]);
-    /* @conditional-compile-remove(rooms) */
+    /* @conditional-compile-remove(rooms) */ /* @conditional-compile-remove(capabilities) */
     const adapter = useAdapter();
     /* @conditional-compile-remove(rooms) */
     const isRoomsCall = adapter.getState().isRoomsCall;
@@ -23160,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.
@@ -23377,7 +23387,7 @@ const Microphone = (props) => {
     const callStatus = useSelector$1(getCallStatus);
     const isLocalMicrophoneEnabled = useSelector$1(getLocalMicrophoneEnabled);
     const strings = useLocale().strings.call;
-    /* @conditional-compile-remove(rooms) */
+    /* @conditional-compile-remove(rooms) */ /* @conditional-compile-remove(capabilities) */
     const adapter = useAdapter();
     /* @conditional-compile-remove(rooms) */
     const isRoomsCall = adapter.getState().isRoomsCall;
@@ -23709,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(() => ({
@@ -23717,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
@@ -23734,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)) {
@@ -23839,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 })))));
@@ -24421,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) */
@@ -24654,8 +24664,12 @@ const CaptionSettingsDrawer = (props) => {
             secondaryIconProps: props.currentLanguage === languageCode ? { iconName: 'Accept' } : undefined
         }));
     }, [props.currentLanguage, props.supportedLanguageStrings, onDrawerItemClick]);
+    const sortedDrawerItems = React.useMemo(() => {
+        const copy = [...drawerItems];
+        return copy.sort((a, b) => (a.text && b.text && a.text > b.text ? 1 : -1));
+    }, [drawerItems]);
     /* @conditional-compile-remove(close-captions) */
-    return (React__default['default'].createElement(_DrawerMenu, { heading: (_a = props.strings) === null || _a === void 0 ? void 0 : _a.menuTitle, items: drawerItems !== null && drawerItems !== void 0 ? drawerItems : [], onLightDismiss: () => {
+    return (React__default['default'].createElement(_DrawerMenu, { heading: (_a = props.strings) === null || _a === void 0 ? void 0 : _a.menuTitle, items: sortedDrawerItems !== null && sortedDrawerItems !== void 0 ? sortedDrawerItems : [], onLightDismiss: () => {
             props.setCurrentLanguage(props.currentLanguage);
             props.onLightDismiss();
         }, styles: captionSettingsDrawerStyles(theme) }));
@@ -24710,7 +24724,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);
@@ -26496,7 +26510,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) */
@@ -27444,7 +27458,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, 
@@ -28038,7 +28052,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
@@ -31948,7 +31962,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')); });
@@ -31978,7 +31992,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) => {