@azure/communication-react 1.13.0-alpha-202402150012 → 1.13.0-alpha-202402161702

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js

@@ -2,5 +2,5 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-module.exports = '1.13.0-alpha-202402150012';
+module.exports = '1.13.0-alpha-202402161702';
 //# sourceMappingURL=telemetryVersion.js.map

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map

@@ -1 +1 @@
-{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.13.0-alpha-202402150012';\n"]}
+{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.13.0-alpha-202402161702';\n"]}

package/dist/dist-esm/calling-stateful-client/src/CallClientState.d.ts

@@ -499,7 +499,7 @@ export interface CallState {
 /**
  * Transfer feature state
  *
- * @beta
+ * @public
  */
 export interface TransferFeatureState {
     /**
@@ -512,7 +512,7 @@ export interface TransferFeatureState {
 /**
  * Transfer feature state
  *
- * @beta
+ * @public
  */
 export interface AcceptedTransfer {
     /**

package/dist/dist-esm/calling-stateful-client/src/CallClientState.js.map

@@ -1 +1 @@
-{"version":3,"file":"CallClientState.js","sourceRoot":"","sources":["../../../../../calling-stateful-client/src/CallClientState.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AA4vBlC;;;;GAIG;AACH,MAAM,OAAO,SAAU,SAAQ,KAAK;IAclC,YAAY,MAAuB,EAAE,UAAiB,EAAE,SAAgB;QACtE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;QAC7B,8EAA8E;QAC9E,IAAI,CAAC,SAAS,GAAG,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;QACnD,IAAI,CAAC,IAAI,GAAG,WAAW,CAAC;QACxB,IAAI,CAAC,OAAO,GAAG,GAAG,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC;IAC9D,CAAC;CACF","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  AudioDeviceInfo,\n  CallDirection,\n  CallEndReason,\n  CallerInfo,\n  CallState as CallStatus,\n  DeviceAccess,\n  DominantSpeakersInfo,\n  LatestMediaDiagnostics,\n  LatestNetworkDiagnostics,\n  MediaStreamType,\n  RemoteParticipantState as RemoteParticipantStatus,\n  ScalingMode,\n  VideoDeviceInfo\n} from '@azure/communication-calling';\n/* @conditional-compile-remove(capabilities) */\nimport { CapabilitiesChangeInfo, ParticipantCapabilities } from '@azure/communication-calling';\n/* @conditional-compile-remove(close-captions) */\nimport { CaptionsResultType } from '@azure/communication-calling';\n/* @conditional-compile-remove(video-background-effects) */\nimport { VideoEffectName } from '@azure/communication-calling';\n/* @conditional-compile-remove(teams-identity-support) */\nimport { CallKind } from '@azure/communication-calling';\n/* @conditional-compile-remove(unsupported-browser) */\nimport { EnvironmentInfo } from '@azure/communication-calling';\n/* @conditional-compile-remove(rooms) */ /* @conditional-compile-remove(capabilities) */\nimport { ParticipantRole } from '@azure/communication-calling';\nimport { CommunicationIdentifierKind } from '@azure/communication-common';\n/* @conditional-compile-remove(reaction) */\nimport { ReactionMessage } from '@azure/communication-calling';\n/* @conditional-compile-remove(spotlight) */\nimport { SpotlightedParticipant } from '@azure/communication-calling';\n\n/**\n * State only version of {@link @azure/communication-calling#CallAgent} except calls is moved to be a child directly of\n * {@link CallClientState} and not included here. The reason to have CallAgent's state proxied is to provide access to\n * displayName. We don't flatten CallAgent.displayName and put it in CallClientState because it would be ambiguious that\n * displayName is actually reliant on the creation/existence of CallAgent to be available.\n *\n * @public\n */\nexport interface CallAgentState {\n  /**\n   * Proxy of {@link @azure/communication-calling#CallAgent.displayName}.\n   */\n  displayName?: string;\n}\n\n/* @conditional-compile-remove(close-captions) */\n/**\n * @public\n */\nexport interface CaptionsInfo {\n  /**\n   * The state in which this caption data can be classified.\n   */\n  resultType: CaptionsResultType;\n  /**\n   * The information of the call participant who spoke the captioned text.\n   */\n  speaker: CallerInfo;\n  /**\n   * The language that the spoken words were interpretted as. Corresponds to the language specified in startCaptions / setSpokenLanguage.\n   */\n  spokenLanguage: string;\n  /**\n   * The caption text.\n   */\n  captionText: string;\n  /**\n   * Timestamp of when the captioned words were initially spoken.\n   */\n  timestamp: Date;\n  /**\n   * The language that the captions are presented in. Corresponds to the captionLanguage specified in startCaptions / setCaptionLanguage.\n   */\n  captionLanguage?: string;\n  /**\n   * The original spoken caption text prior to translating to subtitle language\n   */\n  spokenText?: string;\n}\n\n/* @conditional-compile-remove(close-captions) */\n/**\n * @public\n */\nexport interface CaptionsCallFeatureState {\n  /**\n   * supported spoken languages\n   */\n  supportedSpokenLanguages: string[];\n  /**\n   * array of received captions\n   */\n  captions: CaptionsInfo[];\n  /**\n   * whether captions is on/off\n   */\n  isCaptionsFeatureActive: boolean;\n  /**\n   * whether start captions button is clicked or now\n   */\n  startCaptionsInProgress: boolean;\n  /**\n   * supported caption languages\n   */\n  supportedCaptionLanguages: string[];\n  /**\n   * current spoken language\n   */\n  currentSpokenLanguage: string;\n  /**\n   * current caption language\n   */\n  currentCaptionLanguage: string;\n}\n\n/**\n * State only version of {@link @azure/communication-calling#TranscriptionCallFeature}. {@link StatefulCallClient} will\n * automatically listen for transcription state of the call and update the state exposed by {@link StatefulCallClient}\n * accordingly.\n *\n * @public\n */\nexport interface TranscriptionCallFeatureState {\n  /**\n   * Proxy of {@link @azure/communication-calling#TranscriptionCallFeature.isTranscriptionActive}.\n   */\n  isTranscriptionActive: boolean;\n}\n\n/* @conditional-compile-remove(capabilities) */\n/**\n * State only version of {@link @azure/communication-calling#CapabilitiesFeature}\n *\n * @public\n */\nexport interface CapabilitiesFeatureState {\n  /**\n   * Proxy of {@link @azure/communication-calling#CapabilitiesFeature.capabilities}.\n   */\n  capabilities: ParticipantCapabilities;\n  /**\n   * Proxy of the latest {@link @azure/communication-calling#CapabilitiesChangeInfo}\n   */\n  latestCapabilitiesChangeInfo: CapabilitiesChangeInfo;\n}\n\n/* @conditional-compile-remove(spotlight) */\n/**\n * State only version of {@link @azure/communication-calling#SpotlightCallFeature}\n *\n * @beta\n */\nexport interface SpotlightCallFeatureState {\n  /**\n   * Ordered array of spotlighted participants in call\n   */\n  spotlightedParticipants: SpotlightedParticipant[];\n  /**\n   * Proxy of {@link @azure/communication-calling#SpotlightCallFeature.maxParticipantsToSpotlight}.\n   */\n  maxParticipantsToSpotlight: number;\n}\n\n/* @conditional-compile-remove(spotlight) */\n/**\n * Spotlight state with order\n *\n * @beta\n */\nexport interface SpotlightState {\n  /**\n   * Order position of spotlight in call\n   */\n  spotlightedOrderPosition?: number;\n}\n\n/**\n * State only version of {@link @azure/communication-calling#RecordingCallFeature}. {@link StatefulCallClient} will\n * automatically listen for recording state of the call and update the state exposed by {@link StatefulCallClient} accordingly.\n *\n * @public\n */\nexport interface RecordingCallFeatureState {\n  /**\n   * Proxy of {@link @azure/communication-calling#RecordingCallFeature.isRecordingActive}.\n   */\n  isRecordingActive: boolean;\n}\n\n/* @conditional-compile-remove(raise-hand) */\n/**\n * State only version of {@link @azure/communication-calling#RaiseHandCallFeature}. {@link StatefulCallClient} will\n * automatically listen for raised hands on the call and update the state exposed by {@link StatefulCallClient} accordingly.\n *\n * @public\n */\nexport interface RaiseHandCallFeatureState {\n  /**\n   * Proxy of {@link @azure/communication-calling#RaiseHandCallFeature.raisedHands}.\n   */\n  raisedHands: RaisedHandState[];\n  /**\n   * Contains information for local participant from list {@link @azure/communication-calling#RaiseHandCallFeature.raisedHands}.\n   */\n  localParticipantRaisedHand?: RaisedHandState;\n}\n\n/* @conditional-compile-remove(raise-hand) */\n/**\n * Raised hand state with order\n *\n * @public\n */\nexport type RaisedHandState = {\n  raisedHandOrderPosition: number;\n};\n\n/* @conditional-compile-remove(reaction) */\n/**\n * State only version of {@link @azure/communication-calling#Call.ReactionMessage} with UI helper props receivedAt.\n * Reaction state with a timestamp which helps UI to decide to render the reaction accordingly.\n *\n * @beta\n */\nexport type ReactionState = {\n  /**\n   * Reaction message from the meeting {@link @azure/communication-calling#Call.ReactionMessage}\n   */\n  reactionMessage: ReactionMessage;\n  /**\n   * Received timestamp of the reaction message in a meeting.\n   */\n  receivedAt: Date;\n};\n\n/**\n * State only version of {@link @azure/communication-calling#LocalVideoStream}.\n *\n * @public\n */\nexport interface LocalVideoStreamState {\n  /**\n   * Proxy of {@link @azure/communication-calling#LocalVideoStream.source}.\n   */\n  source: VideoDeviceInfo;\n  /**\n   * Proxy of {@link @azure/communication-calling#LocalVideoStream.mediaStreamType}.\n   */\n  mediaStreamType: MediaStreamType;\n  /**\n   * {@link VideoStreamRendererView} that is managed by createView/disposeView in {@link StatefulCallClient}\n   * API. This can be undefined if the stream has not yet been rendered and defined after createView creates the view.\n   */\n  view?: VideoStreamRendererViewState;\n  /* @conditional-compile-remove(video-background-effects) */\n  /**\n   * Stores the state of the video effects.\n   * @public\n   */\n  videoEffects?: LocalVideoStreamVideoEffectsState;\n}\n\n/* @conditional-compile-remove(video-background-effects) */\n/**\n * State only version of a LocalVideoStream's {@link @azure/communication-calling#VideoEffectsFeature}.\n *\n * @public\n */\nexport interface LocalVideoStreamVideoEffectsState {\n  /**\n   * List of effects if any are active.\n   */\n  activeEffects?: VideoEffectName[];\n}\n\n/* @conditional-compile-remove(optimal-video-count) */\n/**\n * State only version of Optimal Video Count Feature {@link @azure/communication-calling#OptimalVideoCountCallFeature}.\n *\n * @public\n */\nexport interface OptimalVideoCountFeatureState {\n  /**\n   * State of the current optimal video count.\n   */\n  maxRemoteVideoStreams: number;\n}\n\n/**\n * State only version of {@link @azure/communication-calling#RemoteVideoStream}.\n *\n * @public\n */\nexport interface RemoteVideoStreamState {\n  /**\n   * Proxy of {@link @azure/communication-calling#RemoteVideoStream.id}.\n   */\n  id: number;\n  /**\n   * Proxy of {@link @azure/communication-calling#RemoteVideoStream.mediaStreamType}.\n   */\n  mediaStreamType: MediaStreamType;\n  /**\n   * Proxy of {@link @azure/communication-calling#RemoteVideoStream.isAvailable}.\n   */\n  isAvailable: boolean;\n  /**\n   * Proxy of {@link @azure/communication-calling#RemoteVideoStream.isReceiving}.\n   * @beta\n   */\n  /* @conditional-compile-remove(video-stream-is-receiving-flag) */\n  isReceiving: boolean;\n  /**\n   * {@link VideoStreamRendererView} that is managed by createView/disposeView in {@link StatefulCallClient}\n   * API. This can be undefined if the stream has not yet been rendered and defined after createView creates the view.\n   */\n  view?: VideoStreamRendererViewState;\n  /**\n   * Proxy of {@link @azure/communication-calling#RemoteVideoStream.size}.\n   */\n  streamSize?: { width: number; height: number };\n}\n\n/**\n * State only version of {@link @azure/communication-calling#VideoStreamRendererView}. This property is added to the state exposed\n * by {@link StatefulCallClient} by {@link StatefulCallClient.createView} and removed by {@link StatefulCallClient.disposeView}.\n *\n * @public\n */\nexport interface VideoStreamRendererViewState {\n  /**\n   * Proxy of {@link @azure/communication-calling#VideoStreamRendererView.scalingMode}.\n   */\n  scalingMode: ScalingMode;\n  /**\n   * Proxy of {@link @azure/communication-calling#VideoStreamRendererView.isMirrored}.\n   */\n  isMirrored: boolean;\n  /**\n   * Proxy of {@link @azure/communication-calling#VideoStreamRendererView.target}.\n   */\n  target: HTMLElement;\n}\n\n/**\n * State only version of {@link @azure/communication-calling#RemoteParticipant}. {@link StatefulCallClient} will\n * automatically retrieve RemoteParticipants and add their state to the state exposed by {@link StatefulCallClient}.\n *\n * @public\n */\nexport interface RemoteParticipantState {\n  /**\n   * Proxy of {@link @azure/communication-calling#RemoteParticipant.identifier}.\n   */\n  identifier: CommunicationIdentifierKind;\n  /**\n   * Proxy of {@link @azure/communication-calling#RemoteParticipant.displayName}.\n   */\n  displayName?: string;\n  /**\n   * Proxy of {@link @azure/communication-calling#RemoteParticipant.state}.\n   */\n  state: RemoteParticipantStatus;\n  /**\n   * Proxy of {@link @azure/communication-calling#RemoteParticipant.callEndReason}.\n   */\n  callEndReason?: CallEndReason;\n  /**\n   * Proxy of {@link @azure/communication-calling#RemoteParticipant.videoStreams} as an object with\n   * {@link RemoteVideoStream} fields keyed by {@link @azure/communication-calling#RemoteVideoStream.id}.\n   */\n  videoStreams: { [key: number]: RemoteVideoStreamState };\n  /**\n   * Proxy of {@link @azure/communication-calling#RemoteParticipant.isMuted}.\n   */\n  isMuted: boolean;\n  /**\n   * Proxy of {@link @azure/communication-calling#RemoteParticipant.isSpeaking}.\n   */\n  isSpeaking: boolean;\n  /* @conditional-compile-remove(rooms) */\n  /**\n   * Proxy of {@link @azure/communication-calling#RemoteParticipant.role}.\n   */\n  role?: ParticipantRole;\n  /* @conditional-compile-remove(raise-hand) */\n  /**\n   * Proxy of {@link @azure/communication-calling#Call.RaisedHand.raisedHands}.\n   */\n  raisedHand?: RaisedHandState;\n  /* @conditional-compile-remove(reaction) */\n  /**\n   * Proxy of {@link @azure/communication-calling#Call.ReactionMessage} with\n   * UI helper props receivedAt which indicates the timestamp when the message was received.\n   *\n   * @beta\n   */\n  reactionState?: ReactionState;\n  /* @conditional-compile-remove(spotlight) */\n  /**\n   * Proxy of {@link @azure/communication-calling#SpotlightCallFeature.spotlightedParticipants}.\n   */\n  spotlight?: SpotlightState;\n}\n\n/**\n * State only version of {@link @azure/communication-calling#Call}. {@link StatefulCallClient} will automatically\n * retrieve Call's state and add it to the state exposed by {@link StatefulCallClient}.\n *\n * @public\n */\nexport interface CallState {\n  /**\n   * Proxy of {@link @azure/communication-calling#Call.id}.\n   */\n  id: string;\n  /* @conditional-compile-remove(teams-identity-support) */\n  /**\n   * Type of the call.\n   */\n  kind: CallKind;\n  /**\n   * Proxy of {@link @azure/communication-calling#Call.callerInfo}.\n   */\n  callerInfo: CallerInfo;\n  /**\n   * Proxy of {@link @azure/communication-calling#Call.state}.\n   */\n  state: CallStatus;\n  /**\n   * Proxy of {@link @azure/communication-calling#Call.callEndReason}.\n   */\n  callEndReason?: CallEndReason;\n  /**\n   * Proxy of {@link @azure/communication-calling#Call.direction}.\n   */\n  direction: CallDirection;\n  /**\n   * Proxy of {@link @azure/communication-calling#Call.isMuted}.\n   */\n  isMuted: boolean;\n  /**\n   * Proxy of {@link @azure/communication-calling#Call.isScreenSharingOn}.\n   */\n  isScreenSharingOn: boolean;\n  /**\n   * Proxy of {@link @azure/communication-calling#DominantSpeakersInfo }.\n   */\n  dominantSpeakers?: DominantSpeakersInfo;\n  /**\n   * Proxy of {@link @azure/communication-calling#Call.localVideoStreams}.\n   */\n  localVideoStreams: LocalVideoStreamState[];\n  /**\n   * Proxy of {@link @azure/communication-calling#Call.remoteParticipants}.\n   * Object with {@link RemoteParticipant} fields keyed by flattened {@link RemoteParticipantState.identifier}.\n   * To obtain a flattened {@link RemoteParticipantState.identifier}, use\n   * {@link @azure/communication-react#toFlatCommunicationIdentifier}.\n   */\n  remoteParticipants: { [keys: string]: RemoteParticipantState };\n  /**\n   * Stores remote participants that have left the call so that the callEndReason could be retrieved.\n   * Object with {@link RemoteParticipant} fields keyed by flattened {@link RemoteParticipantState.identifier}.\n   * To obtain a flattened {@link RemoteParticipantState.identifier}, use\n   * {@link @azure/communication-react#toFlatCommunicationIdentifier}.\n   */\n  remoteParticipantsEnded: { [keys: string]: RemoteParticipantState };\n  /**\n   * Proxy of {@link @azure/communication-calling#TranscriptionCallFeature}.\n   */\n  transcription: TranscriptionCallFeatureState;\n  /* @conditional-compile-remove(close-captions) */\n  /**\n   * Proxy of {@link @azure/communication-calling#TranscriptionCallFeature}.\n   */\n  captionsFeature: CaptionsCallFeatureState;\n  /* @conditional-compile-remove(optimal-video-count) */\n  /**\n   * Proxy of {@link @azure/communication-calling#OptimalVideoCountCallFeature}.\n   */\n  optimalVideoCount: OptimalVideoCountFeatureState;\n  /**\n   * Proxy of {@link @azure/communication-calling#RecordingCallFeature}.\n   */\n  recording: RecordingCallFeatureState;\n  /* @conditional-compile-remove(raise-hand) */\n  /**\n   * Proxy of {@link @azure/communication-calling#RaiseHandCallFeature}.\n   */\n  raiseHand: RaiseHandCallFeatureState;\n  /* @conditional-compile-remove(reaction) */\n  /**\n   * Proxy of {@link @azure/communication-calling#Call.ReactionMessage} with\n   * UI helper props receivedAt which indicates the timestamp when the message was received.\n   *\n   * @beta\n   */\n  localParticipantReaction?: ReactionState;\n  /**\n   * Stores the currently active screenshare participant's key. If there is no screenshare active, then this will be\n   * undefined. You can use this key to access the remoteParticipant data in {@link CallState.remoteParticipants} object.\n   *\n   * Note this only applies to ScreenShare in RemoteParticipant. A local ScreenShare being active will not affect this\n   * property.\n   *\n   * This property is added by the stateful layer and is not a proxy of SDK state\n   */\n  screenShareRemoteParticipant?: string;\n  /**\n   * Stores the local date when the call started on the client. This property is added by the stateful layer and is not\n   * a proxy of SDK state.\n   */\n  startTime: Date;\n  /**\n   * Stores the local date when the call ended on the client. This property is added by the stateful layer and is not\n   * a proxy of SDK state.\n   */\n  endTime: Date | undefined;\n\n  /**\n   * Stores the latest call diagnostics.\n   */\n  diagnostics: DiagnosticsCallFeatureState;\n  /* @conditional-compile-remove(rooms) */ /* @conditional-compile-remove(capabilities) */\n  /**\n   * Proxy of {@link @azure/communication-calling#Call.role}.\n   */\n  role?: ParticipantRole;\n\n  /* @conditional-compile-remove(total-participant-count) */\n  /**\n   * Proxy of {@link @azure/communication-calling#Call.totalParticipantCount}.\n   */\n  totalParticipantCount?: number;\n  /* @conditional-compile-remove(call-transfer) */\n  /**\n   * Transfer state of call\n   */\n  transfer: TransferFeatureState;\n  /* @conditional-compile-remove(capabilities) */\n  /**\n   * Proxy of {@link @azure/communication-calling#CapabilitiesFeature}.\n   */\n  capabilitiesFeature?: CapabilitiesFeatureState;\n  /* @conditional-compile-remove(hide-attendee-name) */\n  /**\n   * Hide attendee names in teams meeting\n   */\n  hideAttendeeNames?: boolean;\n  /* @conditional-compile-remove(spotlight) */\n  /**\n   * Proxy of {@link @azure/communication-calling#SpotlightCallFeature}.\n   */\n  spotlight?: SpotlightCallFeatureState;\n}\n\n/* @conditional-compile-remove(call-transfer) */\n/**\n * Transfer feature state\n *\n * @beta\n */\nexport interface TransferFeatureState {\n  /**\n   * Accepted transfer requests\n   */\n  acceptedTransfers: { [key: string]: AcceptedTransfer };\n}\n\n/* @conditional-compile-remove(call-transfer) */\n/**\n * Transfer feature state\n *\n * @beta\n */\nexport interface AcceptedTransfer {\n  /**\n   * Stores call id of accepted transfer\n   */\n  callId: string;\n  /**\n   * Stores timestamp when transfer was accepted\n   */\n  timestamp: Date;\n}\n\n/**\n * State only version of {@link @azure/communication-calling#IncomingCall}. {@link StatefulCallClient} will\n * automatically detect incoming calls and add their state to the state exposed by {@link StatefulCallClient}.\n *\n * @public\n */\nexport interface IncomingCallState {\n  /**\n   * Proxy of {@link @azure/communication-calling#IncomingCall.id}.\n   */\n  id: string;\n  /**\n   * Proxy of {@link @azure/communication-calling#IncomingCall.callerInfo}.\n   */\n  callerInfo: CallerInfo;\n  /**\n   * Set to the state returned by 'callEnded' event on {@link @azure/communication-calling#IncomingCall} when received.\n   * This property is added by the stateful layer and is not a proxy of SDK state.\n   */\n  callEndReason?: CallEndReason;\n  /**\n   * Stores the local date when the call started on the client. This property is added by the stateful layer and is not\n   * a proxy of SDK state.\n   */\n  startTime: Date;\n  /**\n   * Stores the local date when the call ended on the client. This property is added by the stateful layer and is not a\n   * proxy of SDK state. It is undefined if the call is not ended yet.\n   */\n  endTime?: Date;\n}\n\n/**\n * This type is meant to encapsulate all the state inside {@link @azure/communication-calling#DeviceManager}. For\n * optional parameters they may not be available until permission is granted by the user. The cameras, microphones,\n * speakers, and deviceAccess states will be empty until the corresponding\n * {@link @azure/communication-calling#DeviceManager}'s getCameras, getMicrophones, getSpeakers, and askDevicePermission\n * APIs are called and completed.\n *\n * @public\n */\nexport type DeviceManagerState = {\n  /**\n   * Proxy of {@link @azure/communication-calling#DeviceManager.isSpeakerSelectionAvailable}.\n   */\n  isSpeakerSelectionAvailable: boolean;\n  /**\n   * Proxy of {@link @azure/communication-calling#DeviceManager.selectedMicrophone}.\n   */\n  selectedMicrophone?: AudioDeviceInfo;\n  /**\n   * Proxy of {@link @azure/communication-calling#DeviceManager.selectedSpeaker}.\n   */\n  selectedSpeaker?: AudioDeviceInfo;\n  /**\n   * Stores the selected camera device info. This is added by the stateful layer and does not exist in the Calling SDK.\n   * It is meant as a convenience to the developer. It must be explicitly set before it has any value and does not\n   * persist across instances of the {@link StatefulCallClient}. The developer controls entirely what this value holds\n   * at any time.\n   */\n  selectedCamera?: VideoDeviceInfo;\n  /**\n   * Stores any cameras data returned from {@link @azure/communication-calling#DeviceManager.getCameras}.\n   */\n  cameras: VideoDeviceInfo[];\n  /**\n   * Stores any microphones data returned from {@link @azure/communication-calling#DeviceManager.getMicrophones}.\n   */\n  microphones: AudioDeviceInfo[];\n  /**\n   * Stores any speakers data returned from {@link @azure/communication-calling#DeviceManager.getSpeakers}.\n   */\n  speakers: AudioDeviceInfo[];\n  /**\n   * Stores deviceAccess data returned from {@link @azure/communication-calling#DeviceManager.askDevicePermission}.\n   */\n  deviceAccess?: DeviceAccess;\n  /**\n   * Stores created views that are not associated with any CallState (when {@link StatefulCallClient.createView} is\n   * called with undefined callId, undefined participantId, and defined LocalVideoStream).\n   *\n   * The values in this array are generated internally when {@link StatefulCallClient.createView} is called and are\n   * considered immutable.\n   */\n  unparentedViews: LocalVideoStreamState[];\n};\n\n/**\n * Container for all of the state data proxied by {@link StatefulCallClient}. The calls, callsEnded, incomingCalls, and\n * incomingCallsEnded states will be automatically provided if a callAgent has been created. The deviceManager will be\n * empty initially until populated see {@link DeviceManagerState}. The userId state is provided as a convenience for the\n * developer and is completely controled and set by the developer.\n *\n * @public\n */\nexport interface CallClientState {\n  /**\n   * Proxy of {@link @azure/communication-calling#CallAgent.calls} as an object with CallState {@link CallState} fields.\n   * It is keyed by {@link @azure/communication-calling#Call.id}. Please note that\n   * {@link @azure/communication-calling#Call.id} could change. You should not cache the id itself but the entire\n   * {@link @azure/communication-calling#Call} and then use the id contained to look up data in this map.\n   */\n  calls: { [key: string]: CallState };\n  /**\n   * Calls that have ended are stored here so the callEndReason could be checked.\n   * It is an object with {@link @azure/communication-calling#Call.id} keys and {@link CallState} values.\n   *\n   * Only {@link MAX_CALL_HISTORY_LENGTH} Calls are kept in the history. Oldest calls are evicted if required.\n   */\n  callsEnded: { [key: string]: CallState };\n  /**\n   * Proxy of {@link @azure/communication-calling#IncomingCall} as an object with {@link IncomingCall} fields.\n   * It is keyed by {@link @azure/communication-calling#IncomingCall.id}.\n   */\n  incomingCalls: { [key: string]: IncomingCallState };\n  /**\n   * Incoming Calls that have ended are stored here so the callEndReason could be checked.\n   * It is an as an object with {@link @azure/communication-calling#Call.id} keys and {@link IncomingCall} values.\n   *\n   * Only {@link MAX_CALL_HISTORY_LENGTH} Calls are kept in the history. Oldest calls are evicted if required.\n   */\n  incomingCallsEnded: { [key: string]: IncomingCallState };\n  /**\n   * Proxy of {@link @azure/communication-calling#DeviceManager}. Please review {@link DeviceManagerState}.\n   */\n  deviceManager: DeviceManagerState;\n  /**\n   * Proxy of {@link @azure/communication-calling#CallAgent}. Please review {@link CallAgentState}.\n   */\n  callAgent?: CallAgentState;\n  /**\n   * Stores a userId. This is not used by the {@link StatefulCallClient} and is provided here as a convenience for the\n   * developer for easier access to userId. Must be passed in at initialization of the {@link StatefulCallClient}.\n   * Completely controlled by the developer.\n   */\n  userId: CommunicationIdentifierKind;\n  /**\n   * Stores the latest error for each API method.\n   *\n   * See documentation of {@Link CallErrors} for details.\n   */\n  latestErrors: CallErrors;\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * A phone number in E.164 format that will be used to represent callers identity.\n   * For example, using the alternateCallerId to add a participant using PSTN, this number will\n   * be used as the caller id in the PSTN call.\n   */\n  alternateCallerId?: string;\n  /* @conditional-compile-remove(unsupported-browser) */\n  /**\n   * state to track the environment that the stateful client was made in is supported\n   */\n  environmentInfo?: EnvironmentInfo;\n}\n\n/**\n * Errors teed from API calls to the Calling SDK.\n *\n * Each property in the object stores the latest error for a particular SDK API method.\n *\n * Errors from this object can be cleared using the {@link newClearCallErrorsModifier}.\n * Additionally, errors are automatically cleared when:\n * - The state is cleared.\n * - Subsequent calls to related API methods succeed.\n * See documentation of individual stateful client methods for details on when errors may be automatically cleared.\n *\n * @public\n */\nexport type CallErrors = {\n  [target in CallErrorTarget]: CallError;\n};\n\n/**\n * Error thrown from failed stateful API methods.\n *\n * @public\n */\nexport class CallError extends Error {\n  /**\n   * The API method target that failed.\n   */\n  public target: CallErrorTarget;\n  /**\n   * Error thrown by the failed SDK method.\n   */\n  public innerError: Error;\n  /**\n   * Timestamp added to the error by the stateful layer.\n   */\n  public timestamp: Date;\n\n  constructor(target: CallErrorTarget, innerError: Error, timestamp?: Date) {\n    super();\n    this.target = target;\n    this.innerError = innerError;\n    // Testing note: It is easier to mock Date::now() than the Date() constructor.\n    this.timestamp = timestamp ?? new Date(Date.now());\n    this.name = 'CallError';\n    this.message = `${this.target}: ${this.innerError.message}`;\n  }\n}\n\n/**\n * String literal type for all permissible keys in {@Link CallErrors}.\n *\n * @public\n */\nexport type CallErrorTarget =\n  | 'Call.addParticipant'\n  | 'Call.dispose'\n  | 'Call.feature'\n  | 'Call.hangUp'\n  | 'Call.hold'\n  | 'Call.mute'\n  | 'Call.muteIncomingAudio'\n  | 'Call.off'\n  | 'Call.on'\n  | 'Call.removeParticipant'\n  | 'Call.resume'\n  | 'Call.sendDtmf'\n  | 'Call.startAudio'\n  | 'Call.startScreenSharing'\n  | 'Call.startVideo'\n  | 'Call.stopScreenSharing'\n  | 'Call.stopAudio'\n  | 'Call.stopVideo'\n  | 'Call.unmute'\n  | 'Call.unmuteIncomingAudio'\n  | 'CallAgent.dispose'\n  | 'CallAgent.feature'\n  | 'CallAgent.join'\n  | 'CallAgent.off'\n  | 'CallAgent.on'\n  | 'CallAgent.startCall'\n  | 'CallClient.createCallAgent'\n  | 'CallClient.createTeamsCallAgent'\n  | 'CallClient.feature'\n  | 'CallClient.getDeviceManager'\n  | /* @conditional-compile-remove(calling-beta-sdk) */ 'CallClient.getEnvironmentInfo'\n  | 'DeviceManager.askDevicePermission'\n  | 'DeviceManager.getCameras'\n  | 'DeviceManager.getMicrophones'\n  | 'DeviceManager.getSpeakers'\n  | 'DeviceManager.off'\n  | 'DeviceManager.on'\n  | 'DeviceManager.selectMicrophone'\n  | 'DeviceManager.selectSpeaker'\n  | 'IncomingCall.accept'\n  | 'IncomingCall.reject'\n  | /* @conditional-compile-remove(calling-beta-sdk) */ /* @conditional-compile-remove(teams-identity-support) */ 'TeamsCall.addParticipant'\n  | 'VideoEffectsFeature.startEffects'\n  | /* @conditional-compile-remove(calling-beta-sdk) */ 'CallAgent.handlePushNotification'\n  | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.admit'\n  | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.rejectParticipant'\n  | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.admitAll'\n  | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.muteAllRemoteParticipants'\n  | 'Call.setConstraints';\n\n/**\n * State only proxy for {@link @azure/communication-calling#DiagnosticsCallFeature}.\n *\n * @public\n */\nexport interface DiagnosticsCallFeatureState {\n  /**\n   * Stores diagnostics related to network conditions.\n   */\n  network: NetworkDiagnosticsState;\n\n  /**\n   * Stores diagnostics related to media quality.\n   */\n  media: MediaDiagnosticsState;\n}\n\n/**\n * State only proxy for {@link @azure/communication-calling#NetworkDiagnostics}.\n *\n * @public\n */\nexport interface NetworkDiagnosticsState {\n  latest: LatestNetworkDiagnostics;\n}\n\n/**\n * State only proxy for {@link @azure/communication-calling#MediaDiagnostics}.\n *\n * @public\n */\nexport interface MediaDiagnosticsState {\n  latest: LatestMediaDiagnostics;\n}\n"]}
+{"version":3,"file":"CallClientState.js","sourceRoot":"","sources":["../../../../../calling-stateful-client/src/CallClientState.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AA4vBlC;;;;GAIG;AACH,MAAM,OAAO,SAAU,SAAQ,KAAK;IAclC,YAAY,MAAuB,EAAE,UAAiB,EAAE,SAAgB;QACtE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;QAC7B,8EAA8E;QAC9E,IAAI,CAAC,SAAS,GAAG,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;QACnD,IAAI,CAAC,IAAI,GAAG,WAAW,CAAC;QACxB,IAAI,CAAC,OAAO,GAAG,GAAG,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC;IAC9D,CAAC;CACF","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  AudioDeviceInfo,\n  CallDirection,\n  CallEndReason,\n  CallerInfo,\n  CallState as CallStatus,\n  DeviceAccess,\n  DominantSpeakersInfo,\n  LatestMediaDiagnostics,\n  LatestNetworkDiagnostics,\n  MediaStreamType,\n  RemoteParticipantState as RemoteParticipantStatus,\n  ScalingMode,\n  VideoDeviceInfo\n} from '@azure/communication-calling';\n/* @conditional-compile-remove(capabilities) */\nimport { CapabilitiesChangeInfo, ParticipantCapabilities } from '@azure/communication-calling';\n/* @conditional-compile-remove(close-captions) */\nimport { CaptionsResultType } from '@azure/communication-calling';\n/* @conditional-compile-remove(video-background-effects) */\nimport { VideoEffectName } from '@azure/communication-calling';\n/* @conditional-compile-remove(teams-identity-support) */\nimport { CallKind } from '@azure/communication-calling';\n/* @conditional-compile-remove(unsupported-browser) */\nimport { EnvironmentInfo } from '@azure/communication-calling';\n/* @conditional-compile-remove(rooms) */ /* @conditional-compile-remove(capabilities) */\nimport { ParticipantRole } from '@azure/communication-calling';\nimport { CommunicationIdentifierKind } from '@azure/communication-common';\n/* @conditional-compile-remove(reaction) */\nimport { ReactionMessage } from '@azure/communication-calling';\n/* @conditional-compile-remove(spotlight) */\nimport { SpotlightedParticipant } from '@azure/communication-calling';\n\n/**\n * State only version of {@link @azure/communication-calling#CallAgent} except calls is moved to be a child directly of\n * {@link CallClientState} and not included here. The reason to have CallAgent's state proxied is to provide access to\n * displayName. We don't flatten CallAgent.displayName and put it in CallClientState because it would be ambiguious that\n * displayName is actually reliant on the creation/existence of CallAgent to be available.\n *\n * @public\n */\nexport interface CallAgentState {\n  /**\n   * Proxy of {@link @azure/communication-calling#CallAgent.displayName}.\n   */\n  displayName?: string;\n}\n\n/* @conditional-compile-remove(close-captions) */\n/**\n * @public\n */\nexport interface CaptionsInfo {\n  /**\n   * The state in which this caption data can be classified.\n   */\n  resultType: CaptionsResultType;\n  /**\n   * The information of the call participant who spoke the captioned text.\n   */\n  speaker: CallerInfo;\n  /**\n   * The language that the spoken words were interpretted as. Corresponds to the language specified in startCaptions / setSpokenLanguage.\n   */\n  spokenLanguage: string;\n  /**\n   * The caption text.\n   */\n  captionText: string;\n  /**\n   * Timestamp of when the captioned words were initially spoken.\n   */\n  timestamp: Date;\n  /**\n   * The language that the captions are presented in. Corresponds to the captionLanguage specified in startCaptions / setCaptionLanguage.\n   */\n  captionLanguage?: string;\n  /**\n   * The original spoken caption text prior to translating to subtitle language\n   */\n  spokenText?: string;\n}\n\n/* @conditional-compile-remove(close-captions) */\n/**\n * @public\n */\nexport interface CaptionsCallFeatureState {\n  /**\n   * supported spoken languages\n   */\n  supportedSpokenLanguages: string[];\n  /**\n   * array of received captions\n   */\n  captions: CaptionsInfo[];\n  /**\n   * whether captions is on/off\n   */\n  isCaptionsFeatureActive: boolean;\n  /**\n   * whether start captions button is clicked or now\n   */\n  startCaptionsInProgress: boolean;\n  /**\n   * supported caption languages\n   */\n  supportedCaptionLanguages: string[];\n  /**\n   * current spoken language\n   */\n  currentSpokenLanguage: string;\n  /**\n   * current caption language\n   */\n  currentCaptionLanguage: string;\n}\n\n/**\n * State only version of {@link @azure/communication-calling#TranscriptionCallFeature}. {@link StatefulCallClient} will\n * automatically listen for transcription state of the call and update the state exposed by {@link StatefulCallClient}\n * accordingly.\n *\n * @public\n */\nexport interface TranscriptionCallFeatureState {\n  /**\n   * Proxy of {@link @azure/communication-calling#TranscriptionCallFeature.isTranscriptionActive}.\n   */\n  isTranscriptionActive: boolean;\n}\n\n/* @conditional-compile-remove(capabilities) */\n/**\n * State only version of {@link @azure/communication-calling#CapabilitiesFeature}\n *\n * @public\n */\nexport interface CapabilitiesFeatureState {\n  /**\n   * Proxy of {@link @azure/communication-calling#CapabilitiesFeature.capabilities}.\n   */\n  capabilities: ParticipantCapabilities;\n  /**\n   * Proxy of the latest {@link @azure/communication-calling#CapabilitiesChangeInfo}\n   */\n  latestCapabilitiesChangeInfo: CapabilitiesChangeInfo;\n}\n\n/* @conditional-compile-remove(spotlight) */\n/**\n * State only version of {@link @azure/communication-calling#SpotlightCallFeature}\n *\n * @beta\n */\nexport interface SpotlightCallFeatureState {\n  /**\n   * Ordered array of spotlighted participants in call\n   */\n  spotlightedParticipants: SpotlightedParticipant[];\n  /**\n   * Proxy of {@link @azure/communication-calling#SpotlightCallFeature.maxParticipantsToSpotlight}.\n   */\n  maxParticipantsToSpotlight: number;\n}\n\n/* @conditional-compile-remove(spotlight) */\n/**\n * Spotlight state with order\n *\n * @beta\n */\nexport interface SpotlightState {\n  /**\n   * Order position of spotlight in call\n   */\n  spotlightedOrderPosition?: number;\n}\n\n/**\n * State only version of {@link @azure/communication-calling#RecordingCallFeature}. {@link StatefulCallClient} will\n * automatically listen for recording state of the call and update the state exposed by {@link StatefulCallClient} accordingly.\n *\n * @public\n */\nexport interface RecordingCallFeatureState {\n  /**\n   * Proxy of {@link @azure/communication-calling#RecordingCallFeature.isRecordingActive}.\n   */\n  isRecordingActive: boolean;\n}\n\n/* @conditional-compile-remove(raise-hand) */\n/**\n * State only version of {@link @azure/communication-calling#RaiseHandCallFeature}. {@link StatefulCallClient} will\n * automatically listen for raised hands on the call and update the state exposed by {@link StatefulCallClient} accordingly.\n *\n * @public\n */\nexport interface RaiseHandCallFeatureState {\n  /**\n   * Proxy of {@link @azure/communication-calling#RaiseHandCallFeature.raisedHands}.\n   */\n  raisedHands: RaisedHandState[];\n  /**\n   * Contains information for local participant from list {@link @azure/communication-calling#RaiseHandCallFeature.raisedHands}.\n   */\n  localParticipantRaisedHand?: RaisedHandState;\n}\n\n/* @conditional-compile-remove(raise-hand) */\n/**\n * Raised hand state with order\n *\n * @public\n */\nexport type RaisedHandState = {\n  raisedHandOrderPosition: number;\n};\n\n/* @conditional-compile-remove(reaction) */\n/**\n * State only version of {@link @azure/communication-calling#Call.ReactionMessage} with UI helper props receivedAt.\n * Reaction state with a timestamp which helps UI to decide to render the reaction accordingly.\n *\n * @beta\n */\nexport type ReactionState = {\n  /**\n   * Reaction message from the meeting {@link @azure/communication-calling#Call.ReactionMessage}\n   */\n  reactionMessage: ReactionMessage;\n  /**\n   * Received timestamp of the reaction message in a meeting.\n   */\n  receivedAt: Date;\n};\n\n/**\n * State only version of {@link @azure/communication-calling#LocalVideoStream}.\n *\n * @public\n */\nexport interface LocalVideoStreamState {\n  /**\n   * Proxy of {@link @azure/communication-calling#LocalVideoStream.source}.\n   */\n  source: VideoDeviceInfo;\n  /**\n   * Proxy of {@link @azure/communication-calling#LocalVideoStream.mediaStreamType}.\n   */\n  mediaStreamType: MediaStreamType;\n  /**\n   * {@link VideoStreamRendererView} that is managed by createView/disposeView in {@link StatefulCallClient}\n   * API. This can be undefined if the stream has not yet been rendered and defined after createView creates the view.\n   */\n  view?: VideoStreamRendererViewState;\n  /* @conditional-compile-remove(video-background-effects) */\n  /**\n   * Stores the state of the video effects.\n   * @public\n   */\n  videoEffects?: LocalVideoStreamVideoEffectsState;\n}\n\n/* @conditional-compile-remove(video-background-effects) */\n/**\n * State only version of a LocalVideoStream's {@link @azure/communication-calling#VideoEffectsFeature}.\n *\n * @public\n */\nexport interface LocalVideoStreamVideoEffectsState {\n  /**\n   * List of effects if any are active.\n   */\n  activeEffects?: VideoEffectName[];\n}\n\n/* @conditional-compile-remove(optimal-video-count) */\n/**\n * State only version of Optimal Video Count Feature {@link @azure/communication-calling#OptimalVideoCountCallFeature}.\n *\n * @public\n */\nexport interface OptimalVideoCountFeatureState {\n  /**\n   * State of the current optimal video count.\n   */\n  maxRemoteVideoStreams: number;\n}\n\n/**\n * State only version of {@link @azure/communication-calling#RemoteVideoStream}.\n *\n * @public\n */\nexport interface RemoteVideoStreamState {\n  /**\n   * Proxy of {@link @azure/communication-calling#RemoteVideoStream.id}.\n   */\n  id: number;\n  /**\n   * Proxy of {@link @azure/communication-calling#RemoteVideoStream.mediaStreamType}.\n   */\n  mediaStreamType: MediaStreamType;\n  /**\n   * Proxy of {@link @azure/communication-calling#RemoteVideoStream.isAvailable}.\n   */\n  isAvailable: boolean;\n  /**\n   * Proxy of {@link @azure/communication-calling#RemoteVideoStream.isReceiving}.\n   * @beta\n   */\n  /* @conditional-compile-remove(video-stream-is-receiving-flag) */\n  isReceiving: boolean;\n  /**\n   * {@link VideoStreamRendererView} that is managed by createView/disposeView in {@link StatefulCallClient}\n   * API. This can be undefined if the stream has not yet been rendered and defined after createView creates the view.\n   */\n  view?: VideoStreamRendererViewState;\n  /**\n   * Proxy of {@link @azure/communication-calling#RemoteVideoStream.size}.\n   */\n  streamSize?: { width: number; height: number };\n}\n\n/**\n * State only version of {@link @azure/communication-calling#VideoStreamRendererView}. This property is added to the state exposed\n * by {@link StatefulCallClient} by {@link StatefulCallClient.createView} and removed by {@link StatefulCallClient.disposeView}.\n *\n * @public\n */\nexport interface VideoStreamRendererViewState {\n  /**\n   * Proxy of {@link @azure/communication-calling#VideoStreamRendererView.scalingMode}.\n   */\n  scalingMode: ScalingMode;\n  /**\n   * Proxy of {@link @azure/communication-calling#VideoStreamRendererView.isMirrored}.\n   */\n  isMirrored: boolean;\n  /**\n   * Proxy of {@link @azure/communication-calling#VideoStreamRendererView.target}.\n   */\n  target: HTMLElement;\n}\n\n/**\n * State only version of {@link @azure/communication-calling#RemoteParticipant}. {@link StatefulCallClient} will\n * automatically retrieve RemoteParticipants and add their state to the state exposed by {@link StatefulCallClient}.\n *\n * @public\n */\nexport interface RemoteParticipantState {\n  /**\n   * Proxy of {@link @azure/communication-calling#RemoteParticipant.identifier}.\n   */\n  identifier: CommunicationIdentifierKind;\n  /**\n   * Proxy of {@link @azure/communication-calling#RemoteParticipant.displayName}.\n   */\n  displayName?: string;\n  /**\n   * Proxy of {@link @azure/communication-calling#RemoteParticipant.state}.\n   */\n  state: RemoteParticipantStatus;\n  /**\n   * Proxy of {@link @azure/communication-calling#RemoteParticipant.callEndReason}.\n   */\n  callEndReason?: CallEndReason;\n  /**\n   * Proxy of {@link @azure/communication-calling#RemoteParticipant.videoStreams} as an object with\n   * {@link RemoteVideoStream} fields keyed by {@link @azure/communication-calling#RemoteVideoStream.id}.\n   */\n  videoStreams: { [key: number]: RemoteVideoStreamState };\n  /**\n   * Proxy of {@link @azure/communication-calling#RemoteParticipant.isMuted}.\n   */\n  isMuted: boolean;\n  /**\n   * Proxy of {@link @azure/communication-calling#RemoteParticipant.isSpeaking}.\n   */\n  isSpeaking: boolean;\n  /* @conditional-compile-remove(rooms) */\n  /**\n   * Proxy of {@link @azure/communication-calling#RemoteParticipant.role}.\n   */\n  role?: ParticipantRole;\n  /* @conditional-compile-remove(raise-hand) */\n  /**\n   * Proxy of {@link @azure/communication-calling#Call.RaisedHand.raisedHands}.\n   */\n  raisedHand?: RaisedHandState;\n  /* @conditional-compile-remove(reaction) */\n  /**\n   * Proxy of {@link @azure/communication-calling#Call.ReactionMessage} with\n   * UI helper props receivedAt which indicates the timestamp when the message was received.\n   *\n   * @beta\n   */\n  reactionState?: ReactionState;\n  /* @conditional-compile-remove(spotlight) */\n  /**\n   * Proxy of {@link @azure/communication-calling#SpotlightCallFeature.spotlightedParticipants}.\n   */\n  spotlight?: SpotlightState;\n}\n\n/**\n * State only version of {@link @azure/communication-calling#Call}. {@link StatefulCallClient} will automatically\n * retrieve Call's state and add it to the state exposed by {@link StatefulCallClient}.\n *\n * @public\n */\nexport interface CallState {\n  /**\n   * Proxy of {@link @azure/communication-calling#Call.id}.\n   */\n  id: string;\n  /* @conditional-compile-remove(teams-identity-support) */\n  /**\n   * Type of the call.\n   */\n  kind: CallKind;\n  /**\n   * Proxy of {@link @azure/communication-calling#Call.callerInfo}.\n   */\n  callerInfo: CallerInfo;\n  /**\n   * Proxy of {@link @azure/communication-calling#Call.state}.\n   */\n  state: CallStatus;\n  /**\n   * Proxy of {@link @azure/communication-calling#Call.callEndReason}.\n   */\n  callEndReason?: CallEndReason;\n  /**\n   * Proxy of {@link @azure/communication-calling#Call.direction}.\n   */\n  direction: CallDirection;\n  /**\n   * Proxy of {@link @azure/communication-calling#Call.isMuted}.\n   */\n  isMuted: boolean;\n  /**\n   * Proxy of {@link @azure/communication-calling#Call.isScreenSharingOn}.\n   */\n  isScreenSharingOn: boolean;\n  /**\n   * Proxy of {@link @azure/communication-calling#DominantSpeakersInfo }.\n   */\n  dominantSpeakers?: DominantSpeakersInfo;\n  /**\n   * Proxy of {@link @azure/communication-calling#Call.localVideoStreams}.\n   */\n  localVideoStreams: LocalVideoStreamState[];\n  /**\n   * Proxy of {@link @azure/communication-calling#Call.remoteParticipants}.\n   * Object with {@link RemoteParticipant} fields keyed by flattened {@link RemoteParticipantState.identifier}.\n   * To obtain a flattened {@link RemoteParticipantState.identifier}, use\n   * {@link @azure/communication-react#toFlatCommunicationIdentifier}.\n   */\n  remoteParticipants: { [keys: string]: RemoteParticipantState };\n  /**\n   * Stores remote participants that have left the call so that the callEndReason could be retrieved.\n   * Object with {@link RemoteParticipant} fields keyed by flattened {@link RemoteParticipantState.identifier}.\n   * To obtain a flattened {@link RemoteParticipantState.identifier}, use\n   * {@link @azure/communication-react#toFlatCommunicationIdentifier}.\n   */\n  remoteParticipantsEnded: { [keys: string]: RemoteParticipantState };\n  /**\n   * Proxy of {@link @azure/communication-calling#TranscriptionCallFeature}.\n   */\n  transcription: TranscriptionCallFeatureState;\n  /* @conditional-compile-remove(close-captions) */\n  /**\n   * Proxy of {@link @azure/communication-calling#TranscriptionCallFeature}.\n   */\n  captionsFeature: CaptionsCallFeatureState;\n  /* @conditional-compile-remove(optimal-video-count) */\n  /**\n   * Proxy of {@link @azure/communication-calling#OptimalVideoCountCallFeature}.\n   */\n  optimalVideoCount: OptimalVideoCountFeatureState;\n  /**\n   * Proxy of {@link @azure/communication-calling#RecordingCallFeature}.\n   */\n  recording: RecordingCallFeatureState;\n  /* @conditional-compile-remove(raise-hand) */\n  /**\n   * Proxy of {@link @azure/communication-calling#RaiseHandCallFeature}.\n   */\n  raiseHand: RaiseHandCallFeatureState;\n  /* @conditional-compile-remove(reaction) */\n  /**\n   * Proxy of {@link @azure/communication-calling#Call.ReactionMessage} with\n   * UI helper props receivedAt which indicates the timestamp when the message was received.\n   *\n   * @beta\n   */\n  localParticipantReaction?: ReactionState;\n  /**\n   * Stores the currently active screenshare participant's key. If there is no screenshare active, then this will be\n   * undefined. You can use this key to access the remoteParticipant data in {@link CallState.remoteParticipants} object.\n   *\n   * Note this only applies to ScreenShare in RemoteParticipant. A local ScreenShare being active will not affect this\n   * property.\n   *\n   * This property is added by the stateful layer and is not a proxy of SDK state\n   */\n  screenShareRemoteParticipant?: string;\n  /**\n   * Stores the local date when the call started on the client. This property is added by the stateful layer and is not\n   * a proxy of SDK state.\n   */\n  startTime: Date;\n  /**\n   * Stores the local date when the call ended on the client. This property is added by the stateful layer and is not\n   * a proxy of SDK state.\n   */\n  endTime: Date | undefined;\n\n  /**\n   * Stores the latest call diagnostics.\n   */\n  diagnostics: DiagnosticsCallFeatureState;\n  /* @conditional-compile-remove(rooms) */ /* @conditional-compile-remove(capabilities) */\n  /**\n   * Proxy of {@link @azure/communication-calling#Call.role}.\n   */\n  role?: ParticipantRole;\n\n  /* @conditional-compile-remove(total-participant-count) */\n  /**\n   * Proxy of {@link @azure/communication-calling#Call.totalParticipantCount}.\n   */\n  totalParticipantCount?: number;\n  /* @conditional-compile-remove(call-transfer) */\n  /**\n   * Transfer state of call\n   */\n  transfer: TransferFeatureState;\n  /* @conditional-compile-remove(capabilities) */\n  /**\n   * Proxy of {@link @azure/communication-calling#CapabilitiesFeature}.\n   */\n  capabilitiesFeature?: CapabilitiesFeatureState;\n  /* @conditional-compile-remove(hide-attendee-name) */\n  /**\n   * Hide attendee names in teams meeting\n   */\n  hideAttendeeNames?: boolean;\n  /* @conditional-compile-remove(spotlight) */\n  /**\n   * Proxy of {@link @azure/communication-calling#SpotlightCallFeature}.\n   */\n  spotlight?: SpotlightCallFeatureState;\n}\n\n/* @conditional-compile-remove(call-transfer) */\n/**\n * Transfer feature state\n *\n * @public\n */\nexport interface TransferFeatureState {\n  /**\n   * Accepted transfer requests\n   */\n  acceptedTransfers: { [key: string]: AcceptedTransfer };\n}\n\n/* @conditional-compile-remove(call-transfer) */\n/**\n * Transfer feature state\n *\n * @public\n */\nexport interface AcceptedTransfer {\n  /**\n   * Stores call id of accepted transfer\n   */\n  callId: string;\n  /**\n   * Stores timestamp when transfer was accepted\n   */\n  timestamp: Date;\n}\n\n/**\n * State only version of {@link @azure/communication-calling#IncomingCall}. {@link StatefulCallClient} will\n * automatically detect incoming calls and add their state to the state exposed by {@link StatefulCallClient}.\n *\n * @public\n */\nexport interface IncomingCallState {\n  /**\n   * Proxy of {@link @azure/communication-calling#IncomingCall.id}.\n   */\n  id: string;\n  /**\n   * Proxy of {@link @azure/communication-calling#IncomingCall.callerInfo}.\n   */\n  callerInfo: CallerInfo;\n  /**\n   * Set to the state returned by 'callEnded' event on {@link @azure/communication-calling#IncomingCall} when received.\n   * This property is added by the stateful layer and is not a proxy of SDK state.\n   */\n  callEndReason?: CallEndReason;\n  /**\n   * Stores the local date when the call started on the client. This property is added by the stateful layer and is not\n   * a proxy of SDK state.\n   */\n  startTime: Date;\n  /**\n   * Stores the local date when the call ended on the client. This property is added by the stateful layer and is not a\n   * proxy of SDK state. It is undefined if the call is not ended yet.\n   */\n  endTime?: Date;\n}\n\n/**\n * This type is meant to encapsulate all the state inside {@link @azure/communication-calling#DeviceManager}. For\n * optional parameters they may not be available until permission is granted by the user. The cameras, microphones,\n * speakers, and deviceAccess states will be empty until the corresponding\n * {@link @azure/communication-calling#DeviceManager}'s getCameras, getMicrophones, getSpeakers, and askDevicePermission\n * APIs are called and completed.\n *\n * @public\n */\nexport type DeviceManagerState = {\n  /**\n   * Proxy of {@link @azure/communication-calling#DeviceManager.isSpeakerSelectionAvailable}.\n   */\n  isSpeakerSelectionAvailable: boolean;\n  /**\n   * Proxy of {@link @azure/communication-calling#DeviceManager.selectedMicrophone}.\n   */\n  selectedMicrophone?: AudioDeviceInfo;\n  /**\n   * Proxy of {@link @azure/communication-calling#DeviceManager.selectedSpeaker}.\n   */\n  selectedSpeaker?: AudioDeviceInfo;\n  /**\n   * Stores the selected camera device info. This is added by the stateful layer and does not exist in the Calling SDK.\n   * It is meant as a convenience to the developer. It must be explicitly set before it has any value and does not\n   * persist across instances of the {@link StatefulCallClient}. The developer controls entirely what this value holds\n   * at any time.\n   */\n  selectedCamera?: VideoDeviceInfo;\n  /**\n   * Stores any cameras data returned from {@link @azure/communication-calling#DeviceManager.getCameras}.\n   */\n  cameras: VideoDeviceInfo[];\n  /**\n   * Stores any microphones data returned from {@link @azure/communication-calling#DeviceManager.getMicrophones}.\n   */\n  microphones: AudioDeviceInfo[];\n  /**\n   * Stores any speakers data returned from {@link @azure/communication-calling#DeviceManager.getSpeakers}.\n   */\n  speakers: AudioDeviceInfo[];\n  /**\n   * Stores deviceAccess data returned from {@link @azure/communication-calling#DeviceManager.askDevicePermission}.\n   */\n  deviceAccess?: DeviceAccess;\n  /**\n   * Stores created views that are not associated with any CallState (when {@link StatefulCallClient.createView} is\n   * called with undefined callId, undefined participantId, and defined LocalVideoStream).\n   *\n   * The values in this array are generated internally when {@link StatefulCallClient.createView} is called and are\n   * considered immutable.\n   */\n  unparentedViews: LocalVideoStreamState[];\n};\n\n/**\n * Container for all of the state data proxied by {@link StatefulCallClient}. The calls, callsEnded, incomingCalls, and\n * incomingCallsEnded states will be automatically provided if a callAgent has been created. The deviceManager will be\n * empty initially until populated see {@link DeviceManagerState}. The userId state is provided as a convenience for the\n * developer and is completely controled and set by the developer.\n *\n * @public\n */\nexport interface CallClientState {\n  /**\n   * Proxy of {@link @azure/communication-calling#CallAgent.calls} as an object with CallState {@link CallState} fields.\n   * It is keyed by {@link @azure/communication-calling#Call.id}. Please note that\n   * {@link @azure/communication-calling#Call.id} could change. You should not cache the id itself but the entire\n   * {@link @azure/communication-calling#Call} and then use the id contained to look up data in this map.\n   */\n  calls: { [key: string]: CallState };\n  /**\n   * Calls that have ended are stored here so the callEndReason could be checked.\n   * It is an object with {@link @azure/communication-calling#Call.id} keys and {@link CallState} values.\n   *\n   * Only {@link MAX_CALL_HISTORY_LENGTH} Calls are kept in the history. Oldest calls are evicted if required.\n   */\n  callsEnded: { [key: string]: CallState };\n  /**\n   * Proxy of {@link @azure/communication-calling#IncomingCall} as an object with {@link IncomingCall} fields.\n   * It is keyed by {@link @azure/communication-calling#IncomingCall.id}.\n   */\n  incomingCalls: { [key: string]: IncomingCallState };\n  /**\n   * Incoming Calls that have ended are stored here so the callEndReason could be checked.\n   * It is an as an object with {@link @azure/communication-calling#Call.id} keys and {@link IncomingCall} values.\n   *\n   * Only {@link MAX_CALL_HISTORY_LENGTH} Calls are kept in the history. Oldest calls are evicted if required.\n   */\n  incomingCallsEnded: { [key: string]: IncomingCallState };\n  /**\n   * Proxy of {@link @azure/communication-calling#DeviceManager}. Please review {@link DeviceManagerState}.\n   */\n  deviceManager: DeviceManagerState;\n  /**\n   * Proxy of {@link @azure/communication-calling#CallAgent}. Please review {@link CallAgentState}.\n   */\n  callAgent?: CallAgentState;\n  /**\n   * Stores a userId. This is not used by the {@link StatefulCallClient} and is provided here as a convenience for the\n   * developer for easier access to userId. Must be passed in at initialization of the {@link StatefulCallClient}.\n   * Completely controlled by the developer.\n   */\n  userId: CommunicationIdentifierKind;\n  /**\n   * Stores the latest error for each API method.\n   *\n   * See documentation of {@Link CallErrors} for details.\n   */\n  latestErrors: CallErrors;\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * A phone number in E.164 format that will be used to represent callers identity.\n   * For example, using the alternateCallerId to add a participant using PSTN, this number will\n   * be used as the caller id in the PSTN call.\n   */\n  alternateCallerId?: string;\n  /* @conditional-compile-remove(unsupported-browser) */\n  /**\n   * state to track the environment that the stateful client was made in is supported\n   */\n  environmentInfo?: EnvironmentInfo;\n}\n\n/**\n * Errors teed from API calls to the Calling SDK.\n *\n * Each property in the object stores the latest error for a particular SDK API method.\n *\n * Errors from this object can be cleared using the {@link newClearCallErrorsModifier}.\n * Additionally, errors are automatically cleared when:\n * - The state is cleared.\n * - Subsequent calls to related API methods succeed.\n * See documentation of individual stateful client methods for details on when errors may be automatically cleared.\n *\n * @public\n */\nexport type CallErrors = {\n  [target in CallErrorTarget]: CallError;\n};\n\n/**\n * Error thrown from failed stateful API methods.\n *\n * @public\n */\nexport class CallError extends Error {\n  /**\n   * The API method target that failed.\n   */\n  public target: CallErrorTarget;\n  /**\n   * Error thrown by the failed SDK method.\n   */\n  public innerError: Error;\n  /**\n   * Timestamp added to the error by the stateful layer.\n   */\n  public timestamp: Date;\n\n  constructor(target: CallErrorTarget, innerError: Error, timestamp?: Date) {\n    super();\n    this.target = target;\n    this.innerError = innerError;\n    // Testing note: It is easier to mock Date::now() than the Date() constructor.\n    this.timestamp = timestamp ?? new Date(Date.now());\n    this.name = 'CallError';\n    this.message = `${this.target}: ${this.innerError.message}`;\n  }\n}\n\n/**\n * String literal type for all permissible keys in {@Link CallErrors}.\n *\n * @public\n */\nexport type CallErrorTarget =\n  | 'Call.addParticipant'\n  | 'Call.dispose'\n  | 'Call.feature'\n  | 'Call.hangUp'\n  | 'Call.hold'\n  | 'Call.mute'\n  | 'Call.muteIncomingAudio'\n  | 'Call.off'\n  | 'Call.on'\n  | 'Call.removeParticipant'\n  | 'Call.resume'\n  | 'Call.sendDtmf'\n  | 'Call.startAudio'\n  | 'Call.startScreenSharing'\n  | 'Call.startVideo'\n  | 'Call.stopScreenSharing'\n  | 'Call.stopAudio'\n  | 'Call.stopVideo'\n  | 'Call.unmute'\n  | 'Call.unmuteIncomingAudio'\n  | 'CallAgent.dispose'\n  | 'CallAgent.feature'\n  | 'CallAgent.join'\n  | 'CallAgent.off'\n  | 'CallAgent.on'\n  | 'CallAgent.startCall'\n  | 'CallClient.createCallAgent'\n  | 'CallClient.createTeamsCallAgent'\n  | 'CallClient.feature'\n  | 'CallClient.getDeviceManager'\n  | /* @conditional-compile-remove(calling-beta-sdk) */ 'CallClient.getEnvironmentInfo'\n  | 'DeviceManager.askDevicePermission'\n  | 'DeviceManager.getCameras'\n  | 'DeviceManager.getMicrophones'\n  | 'DeviceManager.getSpeakers'\n  | 'DeviceManager.off'\n  | 'DeviceManager.on'\n  | 'DeviceManager.selectMicrophone'\n  | 'DeviceManager.selectSpeaker'\n  | 'IncomingCall.accept'\n  | 'IncomingCall.reject'\n  | /* @conditional-compile-remove(calling-beta-sdk) */ /* @conditional-compile-remove(teams-identity-support) */ 'TeamsCall.addParticipant'\n  | 'VideoEffectsFeature.startEffects'\n  | /* @conditional-compile-remove(calling-beta-sdk) */ 'CallAgent.handlePushNotification'\n  | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.admit'\n  | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.rejectParticipant'\n  | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.admitAll'\n  | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.muteAllRemoteParticipants'\n  | 'Call.setConstraints';\n\n/**\n * State only proxy for {@link @azure/communication-calling#DiagnosticsCallFeature}.\n *\n * @public\n */\nexport interface DiagnosticsCallFeatureState {\n  /**\n   * Stores diagnostics related to network conditions.\n   */\n  network: NetworkDiagnosticsState;\n\n  /**\n   * Stores diagnostics related to media quality.\n   */\n  media: MediaDiagnosticsState;\n}\n\n/**\n * State only proxy for {@link @azure/communication-calling#NetworkDiagnostics}.\n *\n * @public\n */\nexport interface NetworkDiagnosticsState {\n  latest: LatestNetworkDiagnostics;\n}\n\n/**\n * State only proxy for {@link @azure/communication-calling#MediaDiagnostics}.\n *\n * @public\n */\nexport interface MediaDiagnosticsState {\n  latest: LatestMediaDiagnostics;\n}\n"]}

package/dist/dist-esm/react-components/src/components/ImageOverlay.d.ts

@@ -1,4 +1,4 @@
-import { SyntheticEvent } from 'react';
+/// <reference types="react" />
 /**
  * Props for {@link ImageOverlay}.
  *
@@ -30,13 +30,9 @@ export interface ImageOverlayProps {
      */
     onDismiss: () => void;
     /**
-     * Callback called when the download button is clicked.
+     * Optional callback called when the download button is clicked. If not provided, the download button will not be rendered.
      */
-    onDownloadButtonClicked: (imageSrc: string) => void;
-    /**
-     * Callback called when there's an error loading the image.
-     */
-    onError?: (event: SyntheticEvent<HTMLImageElement, Event>) => void;
+    onDownloadButtonClicked?: (imageSrc: string) => void;
 }
 /**
  * Strings of {@link ImageOverlay} that can be overridden.

package/dist/dist-esm/react-components/src/components/ImageOverlay.js

@@ -5,48 +5,49 @@ import { DefaultButton, Icon, IconButton, Modal, Stack, mergeStyles } from '@flu
 /* @conditional-compile-remove(image-overlay) */
 import React, { useState } from 'react';
 /* @conditional-compile-remove(image-overlay) */
-import { bodyContainer, brokenImageStyle, cancelIcon, closeButtonStyles, controlBarContainerStyle, downloadButtonStyle, downloadIcon, downloadIconStyle, focusTrapZoneStyle, headerStyle, normalImageStyle, overlayStyles, scrollableContentStyle, smallDownloadButtonContainerStyle, titleBarContainerStyle, titleStyle } from './styles/ImageOverlay.style';
+import { bodyContainer, brokenImageStyle, cancelIcon, closeButtonStyles, controlBarContainerStyle, downloadButtonStyle, downloadIcon, downloadIconStyle, focusTrapZoneStyle, headerStyle, normalImageStyle, overlayStyles, scrollableContentStyle, smallDownloadButtonContainerStyle, themeProviderRootStyle, titleBarContainerStyle, titleStyle } from './styles/ImageOverlay.style';
 /* @conditional-compile-remove(image-overlay) */
-import { useTheme } from '../theming/FluentThemeProvider';
+import { FluentThemeProvider } from '../theming/FluentThemeProvider';
 /* @conditional-compile-remove(image-overlay) */
 import { useLocale } from '../localization';
 /* @conditional-compile-remove(image-overlay) */
+import { imageOverlayTheme } from '../theming';
+/* @conditional-compile-remove(image-overlay) */
 /**
  * Component to render a fullscreen modal for a selected image.
  *
  * @beta
  */
 export const ImageOverlay = (props) => {
-    const { isOpen, imageSrc, title, titleIcon, altText, onDownloadButtonClicked, onDismiss, onError } = props;
-    const theme = useTheme();
+    const { isOpen, imageSrc, title, titleIcon, altText, onDownloadButtonClicked, onDismiss } = props;
     /* @conditional-compile-remove(image-overlay) */
     const localeStrings = useLocale().strings.imageOverlay;
     const [isImageLoaded, setIsImageLoaded] = useState(true);
-    const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(theme);
+    const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(imageOverlayTheme);
     const renderHeaderBar = () => {
         return (React.createElement(Stack, { className: mergeStyles(headerStyle) },
             React.createElement(Stack, { className: mergeStyles(titleBarContainerStyle) },
                 titleIcon,
-                React.createElement(Stack.Item, { className: mergeStyles(titleStyle(theme)), "aria-label": title || 'Image' }, title)),
+                React.createElement(Stack.Item, { className: mergeStyles(titleStyle(imageOverlayTheme)), "aria-label": title || 'Image' }, title)),
             React.createElement(Stack, { className: mergeStyles(controlBarContainerStyle) },
-                React.createElement(DefaultButton, { className: mergeStyles(downloadButtonStyle(theme)), 
+                onDownloadButtonClicked && (React.createElement(DefaultButton, { className: mergeStyles(downloadButtonStyle), 
                     /* @conditional-compile-remove(image-overlay) */
-                    text: localeStrings.downloadButtonLabel, onClick: () => onDownloadButtonClicked(imageSrc), onRenderIcon: () => React.createElement(Icon, { iconName: downloadIcon.iconName, className: mergeStyles(downloadIconStyle) }), "aria-live": 'polite', "aria-label": localeStrings.downloadButtonLabel }),
-                React.createElement(IconButton, { iconProps: downloadIcon, className: mergeStyles(smallDownloadButtonContainerStyle(theme)), onClick: () => onDownloadButtonClicked(imageSrc), "aria-label": localeStrings.downloadButtonLabel, "aria-live": 'polite' }),
-                React.createElement(IconButton, { iconProps: cancelIcon, className: mergeStyles(closeButtonStyles(theme)), onClick: onDismiss, 
+                    text: localeStrings.downloadButtonLabel, onClick: () => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc), onRenderIcon: () => React.createElement(Icon, { iconName: downloadIcon.iconName, className: mergeStyles(downloadIconStyle) }), "aria-live": 'polite', "aria-label": localeStrings.downloadButtonLabel })),
+                onDownloadButtonClicked && (React.createElement(IconButton, { iconProps: downloadIcon, className: mergeStyles(smallDownloadButtonContainerStyle(imageOverlayTheme)), onClick: () => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc), "aria-label": localeStrings.downloadButtonLabel, "aria-live": 'polite' })),
+                React.createElement(IconButton, { iconProps: cancelIcon, className: mergeStyles(closeButtonStyles(imageOverlayTheme)), onClick: onDismiss, 
                     /* @conditional-compile-remove(image-overlay) */
                     ariaLabel: localeStrings.dismissButtonAriaLabel, "aria-live": 'polite' }))));
     };
     const renderBodyWithLightDismiss = () => {
-        return (React.createElement(Stack, { className: mergeStyles(bodyContainer), onClick: () => props.onDismiss() }, imageSrc && (React.createElement("img", { src: imageSrc, className: mergeStyles(imageStyle), alt: altText || 'image', "aria-label": 'image-overlay-main-image', "aria-live": 'polite', onError: (event) => {
+        return (React.createElement(Stack, { className: mergeStyles(bodyContainer), onClick: () => props.onDismiss() }, imageSrc && (React.createElement("img", { src: imageSrc, className: mergeStyles(imageStyle), alt: altText || 'image', "aria-label": 'image-overlay-main-image', "aria-live": 'polite', onError: () => {
                 setIsImageLoaded(false);
-                onError && onError(event);
             }, onClick: (event) => event.stopPropagation(), onDoubleClick: (event) => {
                 event.persist();
             } }))));
     };
-    return (React.createElement(Modal, { titleAriaId: title, isOpen: isOpen, onDismiss: onDismiss, overlay: { styles: Object.assign({}, overlayStyles(theme)) }, styles: { main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }, isDarkOverlay: true },
-        renderHeaderBar(),
-        renderBodyWithLightDismiss()));
+    return (React.createElement(Modal, { titleAriaId: title, isOpen: isOpen, onDismiss: onDismiss, overlay: { styles: Object.assign({}, overlayStyles(imageOverlayTheme)) }, styles: { main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }, isDarkOverlay: true },
+        React.createElement(FluentThemeProvider, { fluentTheme: imageOverlayTheme, rootStyle: themeProviderRootStyle },
+            renderHeaderBar(),
+            renderBodyWithLightDismiss())));
 };
 //# sourceMappingURL=ImageOverlay.js.map

package/dist/dist-esm/react-components/src/components/ImageOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageOverlay.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ImageOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(image-overlay) */\nimport { DefaultButton, Icon, IconButton, Modal, Stack, mergeStyles } from '@fluentui/react';\n/* @conditional-compile-remove(image-overlay) */\nimport React, { SyntheticEvent, useState } from 'react';\n/* @conditional-compile-remove(image-overlay) */\nimport {\n  bodyContainer,\n  brokenImageStyle,\n  cancelIcon,\n  closeButtonStyles,\n  controlBarContainerStyle,\n  downloadButtonStyle,\n  downloadIcon,\n  downloadIconStyle,\n  focusTrapZoneStyle,\n  headerStyle,\n  normalImageStyle,\n  overlayStyles,\n  scrollableContentStyle,\n  smallDownloadButtonContainerStyle,\n  titleBarContainerStyle,\n  titleStyle\n} from './styles/ImageOverlay.style';\n/* @conditional-compile-remove(image-overlay) */\nimport { useTheme } from '../theming/FluentThemeProvider';\n/* @conditional-compile-remove(image-overlay) */\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(image-overlay) */\nimport { ChatTheme } from '../theming';\n\n/* @conditional-compile-remove(image-overlay) */\n/**\n * Props for {@link ImageOverlay}.\n *\n * @beta\n */\nexport interface ImageOverlayProps {\n  /**\n   * Boolean that controls whether the modal is displayed.\n   */\n  isOpen: boolean;\n  /**\n   * Image source used to display the image in a large scale.\n   */\n  imageSrc: string;\n  /**\n   * Optional string used as a alt text for the image. @default 'image'\n   */\n  altText?: string;\n  /**\n   * Optional string used as the title of the image and displayed on the top left corner of the ImageOverlay.\n   */\n  title?: string;\n  /**\n   * Optional JSX element used as a title icon and displayed to the left of the title element.\n   */\n  titleIcon?: JSX.Element;\n  /**\n   * Callback to invoke when the ImageOverlay modal is dismissed\n   */\n  onDismiss: () => void;\n  /**\n   * Callback called when the download button is clicked.\n   */\n  onDownloadButtonClicked: (imageSrc: string) => void;\n  /**\n   * Callback called when there's an error loading the image.\n   */\n  onError?: (event: SyntheticEvent<HTMLImageElement, Event>) => void;\n}\n/* @conditional-compile-remove(image-overlay) */\n/**\n * Strings of {@link ImageOverlay} that can be overridden.\n *\n * @beta\n */\nexport interface ImageOverlayStrings {\n  /**\n   * Download button label for ImageOverlay\n   */\n  downloadButtonLabel: string;\n  /**\n   * Dismiss button aria label for ImageOverlay\n   */\n  dismissButtonAriaLabel: string;\n}\n/* @conditional-compile-remove(image-overlay) */\n/**\n * Component to render a fullscreen modal for a selected image.\n *\n * @beta\n */\nexport const ImageOverlay = (props: ImageOverlayProps): JSX.Element => {\n  const { isOpen, imageSrc, title, titleIcon, altText, onDownloadButtonClicked, onDismiss, onError } = props;\n  const theme = useTheme() as unknown as ChatTheme;\n\n  /* @conditional-compile-remove(image-overlay) */\n  const localeStrings = useLocale().strings.imageOverlay;\n\n  const [isImageLoaded, setIsImageLoaded] = useState<boolean>(true);\n\n  const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(theme);\n\n  const renderHeaderBar = (): JSX.Element => {\n    return (\n      <Stack className={mergeStyles(headerStyle)}>\n        <Stack className={mergeStyles(titleBarContainerStyle)}>\n          {titleIcon}\n          <Stack.Item className={mergeStyles(titleStyle(theme))} aria-label={title || 'Image'}>\n            {title}\n          </Stack.Item>\n        </Stack>\n        <Stack className={mergeStyles(controlBarContainerStyle)}>\n          <DefaultButton\n            className={mergeStyles(downloadButtonStyle(theme))}\n            /* @conditional-compile-remove(image-overlay) */\n            text={localeStrings.downloadButtonLabel}\n            onClick={() => onDownloadButtonClicked(imageSrc)}\n            onRenderIcon={() => <Icon iconName={downloadIcon.iconName} className={mergeStyles(downloadIconStyle)} />}\n            aria-live={'polite'}\n            /* @conditional-compile-remove(image-overlay) */\n            aria-label={localeStrings.downloadButtonLabel}\n          />\n          <IconButton\n            iconProps={downloadIcon}\n            className={mergeStyles(smallDownloadButtonContainerStyle(theme))}\n            onClick={() => onDownloadButtonClicked(imageSrc)}\n            /* @conditional-compile-remove(image-overlay) */\n            aria-label={localeStrings.downloadButtonLabel}\n            aria-live={'polite'}\n          />\n          <IconButton\n            iconProps={cancelIcon}\n            className={mergeStyles(closeButtonStyles(theme))}\n            onClick={onDismiss}\n            /* @conditional-compile-remove(image-overlay) */\n            ariaLabel={localeStrings.dismissButtonAriaLabel}\n            aria-live={'polite'}\n          />\n        </Stack>\n      </Stack>\n    );\n  };\n\n  const renderBodyWithLightDismiss = (): JSX.Element => {\n    return (\n      <Stack className={mergeStyles(bodyContainer)} onClick={() => props.onDismiss()}>\n        {imageSrc && (\n          <img\n            src={imageSrc}\n            className={mergeStyles(imageStyle)}\n            alt={altText || 'image'}\n            aria-label={'image-overlay-main-image'}\n            aria-live={'polite'}\n            onError={(event) => {\n              setIsImageLoaded(false);\n              onError && onError(event);\n            }}\n            onClick={(event) => event.stopPropagation()}\n            onDoubleClick={(event) => {\n              event.persist();\n            }}\n          />\n        )}\n      </Stack>\n    );\n  };\n\n  return (\n    <Modal\n      titleAriaId={title}\n      isOpen={isOpen}\n      onDismiss={onDismiss}\n      overlay={{ styles: { ...overlayStyles(theme) } }}\n      styles={{ main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }}\n      isDarkOverlay={true}\n    >\n      {renderHeaderBar()}\n      {renderBodyWithLightDismiss()}\n    </Modal>\n  );\n};\n"]}
+{"version":3,"file":"ImageOverlay.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ImageOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(image-overlay) */\nimport { DefaultButton, Icon, IconButton, Modal, Stack, mergeStyles } from '@fluentui/react';\n/* @conditional-compile-remove(image-overlay) */\nimport React, { useState } from 'react';\n/* @conditional-compile-remove(image-overlay) */\nimport {\n  bodyContainer,\n  brokenImageStyle,\n  cancelIcon,\n  closeButtonStyles,\n  controlBarContainerStyle,\n  downloadButtonStyle,\n  downloadIcon,\n  downloadIconStyle,\n  focusTrapZoneStyle,\n  headerStyle,\n  normalImageStyle,\n  overlayStyles,\n  scrollableContentStyle,\n  smallDownloadButtonContainerStyle,\n  themeProviderRootStyle,\n  titleBarContainerStyle,\n  titleStyle\n} from './styles/ImageOverlay.style';\n/* @conditional-compile-remove(image-overlay) */\nimport { FluentThemeProvider } from '../theming/FluentThemeProvider';\n/* @conditional-compile-remove(image-overlay) */\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(image-overlay) */\nimport { imageOverlayTheme } from '../theming';\n\n/* @conditional-compile-remove(image-overlay) */\n/**\n * Props for {@link ImageOverlay}.\n *\n * @beta\n */\nexport interface ImageOverlayProps {\n  /**\n   * Boolean that controls whether the modal is displayed.\n   */\n  isOpen: boolean;\n  /**\n   * Image source used to display the image in a large scale.\n   */\n  imageSrc: string;\n  /**\n   * Optional string used as a alt text for the image. @default 'image'\n   */\n  altText?: string;\n  /**\n   * Optional string used as the title of the image and displayed on the top left corner of the ImageOverlay.\n   */\n  title?: string;\n  /**\n   * Optional JSX element used as a title icon and displayed to the left of the title element.\n   */\n  titleIcon?: JSX.Element;\n  /**\n   * Callback to invoke when the ImageOverlay modal is dismissed\n   */\n  onDismiss: () => void;\n  /**\n   * Optional callback called when the download button is clicked. If not provided, the download button will not be rendered.\n   */\n  onDownloadButtonClicked?: (imageSrc: string) => void;\n}\n/* @conditional-compile-remove(image-overlay) */\n/**\n * Strings of {@link ImageOverlay} that can be overridden.\n *\n * @beta\n */\nexport interface ImageOverlayStrings {\n  /**\n   * Download button label for ImageOverlay\n   */\n  downloadButtonLabel: string;\n  /**\n   * Dismiss button aria label for ImageOverlay\n   */\n  dismissButtonAriaLabel: string;\n}\n/* @conditional-compile-remove(image-overlay) */\n/**\n * Component to render a fullscreen modal for a selected image.\n *\n * @beta\n */\nexport const ImageOverlay = (props: ImageOverlayProps): JSX.Element => {\n  const { isOpen, imageSrc, title, titleIcon, altText, onDownloadButtonClicked, onDismiss } = props;\n\n  /* @conditional-compile-remove(image-overlay) */\n  const localeStrings = useLocale().strings.imageOverlay;\n\n  const [isImageLoaded, setIsImageLoaded] = useState<boolean>(true);\n\n  const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(imageOverlayTheme);\n\n  const renderHeaderBar = (): JSX.Element => {\n    return (\n      <Stack className={mergeStyles(headerStyle)}>\n        <Stack className={mergeStyles(titleBarContainerStyle)}>\n          {titleIcon}\n          <Stack.Item className={mergeStyles(titleStyle(imageOverlayTheme))} aria-label={title || 'Image'}>\n            {title}\n          </Stack.Item>\n        </Stack>\n        <Stack className={mergeStyles(controlBarContainerStyle)}>\n          {onDownloadButtonClicked && (\n            <DefaultButton\n              className={mergeStyles(downloadButtonStyle)}\n              /* @conditional-compile-remove(image-overlay) */\n              text={localeStrings.downloadButtonLabel}\n              onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)}\n              onRenderIcon={() => <Icon iconName={downloadIcon.iconName} className={mergeStyles(downloadIconStyle)} />}\n              aria-live={'polite'}\n              /* @conditional-compile-remove(image-overlay) */\n              aria-label={localeStrings.downloadButtonLabel}\n            />\n          )}\n          {onDownloadButtonClicked && (\n            <IconButton\n              iconProps={downloadIcon}\n              className={mergeStyles(smallDownloadButtonContainerStyle(imageOverlayTheme))}\n              onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)}\n              /* @conditional-compile-remove(image-overlay) */\n              aria-label={localeStrings.downloadButtonLabel}\n              aria-live={'polite'}\n            />\n          )}\n          <IconButton\n            iconProps={cancelIcon}\n            className={mergeStyles(closeButtonStyles(imageOverlayTheme))}\n            onClick={onDismiss}\n            /* @conditional-compile-remove(image-overlay) */\n            ariaLabel={localeStrings.dismissButtonAriaLabel}\n            aria-live={'polite'}\n          />\n        </Stack>\n      </Stack>\n    );\n  };\n\n  const renderBodyWithLightDismiss = (): JSX.Element => {\n    return (\n      <Stack className={mergeStyles(bodyContainer)} onClick={() => props.onDismiss()}>\n        {imageSrc && (\n          <img\n            src={imageSrc}\n            className={mergeStyles(imageStyle)}\n            alt={altText || 'image'}\n            aria-label={'image-overlay-main-image'}\n            aria-live={'polite'}\n            onError={() => {\n              setIsImageLoaded(false);\n            }}\n            onClick={(event) => event.stopPropagation()}\n            onDoubleClick={(event) => {\n              event.persist();\n            }}\n          />\n        )}\n      </Stack>\n    );\n  };\n\n  return (\n    <Modal\n      titleAriaId={title}\n      isOpen={isOpen}\n      onDismiss={onDismiss}\n      overlay={{ styles: { ...overlayStyles(imageOverlayTheme) } }}\n      styles={{ main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }}\n      isDarkOverlay={true}\n    >\n      <FluentThemeProvider fluentTheme={imageOverlayTheme} rootStyle={themeProviderRootStyle}>\n        {renderHeaderBar()}\n        {renderBodyWithLightDismiss()}\n      </FluentThemeProvider>\n    </Modal>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/styles/ImageOverlay.style.d.ts

@@ -1,6 +1,6 @@
-import { IIconProps, IStyle } from '@fluentui/react';
+/// <reference types="react" />
+import { IIconProps, IStyle, PartialTheme } from '@fluentui/react';
 import { IOverlayStyles } from '@fluentui/react';
-import { ChatTheme } from '../../theming/themes';
 /**
  * @private
  */
@@ -12,7 +12,7 @@ export declare const downloadIcon: IIconProps;
 /**
  * @private
  */
-export declare const overlayStyles: (theme: ChatTheme) => IOverlayStyles;
+export declare const overlayStyles: (theme: PartialTheme) => IOverlayStyles;
 /**
  * @private
  */
@@ -21,6 +21,10 @@ export declare const focusTrapZoneStyle: IStyle;
  * @private
  */
 export declare const scrollableContentStyle: IStyle;
+/**
+ * @private
+ */
+export declare const themeProviderRootStyle: React.CSSProperties;
 /**
  * @private
  */
@@ -32,7 +36,7 @@ export declare const titleBarContainerStyle: IStyle;
 /**
  * @private
  */
-export declare const titleStyle: (theme: ChatTheme) => IStyle;
+export declare const titleStyle: (theme: PartialTheme) => IStyle;
 /**
  * @private
  */
@@ -52,17 +56,17 @@ export declare const normalImageStyle: IStyle;
 /**
  * @private
  */
-export declare const brokenImageStyle: (theme: ChatTheme) => IStyle;
+export declare const brokenImageStyle: (theme: PartialTheme) => IStyle;
 /**
  * @private
  */
-export declare const closeButtonStyles: (theme: ChatTheme) => IStyle;
+export declare const closeButtonStyles: (theme: PartialTheme) => IStyle;
 /**
  * @private
  */
-export declare const downloadButtonStyle: (theme: ChatTheme) => IStyle;
+export declare const downloadButtonStyle: IStyle;
 /**
  * @private
  */
-export declare const smallDownloadButtonContainerStyle: (theme: ChatTheme) => IStyle;
+export declare const smallDownloadButtonContainerStyle: (theme: PartialTheme) => IStyle;
 //# sourceMappingURL=ImageOverlay.style.d.ts.map

package/dist/dist-esm/react-components/src/components/styles/ImageOverlay.style.js

@@ -15,10 +15,10 @@ export const downloadIcon = {
  * @private
  */
 export const overlayStyles = (theme) => {
+    var _a;
     return {
         root: {
-            background: theme.chatPalette.modalOverlayBlack,
-            opacity: '0.85'
+            background: (_a = theme.semanticColors) === null || _a === void 0 ? void 0 : _a.bodyBackground
         }
     };
 };
@@ -45,6 +45,14 @@ export const scrollableContentStyle = {
     flexDirection: 'column',
     flexWrap: 'nowrap'
 };
+/**
+ * @private
+ */
+export const themeProviderRootStyle = {
+    background: 'transparent',
+    display: 'flex',
+    flexDirection: 'column'
+};
 /**
  * @private
  */
@@ -67,14 +75,14 @@ export const titleBarContainerStyle = {
     alignContent: 'center',
     alignItems: 'center'
 };
-/* @conditional-compile-remove(image-overlay) */
 /**
  * @private
  */
 export const titleStyle = (theme) => {
+    var _a;
     return {
         paddingLeft: '0.5rem',
-        color: theme.chatPalette.modalTitleWhite,
+        color: (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.black,
         fontFamily: 'inherit',
         fontSize: '0.875rem',
         fontStyle: 'normal',
@@ -122,77 +130,60 @@ export const normalImageStyle = {
     maxHeight: '100%',
     maxWidth: '100%'
 };
-/* @conditional-compile-remove(image-overlay) */
 /**
  * @private
  */
 export const brokenImageStyle = (theme) => {
+    var _a;
     return {
-        color: theme.chatPalette.modalTitleWhite
+        color: (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.black
     };
 };
-/* @conditional-compile-remove(image-overlay) */
 /**
  * @private
  */
 export const closeButtonStyles = (theme) => {
+    var _a, _b, _c;
     return {
-        color: theme.chatPalette.modalTitleWhite,
+        color: (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.black,
         ':hover': {
-            color: theme.chatPalette.modalTitleWhite,
-            backgroundColor: theme.chatPalette.modalButtonBackgroundHover
+            color: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.black
         },
         ':active': {
-            color: theme.chatPalette.modalTitleWhite,
-            backgroundColor: theme.chatPalette.modalButtonBackgroundActive
+            color: (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.black
         }
     };
 };
-/* @conditional-compile-remove(image-overlay) */
 /**
  * @private
  */
-export const downloadButtonStyle = (theme) => {
-    return {
-        margin: '0 0.5rem',
-        height: '32px',
-        borderWidth: '1px',
-        fontSize: '0.875rem', // 14px
-        fontWeight: 600,
-        padding: '0.38rem 0.75rem',
-        borderRadius: '4px',
-        backgroundColor: theme.chatPalette.modalButtonBackground,
-        color: theme.chatPalette.modalTitleWhite,
-        whiteSpace: 'nowrap',
-        ':hover': {
-            color: theme.chatPalette.modalTitleWhite,
-            backgroundColor: theme.chatPalette.modalButtonBackgroundHover
-        },
-        ':active': {
-            color: theme.chatPalette.modalTitleWhite,
-            backgroundColor: theme.chatPalette.modalButtonBackgroundActive
-        },
-        '@media (max-width: 25rem)': {
-            display: 'none'
-        }
-    };
+export const downloadButtonStyle = {
+    margin: '0 0.5rem',
+    height: '32px',
+    borderWidth: '1px',
+    fontSize: '0.875rem', // 14px
+    fontWeight: 600,
+    padding: '0.38rem 0.75rem',
+    borderRadius: '4px',
+    whiteSpace: 'nowrap',
+    '@media (max-width: 25rem)': {
+        display: 'none'
+    }
 };
-/* @conditional-compile-remove(image-overlay) */
 /**
  * @private
  */
 export const smallDownloadButtonContainerStyle = (theme) => {
+    var _a, _b, _c;
     return {
         marginRight: '0.5rem',
-        color: theme.chatPalette.modalTitleWhite,
         whiteSpace: 'nowrap',
+        color: (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.black,
         ':hover': {
-            color: theme.chatPalette.modalTitleWhite,
-            backgroundColor: theme.chatPalette.modalButtonBackgroundHover
+            color: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.black
         },
         ':active': {
-            color: theme.chatPalette.modalTitleWhite,
-            backgroundColor: theme.chatPalette.modalButtonBackgroundActive
+            color: (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.black
         },
         '@media (min-width: 25rem)': {
             display: 'none'

package/dist/dist-esm/react-components/src/components/styles/ImageOverlay.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageOverlay.style.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ImageOverlay.style.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IIconProps, IStyle } from '@fluentui/react';\n/* @conditional-compile-remove(image-overlay) */\nimport { IOverlayStyles } from '@fluentui/react';\n/* @conditional-compile-remove(image-overlay) */\nimport { ChatTheme } from '../../theming/themes';\n\n/**\n * @private\n */\nexport const cancelIcon: IIconProps = { iconName: 'Cancel' };\n\n/**\n * @private\n */\nexport const downloadIcon: IIconProps = {\n  iconName: 'Download'\n};\n\n/* @conditional-compile-remove(image-overlay) */\n/**\n * @private\n */\nexport const overlayStyles = (theme: ChatTheme): IOverlayStyles => {\n  return {\n    root: {\n      background: theme.chatPalette.modalOverlayBlack,\n      opacity: '0.85'\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const focusTrapZoneStyle: IStyle = {\n  boxShadow: 'none',\n  background: 'transparent',\n  display: 'flex',\n  width: '100%',\n  height: '100%',\n  maxWidth: '100%',\n  maxHeight: '100%'\n};\n\n/**\n * @private\n */\nexport const scrollableContentStyle: IStyle = {\n  overflowY: 'hidden',\n  display: 'flex',\n  maxWidth: '100%',\n  maxHeight: '100%',\n  flexDirection: 'column',\n  flexWrap: 'nowrap'\n};\n\n/**\n * @private\n */\nexport const headerStyle: IStyle = {\n  fontSize: 'inherit',\n  margin: '0',\n  width: '100%',\n  height: '3.5rem',\n  flexDirection: 'row',\n  justifyContent: 'space-between',\n  padding: '0.25rem 0.75rem'\n};\n\n/**\n * @private\n */\nexport const titleBarContainerStyle: IStyle = {\n  flexDirection: 'row',\n  justifyContent: 'start',\n  flexWrap: 'wrap',\n  alignContent: 'center',\n  alignItems: 'center'\n};\n\n/* @conditional-compile-remove(image-overlay) */\n/**\n * @private\n */\nexport const titleStyle = (theme: ChatTheme): IStyle => {\n  return {\n    paddingLeft: '0.5rem',\n    color: theme.chatPalette.modalTitleWhite,\n    fontFamily: 'inherit',\n    fontSize: '0.875rem',\n    fontStyle: 'normal',\n    fontWeight: '600',\n    lineHeight: '1.25rem'\n  };\n};\n\n/**\n * @private\n */\nexport const controlBarContainerStyle: IStyle = {\n  flexDirection: 'row',\n  justifyContent: 'start',\n  flexWrap: 'wrap',\n  alignContent: 'center',\n  alignItems: 'center'\n};\n\n/**\n * @private\n */\nexport const downloadIconStyle: IStyle = {\n  marginRight: '0.5em',\n  fontSize: '0.875rem' // 14px\n};\n\n/**\n * @private\n */\nexport const bodyContainer: IStyle = {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: '100%',\n  height: '100%',\n  overflow: 'hidden',\n  padding: '1rem 2rem 3rem 2rem',\n  '@media (max-width: 25rem) or (max-height: 25rem)': {\n    padding: '0rem 1rem 2rem 1rem'\n  }\n};\n\n/**\n * @private\n */\nexport const normalImageStyle: IStyle = {\n  objectFit: 'contain',\n  maxHeight: '100%',\n  maxWidth: '100%'\n};\n\n/* @conditional-compile-remove(image-overlay) */\n/**\n * @private\n */\nexport const brokenImageStyle = (theme: ChatTheme): IStyle => {\n  return {\n    color: theme.chatPalette.modalTitleWhite\n  };\n};\n\n/* @conditional-compile-remove(image-overlay) */\n/**\n * @private\n */\nexport const closeButtonStyles = (theme: ChatTheme): IStyle => {\n  return {\n    color: theme.chatPalette.modalTitleWhite,\n    ':hover': {\n      color: theme.chatPalette.modalTitleWhite,\n      backgroundColor: theme.chatPalette.modalButtonBackgroundHover\n    },\n    ':active': {\n      color: theme.chatPalette.modalTitleWhite,\n      backgroundColor: theme.chatPalette.modalButtonBackgroundActive\n    }\n  };\n};\n\n/* @conditional-compile-remove(image-overlay) */\n/**\n * @private\n */\nexport const downloadButtonStyle = (theme: ChatTheme): IStyle => {\n  return {\n    margin: '0 0.5rem',\n    height: '32px',\n    borderWidth: '1px',\n    fontSize: '0.875rem', // 14px\n    fontWeight: 600,\n    padding: '0.38rem 0.75rem',\n    borderRadius: '4px',\n    backgroundColor: theme.chatPalette.modalButtonBackground,\n    color: theme.chatPalette.modalTitleWhite,\n    whiteSpace: 'nowrap',\n    ':hover': {\n      color: theme.chatPalette.modalTitleWhite,\n      backgroundColor: theme.chatPalette.modalButtonBackgroundHover\n    },\n    ':active': {\n      color: theme.chatPalette.modalTitleWhite,\n      backgroundColor: theme.chatPalette.modalButtonBackgroundActive\n    },\n    '@media (max-width: 25rem)': {\n      display: 'none'\n    }\n  };\n};\n\n/* @conditional-compile-remove(image-overlay) */\n/**\n * @private\n */\nexport const smallDownloadButtonContainerStyle = (theme: ChatTheme): IStyle => {\n  return {\n    marginRight: '0.5rem',\n    color: theme.chatPalette.modalTitleWhite,\n    whiteSpace: 'nowrap',\n    ':hover': {\n      color: theme.chatPalette.modalTitleWhite,\n      backgroundColor: theme.chatPalette.modalButtonBackgroundHover\n    },\n    ':active': {\n      color: theme.chatPalette.modalTitleWhite,\n      backgroundColor: theme.chatPalette.modalButtonBackgroundActive\n    },\n    '@media (min-width: 25rem)': {\n      display: 'none'\n    }\n  };\n};\n"]}
+{"version":3,"file":"ImageOverlay.style.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ImageOverlay.style.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IIconProps, IStyle, PartialTheme } from '@fluentui/react';\n/* @conditional-compile-remove(image-overlay) */\nimport { IOverlayStyles } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const cancelIcon: IIconProps = { iconName: 'Cancel' };\n\n/**\n * @private\n */\nexport const downloadIcon: IIconProps = {\n  iconName: 'Download'\n};\n\n/* @conditional-compile-remove(image-overlay) */\n/**\n * @private\n */\nexport const overlayStyles = (theme: PartialTheme): IOverlayStyles => {\n  return {\n    root: {\n      background: theme.semanticColors?.bodyBackground\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const focusTrapZoneStyle: IStyle = {\n  boxShadow: 'none',\n  background: 'transparent',\n  display: 'flex',\n  width: '100%',\n  height: '100%',\n  maxWidth: '100%',\n  maxHeight: '100%'\n};\n\n/**\n * @private\n */\nexport const scrollableContentStyle: IStyle = {\n  overflowY: 'hidden',\n  display: 'flex',\n  maxWidth: '100%',\n  maxHeight: '100%',\n  flexDirection: 'column',\n  flexWrap: 'nowrap'\n};\n\n/**\n * @private\n */\nexport const themeProviderRootStyle: React.CSSProperties = {\n  background: 'transparent',\n  display: 'flex',\n  flexDirection: 'column'\n};\n\n/**\n * @private\n */\nexport const headerStyle: IStyle = {\n  fontSize: 'inherit',\n  margin: '0',\n  width: '100%',\n  height: '3.5rem',\n  flexDirection: 'row',\n  justifyContent: 'space-between',\n  padding: '0.25rem 0.75rem'\n};\n\n/**\n * @private\n */\nexport const titleBarContainerStyle: IStyle = {\n  flexDirection: 'row',\n  justifyContent: 'start',\n  flexWrap: 'wrap',\n  alignContent: 'center',\n  alignItems: 'center'\n};\n\n/**\n * @private\n */\nexport const titleStyle = (theme: PartialTheme): IStyle => {\n  return {\n    paddingLeft: '0.5rem',\n    color: theme.palette?.black,\n    fontFamily: 'inherit',\n    fontSize: '0.875rem',\n    fontStyle: 'normal',\n    fontWeight: '600',\n    lineHeight: '1.25rem'\n  };\n};\n\n/**\n * @private\n */\nexport const controlBarContainerStyle: IStyle = {\n  flexDirection: 'row',\n  justifyContent: 'start',\n  flexWrap: 'wrap',\n  alignContent: 'center',\n  alignItems: 'center'\n};\n\n/**\n * @private\n */\nexport const downloadIconStyle: IStyle = {\n  marginRight: '0.5em',\n  fontSize: '0.875rem' // 14px\n};\n\n/**\n * @private\n */\nexport const bodyContainer: IStyle = {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: '100%',\n  height: '100%',\n  overflow: 'hidden',\n  padding: '1rem 2rem 3rem 2rem',\n  '@media (max-width: 25rem) or (max-height: 25rem)': {\n    padding: '0rem 1rem 2rem 1rem'\n  }\n};\n\n/**\n * @private\n */\nexport const normalImageStyle: IStyle = {\n  objectFit: 'contain',\n  maxHeight: '100%',\n  maxWidth: '100%'\n};\n\n/**\n * @private\n */\nexport const brokenImageStyle = (theme: PartialTheme): IStyle => {\n  return {\n    color: theme.palette?.black\n  };\n};\n\n/**\n * @private\n */\nexport const closeButtonStyles = (theme: PartialTheme): IStyle => {\n  return {\n    color: theme.palette?.black,\n    ':hover': {\n      color: theme.palette?.black\n    },\n    ':active': {\n      color: theme.palette?.black\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const downloadButtonStyle: IStyle = {\n  margin: '0 0.5rem',\n  height: '32px',\n  borderWidth: '1px',\n  fontSize: '0.875rem', // 14px\n  fontWeight: 600,\n  padding: '0.38rem 0.75rem',\n  borderRadius: '4px',\n  whiteSpace: 'nowrap',\n  '@media (max-width: 25rem)': {\n    display: 'none'\n  }\n};\n\n/**\n * @private\n */\nexport const smallDownloadButtonContainerStyle = (theme: PartialTheme): IStyle => {\n  return {\n    marginRight: '0.5rem',\n    whiteSpace: 'nowrap',\n    color: theme.palette?.black,\n    ':hover': {\n      color: theme.palette?.black\n    },\n    ':active': {\n      color: theme.palette?.black\n    },\n    '@media (min-width: 25rem)': {\n      display: 'none'\n    }\n  };\n};\n"]}

package/dist/dist-esm/react-components/src/theming/FluentThemeProvider.d.ts

@@ -15,6 +15,8 @@ export interface FluentThemeProviderProps {
      * @defaultValue `false`
      */
     rtl?: boolean;
+    /** Optional style to change the root style of the ThemeProvider */
+    rootStyle?: React.CSSProperties | undefined;
 }
 /**
  * Provider to apply a Fluent theme across this library's react components.

package/dist/dist-esm/react-components/src/theming/FluentThemeProvider.js

@@ -34,11 +34,12 @@ const ThemeContext = createContext(defaultTheme);
  * @public
  */
 export const FluentThemeProvider = (props) => {
-    const { fluentTheme, rtl, children } = props;
+    const { fluentTheme, rtl, children, /* @conditional-compile-remove(image-overlay) */ rootStyle } = props;
     let fluentV8Theme = mergeThemes(defaultTheme, fluentTheme);
     fluentV8Theme = mergeThemes(fluentV8Theme, { rtl });
     return (React.createElement(ThemeContext.Provider, { value: fluentV8Theme },
-        React.createElement(ThemeProvider, { theme: fluentV8Theme, className: wrapper }, children)));
+        React.createElement(ThemeProvider, { theme: fluentV8Theme, className: wrapper, 
+            /* @conditional-compile-remove(image-overlay) */ style: rootStyle }, children)));
 };
 /**
  * React hook to access theme