npm - @azure/communication-react - Versions diffs - 1.0.0-alpha-20211130.12.0 → 1.0.0-alpha - Mend

@azure/communication-react 1.0.0-alpha-20211130.12.0 → 1.0.0-alpha

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (116) hide show

package/dist/dist-cjs/communication-react/index.js CHANGED Viewed

@@ -187,7 +187,7 @@ const fromFlatCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.0.0-alpha-20211130.0012.0';
+var telemetryVersion = '1.0.0-alpha+20211203.0008.0';
 // Copyright (c) Microsoft Corporation.
 /**
@@ -291,7 +291,7 @@ const getDiagnostics = (state, props) => { var _a; return (_a = state.calls[prop
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$l = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$p = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -329,7 +329,7 @@ const _isPreviewOn = (deviceManager) => {
  *
  * @private
  */
-const disposeAllLocalPreviewViews = (callClient) => __awaiter$l(void 0, void 0, void 0, function* () {
+const disposeAllLocalPreviewViews = (callClient) => __awaiter$p(void 0, void 0, void 0, function* () {
     const unparentedViews = callClient.getState().deviceManager.unparentedViews;
     for (const view of unparentedViews) {
         yield callClient.disposeView(undefined, undefined, view);
@@ -391,7 +391,7 @@ const devicesButtonSelector = reselect__namespace.createSelector([getDeviceManag
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$k = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$o = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -415,7 +415,7 @@ const areStreamsEqual = (prevStream, newStream) => {
  * @public
  */
 const createDefaultCallingHandlers = memoizeOne__default['default']((callClient, callAgent, deviceManager, call) => {
-    const onStartLocalVideo = () => __awaiter$k(void 0, void 0, void 0, function* () {
+    const onStartLocalVideo = () => __awaiter$o(void 0, void 0, void 0, function* () {
         // Before the call object creates a stream, dispose of any local preview streams.
         // @TODO: is there any way to parent the unparented view to the call object instead
         // of disposing and creating a new stream?
@@ -435,7 +435,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             yield call.startVideo(stream);
         }
     });
-    const onStopLocalVideo = (stream) => __awaiter$k(void 0, void 0, void 0, function* () {
+    const onStopLocalVideo = (stream) => __awaiter$o(void 0, void 0, void 0, function* () {
         const callId = call === null || call === void 0 ? void 0 : call.id;
         if (!callId) {
             return;
@@ -448,7 +448,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             });
         }
     });
-    const onToggleCamera = (options) => __awaiter$k(void 0, void 0, void 0, function* () {
+    const onToggleCamera = (options) => __awaiter$o(void 0, void 0, void 0, function* () {
         if (call && _isInCall(call.state)) {
             const stream = call.localVideoStreams.find((stream) => stream.mediaStreamType === 'Video');
             if (stream) {
@@ -478,19 +478,19 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
     const onStartCall = (participants, options) => {
         return callAgent ? callAgent.startCall(participants, options) : undefined;
     };
-    const onSelectMicrophone = (device) => __awaiter$k(void 0, void 0, void 0, function* () {
+    const onSelectMicrophone = (device) => __awaiter$o(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
         return deviceManager.selectMicrophone(device);
     });
-    const onSelectSpeaker = (device) => __awaiter$k(void 0, void 0, void 0, function* () {
+    const onSelectSpeaker = (device) => __awaiter$o(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
         return deviceManager.selectSpeaker(device);
     });
-    const onSelectCamera = (device, options) => __awaiter$k(void 0, void 0, void 0, function* () {
+    const onSelectCamera = (device, options) => __awaiter$o(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
@@ -513,17 +513,17 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             }, options);
         }
     });
-    const onToggleMicrophone = () => __awaiter$k(void 0, void 0, void 0, function* () {
+    const onToggleMicrophone = () => __awaiter$o(void 0, void 0, void 0, function* () {
         if (!call || !_isInCall(call.state)) {
             throw new Error(`Please invoke onToggleMicrophone after call is started`);
         }
         return call.isMuted ? yield call.unmute() : yield call.mute();
     });
-    const onStartScreenShare = () => __awaiter$k(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.startScreenSharing()); });
-    const onStopScreenShare = () => __awaiter$k(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.stopScreenSharing()); });
-    const onToggleScreenShare = () => __awaiter$k(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.isScreenSharingOn) ? yield onStopScreenShare() : yield onStartScreenShare(); });
-    const onHangUp = () => __awaiter$k(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.hangUp()); });
-    const onCreateLocalStreamView = (options) => __awaiter$k(void 0, void 0, void 0, function* () {
+    const onStartScreenShare = () => __awaiter$o(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.startScreenSharing()); });
+    const onStopScreenShare = () => __awaiter$o(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.stopScreenSharing()); });
+    const onToggleScreenShare = () => __awaiter$o(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.isScreenSharingOn) ? yield onStopScreenShare() : yield onStartScreenShare(); });
+    const onHangUp = () => __awaiter$o(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.hangUp()); });
+    const onCreateLocalStreamView = (options) => __awaiter$o(void 0, void 0, void 0, function* () {
         if (!call || call.localVideoStreams.length === 0) {
             return;
         }
@@ -537,7 +537,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
         }
         return callClient.createView(call.id, undefined, localStream, options);
     });
-    const onCreateRemoteStreamView = (userId, options = { scalingMode: 'Crop' }) => __awaiter$k(void 0, void 0, void 0, function* () {
+    const onCreateRemoteStreamView = (userId, options = { scalingMode: 'Crop' }) => __awaiter$o(void 0, void 0, void 0, function* () {
         if (!call) {
             return;
         }
@@ -561,7 +561,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             callClient.createView(call.id, participant.identifier, screenShareStream, { scalingMode: 'Fit' });
         }
     });
-    const onDisposeRemoteStreamView = (userId) => __awaiter$k(void 0, void 0, void 0, function* () {
+    const onDisposeRemoteStreamView = (userId) => __awaiter$o(void 0, void 0, void 0, function* () {
         if (!call) {
             return;
         }
@@ -582,13 +582,13 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             callClient.disposeView(call.id, participant.identifier, screenShareStream);
         }
     });
-    const onDisposeLocalStreamView = () => __awaiter$k(void 0, void 0, void 0, function* () {
+    const onDisposeLocalStreamView = () => __awaiter$o(void 0, void 0, void 0, function* () {
         // TODO: we need to remember which LocalVideoStream was used for LocalPreview and dispose that one. For now
         // assume any unparented view is a LocalPreview and stop all since those are only used for LocalPreview
         // currently.
         yield disposeAllLocalPreviewViews(callClient);
     });
-    const onRemoveParticipant = (userId) => __awaiter$k(void 0, void 0, void 0, function* () {
+    const onRemoveParticipant = (userId) => __awaiter$o(void 0, void 0, void 0, function* () {
         yield (call === null || call === void 0 ? void 0 : call.removeParticipant(fromFlatCommunicationIdentifier(userId)));
     });
     return {
@@ -2526,7 +2526,7 @@ const ChatMessageComponentAsMessageBubble = (props) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$j = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$n = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -2552,7 +2552,7 @@ const ChatMessageComponent = (props) => {
         return React__default['default'].createElement(React__default['default'].Fragment, null);
     }
     else if (isEditing) {
-        return (React__default['default'].createElement(ChatMessageComponentAsEditBox, { initialValue: (_a = props.message.content) !== null && _a !== void 0 ? _a : '', inlineEditButtons: props.inlineAcceptRejectEditButtons, strings: props.strings, onSubmit: (text) => __awaiter$j(void 0, void 0, void 0, function* () {
+        return (React__default['default'].createElement(ChatMessageComponentAsEditBox, { initialValue: (_a = props.message.content) !== null && _a !== void 0 ? _a : '', inlineEditButtons: props.inlineAcceptRejectEditButtons, strings: props.strings, onSubmit: (text) => __awaiter$n(void 0, void 0, void 0, function* () {
                 props.onUpdateMessage &&
                     props.message.messageId &&
                     (yield props.onUpdateMessage(props.message.messageId, text));
@@ -2610,7 +2610,7 @@ const isNarrowWidth = (containerWidthRem) => containerWidthRem <= convertRemToPx
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$i = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$m = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -2787,7 +2787,7 @@ const getLastChatMessageIdWithStatus = (messages, status) => {
  */
 const MessageThread = (props) => {
     var _a;
-    const { messages: newMessages, userId, styles, disableJumpToNewMessageButton = false, showMessageDate = false, showMessageStatus = false, numberOfChatMessagesToReload = 0, onMessageSeen, onRenderMessageStatus, onRenderAvatar, onLoadPreviousChatMessages, onRenderJumpToNewMessageButton, onRenderMessage, onUpdateMessage, onDeleteMessage } = props;
+    const { messages: newMessages, userId, styles, disableJumpToNewMessageButton = false, showMessageDate = false, showMessageStatus = false, numberOfChatMessagesToReload = 5, onMessageSeen, onRenderMessageStatus, onRenderAvatar, onLoadPreviousChatMessages, onRenderJumpToNewMessageButton, onRenderMessage, onUpdateMessage, onDeleteMessage } = props;
     const [messages, setMessages] = React.useState([]);
     // We need this state to wait for one tick and scroll to bottom after messages have been initialized.
     // Otherwise chatScrollDivRef.current.clientHeight is wrong if we scroll to bottom before messages are initialized.
@@ -2829,7 +2829,7 @@ const MessageThread = (props) => {
         setChatMessagesInitialized(chatMessagesInitialized);
     };
     // we try to only send those message status if user is scrolled to the bottom.
-    const sendMessageStatusIfAtBottom = React.useCallback(() => __awaiter$i(void 0, void 0, void 0, function* () {
+    const sendMessageStatusIfAtBottom = React.useCallback(() => __awaiter$m(void 0, void 0, void 0, function* () {
         if (!isAtBottomOfScrollRef.current ||
             !document.hasFocus() ||
             !messagesRef.current ||
@@ -2880,7 +2880,7 @@ const MessageThread = (props) => {
         setIsAtBottomOfScrollRef(atBottom);
     }, [scrollToBottom, sendMessageStatusIfAtBottom]);
     // Infinite scrolling + threadInitialize function
-    const fetchNewMessageWhenAtTop = React.useCallback(() => __awaiter$i(void 0, void 0, void 0, function* () {
+    const fetchNewMessageWhenAtTop = React.useCallback(() => __awaiter$m(void 0, void 0, void 0, function* () {
         if (chatScrollDivRef.current && !isLoadingChatMessagesRef.current) {
             if (onLoadPreviousChatMessages) {
                 isLoadingChatMessagesRef.current = true;
@@ -3225,7 +3225,7 @@ const ParticipantItem = (props) => {
 /**
  * @private
  */
-const participantListStyle = react.mergeStyles({
+const participantListStyle$1 = react.mergeStyles({
     height: '100%',
     padding: '0.125rem'
 });
@@ -3318,7 +3318,7 @@ const ParticipantList = (props) => {
         return menuItems;
     };
     const participantItemStyles = react.merge(participantListItemStyle, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.participantItemStyles);
-    return (React__default['default'].createElement(react.Stack, { "data-ui-id": ids.participantList, className: react.mergeStyles(participantListStyle, (_b = props.styles) === null || _b === void 0 ? void 0 : _b.root) }, displayedParticipants.map((participant) => onRenderParticipant
+    return (React__default['default'].createElement(react.Stack, { "data-ui-id": ids.participantList, className: react.mergeStyles(participantListStyle$1, (_b = props.styles) === null || _b === void 0 ? void 0 : _b.root) }, displayedParticipants.map((participant) => onRenderParticipant
         ? onRenderParticipant(participant)
         : onRenderParticipantDefault(participant, strings, myUserId, onRemoveParticipant, onRenderAvatar, createParticipantMenuItems, participantItemStyles))));
 };
@@ -3762,22 +3762,14 @@ const LARGE_FLOATING_MODAL_SIZE_REM = { width: 10, height: 7.5 };
  */
 const floatingLocalVideoModalStyle = (theme, isNarrow) => {
     return react.concatStyleSets({
-        root: {
-            width: '100%',
-            height: '100%'
-        },
-        main: {
-            minWidth: isNarrow ? `${SMALL_FLOATING_MODAL_SIZE_REM.width}rem` : `${LARGE_FLOATING_MODAL_SIZE_REM.width}rem`,
-            minHeight: isNarrow
-                ? `${SMALL_FLOATING_MODAL_SIZE_REM.height}rem`
-                : `${LARGE_FLOATING_MODAL_SIZE_REM.height}rem`,
-            position: 'absolute',
-            bottom: '0.5rem',
-            boxShadow: theme.effects.elevation8,
-            borderRadius: theme.effects.roundedCorner4,
-            overflow: 'hidden'
-        }
-    }, { main: theme.rtl ? { left: '0.5rem' } : { right: '0.5rem' } });
+        main: localVideoTileContainerStyle(theme, isNarrow)
+    }, { main: { boxShadow: theme.effects.elevation8 } });
+};
+/**
+ * @private
+ */
+const localVideoTileContainerStyle = (theme, isNarrow) => {
+    return Object.assign({ minWidth: isNarrow ? `${SMALL_FLOATING_MODAL_SIZE_REM.width}rem` : `${LARGE_FLOATING_MODAL_SIZE_REM.width}rem`, minHeight: isNarrow ? `${SMALL_FLOATING_MODAL_SIZE_REM.height}rem` : `${LARGE_FLOATING_MODAL_SIZE_REM.height}rem`, position: 'absolute', bottom: '0.5rem', borderRadius: theme.effects.roundedCorner4, overflow: 'hidden' }, (theme.rtl ? { left: '0.5rem' } : { right: '0.5rem' }));
 };
 /**
  * @private
@@ -4059,11 +4051,14 @@ const VideoGallery = (props) => {
             containerRef.current.id = `video-gallery-${uuid.v4()}`;
         }
     }, [containerRef]);
+    const horizontalGalleryPresent = horizontalGalleryTiles && horizontalGalleryTiles.length > 0;
     return (React__default['default'].createElement("div", { "data-ui-id": ids.videoGallery, ref: containerRef, className: react.mergeStyles(videoGalleryOuterDivStyle, styles === null || styles === void 0 ? void 0 : styles.root) },
-        shouldFloatLocalVideo && (React__default['default'].createElement(react.Modal, { isOpen: true, isModeless: true, dragOptions: DRAG_OPTIONS, styles: floatingLocalVideoModalStyle(theme, isNarrow), layerProps: { hostId: (_e = containerRef.current) === null || _e === void 0 ? void 0 : _e.id } }, localParticipant && localVideoTile)),
+        shouldFloatLocalVideo &&
+            localParticipant &&
+            (horizontalGalleryPresent ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileContainerStyle(theme, isNarrow)) }, localVideoTile)) : (React__default['default'].createElement(react.Modal, { isOpen: true, isModeless: true, dragOptions: DRAG_OPTIONS, styles: floatingLocalVideoModalStyle(theme, isNarrow), layerProps: { hostId: (_e = containerRef.current) === null || _e === void 0 ? void 0 : _e.id } }, localVideoTile))),
         React__default['default'].createElement(react.Stack, { horizontal: false, styles: videoGalleryContainerStyle, tokens: videoGalleryContainerTokens },
             screenShareParticipant ? (remoteScreenShareComponent) : (localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.isScreenSharingOn) ? (localScreenShareStreamComponent) : (React__default['default'].createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
-            horizontalGalleryTiles && horizontalGalleryTiles.length > 0 && (React__default['default'].createElement(ResponsiveHorizontalGallery, { key: "responsive-horizontal-gallery", containerStyles: horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow), horizontalGalleryStyles: react.concatStyleSets(horizontalGalleryStyle(isNarrow), styles === null || styles === void 0 ? void 0 : styles.horizontalGallery), childWidthRem: isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width : LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width, buttonWidthRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapWidthRem: HORIZONTAL_GALLERY_GAP }, horizontalGalleryTiles)))));
+            horizontalGalleryPresent && (React__default['default'].createElement(ResponsiveHorizontalGallery, { key: "responsive-horizontal-gallery", containerStyles: horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow), horizontalGalleryStyles: react.concatStyleSets(horizontalGalleryStyle(isNarrow), styles === null || styles === void 0 ? void 0 : styles.horizontalGallery), childWidthRem: isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width : LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width, buttonWidthRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapWidthRem: HORIZONTAL_GALLERY_GAP }, horizontalGalleryTiles)))));
 };
 // Copyright (c) Microsoft Corporation.
@@ -4175,18 +4170,16 @@ const controlButtonStyles = {
     flexContainer: {
         flexFlow: 'column',
         display: 'contents'
+    },
+    label: {
+        fontSize: '0.625rem',
+        fontWeight: '400',
+        lineHeight: '1rem',
+        cursor: 'pointer',
+        display: 'block',
+        margin: '0rem 0.25rem'
     }
 };
-/**
- * @private
- */
-const controlButtonLabelStyles = {
-    fontSize: '0.625rem',
-    lineHeight: '1rem',
-    cursor: 'pointer',
-    display: 'block',
-    margin: '0rem 0.25rem'
-};
 /**
  * making it Partial as IContextualMenuStyles has all its props non-optional and we only need title to be defined here.
  *
@@ -4256,27 +4249,22 @@ const DefaultRenderIcon = (props) => {
  * @public
  */
 const ControlBarButton = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const componentStyles = react.concatStyleSets(controlButtonStyles, (_a = props.styles) !== null && _a !== void 0 ? _a : {});
-    const theme = useTheme();
     const labelText = (_d = (_b = props === null || props === void 0 ? void 0 : props.text) !== null && _b !== void 0 ? _b : (_c = props === null || props === void 0 ? void 0 : props.strings) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : ((props === null || props === void 0 ? void 0 : props.checked) ? (_e = props === null || props === void 0 ? void 0 : props.strings) === null || _e === void 0 ? void 0 : _e.onLabel : (_f = props === null || props === void 0 ? void 0 : props.strings) === null || _f === void 0 ? void 0 : _f.offLabel);
-    const DefaultRenderText = React.useCallback(() => {
-        var _a;
-        return (React__default['default'].createElement(react.Text, { key: props === null || props === void 0 ? void 0 : props.labelKey, className: react.mergeStyles(controlButtonLabelStyles, theme.palette.neutralPrimary, (_a = props === null || props === void 0 ? void 0 : props.styles) === null || _a === void 0 ? void 0 : _a.label) }, labelText));
-    }, [labelText, props === null || props === void 0 ? void 0 : props.labelKey, (_g = props === null || props === void 0 ? void 0 : props.styles) === null || _g === void 0 ? void 0 : _g.label, theme]);
-    const tooltipContent = (_j = (_h = props === null || props === void 0 ? void 0 : props.strings) === null || _h === void 0 ? void 0 : _h.tooltipContent) !== null && _j !== void 0 ? _j : ((props === null || props === void 0 ? void 0 : props.disabled)
-        ? (_k = props === null || props === void 0 ? void 0 : props.strings) === null || _k === void 0 ? void 0 : _k.tooltipDisabledContent
+    const tooltipContent = (_h = (_g = props === null || props === void 0 ? void 0 : props.strings) === null || _g === void 0 ? void 0 : _g.tooltipContent) !== null && _h !== void 0 ? _h : ((props === null || props === void 0 ? void 0 : props.disabled)
+        ? (_j = props === null || props === void 0 ? void 0 : props.strings) === null || _j === void 0 ? void 0 : _j.tooltipDisabledContent
         : (props === null || props === void 0 ? void 0 : props.checked)
-            ? (_l = props === null || props === void 0 ? void 0 : props.strings) === null || _l === void 0 ? void 0 : _l.tooltipOnContent
-            : (_m = props === null || props === void 0 ? void 0 : props.strings) === null || _m === void 0 ? void 0 : _m.tooltipOffContent);
-    const tooltipId = ((_o = props.tooltipId) !== null && _o !== void 0 ? _o : props.labelKey) ? props.labelKey + '-tooltip' : undefined;
+            ? (_k = props === null || props === void 0 ? void 0 : props.strings) === null || _k === void 0 ? void 0 : _k.tooltipOnContent
+            : (_l = props === null || props === void 0 ? void 0 : props.strings) === null || _l === void 0 ? void 0 : _l.tooltipOffContent);
+    const tooltipId = ((_m = props.tooltipId) !== null && _m !== void 0 ? _m : props.labelKey) ? props.labelKey + '-tooltip' : undefined;
     return (React__default['default'].createElement(ControlButtonTooltip, { content: tooltipContent, id: tooltipId },
-        React__default['default'].createElement(react.DefaultButton, Object.assign({}, props, { styles: componentStyles, onRenderText: props.showLabel ? (_p = props.onRenderText) !== null && _p !== void 0 ? _p : DefaultRenderText : undefined, onRenderIcon: (_q = props.onRenderIcon) !== null && _q !== void 0 ? _q : DefaultRenderIcon }))));
+        React__default['default'].createElement(react.DefaultButton, Object.assign({}, props, { styles: componentStyles, onRenderText: props.showLabel && props.onRenderText ? props.onRenderText : undefined, onRenderIcon: (_o = props.onRenderIcon) !== null && _o !== void 0 ? _o : DefaultRenderIcon }), props.showLabel ? labelText : React__default['default'].createElement(React__default['default'].Fragment, null))));
 };
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$h = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$l = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -4304,7 +4292,7 @@ const CameraButton = (props) => {
     const [waitForCamera, setWaitForCamera] = React.useState(false);
     const localeStrings = useLocale$1().strings.cameraButton;
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
-    const onToggleClick = React.useCallback(() => __awaiter$h(void 0, void 0, void 0, function* () {
+    const onToggleClick = React.useCallback(() => __awaiter$l(void 0, void 0, void 0, function* () {
         // Throttle click on camera, need to await onToggleCamera then allow another click
         if (onToggleCamera) {
             setWaitForCamera(true);
@@ -4731,8 +4719,24 @@ const ScreenShareButton = (props) => {
     var _a, _b, _c, _d;
     const localeStrings = useLocale$1().strings.screenShareButton;
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
-    return (React__default['default'].createElement(ControlBarButton, Object.assign({}, props, { onClick: (_a = props.onToggleScreenShare) !== null && _a !== void 0 ? _a : props.onClick, onRenderOnIcon: (_b = props.onRenderOnIcon) !== null && _b !== void 0 ? _b : onRenderScreenShareOnIcon, onRenderOffIcon: (_c = props.onRenderOffIcon) !== null && _c !== void 0 ? _c : onRenderScreenShareOffIcon, strings: strings, labelKey: (_d = props.labelKey) !== null && _d !== void 0 ? _d : 'screenShareButtonLabel' })));
+    const theme = react.useTheme();
+    const styles = screenshareButtonStyles(theme);
+    return (React__default['default'].createElement(ControlBarButton, Object.assign({}, props, { styles: styles, onClick: (_a = props.onToggleScreenShare) !== null && _a !== void 0 ? _a : props.onClick, onRenderOnIcon: (_b = props.onRenderOnIcon) !== null && _b !== void 0 ? _b : onRenderScreenShareOnIcon, onRenderOffIcon: (_c = props.onRenderOffIcon) !== null && _c !== void 0 ? _c : onRenderScreenShareOffIcon, strings: strings, labelKey: (_d = props.labelKey) !== null && _d !== void 0 ? _d : 'screenShareButtonLabel' })));
 };
+const screenshareButtonStyles = (theme) => ({
+    rootChecked: {
+        background: theme.palette.themePrimary,
+        color: react.DefaultPalette.white,
+        ':focus::after': { outlineColor: `${react.DefaultPalette.white} !important` } // added !important to avoid override by FluentUI button styles
+    },
+    rootCheckedHovered: {
+        background: theme.palette.themePrimary,
+        color: react.DefaultPalette.white,
+        ':focus::after': { outlineColor: `${react.DefaultPalette.white} !important` } // added !important to avoid override by FluentUI button styles
+    },
+    labelHovered: { color: react.DefaultPalette.white },
+    labelChecked: { color: react.DefaultPalette.white }
+});
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
@@ -5101,7 +5105,7 @@ const findSelector$1 = (component) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$g = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$k = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -5123,38 +5127,38 @@ var __awaiter$g = (window && window.__awaiter) || function (thisArg, _arguments,
 const createDefaultChatHandlers = memoizeOne__default['default']((chatClient, chatThreadClient) => {
     let messageIterator = undefined;
     return {
-        onSendMessage: (content) => __awaiter$g(void 0, void 0, void 0, function* () {
+        onSendMessage: (content) => __awaiter$k(void 0, void 0, void 0, function* () {
             const sendMessageRequest = {
                 content,
                 senderDisplayName: chatClient.getState().displayName
             };
             yield chatThreadClient.sendMessage(sendMessageRequest);
         }),
-        onUpdateMessage: (messageId, content) => __awaiter$g(void 0, void 0, void 0, function* () {
+        onUpdateMessage: (messageId, content) => __awaiter$k(void 0, void 0, void 0, function* () {
             yield chatThreadClient.updateMessage(messageId, { content });
         }),
-        onDeleteMessage: (messageId) => __awaiter$g(void 0, void 0, void 0, function* () {
+        onDeleteMessage: (messageId) => __awaiter$k(void 0, void 0, void 0, function* () {
             yield chatThreadClient.deleteMessage(messageId);
         }),
         // This handler is designed for chatThread to consume
-        onMessageSeen: (chatMessageId) => __awaiter$g(void 0, void 0, void 0, function* () {
+        onMessageSeen: (chatMessageId) => __awaiter$k(void 0, void 0, void 0, function* () {
             yield chatThreadClient.sendReadReceipt({ chatMessageId });
         }),
-        onTyping: () => __awaiter$g(void 0, void 0, void 0, function* () {
+        onTyping: () => __awaiter$k(void 0, void 0, void 0, function* () {
             yield chatThreadClient.sendTypingNotification();
         }),
-        onRemoveParticipant: (userId) => __awaiter$g(void 0, void 0, void 0, function* () {
+        onRemoveParticipant: (userId) => __awaiter$k(void 0, void 0, void 0, function* () {
             yield chatThreadClient.removeParticipant(fromFlatCommunicationIdentifier(userId));
         }),
-        updateThreadTopicName: (topicName) => __awaiter$g(void 0, void 0, void 0, function* () {
+        updateThreadTopicName: (topicName) => __awaiter$k(void 0, void 0, void 0, function* () {
             yield chatThreadClient.updateTopic(topicName);
         }),
-        onLoadPreviousChatMessages: (messagesToLoad) => __awaiter$g(void 0, void 0, void 0, function* () {
+        onLoadPreviousChatMessages: (messagesToLoad) => __awaiter$k(void 0, void 0, void 0, function* () {
             var _a;
             if (messageIterator === undefined) {
                 // Lazy definition so that errors in the method call are reported correctly.
                 // Also allows recovery via retries in case of transient errors.
-                messageIterator = chatThreadClient.listMessages();
+                messageIterator = chatThreadClient.listMessages({ maxPageSize: 50 });
             }
             let remainingMessagesToGet = messagesToLoad;
             let isAllChatMessagesLoaded = false;
@@ -5758,7 +5762,7 @@ const findSelector = (component) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$f = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$j = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -5807,10 +5811,10 @@ class ProxyDeviceManager {
         this.selectCamera = (videoDeviceInfo) => {
             this._context.setDeviceManagerSelectedCamera(videoDeviceInfo);
         };
-        this.videoDevicesUpdated = () => __awaiter$f(this, void 0, void 0, function* () {
+        this.videoDevicesUpdated = () => __awaiter$j(this, void 0, void 0, function* () {
             this._context.setDeviceManagerCameras(dedupeById(yield this._deviceManager.getCameras()));
         });
-        this.audioDevicesUpdated = () => __awaiter$f(this, void 0, void 0, function* () {
+        this.audioDevicesUpdated = () => __awaiter$j(this, void 0, void 0, function* () {
             this._context.setDeviceManagerMicrophones(dedupeById(yield this._deviceManager.getMicrophones()));
             this._context.setDeviceManagerSpeakers(dedupeById(yield this._deviceManager.getSpeakers()));
         });
@@ -5933,7 +5937,7 @@ class CallError extends Error {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$e = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$i = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -6422,7 +6426,7 @@ class CallContext$1 {
      * @throws CallError. Exceptions thrown from `f` are tagged with the failed `target.
      */
     withAsyncErrorTeedToState(action, target) {
-        return (...args) => __awaiter$e(this, void 0, void 0, function* () {
+        return (...args) => __awaiter$i(this, void 0, void 0, function* () {
             try {
                 return yield action(...args);
             }
@@ -6485,7 +6489,7 @@ const findOldestCallEnded = (calls) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$d = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$h = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -6505,42 +6509,42 @@ class ProxyCall {
         switch (prop) {
             case 'mute': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$d(this, void 0, void 0, function* () {
+                    return __awaiter$h(this, void 0, void 0, function* () {
                         return yield target.mute(...args);
                     });
                 }, 'Call.mute');
             }
             case 'unmute': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$d(this, void 0, void 0, function* () {
+                    return __awaiter$h(this, void 0, void 0, function* () {
                         return yield target.unmute(...args);
                     });
                 }, 'Call.unmute');
             }
             case 'startVideo': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$d(this, void 0, void 0, function* () {
+                    return __awaiter$h(this, void 0, void 0, function* () {
                         return yield target.startVideo(...args);
                     });
                 }, 'Call.startVideo');
             }
             case 'stopVideo': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$d(this, void 0, void 0, function* () {
+                    return __awaiter$h(this, void 0, void 0, function* () {
                         return yield target.stopVideo(...args);
                     });
                 }, 'Call.stopVideo');
             }
             case 'startScreenSharing': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$d(this, void 0, void 0, function* () {
+                    return __awaiter$h(this, void 0, void 0, function* () {
                         return yield target.startScreenSharing(...args);
                     });
                 }, 'Call.startScreenSharing');
             }
             case 'stopScreenSharing': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$d(this, void 0, void 0, function* () {
+                    return __awaiter$h(this, void 0, void 0, function* () {
                         return yield target.stopScreenSharing(...args);
                     });
                 }, 'Call.stopScreenSharing');
@@ -6738,7 +6742,7 @@ class RemoteVideoStreamSubscriber {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$c = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$g = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -6748,7 +6752,7 @@ var __awaiter$c = (window && window.__awaiter) || function (thisArg, _arguments,
     });
 };
 function createViewRemoteVideo(context, internalContext, callId, participantId, stream, options) {
-    return __awaiter$c(this, void 0, void 0, function* () {
+    return __awaiter$g(this, void 0, void 0, function* () {
         // Render RemoteVideoStream that is part of a Call
         const streamId = stream.id;
         let participantKey;
@@ -6768,7 +6772,8 @@ function createViewRemoteVideo(context, internalContext, callId, participantId,
             return;
         }
         if (renderInfo.status === 'Rendering') {
-            console.warn('RemoteVideoStream rendering is already in progress');
+            // Do not log to console here as this is a very common situation due to UI rerenders while
+            // the video rendering is in progress.
             return;
         }
         if (renderInfo.status === 'Stopping') {
@@ -6808,7 +6813,7 @@ function createViewRemoteVideo(context, internalContext, callId, participantId,
     });
 }
 function createViewLocalVideo(context, internalContext, callId, options) {
-    return __awaiter$c(this, void 0, void 0, function* () {
+    return __awaiter$g(this, void 0, void 0, function* () {
         // Render LocalVideoStream that is part of a Call
         const renderInfo = internalContext.getLocalRenderInfo(callId);
         if (!renderInfo) {
@@ -6820,7 +6825,8 @@ function createViewLocalVideo(context, internalContext, callId, options) {
             return;
         }
         if (renderInfo.status === 'Rendering') {
-            console.warn('LocalVideoStream rendering is already in progress');
+            // Do not log to console here as this is a very common situation due to UI rerenders while
+            // the video rendering is in progress.
             return;
         }
         if (renderInfo.status === 'Stopping') {
@@ -6862,14 +6868,15 @@ function createViewLocalVideo(context, internalContext, callId, options) {
     });
 }
 function createViewUnparentedVideo(context, internalContext, stream, options) {
-    return __awaiter$c(this, void 0, void 0, function* () {
+    return __awaiter$g(this, void 0, void 0, function* () {
         const renderInfo = internalContext.getUnparentedRenderInfo(stream);
         if (renderInfo && renderInfo.status === 'Rendered') {
             console.warn('Unparented LocalVideoStream is already rendered');
             return;
         }
         if (renderInfo && renderInfo.status === 'Rendering') {
-            console.warn('Unparented LocalVideoStream rendering is already in progress');
+            // Do not log to console here as this is a very common situation due to UI rerenders while
+            // the video rendering is in progress.
             return;
         }
         if (renderInfo && renderInfo.status === 'Stopping') {
@@ -7683,7 +7690,7 @@ class InternalCallContext {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$b = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$f = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -7705,7 +7712,7 @@ class ProxyCallClient {
     get(target, prop) {
         switch (prop) {
             case 'createCallAgent': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$b(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$f(this, void 0, void 0, function* () {
                     // createCallAgent will throw an exception if the previous callAgent was not disposed. If the previous
                     // callAgent was disposed then it would have unsubscribed to events so we can just create a new declarative
                     // callAgent if the createCallAgent succeeds.
@@ -7716,7 +7723,7 @@ class ProxyCallClient {
                 }), 'CallClient.createCallAgent');
             }
             case 'getDeviceManager': {
-                return this._context.withAsyncErrorTeedToState(() => __awaiter$b(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState(() => __awaiter$f(this, void 0, void 0, function* () {
                     // As of writing, the SDK always returns the same instance of DeviceManager so we keep a reference of
                     // DeviceManager and if it does not change we return the cached DeclarativeDeviceManager. If it does not we'll
                     // throw an error that indicate we need to fix this issue as our implementation has diverged from the SDK.
@@ -7831,7 +7838,7 @@ const Constants = {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$a = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$e = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -8108,7 +8115,7 @@ class ChatContext$1 {
      * @throws ChatError. Exceptions thrown from `f` are tagged with the failed `target.
      */
     withAsyncErrorTeedToState(f, target) {
-        return (...args) => __awaiter$a(this, void 0, void 0, function* () {
+        return (...args) => __awaiter$e(this, void 0, void 0, function* () {
             try {
                 return yield f(...args);
             }
@@ -8211,7 +8218,7 @@ const convertChatMessage = (message, status = 'delivered', clientMessageId) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$9 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$d = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -8294,7 +8301,7 @@ class EventSubscriber {
             this.fetchLastParticipantMessage(event.threadId, 'participantAdded');
         };
         // This is a hot fix that no participant message is received for onChatMessageReceived event, which should be handled by JS SDK
-        this.fetchLastParticipantMessage = (threadId, actionType) => __awaiter$9(this, void 0, void 0, function* () {
+        this.fetchLastParticipantMessage = (threadId, actionType) => __awaiter$d(this, void 0, void 0, function* () {
             var e_1, _a;
             try {
                 for (var _b = __asyncValues$1(this.chatClient
@@ -8380,7 +8387,7 @@ class EventSubscriber {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$8 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$c = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -8402,7 +8409,7 @@ const createDecoratedIterator = (iteratorCreator, context, decorateFn) => {
         const threadsIterator = iteratorCreator(...args);
         return {
             next() {
-                return __awaiter$8(this, void 0, void 0, function* () {
+                return __awaiter$c(this, void 0, void 0, function* () {
                     const result = yield threadsIterator.next();
                     if (!result.done && result.value) {
                         decorateFn(result.value, context);
@@ -8417,7 +8424,7 @@ const createDecoratedIterator = (iteratorCreator, context, decorateFn) => {
                 const pages = threadsIterator.byPage(settings);
                 return {
                     next() {
-                        return __awaiter$8(this, void 0, void 0, function* () {
+                        return __awaiter$c(this, void 0, void 0, function* () {
                             const result = yield pages.next();
                             const page = result.value;
                             if (!result.done && result.value) {
@@ -8501,7 +8508,7 @@ const createDecoratedListParticipants = (chatThreadClient, context) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$7 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$b = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -8520,14 +8527,14 @@ class ProxyChatThreadClient {
                 return createDecoratedListMessages(chatThreadClient, this._context);
             }
             case 'getMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$7(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$b(this, void 0, void 0, function* () {
                     const message = yield chatThreadClient.getMessage(...args);
                     this._context.setChatMessage(chatThreadClient.threadId, convertChatMessage(message));
                     return message;
                 }), 'ChatThreadClient.getMessage');
             }
             case 'sendMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$7(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$b(this, void 0, void 0, function* () {
                     // Retry logic?
                     const { content } = args[0];
                     const clientMessageId = nanoid.nanoid(); // Generate a local short uuid for message
@@ -8565,7 +8572,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.sendMessage');
             }
             case 'addParticipants': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$7(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$b(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.addParticipants(...args);
                     const [addRequest] = args;
                     const participantsToAdd = addRequest.participants;
@@ -8574,7 +8581,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.addParticipants');
             }
             case 'deleteMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$7(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$b(this, void 0, void 0, function* () {
                     // DeleteMessage is able to either delete local one(for failed message) or synced message
                     const [messageId] = args;
                     if (this._context.deleteLocalMessage(chatThreadClient.threadId, messageId)) {
@@ -8592,7 +8599,7 @@ class ProxyChatThreadClient {
                 return createDecoratedListReadReceipts(chatThreadClient, this._context);
             }
             case 'removeParticipant': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$7(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$b(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.removeParticipant(...args);
                     const [removeIdentifier] = args;
                     this._context.deleteParticipant(chatThreadClient.threadId, communicationCommon.getIdentifierKind(removeIdentifier));
@@ -8600,7 +8607,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.removeParticipant');
             }
             case 'updateMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$7(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$b(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.updateMessage(...args);
                     const [messageId, updateOption] = args;
                     this._context.updateChatMessageContent(chatThreadClient.threadId, messageId, updateOption === null || updateOption === void 0 ? void 0 : updateOption.content);
@@ -8608,7 +8615,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.updateMessage');
             }
             case 'updateTopic': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$7(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$b(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.updateTopic(...args);
                     const [topic] = args;
                     this._context.updateThreadTopic(chatThreadClient.threadId, topic);
@@ -8616,7 +8623,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.updateTopic');
             }
             case 'getProperties': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$7(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$b(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.getProperties(...args);
                     this._context.updateThread(chatThreadClient.threadId, result);
                     return result;
@@ -8653,7 +8660,7 @@ const createDecoratedListThreads = (chatClient, context) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$6 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$a = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -8672,7 +8679,7 @@ const proxyChatClient = {
         switch (prop) {
             case 'createChatThread': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$6(this, void 0, void 0, function* () {
+                    return __awaiter$a(this, void 0, void 0, function* () {
                         const result = yield chatClient.createChatThread(...args);
                         const thread = result.chatThread;
                         if (thread) {
@@ -8685,7 +8692,7 @@ const proxyChatClient = {
             }
             case 'deleteChatThread': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$6(this, void 0, void 0, function* () {
+                    return __awaiter$a(this, void 0, void 0, function* () {
                         const result = yield chatClient.deleteChatThread(...args);
                         context.deleteThread(args[0]);
                         return result;
@@ -8705,7 +8712,7 @@ const proxyChatClient = {
             }
             case 'startRealtimeNotifications': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$6(this, void 0, void 0, function* () {
+                    return __awaiter$a(this, void 0, void 0, function* () {
                         const ret = yield chatClient.startRealtimeNotifications(...args);
                         if (!receiver.eventSubscriber) {
                             receiver.eventSubscriber = new EventSubscriber(chatClient, context);
@@ -8716,7 +8723,7 @@ const proxyChatClient = {
             }
             case 'stopRealtimeNotifications': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$6(this, void 0, void 0, function* () {
+                    return __awaiter$a(this, void 0, void 0, function* () {
                         const ret = yield chatClient.stopRealtimeNotifications(...args);
                         if (receiver.eventSubscriber) {
                             receiver.eventSubscriber.unsubscribe();
@@ -8780,7 +8787,7 @@ const createStatefulChatClientWithDeps = (chatClient, args, options) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$5 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$9 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -8885,7 +8892,7 @@ class AzureCommunicationChatAdapter {
     }
     fetchInitialData() {
         var e_1, _a;
-        return __awaiter$5(this, void 0, void 0, function* () {
+        return __awaiter$9(this, void 0, void 0, function* () {
             try {
                 yield this.chatThreadClient.getProperties();
             }
@@ -8927,55 +8934,55 @@ class AzureCommunicationChatAdapter {
         this.context.offStateChange(handler);
     }
     sendMessage(content) {
-        return __awaiter$5(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$5(this, void 0, void 0, function* () {
+        return __awaiter$9(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$9(this, void 0, void 0, function* () {
                 yield this.handlers.onSendMessage(content);
             }));
         });
     }
     sendReadReceipt(chatMessageId) {
-        return __awaiter$5(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$5(this, void 0, void 0, function* () {
+        return __awaiter$9(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$9(this, void 0, void 0, function* () {
                 yield this.handlers.onMessageSeen(chatMessageId);
             }));
         });
     }
     sendTypingIndicator() {
-        return __awaiter$5(this, void 0, void 0, function* () {
+        return __awaiter$9(this, void 0, void 0, function* () {
             yield this.handlers.onTyping();
         });
     }
     removeParticipant(userId) {
-        return __awaiter$5(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$5(this, void 0, void 0, function* () {
+        return __awaiter$9(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$9(this, void 0, void 0, function* () {
                 yield this.handlers.onRemoveParticipant(userId);
             }));
         });
     }
     setTopic(topicName) {
-        return __awaiter$5(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$5(this, void 0, void 0, function* () {
+        return __awaiter$9(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$9(this, void 0, void 0, function* () {
                 yield this.handlers.updateThreadTopicName(topicName);
             }));
         });
     }
     loadPreviousChatMessages(messagesToLoad) {
-        return __awaiter$5(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$5(this, void 0, void 0, function* () {
+        return __awaiter$9(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$9(this, void 0, void 0, function* () {
                 return yield this.handlers.onLoadPreviousChatMessages(messagesToLoad);
             }));
         });
     }
     updateMessage(messageId, content) {
-        return __awaiter$5(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$5(this, void 0, void 0, function* () {
+        return __awaiter$9(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$9(this, void 0, void 0, function* () {
                 return yield this.handlers.onUpdateMessage(messageId, content);
             }));
         });
     }
     deleteMessage(messageId) {
-        return __awaiter$5(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$5(this, void 0, void 0, function* () {
+        return __awaiter$9(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$9(this, void 0, void 0, function* () {
                 return yield this.handlers.onDeleteMessage(messageId);
             }));
         });
@@ -9028,7 +9035,7 @@ class AzureCommunicationChatAdapter {
         this.emitter.off(event, listener);
     }
     asyncTeeErrorToEventEmitter(f) {
-        return __awaiter$5(this, void 0, void 0, function* () {
+        return __awaiter$9(this, void 0, void 0, function* () {
             try {
                 return yield f();
             }
@@ -9070,7 +9077,7 @@ const convertEventType = (type) => {
  *
  * @public
  */
-const createAzureCommunicationChatAdapter = ({ endpoint: endpointUrl, userId, displayName, credential, threadId }) => __awaiter$5(void 0, void 0, void 0, function* () {
+const createAzureCommunicationChatAdapter = ({ endpoint: endpointUrl, userId, displayName, credential, threadId }) => __awaiter$9(void 0, void 0, void 0, function* () {
     const chatClient = createStatefulChatClient({
         userId,
         displayName,
@@ -9091,7 +9098,7 @@ const createAzureCommunicationChatAdapter = ({ endpoint: endpointUrl, userId, di
  *
  * @public
  */
-const createAzureCommunicationChatAdapterFromClient = (chatClient, chatThreadClient) => __awaiter$5(void 0, void 0, void 0, function* () {
+const createAzureCommunicationChatAdapterFromClient = (chatClient, chatThreadClient) => __awaiter$9(void 0, void 0, void 0, function* () {
     return new AzureCommunicationChatAdapter(chatClient, chatThreadClient);
 });
 const isChatError = (e) => {
@@ -9431,7 +9438,7 @@ const topicNameLabelStyle = react.mergeStyles({
 /**
  * @private
  */
-react.mergeStyles({
+const participantListWrapper = react.mergeStyles({
     boxShadow: '0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13)',
     width: '20rem',
     // max width at 50% of view so the People Pane is not squeezing the Message Pane to almost nothing when on small screen or high zoom in
@@ -9445,20 +9452,20 @@ const participantListContainerPadding = { childrenGap: '0.5rem' };
 /**
  * @private
  */
-react.mergeStyles({
+const listHeader = react.mergeStyles({
     fontSize: '1rem',
     margin: '1rem'
 });
 /**
  * @private
  */
-react.mergeStyles({
+const participantListStack = react.mergeStyles({
     height: '100%'
 });
 /**
  * @private
  */
-react.mergeStyles({
+const participantListStyle = react.mergeStyles({
     height: '100%',
     overflow: 'auto'
 });
@@ -9481,7 +9488,7 @@ const typingIndicatorChatCompositeStyles = {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$4 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$8 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -9502,7 +9509,7 @@ const AvatarPersona = (props) => {
     const { userId, dataProvider } = props;
     const [data, setData] = React__default['default'].useState();
     React.useEffect(() => {
-        (() => __awaiter$4(void 0, void 0, void 0, function* () {
+        (() => __awaiter$8(void 0, void 0, void 0, function* () {
             if (dataProvider && userId) {
                 const data = yield dataProvider(userId);
                 setData(data);
@@ -9640,16 +9647,17 @@ const usePropsFor$2 = (component) => {
  * @private
  */
 const ChatScreen = (props) => {
-    const { onFetchAvatarPersonaData, onRenderMessage, onRenderTypingIndicator,
-    // onFetchParticipantMenuItems,  // Removed for GA release
-    options, styles } = props;
+    const { onFetchAvatarPersonaData, onRenderMessage, onRenderTypingIndicator, onFetchParticipantMenuItems, options, styles } = props;
     const defaultNumberOfChatMessagesToReload = 5;
     const sendBoxParentStyle = react.mergeStyles({ width: '100%' });
     const adapter = useAdapter$1();
     React.useEffect(() => {
         adapter.fetchInitialData();
     }, [adapter]);
+    const locale = useLocale();
+    const chatListHeader = locale.strings.chat.chatListHeader;
     const messageThreadProps = usePropsFor$2(MessageThread);
+    const participantListProps = usePropsFor$2(ParticipantList);
     const sendBoxProps = usePropsFor$2(SendBox);
     const typingIndicatorProps = usePropsFor$2(TypingIndicator);
     const headerProps = useAdaptedSelector$1(getHeaderProps);
@@ -9668,7 +9676,12 @@ const ChatScreen = (props) => {
                 React__default['default'].createElement(MessageThread, Object.assign({}, messageThreadProps, { onRenderAvatar: onRenderAvatarCallback, onRenderMessage: onRenderMessage, numberOfChatMessagesToReload: defaultNumberOfChatMessagesToReload, styles: messageThreadStyles })),
                 React__default['default'].createElement(react.Stack.Item, { align: "center", className: sendBoxParentStyle },
                     React__default['default'].createElement("div", { style: { paddingLeft: '0.5rem', paddingRight: '0.5rem' } }, onRenderTypingIndicator ? (onRenderTypingIndicator(typingIndicatorProps.typingUsers)) : (React__default['default'].createElement(TypingIndicator, Object.assign({}, typingIndicatorProps, { styles: typingIndicatorStyles })))),
-                    React__default['default'].createElement(SendBox, Object.assign({}, sendBoxProps, { styles: sendBoxStyles })))))));
+                    React__default['default'].createElement(SendBox, Object.assign({}, sendBoxProps, { styles: sendBoxStyles })))),
+            (options === null || options === void 0 ? void 0 : options.participantPane) === true && (React__default['default'].createElement(react.Stack, { className: participantListWrapper },
+                React__default['default'].createElement(react.Stack, { className: participantListStack },
+                    React__default['default'].createElement(react.Stack.Item, { className: listHeader }, chatListHeader),
+                    React__default['default'].createElement(react.FocusZone, { className: participantListStyle },
+                        React__default['default'].createElement(ParticipantList, Object.assign({}, participantListProps, { onRenderAvatar: (userId, options) => (React__default['default'].createElement(AvatarPersona, Object.assign({ "data-ui-id": "chat-composite-participant-custom-avatar", userId: userId }, options, { dataProvider: onFetchAvatarPersonaData }))), onFetchParticipantMenuItems: onFetchParticipantMenuItems })))))))));
 };
 // Copyright (c) Microsoft Corporation.
@@ -9893,7 +9906,7 @@ const getCallCompositePage = (call, previousCall) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$3 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$7 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -9912,59 +9925,59 @@ _component) => {
     return createCompositeHandlers(useAdapter());
 };
 const createCompositeHandlers = memoizeOne__default['default']((adapter) => ({
-    onCreateLocalStreamView: (options) => __awaiter$3(void 0, void 0, void 0, function* () {
+    onCreateLocalStreamView: (options) => __awaiter$7(void 0, void 0, void 0, function* () {
         yield adapter.createStreamView(undefined, options);
     }),
-    onCreateRemoteStreamView: (userId, options) => __awaiter$3(void 0, void 0, void 0, function* () {
+    onCreateRemoteStreamView: (userId, options) => __awaiter$7(void 0, void 0, void 0, function* () {
         yield adapter.createStreamView(userId, options);
     }),
-    onHangUp: () => __awaiter$3(void 0, void 0, void 0, function* () {
+    onHangUp: () => __awaiter$7(void 0, void 0, void 0, function* () {
         yield adapter.leaveCall();
     }),
-    onRemoveParticipant: (userId) => __awaiter$3(void 0, void 0, void 0, function* () {
+    onRemoveParticipant: (userId) => __awaiter$7(void 0, void 0, void 0, function* () {
         yield adapter.removeParticipant(userId);
     }),
-    onSelectCamera: (deviceInfo, options) => __awaiter$3(void 0, void 0, void 0, function* () {
+    onSelectCamera: (deviceInfo, options) => __awaiter$7(void 0, void 0, void 0, function* () {
         yield adapter.setCamera(deviceInfo, options);
     }),
-    onSelectMicrophone: (deviceInfo) => __awaiter$3(void 0, void 0, void 0, function* () {
+    onSelectMicrophone: (deviceInfo) => __awaiter$7(void 0, void 0, void 0, function* () {
         yield adapter.setMicrophone(deviceInfo);
     }),
-    onSelectSpeaker: (deviceInfo) => __awaiter$3(void 0, void 0, void 0, function* () {
+    onSelectSpeaker: (deviceInfo) => __awaiter$7(void 0, void 0, void 0, function* () {
         yield adapter.setSpeaker(deviceInfo);
     }),
     onStartCall: (participants) => {
         const rawIds = participants.map((participant) => toFlatCommunicationIdentifier(participant));
         return adapter.startCall(rawIds);
     },
-    onStartScreenShare: () => __awaiter$3(void 0, void 0, void 0, function* () {
+    onStartScreenShare: () => __awaiter$7(void 0, void 0, void 0, function* () {
         yield adapter.startScreenShare();
     }),
-    onStopScreenShare: () => __awaiter$3(void 0, void 0, void 0, function* () {
+    onStopScreenShare: () => __awaiter$7(void 0, void 0, void 0, function* () {
         yield adapter.stopScreenShare();
     }),
-    onToggleCamera: (options) => __awaiter$3(void 0, void 0, void 0, function* () {
+    onToggleCamera: (options) => __awaiter$7(void 0, void 0, void 0, function* () {
         isCameraOn(adapter.getState()) ? yield adapter.stopCamera() : yield adapter.startCamera(options);
     }),
-    onToggleMicrophone: () => __awaiter$3(void 0, void 0, void 0, function* () {
+    onToggleMicrophone: () => __awaiter$7(void 0, void 0, void 0, function* () {
         var _a;
         return ((_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.isMuted) ? yield adapter.unmute() : yield adapter.mute();
     }),
-    onToggleScreenShare: () => __awaiter$3(void 0, void 0, void 0, function* () {
+    onToggleScreenShare: () => __awaiter$7(void 0, void 0, void 0, function* () {
         var _b;
         return ((_b = adapter.getState().call) === null || _b === void 0 ? void 0 : _b.isScreenSharingOn)
             ? yield adapter.stopScreenShare()
             : yield adapter.startScreenShare();
     }),
-    onStartLocalVideo: () => __awaiter$3(void 0, void 0, void 0, function* () {
+    onStartLocalVideo: () => __awaiter$7(void 0, void 0, void 0, function* () {
         if (adapter.getState().call) {
             return adapter.startCamera();
         }
     }),
-    onDisposeLocalStreamView: () => __awaiter$3(void 0, void 0, void 0, function* () {
+    onDisposeLocalStreamView: () => __awaiter$7(void 0, void 0, void 0, function* () {
         return adapter.disposeStreamView();
     }),
-    onDisposeRemoteStreamView: (userId) => __awaiter$3(void 0, void 0, void 0, function* () {
+    onDisposeRemoteStreamView: (userId) => __awaiter$7(void 0, void 0, void 0, function* () {
         return adapter.disposeStreamView(userId);
     })
 }));
@@ -10034,6 +10047,7 @@ const getIsRecordingActive = (state) => { var _a; return !!((_a = state.call) ==
 const getUserFacingDiagnostics = (state) => { var _a; return (_a = state.call) === null || _a === void 0 ? void 0 : _a.diagnostics; };
 // Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
 const MINIMUM_TOUCH_TARGET_HEIGHT_REM = 3;
 /** @private */
 const controlBarContainerStyles = {
@@ -10071,17 +10085,6 @@ const groupCallLeaveButtonCompressedStyle = {
         flexFlow: 'row'
     }
 };
-/**
- * @private
- */
-const checkedButtonOverrideStyles = (theme, isChecked) => ({
-    rootChecked: {
-        background: theme.palette.themePrimary,
-        color: react.DefaultPalette.white,
-        ':focus::after': { outlineColor: `${react.DefaultPalette.white} !important` } // added !important to avoid override by FluentUI button styles
-    },
-    label: isChecked ? { color: react.DefaultPalette.white } : {}
-});
 /**
  * Styles that can be applied to ensure flyout items have the minimum touch target size.
  *
@@ -10170,14 +10173,12 @@ const CallControls = (props) => {
     const participantsButtonProps = usePropsFor$1(ParticipantsButton);
     const devicesButtonProps = usePropsFor$1(DevicesButton);
     const hangUpButtonProps = usePropsFor$1(EndCallButton);
-    const theme = useTheme();
-    const screenShareButtonStyles = React.useMemo(() => mergeButtonBaseStyles(checkedButtonOverrideStyles(theme, screenShareButtonProps.checked)), [screenShareButtonProps.checked, theme.palette.themePrimary]);
     const participantsButtonStyles = React.useMemo(() => mergeButtonBaseStyles(props.increaseFlyoutItemSize ? participantButtonWithIncreasedTouchTargets : {}), [props.increaseFlyoutItemSize]);
     const devicesButtonStyles = React.useMemo(() => mergeButtonBaseStyles(props.increaseFlyoutItemSize ? devicesButtonWithIncreasedTouchTargets : {}), [props.increaseFlyoutItemSize]);
     const compactMode = (options === null || options === void 0 ? void 0 : options.displayType) === 'compact';
     const microphoneButton = (options === null || options === void 0 ? void 0 : options.microphoneButton) !== false && (React__default['default'].createElement(MicrophoneButton, Object.assign({ "data-ui-id": "call-composite-microphone-button" }, microphoneButtonProps, { showLabel: !compactMode, styles: controlButtonBaseStyle }, microphoneButtonStrings)));
     const cameraButton = (options === null || options === void 0 ? void 0 : options.cameraButton) !== false && (React__default['default'].createElement(CameraButton, Object.assign({ "data-ui-id": "call-composite-camera-button" }, cameraButtonProps, { showLabel: !compactMode, styles: controlButtonBaseStyle })));
-    const screenShareButton = (options === null || options === void 0 ? void 0 : options.screenShareButton) !== false && (React__default['default'].createElement(ScreenShareButton, Object.assign({ "data-ui-id": "call-composite-screenshare-button" }, screenShareButtonProps, { styles: screenShareButtonStyles, showLabel: !compactMode, disabled: (options === null || options === void 0 ? void 0 : options.screenShareButton) !== true && ((_a = options === null || options === void 0 ? void 0 : options.screenShareButton) === null || _a === void 0 ? void 0 : _a.disabled) })));
+    const screenShareButton = (options === null || options === void 0 ? void 0 : options.screenShareButton) !== false && (React__default['default'].createElement(ScreenShareButton, Object.assign({ "data-ui-id": "call-composite-screenshare-button" }, screenShareButtonProps, { showLabel: !compactMode, disabled: (options === null || options === void 0 ? void 0 : options.screenShareButton) !== true && ((_a = options === null || options === void 0 ? void 0 : options.screenShareButton) === null || _a === void 0 ? void 0 : _a.disabled) })));
     const participantButton = (options === null || options === void 0 ? void 0 : options.participantsButton) !== false && (React__default['default'].createElement(ParticipantsButton, Object.assign({ "data-ui-id": "call-composite-participants-button" }, participantsButtonProps, { showLabel: !compactMode, callInvitationURL: callInvitationURL, onFetchParticipantMenuItems: onFetchParticipantMenuItems, disabled: (options === null || options === void 0 ? void 0 : options.participantsButton) !== true && ((_b = options === null || options === void 0 ? void 0 : options.participantsButton) === null || _b === void 0 ? void 0 : _b.disabled), styles: participantsButtonStyles })));
     const devicesButton = (options === null || options === void 0 ? void 0 : options.devicesButton) !== false && (React__default['default'].createElement(DevicesButton
     /* By setting `persistMenu?` to true, we prevent options menu from getting hidden every time a participant joins or leaves. */
@@ -10894,20 +10895,23 @@ const LocalDeviceSettings = (props) => {
                 : 'deniedOrUnknown', onChange: (event, option, index) => {
                 props.onSelectCamera(props.cameras[index !== null && index !== void 0 ? index : 0], localVideoViewOptions);
             }, onRenderTitle: (props) => onRenderTitle('Camera', props) }),
-        React__default['default'].createElement(react.Dropdown, { label: soundLabel, placeholder: defaultPlaceHolder, styles: dropDownStyles(theme), disabled: !props.microphonePermissionGranted, errorMessage: props.microphonePermissionGranted === undefined || props.microphonePermissionGranted
-                ? undefined
-                : locale.strings.call.microphonePermissionDenied, options: props.microphonePermissionGranted
-                ? getDropDownList(props.microphones)
-                : [{ key: 'deniedOrUnknown', text: '' }], defaultSelectedKey: props.microphonePermissionGranted
-                ? props.selectedMicrophone
-                    ? props.selectedMicrophone.id
-                    : defaultDeviceId(props.microphones)
-                : 'deniedOrUnknown', onChange: (event, option, index) => {
-                props.onSelectMicrophone(props.microphones[index !== null && index !== void 0 ? index : 0]);
-            }, onRenderTitle: (props) => onRenderTitle('Microphone', props) }),
-        React__default['default'].createElement(react.Dropdown, { placeholder: defaultPlaceHolder, styles: dropDownStyles(theme), disabled: props.speakers.length === 0, options: getDropDownList(props.speakers), defaultSelectedKey: props.selectedSpeaker ? props.selectedSpeaker.id : defaultDeviceId(props.speakers), onChange: (event, option, index) => {
-                props.onSelectSpeaker(props.speakers[index !== null && index !== void 0 ? index : 0]);
-            }, onRenderTitle: (props) => onRenderTitle('Speaker', props) })));
+        React__default['default'].createElement(react.Stack, null,
+            React__default['default'].createElement(react.Label, { id: 'call-composite-local-sound-settings-label', className: react.mergeStyles(dropDownStyles(theme).label), disabled: !props.microphonePermissionGranted }, soundLabel),
+            React__default['default'].createElement(react.Stack, { "data-ui-id": "call-composite-sound-settings", tokens: mainStackTokens },
+                React__default['default'].createElement(react.Dropdown, { "aria-labelledby": 'call-composite-local-sound-settings-label', placeholder: defaultPlaceHolder, styles: dropDownStyles(theme), disabled: !props.microphonePermissionGranted, errorMessage: props.microphonePermissionGranted === undefined || props.microphonePermissionGranted
+                        ? undefined
+                        : locale.strings.call.microphonePermissionDenied, options: props.microphonePermissionGranted
+                        ? getDropDownList(props.microphones)
+                        : [{ key: 'deniedOrUnknown', text: '' }], defaultSelectedKey: props.microphonePermissionGranted
+                        ? props.selectedMicrophone
+                            ? props.selectedMicrophone.id
+                            : defaultDeviceId(props.microphones)
+                        : 'deniedOrUnknown', onChange: (event, option, index) => {
+                        props.onSelectMicrophone(props.microphones[index !== null && index !== void 0 ? index : 0]);
+                    }, onRenderTitle: (props) => onRenderTitle('Microphone', props) }),
+                React__default['default'].createElement(react.Dropdown, { "aria-labelledby": 'call-composite-local-sound-settings-label', placeholder: defaultPlaceHolder, styles: dropDownStyles(theme), disabled: props.speakers.length === 0, options: getDropDownList(props.speakers), defaultSelectedKey: props.selectedSpeaker ? props.selectedSpeaker.id : defaultDeviceId(props.speakers), onChange: (event, option, index) => {
+                        props.onSelectSpeaker(props.speakers[index !== null && index !== void 0 ? index : 0]);
+                    }, onRenderTitle: (props) => onRenderTitle('Speaker', props) })))));
 };
 const defaultDeviceId = (devices) => {
     if (devices.length === 0) {
@@ -11010,7 +11014,7 @@ const localPreviewTileStyle = {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$2 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$6 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -11030,7 +11034,7 @@ const LocalPreview = (props) => {
     const { audio: microphonePermissionGranted, video: cameraPermissionGranted } = useSelector$1(devicePermissionSelector);
     const isLocalMicrophoneEnabled = useSelector$1(getLocalMicrophoneEnabled);
     const adapter = useAdapter();
-    const onToggleMic = React.useCallback(() => __awaiter$2(void 0, void 0, void 0, function* () {
+    const onToggleMic = React.useCallback(() => __awaiter$6(void 0, void 0, void 0, function* () {
         isLocalMicrophoneEnabled ? adapter.mute() : adapter.unmute();
     }), [adapter, isLocalMicrophoneEnabled]);
     const theme = useTheme();
@@ -11354,7 +11358,7 @@ const mainScreenContainerStyleMobile = react.mergeStyles(Object.assign(Object.as
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$1 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$5 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -11401,7 +11405,7 @@ const MainScreen = (props) => {
 const CallComposite = (props) => {
     const { adapter, callInvitationUrl, onFetchAvatarPersonaData, onFetchParticipantMenuItems, options, formFactor = 'desktop' } = props;
     React.useEffect(() => {
-        (() => __awaiter$1(void 0, void 0, void 0, function* () {
+        (() => __awaiter$5(void 0, void 0, void 0, function* () {
             yield adapter.askDevicePermission({ video: true, audio: true });
             adapter.queryCameras();
             adapter.queryMicrophones();
@@ -11492,7 +11496,7 @@ class DiagnosticsForwarder {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$4 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -11630,29 +11634,29 @@ class AzureCommunicationCallAdapter {
         this.callAgent.dispose();
     }
     queryCameras() {
-        return __awaiter(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter(this, void 0, void 0, function* () {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$4(this, void 0, void 0, function* () {
                 return this.deviceManager.getCameras();
             }));
         });
     }
     queryMicrophones() {
-        return __awaiter(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter(this, void 0, void 0, function* () {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$4(this, void 0, void 0, function* () {
                 return this.deviceManager.getMicrophones();
             }));
         });
     }
     querySpeakers() {
-        return __awaiter(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter(this, void 0, void 0, function* () {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$4(this, void 0, void 0, function* () {
                 return this.deviceManager.isSpeakerSelectionAvailable ? this.deviceManager.getSpeakers() : [];
             }));
         });
     }
     askDevicePermission(constrain) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter(this, void 0, void 0, function* () {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$4(this, void 0, void 0, function* () {
                 yield this.deviceManager.askDevicePermission(constrain);
             }));
         });
@@ -11688,7 +11692,7 @@ class AzureCommunicationCallAdapter {
         }
     }
     createStreamView(remoteUserId, options) {
-        return __awaiter(this, void 0, void 0, function* () {
+        return __awaiter$4(this, void 0, void 0, function* () {
             if (remoteUserId === undefined) {
                 yield this.handlers.onCreateLocalStreamView(options);
             }
@@ -11698,7 +11702,7 @@ class AzureCommunicationCallAdapter {
         });
     }
     disposeStreamView(remoteUserId) {
-        return __awaiter(this, void 0, void 0, function* () {
+        return __awaiter$4(this, void 0, void 0, function* () {
             if (remoteUserId === undefined) {
                 yield this.handlers.onDisposeLocalStreamView();
             }
@@ -11709,7 +11713,7 @@ class AzureCommunicationCallAdapter {
     }
     leaveCall() {
         var _a;
-        return __awaiter(this, void 0, void 0, function* () {
+        return __awaiter$4(this, void 0, void 0, function* () {
             const callId = (_a = this.call) === null || _a === void 0 ? void 0 : _a.id;
             yield this.handlers.onHangUp();
             this.unsubscribeCallEvents();
@@ -11724,29 +11728,29 @@ class AzureCommunicationCallAdapter {
         });
     }
     setCamera(device, options) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter(this, void 0, void 0, function* () {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$4(this, void 0, void 0, function* () {
                 yield this.handlers.onSelectCamera(device, options);
             }));
         });
     }
     setMicrophone(device) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter(this, void 0, void 0, function* () {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$4(this, void 0, void 0, function* () {
                 yield this.handlers.onSelectMicrophone(device);
             }));
         });
     }
     setSpeaker(device) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter(this, void 0, void 0, function* () {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$4(this, void 0, void 0, function* () {
                 yield this.handlers.onSelectSpeaker(device);
             }));
         });
     }
     startCamera(options) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter(this, void 0, void 0, function* () {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$4(this, void 0, void 0, function* () {
                 if (!isCameraOn(this.getState())) {
                     yield this.handlers.onToggleCamera(options);
                 }
@@ -11754,8 +11758,8 @@ class AzureCommunicationCallAdapter {
         });
     }
     stopCamera() {
-        return __awaiter(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter(this, void 0, void 0, function* () {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$4(this, void 0, void 0, function* () {
                 if (isCameraOn(this.getState())) {
                     yield this.handlers.onToggleCamera();
                 }
@@ -11763,8 +11767,8 @@ class AzureCommunicationCallAdapter {
         });
     }
     mute() {
-        return __awaiter(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter(this, void 0, void 0, function* () {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$4(this, void 0, void 0, function* () {
                 var _a, _b;
                 this.context.setIsLocalMicrophoneEnabled(false);
                 if (_isInCall((_a = this.call) === null || _a === void 0 ? void 0 : _a.state) && !((_b = this.call) === null || _b === void 0 ? void 0 : _b.isMuted)) {
@@ -11774,8 +11778,8 @@ class AzureCommunicationCallAdapter {
         });
     }
     unmute() {
-        return __awaiter(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter(this, void 0, void 0, function* () {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$4(this, void 0, void 0, function* () {
                 var _a, _b;
                 this.context.setIsLocalMicrophoneEnabled(true);
                 if (_isInCall((_a = this.call) === null || _a === void 0 ? void 0 : _a.state) && ((_b = this.call) === null || _b === void 0 ? void 0 : _b.isMuted)) {
@@ -11785,8 +11789,8 @@ class AzureCommunicationCallAdapter {
         });
     }
     startScreenShare() {
-        return __awaiter(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter(this, void 0, void 0, function* () {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$4(this, void 0, void 0, function* () {
                 var _a;
                 if (!((_a = this.call) === null || _a === void 0 ? void 0 : _a.isScreenSharingOn)) {
                     yield this.handlers.onToggleScreenShare();
@@ -11795,8 +11799,8 @@ class AzureCommunicationCallAdapter {
         });
     }
     stopScreenShare() {
-        return __awaiter(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter(this, void 0, void 0, function* () {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$4(this, void 0, void 0, function* () {
                 var _a;
                 if ((_a = this.call) === null || _a === void 0 ? void 0 : _a.isScreenSharingOn) {
                     yield this.handlers.onToggleScreenShare();
@@ -11815,7 +11819,7 @@ class AzureCommunicationCallAdapter {
         return this.handlers.onStartCall(idsToAdd);
     }
     removeParticipant(userId) {
-        return __awaiter(this, void 0, void 0, function* () {
+        return __awaiter$4(this, void 0, void 0, function* () {
             this.handlers.onRemoveParticipant(userId);
         });
     }
@@ -11890,7 +11894,7 @@ class AzureCommunicationCallAdapter {
         this.emitter.off(event, listener);
     }
     asyncTeeErrorToEventEmitter(f) {
-        return __awaiter(this, void 0, void 0, function* () {
+        return __awaiter$4(this, void 0, void 0, function* () {
             try {
                 return yield f();
             }
@@ -11910,7 +11914,7 @@ class AzureCommunicationCallAdapter {
  *
  * @public
  */
-const createAzureCommunicationCallAdapter = ({ userId, displayName, credential, locator }) => __awaiter(void 0, void 0, void 0, function* () {
+const createAzureCommunicationCallAdapter = ({ userId, displayName, credential, locator }) => __awaiter$4(void 0, void 0, void 0, function* () {
     const callClient = createStatefulCallClient({ userId });
     const callAgent = yield callClient.createCallAgent(credential, { displayName });
     const adapter = createAzureCommunicationCallAdapterFromClient(callClient, callAgent, locator);
@@ -11924,7 +11928,7 @@ const createAzureCommunicationCallAdapter = ({ userId, displayName, credential,
  *
  * @public
  */
-const createAzureCommunicationCallAdapterFromClient = (callClient, callAgent, locator) => __awaiter(void 0, void 0, void 0, function* () {
+const createAzureCommunicationCallAdapterFromClient = (callClient, callAgent, locator) => __awaiter$4(void 0, void 0, void 0, function* () {
     const deviceManager = (yield callClient.getDeviceManager());
     return new AzureCommunicationCallAdapter(callClient, locator, callAgent, deviceManager);
 });
@@ -11932,6 +11936,1018 @@ const isCallError = (e) => {
     return e['target'] !== undefined && e['innerError'] !== undefined;
 };
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * @private
+ */
+const sidePaneContainerStyles = {
+    root: {
+        height: '100%',
+        paddingTop: '0.5rem',
+        paddingBottom: '0.5rem',
+        width: '21.5rem'
+    }
+};
+/**
+ * @private
+ */
+const sidePaneContainerHiddenStyles = {
+    root: Object.assign(Object.assign({}, sidePaneContainerStyles), { display: 'none' })
+};
+/**
+ * @private
+ */
+const sidePaneContainerTokens = {
+    childrenGap: '0.5rem'
+};
+/**
+ * @private
+ */
+const sidePaneHeaderStyles = {
+    root: {
+        fontSize: '0.825rem',
+        lineHeight: '1.25rem',
+        padding: '0.25rem',
+        fontWeight: '600'
+    }
+};
+/**
+ * @private
+ */
+const paneBodyContainer = { root: { flexDirection: 'column', display: 'flex' } };
+/**
+ * @private
+ */
+const scrollableContainer = { root: { flexBasis: '0', flexGrow: '1', overflowY: 'auto' } };
+/**
+ * @private
+ */
+const scrollableContainerContents = { root: { flexGrow: '1', flexBasis: '0' } };
+/**
+ * @private
+ */
+const peopleSubheadingStyle = {
+    root: {
+        fontSize: '0.75rem'
+    }
+};
+/**
+ * @private
+ */
+const peoplePaneContainerTokens = {
+    childrenGap: '0.5rem'
+};
+var __awaiter$3 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+const SidePane = (props) => {
+    // We hide the side pane instead of not rendering the entire pane to persist certain elements
+    // between renders. An example of this is composing a chat message - a chat message that has been
+    // typed but not sent should not be lost if the side panel is closed and then reopened.
+    const sidePaneStyles = props.hidden ? sidePaneContainerHiddenStyles : sidePaneContainerStyles;
+    const theme = useTheme();
+    const sidePaneCloseButtonStyles = {
+        icon: { color: theme.palette.neutralSecondary },
+        iconHovered: { color: theme.palette.neutralSecondary },
+        iconPressed: { color: theme.palette.neutralSecondary }
+    };
+    return (React__default['default'].createElement(react.Stack.Item, { disableShrink: true, verticalFill: true, styles: sidePaneStyles, tokens: sidePaneContainerTokens },
+        React__default['default'].createElement(react.Stack, { verticalFill: true, "data-ui-id": props.dataUiId },
+            React__default['default'].createElement(react.Stack, { horizontal: true, horizontalAlign: "space-between", styles: sidePaneHeaderStyles },
+                React__default['default'].createElement(react.Stack.Item, null, props.headingText),
+                React__default['default'].createElement(react.CommandBarButton, { styles: sidePaneCloseButtonStyles, iconProps: { iconName: 'cancel' }, onClick: props.onClose })),
+            React__default['default'].createElement(react.Stack.Item, { verticalFill: true, grow: true, styles: paneBodyContainer },
+                React__default['default'].createElement(react.Stack, { horizontal: true, styles: scrollableContainer },
+                    React__default['default'].createElement(react.Stack.Item, { verticalFill: true, styles: scrollableContainerContents }, props.children))))));
+};
+/**
+ * In a Meeting when a participant is removed, we must remove them from both
+ * the call and the chat thread.
+ */
+const removeParticipantFromMeeting = (callAdapter, chatAdapter, participantId) => __awaiter$3(void 0, void 0, void 0, function* () {
+    yield callAdapter.removeParticipant(participantId);
+    yield chatAdapter.removeParticipant(participantId);
+});
+/**
+ * @private
+ */
+const EmbeddedPeoplePane = (props) => {
+    const { callAdapter, chatAdapter, inviteLink } = props;
+    const participantListDefaultProps = usePropsFor$1(ParticipantList);
+    const participantListProps = React.useMemo(() => {
+        const onRemoveParticipant = (participantId) => __awaiter$3(void 0, void 0, void 0, function* () { return removeParticipantFromMeeting(callAdapter, chatAdapter, participantId); });
+        return Object.assign(Object.assign({}, participantListDefaultProps), { onRemoveParticipant });
+    }, [participantListDefaultProps, callAdapter, chatAdapter]);
+    const theme = useTheme();
+    const peopleSubheadingStyleThemed = react.concatStyleSets(peopleSubheadingStyle, {
+        root: {
+            color: theme.palette.neutralSecondary
+        }
+    });
+    return (React__default['default'].createElement(SidePane, { hidden: props.hidden, headingText: 'People', onClose: props.onClose, dataUiId: 'meeting-composite-people-pane' },
+        React__default['default'].createElement(react.Stack, { tokens: peoplePaneContainerTokens },
+            inviteLink && (React__default['default'].createElement(react.DefaultButton, { text: "Copy invite link", iconProps: { iconName: 'Link' }, onClick: () => copy__default['default'](inviteLink) })),
+            React__default['default'].createElement(react.Stack.Item, { styles: peopleSubheadingStyleThemed }, "In this call"),
+            React__default['default'].createElement(ParticipantList, Object.assign({}, participantListProps)))));
+};
+/**
+ * @private
+ */
+const EmbeddedChatPane = (props) => {
+    return (React__default['default'].createElement(SidePane, { hidden: props.hidden, headingText: 'Chat', onClose: props.onClose, dataUiId: 'meeting-composite-chat-pane' },
+        React__default['default'].createElement(ChatComposite, Object.assign({}, props.chatCompositeProps, { adapter: props.chatAdapter, fluentTheme: props.fluentTheme, options: { participantPane: false, topic: false } }))));
+};
+// Copyright (c) Microsoft Corporation.
+const onRenderOnIcon$1 = () => React__default['default'].createElement(reactIcons.Chat20Filled, { key: 'chatOnIconKey', primaryFill: "currentColor" });
+const onRenderOffIcon$1 = () => React__default['default'].createElement(reactIcons.Chat20Regular, { key: 'chatOffIconKey', primaryFill: "currentColor" });
+/**
+ * @private
+ */
+const ChatButton = (props) => {
+    var _a, _b;
+    const strings = Object.assign({ label: 'Chat' }, props.strings);
+    return (React__default['default'].createElement(ControlBarButton, Object.assign({}, props, { labelKey: 'chatButtonLabelKey', strings: strings, onRenderOnIcon: (_a = props.onRenderOnIcon) !== null && _a !== void 0 ? _a : onRenderOnIcon$1, onRenderOffIcon: (_b = props.onRenderOffIcon) !== null && _b !== void 0 ? _b : onRenderOffIcon$1, onClick: props.onClick })));
+};
+// Copyright (c) Microsoft Corporation.
+const onRenderOnIcon = () => React__default['default'].createElement(reactIcons.People20Filled, { key: 'peopleOnIconKey', primaryFill: "currentColor" });
+const onRenderOffIcon = () => React__default['default'].createElement(reactIcons.People20Regular, { key: 'peopleOffIconKey', primaryFill: "currentColor" });
+/**
+ * @private
+ */
+const PeopleButton = (props) => {
+    var _a, _b;
+    const strings = Object.assign({ label: 'People' }, props.strings);
+    return (React__default['default'].createElement(ControlBarButton, Object.assign({}, props, { strings: strings, labelKey: 'peopleButtonLabelKey', onRenderOnIcon: (_a = props.onRenderOnIcon) !== null && _a !== void 0 ? _a : onRenderOnIcon, onRenderOffIcon: (_b = props.onRenderOffIcon) !== null && _b !== void 0 ? _b : onRenderOffIcon, onClick: props.onClick })));
+};
+// Copyright (c) Microsoft Corporation.
+/**
+ * @private
+ */
+const MeetingCallControlBar = (props) => {
+    // Disable the default participants button as meetings composite has its own participants button.
+    let callControlsOptions = {
+        participantsButton: false,
+        screenShareButton: props.mobileView ? false : { disabled: props.disableButtonsForLobbyPage }
+    };
+    // Reduce the controls shown when mobile view is enabled.
+    if (props.mobileView) {
+        callControlsOptions = reduceCallControlsForMobile(callControlsOptions);
+    }
+    /**
+     * Until mobile meetings is worked on, statically set the width of the
+     * control bar such that all controls can be accessed.
+     */
+    const temporaryMeetingControlBarStyles = props.mobileView ? { width: '23.5rem' } : undefined;
+    return (React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(temporaryMeetingControlBarStyles, callControlsContainerStyles, controlBarContainerStyles) },
+        React__default['default'].createElement(react.Stack.Item, { grow: true },
+            React__default['default'].createElement(CallAdapterProvider, { adapter: props.callAdapter },
+                React__default['default'].createElement(CallControls, { options: callControlsOptions, increaseFlyoutItemSize: props.mobileView }))),
+        React__default['default'].createElement(react.Stack.Item, null,
+            React__default['default'].createElement(ChatButton, { checked: props.chatButtonChecked, showLabel: true, onClick: props.onChatButtonClicked, "data-ui-id": "meeting-composite-chat-button", disabled: props.disableButtonsForLobbyPage }),
+            React__default['default'].createElement(PeopleButton, { checked: props.peopleButtonChecked, showLabel: true, onClick: props.onPeopleButtonClicked, "data-ui-id": "meeting-composite-people-button", disabled: props.disableButtonsForLobbyPage }))));
+};
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * @private
+ */
+const compositeOuterContainerStyles = {
+    root: {
+        width: '100%',
+        // This allows the composite to correctly contain the call composite by calculating a height for the available space.
+        // Items inside the call composite that fill 100% of the height will now fill the height of this container instead
+        // of the height of the child items.
+        // If this css property is to be removed, test the participant pane correctly uses the scroll overflow when there a lot
+        // of participants (i.e. beyond screen height) and where one participant is sharing their screen.
+        flexWrap: 'wrap'
+    }
+};
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * @private
+ */
+function callPageToMeetingPage(page) {
+    switch (page) {
+        case 'call':
+            return 'meeting';
+        case 'leftCall':
+            return 'leftMeeting';
+        case 'removedFromCall':
+            return 'removedFromMeeting';
+        case 'joinCallFailedDueToNoNetwork':
+            return 'joinMeetingFailedDueToNoNetwork';
+        default:
+            return page;
+    }
+}
+/**
+ * @private
+ */
+function meetingPageToCallPage(page) {
+    switch (page) {
+        case 'meeting':
+            return 'call';
+        case 'leftMeeting':
+            return 'leftCall';
+        case 'removedFromMeeting':
+            return 'removedFromCall';
+        case 'joinMeetingFailedDueToNoNetwork':
+            return 'joinCallFailedDueToNoNetwork';
+        default:
+            return page;
+    }
+}
+/**
+ * @private
+ */
+const hasJoinedCall = (page, callStatus) => page === 'meeting' && callStatus === 'Connected';
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * @private
+ */
+function meetingParticipantFromCallParticipant(callParticipant) {
+    return {
+        id: callParticipant.identifier,
+        meetingEndReason: callParticipant.callEndReason,
+        displayName: callParticipant.displayName,
+        state: callParticipant.state,
+        videoStreams: callParticipant.videoStreams,
+        isMuted: callParticipant.isMuted,
+        isSpeaking: callParticipant.isSpeaking
+    };
+}
+/**
+ * @private
+ */
+function callParticipantFromMeetingParticipant(meetingParticipant) {
+    return {
+        identifier: meetingParticipant.id,
+        callEndReason: meetingParticipant.meetingEndReason,
+        displayName: meetingParticipant.displayName,
+        state: meetingParticipant.state,
+        videoStreams: meetingParticipant.videoStreams,
+        isMuted: meetingParticipant.isMuted,
+        isSpeaking: meetingParticipant.isSpeaking
+    };
+}
+/**
+ * @private
+ */
+function meetingParticipantsFromCallParticipants(callParticipants) {
+    const meetingParticipants = {};
+    for (const [key, value] of Object.entries(callParticipants)) {
+        meetingParticipants[key] = meetingParticipantFromCallParticipant(value);
+    }
+    return meetingParticipants;
+}
+/**
+ * @private
+ */
+function callParticipantsFromMeetingParticipants(meetingParticipants) {
+    const callParticipants = {};
+    for (const [key, value] of Object.entries(meetingParticipants)) {
+        callParticipants[key] = callParticipantFromMeetingParticipant(value);
+    }
+    return callParticipants;
+}
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+var __awaiter$2 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+function callStateFromMeetingState(meetingState) {
+    return {
+        id: meetingState.id,
+        callerInfo: meetingState.callerInfo,
+        state: meetingState.state,
+        callEndReason: meetingState.meetingEndReason,
+        direction: 'Incoming',
+        isMuted: meetingState.isMuted,
+        isScreenSharingOn: meetingState.isScreenSharingOn,
+        localVideoStreams: meetingState.localVideoStreams,
+        transcription: meetingState.transcription,
+        recording: meetingState.recording,
+        screenShareRemoteParticipant: meetingState.screenShareRemoteParticipant,
+        startTime: meetingState.startTime,
+        endTime: meetingState.endTime,
+        diagnostics: meetingState.diagnostics,
+        remoteParticipants: callParticipantsFromMeetingParticipants(meetingState.participants),
+        remoteParticipantsEnded: callParticipantsFromMeetingParticipants(meetingState.participantsEnded),
+        dominantSpeakers: meetingState.dominantSpeakers
+    };
+}
+function callAdapterStateFromMeetingAdapterState(meetingState) {
+    return {
+        isLocalPreviewMicrophoneEnabled: meetingState.isLocalPreviewMicrophoneEnabled,
+        page: meetingPageToCallPage(meetingState.page),
+        userId: meetingState.userId,
+        displayName: meetingState.displayName,
+        call: meetingState.meeting ? callStateFromMeetingState(meetingState.meeting) : undefined,
+        devices: meetingState.devices,
+        isTeamsCall: meetingState.isTeamsCall,
+        latestErrors: {} //@TODO: latest errors not supported in meeting composite yet.
+    };
+}
+/**
+ * Facade around the MeetingAdapter to satisfy the call adapter interface.
+ *
+ * @private
+ */
+class MeetingBackedCallAdapter {
+    constructor(meetingAdapter) {
+        // For onStateChange we must convert meeting state to chat state. This involves creating a new handler to be passed into the onStateChange.
+        // In order to unsubscribe the handler when offStateChange is called we must have a mapping of the original handler to the newly created handler.
+        this.eventStore = new Map();
+        this.on = (event, listener) => this.meetingAdapter.on(event, listener);
+        this.off = (event, listener) => this.meetingAdapter.off(event, listener);
+        this.onStateChange = (handler) => {
+            const convertedHandler = (state) => {
+                handler(callAdapterStateFromMeetingAdapterState(state));
+            };
+            this.meetingAdapter.onStateChange(convertedHandler);
+            this.eventStore.set(handler, convertedHandler);
+        };
+        this.offStateChange = (handler) => {
+            const convertedHandler = this.eventStore.get(handler);
+            convertedHandler && this.meetingAdapter.offStateChange(convertedHandler);
+        };
+        this.getState = () => callAdapterStateFromMeetingAdapterState(this.meetingAdapter.getState());
+        this.dispose = () => this.meetingAdapter.dispose();
+        this.joinCall = (microphoneOn) => {
+            return this.meetingAdapter.joinMeeting(microphoneOn);
+        };
+        this.leaveCall = () => __awaiter$2(this, void 0, void 0, function* () { return yield this.meetingAdapter.leaveMeeting(); });
+        this.startCall = (participants) => {
+            return this.meetingAdapter.startMeeting(participants);
+        };
+        this.setCamera = (sourceId, options) => __awaiter$2(this, void 0, void 0, function* () { return yield this.meetingAdapter.setCamera(sourceId, options); });
+        this.setMicrophone = (sourceId) => __awaiter$2(this, void 0, void 0, function* () { return yield this.meetingAdapter.setMicrophone(sourceId); });
+        this.setSpeaker = (sourceId) => __awaiter$2(this, void 0, void 0, function* () { return yield this.meetingAdapter.setSpeaker(sourceId); });
+        this.askDevicePermission = (constraints) => __awaiter$2(this, void 0, void 0, function* () { return yield this.meetingAdapter.askDevicePermission(constraints); });
+        this.queryCameras = () => __awaiter$2(this, void 0, void 0, function* () { return yield this.meetingAdapter.queryCameras(); });
+        this.queryMicrophones = () => __awaiter$2(this, void 0, void 0, function* () { return yield this.meetingAdapter.queryMicrophones(); });
+        this.querySpeakers = () => __awaiter$2(this, void 0, void 0, function* () { return yield this.meetingAdapter.querySpeakers(); });
+        this.startCamera = (options) => __awaiter$2(this, void 0, void 0, function* () { return yield this.meetingAdapter.startCamera(options); });
+        this.stopCamera = () => __awaiter$2(this, void 0, void 0, function* () { return yield this.meetingAdapter.stopCamera(); });
+        this.mute = () => __awaiter$2(this, void 0, void 0, function* () { return yield this.meetingAdapter.mute(); });
+        this.unmute = () => __awaiter$2(this, void 0, void 0, function* () { return yield this.meetingAdapter.unmute(); });
+        this.startScreenShare = () => __awaiter$2(this, void 0, void 0, function* () { return yield this.meetingAdapter.startScreenShare(); });
+        this.stopScreenShare = () => __awaiter$2(this, void 0, void 0, function* () { return yield this.meetingAdapter.stopScreenShare(); });
+        this.removeParticipant = (userId) => __awaiter$2(this, void 0, void 0, function* () { return yield this.meetingAdapter.removeParticipant(userId); });
+        this.createStreamView = (remoteUserId, options) => __awaiter$2(this, void 0, void 0, function* () { return yield this.meetingAdapter.createStreamView(remoteUserId, options); });
+        this.disposeStreamView = (remoteUserId, options) => __awaiter$2(this, void 0, void 0, function* () { return yield this.meetingAdapter.disposeStreamView(remoteUserId, options); });
+        this.meetingAdapter = meetingAdapter;
+    }
+}
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+var __awaiter$1 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+function chatThreadStateFromMeetingState(meetingState) {
+    return {
+        chatMessages: meetingState.chatMessages,
+        participants: meetingState.participants,
+        threadId: meetingState.threadId,
+        properties: meetingState.properties,
+        readReceipts: meetingState.readReceipts,
+        typingIndicators: meetingState.typingIndicators,
+        latestReadTime: meetingState.latestReadTime
+    };
+}
+function ChatAdapterStateFromMeetingAdapterState(meetingState) {
+    if (!meetingState.meeting) {
+        throw 'Cannot get chat adapter state. Meeting state is undefined.';
+    }
+    return {
+        userId: meetingState.userId,
+        displayName: meetingState.displayName || '',
+        thread: chatThreadStateFromMeetingState(meetingState.meeting),
+        latestErrors: {} //@TODO: latest errors not supported in meeting composite yet.
+    };
+}
+/**
+ * Facade around the MeetingAdapter to satisfy the chat adapter interface.
+ *
+ * @private
+ */
+class MeetingBackedChatAdapter {
+    constructor(meetingAdapter) {
+        // For onStateChange we must convert meeting state to chat state. This involves creating a new handler to be passed into the onStateChange.
+        // In order to unsubscribe the handler when offStateChange is called we must have a mapping of the original handler to the newly created handler.
+        this.eventStore = new Map();
+        this.fetchInitialData = () => __awaiter$1(this, void 0, void 0, function* () { return yield this.meetingAdapter.fetchInitialData(); });
+        this.sendMessage = (content) => __awaiter$1(this, void 0, void 0, function* () { return yield this.meetingAdapter.sendMessage(content); });
+        this.sendReadReceipt = (chatMessageId) => __awaiter$1(this, void 0, void 0, function* () { return yield this.meetingAdapter.sendReadReceipt(chatMessageId); });
+        this.sendTypingIndicator = () => __awaiter$1(this, void 0, void 0, function* () { return yield this.meetingAdapter.sendTypingIndicator(); });
+        this.removeParticipant = (userId) => __awaiter$1(this, void 0, void 0, function* () { return yield this.meetingAdapter.removeParticipant(userId); });
+        this.loadPreviousChatMessages = (messagesToLoad) => __awaiter$1(this, void 0, void 0, function* () { return yield this.meetingAdapter.loadPreviousChatMessages(messagesToLoad); });
+        this.dispose = () => this.meetingAdapter.dispose();
+        this.onStateChange = (handler) => {
+            const convertedHandler = (state) => {
+                handler(ChatAdapterStateFromMeetingAdapterState(state));
+            };
+            this.meetingAdapter.onStateChange(convertedHandler);
+            this.eventStore.set(handler, convertedHandler);
+        };
+        this.offStateChange = (handler) => {
+            const convertedHandler = this.eventStore.get(handler);
+            convertedHandler && this.meetingAdapter.offStateChange(convertedHandler);
+        };
+        this.getState = () => ChatAdapterStateFromMeetingAdapterState(this.meetingAdapter.getState());
+        /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+        this.on = (event, listener) => this.meetingAdapter.on(event, listener);
+        this.off = (event, listener) => this.meetingAdapter.off(event, listener);
+        this.updateMessage = (messageId, content) => __awaiter$1(this, void 0, void 0, function* () { return yield this.meetingAdapter.updateMessage(messageId, content); });
+        this.deleteMessage = (messageId) => __awaiter$1(this, void 0, void 0, function* () { return yield this.meetingAdapter.deleteMessage(messageId); });
+        this.clearErrors = (errorTypes) => {
+            throw `Method not supported in meetings.`;
+        };
+        this.setTopic = (topicName) => __awaiter$1(this, void 0, void 0, function* () {
+            throw `Chat Topics are not supported in meetings.`;
+        });
+        this.meetingAdapter = meetingAdapter;
+    }
+}
+// Copyright (c) Microsoft Corporation.
+/**
+ * Meeting Composite brings together key components to provide a full meeting experience out of the box.
+ *
+ * @beta
+ */
+const MeetingComposite = (props) => {
+    const { meetingAdapter, fluentTheme, formFactor = 'desktop' } = props;
+    if (!meetingAdapter) {
+        throw 'Meeting adapter is undefined';
+    }
+    const callAdapter = React.useMemo(() => new MeetingBackedCallAdapter(meetingAdapter), [meetingAdapter]);
+    const chatAdapter = React.useMemo(() => new MeetingBackedChatAdapter(meetingAdapter), [meetingAdapter]);
+    const [currentMeetingState, setCurrentMeetingState] = React.useState();
+    const [currentPage, setCurrentPage] = React.useState();
+    meetingAdapter.onStateChange((newState) => {
+        var _a;
+        setCurrentPage(newState.page);
+        setCurrentMeetingState((_a = newState.meeting) === null || _a === void 0 ? void 0 : _a.state);
+    });
+    const [showChat, setShowChat] = React.useState(false);
+    const [showPeople, setShowPeople] = React.useState(false);
+    const closePane = React.useCallback(() => {
+        setShowChat(false);
+        setShowPeople(false);
+    }, []);
+    const toggleChat = React.useCallback(() => {
+        setShowPeople(false);
+        setShowChat(!showChat);
+    }, [showChat]);
+    const togglePeople = React.useCallback(() => {
+        setShowChat(false);
+        setShowPeople(!showPeople);
+    }, [showPeople]);
+    const isInLobbyOrConnecting = currentPage === 'lobby';
+    const hasJoinedCall$1 = !!(currentPage && hasJoinedCall(currentPage, currentMeetingState !== null && currentMeetingState !== void 0 ? currentMeetingState : 'None'));
+    return (React__default['default'].createElement(FluentThemeProvider, { fluentTheme: fluentTheme },
+        React__default['default'].createElement(react.Stack, { verticalFill: true, grow: true, styles: compositeOuterContainerStyles },
+            React__default['default'].createElement(react.Stack, { horizontal: true, grow: true },
+                React__default['default'].createElement(react.Stack.Item, { grow: true },
+                    React__default['default'].createElement(CallComposite, Object.assign({}, props, { formFactor: formFactor, options: { callControls: false }, adapter: callAdapter, fluentTheme: fluentTheme }))),
+                chatAdapter && hasJoinedCall$1 && (React__default['default'].createElement(EmbeddedChatPane, { chatCompositeProps: props, hidden: !showChat, chatAdapter: chatAdapter, fluentTheme: fluentTheme, onClose: closePane })),
+                callAdapter && chatAdapter && hasJoinedCall$1 && (React__default['default'].createElement(CallAdapterProvider, { adapter: callAdapter },
+                    React__default['default'].createElement(EmbeddedPeoplePane, { hidden: !showPeople, inviteLink: props.meetingInvitationURL, onClose: closePane, chatAdapter: chatAdapter, callAdapter: callAdapter })))),
+            (isInLobbyOrConnecting || hasJoinedCall$1) && (React__default['default'].createElement(MeetingCallControlBar, { callAdapter: callAdapter, chatButtonChecked: showChat, onChatButtonClicked: toggleChat, peopleButtonChecked: showPeople, onPeopleButtonClicked: togglePeople, mobileView: props.formFactor === 'mobile', disableButtonsForLobbyPage: isInLobbyOrConnecting })))));
+};
+// Copyright (c) Microsoft Corporation.
+/**
+ * Return properties from call state that are used in meeting state.
+ *
+ * @private
+ */
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+const meetingPropsFromCallState = (callState) => ({
+    id: callState.id,
+    callerInfo: callState.callerInfo,
+    state: callState.state,
+    isMuted: callState.isMuted,
+    isScreenSharingOn: callState.isScreenSharingOn,
+    localVideoStreams: callState.localVideoStreams,
+    transcription: callState.transcription,
+    recording: callState.recording,
+    screenShareRemoteParticipant: callState.screenShareRemoteParticipant,
+    startTime: callState.startTime,
+    endTime: callState.endTime,
+    meetingEndReason: callState.callEndReason,
+    diagnostics: callState.diagnostics,
+    dominantSpeakers: callState.dominantSpeakers,
+    // For meetings we only use participants from the call in a meeting
+    participants: meetingParticipantsFromCallParticipants(callState.remoteParticipants),
+    participantsEnded: meetingParticipantsFromCallParticipants(callState.remoteParticipantsEnded)
+});
+/**
+ * Return properties from chat state that are used in meeting state.
+ *
+ * @private
+ */
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+const meetingPropsFromChatState = (chatState) => ({
+    chatMessages: chatState.chatMessages,
+    threadId: chatState.threadId,
+    properties: chatState.properties,
+    readReceipts: chatState.readReceipts,
+    typingIndicators: chatState.typingIndicators,
+    latestReadTime: chatState.latestReadTime
+});
+/**
+ * Helper function to return meeting state created from call and chat states
+ *
+ * @private
+ */
+function meetingStateFromBackingStates(callState, chatState) {
+    return Object.assign(Object.assign({}, meetingPropsFromCallState(callState)), meetingPropsFromChatState(chatState));
+}
+/**
+ * Helper function to return an updated meeting state with new chat state applied
+ *
+ * @private
+ */
+function mergeChatStateIntoMeetingState(meetingState, chatState) {
+    return Object.assign(Object.assign({}, meetingState), meetingPropsFromChatState(chatState));
+}
+/**
+ * Helper function to return an updated meeting state with new call state applied
+ *
+ * @private
+ */
+function mergeCallStateIntoMeetingState(meetingState, callState) {
+    // If we have no existing meeting state, populate chat fields with defaults to merge and make a new state.
+    // This is because calls are constructed before chat state is created.
+    if (!meetingState) {
+        return Object.assign({ chatMessages: {}, threadId: '', properties: {}, readReceipts: [], typingIndicators: [], latestReadTime: new Date(0) }, meetingPropsFromCallState(callState));
+    }
+    return Object.assign(Object.assign({}, meetingState), meetingPropsFromCallState(callState));
+}
+// Copyright (c) Microsoft Corporation.
+/**
+ * @private
+ */
+function meetingAdapterStateFromBackingStates(callAdapter, chatAdapter) {
+    const callAdapterState = callAdapter.getState();
+    const chatAdapterState = chatAdapter.getState();
+    const meeting = callAdapterState.call
+        ? meetingStateFromBackingStates(callAdapterState.call, chatAdapterState.thread)
+        : undefined;
+    return {
+        meeting,
+        userId: callAdapterState.userId,
+        page: callPageToMeetingPage(callAdapterState.page),
+        displayName: callAdapterState.displayName,
+        devices: callAdapterState.devices,
+        isLocalPreviewMicrophoneEnabled: callAdapterState.isLocalPreviewMicrophoneEnabled,
+        isTeamsCall: callAdapterState.isTeamsCall
+    };
+}
+/**
+ * @private
+ */
+function mergeChatAdapterStateIntoMeetingAdapterState(meetingAdapterState, chatAdapterState) {
+    const newMeetingState = meetingAdapterState.meeting
+        ? mergeChatStateIntoMeetingState(meetingAdapterState.meeting, chatAdapterState.thread)
+        : undefined;
+    return Object.assign(Object.assign({}, meetingAdapterState), { meeting: newMeetingState });
+}
+/**
+ * @private
+ */
+function mergeCallAdapterStateIntoMeetingAdapterState(meetingAdapterState, callAdapterState) {
+    const newMeetingState = callAdapterState.call
+        ? mergeCallStateIntoMeetingState(meetingAdapterState.meeting, callAdapterState.call)
+        : undefined;
+    return {
+        userId: callAdapterState.userId,
+        page: callPageToMeetingPage(callAdapterState.page),
+        displayName: callAdapterState.displayName,
+        devices: callAdapterState.devices,
+        meeting: newMeetingState,
+        isLocalPreviewMicrophoneEnabled: callAdapterState.isLocalPreviewMicrophoneEnabled,
+        isTeamsCall: callAdapterState.isTeamsCall
+    };
+}
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+var __awaiter = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+/** Context of meeting, which is a centralized context for all state updates */
+class MeetingContext {
+    constructor(clientState) {
+        this.emitter = new EventEmitter.EventEmitter();
+        this.state = clientState;
+    }
+    onStateChange(handler) {
+        this.emitter.on('stateChanged', handler);
+    }
+    offStateChange(handler) {
+        this.emitter.off('stateChanged', handler);
+    }
+    setState(state) {
+        this.state = state;
+        this.emitter.emit('stateChanged', this.state);
+    }
+    getState() {
+        return this.state;
+    }
+    updateClientState(clientState) {
+        this.setState(clientState);
+    }
+    updateClientStateWithChatState(chatAdapterState) {
+        this.updateClientState(mergeChatAdapterStateIntoMeetingAdapterState(this.state, chatAdapterState));
+    }
+    updateClientStateWithCallState(callAdapterState) {
+        this.updateClientState(mergeCallAdapterStateIntoMeetingAdapterState(this.state, callAdapterState));
+    }
+}
+/**
+ * Meeting adapter backed by Azure Communication Services.
+ * Created for easy use with the Meeting Composite.
+ */
+class AzureCommunicationMeetingAdapter {
+    constructor(callAdapter, chatAdapter) {
+        this.bindPublicMethods();
+        this.callAdapter = callAdapter;
+        this.chatAdapter = chatAdapter;
+        this.context = new MeetingContext(meetingAdapterStateFromBackingStates(callAdapter, chatAdapter));
+        const onChatStateChange = (newChatAdapterState) => {
+            this.context.updateClientStateWithChatState(newChatAdapterState);
+        };
+        this.chatAdapter.onStateChange(onChatStateChange);
+        this.onChatStateChange = onChatStateChange;
+        const onCallStateChange = (newCallAdapterState) => {
+            this.context.updateClientStateWithCallState(newCallAdapterState);
+        };
+        this.callAdapter.onStateChange(onCallStateChange);
+        this.onCallStateChange = onCallStateChange;
+    }
+    bindPublicMethods() {
+        this.joinMeeting.bind(this);
+        this.leaveMeeting.bind(this);
+        this.startMeeting.bind(this);
+        this.onStateChange.bind(this);
+        this.offStateChange.bind(this);
+        this.getState.bind(this);
+        this.dispose.bind(this);
+        this.setCamera.bind(this);
+        this.setMicrophone.bind(this);
+        this.setSpeaker.bind(this);
+        this.askDevicePermission.bind(this);
+        this.queryCameras.bind(this);
+        this.queryMicrophones.bind(this);
+        this.querySpeakers.bind(this);
+        this.startCamera.bind(this);
+        this.stopCamera.bind(this);
+        this.mute.bind(this);
+        this.unmute.bind(this);
+        this.startScreenShare.bind(this);
+        this.stopScreenShare.bind(this);
+        this.removeParticipant.bind(this);
+        this.createStreamView.bind(this);
+        this.disposeStreamView.bind(this);
+        this.fetchInitialData.bind(this);
+        this.sendMessage.bind(this);
+        this.sendReadReceipt.bind(this);
+        this.sendTypingIndicator.bind(this);
+        this.loadPreviousChatMessages.bind(this);
+        this.updateMessage.bind(this);
+        this.deleteMessage.bind(this);
+        this.on.bind(this);
+        this.off.bind(this);
+    }
+    /** Join existing Meeting. */
+    joinMeeting(microphoneOn) {
+        return this.callAdapter.joinCall(microphoneOn);
+    }
+    /** Leave current Meeting. */
+    leaveMeeting() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.chatAdapter.removeParticipant(toFlatCommunicationIdentifier(this.chatAdapter.getState().userId));
+            yield this.callAdapter.leaveCall();
+        });
+    }
+    /** Start a new Meeting. */
+    startMeeting(participants) {
+        return this.callAdapter.startCall(participants);
+    }
+    /**
+     * Subscribe to state change events.
+     * @param handler - handler to be called when the state changes. This is passed the new state.
+     */
+    onStateChange(handler) {
+        this.context.onStateChange(handler);
+    }
+    /**
+     * Unsubscribe to state change events.
+     * @param handler - handler to be no longer called when state changes.
+     */
+    offStateChange(handler) {
+        this.context.offStateChange(handler);
+    }
+    /** Get current Meeting state. */
+    getState() {
+        return this.context.getState();
+    }
+    /** Dispose of the current Meeting Adapter. */
+    dispose() {
+        this.chatAdapter.offStateChange(this.onChatStateChange);
+        this.callAdapter.offStateChange(this.onCallStateChange);
+        this.chatAdapter.dispose();
+        this.callAdapter.dispose();
+    }
+    /** Remove a participant from the Meeting. */
+    removeParticipant(userId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.chatAdapter.removeParticipant(userId);
+            yield this.callAdapter.removeParticipant(userId);
+        });
+    }
+    setCamera(device, options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.callAdapter.setCamera(device, options);
+        });
+    }
+    /** Set the microphone to be used in the meeting. */
+    setMicrophone(device) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.callAdapter.setMicrophone(device);
+        });
+    }
+    /** Set the speaker to be used in the meeting. */
+    setSpeaker(device) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.callAdapter.setSpeaker(device);
+        });
+    }
+    askDevicePermission(constraints) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.callAdapter.askDevicePermission(constraints);
+        });
+    }
+    /** Query for available cameras. */
+    queryCameras() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.callAdapter.queryCameras();
+        });
+    }
+    /** Query for available microphones. */
+    queryMicrophones() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.callAdapter.queryMicrophones();
+        });
+    }
+    /** Query for available speakers. */
+    querySpeakers() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.callAdapter.querySpeakers();
+        });
+    }
+    /** Start the camera for the user in the Meeting. */
+    startCamera(options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.callAdapter.startCamera(options);
+        });
+    }
+    /** Stop the camera for the user in the Meeting. */
+    stopCamera() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.callAdapter.stopCamera();
+        });
+    }
+    /** Mute the user in the Meeting. */
+    mute() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.callAdapter.mute();
+        });
+    }
+    /** Unmute the user in the Meeting. */
+    unmute() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.callAdapter.unmute();
+        });
+    }
+    /** Trigger the user to start screen share. */
+    startScreenShare() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.callAdapter.startScreenShare();
+        });
+    }
+    /** Stop the current active screen share. */
+    stopScreenShare() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.callAdapter.stopScreenShare();
+        });
+    }
+    /** Create a stream view for a remote participants video feed. */
+    createStreamView(remoteUserId, options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.callAdapter.createStreamView(remoteUserId, options);
+        });
+    }
+    /** Dispose of a created stream view of a remote participants video feed. */
+    disposeStreamView(remoteUserId, options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.callAdapter.disposeStreamView(remoteUserId, options);
+        });
+    }
+    /** Fetch initial Meeting data such as chat messages. */
+    fetchInitialData() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.chatAdapter.fetchInitialData();
+        });
+    }
+    /** Send a chat message. */
+    sendMessage(content) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.chatAdapter.sendMessage(content);
+        });
+    }
+    /** Send a chat read receipt. */
+    sendReadReceipt(chatMessageId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.chatAdapter.sendReadReceipt(chatMessageId);
+        });
+    }
+    /** Send an isTyping indicator. */
+    sendTypingIndicator() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.chatAdapter.sendTypingIndicator();
+        });
+    }
+    /** Load previous Meeting chat messages. */
+    loadPreviousChatMessages(messagesToLoad) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.chatAdapter.loadPreviousChatMessages(messagesToLoad);
+        });
+    }
+    /** Update an existing message. */
+    updateMessage(messageId, content) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.chatAdapter.updateMessage(messageId, content);
+        });
+    }
+    /** Delete an existing message. */
+    deleteMessage(messageId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.chatAdapter.deleteMessage(messageId);
+        });
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    on(event, listener) {
+        switch (event) {
+            case 'participantsJoined':
+                this.callAdapter.on(event, listener);
+                break;
+            case 'participantsLeft':
+                this.callAdapter.on('participantsLeft', listener);
+                break;
+            case 'meetingEnded':
+                this.callAdapter.on('callEnded', listener);
+                break;
+            case 'isMutedChanged':
+                this.callAdapter.on('isMutedChanged', listener);
+                break;
+            case 'callIdChanged':
+                this.callAdapter.on('callIdChanged', listener);
+                break;
+            case 'isLocalScreenSharingActiveChanged':
+                this.callAdapter.on('isLocalScreenSharingActiveChanged', listener);
+                break;
+            case 'displayNameChanged':
+                this.callAdapter.on('displayNameChanged', listener);
+                break;
+            case 'isSpeakingChanged':
+                this.callAdapter.on('isSpeakingChanged', listener);
+                break;
+            case 'messageReceived':
+                this.chatAdapter.on('messageReceived', listener);
+                break;
+            case 'messageSent':
+                this.chatAdapter.on('messageSent', listener);
+                break;
+            case 'messageRead':
+                this.chatAdapter.on('messageRead', listener);
+                break;
+            case 'error':
+                throw 'on(Error) not implemented yet.';
+            default:
+                throw `Unknown MeetingEvent: ${event}`;
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    off(event, listener) {
+        switch (event) {
+            case 'participantsJoined':
+                this.callAdapter.off(event, listener);
+                break;
+            case 'participantsLeft':
+                this.callAdapter.off('participantsLeft', listener);
+                break;
+            case 'meetingEnded':
+                this.callAdapter.off('callEnded', listener);
+                break;
+            case 'isMutedChanged':
+                this.callAdapter.off('isMutedChanged', listener);
+                break;
+            case 'callIdChanged':
+                this.callAdapter.off('callIdChanged', listener);
+                break;
+            case 'isLocalScreenSharingActiveChanged':
+                this.callAdapter.off('isLocalScreenSharingActiveChanged', listener);
+                break;
+            case 'displayNameChanged':
+                this.callAdapter.off('displayNameChanged', listener);
+                break;
+            case 'isSpeakingChanged':
+                this.callAdapter.off('isSpeakingChanged', listener);
+                break;
+            case 'messageReceived':
+                this.chatAdapter.off('messageReceived', listener);
+                break;
+            case 'messageSent':
+                this.chatAdapter.off('messageSent', listener);
+                break;
+            case 'messageRead':
+                this.chatAdapter.off('messageRead', listener);
+                break;
+            case 'error':
+                throw 'on(Error) not implemented yet.';
+            default:
+                throw `Unknown MeetingEvent: ${event}`;
+        }
+    }
+}
+/**
+ * Create a meeting adapter backed by Azure Communication services
+ * to plug into the Meeting Composite.
+ *
+ * @beta
+ */
+const createAzureCommunicationMeetingAdapter = ({ userId, displayName, credential, endpoint, chatThreadId, callLocator }) => __awaiter(void 0, void 0, void 0, function* () {
+    const callAdapter = yield createAzureCommunicationCallAdapter({
+        userId,
+        displayName,
+        credential,
+        locator: callLocator
+    });
+    const chatAdapter = yield createAzureCommunicationChatAdapter({
+        endpoint,
+        userId,
+        displayName,
+        credential,
+        threadId: chatThreadId
+    });
+    return new AzureCommunicationMeetingAdapter(callAdapter, chatAdapter);
+});
 // Copyright (c) Microsoft Corporation.
 /**
  * Hook to obtain a selector for a specified component.
@@ -12038,6 +13054,7 @@ exports.ErrorBar = ErrorBar;
 exports.FluentThemeProvider = FluentThemeProvider;
 exports.GridLayout = GridLayout;
 exports.LocalizationProvider = LocalizationProvider$1;
+exports.MeetingComposite = MeetingComposite;
 exports.MessageStatusIndicator = MessageStatusIndicator;
 exports.MessageThread = MessageThread;
 exports.MicrophoneButton = MicrophoneButton;
@@ -12055,6 +13072,7 @@ exports.createAzureCommunicationCallAdapter = createAzureCommunicationCallAdapte
 exports.createAzureCommunicationCallAdapterFromClient = createAzureCommunicationCallAdapterFromClient;
 exports.createAzureCommunicationChatAdapter = createAzureCommunicationChatAdapter;
 exports.createAzureCommunicationChatAdapterFromClient = createAzureCommunicationChatAdapterFromClient;
+exports.createAzureCommunicationMeetingAdapter = createAzureCommunicationMeetingAdapter;
 exports.createDefaultCallingHandlers = createDefaultCallingHandlers;
 exports.createDefaultChatHandlers = createDefaultChatHandlers;
 exports.createStatefulCallClient = createStatefulCallClient;