@azure/communication-react 1.4.3-alpha-202212130014.0 → 1.4.3-alpha-202212150014.0

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

@@ -202,7 +202,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.4.3-alpha-202212130014.0';
+var telemetryVersion = '1.4.3-alpha-202212150014.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -1799,14 +1799,14 @@ const findOldestCallEnded = (calls) => {
  */
 const _isACSCall = (call) => {
     /* @conditional-compile-remove(teams-identity-support) */
-    return call.kind === 'Call';
+    return !call.kind || call.kind === 'Call';
 };
 /**
  * @internal
  */
 const _isACSCallAgent = (callAgent) => {
     /* @conditional-compile-remove(teams-identity-support) */
-    return callAgent.kind === 'CallAgent';
+    return !callAgent.kind || callAgent.kind === 'CallAgent';
 };
 /**
  * @internal
@@ -11789,8 +11789,8 @@ const linkTextStyles = {
  */
 const containerStyles$2 = {
     root: {
-        padding: '2rem',
-        maxWidth: _pxToRem(375)
+        maxWidth: _pxToRem(375),
+        padding: '2rem'
     }
 };
 /**
@@ -11801,8 +11801,8 @@ const continueAnywayButtonStyles = (theme) => {
         root: {
             backgroundColor: '#C4314B',
             borderColor: theme.palette.neutralLight,
-            padding: '1rem',
-            color: theme.palette.white
+            color: theme.palette.white,
+            padding: '1rem'
         }
     };
 };
@@ -11818,7 +11818,7 @@ const UnsupportedEnvironmentContainer = (props) => {
             React__default['default'].createElement(react.Text, { styles: mainTextStyles }, strings === null || strings === void 0 ? void 0 : strings.primaryText),
             React__default['default'].createElement(react.Text, { styles: secondaryTextStyles }, strings === null || strings === void 0 ? void 0 : strings.secondaryText)),
         onTroubleshootingClick && (React__default['default'].createElement(react.Link, { styles: linkTextStyles, onClick: onTroubleshootingClick, "data-ui-id": "unsupported-environment-link" }, strings === null || strings === void 0 ? void 0 : strings.moreHelpLinkText)),
-        onContinueClick && (React__default['default'].createElement(react.DefaultButton, { styles: continueAnywayButtonStyles(theme), onClick: onContinueClick }, strings === null || strings === void 0 ? void 0 : strings.continueAnywayButtonText))));
+        onContinueClick && (React__default['default'].createElement(react.DefaultButton, { "data-ui-id": "allowUnsupportedBrowserButton", styles: continueAnywayButtonStyles(theme), onClick: onContinueClick }, strings === null || strings === void 0 ? void 0 : strings.continueAnywayButtonText))));
 };
 /**
  * UI to display to the user that the environment they are using is not supported by calling application.
@@ -14747,6 +14747,280 @@ const convertObservableFileUploadToFileUploadsUiState = (fileUploads) => {
     }, {});
 };
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * Subset of CallCompositePages that represent an end call state.
+ * @private
+ */
+const END_CALL_PAGES = [
+    'accessDeniedTeamsMeeting',
+    'joinCallFailedDueToNoNetwork',
+    'leftCall',
+    /* @conditional-compile-remove(rooms) */ 'deniedPermissionToRoom',
+    'removedFromCall',
+    /* @conditional-compile-remove(rooms) */ 'roomNotFound',
+    /* @conditional-compile-remove(unsupported-browser) */ 'unsupportedEnvironment'
+];
+
+// Copyright (c) Microsoft Corporation.
+const ACCESS_DENIED_TEAMS_MEETING_SUB_CODE = 5854;
+const REMOTE_PSTN_USER_HUNG_UP = 560000;
+const REMOVED_FROM_CALL_SUB_CODES = [5000, 5300, REMOTE_PSTN_USER_HUNG_UP];
+/* @conditional-compile-remove(rooms) */
+const ROOM_NOT_FOUND_SUB_CODE = 5751;
+/* @conditional-compile-remove(rooms) */
+const DENIED_PERMISSION_TO_ROOM_SUB_CODE = 5828;
+/**
+ * @private
+ */
+const isCameraOn = (state) => {
+    if (state.call) {
+        const stream = state.call.localVideoStreams.find((stream) => stream.mediaStreamType === 'Video');
+        return !!stream;
+    }
+    else {
+        if (state.devices.selectedCamera) {
+            const previewOn = _isPreviewOn(state.devices);
+            return previewOn;
+        }
+    }
+    return false;
+};
+/**
+ * Reduce the set of call controls visible on mobile.
+ * For example do not show screenshare button.
+ *
+ * @private
+ */
+const reduceCallControlsForMobile = (callControlOptions) => {
+    if (callControlOptions === false) {
+        return false;
+    }
+    // Ensure call controls a valid object.
+    const reduceCallControlOptions = callControlOptions === true ? {} : callControlOptions || {};
+    // Set to compressed mode when composite is optimized for mobile
+    reduceCallControlOptions.displayType = 'compact';
+    // Do not show screen share button when composite is optimized for mobile unless the developer
+    // has explicitly opted in.
+    if (reduceCallControlOptions.screenShareButton !== true) {
+        reduceCallControlOptions.screenShareButton = false;
+    }
+    return reduceCallControlOptions;
+};
+var CallEndReasons;
+(function (CallEndReasons) {
+    CallEndReasons[CallEndReasons["LEFT_CALL"] = 0] = "LEFT_CALL";
+    CallEndReasons[CallEndReasons["ACCESS_DENIED"] = 1] = "ACCESS_DENIED";
+    CallEndReasons[CallEndReasons["REMOVED_FROM_CALL"] = 2] = "REMOVED_FROM_CALL";
+    CallEndReasons[CallEndReasons["ROOM_NOT_FOUND"] = 3] = "ROOM_NOT_FOUND";
+    CallEndReasons[CallEndReasons["DENIED_PERMISSION_TO_ROOM"] = 4] = "DENIED_PERMISSION_TO_ROOM";
+})(CallEndReasons || (CallEndReasons = {}));
+const getCallEndReason = (call) => {
+    var _a, _b, _c, _d, _e;
+    const remoteParticipantsEndedArray = Array.from(Object.values(call.remoteParticipantsEnded));
+    /**
+     * Handle the special case in a PSTN call where removing the last user kicks the caller out of the call.
+     * The code and subcode is the same as when a user is removed from a teams interop call.
+     * Hence, we look at the last remote participant removed to determine if the last participant removed was a phone number.
+     * If yes, the caller was kicked out of the call, but we need to show them that they left the call.
+     * Note: This check will only work for 1:1 PSTN Calls. The subcode is different for 1:N PSTN calls, and we do not need to handle that case.
+     */
+    if (remoteParticipantsEndedArray.length === 1 &&
+        communicationCommon.isPhoneNumberIdentifier(remoteParticipantsEndedArray[0].identifier) &&
+        ((_a = call.callEndReason) === null || _a === void 0 ? void 0 : _a.subCode) !== REMOTE_PSTN_USER_HUNG_UP) {
+        return CallEndReasons.LEFT_CALL;
+    }
+    if (((_b = call.callEndReason) === null || _b === void 0 ? void 0 : _b.subCode) && call.callEndReason.subCode === ACCESS_DENIED_TEAMS_MEETING_SUB_CODE) {
+        return CallEndReasons.ACCESS_DENIED;
+    }
+    if (((_c = call.callEndReason) === null || _c === void 0 ? void 0 : _c.subCode) && REMOVED_FROM_CALL_SUB_CODES.includes(call.callEndReason.subCode)) {
+        return CallEndReasons.REMOVED_FROM_CALL;
+    }
+    /* @conditional-compile-remove(rooms) */
+    if (((_d = call.callEndReason) === null || _d === void 0 ? void 0 : _d.subCode) && call.callEndReason.subCode === ROOM_NOT_FOUND_SUB_CODE) {
+        return CallEndReasons.ROOM_NOT_FOUND;
+    }
+    /* @conditional-compile-remove(rooms) */
+    if (((_e = call.callEndReason) === null || _e === void 0 ? void 0 : _e.subCode) && call.callEndReason.subCode === DENIED_PERMISSION_TO_ROOM_SUB_CODE) {
+        return CallEndReasons.DENIED_PERMISSION_TO_ROOM;
+    }
+    if (call.callEndReason) {
+        // No error codes match, assume the user simply left the call regularly
+        return CallEndReasons.LEFT_CALL;
+    }
+    throw new Error('No matching call end reason');
+};
+/**
+ * Get the current call composite page based on the current call composite state
+ *
+ * @param Call - The current call state
+ * @param previousCall - The state of the most recent previous call that has ended.
+ *
+ * @remarks - The previousCall state is needed to determine if the call has ended.
+ * When the call ends a new call object is created, and so we must lookback at the
+ * previous call state to understand how the call has ended. If there is no previous
+ * call we know that this is a fresh call and can display the configuration page.
+ *
+ * @private
+ */
+const getCallCompositePage = (call, previousCall, unsupportedBrowserInfo) => {
+    /* @conditional-compile-remove(unsupported-browser) */
+    if (isUnsupportedEnvironment(unsupportedBrowserInfo.features, unsupportedBrowserInfo.environmentInfo, unsupportedBrowserInfo.unsupportedBrowserVersionOptedIn)) {
+        return 'unsupportedEnvironment';
+    }
+    if (call) {
+        // Must check for ongoing call *before* looking at any previous calls.
+        // If the composite completes one call and joins another, the previous calls
+        // will be populated, but not relevant for determining the page.
+        // `_isInLobbyOrConnecting` needs to be checked first because `_isInCall` also returns true when call is in lobby.
+        if (_isInLobbyOrConnecting(call === null || call === void 0 ? void 0 : call.state)) {
+            return 'lobby';
+            // `LocalHold` needs to be checked before `isInCall` since it is also a state that's considered in call.
+        }
+        else if ((call === null || call === void 0 ? void 0 : call.state) === 'LocalHold') {
+            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+            return 'hold';
+        }
+        else if (_isInCall(call === null || call === void 0 ? void 0 : call.state)) {
+            return 'call';
+        }
+        else {
+            // When the call object has been constructed after clicking , but before 'connecting' has been
+            // set on the call object, we continue to show the configuration screen.
+            // The call object does not correctly reflect local device state until `call.state` moves to `connecting`.
+            // Moving to the 'lobby' page too soon leads to components that depend on the `call` object to show incorrect
+            // transitional state.
+            return 'configuration';
+        }
+    }
+    if (previousCall) {
+        const reason = getCallEndReason(previousCall);
+        /* @conditional-compile-remove(rooms) */
+        switch (reason) {
+            case CallEndReasons.ROOM_NOT_FOUND:
+                return 'roomNotFound';
+            case CallEndReasons.DENIED_PERMISSION_TO_ROOM:
+                return 'deniedPermissionToRoom';
+        }
+        switch (reason) {
+            case CallEndReasons.ACCESS_DENIED:
+                return 'accessDeniedTeamsMeeting';
+            case CallEndReasons.REMOVED_FROM_CALL:
+                return 'removedFromCall';
+            case CallEndReasons.LEFT_CALL:
+                if (previousCall.diagnostics.network.latest.noNetwork) {
+                    return 'joinCallFailedDueToNoNetwork';
+                }
+                return 'leftCall';
+        }
+    }
+    // No call state - show starting page (configuration)
+    return 'configuration';
+};
+/** @private */
+const IsCallEndedPage = (
+/**
+ * Explicitly listing the pages of this function intentionally.
+ * This protects against adding a new composite page that should be marked as an callEndedPage.
+ * EndCallPages are used to trigger onCallEnded events so this could easily be missed.
+ * When you add a new composite page this will throw a compiler error. If this new page is an
+ * EndCallPage ensure you update the END_CALL_PAGES. Afterwards update the `page` parameter
+ * type below to allow your new page, i.e. add `| <your new page>
+ */
+page) => END_CALL_PAGES.includes(page);
+/**
+ * Creates a new call control options object and sets the correct values for disabling
+ * the buttons provided in the `disabledControls` array.
+ * Returns a new object without changing the original object.
+ * @param callControlOptions options for the call control component that need to be modified.
+ * @param disabledControls An array of controls to disable.
+ * @returns a copy of callControlOptions with disabledControls disabled
+ * @private
+ */
+const disableCallControls = (callControlOptions, disabledControls) => {
+    var _a;
+    if (callControlOptions === false) {
+        return false;
+    }
+    // Ensure we clone the prop if it is an object to ensure we do not mutate the original prop.
+    let newOptions = (_a = (callControlOptions instanceof Object ? Object.assign({}, callControlOptions) : callControlOptions)) !== null && _a !== void 0 ? _a : {};
+    if (newOptions === true || newOptions === undefined) {
+        newOptions = disabledControls.reduce((acc, key) => {
+            acc[key] = { disabled: true };
+            return acc;
+        }, {});
+    }
+    else {
+        disabledControls.forEach((key) => {
+            if (newOptions[key] !== false) {
+                newOptions[key] = { disabled: true };
+            }
+        });
+    }
+    return newOptions;
+};
+/**
+ * Check if a disabled object is provided for a button and returns if the button is disabled.
+ * A button is only disabled if is explicitly set to disabled.
+ *
+ * @param option
+ * @returns whether a button is disabled
+ * @private
+ */
+const isDisabled$2 = (option) => {
+    if (option === undefined || typeof option === 'boolean') {
+        return false;
+    }
+    return option.disabled;
+};
+/* @conditional-compile-remove(call-readiness) */
+/**
+ *
+ * This function uses permission API to determine if device permission state is granted, prompt or denied
+ * @returns whether device permission state is granted, prompt or denied
+ * If permission API is not supported on this browser, do nothing and log out error
+ * @private
+ */
+const getDevicePermissionState = (setVideoState, setAudioState) => {
+    navigator.permissions
+        .query({ name: 'camera' })
+        .then((result) => {
+        setVideoState(result.state);
+    })
+        .catch(() => {
+        setVideoState('unsupported');
+    });
+    navigator.permissions
+        .query({ name: 'microphone' })
+        .then((result) => {
+        setAudioState(result.state);
+    })
+        .catch(() => {
+        setAudioState('unsupported');
+    });
+};
+/* @conditional-compile-remove(unsupported-browser) */
+const isUnsupportedEnvironment = (features, environmentInfo, unsupportedBrowserVersionOptedIn) => {
+    return !!((features === null || features === void 0 ? void 0 : features.unsupportedEnvironment) &&
+        ((environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.isSupportedBrowser) === false ||
+            ((environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.isSupportedBrowserVersion) === false && !unsupportedBrowserVersionOptedIn) ||
+            (environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.isSupportedPlatform) === false));
+};
+/**
+ * Check if an object is identifier.
+ *
+ * @param identifier
+ * @returns whether an identifier is one of identifier types (for runtime validation)
+ * @private
+ */
+const isValidIdentifier = (identifier) => {
+    return (communicationCommon.isCommunicationUserIdentifier(identifier) ||
+        communicationCommon.isPhoneNumberIdentifier(identifier) ||
+        communicationCommon.isMicrosoftTeamsUserIdentifier(identifier) ||
+        communicationCommon.isUnknownIdentifier(identifier));
+};
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 var __awaiter$c = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -15097,6 +15371,9 @@ const convertEventType = (type) => {
  * @public
  */
 const createAzureCommunicationChatAdapter = ({ endpoint: endpointUrl, userId, displayName, credential, threadId }) => __awaiter$c(void 0, void 0, void 0, function* () {
+    if (!isValidIdentifier(userId)) {
+        throw new Error('Provided userId is invalid. Please provide valid identifier object.');
+    }
     const chatClient = createStatefulChatClient({
         userId,
         displayName,
@@ -15759,514 +16036,261 @@ const ChatScreenPeoplePane = (props) => {
     return (React__default['default'].createElement(ParticipantContainer, { participantListProps: participantListProps, title: chatListHeader, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, isMobile: isMobile }));
 };
 
-/**
- * @private
- */
-/**
- * @private
- */
-const getFileUploads = (state) => {
-    /* @conditional-compile-remove(file-sharing) */
-    return state === null || state === void 0 ? void 0 : state.fileUploads;
-};
-
-// Copyright (c) Microsoft Corporation.
-/**
- * @private
- */
-const fileUploadsSelector = reselect.createSelector([getFileUploads], (fileUploads) => {
-    const files = Object.values(fileUploads || {}).map((fileUpload) => (Object.assign(Object.assign({}, fileUpload), { uploadComplete: !!fileUpload.metadata })));
-    return { files: files };
-});
-
-// Copyright (c) Microsoft Corporation.
-/**
- * @private
- */
-const useSelector$2 = (selector, selectorProps) => {
-    // use selector with no adaptation
-    return useSelectorWithAdaptation$1(selector, (state) => state, selectorProps);
-};
-
-// Copyright (c) Microsoft Corporation.
-/**
- * @private
- */
-const FileDownloadErrorBar = (props) => {
-    const { fileDownloadErrorMessage, onDismissDownloadErrorMessage } = props;
-    const messageBarIconProps = { iconName: 'ProtectedDocument' };
-    if (fileDownloadErrorMessage !== '') {
-        return (React__default['default'].createElement(react.Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center" },
-            React__default['default'].createElement(react.MessageBar, { messageBarType: react.MessageBarType.warning, onDismiss: () => {
-                    onDismissDownloadErrorMessage();
-                }, messageBarIconProps: messageBarIconProps }, fileDownloadErrorMessage)));
-    }
-    else {
-        return React__default['default'].createElement(React__default['default'].Fragment, null);
-    }
-};
-
-// Copyright (c) Microsoft Corporation.
-/**
- * @private
- */
-const ChatScreen = (props) => {
-    const { onFetchAvatarPersonaData, onRenderMessage, onRenderTypingIndicator, options, styles, fileSharing, formFactor } = props;
-    const defaultNumberOfChatMessagesToReload = 5;
-    /* @conditional-compile-remove(file-sharing) */
-    const [downloadErrorMessage, setDownloadErrorMessage] = React__default['default'].useState('');
-    const adapter = useAdapter$1();
-    const theme = useTheme();
-    React.useEffect(() => {
-        // Initial data should be always fetched by the composite(or external caller) instead of the adapter
-        adapter.fetchInitialData();
-    }, [adapter]);
-    const messageThreadProps = usePropsFor$2(MessageThread);
-    const sendBoxProps = usePropsFor$2(SendBox);
-    const typingIndicatorProps = usePropsFor$2(TypingIndicator);
-    const headerProps = useAdaptedSelector$1(getHeaderProps);
-    const errorBarProps = usePropsFor$2(ErrorBar);
-    const onRenderAvatarCallback = React.useCallback((userId, defaultOptions) => {
-        return (React__default['default'].createElement(AvatarPersona, Object.assign({ userId: userId, hidePersonaDetails: true }, defaultOptions, { dataProvider: onFetchAvatarPersonaData })));
-    }, [onFetchAvatarPersonaData]);
-    const messageThreadStyles = Object.assign({}, messageThreadChatCompositeStyles(theme.semanticColors.bodyBackground), styles === null || styles === void 0 ? void 0 : styles.messageThread);
-    const typingIndicatorStyles = Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.typingIndicator);
-    const sendBoxStyles = Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.sendBox);
-    const userId = toFlatCommunicationIdentifier(adapter.getState().userId);
-    const fileUploadButtonOnChange = React.useCallback((files) => {
-        if (!files) {
-            return;
-        }
-        /* @conditional-compile-remove(file-sharing) */
-        const fileUploads = adapter.registerActiveFileUploads(Array.from(files));
-        /* @conditional-compile-remove(file-sharing) */
-        fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.uploadHandler(userId, fileUploads);
-    }, [adapter, fileSharing, userId]);
-    /* @conditional-compile-remove(file-sharing) */
-    const onRenderFileDownloads = React.useCallback((userId, message) => (React__default['default'].createElement(_FileDownloadCards, { userId: userId, fileMetadata: message.attachedFilesMetadata || [], downloadHandler: fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.downloadHandler, onDownloadErrorMessage: (errorMessage) => {
-            setDownloadErrorMessage(errorMessage);
-        } })), [fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.downloadHandler]);
-    const AttachFileButton = React.useCallback(() => {
-        if (!(fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.uploadHandler)) {
-            return null;
-        }
-        return (React__default['default'].createElement(FileUploadButtonWrapper, { accept: fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.accept, multiple: fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.multiple, onChange: fileUploadButtonOnChange }));
-    }, [fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.accept, fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.multiple, fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.uploadHandler, fileUploadButtonOnChange]);
-    return (React__default['default'].createElement(react.Stack, { className: chatContainer, grow: true },
-        (options === null || options === void 0 ? void 0 : options.topic) !== false && React__default['default'].createElement(ChatHeader, Object.assign({}, headerProps)),
-        React__default['default'].createElement(react.Stack, { className: chatArea, tokens: participantListContainerPadding, horizontal: true, grow: true },
-            React__default['default'].createElement(react.Stack, { className: chatWrapper, grow: true },
-                (options === null || options === void 0 ? void 0 : options.errorBar) !== false && React__default['default'].createElement(ErrorBar, Object.assign({}, errorBarProps)),
-                /* @conditional-compile-remove(file-sharing) */
-                React__default['default'].createElement(FileDownloadErrorBar, { onDismissDownloadErrorMessage: React.useCallback(() => {
-                        setDownloadErrorMessage('');
-                    }, []), fileDownloadErrorMessage: downloadErrorMessage || '' }),
-                React__default['default'].createElement(MessageThread, Object.assign({}, messageThreadProps, { onRenderAvatar: onRenderAvatarCallback, onRenderMessage: onRenderMessage, 
-                    /* @conditional-compile-remove(file-sharing) */
-                    onRenderFileDownloads: onRenderFileDownloads, numberOfChatMessagesToReload: defaultNumberOfChatMessagesToReload, styles: messageThreadStyles })),
-                React__default['default'].createElement(react.Stack, { className: react.mergeStyles(sendboxContainerStyles) },
-                    React__default['default'].createElement("div", { className: react.mergeStyles(typingIndicatorContainerStyles) }, onRenderTypingIndicator ? (onRenderTypingIndicator(typingIndicatorProps.typingUsers)) : (React__default['default'].createElement(TypingIndicator, Object.assign({}, typingIndicatorProps, { styles: typingIndicatorStyles })))),
-                    React__default['default'].createElement(react.Stack, { horizontal: formFactor === 'mobile' },
-                        formFactor === 'mobile' && (React__default['default'].createElement(react.Stack, { verticalAlign: "center" },
-                            React__default['default'].createElement(AttachFileButton, null))),
-                        React__default['default'].createElement(react.Stack, { grow: true },
-                            React__default['default'].createElement(SendBox, Object.assign({}, sendBoxProps, { autoFocus: options === null || options === void 0 ? void 0 : options.autoFocus, styles: sendBoxStyles, 
-                                /* @conditional-compile-remove(file-sharing) */
-                                activeFileUploads: useSelector$2(fileUploadsSelector).files, 
-                                /* @conditional-compile-remove(file-sharing) */
-                                onCancelFileUpload: adapter.cancelFileUpload }))),
-                        formFactor !== 'mobile' && React__default['default'].createElement(AttachFileButton, null)))),
-            /* @conditional-compile-remove(chat-composite-participant-pane) */
-            (options === null || options === void 0 ? void 0 : options.participantPane) === true && (React__default['default'].createElement(ChatScreenPeoplePane, { onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, isMobile: formFactor === 'mobile' })))));
-};
-
-// Copyright (c) Microsoft Corporation.
-/**
- * A customizable UI composite for the chat experience.
- *
- * @remarks Chat composite min width and height are respectively 17.5rem and 20rem (280px and 320px, with default rem at 16px)
- *
- * @public
- */
-const ChatComposite = (props) => {
-    const { adapter, options, onFetchAvatarPersonaData, onRenderTypingIndicator, onRenderMessage, onFetchParticipantMenuItems } = props;
-    const formFactor = props['formFactor'] || 'desktop';
-    /**
-     * @TODO Remove this function and pass the props directly when file-sharing is promoted to stable.
-     * @private
-     */
-    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-    const fileSharingOptions = () => {
-        /* @conditional-compile-remove(file-sharing) */
-        return {
-            fileSharing: options === null || options === void 0 ? void 0 : options.fileSharing
-        };
-    };
-    return (React__default['default'].createElement("div", { className: chatScreenContainerStyle },
-        React__default['default'].createElement(BaseProvider, Object.assign({}, props),
-            React__default['default'].createElement(ChatAdapterProvider, { adapter: adapter },
-                React__default['default'].createElement(ChatScreen, Object.assign({ formFactor: formFactor, options: options, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onRenderTypingIndicator: onRenderTypingIndicator, onRenderMessage: onRenderMessage, onFetchParticipantMenuItems: onFetchParticipantMenuItems }, fileSharingOptions()))))));
-};
-
-// Copyright (c) Microsoft Corporation.
-const CallAdapterContext = React.createContext(undefined);
-/**
- * @private
- */
-const CallAdapterProvider = (props) => {
-    const { adapter } = props;
-    return React__default['default'].createElement(CallAdapterContext.Provider, { value: adapter }, props.children);
-};
-/**
- * @private
- */
-const useAdapter = () => {
-    const adapter = React.useContext(CallAdapterContext);
-    if (!adapter) {
-        throw 'Cannot find adapter please initialize before usage.';
-    }
-    return adapter;
-};
-
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-/** @private */
-const containerDivStyles = { position: 'relative', width: '100%', height: '100%' };
-
-// Copyright (c) Microsoft Corporation.
-/**
- * @private
- */
-const useAdaptedSelector = (selector, selectorProps) => {
-    return useSelectorWithAdaptation(selector, adaptCompositeState, selectorProps);
-};
-/**
- * @private
- */
-const useSelectorWithAdaptation = (selector, adaptState, selectorProps) => {
-    var _a;
-    const adapter = useAdapter();
-    // Keeps track of whether the current component is mounted or not. If it has unmounted, make sure we do not modify the
-    // state or it will cause React warnings in the console. https://skype.visualstudio.com/SPOOL/_workitems/edit/2453212
-    const mounted = React.useRef(false);
-    React.useEffect(() => {
-        mounted.current = true;
-        return () => {
-            mounted.current = false;
-        };
-    });
-    const callId = (_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.id;
-    const callConfigProps = React.useMemo(() => ({
-        callId
-    }), [callId]);
-    const [props, setProps] = React.useState(selector(adaptState(adapter.getState()), selectorProps !== null && selectorProps !== void 0 ? selectorProps : callConfigProps));
-    const propRef = React.useRef(props);
-    propRef.current = props;
-    React.useEffect(() => {
-        const onStateChange = (state) => {
-            if (!mounted.current) {
-                return;
-            }
-            const newProps = selector(adaptState(state), selectorProps !== null && selectorProps !== void 0 ? selectorProps : callConfigProps);
-            if (propRef.current !== newProps) {
-                setProps(newProps);
-            }
-        };
-        adapter.onStateChange(onStateChange);
-        return () => {
-            adapter.offStateChange(onStateChange);
-        };
-    }, [adaptState, adapter, selector, selectorProps, callConfigProps]);
-    return props;
-};
-const memoizeState = memoizeOne__default['default']((userId, deviceManager, calls, latestErrors, displayName) => ({
-    userId,
-    incomingCalls: {},
-    incomingCallsEnded: {},
-    callsEnded: {},
-    deviceManager,
-    callAgent: { displayName },
-    calls,
-    latestErrors
-}));
-const memoizeCalls = memoizeOne__default['default']((call) => (call ? { [call.id]: call } : {}));
-const adaptCompositeState = (compositeState) => {
-    return memoizeState(compositeState.userId, compositeState.devices, memoizeCalls(compositeState.call), 
-    // This is an unsafe type expansion.
-    // compositeState.latestErrors can contain properties that are not valid in CallErrors.
-    //
-    // But there is no way to check for valid property names at runtime:
-    // - The set of valid property names is built from types in the @azure/communication-calling.
-    //   Thus we don't have a literal array of allowed strings at runtime.
-    // - Due to minification / uglification, the property names from the objects at runtime can't be used
-    //   to compare against permissible values inferred from the types.
-    //
-    // This is not a huge problem -- it simply means that our adapted selector will include some extra operations
-    // that are unknown to the UI component and data binding libraries. Generic handling of the errors (e.g.,
-    // just displaying them in some UI surface) will continue to work for these operations. Handling of
-    // specific operations (e.g., acting on errors related to permission issues) will ignore these operations.
-    compositeState.latestErrors, compositeState.displayName);
-};
-
+/**
+ * @private
+ */
+/**
+ * @private
+ */
+const getFileUploads = (state) => {
+    /* @conditional-compile-remove(file-sharing) */
+    return state === null || state === void 0 ? void 0 : state.fileUploads;
+};
+
 // Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
 /**
- * Subset of CallCompositePages that represent an end call state.
  * @private
  */
-const END_CALL_PAGES = [
-    'accessDeniedTeamsMeeting',
-    'joinCallFailedDueToNoNetwork',
-    'leftCall',
-    /* @conditional-compile-remove(rooms) */ 'deniedPermissionToRoom',
-    'removedFromCall',
-    /* @conditional-compile-remove(rooms) */ 'roomNotFound',
-    /* @conditional-compile-remove(unsupported-browser) */ 'unsupportedEnvironment'
-];
+const fileUploadsSelector = reselect.createSelector([getFileUploads], (fileUploads) => {
+    const files = Object.values(fileUploads || {}).map((fileUpload) => (Object.assign(Object.assign({}, fileUpload), { uploadComplete: !!fileUpload.metadata })));
+    return { files: files };
+});
 
 // Copyright (c) Microsoft Corporation.
-const ACCESS_DENIED_TEAMS_MEETING_SUB_CODE = 5854;
-const REMOTE_PSTN_USER_HUNG_UP = 560000;
-const REMOVED_FROM_CALL_SUB_CODES = [5000, 5300, REMOTE_PSTN_USER_HUNG_UP];
-/* @conditional-compile-remove(rooms) */
-const ROOM_NOT_FOUND_SUB_CODE = 5751;
-/* @conditional-compile-remove(rooms) */
-const DENIED_PERMISSION_TO_ROOM_SUB_CODE = 5828;
 /**
  * @private
  */
-const isCameraOn = (state) => {
-    if (state.call) {
-        const stream = state.call.localVideoStreams.find((stream) => stream.mediaStreamType === 'Video');
-        return !!stream;
-    }
-    else {
-        if (state.devices.selectedCamera) {
-            const previewOn = _isPreviewOn(state.devices);
-            return previewOn;
-        }
-    }
-    return false;
+const useSelector$2 = (selector, selectorProps) => {
+    // use selector with no adaptation
+    return useSelectorWithAdaptation$1(selector, (state) => state, selectorProps);
 };
+
+// Copyright (c) Microsoft Corporation.
 /**
- * Reduce the set of call controls visible on mobile.
- * For example do not show screenshare button.
- *
  * @private
  */
-const reduceCallControlsForMobile = (callControlOptions) => {
-    if (callControlOptions === false) {
-        return false;
-    }
-    // Ensure call controls a valid object.
-    const reduceCallControlOptions = callControlOptions === true ? {} : callControlOptions || {};
-    // Set to compressed mode when composite is optimized for mobile
-    reduceCallControlOptions.displayType = 'compact';
-    // Do not show screen share button when composite is optimized for mobile unless the developer
-    // has explicitly opted in.
-    if (reduceCallControlOptions.screenShareButton !== true) {
-        reduceCallControlOptions.screenShareButton = false;
-    }
-    return reduceCallControlOptions;
-};
-var CallEndReasons;
-(function (CallEndReasons) {
-    CallEndReasons[CallEndReasons["LEFT_CALL"] = 0] = "LEFT_CALL";
-    CallEndReasons[CallEndReasons["ACCESS_DENIED"] = 1] = "ACCESS_DENIED";
-    CallEndReasons[CallEndReasons["REMOVED_FROM_CALL"] = 2] = "REMOVED_FROM_CALL";
-    CallEndReasons[CallEndReasons["ROOM_NOT_FOUND"] = 3] = "ROOM_NOT_FOUND";
-    CallEndReasons[CallEndReasons["DENIED_PERMISSION_TO_ROOM"] = 4] = "DENIED_PERMISSION_TO_ROOM";
-})(CallEndReasons || (CallEndReasons = {}));
-const getCallEndReason = (call) => {
-    var _a, _b, _c, _d, _e;
-    const remoteParticipantsEndedArray = Array.from(Object.values(call.remoteParticipantsEnded));
-    /**
-     * Handle the special case in a PSTN call where removing the last user kicks the caller out of the call.
-     * The code and subcode is the same as when a user is removed from a teams interop call.
-     * Hence, we look at the last remote participant removed to determine if the last participant removed was a phone number.
-     * If yes, the caller was kicked out of the call, but we need to show them that they left the call.
-     * Note: This check will only work for 1:1 PSTN Calls. The subcode is different for 1:N PSTN calls, and we do not need to handle that case.
-     */
-    if (remoteParticipantsEndedArray.length === 1 &&
-        communicationCommon.isPhoneNumberIdentifier(remoteParticipantsEndedArray[0].identifier) &&
-        ((_a = call.callEndReason) === null || _a === void 0 ? void 0 : _a.subCode) !== REMOTE_PSTN_USER_HUNG_UP) {
-        return CallEndReasons.LEFT_CALL;
-    }
-    if (((_b = call.callEndReason) === null || _b === void 0 ? void 0 : _b.subCode) && call.callEndReason.subCode === ACCESS_DENIED_TEAMS_MEETING_SUB_CODE) {
-        return CallEndReasons.ACCESS_DENIED;
-    }
-    if (((_c = call.callEndReason) === null || _c === void 0 ? void 0 : _c.subCode) && REMOVED_FROM_CALL_SUB_CODES.includes(call.callEndReason.subCode)) {
-        return CallEndReasons.REMOVED_FROM_CALL;
-    }
-    /* @conditional-compile-remove(rooms) */
-    if (((_d = call.callEndReason) === null || _d === void 0 ? void 0 : _d.subCode) && call.callEndReason.subCode === ROOM_NOT_FOUND_SUB_CODE) {
-        return CallEndReasons.ROOM_NOT_FOUND;
-    }
-    /* @conditional-compile-remove(rooms) */
-    if (((_e = call.callEndReason) === null || _e === void 0 ? void 0 : _e.subCode) && call.callEndReason.subCode === DENIED_PERMISSION_TO_ROOM_SUB_CODE) {
-        return CallEndReasons.DENIED_PERMISSION_TO_ROOM;
+const FileDownloadErrorBar = (props) => {
+    const { fileDownloadErrorMessage, onDismissDownloadErrorMessage } = props;
+    const messageBarIconProps = { iconName: 'ProtectedDocument' };
+    if (fileDownloadErrorMessage !== '') {
+        return (React__default['default'].createElement(react.Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center" },
+            React__default['default'].createElement(react.MessageBar, { messageBarType: react.MessageBarType.warning, onDismiss: () => {
+                    onDismissDownloadErrorMessage();
+                }, messageBarIconProps: messageBarIconProps }, fileDownloadErrorMessage)));
     }
-    if (call.callEndReason) {
-        // No error codes match, assume the user simply left the call regularly
-        return CallEndReasons.LEFT_CALL;
+    else {
+        return React__default['default'].createElement(React__default['default'].Fragment, null);
     }
-    throw new Error('No matching call end reason');
 };
+
+// Copyright (c) Microsoft Corporation.
 /**
- * Get the current call composite page based on the current call composite state
- *
- * @param Call - The current call state
- * @param previousCall - The state of the most recent previous call that has ended.
- *
- * @remarks - The previousCall state is needed to determine if the call has ended.
- * When the call ends a new call object is created, and so we must lookback at the
- * previous call state to understand how the call has ended. If there is no previous
- * call we know that this is a fresh call and can display the configuration page.
- *
  * @private
  */
-const getCallCompositePage = (call, previousCall, unsupportedBrowserInfo) => {
-    /* @conditional-compile-remove(unsupported-browser) */
-    if (isUnsupportedEnvironment(unsupportedBrowserInfo.features, unsupportedBrowserInfo.environmentInfo, unsupportedBrowserInfo.unsupportedBrowserVersionOptedIn)) {
-        return 'unsupportedEnvironment';
-    }
-    if (call) {
-        // Must check for ongoing call *before* looking at any previous calls.
-        // If the composite completes one call and joins another, the previous calls
-        // will be populated, but not relevant for determining the page.
-        // `_isInLobbyOrConnecting` needs to be checked first because `_isInCall` also returns true when call is in lobby.
-        if (_isInLobbyOrConnecting(call === null || call === void 0 ? void 0 : call.state)) {
-            return 'lobby';
-            // `LocalHold` needs to be checked before `isInCall` since it is also a state that's considered in call.
-        }
-        else if ((call === null || call === void 0 ? void 0 : call.state) === 'LocalHold') {
-            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-            return 'hold';
-        }
-        else if (_isInCall(call === null || call === void 0 ? void 0 : call.state)) {
-            return 'call';
-        }
-        else {
-            // When the call object has been constructed after clicking , but before 'connecting' has been
-            // set on the call object, we continue to show the configuration screen.
-            // The call object does not correctly reflect local device state until `call.state` moves to `connecting`.
-            // Moving to the 'lobby' page too soon leads to components that depend on the `call` object to show incorrect
-            // transitional state.
-            return 'configuration';
-        }
-    }
-    if (previousCall) {
-        const reason = getCallEndReason(previousCall);
-        /* @conditional-compile-remove(rooms) */
-        switch (reason) {
-            case CallEndReasons.ROOM_NOT_FOUND:
-                return 'roomNotFound';
-            case CallEndReasons.DENIED_PERMISSION_TO_ROOM:
-                return 'deniedPermissionToRoom';
+const ChatScreen = (props) => {
+    const { onFetchAvatarPersonaData, onRenderMessage, onRenderTypingIndicator, options, styles, fileSharing, formFactor } = props;
+    const defaultNumberOfChatMessagesToReload = 5;
+    /* @conditional-compile-remove(file-sharing) */
+    const [downloadErrorMessage, setDownloadErrorMessage] = React__default['default'].useState('');
+    const adapter = useAdapter$1();
+    const theme = useTheme();
+    React.useEffect(() => {
+        // Initial data should be always fetched by the composite(or external caller) instead of the adapter
+        adapter.fetchInitialData();
+    }, [adapter]);
+    const messageThreadProps = usePropsFor$2(MessageThread);
+    const sendBoxProps = usePropsFor$2(SendBox);
+    const typingIndicatorProps = usePropsFor$2(TypingIndicator);
+    const headerProps = useAdaptedSelector$1(getHeaderProps);
+    const errorBarProps = usePropsFor$2(ErrorBar);
+    const onRenderAvatarCallback = React.useCallback((userId, defaultOptions) => {
+        return (React__default['default'].createElement(AvatarPersona, Object.assign({ userId: userId, hidePersonaDetails: true }, defaultOptions, { dataProvider: onFetchAvatarPersonaData })));
+    }, [onFetchAvatarPersonaData]);
+    const messageThreadStyles = Object.assign({}, messageThreadChatCompositeStyles(theme.semanticColors.bodyBackground), styles === null || styles === void 0 ? void 0 : styles.messageThread);
+    const typingIndicatorStyles = Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.typingIndicator);
+    const sendBoxStyles = Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.sendBox);
+    const userId = toFlatCommunicationIdentifier(adapter.getState().userId);
+    const fileUploadButtonOnChange = React.useCallback((files) => {
+        if (!files) {
+            return;
         }
-        switch (reason) {
-            case CallEndReasons.ACCESS_DENIED:
-                return 'accessDeniedTeamsMeeting';
-            case CallEndReasons.REMOVED_FROM_CALL:
-                return 'removedFromCall';
-            case CallEndReasons.LEFT_CALL:
-                if (previousCall.diagnostics.network.latest.noNetwork) {
-                    return 'joinCallFailedDueToNoNetwork';
-                }
-                return 'leftCall';
+        /* @conditional-compile-remove(file-sharing) */
+        const fileUploads = adapter.registerActiveFileUploads(Array.from(files));
+        /* @conditional-compile-remove(file-sharing) */
+        fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.uploadHandler(userId, fileUploads);
+    }, [adapter, fileSharing, userId]);
+    /* @conditional-compile-remove(file-sharing) */
+    const onRenderFileDownloads = React.useCallback((userId, message) => (React__default['default'].createElement(_FileDownloadCards, { userId: userId, fileMetadata: message.attachedFilesMetadata || [], downloadHandler: fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.downloadHandler, onDownloadErrorMessage: (errorMessage) => {
+            setDownloadErrorMessage(errorMessage);
+        } })), [fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.downloadHandler]);
+    const AttachFileButton = React.useCallback(() => {
+        if (!(fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.uploadHandler)) {
+            return null;
         }
-    }
-    // No call state - show starting page (configuration)
-    return 'configuration';
+        return (React__default['default'].createElement(FileUploadButtonWrapper, { accept: fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.accept, multiple: fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.multiple, onChange: fileUploadButtonOnChange }));
+    }, [fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.accept, fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.multiple, fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.uploadHandler, fileUploadButtonOnChange]);
+    return (React__default['default'].createElement(react.Stack, { className: chatContainer, grow: true },
+        (options === null || options === void 0 ? void 0 : options.topic) !== false && React__default['default'].createElement(ChatHeader, Object.assign({}, headerProps)),
+        React__default['default'].createElement(react.Stack, { className: chatArea, tokens: participantListContainerPadding, horizontal: true, grow: true },
+            React__default['default'].createElement(react.Stack, { className: chatWrapper, grow: true },
+                (options === null || options === void 0 ? void 0 : options.errorBar) !== false && React__default['default'].createElement(ErrorBar, Object.assign({}, errorBarProps)),
+                /* @conditional-compile-remove(file-sharing) */
+                React__default['default'].createElement(FileDownloadErrorBar, { onDismissDownloadErrorMessage: React.useCallback(() => {
+                        setDownloadErrorMessage('');
+                    }, []), fileDownloadErrorMessage: downloadErrorMessage || '' }),
+                React__default['default'].createElement(MessageThread, Object.assign({}, messageThreadProps, { onRenderAvatar: onRenderAvatarCallback, onRenderMessage: onRenderMessage, 
+                    /* @conditional-compile-remove(file-sharing) */
+                    onRenderFileDownloads: onRenderFileDownloads, numberOfChatMessagesToReload: defaultNumberOfChatMessagesToReload, styles: messageThreadStyles })),
+                React__default['default'].createElement(react.Stack, { className: react.mergeStyles(sendboxContainerStyles) },
+                    React__default['default'].createElement("div", { className: react.mergeStyles(typingIndicatorContainerStyles) }, onRenderTypingIndicator ? (onRenderTypingIndicator(typingIndicatorProps.typingUsers)) : (React__default['default'].createElement(TypingIndicator, Object.assign({}, typingIndicatorProps, { styles: typingIndicatorStyles })))),
+                    React__default['default'].createElement(react.Stack, { horizontal: formFactor === 'mobile' },
+                        formFactor === 'mobile' && (React__default['default'].createElement(react.Stack, { verticalAlign: "center" },
+                            React__default['default'].createElement(AttachFileButton, null))),
+                        React__default['default'].createElement(react.Stack, { grow: true },
+                            React__default['default'].createElement(SendBox, Object.assign({}, sendBoxProps, { autoFocus: options === null || options === void 0 ? void 0 : options.autoFocus, styles: sendBoxStyles, 
+                                /* @conditional-compile-remove(file-sharing) */
+                                activeFileUploads: useSelector$2(fileUploadsSelector).files, 
+                                /* @conditional-compile-remove(file-sharing) */
+                                onCancelFileUpload: adapter.cancelFileUpload }))),
+                        formFactor !== 'mobile' && React__default['default'].createElement(AttachFileButton, null)))),
+            /* @conditional-compile-remove(chat-composite-participant-pane) */
+            (options === null || options === void 0 ? void 0 : options.participantPane) === true && (React__default['default'].createElement(ChatScreenPeoplePane, { onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, isMobile: formFactor === 'mobile' })))));
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * A customizable UI composite for the chat experience.
+ *
+ * @remarks Chat composite min width and height are respectively 17.5rem and 20rem (280px and 320px, with default rem at 16px)
+ *
+ * @public
+ */
+const ChatComposite = (props) => {
+    const { adapter, options, onFetchAvatarPersonaData, onRenderTypingIndicator, onRenderMessage, onFetchParticipantMenuItems } = props;
+    const formFactor = props['formFactor'] || 'desktop';
+    /**
+     * @TODO Remove this function and pass the props directly when file-sharing is promoted to stable.
+     * @private
+     */
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    const fileSharingOptions = () => {
+        /* @conditional-compile-remove(file-sharing) */
+        return {
+            fileSharing: options === null || options === void 0 ? void 0 : options.fileSharing
+        };
+    };
+    return (React__default['default'].createElement("div", { className: chatScreenContainerStyle },
+        React__default['default'].createElement(BaseProvider, Object.assign({}, props),
+            React__default['default'].createElement(ChatAdapterProvider, { adapter: adapter },
+                React__default['default'].createElement(ChatScreen, Object.assign({ formFactor: formFactor, options: options, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onRenderTypingIndicator: onRenderTypingIndicator, onRenderMessage: onRenderMessage, onFetchParticipantMenuItems: onFetchParticipantMenuItems }, fileSharingOptions()))))));
 };
-/** @private */
-const IsCallEndedPage = (
+
+// Copyright (c) Microsoft Corporation.
+const CallAdapterContext = React.createContext(undefined);
 /**
- * Explicitly listing the pages of this function intentionally.
- * This protects against adding a new composite page that should be marked as an callEndedPage.
- * EndCallPages are used to trigger onCallEnded events so this could easily be missed.
- * When you add a new composite page this will throw a compiler error. If this new page is an
- * EndCallPage ensure you update the END_CALL_PAGES. Afterwards update the `page` parameter
- * type below to allow your new page, i.e. add `| <your new page>
+ * @private
  */
-page) => END_CALL_PAGES.includes(page);
+const CallAdapterProvider = (props) => {
+    const { adapter } = props;
+    return React__default['default'].createElement(CallAdapterContext.Provider, { value: adapter }, props.children);
+};
 /**
- * Creates a new call control options object and sets the correct values for disabling
- * the buttons provided in the `disabledControls` array.
- * Returns a new object without changing the original object.
- * @param callControlOptions options for the call control component that need to be modified.
- * @param disabledControls An array of controls to disable.
- * @returns a copy of callControlOptions with disabledControls disabled
  * @private
  */
-const disableCallControls = (callControlOptions, disabledControls) => {
-    var _a;
-    if (callControlOptions === false) {
-        return false;
-    }
-    // Ensure we clone the prop if it is an object to ensure we do not mutate the original prop.
-    let newOptions = (_a = (callControlOptions instanceof Object ? Object.assign({}, callControlOptions) : callControlOptions)) !== null && _a !== void 0 ? _a : {};
-    if (newOptions === true || newOptions === undefined) {
-        newOptions = disabledControls.reduce((acc, key) => {
-            acc[key] = { disabled: true };
-            return acc;
-        }, {});
-    }
-    else {
-        disabledControls.forEach((key) => {
-            if (newOptions[key] !== false) {
-                newOptions[key] = { disabled: true };
-            }
-        });
+const useAdapter = () => {
+    const adapter = React.useContext(CallAdapterContext);
+    if (!adapter) {
+        throw 'Cannot find adapter please initialize before usage.';
     }
-    return newOptions;
+    return adapter;
 };
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/** @private */
+const containerDivStyles = { position: 'relative', width: '100%', height: '100%' };
+
+// Copyright (c) Microsoft Corporation.
 /**
- * Check if a disabled object is provided for a button and returns if the button is disabled.
- * A button is only disabled if is explicitly set to disabled.
- *
- * @param option
- * @returns whether a button is disabled
  * @private
  */
-const isDisabled$2 = (option) => {
-    if (option === undefined || typeof option === 'boolean') {
-        return false;
-    }
-    return option.disabled;
+const useAdaptedSelector = (selector, selectorProps) => {
+    return useSelectorWithAdaptation(selector, adaptCompositeState, selectorProps);
 };
-/* @conditional-compile-remove(call-readiness) */
 /**
- *
- * This function uses permission API to determine if device permission state is granted, prompt or denied
- * @returns whether device permission state is granted, prompt or denied
- * If permission API is not supported on this browser, do nothing and log out error
  * @private
  */
-const getDevicePermissionState = (setVideoState, setAudioState) => {
-    navigator.permissions
-        .query({ name: 'camera' })
-        .then((result) => {
-        setVideoState(result.state);
-    })
-        .catch(() => {
-        setVideoState('unsupported');
-    });
-    navigator.permissions
-        .query({ name: 'microphone' })
-        .then((result) => {
-        setAudioState(result.state);
-    })
-        .catch(() => {
-        setAudioState('unsupported');
+const useSelectorWithAdaptation = (selector, adaptState, selectorProps) => {
+    var _a;
+    const adapter = useAdapter();
+    // Keeps track of whether the current component is mounted or not. If it has unmounted, make sure we do not modify the
+    // state or it will cause React warnings in the console. https://skype.visualstudio.com/SPOOL/_workitems/edit/2453212
+    const mounted = React.useRef(false);
+    React.useEffect(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+        };
     });
+    const callId = (_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.id;
+    const callConfigProps = React.useMemo(() => ({
+        callId
+    }), [callId]);
+    const [props, setProps] = React.useState(selector(adaptState(adapter.getState()), selectorProps !== null && selectorProps !== void 0 ? selectorProps : callConfigProps));
+    const propRef = React.useRef(props);
+    propRef.current = props;
+    React.useEffect(() => {
+        const onStateChange = (state) => {
+            if (!mounted.current) {
+                return;
+            }
+            const newProps = selector(adaptState(state), selectorProps !== null && selectorProps !== void 0 ? selectorProps : callConfigProps);
+            if (propRef.current !== newProps) {
+                setProps(newProps);
+            }
+        };
+        adapter.onStateChange(onStateChange);
+        return () => {
+            adapter.offStateChange(onStateChange);
+        };
+    }, [adaptState, adapter, selector, selectorProps, callConfigProps]);
+    return props;
 };
-/* @conditional-compile-remove(unsupported-browser) */
-const isUnsupportedEnvironment = (features, environmentInfo, unsupportedBrowserVersionOptedIn) => {
-    return !!((features === null || features === void 0 ? void 0 : features.unsupportedEnvironment) &&
-        ((environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.isSupportedBrowser) === false ||
-            ((environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.isSupportedBrowserVersion) === false && !unsupportedBrowserVersionOptedIn) ||
-            (environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.isSupportedPlatform) === false));
+const memoizeState = memoizeOne__default['default']((userId, deviceManager, calls, latestErrors, displayName, alternateCallerId, environmentInfo) => ({
+    userId,
+    incomingCalls: {},
+    incomingCallsEnded: {},
+    callsEnded: {},
+    deviceManager,
+    callAgent: { displayName },
+    calls,
+    latestErrors,
+    /* @conditional-compile-remove(PSTN-calls) */
+    alternateCallerId,
+    /* @conditional-compile-remove(unsupported-browser) */
+    environmentInfo
+}));
+const memoizeCalls = memoizeOne__default['default']((call) => (call ? { [call.id]: call } : {}));
+const adaptCompositeState = (compositeState) => {
+    return memoizeState(compositeState.userId, compositeState.devices, memoizeCalls(compositeState.call), 
+    // This is an unsafe type expansion.
+    // compositeState.latestErrors can contain properties that are not valid in CallErrors.
+    //
+    // But there is no way to check for valid property names at runtime:
+    // - The set of valid property names is built from types in the @azure/communication-calling.
+    //   Thus we don't have a literal array of allowed strings at runtime.
+    // - Due to minification / uglification, the property names from the objects at runtime can't be used
+    //   to compare against permissible values inferred from the types.
+    //
+    // This is not a huge problem -- it simply means that our adapted selector will include some extra operations
+    // that are unknown to the UI component and data binding libraries. Generic handling of the errors (e.g.,
+    // just displaying them in some UI surface) will continue to work for these operations. Handling of
+    // specific operations (e.g., acting on errors related to permission issues) will ignore these operations.
+    compositeState.latestErrors, compositeState.displayName, 
+    /* @conditional-compile-remove(PSTN-calls) */
+    compositeState.alternateCallerId, 
+    /* @conditional-compile-remove(unsupported-browser) */
+    compositeState.environmentInfo);
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -16665,7 +16689,7 @@ const Microphone = (props) => {
         : {};
     const styles = React.useMemo(() => { var _a; return concatButtonBaseStyles((_a = props.styles) !== null && _a !== void 0 ? _a : {}); }, [props.styles]);
     // tab focus on MicrophoneButton on page load
-    return (React__default['default'].createElement(MicrophoneButton, Object.assign({ autoFocus: true, "data-ui-id": "call-composite-microphone-button" }, microphoneButtonProps, { showLabel: props.displayType !== 'compact', styles: styles }, microphoneButtonStrings, { enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection, disabled: microphoneButtonProps.disabled || props.disabled })));
+    return (React__default['default'].createElement(MicrophoneButton, Object.assign({ "data-ui-id": "call-composite-microphone-button" }, microphoneButtonProps, { showLabel: props.displayType !== 'compact', styles: styles }, microphoneButtonStrings, { enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection, disabled: microphoneButtonProps.disabled || props.disabled })));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -17096,6 +17120,14 @@ const bannerNotificationStyles = {
         pointerEvents: 'auto' // to allow the dismissal or error and warning bars in the notification container
     }
 };
+/**
+ * @private
+ */
+const callArrangementContainerStyles = {
+    root: {
+        flexDirection: 'column-reverse' // to allow first initial keyboard focus on ControlBar
+    }
+};
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -18081,25 +18113,25 @@ const CallArrangement = (props) => {
     }
     return (React__default['default'].createElement("div", { ref: containerRef, className: react.mergeStyles(containerDivStyles) },
         React__default['default'].createElement(react.Stack, { verticalFill: true, horizontalAlign: "stretch", className: containerClassName, "data-ui-id": props.dataUiId },
-            React__default['default'].createElement(react.Stack, { horizontal: true, grow: true },
+            React__default['default'].createElement(react.Stack, { horizontal: true, grow: true, styles: callArrangementContainerStyles },
                 React__default['default'].createElement(react.Stack.Item, { styles: notificationsContainerStyles },
                     React__default['default'].createElement(react.Stack, { styles: bannerNotificationStyles },
                         React__default['default'].createElement(_ComplianceBanner, Object.assign({}, props.complianceBannerProps))),
                     errorBarProps !== false && (React__default['default'].createElement(react.Stack, { styles: bannerNotificationStyles },
                         React__default['default'].createElement(ErrorBar, Object.assign({}, errorBarProps)))),
                     canUnmute && !!props.mutedNotificationProps && React__default['default'].createElement(MutedNotification, Object.assign({}, props.mutedNotificationProps))),
+                ((_b = props.callControlProps) === null || _b === void 0 ? void 0 : _b.options) !== false &&
+                    /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
+                    !isMobileWithActivePane && (React__default['default'].createElement(react.Stack.Item, { className: callControlsContainerStyles },
+                    React__default['default'].createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView, 
+                        /* @conditional-compile-remove(one-to-n-calling) */
+                        peopleButtonChecked: activePane === 'people', 
+                        /* @conditional-compile-remove(one-to-n-calling) */
+                        onPeopleButtonClicked: togglePeoplePane })))),
                 React__default['default'].createElement(react.Stack.Item, { grow: true, style: callCompositeContainerFlex() },
                     React__default['default'].createElement(react.Stack.Item, { styles: callGalleryStyles, grow: true }, props.onRenderGalleryContent && (React__default['default'].createElement(react.Stack, { verticalFill: true, styles: mediaGalleryContainerStyles }, props.onRenderGalleryContent())))),
                 /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
-                callPaneContent()),
-            ((_b = props.callControlProps) === null || _b === void 0 ? void 0 : _b.options) !== false &&
-                /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
-                !isMobileWithActivePane && (React__default['default'].createElement(react.Stack.Item, { className: callControlsContainerStyles },
-                React__default['default'].createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView, 
-                    /* @conditional-compile-remove(one-to-n-calling) */
-                    peopleButtonChecked: activePane === 'people', 
-                    /* @conditional-compile-remove(one-to-n-calling) */
-                    onPeopleButtonClicked: togglePeoplePane })))))));
+                callPaneContent()))));
 };
 /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
 const showShowPeopleTabHeaderButton$1 = (callControls) => {
@@ -20595,6 +20627,9 @@ class AzureCommunicationCallAdapter {
 const createAzureCommunicationCallAdapter = ({ userId, displayName, credential, locator, 
 /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId, 
 /* @conditional-compile-remove(rooms) */ options }) => __awaiter$4(void 0, void 0, void 0, function* () {
+    if (!isValidIdentifier(userId)) {
+        throw new Error('Invalid identifier. Please provide valid identifier object.');
+    }
     const callClient = createStatefulCallClient({
         userId,
         /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId
@@ -21087,6 +21122,50 @@ const DesktopMoreButton = (props) => {
         strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: { items: moreButtonContextualMenuItems() } })));
 };
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * @private
+ */
+const compositeOuterContainerStyles = {
+    root: {
+        width: '100%',
+        // Create a new stacking context so that DrawerMenu can be positioned absolutely.
+        position: 'relative'
+    }
+};
+/** @private */
+const callCompositeContainerStyles = {
+    root: {
+        // Start a new stacking context so that any `position:absolute` elements
+        // inside the call composite do not compete with its siblings.
+        position: 'relative'
+    }
+};
+/** @private */
+const controlBarContainerStyles = {
+    root: {
+        // Start a new stacking context so that any `position:absolute` elements
+        // inside the control bar do not compete with its siblings.
+        position: 'relative'
+    }
+};
+/** @private */
+const hiddenAutoFocusButtonStyles = {
+    root: {
+        width: '0',
+        height: '0',
+        margin: '0',
+        minHeight: '0',
+        minWidth: '0',
+        maxHeight: '0',
+        maxWidth: '0',
+        outline: 'none',
+        padding: '0',
+        position: 'absolute'
+    }
+};
+
 // Copyright (c) Microsoft Corporation.
 const inferCallWithChatControlOptions$1 = (mobileView, callWithChatControls) => {
     if (callWithChatControls === false) {
@@ -21109,6 +21188,13 @@ const inferCallWithChatControlOptions$1 = (mobileView, callWithChatControls) =>
  */
 const CallWithChatControlBar = (props) => {
     var _a, _b;
+    React.useEffect(() => {
+        var _a;
+        // On mount, button used for initial focus is hidden to prevent screen readers from announcing the initial focus
+        if (document.querySelector('[data-ui-id=call-with-chat-autofocus-hidden-button]') === document.activeElement) {
+            (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.setAttribute('hidden', 'true');
+        }
+    }, []);
     const theme = react.useTheme();
     const callWithChatStrings = useCallWithChatCompositeStrings();
     const options = inferCallWithChatControlOptions$1(props.mobileView, props.callControls);
@@ -21149,6 +21235,7 @@ const CallWithChatControlBar = (props) => {
         React__default['default'].createElement(react.Stack.Item, { grow: true },
             React__default['default'].createElement(CallAdapterProvider, { adapter: props.callAdapter },
                 React__default['default'].createElement(react.Stack, { horizontalAlign: "center" },
+                    React__default['default'].createElement(ControlBarButton, { autoFocus: true, ariaHidden: true, "data-ui-id": 'call-with-chat-autofocus-hidden-button', styles: hiddenAutoFocusButtonStyles, tabIndex: -1 }),
                     React__default['default'].createElement(react.Stack.Item, null,
                         React__default['default'].createElement(ControlBar, { layout: "horizontal", styles: centerContainerStyles },
                             isEnabled$1(options.microphoneButton) && (React__default['default'].createElement(Microphone, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, 
@@ -21255,35 +21342,6 @@ const getDesktopEndCallButtonStyles = (theme) => {
 };
 const isEnabled$1 = (option) => option !== false;
 
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-/**
- * @private
- */
-const compositeOuterContainerStyles = {
-    root: {
-        width: '100%',
-        // Create a new stacking context so that DrawerMenu can be positioned absolutely.
-        position: 'relative'
-    }
-};
-/** @private */
-const callCompositeContainerStyles = {
-    root: {
-        // Start a new stacking context so that any `position:absolute` elements
-        // inside the call composite do not compete with its siblings.
-        position: 'relative'
-    }
-};
-/** @private */
-const controlBarContainerStyles = {
-    root: {
-        // Start a new stacking context so that any `position:absolute` elements
-        // inside the control bar do not compete with its siblings.
-        position: 'relative'
-    }
-};
-
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 var __awaiter$3 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {