@azure/communication-react 1.14.0 → 1.14.1-alpha-202403261958

package/dist/dist-esm/react-components/src/types/SurveyIssues.js.map

@@ -1 +1 @@
-{"version":3,"file":"SurveyIssues.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/types/SurveyIssues.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/**\n * @beta\n * Corresponding texts to each call issue\n */\nexport interface SurveyIssues {\n  overallRating: {\n    callCannotJoin: string;\n    callCannotInvite: string;\n    hadToRejoin: string;\n    callEndedUnexpectedly: string;\n    otherIssues: string;\n  };\n  audioRating: {\n    noLocalAudio: string;\n    noRemoteAudio: string;\n    echo: string;\n    audioNoise: string;\n    lowVolume: string;\n    audioStoppedUnexpectedly: string;\n    distortedSpeech: string;\n    audioInterruption: string;\n    otherIssues: string;\n  };\n  videoRating: {\n    noVideoReceived: string;\n    noVideoSent: string;\n    lowQuality: string;\n    freezes: string;\n    stoppedUnexpectedly: string;\n    darkVideoReceived: string;\n    audioVideoOutOfSync: string;\n    otherIssues: string;\n  };\n  screenshareRating: {\n    noContentLocal: string;\n    noContentRemote: string;\n    cannotPresent: string;\n    lowQuality: string;\n    freezes: string;\n    stoppedUnexpectedly: string;\n    largeDelay: string;\n    otherIssues: string;\n  };\n}"]}
+{"version":3,"file":"SurveyIssues.js","sourceRoot":"","sources":["../../../../../../react-components/src/types/SurveyIssues.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/**\n * @beta\n * Corresponding texts to each call issue\n */\nexport interface SurveyIssues {\n  overallRating: {\n    callCannotJoin: string;\n    callCannotInvite: string;\n    hadToRejoin: string;\n    callEndedUnexpectedly: string;\n    otherIssues: string;\n  };\n  audioRating: {\n    noLocalAudio: string;\n    noRemoteAudio: string;\n    echo: string;\n    audioNoise: string;\n    lowVolume: string;\n    audioStoppedUnexpectedly: string;\n    distortedSpeech: string;\n    audioInterruption: string;\n    otherIssues: string;\n  };\n  videoRating: {\n    noVideoReceived: string;\n    noVideoSent: string;\n    lowQuality: string;\n    freezes: string;\n    stoppedUnexpectedly: string;\n    darkVideoReceived: string;\n    audioVideoOutOfSync: string;\n    otherIssues: string;\n  };\n  screenshareRating: {\n    noContentLocal: string;\n    noContentRemote: string;\n    cannotPresent: string;\n    lowQuality: string;\n    freezes: string;\n    stoppedUnexpectedly: string;\n    largeDelay: string;\n    otherIssues: string;\n  };\n}\n"]}

package/dist/dist-esm/react-components/src/types/SurveyIssuesHeadingStrings.js.map

@@ -1 +1 @@
-{"version":3,"file":"SurveyIssuesHeadingStrings.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/types/SurveyIssuesHeadingStrings.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/**\n * @beta\n * Corresponding texts to each call issue category\n */\nexport interface SurveyIssuesHeadingStrings {\n  overallRating: string;\n  audioRating: string;\n  videoRating: string;\n  screenshareRating: string;\n}"]}
+{"version":3,"file":"SurveyIssuesHeadingStrings.js","sourceRoot":"","sources":["../../../../../../react-components/src/types/SurveyIssuesHeadingStrings.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/**\n * @beta\n * Corresponding texts to each call issue category\n */\nexport interface SurveyIssuesHeadingStrings {\n  overallRating: string;\n  audioRating: string;\n  videoRating: string;\n  screenshareRating: string;\n}\n"]}

package/dist/dist-esm/react-components/src/types/VideoGalleryParticipant.d.ts

@@ -1,4 +1,7 @@
+import { ParticipantState } from './ParticipantListParticipant';
 import { RaisedHand } from './ParticipantListParticipant';
+import { Reaction } from './ParticipantListParticipant';
+import { Spotlight } from './ParticipantListParticipant';
 /**
  * Scaling mode of a {@link VideoGalleryStream}.
  *
@@ -32,6 +35,8 @@ export type VideoGalleryParticipant = {
     videoStream?: VideoGalleryStream;
     /** Whether participant is screen sharing or not */
     isScreenSharingOn?: boolean;
+    /** Whether participant is spotlighted **/
+    spotlight?: Spotlight;
 };
 /**
  * Video stream of a participant in {@link VideoGallery}.
@@ -81,6 +86,12 @@ export interface CreateVideoStreamViewResult {
 export interface VideoGalleryLocalParticipant extends VideoGalleryParticipant {
     /** Whether local participant is raised a hand */
     raisedHand?: RaisedHand;
+    /**
+     * Whether local participant has reacted
+     *
+     * @beta
+     * */
+    reaction?: Reaction;
 }
 /**
  * The state of a remote participant in the {@link VideoGallery}.
@@ -92,7 +103,18 @@ export interface VideoGalleryRemoteParticipant extends VideoGalleryParticipant {
     isSpeaking?: boolean;
     /** Video stream of shared screen */
     screenShareStream?: VideoGalleryStream;
+    /**
+     * @beta
+     * The connection state of the participant. For example, 'Hold', 'Connecting' etc.
+     */
+    state?: ParticipantState;
     /** Whether participant is raised a hand */
     raisedHand?: RaisedHand;
+    /**
+     * Whether participant has reacted
+     *
+     * @beta
+     * */
+    reaction?: Reaction;
 }
 //# sourceMappingURL=VideoGalleryParticipant.d.ts.map

package/dist/dist-esm/react-components/src/types/VideoGalleryParticipant.js

@@ -1,2 +1,4 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
 export {};
 //# sourceMappingURL=VideoGalleryParticipant.js.map

package/dist/dist-esm/react-components/src/types/VideoGalleryParticipant.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoGalleryParticipant.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/types/VideoGalleryParticipant.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n/* @conditional-compile-remove(raise-hand) */\nimport { RaisedHand } from './ParticipantListParticipant';\n/**\n * Scaling mode of a {@link VideoGalleryStream}.\n *\n * @public\n */\nexport type ViewScalingMode = 'Stretch' | 'Crop' | 'Fit';\n\n/**\n * Options to control how video streams are rendered.\n *\n * @public\n */\nexport declare interface VideoStreamOptions {\n  /** Whether the video stream is mirrored or not */\n  isMirrored?: boolean;\n  /** Scaling mode. It can be `Stretch`, `Crop` or `Fit` */\n  scalingMode?: ViewScalingMode;\n}\n\n/**\n * The state of a participant in the {@link VideoGallery}.\n *\n * @public\n */\nexport type VideoGalleryParticipant = {\n  /** User ID of participant */\n  userId: string;\n  /** Whether participant is muted */\n  isMuted?: boolean;\n  /** Display name of participant */\n  displayName?: string;\n  /** Video stream of participant */\n  videoStream?: VideoGalleryStream;\n  /** Whether participant is screen sharing or not */\n  isScreenSharingOn?: boolean;\n};\n\n/**\n * Video stream of a participant in {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoGalleryStream {\n  /** ID of the video stream */\n  id?: number;\n  /** Whether the video stream is available or not */\n  isAvailable?: boolean;\n  /** Whether the video stream is receiving data or not */\n  isReceiving?: boolean;\n  /** Whether the video stream is mirrored or not */\n  isMirrored?: boolean;\n  /** Render element of the video stream */\n  renderElement?: HTMLElement;\n  /** Scaling mode of the video stream */\n  scalingMode?: ViewScalingMode;\n  /** Stream Size of the video stream */\n  streamSize?: {\n    width: number;\n    height: number;\n  };\n}\n\n/**\n * Object returned after creating a local or remote VideoStream.\n * This contains helper functions to manipulate the render of the stream.\n *\n * @public\n */\nexport interface CreateVideoStreamViewResult {\n  /** View handle of the rendered video stream */\n  view: {\n    /**\n     * Update the scale mode for this view.\n     * @param scalingMode - The new scale mode.\n     */\n    updateScalingMode: (scalingMode: ViewScalingMode) => Promise<void>;\n  };\n}\n\n// set the required attribs in selector. (Further simplifying our component logic) For example\n// isLocalVideoReady can be calculated inside selector.\n/**\n * The state of the local participant in the {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoGalleryLocalParticipant extends VideoGalleryParticipant {\n  /* @conditional-compile-remove(raise-hand) */\n  /** Whether local participant is raised a hand */\n  raisedHand?: RaisedHand;\n}\n\n/**\n * The state of a remote participant in the {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoGalleryRemoteParticipant extends VideoGalleryParticipant {\n  /** Whether participant is speaking or not */\n  isSpeaking?: boolean;\n  /** Video stream of shared screen */\n  screenShareStream?: VideoGalleryStream;\n  /* @conditional-compile-remove(raise-hand) */\n  /** Whether participant is raised a hand */\n  raisedHand?: RaisedHand;\n}"]}
+{"version":3,"file":"VideoGalleryParticipant.js","sourceRoot":"","sources":["../../../../../../react-components/src/types/VideoGalleryParticipant.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(one-to-n-calling) */\n/* @conditional-compile-remove(PSTN-calls) */\nimport { ParticipantState } from './ParticipantListParticipant';\n\nimport { RaisedHand } from './ParticipantListParticipant';\n/* @conditional-compile-remove(reaction) */\nimport { Reaction } from './ParticipantListParticipant';\n/* @conditional-compile-remove(spotlight) */\nimport { Spotlight } from './ParticipantListParticipant';\n/**\n * Scaling mode of a {@link VideoGalleryStream}.\n *\n * @public\n */\nexport type ViewScalingMode = 'Stretch' | 'Crop' | 'Fit';\n\n/**\n * Options to control how video streams are rendered.\n *\n * @public\n */\nexport declare interface VideoStreamOptions {\n  /** Whether the video stream is mirrored or not */\n  isMirrored?: boolean;\n  /** Scaling mode. It can be `Stretch`, `Crop` or `Fit` */\n  scalingMode?: ViewScalingMode;\n}\n\n/**\n * The state of a participant in the {@link VideoGallery}.\n *\n * @public\n */\nexport type VideoGalleryParticipant = {\n  /** User ID of participant */\n  userId: string;\n  /** Whether participant is muted */\n  isMuted?: boolean;\n  /** Display name of participant */\n  displayName?: string;\n  /** Video stream of participant */\n  videoStream?: VideoGalleryStream;\n  /** Whether participant is screen sharing or not */\n  isScreenSharingOn?: boolean;\n  /* @conditional-compile-remove(spotlight) */\n  /** Whether participant is spotlighted **/\n  spotlight?: Spotlight;\n};\n\n/**\n * Video stream of a participant in {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoGalleryStream {\n  /** ID of the video stream */\n  id?: number;\n  /** Whether the video stream is available or not */\n  isAvailable?: boolean;\n  /** Whether the video stream is receiving data or not */\n  isReceiving?: boolean;\n  /** Whether the video stream is mirrored or not */\n  isMirrored?: boolean;\n  /** Render element of the video stream */\n  renderElement?: HTMLElement;\n  /** Scaling mode of the video stream */\n  scalingMode?: ViewScalingMode;\n  /** Stream Size of the video stream */\n  streamSize?: { width: number; height: number };\n}\n\n/**\n * Object returned after creating a local or remote VideoStream.\n * This contains helper functions to manipulate the render of the stream.\n *\n * @public\n */\nexport interface CreateVideoStreamViewResult {\n  /** View handle of the rendered video stream */\n  view: {\n    /**\n     * Update the scale mode for this view.\n     * @param scalingMode - The new scale mode.\n     */\n    updateScalingMode: (scalingMode: ViewScalingMode) => Promise<void>;\n  };\n}\n\n// set the required attribs in selector. (Further simplifying our component logic) For example\n// isLocalVideoReady can be calculated inside selector.\n/**\n * The state of the local participant in the {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoGalleryLocalParticipant extends VideoGalleryParticipant {\n  /** Whether local participant is raised a hand */\n  raisedHand?: RaisedHand;\n  /* @conditional-compile-remove(reaction) */\n  /**\n   * Whether local participant has reacted\n   *\n   * @beta\n   * */\n  reaction?: Reaction;\n}\n\n/**\n * The state of a remote participant in the {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoGalleryRemoteParticipant extends VideoGalleryParticipant {\n  /** Whether participant is speaking or not */\n  isSpeaking?: boolean;\n  /** Video stream of shared screen */\n  screenShareStream?: VideoGalleryStream;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * @beta\n   * The connection state of the participant. For example, 'Hold', 'Connecting' etc.\n   */\n  state?: ParticipantState;\n  /** Whether participant is raised a hand */\n  raisedHand?: RaisedHand;\n  /* @conditional-compile-remove(reaction) */\n  /**\n   * Whether participant has reacted\n   *\n   * @beta\n   * */\n  reaction?: Reaction;\n}\n"]}

package/dist/dist-esm/react-components/src/types/index.d.ts

@@ -11,4 +11,5 @@ export * from './SurveyIssues';
 export * from './SurveyIssuesHeadingStrings';
 export * from './CallSurveyImprovementSuggestions';
 export * from './ReactionTypes';
+export * from './Attachment';
 //# sourceMappingURL=index.d.ts.map

package/dist/dist-esm/react-components/src/types/index.js

@@ -13,4 +13,5 @@ export * from './SurveyIssues';
 export * from './SurveyIssuesHeadingStrings';
 export * from './CallSurveyImprovementSuggestions';
 export * from './ReactionTypes';
+export * from './Attachment';
 //# sourceMappingURL=index.js.map

package/dist/dist-esm/react-components/src/types/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/types/index.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,YAAY,CAAC;AAC3B,cAAc,0BAA0B,CAAC;AACzC,cAAc,oCAAoC,CAAC;AACnD,cAAc,gBAAgB,CAAC;AAC/B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,oCAAoC,CAAC;AACnD,cAAc,iBAAiB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nexport * from './ChatMessage';\nexport * from './ComponentSlotStyle';\nexport * from './CustomStylesProps';\nexport * from './VideoGalleryParticipant';\nexport * from './CommunicationParticipant';\nexport * from './ParticipantListParticipant';\nexport * from './OnRender';\nexport * from './ReadReceiptsBySenderId';\nexport * from './CaptionsAvailableLanguageStrings';\nexport * from './SurveyIssues';\nexport * from './SurveyIssuesHeadingStrings';\nexport * from './CallSurveyImprovementSuggestions';\nexport * from './ReactionTypes';"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../react-components/src/types/index.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,YAAY,CAAC;AAC3B,cAAc,0BAA0B,CAAC;AACzC,cAAc,oCAAoC,CAAC;AACnD,cAAc,gBAAgB,CAAC;AAC/B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,oCAAoC,CAAC;AACnD,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nexport * from './ChatMessage';\nexport * from './ComponentSlotStyle';\nexport * from './CustomStylesProps';\nexport * from './VideoGalleryParticipant';\nexport * from './CommunicationParticipant';\nexport * from './ParticipantListParticipant';\nexport * from './OnRender';\nexport * from './ReadReceiptsBySenderId';\nexport * from './CaptionsAvailableLanguageStrings';\nexport * from './SurveyIssues';\nexport * from './SurveyIssuesHeadingStrings';\nexport * from './CallSurveyImprovementSuggestions';\nexport * from './ReactionTypes';\nexport * from './Attachment';\n"]}

package/dist/dist-esm/react-composites/src/Logger.js.map

@@ -1 +1 @@
-{"version":3,"file":"Logger.js","sourceRoot":"","sources":["../../../../preprocess-dist/react-composites/src/Logger.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAEnD;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,kBAAkB,CAAC,+BAA+B,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { createClientLogger } from '@azure/logger';\n\n/**\n * @private\n */\nexport const compositeLogger = createClientLogger('communication-react:composite');"]}
+{"version":3,"file":"Logger.js","sourceRoot":"","sources":["../../../../../react-composites/src/Logger.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAEnD;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,kBAAkB,CAAC,+BAA+B,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { createClientLogger } from '@azure/logger';\n\n/**\n * @private\n */\nexport const compositeLogger = createClientLogger('communication-react:composite');\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/CallComposite.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
+import { CallSurveyImprovementSuggestions } from "../../../../react-components/src";
 import { BaseCompositeProps } from '../common/BaseComposite';
 import { CallCompositeIcons } from '../common/icons';
 import { CommonCallAdapter } from './adapter/CallAdapter';
 import { CallControlOptions } from './types/CallControlOptions';
+import { CallSurvey } from '@azure/communication-calling';
 import { MobileChatSidePaneTabHeaderProps } from '../common/TabHeader';
 import { InjectedSidePaneProps } from './components/SidePane/SidePaneProvider';
 import { VideoGalleryLayout } from "../../../../react-components/src";
@@ -33,6 +35,28 @@ export interface CallCompositeProps extends BaseCompositeProps<CallCompositeIcon
      */
     options?: CallCompositeOptions;
 }
+/**
+ * Device Checks.
+ * Choose whether or not to block starting a call depending on camera and microphone permission options.
+ *
+ * @beta
+ */
+export interface DeviceCheckOptions {
+    /**
+     * Camera Permission prompts for your call.
+     * 'required' - requires the permission to be allowed before permitting the user join the call.
+     * 'optional' - permission can be disallowed and the user is still permitted to join the call.
+     * 'doNotPrompt' - permission is not required and the user is not prompted to allow the permission.
+     */
+    camera: 'required' | 'optional' | 'doNotPrompt';
+    /**
+     * Microphone permission prompts for your call.
+     * 'required' - requires the permission to be allowed before permitting the user join the call.
+     * 'optional' - permission can be disallowed and the user is still permitted to join the call.
+     * 'doNotPrompt' - permission is not required and the user is not prompted to allow the permission.
+     */
+    microphone: 'required' | 'optional' | 'doNotPrompt';
+}
 /**
  * Menu options for remote video tiles in {@link VideoGallery}.
  *
@@ -81,6 +105,56 @@ export type CallCompositeOptions = {
      * @defaultValue true
      */
     callControls?: boolean | CallControlOptions;
+    /**
+     * Device permissions check options for your call.
+     * Here you can choose what device permissions you prompt the user for,
+     * as well as what device permissions must be accepted before starting a call.
+     */
+    deviceChecks?: DeviceCheckOptions;
+    /**
+     * Callback you may provide to supply users with further steps to troubleshoot why they have been
+     * unable to grant your site the required permissions for the call.
+     *
+     * @example
+     * ```ts
+     * onPermissionsTroubleshootingClick: () =>
+     *  window.open('https://contoso.com/permissions-troubleshooting', '_blank');
+     * ```
+     *
+     * @remarks
+     * if this is not supplied, the composite will not show a 'further troubleshooting' link.
+     */
+    onPermissionsTroubleshootingClick?: (permissionsState: {
+        camera: PermissionState;
+        microphone: PermissionState;
+    }) => void;
+    /**
+     * Callback you may provide to supply users with further steps to troubleshoot why they have been
+     * having network issues when connecting to the call.
+     *
+     * @example
+     * ```ts
+     * onNetworkingTroubleShootingClick?: () =>
+     *  window.open('https://contoso.com/network-troubleshooting', '_blank');
+     * ```
+     *
+     * @remarks
+     * if this is not supplied, the composite will not show a 'network troubleshooting' link.
+     */
+    onNetworkingTroubleShootingClick?: () => void;
+    /**
+     * Callback you may provide to supply users with a provided page to showcase supported browsers by ACS.
+     *
+     * @example
+     * ```ts
+     * onBrowserTroubleShootingClick?: () =>
+     *  window.open('https://contoso.com/browser-troubleshooting', '_blank');
+     * ```
+     *
+     * @remarks
+     * if this is not supplied, the composite will not show a unsupported browser page.
+     */
+    onEnvironmentInfoTroubleshootingClick?: () => void;
     /**
      * Remote participant video tile menu options
      */
@@ -100,6 +174,40 @@ export type CallCompositeOptions = {
          */
         layout?: VideoGalleryLayout;
     };
+    /**
+     * Options for end of call survey
+     */
+    surveyOptions?: {
+        /**
+         * Disable call survey at the end of a call.
+         * @defaultValue false
+         */
+        disableSurvey?: boolean;
+        /**
+         * Optional callback to redirect users to custom screens when survey is done, note that default end call screen will be shown if this callback is not provided
+         * This callback can be used to redirect users to different screens depending on survey state, whether it is submitted, skipped or has a problem when submitting the survey
+         */
+        onSurveyClosed?: (surveyState: 'sent' | 'skipped' | 'error', surveyError?: string) => void;
+        /**
+         * Optional callback to handle survey data including free form text response
+         * Note that free form text response survey option is only going to be enabled when this callback is provided
+         * User will need to handle all free form text response on their own
+         */
+        onSurveySubmitted?: (callId: string, surveyId: string, 
+        /**
+         * This is the survey results containing star survey data and API tag survey data.
+         * This part of the result will always be sent to the calling sdk
+         * This callback provides user with the ability to gain access to survey data
+         */
+        submittedSurvey: CallSurvey, 
+        /**
+         * This is the survey results containing free form text
+         * This part of the result will not be handled by composites
+         * User will need to collect and handle this information 100% on their own
+         * Free form text survey is not going to show in the UI if onSurveySubmitted is not populated
+         */
+        improvementSuggestions: CallSurveyImprovementSuggestions) => Promise<void>;
+    };
     /**
      * Options for setting additional customizations related to personalized branding.
      */
@@ -139,6 +247,16 @@ export type CallCompositeOptions = {
             url: string;
         };
     };
+    /**
+     * Options for settings related to spotlight.
+     */
+    spotlight?: {
+        /**
+         * Flag to hide the menu buttons to start and stop spotlight for remote participants and the local participant.
+         * @defaultValue false
+         */
+        hideSpotlightButtons?: boolean;
+    };
 };
 /**
  * A customizable UI composite for calling experience.

package/dist/dist-esm/react-composites/src/composites/CallComposite/CallComposite.js

@@ -26,6 +26,10 @@ import { leavingPageStyle, mainScreenContainerStyleDesktop, mainScreenContainerS
 import { LayerHost, mergeStyles } from '@fluentui/react';
 import { modalLayerHostStyle } from '../common/styles/ModalLocalAndRemotePIP.styles';
 import { useId } from '@fluentui/react-hooks';
+/* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
+import { HoldPage } from './pages/HoldPage';
+/* @conditional-compile-remove(unsupported-browser) */
+import { UnsupportedBrowserPage } from './pages/UnsupportedBrowser';
 import { SidePaneProvider } from './components/SidePane/SidePaneProvider';
 import { filterLatestErrors, getEndedCallPageProps, trackErrorAsDismissed, updateTrackedErrorsWithActiveErrors } from './utils';
 import { usePropsFor } from './hooks/usePropsFor';
@@ -35,11 +39,13 @@ import { capabilitiesChangedInfoAndRoleSelector } from './selectors/capabilities
 /* @conditional-compile-remove(capabilities) */
 import { useTrackedCapabilityChangedNotifications } from './utils/TrackCapabilityChangedNotifications';
 import { useEndedCallConsoleErrors } from './utils/useConsoleErrors';
+/* @conditional-compile-remove(end-of-call-survey) */
+import { SurveyPage } from './pages/SurveyPage';
 const isShowing = (overrideSidePane) => {
     return !!(overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.isActive);
 };
 const MainScreen = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     const adapter = useAdapter();
     const { camerasCount, microphonesCount } = useSelector(deviceCountSelector);
     const hasCameras = camerasCount > 0;
@@ -48,17 +54,20 @@ const MainScreen = (props) => {
         (() => __awaiter(void 0, void 0, void 0, function* () {
             var _a;
             const constrain = getQueryOptions({
-                /* @conditional-compile-remove(rooms) */ role: (_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.role
+                role: (_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.role
             });
             yield adapter.askDevicePermission(constrain);
             adapter.queryCameras();
             adapter.queryMicrophones();
             adapter.querySpeakers();
         }))();
-    }, [adapter,
+    }, [
+        adapter,
         // Ensure we re-ask for permissions if the number of devices goes from 0 -> n during a call
         // as we cannot request permissions when there are no devices.
-        hasCameras, hasMicrophones]);
+        hasCameras,
+        hasMicrophones
+    ]);
     const { callInvitationUrl, onFetchAvatarPersonaData, onFetchParticipantMenuItems } = props;
     const page = useSelector(getPage);
     const endedCall = useSelector(getEndedCall);
@@ -100,22 +109,28 @@ const MainScreen = (props) => {
     const activeErrors = usePropsFor(ErrorBar).activeErrorMessages;
     const [trackedErrors, setTrackedErrors] = useState({});
     useEffect(() => {
-        setTrackedErrors(prev => updateTrackedErrorsWithActiveErrors(prev, activeErrors));
+        setTrackedErrors((prev) => updateTrackedErrorsWithActiveErrors(prev, activeErrors));
     }, [activeErrors]);
     const onDismissError = useCallback((error) => {
-        setTrackedErrors(prev => trackErrorAsDismissed(error.type, prev));
+        setTrackedErrors((prev) => trackErrorAsDismissed(error.type, prev));
     }, []);
     const latestErrors = useMemo(() => filterLatestErrors(activeErrors, trackedErrors), [activeErrors, trackedErrors]);
     const callees = useSelector(getTargetCallees);
     const locale = useLocale();
     const palette = useTheme().palette;
+    /* @conditional-compile-remove(PSTN-calls) */
+    const alternateCallerId = adapter.getState().alternateCallerId;
     const leavePageStyle = useMemo(() => leavingPageStyle(palette), [palette]);
     let pageElement;
+    const [pinnedParticipants, setPinnedParticipants] = useState([]);
     switch (page) {
         case 'configuration':
-            pageElement = React.createElement(ConfigurationPage, { mobileView: props.mobileView, startCallHandler: () => {
+            pageElement = (React.createElement(ConfigurationPage, { mobileView: props.mobileView, startCallHandler: () => {
                     if (callees) {
-                        adapter.startCall(callees);
+                        adapter.startCall(callees, 
+                        /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId
+                            ? { alternateCallerId: { phoneNumber: alternateCallerId } }
+                            : {});
                     }
                     else {
                         adapter.joinCall({
@@ -123,47 +138,78 @@ const MainScreen = (props) => {
                             cameraOn: 'keep'
                         });
                     }
-                }, updateSidePaneRenderer: setSidePaneRenderer, latestErrors: latestErrors, onDismissError: onDismissError, modalLayerHostId: props.modalLayerHostId, capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps, 
-                /* @conditional-compile-remove(custom-branding) */ logo: (_e = (_d = props.options) === null || _d === void 0 ? void 0 : _d.branding) === null || _e === void 0 ? void 0 : _e.logo, 
-                /* @conditional-compile-remove(custom-branding) */ backgroundImage: (_g = (_f = props.options) === null || _f === void 0 ? void 0 : _f.branding) === null || _g === void 0 ? void 0 : _g.backgroundImage });
+                }, updateSidePaneRenderer: setSidePaneRenderer, latestErrors: latestErrors, onDismissError: onDismissError, modalLayerHostId: props.modalLayerHostId, 
+                /* @conditional-compile-remove(call-readiness) */
+                deviceChecks: (_d = props.options) === null || _d === void 0 ? void 0 : _d.deviceChecks, 
+                /* @conditional-compile-remove(call-readiness) */
+                onPermissionsTroubleshootingClick: (_e = props.options) === null || _e === void 0 ? void 0 : _e.onPermissionsTroubleshootingClick, 
+                /* @conditional-compile-remove(call-readiness) */
+                onNetworkingTroubleShootingClick: (_f = props.options) === null || _f === void 0 ? void 0 : _f.onNetworkingTroubleShootingClick, 
+                /* @conditional-compile-remove(capabilities) */
+                capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps, 
+                /* @conditional-compile-remove(custom-branding) */
+                logo: (_h = (_g = props.options) === null || _g === void 0 ? void 0 : _g.branding) === null || _h === void 0 ? void 0 : _h.logo, 
+                /* @conditional-compile-remove(custom-branding) */
+                backgroundImage: (_k = (_j = props.options) === null || _j === void 0 ? void 0 : _j.branding) === null || _k === void 0 ? void 0 : _k.backgroundImage }));
             break;
         case 'accessDeniedTeamsMeeting':
-            pageElement = React.createElement(NoticePage, { iconName: "NoticePageAccessDeniedTeamsMeeting", title: locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedTitle, moreDetails: locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails, dataUiId: 'access-denied-teams-meeting-page' });
+            pageElement = (React.createElement(NoticePage, { iconName: "NoticePageAccessDeniedTeamsMeeting", title: locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedTitle, moreDetails: locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails, dataUiId: 'access-denied-teams-meeting-page' }));
             break;
         case 'removedFromCall':
-            pageElement = React.createElement(NoticePage, { iconName: "NoticePageRemovedFromCall", title: locale.strings.call.removedFromCallTitle, moreDetails: locale.strings.call.removedFromCallMoreDetails, dataUiId: 'removed-from-call-page' });
+            pageElement = (React.createElement(NoticePage, { iconName: "NoticePageRemovedFromCall", title: locale.strings.call.removedFromCallTitle, moreDetails: locale.strings.call.removedFromCallMoreDetails, dataUiId: 'removed-from-call-page' }));
             break;
         case 'joinCallFailedDueToNoNetwork':
-            pageElement = React.createElement(NoticePage, { iconName: "NoticePageJoinCallFailedDueToNoNetwork", title: locale.strings.call.failedToJoinCallDueToNoNetworkTitle, moreDetails: locale.strings.call.failedToJoinCallDueToNoNetworkMoreDetails, dataUiId: 'join-call-failed-due-to-no-network-page' });
+            pageElement = (React.createElement(NoticePage, { iconName: "NoticePageJoinCallFailedDueToNoNetwork", title: locale.strings.call.failedToJoinCallDueToNoNetworkTitle, moreDetails: locale.strings.call.failedToJoinCallDueToNoNetworkMoreDetails, dataUiId: 'join-call-failed-due-to-no-network-page' }));
             break;
         case 'leaving':
-            pageElement = React.createElement(NoticePage, { title: (_h = locale.strings.call.leavingCallTitle) !== null && _h !== void 0 ? _h : 'Leaving...', dataUiId: 'leaving-page', pageStyle: leavePageStyle, disableStartCallButton: true });
+            pageElement = (React.createElement(NoticePage, { title: (_l = locale.strings.call.leavingCallTitle) !== null && _l !== void 0 ? _l : 'Leaving...', dataUiId: 'leaving-page', pageStyle: leavePageStyle, disableStartCallButton: true }));
             break;
-        case 'leftCall':
-            {
-                const { title, moreDetails, disableStartCallButton, iconName } = getEndedCallPageProps(locale, endedCall);
-                pageElement = React.createElement(NoticePage, { iconName: iconName, title: title, moreDetails: callees ? '' : moreDetails, dataUiId: 'left-call-page', disableStartCallButton: disableStartCallButton });
+        case 'leftCall': {
+            const { title, moreDetails, disableStartCallButton, iconName } = getEndedCallPageProps(locale, endedCall);
+            /* @conditional-compile-remove(end-of-call-survey) */
+            if (!((_o = (_m = props.options) === null || _m === void 0 ? void 0 : _m.surveyOptions) === null || _o === void 0 ? void 0 : _o.disableSurvey)) {
+                pageElement = (React.createElement(SurveyPage, { dataUiId: 'left-call-page', surveyOptions: (_p = props.options) === null || _p === void 0 ? void 0 : _p.surveyOptions, iconName: iconName, title: title, moreDetails: moreDetails, disableStartCallButton: disableStartCallButton, mobileView: props.mobileView }));
                 break;
             }
+            pageElement = (React.createElement(NoticePage, { iconName: iconName, title: title, moreDetails: callees ? '' : moreDetails, dataUiId: 'left-call-page', disableStartCallButton: disableStartCallButton }));
+            break;
+        }
         case 'lobby':
-            pageElement = React.createElement(LobbyPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: latestErrors, onDismissError: onDismissError, 
-                /* @conditional-compile-remove(capabilities) */ capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps });
+            pageElement = (React.createElement(LobbyPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: latestErrors, onDismissError: onDismissError, 
+                /* @conditional-compile-remove(capabilities) */
+                capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps }));
             break;
         /* @conditional-compile-remove(call-transfer) */
         case 'transferring':
-            pageElement = React.createElement(TransferPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, onFetchAvatarPersonaData: onFetchAvatarPersonaData, latestErrors: latestErrors, onDismissError: onDismissError, 
-                /* @conditional-compile-remove(capabilities) */ capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps });
+            pageElement = (React.createElement(TransferPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, onFetchAvatarPersonaData: onFetchAvatarPersonaData, latestErrors: latestErrors, onDismissError: onDismissError, 
+                /* @conditional-compile-remove(capabilities) */
+                capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps }));
             break;
         case 'call':
-            pageElement = React.createElement(CallPage, { callInvitationURL: callInvitationUrl, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, onCloseChatPane: props.onCloseChatPane, latestErrors: latestErrors, onDismissError: onDismissError, galleryLayout: userSetGalleryLayout, onUserSetGalleryLayoutChange: setUserSetGalleryLayout, onSetUserSetOverflowGalleryPosition: setUserSetOverflowGalleryPosition, userSetOverflowGalleryPosition: userSetOverflowGalleryPosition, 
-                /* @conditional-compile-remove(capabilities) */ capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps });
+            pageElement = (React.createElement(CallPage, { callInvitationURL: callInvitationUrl, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, onCloseChatPane: props.onCloseChatPane, latestErrors: latestErrors, onDismissError: onDismissError, galleryLayout: userSetGalleryLayout, onUserSetGalleryLayoutChange: setUserSetGalleryLayout, onSetUserSetOverflowGalleryPosition: setUserSetOverflowGalleryPosition, userSetOverflowGalleryPosition: userSetOverflowGalleryPosition, 
+                /* @conditional-compile-remove(capabilities) */
+                capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps, pinnedParticipants: pinnedParticipants, setPinnedParticipants: setPinnedParticipants }));
+            break;
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+        case 'hold':
+            pageElement = (React.createElement(React.Fragment, null, React.createElement(HoldPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: latestErrors, onDismissError: onDismissError, 
+                /* @conditional-compile-remove(capabilities) */
+                capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps })));
             break;
     }
     useEndedCallConsoleErrors(endedCall);
+    /* @conditional-compile-remove(unsupported-browser) */
+    switch (page) {
+        case 'unsupportedEnvironment':
+            pageElement = (React.createElement(React.Fragment, null, 
+            /* @conditional-compile-remove(unsupported-browser) */
+            React.createElement(UnsupportedBrowserPage, { onTroubleshootingClick: (_q = props.options) === null || _q === void 0 ? void 0 : _q.onEnvironmentInfoTroubleshootingClick, environmentInfo: adapter.getState().environmentInfo })));
+            break;
+    }
     if (!pageElement) {
         throw new Error('Invalid call composite page');
     }
-    return React.createElement(SidePaneProvider, { sidePaneRenderer: sidePaneRenderer, overrideSidePane: injectedSidePaneProps }, pageElement);
+    return (React.createElement(SidePaneProvider, { sidePaneRenderer: sidePaneRenderer, overrideSidePane: injectedSidePaneProps }, pageElement));
 };
 /**
  * A customizable UI composite for calling experience.
@@ -183,7 +229,7 @@ export const CallCompositeInner = (props) => {
     const mainScreenContainerClassName = useMemo(() => {
         return mobileView ? mainScreenContainerStyleMobile : mainScreenContainerStyleDesktop;
     }, [mobileView]);
-    return React.createElement("div", { className: mainScreenContainerClassName },
+    return (React.createElement("div", { className: mainScreenContainerClassName },
         React.createElement(BaseProvider, Object.assign({}, props),
             React.createElement(CallAdapterProvider, { adapter: adapter },
                 React.createElement(MainScreen, { callInvitationUrl: callInvitationUrl, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, mobileView: mobileView, modalLayerHostId: modalLayerHostId, options: options, onSidePaneIdChange: props.onSidePaneIdChange, overrideSidePane: props.overrideSidePane, mobileChatTabHeader: props.mobileChatTabHeader, onCloseChatPane: props.onCloseChatPane }),
@@ -195,19 +241,15 @@ export const CallCompositeInner = (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.
-                React.createElement(LayerHost, { id: modalLayerHostId, className: mergeStyles(modalLayerHostStyle) }))));
+                React.createElement(LayerHost, { id: modalLayerHostId, className: mergeStyles(modalLayerHostStyle) })))));
 };
 const getQueryOptions = (options) => {
-    /* @conditional-compile-remove(rooms) */
     if (options.role === 'Consumer') {
         return {
             video: false,
             audio: true
         };
     }
-    return {
-        video: true,
-        audio: true
-    };
+    return { video: true, audio: true };
 };
 //# sourceMappingURL=CallComposite.js.map