@azure/communication-react 1.7.0-alpha-202308100014 → 1.7.0-alpha-202308120012

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.7.0-alpha-202308100014';
+module.exports = '1.7.0-alpha-202308120012';
 //# 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,0BAA0B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.7.0-alpha-202308100014';\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,0BAA0B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.7.0-alpha-202308120012';\n"]}

package/dist/dist-esm/calling-stateful-client/src/CallSubscriber.js

@@ -164,6 +164,14 @@ export class CallSubscriber {
                     (_b = this._localVideoStreamVideoEffectsSubscribers.get(localVideoStreamKey)) === null || _b === void 0 ? void 0 : _b.unsubscribe();
                 }
                 disposeView(this._context, this._internalContext, this._callIdRef.callId, undefined, convertSdkLocalStreamToDeclarativeLocalStream(event.removed[0]));
+                /**
+                 * This check is to make sure that we are not deleting the local render info for the local video stream if there is one.
+                 *
+                 * TODO: we need to make sure the we are supporting the local screenshare stream that is now being tracked. This is a stop gap solution.
+                 */
+                if (event.removed[0].mediaStreamType === 'ScreenSharing') {
+                    return;
+                }
                 this._internalContext.deleteLocalRenderInfo(this._callIdRef.callId);
                 this._context.setCallLocalVideoStream(this._callIdRef.callId, []);
             }

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

@@ -1 +1 @@
-{"version":3,"file":"CallSubscriber.js","sourceRoot":"","sources":["../../../../../calling-stateful-client/src/CallSubscriber.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { Features, LocalVideoStream, RemoteParticipant } from '@azure/communication-calling';\nimport { toFlatCommunicationIdentifier } from '@internal/acs-ui-common';\nimport { CallCommon } from './BetaToStableTypes';\nimport { CallContext } from './CallContext';\nimport { CallIdRef } from './CallIdRef';\n/* @conditional-compile-remove(close-captions) */\nimport { CaptionsSubscriber } from './CaptionsSubscriber';\nimport {\n  convertSdkLocalStreamToDeclarativeLocalStream,\n  convertSdkParticipantToDeclarativeParticipant\n} from './Converter';\nimport { InternalCallContext } from './InternalCallContext';\n/* @conditional-compile-remove(video-background-effects) */\nimport { LocalVideoStreamVideoEffectsSubscriber } from './LocalVideoStreamVideoEffectsSubscriber';\nimport { ParticipantSubscriber } from './ParticipantSubscriber';\nimport { RecordingSubscriber } from './RecordingSubscriber';\nimport { disposeView } from './StreamUtils';\nimport { TranscriptionSubscriber } from './TranscriptionSubscriber';\n/* @conditional-compile-remove(close-captions) */\nimport { _isTeamsMeetingCall } from './TypeGuards';\nimport { UserFacingDiagnosticsSubscriber } from './UserFacingDiagnosticsSubscriber';\n/* @conditional-compile-remove(raise-hand) */\nimport { RaiseHandSubscriber } from './RaiseHandSubscriber';\n/* @conditional-compile-remove(optimal-video-count) */\nimport { OptimalVideoCountSubscriber } from './OptimalVideoCountSubscriber';\n/* @conditional-compile-remove(capabilities) */\nimport { CapabilitiesSubscriber } from './CapabilitiesSubscriber';\n\n/**\n * Keeps track of the listeners assigned to a particular call because when we get an event from SDK, it doesn't tell us\n * which call it is for. If we keep track of this then we know which call in the state that needs an update and also\n * which property of that call. Also we can use this when unregistering to a call.\n */\nexport class CallSubscriber {\n  private _call: CallCommon;\n  private _callIdRef: CallIdRef;\n  private _context: CallContext;\n  private _internalContext: InternalCallContext;\n\n  private _diagnosticsSubscriber: UserFacingDiagnosticsSubscriber;\n  private _participantSubscribers: Map<string, ParticipantSubscriber>;\n  private _recordingSubscriber: RecordingSubscriber;\n  private _transcriptionSubscriber: TranscriptionSubscriber;\n  /* @conditional-compile-remove(optimal-video-count) */\n  private _optimalVideoCountSubscriber: OptimalVideoCountSubscriber;\n  /* @conditional-compile-remove(close-captions) */\n  private _captionsSubscriber?: CaptionsSubscriber;\n  /* @conditional-compile-remove(raise-hand) */\n  private _raiseHandSubscriber?: RaiseHandSubscriber;\n  /* @conditional-compile-remove(video-background-effects) */\n  private _localVideoStreamVideoEffectsSubscribers: Map<string, LocalVideoStreamVideoEffectsSubscriber>;\n  /* @conditional-compile-remove(capabilities) */\n  private _capabilitiesSubscriber: CapabilitiesSubscriber;\n\n  constructor(call: CallCommon, context: CallContext, internalContext: InternalCallContext) {\n    this._call = call;\n    this._callIdRef = { callId: call.id };\n    this._context = context;\n    this._internalContext = internalContext;\n\n    this._diagnosticsSubscriber = new UserFacingDiagnosticsSubscriber(\n      this._callIdRef,\n      this._context,\n      this._call.feature(Features.UserFacingDiagnostics)\n    );\n    this._participantSubscribers = new Map<string, ParticipantSubscriber>();\n    this._recordingSubscriber = new RecordingSubscriber(\n      this._callIdRef,\n      this._context,\n      this._call.feature(Features.Recording)\n    );\n    this._transcriptionSubscriber = new TranscriptionSubscriber(\n      this._callIdRef,\n      this._context,\n      this._call.feature(Features.Transcription)\n    );\n    /* @conditional-compile-remove(raise-hand) */\n    this._raiseHandSubscriber = new RaiseHandSubscriber(\n      this._callIdRef,\n      this._context,\n      this._call.feature(Features.RaiseHand)\n    );\n    /* @conditional-compile-remove(optimal-video-count) */\n    this._optimalVideoCountSubscriber = new OptimalVideoCountSubscriber({\n      callIdRef: this._callIdRef,\n      context: this._context,\n      localOptimalVideoCountFeature: this._call.feature(Features.OptimalVideoCount)\n    });\n    /* @conditional-compile-remove(video-background-effects) */\n    this._localVideoStreamVideoEffectsSubscribers = new Map();\n\n    /* @conditional-compile-remove(capabilities) */\n    this._capabilitiesSubscriber = new CapabilitiesSubscriber(\n      this._callIdRef,\n      this._context,\n      this._call.feature(Features.Capabilities)\n    );\n\n    this.subscribe();\n  }\n\n  private subscribe = (): void => {\n    this._call.on('stateChanged', this.stateChanged);\n    /* @conditional-compile-remove(close-captions) */\n    this._call.on('stateChanged', this.initCaptionSubscriber);\n    this._call.on('idChanged', this.idChanged);\n    this._call.on('isScreenSharingOnChanged', this.isScreenSharingOnChanged);\n    this._call.on('remoteParticipantsUpdated', this.remoteParticipantsUpdated);\n    this._call.on('localVideoStreamsUpdated', this.localVideoStreamsUpdated);\n    this._call.on('isMutedChanged', this.isMuteChanged);\n    /* @conditional-compile-remove(rooms) */\n    this._call.on('roleChanged', this.callRoleChangedHandler);\n    this._call.feature(Features.DominantSpeakers).on('dominantSpeakersChanged', this.dominantSpeakersChanged);\n    /* @conditional-compile-remove(total-participant-count) */\n    this._call.on('totalParticipantCountChanged', this.totalParticipantCountChangedHandler);\n\n    // At time of writing only one LocalVideoStream is supported by SDK.\n    if (this._call.localVideoStreams.length > 0) {\n      this._internalContext.setLocalRenderInfo(\n        this._callIdRef.callId,\n        this._call.localVideoStreams[0],\n        'NotRendered',\n        undefined\n      );\n    }\n\n    if (this._call.remoteParticipants.length > 0) {\n      this._call.remoteParticipants.forEach((participant: RemoteParticipant) => {\n        this.addParticipantListener(participant);\n      });\n\n      this._context.setCallRemoteParticipants(\n        this._callIdRef.callId,\n        this._call.remoteParticipants.map(convertSdkParticipantToDeclarativeParticipant),\n        []\n      );\n    }\n  };\n\n  public unsubscribe = (): void => {\n    this._call.off('stateChanged', this.stateChanged);\n    /* @conditional-compile-remove(close-captions) */\n    this._call.off('stateChanged', this.initCaptionSubscriber);\n    this._call.off('idChanged', this.idChanged);\n    this._call.off('isScreenSharingOnChanged', this.isScreenSharingOnChanged);\n    this._call.off('remoteParticipantsUpdated', this.remoteParticipantsUpdated);\n    this._call.off('localVideoStreamsUpdated', this.localVideoStreamsUpdated);\n    this._call.off('isMutedChanged', this.isMuteChanged);\n    /* @conditional-compile-remove(rooms) */\n    this._call.off('roleChanged', this.callRoleChangedHandler);\n    /* @conditional-compile-remove(total-participant-count) */\n    this._call.off('totalParticipantCountChanged', this.totalParticipantCountChangedHandler);\n\n    this._participantSubscribers.forEach((participantSubscriber: ParticipantSubscriber) => {\n      participantSubscriber.unsubscribe();\n    });\n    this._participantSubscribers.clear();\n\n    // If we are unsubscribing that means we no longer want to display any video for this call (callEnded or callAgent\n    // disposed) and we should not be updating it any more. So if video is rendering we stop rendering.\n    if (this._call.localVideoStreams && this._call.localVideoStreams[0]) {\n      disposeView(\n        this._context,\n        this._internalContext,\n        this._callIdRef.callId,\n        undefined,\n        convertSdkLocalStreamToDeclarativeLocalStream(this._call.localVideoStreams[0])\n      );\n    }\n\n    this._internalContext.deleteLocalRenderInfo(this._callIdRef.callId);\n\n    this._diagnosticsSubscriber.unsubscribe();\n    this._recordingSubscriber.unsubscribe();\n    this._transcriptionSubscriber.unsubscribe();\n    /* @conditional-compile-remove(optimal-video-count) */\n    this._optimalVideoCountSubscriber.unsubscribe();\n    /* @conditional-compile-remove(close-captions) */\n    this._captionsSubscriber?.unsubscribe();\n    /* @conditional-compile-remove(raise-hand) */\n    this._raiseHandSubscriber?.unsubscribe();\n    /* @conditional-compile-remove(capabilities) */\n    this._capabilitiesSubscriber.unsubscribe();\n  };\n\n  private addParticipantListener(participant: RemoteParticipant): void {\n    const participantKey = toFlatCommunicationIdentifier(participant.identifier);\n    this._participantSubscribers.get(participantKey)?.unsubscribe();\n    this._participantSubscribers.set(\n      participantKey,\n      new ParticipantSubscriber(this._callIdRef, participant, this._context, this._internalContext)\n    );\n  }\n\n  private removeParticipantListener(participant: RemoteParticipant): void {\n    const participantKey = toFlatCommunicationIdentifier(participant.identifier);\n    const participantSubscriber = this._participantSubscribers.get(participantKey);\n    if (participantSubscriber) {\n      participantSubscriber.unsubscribe();\n      this._participantSubscribers.delete(participantKey);\n    }\n  }\n\n  private stateChanged = (): void => {\n    this._context.setCallState(this._callIdRef.callId, this._call.state);\n  };\n\n  /* @conditional-compile-remove(close-captions) */\n  private initCaptionSubscriber = (): void => {\n    // subscribe to captions here so that we don't call captions when call is not initialized\n    if (_isTeamsMeetingCall(this._call) && this._call.state === 'Connected' && !this._captionsSubscriber) {\n      this._captionsSubscriber = new CaptionsSubscriber(\n        this._callIdRef,\n        this._context,\n        this._call.feature(Features.TeamsCaptions)\n      );\n      this._call.off('stateChanged', this.initCaptionSubscriber);\n    }\n  };\n\n  private idChanged = (): void => {\n    this._internalContext.setCallId(this._call.id, this._callIdRef.callId);\n    this._context.setCallId(this._call.id, this._callIdRef.callId);\n    this._callIdRef.callId = this._call.id;\n  };\n\n  private isScreenSharingOnChanged = (): void => {\n    this._context.setCallIsScreenSharingOn(this._callIdRef.callId, this._call.isScreenSharingOn);\n  };\n\n  private isMuteChanged = (): void => {\n    this._context.setCallIsMicrophoneMuted(this._callIdRef.callId, this._call.isMuted);\n  };\n\n  /* @conditional-compile-remove(rooms) */\n  private callRoleChangedHandler = (): void => {\n    this._context.setRole(this._callIdRef.callId, this._call.role);\n  };\n\n  /* @conditional-compile-remove(total-participant-count) */\n  private totalParticipantCountChangedHandler = (): void => {\n    this._context.setTotalParticipantCount(this._callIdRef.callId, this._call.totalParticipantCount);\n  };\n\n  private remoteParticipantsUpdated = (event: { added: RemoteParticipant[]; removed: RemoteParticipant[] }): void => {\n    event.added.forEach((participant: RemoteParticipant) => {\n      this.addParticipantListener(participant);\n    });\n    event.removed.forEach((participant: RemoteParticipant) => {\n      this.removeParticipantListener(participant);\n    });\n\n    // Remove any added participants from remoteParticipantsEnded if they are there and add any removed participants to\n    // remoteParticipantsEnded.\n    this._context.setCallRemoteParticipantsEnded(\n      this._callIdRef.callId,\n      event.removed.map(convertSdkParticipantToDeclarativeParticipant),\n      event.added.map((participant: RemoteParticipant) => {\n        return toFlatCommunicationIdentifier(participant.identifier);\n      })\n    );\n\n    // Add added participants to remoteParticipants and remove removed participants from remoteParticipants.\n    this._context.setCallRemoteParticipants(\n      this._callIdRef.callId,\n      event.added.map(convertSdkParticipantToDeclarativeParticipant),\n      event.removed.map((participant: RemoteParticipant) => {\n        return toFlatCommunicationIdentifier(participant.identifier);\n      })\n    );\n  };\n\n  private localVideoStreamsUpdated = (event: { added: LocalVideoStream[]; removed: LocalVideoStream[] }): void => {\n    // At time of writing only one LocalVideoStream is supported by SDK.\n    if (event.added.length > 0) {\n      const localVideoStreams = [convertSdkLocalStreamToDeclarativeLocalStream(this._call.localVideoStreams[0])];\n      // IMPORTANT: The internalContext should be set before context. This is done to ensure that the internal context\n      // has the required data when component re-renders due to external state changes.\n      this._internalContext.setLocalRenderInfo(\n        this._callIdRef.callId,\n        this._call.localVideoStreams[0],\n        'NotRendered',\n        undefined\n      );\n      this._context.setCallLocalVideoStream(this._callIdRef.callId, [...localVideoStreams]);\n\n      /* @conditional-compile-remove(video-background-effects) */\n      {\n        // Subscribe to video effect changes\n        const localVideoStreamKey = event.added[0].source.id;\n        this._localVideoStreamVideoEffectsSubscribers.get(localVideoStreamKey)?.unsubscribe();\n        this._localVideoStreamVideoEffectsSubscribers.set(\n          localVideoStreamKey,\n          new LocalVideoStreamVideoEffectsSubscriber({\n            parent: this._callIdRef,\n            context: this._context,\n            localVideoStream: this._call.localVideoStreams[0],\n            localVideoStreamEffectsAPI: this._call.localVideoStreams[0].feature(Features.VideoEffects)\n          })\n        );\n      }\n    }\n    if (event.removed.length > 0) {\n      /* @conditional-compile-remove(video-background-effects) */\n      {\n        const localVideoStreamKey = event.removed[0].source.id;\n        this._localVideoStreamVideoEffectsSubscribers.get(localVideoStreamKey)?.unsubscribe();\n      }\n      disposeView(\n        this._context,\n        this._internalContext,\n        this._callIdRef.callId,\n        undefined,\n        convertSdkLocalStreamToDeclarativeLocalStream(event.removed[0])\n      );\n      this._internalContext.deleteLocalRenderInfo(this._callIdRef.callId);\n      this._context.setCallLocalVideoStream(this._callIdRef.callId, []);\n    }\n  };\n\n  private dominantSpeakersChanged = (): void => {\n    const dominantSpeakers = this._call.feature(Features.DominantSpeakers).dominantSpeakers;\n    this._context.setCallDominantSpeakers(this._callIdRef.callId, dominantSpeakers);\n  };\n}\n\"../../acs-ui-common/src\""]}
+{"version":3,"file":"CallSubscriber.js","sourceRoot":"","sources":["../../../../../calling-stateful-client/src/CallSubscriber.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { Features, LocalVideoStream, RemoteParticipant } from '@azure/communication-calling';\nimport { toFlatCommunicationIdentifier } from '@internal/acs-ui-common';\nimport { CallCommon } from './BetaToStableTypes';\nimport { CallContext } from './CallContext';\nimport { CallIdRef } from './CallIdRef';\n/* @conditional-compile-remove(close-captions) */\nimport { CaptionsSubscriber } from './CaptionsSubscriber';\nimport {\n  convertSdkLocalStreamToDeclarativeLocalStream,\n  convertSdkParticipantToDeclarativeParticipant\n} from './Converter';\nimport { InternalCallContext } from './InternalCallContext';\n/* @conditional-compile-remove(video-background-effects) */\nimport { LocalVideoStreamVideoEffectsSubscriber } from './LocalVideoStreamVideoEffectsSubscriber';\nimport { ParticipantSubscriber } from './ParticipantSubscriber';\nimport { RecordingSubscriber } from './RecordingSubscriber';\nimport { disposeView } from './StreamUtils';\nimport { TranscriptionSubscriber } from './TranscriptionSubscriber';\n/* @conditional-compile-remove(close-captions) */\nimport { _isTeamsMeetingCall } from './TypeGuards';\nimport { UserFacingDiagnosticsSubscriber } from './UserFacingDiagnosticsSubscriber';\n/* @conditional-compile-remove(raise-hand) */\nimport { RaiseHandSubscriber } from './RaiseHandSubscriber';\n/* @conditional-compile-remove(optimal-video-count) */\nimport { OptimalVideoCountSubscriber } from './OptimalVideoCountSubscriber';\n/* @conditional-compile-remove(capabilities) */\nimport { CapabilitiesSubscriber } from './CapabilitiesSubscriber';\n\n/**\n * Keeps track of the listeners assigned to a particular call because when we get an event from SDK, it doesn't tell us\n * which call it is for. If we keep track of this then we know which call in the state that needs an update and also\n * which property of that call. Also we can use this when unregistering to a call.\n */\nexport class CallSubscriber {\n  private _call: CallCommon;\n  private _callIdRef: CallIdRef;\n  private _context: CallContext;\n  private _internalContext: InternalCallContext;\n\n  private _diagnosticsSubscriber: UserFacingDiagnosticsSubscriber;\n  private _participantSubscribers: Map<string, ParticipantSubscriber>;\n  private _recordingSubscriber: RecordingSubscriber;\n  private _transcriptionSubscriber: TranscriptionSubscriber;\n  /* @conditional-compile-remove(optimal-video-count) */\n  private _optimalVideoCountSubscriber: OptimalVideoCountSubscriber;\n  /* @conditional-compile-remove(close-captions) */\n  private _captionsSubscriber?: CaptionsSubscriber;\n  /* @conditional-compile-remove(raise-hand) */\n  private _raiseHandSubscriber?: RaiseHandSubscriber;\n  /* @conditional-compile-remove(video-background-effects) */\n  private _localVideoStreamVideoEffectsSubscribers: Map<string, LocalVideoStreamVideoEffectsSubscriber>;\n  /* @conditional-compile-remove(capabilities) */\n  private _capabilitiesSubscriber: CapabilitiesSubscriber;\n\n  constructor(call: CallCommon, context: CallContext, internalContext: InternalCallContext) {\n    this._call = call;\n    this._callIdRef = { callId: call.id };\n    this._context = context;\n    this._internalContext = internalContext;\n\n    this._diagnosticsSubscriber = new UserFacingDiagnosticsSubscriber(\n      this._callIdRef,\n      this._context,\n      this._call.feature(Features.UserFacingDiagnostics)\n    );\n    this._participantSubscribers = new Map<string, ParticipantSubscriber>();\n    this._recordingSubscriber = new RecordingSubscriber(\n      this._callIdRef,\n      this._context,\n      this._call.feature(Features.Recording)\n    );\n    this._transcriptionSubscriber = new TranscriptionSubscriber(\n      this._callIdRef,\n      this._context,\n      this._call.feature(Features.Transcription)\n    );\n    /* @conditional-compile-remove(raise-hand) */\n    this._raiseHandSubscriber = new RaiseHandSubscriber(\n      this._callIdRef,\n      this._context,\n      this._call.feature(Features.RaiseHand)\n    );\n    /* @conditional-compile-remove(optimal-video-count) */\n    this._optimalVideoCountSubscriber = new OptimalVideoCountSubscriber({\n      callIdRef: this._callIdRef,\n      context: this._context,\n      localOptimalVideoCountFeature: this._call.feature(Features.OptimalVideoCount)\n    });\n    /* @conditional-compile-remove(video-background-effects) */\n    this._localVideoStreamVideoEffectsSubscribers = new Map();\n\n    /* @conditional-compile-remove(capabilities) */\n    this._capabilitiesSubscriber = new CapabilitiesSubscriber(\n      this._callIdRef,\n      this._context,\n      this._call.feature(Features.Capabilities)\n    );\n\n    this.subscribe();\n  }\n\n  private subscribe = (): void => {\n    this._call.on('stateChanged', this.stateChanged);\n    /* @conditional-compile-remove(close-captions) */\n    this._call.on('stateChanged', this.initCaptionSubscriber);\n    this._call.on('idChanged', this.idChanged);\n    this._call.on('isScreenSharingOnChanged', this.isScreenSharingOnChanged);\n    this._call.on('remoteParticipantsUpdated', this.remoteParticipantsUpdated);\n    this._call.on('localVideoStreamsUpdated', this.localVideoStreamsUpdated);\n    this._call.on('isMutedChanged', this.isMuteChanged);\n    /* @conditional-compile-remove(rooms) */\n    this._call.on('roleChanged', this.callRoleChangedHandler);\n    this._call.feature(Features.DominantSpeakers).on('dominantSpeakersChanged', this.dominantSpeakersChanged);\n    /* @conditional-compile-remove(total-participant-count) */\n    this._call.on('totalParticipantCountChanged', this.totalParticipantCountChangedHandler);\n\n    // At time of writing only one LocalVideoStream is supported by SDK.\n    if (this._call.localVideoStreams.length > 0) {\n      this._internalContext.setLocalRenderInfo(\n        this._callIdRef.callId,\n        this._call.localVideoStreams[0],\n        'NotRendered',\n        undefined\n      );\n    }\n\n    if (this._call.remoteParticipants.length > 0) {\n      this._call.remoteParticipants.forEach((participant: RemoteParticipant) => {\n        this.addParticipantListener(participant);\n      });\n\n      this._context.setCallRemoteParticipants(\n        this._callIdRef.callId,\n        this._call.remoteParticipants.map(convertSdkParticipantToDeclarativeParticipant),\n        []\n      );\n    }\n  };\n\n  public unsubscribe = (): void => {\n    this._call.off('stateChanged', this.stateChanged);\n    /* @conditional-compile-remove(close-captions) */\n    this._call.off('stateChanged', this.initCaptionSubscriber);\n    this._call.off('idChanged', this.idChanged);\n    this._call.off('isScreenSharingOnChanged', this.isScreenSharingOnChanged);\n    this._call.off('remoteParticipantsUpdated', this.remoteParticipantsUpdated);\n    this._call.off('localVideoStreamsUpdated', this.localVideoStreamsUpdated);\n    this._call.off('isMutedChanged', this.isMuteChanged);\n    /* @conditional-compile-remove(rooms) */\n    this._call.off('roleChanged', this.callRoleChangedHandler);\n    /* @conditional-compile-remove(total-participant-count) */\n    this._call.off('totalParticipantCountChanged', this.totalParticipantCountChangedHandler);\n\n    this._participantSubscribers.forEach((participantSubscriber: ParticipantSubscriber) => {\n      participantSubscriber.unsubscribe();\n    });\n    this._participantSubscribers.clear();\n\n    // If we are unsubscribing that means we no longer want to display any video for this call (callEnded or callAgent\n    // disposed) and we should not be updating it any more. So if video is rendering we stop rendering.\n    if (this._call.localVideoStreams && this._call.localVideoStreams[0]) {\n      disposeView(\n        this._context,\n        this._internalContext,\n        this._callIdRef.callId,\n        undefined,\n        convertSdkLocalStreamToDeclarativeLocalStream(this._call.localVideoStreams[0])\n      );\n    }\n\n    this._internalContext.deleteLocalRenderInfo(this._callIdRef.callId);\n\n    this._diagnosticsSubscriber.unsubscribe();\n    this._recordingSubscriber.unsubscribe();\n    this._transcriptionSubscriber.unsubscribe();\n    /* @conditional-compile-remove(optimal-video-count) */\n    this._optimalVideoCountSubscriber.unsubscribe();\n    /* @conditional-compile-remove(close-captions) */\n    this._captionsSubscriber?.unsubscribe();\n    /* @conditional-compile-remove(raise-hand) */\n    this._raiseHandSubscriber?.unsubscribe();\n    /* @conditional-compile-remove(capabilities) */\n    this._capabilitiesSubscriber.unsubscribe();\n  };\n\n  private addParticipantListener(participant: RemoteParticipant): void {\n    const participantKey = toFlatCommunicationIdentifier(participant.identifier);\n    this._participantSubscribers.get(participantKey)?.unsubscribe();\n    this._participantSubscribers.set(\n      participantKey,\n      new ParticipantSubscriber(this._callIdRef, participant, this._context, this._internalContext)\n    );\n  }\n\n  private removeParticipantListener(participant: RemoteParticipant): void {\n    const participantKey = toFlatCommunicationIdentifier(participant.identifier);\n    const participantSubscriber = this._participantSubscribers.get(participantKey);\n    if (participantSubscriber) {\n      participantSubscriber.unsubscribe();\n      this._participantSubscribers.delete(participantKey);\n    }\n  }\n\n  private stateChanged = (): void => {\n    this._context.setCallState(this._callIdRef.callId, this._call.state);\n  };\n\n  /* @conditional-compile-remove(close-captions) */\n  private initCaptionSubscriber = (): void => {\n    // subscribe to captions here so that we don't call captions when call is not initialized\n    if (_isTeamsMeetingCall(this._call) && this._call.state === 'Connected' && !this._captionsSubscriber) {\n      this._captionsSubscriber = new CaptionsSubscriber(\n        this._callIdRef,\n        this._context,\n        this._call.feature(Features.TeamsCaptions)\n      );\n      this._call.off('stateChanged', this.initCaptionSubscriber);\n    }\n  };\n\n  private idChanged = (): void => {\n    this._internalContext.setCallId(this._call.id, this._callIdRef.callId);\n    this._context.setCallId(this._call.id, this._callIdRef.callId);\n    this._callIdRef.callId = this._call.id;\n  };\n\n  private isScreenSharingOnChanged = (): void => {\n    this._context.setCallIsScreenSharingOn(this._callIdRef.callId, this._call.isScreenSharingOn);\n  };\n\n  private isMuteChanged = (): void => {\n    this._context.setCallIsMicrophoneMuted(this._callIdRef.callId, this._call.isMuted);\n  };\n\n  /* @conditional-compile-remove(rooms) */\n  private callRoleChangedHandler = (): void => {\n    this._context.setRole(this._callIdRef.callId, this._call.role);\n  };\n\n  /* @conditional-compile-remove(total-participant-count) */\n  private totalParticipantCountChangedHandler = (): void => {\n    this._context.setTotalParticipantCount(this._callIdRef.callId, this._call.totalParticipantCount);\n  };\n\n  private remoteParticipantsUpdated = (event: { added: RemoteParticipant[]; removed: RemoteParticipant[] }): void => {\n    event.added.forEach((participant: RemoteParticipant) => {\n      this.addParticipantListener(participant);\n    });\n    event.removed.forEach((participant: RemoteParticipant) => {\n      this.removeParticipantListener(participant);\n    });\n\n    // Remove any added participants from remoteParticipantsEnded if they are there and add any removed participants to\n    // remoteParticipantsEnded.\n    this._context.setCallRemoteParticipantsEnded(\n      this._callIdRef.callId,\n      event.removed.map(convertSdkParticipantToDeclarativeParticipant),\n      event.added.map((participant: RemoteParticipant) => {\n        return toFlatCommunicationIdentifier(participant.identifier);\n      })\n    );\n\n    // Add added participants to remoteParticipants and remove removed participants from remoteParticipants.\n    this._context.setCallRemoteParticipants(\n      this._callIdRef.callId,\n      event.added.map(convertSdkParticipantToDeclarativeParticipant),\n      event.removed.map((participant: RemoteParticipant) => {\n        return toFlatCommunicationIdentifier(participant.identifier);\n      })\n    );\n  };\n\n  private localVideoStreamsUpdated = (event: { added: LocalVideoStream[]; removed: LocalVideoStream[] }): void => {\n    // At time of writing only one LocalVideoStream is supported by SDK.\n    if (event.added.length > 0) {\n      const localVideoStreams = [convertSdkLocalStreamToDeclarativeLocalStream(this._call.localVideoStreams[0])];\n      // IMPORTANT: The internalContext should be set before context. This is done to ensure that the internal context\n      // has the required data when component re-renders due to external state changes.\n      this._internalContext.setLocalRenderInfo(\n        this._callIdRef.callId,\n        this._call.localVideoStreams[0],\n        'NotRendered',\n        undefined\n      );\n      this._context.setCallLocalVideoStream(this._callIdRef.callId, [...localVideoStreams]);\n\n      /* @conditional-compile-remove(video-background-effects) */\n      {\n        // Subscribe to video effect changes\n        const localVideoStreamKey = event.added[0].source.id;\n        this._localVideoStreamVideoEffectsSubscribers.get(localVideoStreamKey)?.unsubscribe();\n        this._localVideoStreamVideoEffectsSubscribers.set(\n          localVideoStreamKey,\n          new LocalVideoStreamVideoEffectsSubscriber({\n            parent: this._callIdRef,\n            context: this._context,\n            localVideoStream: this._call.localVideoStreams[0],\n            localVideoStreamEffectsAPI: this._call.localVideoStreams[0].feature(Features.VideoEffects)\n          })\n        );\n      }\n    }\n    if (event.removed.length > 0) {\n      /* @conditional-compile-remove(video-background-effects) */\n      {\n        const localVideoStreamKey = event.removed[0].source.id;\n        this._localVideoStreamVideoEffectsSubscribers.get(localVideoStreamKey)?.unsubscribe();\n      }\n      disposeView(\n        this._context,\n        this._internalContext,\n        this._callIdRef.callId,\n        undefined,\n        convertSdkLocalStreamToDeclarativeLocalStream(event.removed[0])\n      );\n      /**\n       * This check is to make sure that we are not deleting the local render info for the local video stream if there is one.\n       *\n       * TODO: we need to make sure the we are supporting the local screenshare stream that is now being tracked. This is a stop gap solution.\n       */\n      if (event.removed[0].mediaStreamType === 'ScreenSharing') {\n        return;\n      }\n      this._internalContext.deleteLocalRenderInfo(this._callIdRef.callId);\n      this._context.setCallLocalVideoStream(this._callIdRef.callId, []);\n    }\n  };\n\n  private dominantSpeakersChanged = (): void => {\n    const dominantSpeakers = this._call.feature(Features.DominantSpeakers).dominantSpeakers;\n    this._context.setCallDominantSpeakers(this._callIdRef.callId, dominantSpeakers);\n  };\n}\n\"../../acs-ui-common/src\""]}

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

@@ -28,7 +28,7 @@ export interface ImageGalleryStylesProps extends BaseCustomStyles {
     /** Styles for the close modal icon. */
     closeIcon?: IStyle;
     /** Styles for the image container. */
-    imageContainer?: IStyle;
+    bodyContainer?: IStyle;
     /** Styles for the image. */
     image?: IStyle;
 }

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

@@ -1,8 +1,8 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-import { DefaultButton, Icon, IconButton, Layer, Modal, Stack, mergeStyles } from '@fluentui/react';
+import { DefaultButton, FocusTrapZone, Icon, IconButton, Modal, Stack, mergeStyles } from '@fluentui/react';
 import React, { useState } from 'react';
-import { brokenImageStyle, cancelIcon, closeButtonStyles, controlBarContainerStyle, downloadButtonStyle, downloadIcon, downloadIconStyle, focusTrapZoneStyle, headerStyle, imageContainer, normalImageStyle, overlayStyles, scrollableContentStyle, smallDownloadButtonContainerStyle, titleBarContainerStyle, titleStyle } from './styles/ImageGallery.style';
+import { bodyContainer, bodyFocusZone, brokenImageStyle, cancelIcon, closeButtonStyles, controlBarContainerStyle, downloadButtonStyle, downloadIcon, downloadIconStyle, focusTrapZoneStyle, headerStyle, normalImageStyle, overlayStyles, scrollableContentStyle, smallDownloadButtonContainerStyle, titleBarContainerStyle, titleStyle } from './styles/ImageGallery.style';
 import { useTheme } from '../theming/FluentThemeProvider';
 import { isDarkThemed } from '../theming/themeUtils';
 /**
@@ -24,20 +24,33 @@ export const ImageGallery = (props) => {
         return React.createElement(React.Fragment, null);
     }
     const image = images[startIndex];
-    return (React.createElement(Layer, { hostId: modalLayerHostId },
-        React.createElement(Modal, { titleAriaId: image.title, isOpen: images.length > 0, onDismiss: onDismiss, overlay: { styles: Object.assign(Object.assign({}, overlayStyles(theme, isDarkTheme)), styles === null || styles === void 0 ? void 0 : styles.overlay) }, layerProps: { id: modalLayerHostId }, styles: Object.assign({ main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }, styles === null || styles === void 0 ? void 0 : styles.modal) },
-            React.createElement("div", { className: mergeStyles(imageContainer, styles === null || styles === void 0 ? void 0 : styles.imageContainer) },
-                React.createElement("img", { src: image.imageUrl, className: mergeStyles(imageStyle, styles === null || styles === void 0 ? void 0 : styles.image), alt: image.altText || defaultAltText, onError: (event) => {
-                        setIsImageLoaded(false);
-                        onError && onError(event);
-                    } }))),
-        React.createElement(Stack, { className: mergeStyles(headerStyle, styles === null || styles === void 0 ? void 0 : styles.header) },
+    const renderHeaderBar = () => {
+        return (React.createElement(Stack, { className: mergeStyles(headerStyle, styles === null || styles === void 0 ? void 0 : styles.header) },
             React.createElement(Stack, { className: mergeStyles(titleBarContainerStyle, styles === null || styles === void 0 ? void 0 : styles.titleBarContainer) },
                 image.titleIcon,
                 React.createElement(Stack.Item, { className: mergeStyles(titleStyle(theme, isDarkTheme), styles === null || styles === void 0 ? void 0 : styles.title), "aria-label": image.title }, image.title)),
             React.createElement(Stack, { className: mergeStyles(controlBarContainerStyle, styles === null || styles === void 0 ? void 0 : styles.controlBarContainer) },
                 React.createElement(DefaultButton, { className: mergeStyles(downloadButtonStyle(theme, isDarkTheme), styles === null || styles === void 0 ? void 0 : styles.downloadButton), text: downloadButtonTitleString, onClick: () => onImageDownloadButtonClicked(image.imageUrl, image.saveAsName), onRenderIcon: () => (React.createElement(Icon, { iconName: downloadIcon.iconName, className: mergeStyles(downloadIconStyle, styles === null || styles === void 0 ? void 0 : styles.downloadButtonIcon) })), "aria-live": 'polite', "aria-label": downloadButtonTitleString }),
                 React.createElement(IconButton, { iconProps: downloadIcon, className: mergeStyles(smallDownloadButtonContainerStyle(theme, isDarkTheme), styles === null || styles === void 0 ? void 0 : styles.smallDownloadButton), onClick: () => onImageDownloadButtonClicked(image.imageUrl, image.saveAsName), "aria-label": downloadButtonTitleString, "aria-live": 'polite' }),
-                React.createElement(IconButton, { iconProps: cancelIcon, className: mergeStyles(closeButtonStyles(theme, isDarkTheme), styles === null || styles === void 0 ? void 0 : styles.closeIcon), onClick: onDismiss, ariaLabel: closeString, "aria-live": 'polite' })))));
+                React.createElement(IconButton, { iconProps: cancelIcon, className: mergeStyles(closeButtonStyles(theme, isDarkTheme), styles === null || styles === void 0 ? void 0 : styles.closeIcon), onClick: onDismiss, ariaLabel: closeString, "aria-live": 'polite' }))));
+    };
+    const renderBodyWithLightDismiss = () => {
+        return (React.createElement(Stack, { className: mergeStyles(bodyContainer, styles === null || styles === void 0 ? void 0 : styles.bodyContainer), onClick: () => props.onDismiss() },
+            React.createElement(FocusTrapZone, { onKeyDown: (e) => {
+                    if (e.key === 'Escape' || e.key === 'Esc') {
+                        onDismiss();
+                    }
+                }, 
+                // Ensure when the focus trap has focus, the light dismiss area can still be clicked with mouse to dismiss.
+                // Note: this still correctly captures keyboard focus, this just allows mouse click outside of the focus trap.
+                isClickableOutsideFocusTrap: true, className: mergeStyles(bodyFocusZone) },
+                React.createElement("img", { src: image.imageUrl, className: mergeStyles(imageStyle, styles === null || styles === void 0 ? void 0 : styles.image), alt: image.altText || defaultAltText, onError: (event) => {
+                        setIsImageLoaded(false);
+                        onError && onError(event);
+                    }, onClick: (event) => event.stopPropagation() }))));
+    };
+    return (React.createElement(Modal, { titleAriaId: image.title, isOpen: images.length > 0, onDismiss: onDismiss, overlay: { styles: Object.assign(Object.assign({}, overlayStyles(theme, isDarkTheme)), styles === null || styles === void 0 ? void 0 : styles.overlay) }, layerProps: { id: modalLayerHostId }, styles: Object.assign({ main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }, styles === null || styles === void 0 ? void 0 : styles.modal), isDarkOverlay: true },
+        renderHeaderBar(),
+        renderBodyWithLightDismiss()));
 };
 //# sourceMappingURL=ImageGallery.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ImageGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ImageGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n  DefaultButton,\n  IModalStyleProps,\n  IModalStyles,\n  IOverlayStyleProps,\n  IOverlayStyles,\n  IStyle,\n  IStyleFunctionOrObject,\n  Icon,\n  IconButton,\n  Layer,\n  Modal,\n  Stack,\n  mergeStyles\n} from '@fluentui/react';\n\nimport React, { SyntheticEvent, useState } from 'react';\nimport { BaseCustomStyles } from '../types';\nimport {\n  brokenImageStyle,\n  cancelIcon,\n  closeButtonStyles,\n  controlBarContainerStyle,\n  downloadButtonStyle,\n  downloadIcon,\n  downloadIconStyle,\n  focusTrapZoneStyle,\n  headerStyle,\n  imageContainer,\n  normalImageStyle,\n  overlayStyles,\n  scrollableContentStyle,\n  smallDownloadButtonContainerStyle,\n  titleBarContainerStyle,\n  titleStyle\n} from './styles/ImageGallery.style';\nimport { useTheme } from '../theming/FluentThemeProvider';\nimport { isDarkThemed } from '../theming/themeUtils';\n\n/**\n * Fluent styles for {@link ImageGallery}.\n *\n * @beta\n */\nexport interface ImageGalleryStylesProps extends BaseCustomStyles {\n  /** Styles for the ImageGallery Modal. */\n  modal?: IStyleFunctionOrObject<IModalStyleProps, IModalStyles>;\n  /** Styles for the ImageGallery Modal overlay. */\n  overlay?: IStyleFunctionOrObject<IOverlayStyleProps, IOverlayStyles>;\n  /** Styles for the ImageGallery header bar. */\n  header?: IStyle;\n  /** Styles for the ImageGallery titleBar container. */\n  titleBarContainer?: IStyle;\n  /** styles for the title label */\n  title?: IStyle;\n  /** Styles for the ImageGallery controlBar container. */\n  controlBarContainer?: IStyle;\n  /** Styles for the download button. */\n  downloadButton?: IStyle;\n  /** Styles for the icon within the download button. */\n  downloadButtonIcon?: IStyle;\n  /** Styles for the small download button when screen width is smaller than 25 rem. */\n  smallDownloadButton?: IStyle;\n  /** Styles for the close modal icon. */\n  closeIcon?: IStyle;\n  /** Styles for the image container. */\n  imageContainer?: IStyle;\n  /** Styles for the image. */\n  image?: IStyle;\n}\n\n/**\n * Props for {@link ImageGallery}.\n *\n * @beta\n */\nexport interface ImageGalleryImageProps {\n  /** Image Url used to display the image in a large scale. */\n  imageUrl: string;\n  /** String used as a file name when downloading this image to user's local device. */\n  saveAsName: string;\n  /** Optional string used as a alt text for the image. @default 'image' */\n  altText?: string;\n  /** Optional string used as the title of the image and displayed on the top left corner of the ImageGallery. */\n  title?: string;\n  /** Optional JSX element used as a title icon and displayed to the left of the title element. */\n  titleIcon?: JSX.Element;\n}\n\n/**\n * Props for {@link ImageGallery}.\n *\n * @beta\n */\nexport interface ImageGalleryProps {\n  /**\n   * Array of images used to populate the ImageGallery\n   */\n  images: Array<ImageGalleryImageProps>;\n  /**\n   * Callback to invoke when the ImageGallery modal is dismissed\n   */\n  onDismiss: () => void;\n  /**\n   * Callback called when the download button is clicked.\n   */\n  onImageDownloadButtonClicked: (imageUrl: string, saveAsName: string) => void;\n  /**\n   * Callback called when there's an error loading the image.\n   */\n  onError?: (event: SyntheticEvent<HTMLImageElement, Event>) => void;\n  /** Optional id property provided on a LayerHost that this Layer should render within.\n   *  If an id is not provided, we will render the Layer content in a fixed position element rendered at the end of the document.\n   */\n  modalLayerHostId?: string;\n  /**\n   * Indicating which index of the images array to start with.\n   */\n  startIndex?: number;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <ImageGallery styles={{ image: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: ImageGalleryStylesProps;\n}\n\n/**\n * Component to render a fullscreen modal for a selected image.\n *\n * @beta\n */\nexport const ImageGallery = (props: ImageGalleryProps): JSX.Element => {\n  const { images, modalLayerHostId, onImageDownloadButtonClicked, onDismiss, onError, styles, startIndex = 0 } = props;\n  const theme = useTheme();\n  const isDarkTheme = isDarkThemed(theme);\n\n  const downloadButtonTitleString = 'Download';\n  const closeString = 'Close';\n  const defaultAltText = 'image';\n\n  const [isImageLoaded, setIsImageLoaded] = useState<boolean>(true);\n\n  const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(theme, isDarkTheme);\n\n  if (images.length <= startIndex) {\n    console.log('Unable to display Image Gallery due to startIndex is out of range.');\n    return <></>;\n  }\n  const image = images[startIndex];\n  return (\n    <Layer hostId={modalLayerHostId}>\n      <Modal\n        titleAriaId={image.title}\n        isOpen={images.length > 0}\n        onDismiss={onDismiss}\n        overlay={{ styles: { ...overlayStyles(theme, isDarkTheme), ...styles?.overlay } }}\n        layerProps={{ id: modalLayerHostId }}\n        styles={{ main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle, ...styles?.modal }}\n      >\n        <div className={mergeStyles(imageContainer, styles?.imageContainer)}>\n          <img\n            src={image.imageUrl}\n            className={mergeStyles(imageStyle, styles?.image)}\n            alt={image.altText || defaultAltText}\n            onError={(event) => {\n              setIsImageLoaded(false);\n              onError && onError(event);\n            }}\n          />\n        </div>\n      </Modal>\n      <Stack className={mergeStyles(headerStyle, styles?.header)}>\n        <Stack className={mergeStyles(titleBarContainerStyle, styles?.titleBarContainer)}>\n          {image.titleIcon}\n          <Stack.Item className={mergeStyles(titleStyle(theme, isDarkTheme), styles?.title)} aria-label={image.title}>\n            {image.title}\n          </Stack.Item>\n        </Stack>\n        <Stack className={mergeStyles(controlBarContainerStyle, styles?.controlBarContainer)}>\n          <DefaultButton\n            className={mergeStyles(downloadButtonStyle(theme, isDarkTheme), styles?.downloadButton)}\n            text={downloadButtonTitleString}\n            onClick={() => onImageDownloadButtonClicked(image.imageUrl, image.saveAsName)}\n            onRenderIcon={() => (\n              <Icon\n                iconName={downloadIcon.iconName}\n                className={mergeStyles(downloadIconStyle, styles?.downloadButtonIcon)}\n              />\n            )}\n            aria-live={'polite'}\n            aria-label={downloadButtonTitleString}\n          />\n          <IconButton\n            iconProps={downloadIcon}\n            className={mergeStyles(smallDownloadButtonContainerStyle(theme, isDarkTheme), styles?.smallDownloadButton)}\n            onClick={() => onImageDownloadButtonClicked(image.imageUrl, image.saveAsName)}\n            aria-label={downloadButtonTitleString}\n            aria-live={'polite'}\n          />\n          <IconButton\n            iconProps={cancelIcon}\n            className={mergeStyles(closeButtonStyles(theme, isDarkTheme), styles?.closeIcon)}\n            onClick={onDismiss}\n            ariaLabel={closeString}\n            aria-live={'polite'}\n          />\n        </Stack>\n      </Stack>\n    </Layer>\n  );\n};\n"]}
+{"version":3,"file":"ImageGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ImageGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n  DefaultButton,\n  FocusTrapZone,\n  IModalStyleProps,\n  IModalStyles,\n  IOverlayStyleProps,\n  IOverlayStyles,\n  IStyle,\n  IStyleFunctionOrObject,\n  Icon,\n  IconButton,\n  Modal,\n  Stack,\n  mergeStyles\n} from '@fluentui/react';\n\nimport React, { SyntheticEvent, useState } from 'react';\nimport { BaseCustomStyles } from '../types';\nimport {\n  bodyContainer,\n  bodyFocusZone,\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/ImageGallery.style';\nimport { useTheme } from '../theming/FluentThemeProvider';\nimport { isDarkThemed } from '../theming/themeUtils';\n\n/**\n * Fluent styles for {@link ImageGallery}.\n *\n * @beta\n */\nexport interface ImageGalleryStylesProps extends BaseCustomStyles {\n  /** Styles for the ImageGallery Modal. */\n  modal?: IStyleFunctionOrObject<IModalStyleProps, IModalStyles>;\n  /** Styles for the ImageGallery Modal overlay. */\n  overlay?: IStyleFunctionOrObject<IOverlayStyleProps, IOverlayStyles>;\n  /** Styles for the ImageGallery header bar. */\n  header?: IStyle;\n  /** Styles for the ImageGallery titleBar container. */\n  titleBarContainer?: IStyle;\n  /** styles for the title label */\n  title?: IStyle;\n  /** Styles for the ImageGallery controlBar container. */\n  controlBarContainer?: IStyle;\n  /** Styles for the download button. */\n  downloadButton?: IStyle;\n  /** Styles for the icon within the download button. */\n  downloadButtonIcon?: IStyle;\n  /** Styles for the small download button when screen width is smaller than 25 rem. */\n  smallDownloadButton?: IStyle;\n  /** Styles for the close modal icon. */\n  closeIcon?: IStyle;\n  /** Styles for the image container. */\n  bodyContainer?: IStyle;\n  /** Styles for the image. */\n  image?: IStyle;\n}\n\n/**\n * Props for {@link ImageGallery}.\n *\n * @beta\n */\nexport interface ImageGalleryImageProps {\n  /** Image Url used to display the image in a large scale. */\n  imageUrl: string;\n  /** String used as a file name when downloading this image to user's local device. */\n  saveAsName: string;\n  /** Optional string used as a alt text for the image. @default 'image' */\n  altText?: string;\n  /** Optional string used as the title of the image and displayed on the top left corner of the ImageGallery. */\n  title?: string;\n  /** Optional JSX element used as a title icon and displayed to the left of the title element. */\n  titleIcon?: JSX.Element;\n}\n\n/**\n * Props for {@link ImageGallery}.\n *\n * @beta\n */\nexport interface ImageGalleryProps {\n  /**\n   * Array of images used to populate the ImageGallery\n   */\n  images: Array<ImageGalleryImageProps>;\n  /**\n   * Callback to invoke when the ImageGallery modal is dismissed\n   */\n  onDismiss: () => void;\n  /**\n   * Callback called when the download button is clicked.\n   */\n  onImageDownloadButtonClicked: (imageUrl: string, saveAsName: string) => void;\n  /**\n   * Callback called when there's an error loading the image.\n   */\n  onError?: (event: SyntheticEvent<HTMLImageElement, Event>) => void;\n  /** Optional id property provided on a LayerHost that this Layer should render within.\n   *  If an id is not provided, we will render the Layer content in a fixed position element rendered at the end of the document.\n   */\n  modalLayerHostId?: string;\n  /**\n   * Indicating which index of the images array to start with.\n   */\n  startIndex?: number;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <ImageGallery styles={{ image: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: ImageGalleryStylesProps;\n}\n\n/**\n * Component to render a fullscreen modal for a selected image.\n *\n * @beta\n */\nexport const ImageGallery = (props: ImageGalleryProps): JSX.Element => {\n  const { images, modalLayerHostId, onImageDownloadButtonClicked, onDismiss, onError, styles, startIndex = 0 } = props;\n  const theme = useTheme();\n  const isDarkTheme = isDarkThemed(theme);\n\n  const downloadButtonTitleString = 'Download';\n  const closeString = 'Close';\n  const defaultAltText = 'image';\n\n  const [isImageLoaded, setIsImageLoaded] = useState<boolean>(true);\n\n  const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(theme, isDarkTheme);\n\n  if (images.length <= startIndex) {\n    console.log('Unable to display Image Gallery due to startIndex is out of range.');\n    return <></>;\n  }\n  const image = images[startIndex];\n  const renderHeaderBar = (): JSX.Element => {\n    return (\n      <Stack className={mergeStyles(headerStyle, styles?.header)}>\n        <Stack className={mergeStyles(titleBarContainerStyle, styles?.titleBarContainer)}>\n          {image.titleIcon}\n          <Stack.Item className={mergeStyles(titleStyle(theme, isDarkTheme), styles?.title)} aria-label={image.title}>\n            {image.title}\n          </Stack.Item>\n        </Stack>\n        <Stack className={mergeStyles(controlBarContainerStyle, styles?.controlBarContainer)}>\n          <DefaultButton\n            className={mergeStyles(downloadButtonStyle(theme, isDarkTheme), styles?.downloadButton)}\n            text={downloadButtonTitleString}\n            onClick={() => onImageDownloadButtonClicked(image.imageUrl, image.saveAsName)}\n            onRenderIcon={() => (\n              <Icon\n                iconName={downloadIcon.iconName}\n                className={mergeStyles(downloadIconStyle, styles?.downloadButtonIcon)}\n              />\n            )}\n            aria-live={'polite'}\n            aria-label={downloadButtonTitleString}\n          />\n          <IconButton\n            iconProps={downloadIcon}\n            className={mergeStyles(smallDownloadButtonContainerStyle(theme, isDarkTheme), styles?.smallDownloadButton)}\n            onClick={() => onImageDownloadButtonClicked(image.imageUrl, image.saveAsName)}\n            aria-label={downloadButtonTitleString}\n            aria-live={'polite'}\n          />\n          <IconButton\n            iconProps={cancelIcon}\n            className={mergeStyles(closeButtonStyles(theme, isDarkTheme), styles?.closeIcon)}\n            onClick={onDismiss}\n            ariaLabel={closeString}\n            aria-live={'polite'}\n          />\n        </Stack>\n      </Stack>\n    );\n  };\n\n  const renderBodyWithLightDismiss = (): JSX.Element => {\n    return (\n      <Stack className={mergeStyles(bodyContainer, styles?.bodyContainer)} onClick={() => props.onDismiss()}>\n        <FocusTrapZone\n          onKeyDown={(e) => {\n            if (e.key === 'Escape' || e.key === 'Esc') {\n              onDismiss();\n            }\n          }}\n          // Ensure when the focus trap has focus, the light dismiss area can still be clicked with mouse to dismiss.\n          // Note: this still correctly captures keyboard focus, this just allows mouse click outside of the focus trap.\n          isClickableOutsideFocusTrap={true}\n          className={mergeStyles(bodyFocusZone)}\n        >\n          <img\n            src={image.imageUrl}\n            className={mergeStyles(imageStyle, styles?.image)}\n            alt={image.altText || defaultAltText}\n            onError={(event) => {\n              setIsImageLoaded(false);\n              onError && onError(event);\n            }}\n            onClick={(event) => event.stopPropagation()}\n          />\n        </FocusTrapZone>\n      </Stack>\n    );\n  };\n\n  return (\n    <Modal\n      titleAriaId={image.title}\n      isOpen={images.length > 0}\n      onDismiss={onDismiss}\n      overlay={{ styles: { ...overlayStyles(theme, isDarkTheme), ...styles?.overlay } }}\n      layerProps={{ id: modalLayerHostId }}\n      styles={{ main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle, ...styles?.modal }}\n      isDarkOverlay={true}\n    >\n      {renderHeaderBar()}\n      {renderBodyWithLightDismiss()}\n    </Modal>\n  );\n};\n"]}

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

@@ -102,7 +102,7 @@ export interface SendBoxProps {
      */
     systemMessage?: string;
     /**
-     * Optional callback called when message is sent
+     * Optional override behavior on send button click
      */
     onSendMessage?: (content: string) => Promise<void>;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"SendBox.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/SendBox.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAsB,WAAW,EAAE,eAAe,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAChG,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAExH,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,+CAA+C;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACrD,+CAA+C;AAC/C,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAKhE,MAAM,mBAAmB,GAAG,OAAO,CAAC;AACpC,MAAM,yBAAyB,GAAG,IAAI,CAAC;AAsLvC;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,KAAmB,EAAe,EAAE;IAC1D,MAAM,EACJ,QAAQ,EACR,aAAa,EACb,cAAc,EACd,aAAa,EACb,QAAQ,EACR,YAAY,EACZ,qBAAqB,EACrB,MAAM,EACN,SAAS;IACT,0CAA0C;IAC1C,oBAAoB,EACrB,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC;IAClD,MAAM,OAAO,mCAAQ,aAAa,GAAK,KAAK,CAAC,OAAO,CAAE,CAAC;IACvD,MAAM,GAAG,GAAG,cAAc,EAAE,CAAC;IAC7B,MAAM,iBAAiB,GAAG,2BAA2B,CAAC,KAAK,CAAC,CAAC;IAE7D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC/C,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElE,MAAM,gBAAgB,GAAG,KAAK,CAAC,MAAM,CAAa,IAAI,CAAC,CAAC;IAExD,MAAM,CAAC,uBAAuB,EAAE,0BAA0B,CAAC,GAAG,QAAQ,CAAmC,SAAS,CAAC,CAAC;IAEpH,MAAM,kBAAkB,GAAG,GAAS,EAAE;;QACpC,qCAAqC;QACrC,IAAI,QAAQ,IAAI,iBAAiB,EAAE;YACjC,OAAO;SACR;QAED,qEAAqE;QACrE,0BAA0B,CAAC,SAAS,CAAC,CAAC;QAEtC,IAAI,wBAAwB,CAAC,KAAK,CAAC,EAAE;YACnC,+CAA+C;YAC/C,0BAA0B,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,uBAAuB,EAAE,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;YAChG,OAAO;SACR;QAED,MAAM,OAAO,GAAG,SAAS,CAAC;QAC1B,wEAAwE;QACxE,uDAAuD;QACvD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,KAAK,CAAC,EAAE;YACxD,aAAa,IAAI,aAAa,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;YACtD,YAAY,CAAC,EAAE,CAAC,CAAC;SAClB;QACD,MAAA,gBAAgB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;IACpC,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,CAAC,QAA6B,EAAQ,EAAE;QACtD,IAAI,QAAQ,KAAK,SAAS,EAAE;YAC1B,OAAO;SACR;QAED,IAAI,QAAQ,CAAC,MAAM,GAAG,yBAAyB,EAAE;YAC/C,oBAAoB,CAAC,IAAI,CAAC,CAAC;SAC5B;aAAM;YACL,oBAAoB,CAAC,KAAK,CAAC,CAAC;SAC7B;QACD,YAAY,CAAC,QAAQ,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC;IAC/E,MAAM,YAAY,GAAG,aAAa,aAAb,aAAa,cAAb,aAAa,GAAI,kBAAkB,CAAC;IAEzD,MAAM,qBAAqB,GAAG,OAAO,CACnC,GAAG,EAAE,CAAC,WAAW,CAAC,eAAe,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,wBAAwB,CAAC,EACpE,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,wBAAwB,CAAC,CACnC,CAAC;IAEF,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEtE,MAAM,OAAO,GAAG,CAAC,CAAC,SAAS,CAAC;IAC5B,MAAM,aAAa,GAAG,OAAO,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC;IAEhD,MAAM,mBAAmB,GAAG,OAAO,CACjC,GAAG,EAAE,CACH,WAAW,CACT,aAAa,EACb;QACE,KAAK,EAAE,CAAC,CAAC,YAAY,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY;KACrG,EACD,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,eAAe,CACxB,EACH,CAAC,YAAY,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,eAAe,CAAC,CAC9D,CAAC;IAEF,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,OAAgB,EAAE,EAAE,CACnB,YAAY,CAAC,CAAC,CAAC,CACb,YAAY,CAAC,OAAO,CAAC,CACtB,CAAC,CAAC,CAAC,CACF,oBAAC,IAAI,IAAC,QAAQ,EAAE,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,aAAa,EAAE,SAAS,EAAE,mBAAmB,GAAI,CAChH,EACH,CAAC,mBAAmB,EAAE,YAAY,EAAE,SAAS,CAAC,CAC/C,CAAC;IAEF,oEAAoE;IACpE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,CAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAA,EAAE;YAChE,0BAA0B,CAAC,SAAS,CAAC,CAAC;SACvC;IACH,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAExB,MAAM,kBAAkB,GAAG,OAAO,CAAC,GAAG,EAAE;;QACtC,OAAO;YACL,uBAAuB,EAAE,uBAAuB;YAChD,eAAe,EAAE,MAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,MAAM,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,UAAU,CAAC,KAAK,EAAE,GAAG,EAAE,0CAAE,KAAK;SAC1F,CAAC;IACJ,CAAC,EAAE,CAAC,iBAAiB,EAAE,uBAAuB,CAAC,CAAC,CAAC;IAEjD,+CAA+C;IAC/C,MAAM,mBAAmB,GAAG,WAAW,CAAC,GAAG,EAAE;;QAC3C,IAAI,CAAC,CAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAA,EAAE;YAChE,OAAO,IAAI,CAAC;SACb;QACD,OAAO,KAAK,CAAC,mBAAmB,CAAC,CAAC,CAAC,CACjC,KAAK,CAAC,mBAAmB,EAAE,CAC5B,CAAC,CAAC,CAAC,CACF,oBAAC,KAAK,IAAC,SAAS,EAAE,qBAAqB;YACrC,oBAAC,gBAAgB,IACf,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,KAAK,CAAC,kBAAkB,EAC5C,OAAO,EAAE;oBACP,UAAU,EAAE,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,UAAU,mCAAI,aAAa,CAAC,UAAU;oBACjE,SAAS,EAAE,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,SAAS,mCAAI,aAAa,CAAC,SAAS;oBAC9D,eAAe,EAAE,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,eAAe,mCAAI,aAAa,CAAC,eAAe;iBACjF,GACD,CACI,CACT,CAAC;IACJ,CAAC,EAAE,CAAC,iBAAiB,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC;IAE9C,OAAO,CACL,oBAAC,KAAK,IACJ,SAAS,EAAE,WAAW,CACpB,oBAAoB,EACpB,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,qDAAqD;SAC9E;QAED,oBAAC,aAAa,oBAAK,kBAAkB,EAAI;QACzC,oBAAC,KAAK,IACJ,SAAS,EAAE,WAAW,CACpB,uBAAuB,CAAC;gBACtB,KAAK;gBACL,eAAe,EAAE,CAAC,CAAC,YAAY;gBAC/B,QAAQ,EAAE,CAAC,CAAC,QAAQ;aACrB,CAAC,CACH;YAED,oBAAC,iBAAiB,IAChB,SAAS,EAAE,SAAS,gBACR,GAAG,CAAC,gBAAgB,EAChC,cAAc,EAAE,IAAI,EACpB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,EACxF,YAAY,EAAE,gBAAgB,EAC9B,EAAE,EAAC,SAAS,EACZ,eAAe,EAAE,OAAO,CAAC,eAAe,EACxC,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,EAC5C,SAAS,EAAE,CAAC,EAAE,EAAE,EAAE;oBAChB,MAAM,oBAAoB,GAAG,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,EAAE,CAAC,QAAQ,KAAK,KAAK,IAAI,CAAC,cAAc,CAAC,CAAC;oBAC9F,IAAI,CAAC,oBAAoB,EAAE;wBACzB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,EAAI,CAAC;qBACd;gBACH,CAAC,EACD,cAAc,EAAE,GAAG,EAAE;oBACnB,kBAAkB,EAAE,CAAC;gBACvB,CAAC,EACD,MAAM,EAAE,YAAY,EACpB,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,yBAAyB;gBACpC,0CAA0C;gBAC1C,oBAAoB,EAAE,oBAAoB;gBAE1C,oBAAC,cAAc,IACb,YAAY,EAAE,gBAAgB,EAC9B,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;wBACb,IAAI,CAAC,iBAAiB,EAAE;4BACtB,kBAAkB,EAAE,CAAC;yBACtB;wBACD,CAAC,CAAC,eAAe,EAAE,CAAC;oBACtB,CAAC,EACD,EAAE,EAAE,iBAAiB,EACrB,SAAS,EAAE,qBAAqB,EAChC,SAAS,EAAE,aAAa,CAAC,mBAAmB,EAC5C,cAAc,EAAE,aAAa,CAAC,mBAAmB,GACjD,CACgB;YAElB,+CAA+C;YAC/C,mBAAmB,EAAE,CAEjB,CACF,CACT,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,wBAAwB,GAAG,CAAC,KAAmB,EAAW,EAAE;IAChE,MAAM,iBAAiB,GAAG,2BAA2B,CAAC,KAAK,CAAC,CAAC;IAC7D,OAAO,CAAC,CAAC,CACP,CAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,MAAM;QACzB,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,CAC9G,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,OAAO,GAAG,CAAC,KAAmB,EAAW,EAAE;IAC/C,MAAM,iBAAiB,GAAG,2BAA2B,CAAC,KAAK,CAAC,CAAC;IAC7D,OAAO,CAAC,CAAC,CAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA,CAAC;IACxD,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,OAAe,EAAU,EAAE;IAC/C,IAAI,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;QACrC,OAAO,EAAE,CAAC;KACX;SAAM;QACL,OAAO,OAAO,CAAC;KAChB;AACH,CAAC,CAAC;AAEF,MAAM,2BAA2B,GAAG,CAAC,KAAmB,EAAkC,EAAE;IAC1F,+CAA+C;IAC/C,OAAO,KAAK,CAAC,iBAAiB,CAAC;IAC/B,OAAO,EAAE,CAAC;AACZ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useState, useMemo, useCallback } from 'react';\nimport { IStyle, ITextField, mergeStyles, concatStyleSets, Icon, Stack } from '@fluentui/react';\nimport { sendButtonStyle, sendIconStyle, sendBoxWrapperStyles, borderAndBoxShadowStyle } from './styles/SendBox.styles';\nimport { BaseCustomStyles } from '../types';\nimport { useTheme } from '../theming';\nimport { useLocale } from '../localization';\nimport { useIdentifiers } from '../identifiers';\nimport { InputBoxButton, InputBoxComponent } from './InputBoxComponent';\nimport { SendBoxErrors } from './SendBoxErrors';\n/* @conditional-compile-remove(file-sharing) */\nimport { _FileUploadCards } from './FileUploadCards';\n/* @conditional-compile-remove(file-sharing) */\nimport { fileUploadCardsStyles } from './styles/SendBox.styles';\nimport { SendBoxErrorBarError } from './SendBoxErrorBar';\n/* @conditional-compile-remove(mention) */\nimport { MentionLookupOptions } from './MentionPopover';\n\nconst EMPTY_MESSAGE_REGEX = /^\\s*$/;\nconst MAXIMUM_LENGTH_OF_MESSAGE = 8000;\n\n/**\n * Fluent styles for {@link Sendbox}.\n *\n * @public\n */\nexport interface SendBoxStylesProps extends BaseCustomStyles {\n  /** Styles for the text field. */\n  textField?: IStyle;\n  /** styles for the text field container */\n  textFieldContainer?: IStyle;\n  /** Styles for the container of the send message icon. */\n  sendMessageIconContainer?: IStyle;\n  /** Styles for the send message icon; These styles will be ignored when a custom send message icon is provided. */\n  sendMessageIcon?: IStyle;\n  /** Styles for the system message; These styles will be ignored when a custom system message component is provided. */\n  systemMessage?: IStyle;\n}\n\n/**\n * Attributes required for SendBox to show file uploads like name, progress etc.\n * @beta\n */\nexport interface ActiveFileUpload {\n  /**\n   * Unique identifier for the file upload.\n   */\n  id: string;\n\n  /**\n   * File name to be rendered for uploaded file.\n   */\n  filename: string;\n\n  /**\n   * A number between 0 and 1 indicating the progress of the upload.\n   * This is unrelated to the `uploadComplete` property.\n   * It is only used to show the progress of the upload.\n   * Progress of 1 doesn't mark the upload as complete, set the `uploadComplete`\n   * property to true to mark the upload as complete.\n   */\n  progress: number;\n\n  /**\n   * Error to be displayed to the user if the upload fails.\n   */\n  error?: SendBoxErrorBarError;\n\n  /**\n   * `true` means that the upload is completed.\n   * This is independent of the upload `progress`.\n   */\n  uploadComplete?: boolean;\n}\n\n/**\n * Strings of {@link SendBox} that can be overridden.\n *\n * @public\n */\nexport interface SendBoxStrings {\n  /**\n   * Placeholder text in SendBox when there is no user input\n   */\n  placeholderText: string;\n  /**\n   * The warning message when send box text length is more than max limit\n   */\n  textTooLong: string;\n  /**\n   * Aria label for send message button\n   */\n  sendButtonAriaLabel: string;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Error message indicating that all file uploads are not complete.\n   */\n  fileUploadsPendingError: string;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Aria label to notify user when focus is on cancel file upload button.\n   */\n  removeFile: string;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Aria label to notify user file uploading starts.\n   */\n  uploading: string;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Aria label to notify user file is uploaded.\n   */\n  uploadCompleted: string;\n}\n\n/**\n * Props for {@link SendBox}.\n *\n * @public\n */\nexport interface SendBoxProps {\n  /**\n   * Optional boolean to disable text box\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Optional text for system message below text box\n   */\n  systemMessage?: string;\n  /**\n   * Optional callback called when message is sent\n   */\n  onSendMessage?: (content: string) => Promise<void>;\n  /* @conditional-compile-remove(mention) */\n  /**\n   * Optional props needed to lookup suggestions in the mention scenario.\n   * @beta\n   */\n  mentionLookupOptions?: MentionLookupOptions;\n\n  /**\n   * Optional callback called when user is typing\n   */\n  onTyping?: () => Promise<void>;\n  /**\n   * Optional callback to render system message below the SendBox.\n   * @defaultValue MessageBar\n   */\n  onRenderSystemMessage?: (systemMessage: string | undefined) => React.ReactElement;\n  /**\n   * Optional boolean to support new line in SendBox.\n   * @defaultValue false\n   */\n  supportNewline?: boolean;\n  /**\n   * Optional callback to render send button icon to the right of the SendBox.\n   * @defaultValue SendBoxSendHovered icon when mouse over icon and SendBoxSend icon otherwise\n   */\n  onRenderIcon?: (isHover: boolean) => JSX.Element;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <SendBox styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: SendBoxStylesProps;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<SendBoxStrings>;\n  /**\n   * enumerable to determine if the input box has focus on render or not.\n   * When undefined nothing has focus on render\n   */\n  autoFocus?: 'sendBoxTextField';\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional callback to render uploaded files in the SendBox. The sendBox will expand\n   * vertically to accommodate the uploaded files. File uploads will\n   * be rendered below the text area in sendBox.\n   * @beta\n   */\n  onRenderFileUploads?: () => JSX.Element;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional array of active file uploads where each object has attributes\n   * of a file upload like name, progress, errorMessage etc.\n   * @beta\n   */\n  activeFileUploads?: ActiveFileUpload[];\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional callback to remove the file upload before sending by clicking on\n   * cancel icon.\n   * @beta\n   */\n  onCancelFileUpload?: (fileId: string) => void;\n}\n\n/**\n * Component for typing and sending messages.\n *\n * Supports sending typing notification when user starts entering text.\n * Supports an optional message below the text input field.\n *\n * @public\n */\nexport const SendBox = (props: SendBoxProps): JSX.Element => {\n  const {\n    disabled,\n    systemMessage,\n    supportNewline,\n    onSendMessage,\n    onTyping,\n    onRenderIcon,\n    onRenderSystemMessage,\n    styles,\n    autoFocus,\n    /* @conditional-compile-remove(mention) */\n    mentionLookupOptions\n  } = props;\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.sendBox;\n  const strings = { ...localeStrings, ...props.strings };\n  const ids = useIdentifiers();\n  const activeFileUploads = activeFileUploadsTrampoline(props);\n\n  const [textValue, setTextValue] = useState('');\n  const [textValueOverflow, setTextValueOverflow] = useState(false);\n\n  const sendTextFieldRef = React.useRef<ITextField>(null);\n\n  const [fileUploadsPendingError, setFileUploadsPendingError] = useState<SendBoxErrorBarError | undefined>(undefined);\n\n  const sendMessageOnClick = (): void => {\n    // don't send a message when disabled\n    if (disabled || textValueOverflow) {\n      return;\n    }\n\n    // Don't send message until all files have been uploaded successfully\n    setFileUploadsPendingError(undefined);\n\n    if (hasIncompleteFileUploads(props)) {\n      /* @conditional-compile-remove(file-sharing) */\n      setFileUploadsPendingError({ message: strings.fileUploadsPendingError, timestamp: Date.now() });\n      return;\n    }\n\n    const message = textValue;\n    // we don't want to send empty messages including spaces, newlines, tabs\n    // Message can be empty if there is a valid file upload\n    if (!EMPTY_MESSAGE_REGEX.test(message) || hasFile(props)) {\n      onSendMessage && onSendMessage(sanitizeText(message));\n      setTextValue('');\n    }\n    sendTextFieldRef.current?.focus();\n  };\n\n  const setText = (newValue?: string | undefined): void => {\n    if (newValue === undefined) {\n      return;\n    }\n\n    if (newValue.length > MAXIMUM_LENGTH_OF_MESSAGE) {\n      setTextValueOverflow(true);\n    } else {\n      setTextValueOverflow(false);\n    }\n    setTextValue(newValue);\n  };\n\n  const textTooLongMessage = textValueOverflow ? strings.textTooLong : undefined;\n  const errorMessage = systemMessage ?? textTooLongMessage;\n\n  const mergedSendButtonStyle = useMemo(\n    () => mergeStyles(sendButtonStyle, styles?.sendMessageIconContainer),\n    [styles?.sendMessageIconContainer]\n  );\n\n  const mergedStyles = useMemo(() => concatStyleSets(styles), [styles]);\n\n  const hasText = !!textValue;\n  const hasTextOrFile = hasText || hasFile(props);\n\n  const mergedSendIconStyle = useMemo(\n    () =>\n      mergeStyles(\n        sendIconStyle,\n        {\n          color: !!errorMessage || !hasTextOrFile ? theme.palette.neutralTertiary : theme.palette.themePrimary\n        },\n        styles?.sendMessageIcon\n      ),\n    [errorMessage, hasTextOrFile, theme, styles?.sendMessageIcon]\n  );\n\n  const onRenderSendIcon = useCallback(\n    (isHover: boolean) =>\n      onRenderIcon ? (\n        onRenderIcon(isHover)\n      ) : (\n        <Icon iconName={isHover && textValue ? 'SendBoxSendHovered' : 'SendBoxSend'} className={mergedSendIconStyle} />\n      ),\n    [mergedSendIconStyle, onRenderIcon, textValue]\n  );\n\n  // Ensure that errors are cleared when there are no files in sendBox\n  React.useEffect(() => {\n    if (!activeFileUploads?.filter((upload) => !upload.error).length) {\n      setFileUploadsPendingError(undefined);\n    }\n  }, [activeFileUploads]);\n\n  const sendBoxErrorsProps = useMemo(() => {\n    return {\n      fileUploadsPendingError: fileUploadsPendingError,\n      fileUploadError: activeFileUploads?.filter((fileUpload) => fileUpload.error).pop()?.error\n    };\n  }, [activeFileUploads, fileUploadsPendingError]);\n\n  /* @conditional-compile-remove(file-sharing) */\n  const onRenderFileUploads = useCallback(() => {\n    if (!activeFileUploads?.filter((upload) => !upload.error).length) {\n      return null;\n    }\n    return props.onRenderFileUploads ? (\n      props.onRenderFileUploads()\n    ) : (\n      <Stack className={fileUploadCardsStyles}>\n        <_FileUploadCards\n          activeFileUploads={activeFileUploads}\n          onCancelFileUpload={props.onCancelFileUpload}\n          strings={{\n            removeFile: props.strings?.removeFile ?? localeStrings.removeFile,\n            uploading: props.strings?.uploading ?? localeStrings.uploading,\n            uploadCompleted: props.strings?.uploadCompleted ?? localeStrings.uploadCompleted\n          }}\n        />\n      </Stack>\n    );\n  }, [activeFileUploads, props, localeStrings]);\n\n  return (\n    <Stack\n      className={mergeStyles(\n        sendBoxWrapperStyles,\n        { overflow: 'visible' } // This is needed for the mention popup to be visible\n      )}\n    >\n      <SendBoxErrors {...sendBoxErrorsProps} />\n      <Stack\n        className={mergeStyles(\n          borderAndBoxShadowStyle({\n            theme,\n            hasErrorMessage: !!errorMessage,\n            disabled: !!disabled\n          })\n        )}\n      >\n        <InputBoxComponent\n          autoFocus={autoFocus}\n          data-ui-id={ids.sendboxTextField}\n          inlineChildren={true}\n          disabled={disabled}\n          errorMessage={onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage}\n          textFieldRef={sendTextFieldRef}\n          id=\"sendbox\"\n          placeholderText={strings.placeholderText}\n          textValue={textValue}\n          onChange={(_, newValue) => setText(newValue)}\n          onKeyDown={(ev) => {\n            const keyWasSendingMessage = ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline);\n            if (!keyWasSendingMessage) {\n              onTyping?.();\n            }\n          }}\n          onEnterKeyDown={() => {\n            sendMessageOnClick();\n          }}\n          styles={mergedStyles}\n          supportNewline={supportNewline}\n          maxLength={MAXIMUM_LENGTH_OF_MESSAGE}\n          /* @conditional-compile-remove(mention) */\n          mentionLookupOptions={mentionLookupOptions}\n        >\n          <InputBoxButton\n            onRenderIcon={onRenderSendIcon}\n            onClick={(e) => {\n              if (!textValueOverflow) {\n                sendMessageOnClick();\n              }\n              e.stopPropagation();\n            }}\n            id={'sendIconWrapper'}\n            className={mergedSendButtonStyle}\n            ariaLabel={localeStrings.sendButtonAriaLabel}\n            tooltipContent={localeStrings.sendButtonAriaLabel}\n          />\n        </InputBoxComponent>\n        {\n          /* @conditional-compile-remove(file-sharing) */\n          onRenderFileUploads()\n        }\n      </Stack>\n    </Stack>\n  );\n};\n\n/**\n * @private\n */\nconst hasIncompleteFileUploads = (props: SendBoxProps): boolean => {\n  const activeFileUploads = activeFileUploadsTrampoline(props);\n  return !!(\n    activeFileUploads?.length &&\n    !activeFileUploads.filter((fileUpload) => !fileUpload.error).every((fileUpload) => fileUpload.uploadComplete)\n  );\n};\n\nconst hasFile = (props: SendBoxProps): boolean => {\n  const activeFileUploads = activeFileUploadsTrampoline(props);\n  return !!activeFileUploads?.find((file) => !file.error);\n  return false;\n};\n\nconst sanitizeText = (message: string): string => {\n  if (EMPTY_MESSAGE_REGEX.test(message)) {\n    return '';\n  } else {\n    return message;\n  }\n};\n\nconst activeFileUploadsTrampoline = (props: SendBoxProps): ActiveFileUpload[] | undefined => {\n  /* @conditional-compile-remove(file-sharing) */\n  return props.activeFileUploads;\n  return [];\n};\n"]}
+{"version":3,"file":"SendBox.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/SendBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useState, useMemo, useCallback } from 'react';\nimport { IStyle, ITextField, mergeStyles, concatStyleSets, Icon, Stack } from '@fluentui/react';\nimport { sendButtonStyle, sendIconStyle, sendBoxWrapperStyles, borderAndBoxShadowStyle } from './styles/SendBox.styles';\nimport { BaseCustomStyles } from '../types';\nimport { useTheme } from '../theming';\nimport { useLocale } from '../localization';\nimport { useIdentifiers } from '../identifiers';\nimport { InputBoxButton, InputBoxComponent } from './InputBoxComponent';\nimport { SendBoxErrors } from './SendBoxErrors';\n/* @conditional-compile-remove(file-sharing) */\nimport { _FileUploadCards } from './FileUploadCards';\n/* @conditional-compile-remove(file-sharing) */\nimport { fileUploadCardsStyles } from './styles/SendBox.styles';\nimport { SendBoxErrorBarError } from './SendBoxErrorBar';\n/* @conditional-compile-remove(mention) */\nimport { MentionLookupOptions } from './MentionPopover';\n\nconst EMPTY_MESSAGE_REGEX = /^\\s*$/;\nconst MAXIMUM_LENGTH_OF_MESSAGE = 8000;\n\n/**\n * Fluent styles for {@link Sendbox}.\n *\n * @public\n */\nexport interface SendBoxStylesProps extends BaseCustomStyles {\n  /** Styles for the text field. */\n  textField?: IStyle;\n  /** styles for the text field container */\n  textFieldContainer?: IStyle;\n  /** Styles for the container of the send message icon. */\n  sendMessageIconContainer?: IStyle;\n  /** Styles for the send message icon; These styles will be ignored when a custom send message icon is provided. */\n  sendMessageIcon?: IStyle;\n  /** Styles for the system message; These styles will be ignored when a custom system message component is provided. */\n  systemMessage?: IStyle;\n}\n\n/**\n * Attributes required for SendBox to show file uploads like name, progress etc.\n * @beta\n */\nexport interface ActiveFileUpload {\n  /**\n   * Unique identifier for the file upload.\n   */\n  id: string;\n\n  /**\n   * File name to be rendered for uploaded file.\n   */\n  filename: string;\n\n  /**\n   * A number between 0 and 1 indicating the progress of the upload.\n   * This is unrelated to the `uploadComplete` property.\n   * It is only used to show the progress of the upload.\n   * Progress of 1 doesn't mark the upload as complete, set the `uploadComplete`\n   * property to true to mark the upload as complete.\n   */\n  progress: number;\n\n  /**\n   * Error to be displayed to the user if the upload fails.\n   */\n  error?: SendBoxErrorBarError;\n\n  /**\n   * `true` means that the upload is completed.\n   * This is independent of the upload `progress`.\n   */\n  uploadComplete?: boolean;\n}\n\n/**\n * Strings of {@link SendBox} that can be overridden.\n *\n * @public\n */\nexport interface SendBoxStrings {\n  /**\n   * Placeholder text in SendBox when there is no user input\n   */\n  placeholderText: string;\n  /**\n   * The warning message when send box text length is more than max limit\n   */\n  textTooLong: string;\n  /**\n   * Aria label for send message button\n   */\n  sendButtonAriaLabel: string;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Error message indicating that all file uploads are not complete.\n   */\n  fileUploadsPendingError: string;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Aria label to notify user when focus is on cancel file upload button.\n   */\n  removeFile: string;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Aria label to notify user file uploading starts.\n   */\n  uploading: string;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Aria label to notify user file is uploaded.\n   */\n  uploadCompleted: string;\n}\n\n/**\n * Props for {@link SendBox}.\n *\n * @public\n */\nexport interface SendBoxProps {\n  /**\n   * Optional boolean to disable text box\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Optional text for system message below text box\n   */\n  systemMessage?: string;\n  /**\n   * Optional override behavior on send button click\n   */\n  onSendMessage?: (content: string) => Promise<void>;\n  /* @conditional-compile-remove(mention) */\n  /**\n   * Optional props needed to lookup suggestions in the mention scenario.\n   * @beta\n   */\n  mentionLookupOptions?: MentionLookupOptions;\n\n  /**\n   * Optional callback called when user is typing\n   */\n  onTyping?: () => Promise<void>;\n  /**\n   * Optional callback to render system message below the SendBox.\n   * @defaultValue MessageBar\n   */\n  onRenderSystemMessage?: (systemMessage: string | undefined) => React.ReactElement;\n  /**\n   * Optional boolean to support new line in SendBox.\n   * @defaultValue false\n   */\n  supportNewline?: boolean;\n  /**\n   * Optional callback to render send button icon to the right of the SendBox.\n   * @defaultValue SendBoxSendHovered icon when mouse over icon and SendBoxSend icon otherwise\n   */\n  onRenderIcon?: (isHover: boolean) => JSX.Element;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <SendBox styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: SendBoxStylesProps;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<SendBoxStrings>;\n  /**\n   * enumerable to determine if the input box has focus on render or not.\n   * When undefined nothing has focus on render\n   */\n  autoFocus?: 'sendBoxTextField';\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional callback to render uploaded files in the SendBox. The sendBox will expand\n   * vertically to accommodate the uploaded files. File uploads will\n   * be rendered below the text area in sendBox.\n   * @beta\n   */\n  onRenderFileUploads?: () => JSX.Element;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional array of active file uploads where each object has attributes\n   * of a file upload like name, progress, errorMessage etc.\n   * @beta\n   */\n  activeFileUploads?: ActiveFileUpload[];\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional callback to remove the file upload before sending by clicking on\n   * cancel icon.\n   * @beta\n   */\n  onCancelFileUpload?: (fileId: string) => void;\n}\n\n/**\n * Component for typing and sending messages.\n *\n * Supports sending typing notification when user starts entering text.\n * Supports an optional message below the text input field.\n *\n * @public\n */\nexport const SendBox = (props: SendBoxProps): JSX.Element => {\n  const {\n    disabled,\n    systemMessage,\n    supportNewline,\n    onSendMessage,\n    onTyping,\n    onRenderIcon,\n    onRenderSystemMessage,\n    styles,\n    autoFocus,\n    /* @conditional-compile-remove(mention) */\n    mentionLookupOptions\n  } = props;\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.sendBox;\n  const strings = { ...localeStrings, ...props.strings };\n  const ids = useIdentifiers();\n  const activeFileUploads = activeFileUploadsTrampoline(props);\n\n  const [textValue, setTextValue] = useState('');\n  const [textValueOverflow, setTextValueOverflow] = useState(false);\n\n  const sendTextFieldRef = React.useRef<ITextField>(null);\n\n  const [fileUploadsPendingError, setFileUploadsPendingError] = useState<SendBoxErrorBarError | undefined>(undefined);\n\n  const sendMessageOnClick = (): void => {\n    // don't send a message when disabled\n    if (disabled || textValueOverflow) {\n      return;\n    }\n\n    // Don't send message until all files have been uploaded successfully\n    setFileUploadsPendingError(undefined);\n\n    if (hasIncompleteFileUploads(props)) {\n      /* @conditional-compile-remove(file-sharing) */\n      setFileUploadsPendingError({ message: strings.fileUploadsPendingError, timestamp: Date.now() });\n      return;\n    }\n\n    const message = textValue;\n    // we don't want to send empty messages including spaces, newlines, tabs\n    // Message can be empty if there is a valid file upload\n    if (!EMPTY_MESSAGE_REGEX.test(message) || hasFile(props)) {\n      onSendMessage && onSendMessage(sanitizeText(message));\n      setTextValue('');\n    }\n    sendTextFieldRef.current?.focus();\n  };\n\n  const setText = (newValue?: string | undefined): void => {\n    if (newValue === undefined) {\n      return;\n    }\n\n    if (newValue.length > MAXIMUM_LENGTH_OF_MESSAGE) {\n      setTextValueOverflow(true);\n    } else {\n      setTextValueOverflow(false);\n    }\n    setTextValue(newValue);\n  };\n\n  const textTooLongMessage = textValueOverflow ? strings.textTooLong : undefined;\n  const errorMessage = systemMessage ?? textTooLongMessage;\n\n  const mergedSendButtonStyle = useMemo(\n    () => mergeStyles(sendButtonStyle, styles?.sendMessageIconContainer),\n    [styles?.sendMessageIconContainer]\n  );\n\n  const mergedStyles = useMemo(() => concatStyleSets(styles), [styles]);\n\n  const hasText = !!textValue;\n  const hasTextOrFile = hasText || hasFile(props);\n\n  const mergedSendIconStyle = useMemo(\n    () =>\n      mergeStyles(\n        sendIconStyle,\n        {\n          color: !!errorMessage || !hasTextOrFile ? theme.palette.neutralTertiary : theme.palette.themePrimary\n        },\n        styles?.sendMessageIcon\n      ),\n    [errorMessage, hasTextOrFile, theme, styles?.sendMessageIcon]\n  );\n\n  const onRenderSendIcon = useCallback(\n    (isHover: boolean) =>\n      onRenderIcon ? (\n        onRenderIcon(isHover)\n      ) : (\n        <Icon iconName={isHover && textValue ? 'SendBoxSendHovered' : 'SendBoxSend'} className={mergedSendIconStyle} />\n      ),\n    [mergedSendIconStyle, onRenderIcon, textValue]\n  );\n\n  // Ensure that errors are cleared when there are no files in sendBox\n  React.useEffect(() => {\n    if (!activeFileUploads?.filter((upload) => !upload.error).length) {\n      setFileUploadsPendingError(undefined);\n    }\n  }, [activeFileUploads]);\n\n  const sendBoxErrorsProps = useMemo(() => {\n    return {\n      fileUploadsPendingError: fileUploadsPendingError,\n      fileUploadError: activeFileUploads?.filter((fileUpload) => fileUpload.error).pop()?.error\n    };\n  }, [activeFileUploads, fileUploadsPendingError]);\n\n  /* @conditional-compile-remove(file-sharing) */\n  const onRenderFileUploads = useCallback(() => {\n    if (!activeFileUploads?.filter((upload) => !upload.error).length) {\n      return null;\n    }\n    return props.onRenderFileUploads ? (\n      props.onRenderFileUploads()\n    ) : (\n      <Stack className={fileUploadCardsStyles}>\n        <_FileUploadCards\n          activeFileUploads={activeFileUploads}\n          onCancelFileUpload={props.onCancelFileUpload}\n          strings={{\n            removeFile: props.strings?.removeFile ?? localeStrings.removeFile,\n            uploading: props.strings?.uploading ?? localeStrings.uploading,\n            uploadCompleted: props.strings?.uploadCompleted ?? localeStrings.uploadCompleted\n          }}\n        />\n      </Stack>\n    );\n  }, [activeFileUploads, props, localeStrings]);\n\n  return (\n    <Stack\n      className={mergeStyles(\n        sendBoxWrapperStyles,\n        { overflow: 'visible' } // This is needed for the mention popup to be visible\n      )}\n    >\n      <SendBoxErrors {...sendBoxErrorsProps} />\n      <Stack\n        className={mergeStyles(\n          borderAndBoxShadowStyle({\n            theme,\n            hasErrorMessage: !!errorMessage,\n            disabled: !!disabled\n          })\n        )}\n      >\n        <InputBoxComponent\n          autoFocus={autoFocus}\n          data-ui-id={ids.sendboxTextField}\n          inlineChildren={true}\n          disabled={disabled}\n          errorMessage={onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage}\n          textFieldRef={sendTextFieldRef}\n          id=\"sendbox\"\n          placeholderText={strings.placeholderText}\n          textValue={textValue}\n          onChange={(_, newValue) => setText(newValue)}\n          onKeyDown={(ev) => {\n            const keyWasSendingMessage = ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline);\n            if (!keyWasSendingMessage) {\n              onTyping?.();\n            }\n          }}\n          onEnterKeyDown={() => {\n            sendMessageOnClick();\n          }}\n          styles={mergedStyles}\n          supportNewline={supportNewline}\n          maxLength={MAXIMUM_LENGTH_OF_MESSAGE}\n          /* @conditional-compile-remove(mention) */\n          mentionLookupOptions={mentionLookupOptions}\n        >\n          <InputBoxButton\n            onRenderIcon={onRenderSendIcon}\n            onClick={(e) => {\n              if (!textValueOverflow) {\n                sendMessageOnClick();\n              }\n              e.stopPropagation();\n            }}\n            id={'sendIconWrapper'}\n            className={mergedSendButtonStyle}\n            ariaLabel={localeStrings.sendButtonAriaLabel}\n            tooltipContent={localeStrings.sendButtonAriaLabel}\n          />\n        </InputBoxComponent>\n        {\n          /* @conditional-compile-remove(file-sharing) */\n          onRenderFileUploads()\n        }\n      </Stack>\n    </Stack>\n  );\n};\n\n/**\n * @private\n */\nconst hasIncompleteFileUploads = (props: SendBoxProps): boolean => {\n  const activeFileUploads = activeFileUploadsTrampoline(props);\n  return !!(\n    activeFileUploads?.length &&\n    !activeFileUploads.filter((fileUpload) => !fileUpload.error).every((fileUpload) => fileUpload.uploadComplete)\n  );\n};\n\nconst hasFile = (props: SendBoxProps): boolean => {\n  const activeFileUploads = activeFileUploadsTrampoline(props);\n  return !!activeFileUploads?.find((file) => !file.error);\n  return false;\n};\n\nconst sanitizeText = (message: string): string => {\n  if (EMPTY_MESSAGE_REGEX.test(message)) {\n    return '';\n  } else {\n    return message;\n  }\n};\n\nconst activeFileUploadsTrampoline = (props: SendBoxProps): ActiveFileUpload[] | undefined => {\n  /* @conditional-compile-remove(file-sharing) */\n  return props.activeFileUploads;\n  return [];\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.js

@@ -102,7 +102,8 @@ export const FloatingLocalVideoLayout = (props) => {
     showCameraSwitcherInLocalPreview ? (React.createElement(Stack, { className: mergeStyles(localVideoTileWithControlsContainerStyle(theme, localVideoSizeRem), {
             boxShadow: theme.effects.elevation8,
             zIndex: LOCAL_VIDEO_TILE_ZINDEX
-        }) }, localVideoComponent)) : overflowGalleryTiles.length > 0 || screenShareComponent ? (React.createElement(Stack, { className: mergeStyles(localVideoTileContainerStyle(theme, localVideoSizeRem, !!screenShareComponent)) }, localVideoComponent)) : (React.createElement(FloatingLocalVideo, { localVideoComponent: localVideoComponent, layerHostId: layerHostId, localVideoSizeRem: localVideoSizeRem, parentWidth: parentWidth, parentHeight: parentHeight }))) : undefined;
+        }) }, localVideoComponent)) : overflowGalleryTiles.length > 0 || screenShareComponent ? (React.createElement(Stack, { className: mergeStyles(localVideoTileContainerStyle(theme, localVideoSizeRem, !!screenShareComponent, 
+        /* @conditional-compile-remove(gallery-layouts) */ overflowGalleryPosition)) }, localVideoComponent)) : (React.createElement(FloatingLocalVideo, { localVideoComponent: localVideoComponent, layerHostId: layerHostId, localVideoSizeRem: localVideoSizeRem, parentWidth: parentWidth, parentHeight: parentHeight }))) : undefined;
     const overflowGallery = useMemo(() => {
         if (overflowGalleryTiles.length === 0 && !screenShareComponent) {
             return null;
@@ -136,7 +137,14 @@ export const FloatingLocalVideoLayout = (props) => {
         , { 
             /* @conditional-compile-remove(vertical-gallery) */
             horizontal: overflowGalleryPosition === 'VerticalRight', styles: innerLayoutStyle, tokens: videoGalleryLayoutGap },
+            /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition === 'HorizontalTop' ? (overflowGallery) : (React.createElement(React.Fragment, null)),
             screenShareComponent ? (screenShareComponent) : (React.createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
-            overflowGallery)));
+            overflowGalleryTrampoline(overflowGallery, 
+            /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition))));
+};
+const overflowGalleryTrampoline = (gallery, galleryPosition) => {
+    /* @conditional-compile-remove(gallery-layouts) */
+    return galleryPosition !== 'HorizontalTop' ? gallery : React.createElement(React.Fragment, null);
+    return gallery;
 };
 //# sourceMappingURL=FloatingLocalVideoLayout.js.map

package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingLocalVideoLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/FloatingLocalVideoLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { LayerHost, mergeStyles, Stack } from '@fluentui/react';\nimport { useId } from '@fluentui/react-hooks';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { useTheme } from '../../theming';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { isShortHeight } from '../utils/responsive';\nimport { FloatingLocalVideo } from './FloatingLocalVideo';\nimport { LayoutProps } from './Layout';\nimport {\n  LARGE_FLOATING_MODAL_SIZE_REM,\n  localVideoTileContainerStyle,\n  localVideoTileWithControlsContainerStyle,\n  LOCAL_VIDEO_TILE_ZINDEX,\n  SMALL_FLOATING_MODAL_SIZE_REM\n} from './styles/FloatingLocalVideo.styles';\n/* @conditional-compile-remove(vertical-gallery) */\nimport {\n  SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM,\n  VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM\n} from './styles/FloatingLocalVideo.styles';\nimport { innerLayoutStyle, layerHostStyle, rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { OverflowGallery } from './OverflowGallery';\n/* @conditional-compile-remove(click-to-call) */\nimport { LocalVideoTileSize } from '../VideoGallery';\n\n/**\n * Props for {@link FloatingLocalVideoLayout}.\n *\n * @private\n */\nexport interface FloatingLocalVideoLayoutProps extends LayoutProps {\n  /**\n   * Whether to display the local video camera switcher button\n   */\n  showCameraSwitcherInLocalPreview?: boolean;\n  /**\n   * Height of parent element\n   */\n  parentHeight?: number;\n  /* @conditional-compile-remove(click-to-call) */\n  /**\n   * Local video tile mode\n   */\n  localVideoTileSize?: LocalVideoTileSize;\n}\n\n/**\n * FloatingLocalVideoLayout displays remote participants and a screen sharing component in\n * a grid and overflow gallery while floating the local video\n *\n * @private\n */\nexport const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps): JSX.Element => {\n  const {\n    remoteParticipants = [],\n    dominantSpeakers,\n    localVideoComponent,\n    screenShareComponent,\n    onRenderRemoteParticipant,\n    styles,\n    maxRemoteVideoStreams,\n    showCameraSwitcherInLocalPreview,\n    parentWidth,\n    parentHeight,\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'HorizontalBottom',\n    pinnedParticipantUserIds = [],\n    /* @conditional-compile-remove(click-to-call) */ localVideoTileSize\n  } = props;\n\n  const theme = useTheme();\n\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n  /* @conditional-compile-remove(vertical-gallery) */\n  const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n  // This is for tracking the number of children in the first page of overflow gallery.\n  // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.\n  const childrenPerPage = useRef(4);\n  const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({\n    remoteParticipants,\n    dominantSpeakers,\n    maxRemoteVideoStreams,\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent\n      ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)\n      : childrenPerPage.current,\n    /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds\n  });\n\n  let activeVideoStreams = 0;\n\n  const gridTiles = gridParticipants.map((p) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  const shouldFloatLocalVideo = remoteParticipants.length > 0;\n\n  if (!shouldFloatLocalVideo && localVideoComponent) {\n    gridTiles.push(localVideoComponent);\n  }\n\n  /**\n   * instantiate indexes available to render with indexes available that would be on first page\n   *\n   * For some components which do not strictly follow the order of the array, we might\n   * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of\n   * this case when those components are here\n   */\n  const [indexesToRender, setIndexesToRender] = useState<number[]>([]);\n\n  const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable &&\n            indexesToRender &&\n            indexesToRender.includes(i) &&\n            activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  const layerHostId = useId('layerhost');\n\n  const localVideoSizeRem = useMemo(() => {\n    if (isNarrow || /*@conditional-compile-remove(click-to-call) */ localVideoTileSize === '9:16') {\n      return SMALL_FLOATING_MODAL_SIZE_REM;\n    }\n    /* @conditional-compile-remove(vertical-gallery) */\n    if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'VerticalRight') {\n      return isNarrow\n        ? SMALL_FLOATING_MODAL_SIZE_REM\n        : isShort\n        ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM\n        : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM;\n    }\n    /*@conditional-compile-remove(click-to-call) */\n    if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'HorizontalBottom') {\n      return localVideoTileSize === '16:9' || !isNarrow ? LARGE_FLOATING_MODAL_SIZE_REM : SMALL_FLOATING_MODAL_SIZE_REM;\n    }\n    return LARGE_FLOATING_MODAL_SIZE_REM;\n  }, [\n    overflowGalleryTiles.length,\n    isNarrow,\n    screenShareComponent,\n    /* @conditional-compile-remove(vertical-gallery) */ isShort,\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,\n    /* @conditional-compile-remove(click-to-call) */ localVideoTileSize\n  ]);\n\n  const wrappedLocalVideoComponent =\n    (localVideoComponent && shouldFloatLocalVideo) || (screenShareComponent && localVideoComponent) ? (\n      // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.\n      showCameraSwitcherInLocalPreview ? (\n        <Stack\n          className={mergeStyles(localVideoTileWithControlsContainerStyle(theme, localVideoSizeRem), {\n            boxShadow: theme.effects.elevation8,\n            zIndex: LOCAL_VIDEO_TILE_ZINDEX\n          })}\n        >\n          {localVideoComponent}\n        </Stack>\n      ) : overflowGalleryTiles.length > 0 || screenShareComponent ? (\n        <Stack className={mergeStyles(localVideoTileContainerStyle(theme, localVideoSizeRem, !!screenShareComponent))}>\n          {localVideoComponent}\n        </Stack>\n      ) : (\n        <FloatingLocalVideo\n          localVideoComponent={localVideoComponent}\n          layerHostId={layerHostId}\n          localVideoSizeRem={localVideoSizeRem}\n          parentWidth={parentWidth}\n          parentHeight={parentHeight}\n        />\n      )\n    ) : undefined;\n\n  const overflowGallery = useMemo(() => {\n    if (overflowGalleryTiles.length === 0 && !screenShareComponent) {\n      return null;\n    }\n    return (\n      <OverflowGallery\n        /* @conditional-compile-remove(vertical-gallery) */\n        isShort={isShort}\n        onFetchTilesToRender={setIndexesToRender}\n        isNarrow={isNarrow}\n        shouldFloatLocalVideo={true}\n        overflowGalleryElements={overflowGalleryTiles}\n        horizontalGalleryStyles={styles?.horizontalGallery}\n        /* @conditional-compile-remove(vertical-gallery) */\n        verticalGalleryStyles={styles?.verticalGallery}\n        /* @conditional-compile-remove(vertical-gallery) */\n        overflowGalleryPosition={overflowGalleryPosition}\n        onChildrenPerPageChange={(n: number) => {\n          childrenPerPage.current = n;\n        }}\n      />\n    );\n  }, [\n    isNarrow,\n    /* @conditional-compile-remove(vertical-gallery) */ isShort,\n    screenShareComponent,\n    overflowGalleryTiles,\n    styles?.horizontalGallery,\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,\n    setIndexesToRender,\n    /* @conditional-compile-remove(vertical-gallery) */ styles?.verticalGallery\n  ]);\n\n  return (\n    <Stack styles={rootLayoutStyle}>\n      {wrappedLocalVideoComponent}\n      <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />\n      <Stack\n        /* @conditional-compile-remove(vertical-gallery) */\n        horizontal={overflowGalleryPosition === 'VerticalRight'}\n        styles={innerLayoutStyle}\n        tokens={videoGalleryLayoutGap}\n      >\n        {screenShareComponent ? (\n          screenShareComponent\n        ) : (\n          <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n            {gridTiles}\n          </GridLayout>\n        )}\n        {overflowGallery}\n      </Stack>\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"FloatingLocalVideoLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/FloatingLocalVideoLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { LayerHost, mergeStyles, Stack } from '@fluentui/react';\nimport { useId } from '@fluentui/react-hooks';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { useTheme } from '../../theming';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { isShortHeight } from '../utils/responsive';\nimport { FloatingLocalVideo } from './FloatingLocalVideo';\nimport { LayoutProps } from './Layout';\nimport {\n  LARGE_FLOATING_MODAL_SIZE_REM,\n  localVideoTileContainerStyle,\n  localVideoTileWithControlsContainerStyle,\n  LOCAL_VIDEO_TILE_ZINDEX,\n  SMALL_FLOATING_MODAL_SIZE_REM\n} from './styles/FloatingLocalVideo.styles';\n/* @conditional-compile-remove(vertical-gallery) */\nimport {\n  SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM,\n  VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM\n} from './styles/FloatingLocalVideo.styles';\nimport { innerLayoutStyle, layerHostStyle, rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { OverflowGallery } from './OverflowGallery';\n/* @conditional-compile-remove(click-to-call) */\nimport { LocalVideoTileSize } from '../VideoGallery';\n\n/**\n * Props for {@link FloatingLocalVideoLayout}.\n *\n * @private\n */\nexport interface FloatingLocalVideoLayoutProps extends LayoutProps {\n  /**\n   * Whether to display the local video camera switcher button\n   */\n  showCameraSwitcherInLocalPreview?: boolean;\n  /**\n   * Height of parent element\n   */\n  parentHeight?: number;\n  /* @conditional-compile-remove(click-to-call) */\n  /**\n   * Local video tile mode\n   */\n  localVideoTileSize?: LocalVideoTileSize;\n}\n\n/**\n * FloatingLocalVideoLayout displays remote participants and a screen sharing component in\n * a grid and overflow gallery while floating the local video\n *\n * @private\n */\nexport const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps): JSX.Element => {\n  const {\n    remoteParticipants = [],\n    dominantSpeakers,\n    localVideoComponent,\n    screenShareComponent,\n    onRenderRemoteParticipant,\n    styles,\n    maxRemoteVideoStreams,\n    showCameraSwitcherInLocalPreview,\n    parentWidth,\n    parentHeight,\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'HorizontalBottom',\n    pinnedParticipantUserIds = [],\n    /* @conditional-compile-remove(click-to-call) */ localVideoTileSize\n  } = props;\n\n  const theme = useTheme();\n\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n  /* @conditional-compile-remove(vertical-gallery) */\n  const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n  // This is for tracking the number of children in the first page of overflow gallery.\n  // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.\n  const childrenPerPage = useRef(4);\n  const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({\n    remoteParticipants,\n    dominantSpeakers,\n    maxRemoteVideoStreams,\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent\n      ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)\n      : childrenPerPage.current,\n    /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds\n  });\n\n  let activeVideoStreams = 0;\n\n  const gridTiles = gridParticipants.map((p) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  const shouldFloatLocalVideo = remoteParticipants.length > 0;\n\n  if (!shouldFloatLocalVideo && localVideoComponent) {\n    gridTiles.push(localVideoComponent);\n  }\n\n  /**\n   * instantiate indexes available to render with indexes available that would be on first page\n   *\n   * For some components which do not strictly follow the order of the array, we might\n   * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of\n   * this case when those components are here\n   */\n  const [indexesToRender, setIndexesToRender] = useState<number[]>([]);\n\n  const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable &&\n            indexesToRender &&\n            indexesToRender.includes(i) &&\n            activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  const layerHostId = useId('layerhost');\n\n  const localVideoSizeRem = useMemo(() => {\n    if (isNarrow || /*@conditional-compile-remove(click-to-call) */ localVideoTileSize === '9:16') {\n      return SMALL_FLOATING_MODAL_SIZE_REM;\n    }\n    /* @conditional-compile-remove(vertical-gallery) */\n    if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'VerticalRight') {\n      return isNarrow\n        ? SMALL_FLOATING_MODAL_SIZE_REM\n        : isShort\n        ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM\n        : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM;\n    }\n    /*@conditional-compile-remove(click-to-call) */\n    if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'HorizontalBottom') {\n      return localVideoTileSize === '16:9' || !isNarrow ? LARGE_FLOATING_MODAL_SIZE_REM : SMALL_FLOATING_MODAL_SIZE_REM;\n    }\n    return LARGE_FLOATING_MODAL_SIZE_REM;\n  }, [\n    overflowGalleryTiles.length,\n    isNarrow,\n    screenShareComponent,\n    /* @conditional-compile-remove(vertical-gallery) */ isShort,\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,\n    /* @conditional-compile-remove(click-to-call) */ localVideoTileSize\n  ]);\n\n  const wrappedLocalVideoComponent =\n    (localVideoComponent && shouldFloatLocalVideo) || (screenShareComponent && localVideoComponent) ? (\n      // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.\n      showCameraSwitcherInLocalPreview ? (\n        <Stack\n          className={mergeStyles(localVideoTileWithControlsContainerStyle(theme, localVideoSizeRem), {\n            boxShadow: theme.effects.elevation8,\n            zIndex: LOCAL_VIDEO_TILE_ZINDEX\n          })}\n        >\n          {localVideoComponent}\n        </Stack>\n      ) : overflowGalleryTiles.length > 0 || screenShareComponent ? (\n        <Stack\n          className={mergeStyles(\n            localVideoTileContainerStyle(\n              theme,\n              localVideoSizeRem,\n              !!screenShareComponent,\n              /* @conditional-compile-remove(gallery-layouts) */ overflowGalleryPosition\n            )\n          )}\n        >\n          {localVideoComponent}\n        </Stack>\n      ) : (\n        <FloatingLocalVideo\n          localVideoComponent={localVideoComponent}\n          layerHostId={layerHostId}\n          localVideoSizeRem={localVideoSizeRem}\n          parentWidth={parentWidth}\n          parentHeight={parentHeight}\n        />\n      )\n    ) : undefined;\n\n  const overflowGallery = useMemo(() => {\n    if (overflowGalleryTiles.length === 0 && !screenShareComponent) {\n      return null;\n    }\n    return (\n      <OverflowGallery\n        /* @conditional-compile-remove(vertical-gallery) */\n        isShort={isShort}\n        onFetchTilesToRender={setIndexesToRender}\n        isNarrow={isNarrow}\n        shouldFloatLocalVideo={true}\n        overflowGalleryElements={overflowGalleryTiles}\n        horizontalGalleryStyles={styles?.horizontalGallery}\n        /* @conditional-compile-remove(vertical-gallery) */\n        verticalGalleryStyles={styles?.verticalGallery}\n        /* @conditional-compile-remove(vertical-gallery) */\n        overflowGalleryPosition={overflowGalleryPosition}\n        onChildrenPerPageChange={(n: number) => {\n          childrenPerPage.current = n;\n        }}\n      />\n    );\n  }, [\n    isNarrow,\n    /* @conditional-compile-remove(vertical-gallery) */ isShort,\n    screenShareComponent,\n    overflowGalleryTiles,\n    styles?.horizontalGallery,\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,\n    setIndexesToRender,\n    /* @conditional-compile-remove(vertical-gallery) */ styles?.verticalGallery\n  ]);\n\n  return (\n    <Stack styles={rootLayoutStyle}>\n      {wrappedLocalVideoComponent}\n      <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />\n      <Stack\n        /* @conditional-compile-remove(vertical-gallery) */\n        horizontal={overflowGalleryPosition === 'VerticalRight'}\n        styles={innerLayoutStyle}\n        tokens={videoGalleryLayoutGap}\n      >\n        {\n          /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition === 'HorizontalTop' ? (\n            overflowGallery\n          ) : (\n            <></>\n          )\n        }\n        {screenShareComponent ? (\n          screenShareComponent\n        ) : (\n          <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n            {gridTiles}\n          </GridLayout>\n        )}\n        {overflowGalleryTrampoline(\n          overflowGallery,\n          /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition\n        )}\n      </Stack>\n    </Stack>\n  );\n};\n\nconst overflowGalleryTrampoline = (\n  gallery: JSX.Element | null,\n  galleryPosition?: 'HorizontalBottom' | 'VerticalRight' | 'HorizontalTop'\n): JSX.Element | null => {\n  /* @conditional-compile-remove(gallery-layouts) */\n  return galleryPosition !== 'HorizontalTop' ? gallery : <></>;\n  return gallery;\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoGallery/styles/FloatingLocalVideo.styles.d.ts

@@ -50,7 +50,7 @@ export declare const LOCAL_VIDEO_TILE_ZINDEX = 2;
 export declare const localVideoTileContainerStyle: (theme: Theme, localVideoTileSizeRem: {
     width: number;
     height: number;
-}, screenSharePresent?: boolean | undefined) => IStyle;
+}, screenSharePresent?: boolean | undefined, overflowGalleryPosition?: "HorizontalBottom" | "VerticalRight" | "HorizontalTop" | undefined) => IStyle;
 /**
  * @private
  */

package/dist/dist-esm/react-components/src/components/VideoGallery/styles/FloatingLocalVideo.styles.js

@@ -39,14 +39,15 @@ export const LOCAL_VIDEO_TILE_ZINDEX = 2;
 /**
  * @private
  */
-export const localVideoTileContainerStyle = (theme, localVideoTileSizeRem, screenSharePresent) => {
+export const localVideoTileContainerStyle = (theme, localVideoTileSizeRem, screenSharePresent, overflowGalleryPosition) => {
     return {
         width: screenSharePresent ? `${localVideoTileSizeRem.width}rem` : '',
         height: screenSharePresent ? `${localVideoTileSizeRem.height}rem` : '',
         minWidth: screenSharePresent ? '' : `${localVideoTileSizeRem.width}rem`,
         minHeight: screenSharePresent ? '' : `${localVideoTileSizeRem.height}rem`,
         position: 'absolute',
-        bottom: `${localVideoTileOuterPaddingRem}rem`,
+        bottom: overflowGalleryPosition !== 'HorizontalTop' ? `${localVideoTileOuterPaddingRem}rem` : 'unset',
+        top: overflowGalleryPosition === 'HorizontalTop' ? `${localVideoTileOuterPaddingRem}rem` : 'unset',
         borderRadius: theme.effects.roundedCorner4,
         overflow: 'hidden',
         right: `${localVideoTileOuterPaddingRem}rem`

package/dist/dist-esm/react-components/src/components/VideoGallery/styles/FloatingLocalVideo.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingLocalVideo.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/FloatingLocalVideo.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n  concatStyleSets,\n  IButtonStyles,\n  IModalStyleProps,\n  IModalStyles,\n  IStackStyles,\n  IStyle,\n  IStyleFunctionOrObject,\n  mergeStyles,\n  Theme\n} from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { VideoTileStylesProps } from '../../VideoTile';\n\n/**\n * @private\n */\nexport const videoGalleryOuterDivStyle = mergeStyles({ position: 'relative', width: '100%', height: '100%' });\n\n/**\n * @private\n */\nexport const videoGalleryContainerStyle: IStackStyles = {\n  root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }\n};\n\n/**\n * Small floating modal width and height in rem for small screen\n */\nexport const SMALL_FLOATING_MODAL_SIZE_REM = { width: 3.625, height: 6.5 };\n\n/**\n * Large floating modal width and height in rem for large screen\n * Aspect ratio: 16:9\n */\nexport const LARGE_FLOATING_MODAL_SIZE_REM = { width: 13.438, height: 7.5 };\n\n/**\n * Vertical gallery floating modal width and height in rem\n * Aspect ratio: 16:9\n */\nexport const SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM = { width: 9, height: 5.063 };\n\n/**\n * Vertical gallery floating modal width and height in rem\n * Aspect ratio: 16:9\n */\nexport const VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM = { width: 11, height: 6.25 };\n/**\n * @private\n * z-index to ensure that the local video tile is above the video gallery.\n */\nexport const LOCAL_VIDEO_TILE_ZINDEX = 2;\n\n/**\n * @private\n */\nexport const localVideoTileContainerStyle = (\n  theme: Theme,\n  localVideoTileSizeRem: { width: number; height: number },\n  screenSharePresent?: boolean\n): IStyle => {\n  return {\n    width: screenSharePresent ? `${localVideoTileSizeRem.width}rem` : '',\n    height: screenSharePresent ? `${localVideoTileSizeRem.height}rem` : '',\n    minWidth: screenSharePresent ? '' : `${localVideoTileSizeRem.width}rem`,\n    minHeight: screenSharePresent ? '' : `${localVideoTileSizeRem.height}rem`,\n    position: 'absolute',\n    bottom: `${localVideoTileOuterPaddingRem}rem`,\n    borderRadius: theme.effects.roundedCorner4,\n    overflow: 'hidden',\n    right: `${localVideoTileOuterPaddingRem}rem`\n  };\n};\n\n/**\n * @private\n */\nexport const localVideoTileWithControlsContainerStyle = (\n  theme: Theme,\n  localVideoTileSizeRem: { width: number; height: number }\n): IStackStyles => {\n  return concatStyleSets(localVideoTileContainerStyle(theme, localVideoTileSizeRem), {\n    root: { boxShadow: theme.effects.elevation8 }\n  });\n};\n\n/**\n * @private\n */\nexport const floatingLocalVideoModalStyle = (\n  theme: Theme,\n  modalSizeRem: { width: number; height: number }\n): IStyleFunctionOrObject<IModalStyleProps, IModalStyles> => {\n  return concatStyleSets(\n    {\n      main: localVideoTileContainerStyle(theme, modalSizeRem)\n    },\n    {\n      main: {\n        boxShadow: theme.effects.elevation8,\n        ':focus-within': {\n          boxShadow: theme.effects.elevation16,\n          border: `${_pxToRem(2)} solid ${theme.palette.neutralPrimary}`\n        }\n      }\n    },\n    localVideoModalStyles\n  );\n};\n\n/**\n * Padding equal to the amount the modal should stay inside the bounds of the container.\n * i.e. if this is 0.5rem, the modal should always be at least 0.5rem inside the container at all times on all sides.\n * @private\n */\nexport const localVideoTileOuterPaddingRem = 0.5;\n\n/**\n * @private\n */\nexport const floatingLocalVideoTileStyle: VideoTileStylesProps = {\n  root: {\n    position: 'absolute',\n    zIndex: LOCAL_VIDEO_TILE_ZINDEX,\n    height: '100%',\n    width: '100%'\n  }\n};\n\n/**\n * @private\n */\nexport const localVideoCameraCycleButtonStyles = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      position: 'absolute',\n      width: _pxToRem(32),\n      height: _pxToRem(32),\n      right: '0rem',\n      top: '0rem',\n      color: '#FFFFFF', // only shows up on running video feed to we want to force specific colours.\n      zIndex: 2, // shows the button directly over the local video feed.\n      background: 'rgba(0,0,0,0.4)',\n      borderRadius: theme.effects.roundedCorner2\n    },\n    rootFocused: {\n      // styles to remove the unwanted white highlight and blue colour after tapping on button.\n      color: '#FFFFFF',\n      background: 'rgba(0,0,0,0.4)' // sets opacity of background to be visible on all backdrops in video stream.\n    },\n    icon: {\n      paddingLeft: _pxToRem(3),\n      paddingRight: _pxToRem(3),\n      margin: 0\n    },\n    flexContainer: {\n      paddingBottom: _pxToRem(8)\n    }\n  };\n};\n\n/**\n * Styles for the local video tile modal when it is focused, will cause keyboard move icon to appear over video\n * @private\n */\nexport const localVideoModalStyles: Partial<IModalStyles> = {\n  keyboardMoveIconContainer: {\n    zIndex: LOCAL_VIDEO_TILE_ZINDEX + 1 // zIndex to set the keyboard movement Icon above the other layers in the video tile.\n  }\n};\n\"../../../../../acs-ui-common/src\""]}
+{"version":3,"file":"FloatingLocalVideo.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/FloatingLocalVideo.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n  concatStyleSets,\n  IButtonStyles,\n  IModalStyleProps,\n  IModalStyles,\n  IStackStyles,\n  IStyle,\n  IStyleFunctionOrObject,\n  mergeStyles,\n  Theme\n} from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { VideoTileStylesProps } from '../../VideoTile';\n\n/**\n * @private\n */\nexport const videoGalleryOuterDivStyle = mergeStyles({ position: 'relative', width: '100%', height: '100%' });\n\n/**\n * @private\n */\nexport const videoGalleryContainerStyle: IStackStyles = {\n  root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }\n};\n\n/**\n * Small floating modal width and height in rem for small screen\n */\nexport const SMALL_FLOATING_MODAL_SIZE_REM = { width: 3.625, height: 6.5 };\n\n/**\n * Large floating modal width and height in rem for large screen\n * Aspect ratio: 16:9\n */\nexport const LARGE_FLOATING_MODAL_SIZE_REM = { width: 13.438, height: 7.5 };\n\n/**\n * Vertical gallery floating modal width and height in rem\n * Aspect ratio: 16:9\n */\nexport const SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM = { width: 9, height: 5.063 };\n\n/**\n * Vertical gallery floating modal width and height in rem\n * Aspect ratio: 16:9\n */\nexport const VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM = { width: 11, height: 6.25 };\n/**\n * @private\n * z-index to ensure that the local video tile is above the video gallery.\n */\nexport const LOCAL_VIDEO_TILE_ZINDEX = 2;\n\n/**\n * @private\n */\nexport const localVideoTileContainerStyle = (\n  theme: Theme,\n  localVideoTileSizeRem: { width: number; height: number },\n  screenSharePresent?: boolean,\n  overflowGalleryPosition?: 'HorizontalBottom' | 'VerticalRight' | 'HorizontalTop'\n): IStyle => {\n  return {\n    width: screenSharePresent ? `${localVideoTileSizeRem.width}rem` : '',\n    height: screenSharePresent ? `${localVideoTileSizeRem.height}rem` : '',\n    minWidth: screenSharePresent ? '' : `${localVideoTileSizeRem.width}rem`,\n    minHeight: screenSharePresent ? '' : `${localVideoTileSizeRem.height}rem`,\n    position: 'absolute',\n    bottom: overflowGalleryPosition !== 'HorizontalTop' ? `${localVideoTileOuterPaddingRem}rem` : 'unset',\n    top: overflowGalleryPosition === 'HorizontalTop' ? `${localVideoTileOuterPaddingRem}rem` : 'unset',\n    borderRadius: theme.effects.roundedCorner4,\n    overflow: 'hidden',\n    right: `${localVideoTileOuterPaddingRem}rem`\n  };\n};\n\n/**\n * @private\n */\nexport const localVideoTileWithControlsContainerStyle = (\n  theme: Theme,\n  localVideoTileSizeRem: { width: number; height: number }\n): IStackStyles => {\n  return concatStyleSets(localVideoTileContainerStyle(theme, localVideoTileSizeRem), {\n    root: { boxShadow: theme.effects.elevation8 }\n  });\n};\n\n/**\n * @private\n */\nexport const floatingLocalVideoModalStyle = (\n  theme: Theme,\n  modalSizeRem: { width: number; height: number }\n): IStyleFunctionOrObject<IModalStyleProps, IModalStyles> => {\n  return concatStyleSets(\n    {\n      main: localVideoTileContainerStyle(theme, modalSizeRem)\n    },\n    {\n      main: {\n        boxShadow: theme.effects.elevation8,\n        ':focus-within': {\n          boxShadow: theme.effects.elevation16,\n          border: `${_pxToRem(2)} solid ${theme.palette.neutralPrimary}`\n        }\n      }\n    },\n    localVideoModalStyles\n  );\n};\n\n/**\n * Padding equal to the amount the modal should stay inside the bounds of the container.\n * i.e. if this is 0.5rem, the modal should always be at least 0.5rem inside the container at all times on all sides.\n * @private\n */\nexport const localVideoTileOuterPaddingRem = 0.5;\n\n/**\n * @private\n */\nexport const floatingLocalVideoTileStyle: VideoTileStylesProps = {\n  root: {\n    position: 'absolute',\n    zIndex: LOCAL_VIDEO_TILE_ZINDEX,\n    height: '100%',\n    width: '100%'\n  }\n};\n\n/**\n * @private\n */\nexport const localVideoCameraCycleButtonStyles = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      position: 'absolute',\n      width: _pxToRem(32),\n      height: _pxToRem(32),\n      right: '0rem',\n      top: '0rem',\n      color: '#FFFFFF', // only shows up on running video feed to we want to force specific colours.\n      zIndex: 2, // shows the button directly over the local video feed.\n      background: 'rgba(0,0,0,0.4)',\n      borderRadius: theme.effects.roundedCorner2\n    },\n    rootFocused: {\n      // styles to remove the unwanted white highlight and blue colour after tapping on button.\n      color: '#FFFFFF',\n      background: 'rgba(0,0,0,0.4)' // sets opacity of background to be visible on all backdrops in video stream.\n    },\n    icon: {\n      paddingLeft: _pxToRem(3),\n      paddingRight: _pxToRem(3),\n      margin: 0\n    },\n    flexContainer: {\n      paddingBottom: _pxToRem(8)\n    }\n  };\n};\n\n/**\n * Styles for the local video tile modal when it is focused, will cause keyboard move icon to appear over video\n * @private\n */\nexport const localVideoModalStyles: Partial<IModalStyles> = {\n  keyboardMoveIconContainer: {\n    zIndex: LOCAL_VIDEO_TILE_ZINDEX + 1 // zIndex to set the keyboard movement Icon above the other layers in the video tile.\n  }\n};\n\"../../../../../acs-ui-common/src\""]}