@azure/communication-react 1.3.3-alpha-202208200013.0 → 1.3.3-alpha-202208250017.0

package/dist/communication-react.d.ts

@@ -361,6 +361,16 @@ export declare interface BaseCustomStyles {
 export declare interface CallAdapter extends AdapterState<CallAdapterState>, Disposable, CallAdapterCallManagement, CallAdapterDeviceManagement, CallAdapterSubscribers {
 }
 
+/**
+ * Payload for {@link CallEndedListener} containing details on the ended call.
+ *
+ * @public
+ */
+export declare type CallAdapterCallEndedEvent = {
+    callId?: string;
+    callEndReason?: CallEndReason;
+};
+
 /**
  * Functionality for managing the current call.
  *
@@ -1333,9 +1343,7 @@ export declare type CallControlOptions = {
  *
  * @public
  */
-export declare type CallEndedListener = (event: {
-    callId: string;
-}) => void;
+export declare type CallEndedListener = (event: CallAdapterCallEndedEvent) => void;
 
 /**
  * Error thrown from failed stateful API methods.

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

@@ -192,7 +192,7 @@ const fromFlatCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.3.3-alpha-202208200013.0';
+var telemetryVersion = '1.3.3-alpha-202208250017.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -405,7 +405,7 @@ var __awaiter$u = (window && window.__awaiter) || function (thisArg, _arguments,
  *
  * @internal
  */
-const _isInCall = (callStatus) => !!callStatus && !['None', 'Disconnected', 'Connecting', 'LocalHold', 'Ringing', 'EarlyMedia'].includes(callStatus);
+const _isInCall = (callStatus) => !!callStatus && !['None', 'Disconnected', 'Connecting', 'Ringing', 'EarlyMedia'].includes(callStatus);
 /**
  * Check if the call state represents being in the lobby or waiting to be admitted.
  *
@@ -4589,14 +4589,14 @@ const getParticipantsForDefaultRender = (participants, excludeMe, myUserId) => {
  * @public
  */
 const ParticipantList = (props) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const { excludeMe = false, myUserId, participants, onRemoveParticipant, onRenderAvatar, onRenderParticipant, onFetchParticipantMenuItems, showParticipantOverflowTooltip } = props;
     const ids = useIdentifiers();
     const strings = useLocale$1().strings.participantItem;
     const displayedParticipants = React.useMemo(() => {
         return onRenderParticipant ? participants : getParticipantsForDefaultRender(participants, excludeMe, myUserId);
     }, [participants, excludeMe, myUserId, onRenderParticipant]);
-    const createParticipantMenuItems = (participant) => {
+    const createParticipantMenuItems = React.useCallback((participant) => {
         var _a, _b;
         let menuItems = [];
         let disabled = !participant.isRemovable;
@@ -4620,9 +4620,16 @@ const ParticipantList = (props) => {
             menuItems = onFetchParticipantMenuItems(participant.userId, myUserId, menuItems);
         }
         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$1, (_b = props.styles) === null || _b === void 0 ? void 0 : _b.root) }, displayedParticipants.map((participant) => onRenderParticipant
+    }, [
+        ids.participantListRemoveParticipantButton,
+        myUserId,
+        onFetchParticipantMenuItems,
+        onRemoveParticipant,
+        (_b = (_a = props.styles) === null || _a === void 0 ? void 0 : _a.participantItemStyles) === null || _b === void 0 ? void 0 : _b.participantSubMenuItemsStyles,
+        strings.removeButtonLabel
+    ]);
+    const participantItemStyles = React.useMemo(() => { var _a; return react.merge(participantListItemStyle, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.participantItemStyles); }, [(_c = props.styles) === null || _c === void 0 ? void 0 : _c.participantItemStyles]);
+    return (React__default['default'].createElement(react.Stack, { "data-ui-id": ids.participantList, className: react.mergeStyles(participantListStyle$1, (_d = props.styles) === null || _d === void 0 ? void 0 : _d.root) }, displayedParticipants.map((participant) => onRenderParticipant
         ? onRenderParticipant(participant)
         : onRenderParticipantDefault(participant, strings, myUserId, onRenderAvatar, createParticipantMenuItems, participantItemStyles, props.onParticipantClick, showParticipantOverflowTooltip))));
 };
@@ -7432,7 +7439,7 @@ const _DrawerMenu = (props) => {
         }
     }), [firstItemStyle, borderRadius]);
     return (React__default['default'].createElement(_DrawerSurface, { styles: (_b = props.styles) === null || _b === void 0 ? void 0 : _b.drawerSurfaceStyles, onLightDismiss: props.onLightDismiss },
-        React__default['default'].createElement(react.Stack, { styles: props.styles, role: "menu" }, menuItemsToRender === null || menuItemsToRender === void 0 ? void 0 :
+        React__default['default'].createElement(react.Stack, { styles: props.styles, role: "menu", "data-ui-id": "drawer-menu" }, menuItemsToRender === null || menuItemsToRender === void 0 ? void 0 :
             menuItemsToRender.slice(0, 1).map((item) => (React__default['default'].createElement(DrawerMenuItem, Object.assign({}, item, { key: '0', styles: modifiedFirstItemStyle, onItemClick: (ev, itemKey) => {
                     onItemClick(item, ev, itemKey);
                 } })))), menuItemsToRender === null || menuItemsToRender === void 0 ? void 0 :
@@ -14347,6 +14354,19 @@ const adaptCompositeState = (compositeState) => {
     compositeState.latestErrors, compositeState.displayName);
 };
 
+// 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',
+    'removedFromCall'
+];
+
 // Copyright (c) Microsoft Corporation.
 const ACCESS_DENIED_TEAMS_MEETING_SUB_CODE = 5854;
 const REMOVED_FROM_CALL_SUB_CODES = [5000, 5300];
@@ -14428,14 +14448,15 @@ const getCallCompositePage = (call, previousCall) => {
         // `_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';
-        }
-        else if (_isInCall(call === null || call === void 0 ? void 0 : call.state)) {
-            return 'call';
+            // `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.
@@ -14462,6 +14483,17 @@ const getCallCompositePage = (call, previousCall) => {
     // 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.
@@ -14944,9 +14976,11 @@ const themedDialpadStyle$1 = (isMobile, theme) => ({
         field: {
             backgroundColor: theme.palette.white,
             fontSize: theme.fonts.large.fontSize,
-            padding: '1.063rem 0.5rem',
+            padding: '0 0.5rem ',
             textAlign: 'center',
-            paddingTop: 0
+            ':active': {
+                padding: '0 0.5rem'
+            }
         }
     },
     primaryContent: {
@@ -15016,7 +15050,7 @@ const SendDtmfDialpad = (props) => {
     return (React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(react.Modal, { titleAriaId: strings.dialpadModalAriaLabel, isOpen: showDialpad, onDismiss: onDismissTriggered, isBlocking: true, styles: dialpadModalStyle },
         React__default['default'].createElement(react.Stack, { horizontal: true, horizontalAlign: "end", verticalAlign: "center" },
             React__default['default'].createElement(react.IconButton, { iconProps: { iconName: 'Cancel' }, ariaLabel: strings.dialpadCloseModalButtonAriaLabel, onClick: onDismissTriggered, style: { color: theme.palette.black } })),
-        React__default['default'].createElement(react.Stack, null,
+        React__default['default'].createElement(react.Stack, { style: { overflow: 'hidden' } },
             React__default['default'].createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { showDeleteButton: false, strings: strings }))))));
 };
 
@@ -15616,9 +15650,11 @@ const themedDialpadStyle = (isMobile, theme) => ({
         field: {
             backgroundColor: theme.palette.white,
             fontSize: theme.fonts.large.fontSize,
-            padding: '1.063rem 0.5rem',
+            padding: '0 0.5rem',
             textAlign: isMobile ? 'center' : 'left',
-            paddingTop: 0
+            ':active': {
+                padding: '0 0.5rem'
+            }
         }
     },
     primaryContent: {
@@ -15680,7 +15716,7 @@ const CallingDialpad = (props) => {
         React__default['default'].createElement(react.Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center" },
             React__default['default'].createElement(react.Text, null, strings.dialpadModalTitle),
             React__default['default'].createElement(react.IconButton, { iconProps: { iconName: 'Cancel' }, ariaLabel: strings.dialpadCloseModalButtonAriaLabel, onClick: onDismissTriggered, style: { color: theme.palette.black } })),
-        React__default['default'].createElement(react.Stack, null, dialpadComponent()))));
+        React__default['default'].createElement(react.Stack, { style: { overflow: 'hidden' } }, dialpadComponent()))));
 };
 function DialpadStartCallIconTrampoline() {
     /* @conditional-compile-remove(PSTN-calls) */
@@ -15854,7 +15890,7 @@ const PeoplePaneContent = (props) => {
             // We want the drawer menu items to appear when participants in ParticipantList are clicked
             onParticipantClick: props.mobileView ? setDrawerMenuItemsForParticipant : undefined });
     }, [participantListDefaultProps, props.mobileView, setDrawerMenuItemsForParticipant, onRemoveParticipant]);
-    const participantList = (React__default['default'].createElement(ParticipantListWithHeading, { isMobile: props.mobileView, participantListProps: participantListProps, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, title: props.strings.peoplePaneSubTitle }));
+    const participantList = (React__default['default'].createElement(ParticipantListWithHeading, { isMobile: props.mobileView, participantListProps: participantListProps, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData, onFetchParticipantMenuItems: props.mobileView ? undefined : props.onFetchParticipantMenuItems, title: props.strings.peoplePaneSubTitle }));
     if (props.mobileView) {
         return (React__default['default'].createElement(react.Stack, { verticalFill: true, styles: peoplePaneContainerStyle, tokens: peoplePaneContainerTokens },
             React__default['default'].createElement(react.Stack.Item, { grow: true, styles: participantListContainerStyles }, participantList),
@@ -16141,7 +16177,7 @@ const textStyle = (theme) => {
  * @private
  */
 const CallArrangement = (props) => {
-    var _a;
+    var _a, _b;
     const containerClassName = React.useMemo(() => {
         return props.mobileView ? containerStyleMobile : containerStyleDesktop;
     }, [props.mobileView]);
@@ -16188,13 +16224,25 @@ const CallArrangement = (props) => {
         return callCompositeContainerCSS;
     };
     /* @conditional-compile-remove(one-to-n-calling) */
-    const callPaneContent = () => {
+    const callPaneContent = React.useCallback(() => {
         var _a;
-        if (adapter && _isInCall(callStatus)) {
+        if (adapter && _isInCall(callStatus) && activePane === 'people') {
             return (React__default['default'].createElement(CallPane, { callAdapter: adapter, onClose: closePane, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData, onFetchParticipantMenuItems: (_a = props.callControlProps) === null || _a === void 0 ? void 0 : _a.onFetchParticipantMenuItems, onPeopleButtonClicked: showShowPeopleTabHeaderButton$1(props.callControlProps.options) ? selectPeople : undefined, modalLayerHostId: props.modalLayerHostId, activePane: activePane, mobileView: props.mobileView, inviteLink: props.callControlProps.callInvitationURL }));
         }
         return React__default['default'].createElement(React__default['default'].Fragment, null);
-    };
+    }, [
+        activePane,
+        adapter,
+        callStatus,
+        closePane,
+        props.callControlProps.callInvitationURL,
+        (_a = props.callControlProps) === null || _a === void 0 ? void 0 : _a.onFetchParticipantMenuItems,
+        props.callControlProps.options,
+        props.mobileView,
+        props.modalLayerHostId,
+        props.onFetchAvatarPersonaData,
+        selectPeople
+    ]);
     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 },
@@ -16207,7 +16255,7 @@ const CallArrangement = (props) => {
                 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())))),
                 callPaneContent()),
-            ((_a = props.callControlProps) === null || _a === void 0 ? void 0 : _a.options) !== false &&
+            ((_b = props.callControlProps) === null || _b === void 0 ? void 0 : _b.options) !== false &&
                 /* @conditional-compile-remove(one-to-n-calling) */ !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) */
@@ -17481,11 +17529,29 @@ class CallContext {
     setCurrentCallId(callId) {
         this.callId = callId;
     }
+    onCallEnded(handler) {
+        this.emitter.on('callEnded', handler);
+    }
+    offCallEnded(handler) {
+        this.emitter.off('callEnded', handler);
+    }
     updateClientState(clientState) {
-        var _a;
+        var _a, _b, _c;
         const call = this.callId ? clientState.calls[this.callId] : undefined;
         const latestEndedCall = findLatestEndedCall(clientState.callsEnded);
-        this.setState(Object.assign(Object.assign({}, this.state), { userId: clientState.userId, displayName: (_a = clientState.callAgent) === null || _a === void 0 ? void 0 : _a.displayName, call, page: getCallCompositePage(call, latestEndedCall), endedCall: latestEndedCall, devices: clientState.deviceManager, latestErrors: clientState.latestErrors }));
+        // As the state is transitioning to a new state, trigger appropriate callback events.
+        const oldPage = this.state.page;
+        const newPage = getCallCompositePage(call, latestEndedCall);
+        if (!IsCallEndedPage(oldPage) && IsCallEndedPage(newPage)) {
+            this.emitter.emit('callEnded', {
+                callId: this.callId,
+                callEndedCode: (_a = latestEndedCall === null || latestEndedCall === void 0 ? void 0 : latestEndedCall.callEndReason) === null || _a === void 0 ? void 0 : _a.code,
+                callEndedSubCode: (_b = latestEndedCall === null || latestEndedCall === void 0 ? void 0 : latestEndedCall.callEndReason) === null || _b === void 0 ? void 0 : _b.subCode
+            });
+        }
+        if (this.state.page) {
+            this.setState(Object.assign(Object.assign({}, this.state), { userId: clientState.userId, displayName: (_c = clientState.callAgent) === null || _c === void 0 ? void 0 : _c.displayName, call, page: newPage, endedCall: latestEndedCall, devices: clientState.deviceManager, latestErrors: clientState.latestErrors }));
+        }
     }
 }
 const findLatestEndedCall = (calls) => {
@@ -17523,6 +17589,7 @@ class AzureCommunicationCallAdapter {
         this.deviceManager = deviceManager;
         const isTeamsMeeting = 'meetingLink' in this.locator;
         this.context = new CallContext(callClient.getState(), isTeamsMeeting);
+        this.context.onCallEnded((endCallData) => this.emitter.emit('callEnded', endCallData));
         const onStateChange = (clientState) => {
             var _a;
             // unsubscribe when the instance gets disposed
@@ -17695,9 +17762,7 @@ class AzureCommunicationCallAdapter {
         });
     }
     leaveCall() {
-        var _a;
         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();
             this.call = undefined;
@@ -17707,7 +17772,6 @@ class AzureCommunicationCallAdapter {
             this.context.updateClientState(this.callClient.getState());
             this.stopCamera();
             this.mute();
-            this.emitter.emit('callEnded', { callId });
         });
     }
     setCamera(device, options) {
@@ -19122,7 +19186,7 @@ const CallWithChatScreen = (props) => {
                     // Perf: Instead of removing the video gallery from DOM, we hide it to prevent re-renders.
                     style: callCompositeContainerCSS },
                     React__default['default'].createElement(CallComposite, Object.assign({}, props, { formFactor: formFactor, options: { callControls: false }, adapter: callAdapter, fluentTheme: fluentTheme }))),
-                chatProps.adapter && callAdapter && hasJoinedCall && (React__default['default'].createElement(CallWithChatPane, { chatCompositeProps: chatProps, inviteLink: props.joinInvitationURL, onClose: closePane, chatAdapter: chatProps.adapter, callAdapter: callAdapter, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData, onChatButtonClicked: showShowChatTabHeaderButton(props.callControls) ? selectChat : undefined, onPeopleButtonClicked: showShowPeopleTabHeaderButton(props.callControls) ? selectPeople : undefined, modalLayerHostId: modalLayerHostId, mobileView: mobileView, activePane: activePane, 
+                chatProps.adapter && callAdapter && hasJoinedCall && (React__default['default'].createElement(CallWithChatPane, { chatCompositeProps: chatProps, inviteLink: props.joinInvitationURL, onClose: closePane, chatAdapter: chatProps.adapter, callAdapter: callAdapter, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, onChatButtonClicked: showShowChatTabHeaderButton(props.callControls) ? selectChat : undefined, onPeopleButtonClicked: showShowPeopleTabHeaderButton(props.callControls) ? selectPeople : undefined, modalLayerHostId: modalLayerHostId, mobileView: mobileView, activePane: activePane, 
                     /* @conditional-compile-remove(file-sharing) */
                     fileSharing: props.fileSharing, rtl: props.rtl }))),
             showControlBar && !isMobileWithActivePane && (React__default['default'].createElement(ChatAdapterProvider, { adapter: chatProps.adapter },