@azure/communication-react 1.24.0-beta.1 → 1.25.0-alpha-202502150016

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/usePeoplePane.js

@@ -25,7 +25,12 @@ export const usePeoplePane = (props) => {
         heading: localeStrings.muteAllDialogTitle,
         text: localeStrings.muteAllDialogContent,
         cancelButtonLabel: localeStrings.muteAllCancelButtonLabel
-    }), [localeStrings.muteAllConfirmButtonLabel, localeStrings.muteAllDialogTitle, localeStrings.muteAllDialogContent, localeStrings.muteAllCancelButtonLabel]);
+    }), [
+        localeStrings.muteAllConfirmButtonLabel,
+        localeStrings.muteAllDialogTitle,
+        localeStrings.muteAllDialogContent,
+        localeStrings.muteAllCancelButtonLabel
+    ]);
     const onMuteAllPromptConfirm = useCallback(() => {
         onMuteAllRemoteParticipants && onMuteAllRemoteParticipants();
         setShowMuteAllPrompt(false);
@@ -68,11 +73,7 @@ export const usePeoplePane = (props) => {
                 text: localeStrings.muteAllMenuLabel,
                 iconProps: {
                     iconName: 'ContextualMenuMicMutedIcon',
-                    styles: {
-                        root: {
-                            lineHeight: 0
-                        }
-                    }
+                    styles: { root: { lineHeight: 0 } }
                 },
                 onClick: () => {
                     setShowMuteAllPrompt(true);
@@ -93,97 +94,82 @@ export const usePeoplePane = (props) => {
         const isMeetingAudioPermitted = meetingMediaAccess ? meetingMediaAccess.isAudioPermitted : true;
         const isMeetingVideoPermitted = meetingMediaAccess ? meetingMediaAccess.isVideoPermitted : true;
         if (onForbidOthersAudio && remoteParticipants) {
-            hasAttendee && isMeetingAudioPermitted && menuItems.push({
-                ['data-ui-id']: 'people-pane-forbid-all-attendees-audio',
-                key: 'forbidOthersAudio',
-                text: localeStrings.forbidOthersAudioMenuLabel,
-                iconProps: {
-                    iconName: 'ControlButtonMicProhibited',
-                    styles: {
-                        root: {
-                            lineHeight: 0
-                        }
-                    }
-                },
-                onClick: () => {
-                    setShowForbidOthersAudioPrompt(true);
-                },
-                ariaLabel: localeStrings.forbidOthersAudioMenuLabel,
-                disabled: !hasAttendee
-            });
+            hasAttendee &&
+                isMeetingAudioPermitted &&
+                menuItems.push({
+                    ['data-ui-id']: 'people-pane-forbid-all-attendees-audio',
+                    key: 'forbidOthersAudio',
+                    text: localeStrings.forbidOthersAudioMenuLabel,
+                    iconProps: {
+                        iconName: 'ControlButtonMicProhibited',
+                        styles: { root: { lineHeight: 0 } }
+                    },
+                    onClick: () => {
+                        setShowForbidOthersAudioPrompt(true);
+                    },
+                    ariaLabel: localeStrings.forbidOthersAudioMenuLabel,
+                    disabled: !hasAttendee
+                });
         }
         if (onPermitOthersAudio && remoteParticipants) {
-            hasAttendee && !isMeetingAudioPermitted && menuItems.push({
-                ['data-ui-id']: 'people-pane-permit-all-attendees-audio',
-                key: 'permitOthersAudio',
-                text: localeStrings.permitOthersAudioMenuLabel,
-                iconProps: {
-                    iconName: 'ControlButtonMicOn',
-                    styles: {
-                        root: {
-                            lineHeight: 0
-                        }
-                    }
-                },
-                onClick: () => {
-                    setShowPermitOthersAudioPrompt(true);
-                },
-                ariaLabel: localeStrings.permitOthersAudioMenuLabel,
-                disabled: !hasAttendee
-            });
+            hasAttendee &&
+                !isMeetingAudioPermitted &&
+                menuItems.push({
+                    ['data-ui-id']: 'people-pane-permit-all-attendees-audio',
+                    key: 'permitOthersAudio',
+                    text: localeStrings.permitOthersAudioMenuLabel,
+                    iconProps: {
+                        iconName: 'ControlButtonMicOn',
+                        styles: { root: { lineHeight: 0 } }
+                    },
+                    onClick: () => {
+                        setShowPermitOthersAudioPrompt(true);
+                    },
+                    ariaLabel: localeStrings.permitOthersAudioMenuLabel,
+                    disabled: !hasAttendee
+                });
         }
         if (onForbidOthersVideo && remoteParticipants) {
-            hasAttendee && isMeetingVideoPermitted && menuItems.push({
-                ['data-ui-id']: 'people-pane-forbid-all-attendees-video',
-                key: 'forbidOthersVideo',
-                text: localeStrings.forbidOthersVideoMenuLabel,
-                iconProps: {
-                    iconName: 'ControlButtonCameraProhibitedSmall',
-                    styles: {
-                        root: {
-                            lineHeight: 0
-                        }
-                    }
-                },
-                onClick: () => {
-                    setShowForbidOthersVideoPrompt(true);
-                },
-                ariaLabel: localeStrings.forbidOthersVideoMenuLabel,
-                disabled: !hasAttendee
-            });
+            hasAttendee &&
+                isMeetingVideoPermitted &&
+                menuItems.push({
+                    ['data-ui-id']: 'people-pane-forbid-all-attendees-video',
+                    key: 'forbidOthersVideo',
+                    text: localeStrings.forbidOthersVideoMenuLabel,
+                    iconProps: {
+                        iconName: 'ControlButtonCameraProhibitedSmall',
+                        styles: { root: { lineHeight: 0 } }
+                    },
+                    onClick: () => {
+                        setShowForbidOthersVideoPrompt(true);
+                    },
+                    ariaLabel: localeStrings.forbidOthersVideoMenuLabel,
+                    disabled: !hasAttendee
+                });
         }
         if (onPermitOthersVideo && remoteParticipants) {
-            hasAttendee && !isMeetingVideoPermitted && menuItems.push({
-                ['data-ui-id']: 'people-pane-permit-all-attendees-video',
-                key: 'permitOthersVideo',
-                text: localeStrings.permitOthersVideoMenuLabel,
-                iconProps: {
-                    iconName: 'ControlButtonCameraOn',
-                    styles: {
-                        root: {
-                            lineHeight: 0
-                        }
-                    }
-                },
-                onClick: () => {
-                    setShowPermitOthersVideoPrompt(true);
-                },
-                ariaLabel: localeStrings.permitOthersVideoMenuLabel,
-                disabled: !hasAttendee
-            });
+            hasAttendee &&
+                !isMeetingVideoPermitted &&
+                menuItems.push({
+                    ['data-ui-id']: 'people-pane-permit-all-attendees-video',
+                    key: 'permitOthersVideo',
+                    text: localeStrings.permitOthersVideoMenuLabel,
+                    iconProps: {
+                        iconName: 'ControlButtonCameraOn',
+                        styles: { root: { lineHeight: 0 } }
+                    },
+                    onClick: () => {
+                        setShowPermitOthersVideoPrompt(true);
+                    },
+                    ariaLabel: localeStrings.permitOthersVideoMenuLabel,
+                    disabled: !hasAttendee
+                });
         }
         if (onStopAllSpotlight && spotlightedParticipantUserIds && spotlightedParticipantUserIds.length > 0) {
             menuItems.push({
                 key: 'stopAllSpotlightKey',
                 text: localeStrings.stopAllSpotlightMenuLabel,
-                iconProps: {
-                    iconName: 'StopAllSpotlightMenuButton',
-                    styles: {
-                        root: {
-                            lineHeight: 0
-                        }
-                    }
-                },
+                iconProps: { iconName: 'StopAllSpotlightMenuButton', styles: { root: { lineHeight: 0 } } },
                 onClick: () => {
                     onStopAllSpotlight();
                 },
@@ -193,8 +179,32 @@ export const usePeoplePane = (props) => {
         return {
             items: menuItems
         };
-    }, [onMuteAllRemoteParticipants, remoteParticipants, meetingMediaAccess, onForbidOthersAudio, onPermitOthersAudio, onForbidOthersVideo, onPermitOthersVideo, onStopAllSpotlight, spotlightedParticipantUserIds, localeStrings.muteAllMenuLabel, localeStrings.forbidOthersAudioMenuLabel, localeStrings.permitOthersAudioMenuLabel, localeStrings.forbidOthersVideoMenuLabel, localeStrings.permitOthersVideoMenuLabel, localeStrings.stopAllSpotlightMenuLabel]);
-    const onRenderHeader = useCallback(() => React.createElement(SidePaneHeader, { onClose: closePane, paneOpenerButton: peopleButtonRef, headingText: localeStrings.peoplePaneTitle, dismissSidePaneButtonAriaLabel: localeStrings.dismissSidePaneButtonLabel, mobileView: mobileView !== null && mobileView !== void 0 ? mobileView : false, dismissButtonComponentRef: sidePaneDismissButtonRef, chatButtonPresent: chatButtonPresent }), [closePane, peopleButtonRef, localeStrings.peoplePaneTitle, localeStrings.dismissSidePaneButtonLabel, mobileView, sidePaneDismissButtonRef, chatButtonPresent]);
+    }, [
+        onMuteAllRemoteParticipants,
+        remoteParticipants,
+        meetingMediaAccess,
+        onForbidOthersAudio,
+        onPermitOthersAudio,
+        onForbidOthersVideo,
+        onPermitOthersVideo,
+        onStopAllSpotlight,
+        spotlightedParticipantUserIds,
+        localeStrings.muteAllMenuLabel,
+        localeStrings.forbidOthersAudioMenuLabel,
+        localeStrings.permitOthersAudioMenuLabel,
+        localeStrings.forbidOthersVideoMenuLabel,
+        localeStrings.permitOthersVideoMenuLabel,
+        localeStrings.stopAllSpotlightMenuLabel
+    ]);
+    const onRenderHeader = useCallback(() => (React.createElement(SidePaneHeader, { onClose: closePane, paneOpenerButton: peopleButtonRef, headingText: localeStrings.peoplePaneTitle, dismissSidePaneButtonAriaLabel: localeStrings.dismissSidePaneButtonLabel, mobileView: mobileView !== null && mobileView !== void 0 ? mobileView : false, dismissButtonComponentRef: sidePaneDismissButtonRef, chatButtonPresent: chatButtonPresent })), [
+        closePane,
+        peopleButtonRef,
+        localeStrings.peoplePaneTitle,
+        localeStrings.dismissSidePaneButtonLabel,
+        mobileView,
+        sidePaneDismissButtonRef,
+        chatButtonPresent
+    ]);
     const onFetchParticipantMenuItemsForCallComposite = useCallback((participantId, myUserId, defaultMenuItems) => {
         var _a, _b;
         let isPinned = pinnedParticipants === null || pinnedParticipants === void 0 ? void 0 : pinnedParticipants.includes(participantId);
@@ -208,13 +218,10 @@ export const usePeoplePane = (props) => {
             _defaultMenuItems.push({
                 key: 'mute',
                 text: 'Mute',
+                role: 'menuitem',
                 iconProps: {
                     iconName: 'ContextualMenuMicMutedIcon',
-                    styles: {
-                        root: {
-                            lineHeight: 0
-                        }
-                    }
+                    styles: { root: { lineHeight: 0 } }
                 },
                 onClick: () => {
                     onMuteParticipant(participantId);
@@ -225,18 +232,17 @@ export const usePeoplePane = (props) => {
             });
         }
         const remoteParticipant = remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants[participantId];
-        if ((remoteParticipant === null || remoteParticipant === void 0 ? void 0 : remoteParticipant.mediaAccess) && !remoteParticipant.mediaAccess.isAudioPermitted && (remoteParticipant === null || remoteParticipant === void 0 ? void 0 : remoteParticipant.role) === 'Attendee' && onPermitAudio) {
+        if ((remoteParticipant === null || remoteParticipant === void 0 ? void 0 : remoteParticipant.mediaAccess) &&
+            !remoteParticipant.mediaAccess.isAudioPermitted &&
+            (remoteParticipant === null || remoteParticipant === void 0 ? void 0 : remoteParticipant.role) === 'Attendee' &&
+            onPermitAudio) {
             _defaultMenuItems.push({
                 key: 'permit-audio',
                 text: localeStrings.permitAudioMenuLabel,
+                role: 'menuitem',
                 iconProps: {
                     iconName: 'ControlButtonMicOn',
-                    styles: {
-                        root: {
-                            lineHeight: '1rem',
-                            textAlign: 'center'
-                        }
-                    }
+                    styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
                 },
                 onClick: () => {
                     onPermitAudio([participantId]);
@@ -249,14 +255,10 @@ export const usePeoplePane = (props) => {
             _defaultMenuItems.push({
                 key: 'forbid-audio',
                 text: localeStrings.forbidAudioMenuLabel,
+                role: 'menuitem',
                 iconProps: {
                     iconName: 'ControlButtonMicProhibited',
-                    styles: {
-                        root: {
-                            lineHeight: '1rem',
-                            textAlign: 'center'
-                        }
-                    }
+                    styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
                 },
                 onClick: () => {
                     onForbidAudio([participantId]);
@@ -265,18 +267,17 @@ export const usePeoplePane = (props) => {
                 ariaLabel: localeStrings.forbidAudioMenuLabel
             });
         }
-        if ((remoteParticipant === null || remoteParticipant === void 0 ? void 0 : remoteParticipant.mediaAccess) && !remoteParticipant.mediaAccess.isVideoPermitted && (remoteParticipant === null || remoteParticipant === void 0 ? void 0 : remoteParticipant.role) === 'Attendee' && onPermitVideo) {
+        if ((remoteParticipant === null || remoteParticipant === void 0 ? void 0 : remoteParticipant.mediaAccess) &&
+            !remoteParticipant.mediaAccess.isVideoPermitted &&
+            (remoteParticipant === null || remoteParticipant === void 0 ? void 0 : remoteParticipant.role) === 'Attendee' &&
+            onPermitVideo) {
             _defaultMenuItems.push({
                 key: 'permit-video',
                 text: localeStrings.permitVideoMenuLabel,
+                role: 'menuitem',
                 iconProps: {
                     iconName: 'ControlButtonCameraOn',
-                    styles: {
-                        root: {
-                            lineHeight: '1rem',
-                            textAlign: 'center'
-                        }
-                    }
+                    styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
                 },
                 onClick: () => {
                     onPermitVideo([participantId]);
@@ -289,14 +290,10 @@ export const usePeoplePane = (props) => {
             _defaultMenuItems.push({
                 key: 'forbid-video',
                 text: localeStrings.forbidVideoMenuLabel,
+                role: 'menuitem',
                 iconProps: {
                     iconName: 'ControlButtonCameraProhibitedSmall',
-                    styles: {
-                        root: {
-                            lineHeight: '1rem',
-                            textAlign: 'center'
-                        }
-                    }
+                    styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
                 },
                 onClick: () => {
                     onForbidVideo([participantId]);
@@ -306,45 +303,55 @@ export const usePeoplePane = (props) => {
             });
         }
         if (isSpotlighted) {
-            const stopSpotlightMenuText = isMe ? localeStrings.stopSpotlightOnSelfMenuLabel : localeStrings.stopSpotlightMenuLabel;
-            const onStopSpotlight = isMe ? onStopLocalSpotlight : onStopRemoteSpotlight ? () => {
-                onStopRemoteSpotlight([participantId]);
-            } : undefined;
+            const stopSpotlightMenuText = isMe
+                ? localeStrings.stopSpotlightOnSelfMenuLabel
+                : localeStrings.stopSpotlightMenuLabel;
+            const onStopSpotlight = isMe
+                ? onStopLocalSpotlight
+                : onStopRemoteSpotlight
+                    ? () => {
+                        onStopRemoteSpotlight([participantId]);
+                    }
+                    : undefined;
             if (onStopSpotlight && stopSpotlightMenuText) {
                 _defaultMenuItems.push({
                     key: 'stop-spotlight',
                     text: stopSpotlightMenuText,
+                    role: 'menuitem',
                     onClick: onStopSpotlight,
                     iconProps: {
                         iconName: 'StopSpotlightContextualMenuItem',
-                        styles: {
-                            root: {
-                                lineHeight: 0
-                            }
-                        }
+                        styles: { root: { lineHeight: 0 } }
                     },
                     ariaLabel: stopSpotlightMenuText
                 });
             }
         }
         else {
-            const startSpotlightMenuText = spotlightedParticipantUserIds && spotlightedParticipantUserIds.length > 0 ? localeStrings.addSpotlightMenuLabel : localeStrings.startSpotlightMenuLabel;
-            const maxSpotlightedParticipantsReached = maxParticipantsToSpotlight ? spotlightedParticipantUserIds ? spotlightedParticipantUserIds.length >= maxParticipantsToSpotlight : false : false;
-            const onStartSpotlight = isMe ? onStartLocalSpotlight : onStartRemoteSpotlight ? () => {
-                onStartRemoteSpotlight([participantId]);
-            } : undefined;
+            const startSpotlightMenuText = spotlightedParticipantUserIds && spotlightedParticipantUserIds.length > 0
+                ? localeStrings.addSpotlightMenuLabel
+                : localeStrings.startSpotlightMenuLabel;
+            const maxSpotlightedParticipantsReached = maxParticipantsToSpotlight
+                ? spotlightedParticipantUserIds
+                    ? spotlightedParticipantUserIds.length >= maxParticipantsToSpotlight
+                    : false
+                : false;
+            const onStartSpotlight = isMe
+                ? onStartLocalSpotlight
+                : onStartRemoteSpotlight
+                    ? () => {
+                        onStartRemoteSpotlight([participantId]);
+                    }
+                    : undefined;
             if (onStartSpotlight && startSpotlightMenuText) {
                 _defaultMenuItems.push({
                     key: 'start-spotlight',
                     text: startSpotlightMenuText,
+                    role: 'menuitem',
                     onClick: onStartSpotlight,
                     iconProps: {
                         iconName: 'StartSpotlightContextualMenuItem',
-                        styles: {
-                            root: {
-                                lineHeight: 0
-                            }
-                        }
+                        styles: { root: { lineHeight: 0 } }
                     },
                     ariaLabel: startSpotlightMenuText,
                     disabled: maxSpotlightedParticipantsReached,
@@ -357,14 +364,10 @@ export const usePeoplePane = (props) => {
                 _defaultMenuItems.push({
                     key: 'unpin',
                     text: localeStrings === null || localeStrings === void 0 ? void 0 : localeStrings.unpinParticipantMenuLabel,
+                    role: 'menuitem',
                     iconProps: {
                         iconName: 'UnpinParticipant',
-                        styles: {
-                            root: {
-                                lineHeight: '1rem',
-                                textAlign: 'center'
-                            }
-                        }
+                        styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
                     },
                     onClick: () => {
                         onUnpinParticipant === null || onUnpinParticipant === void 0 ? void 0 : onUnpinParticipant(participantId);
@@ -376,15 +379,13 @@ export const usePeoplePane = (props) => {
             if (!isPinned && onPinParticipant && (localeStrings === null || localeStrings === void 0 ? void 0 : localeStrings.pinParticipantMenuLabel)) {
                 _defaultMenuItems.push({
                     key: 'pin',
-                    text: disablePinMenuItem ? localeStrings.pinParticipantLimitReachedMenuLabel : localeStrings.pinParticipantMenuLabel,
+                    text: disablePinMenuItem
+                        ? localeStrings.pinParticipantLimitReachedMenuLabel
+                        : localeStrings.pinParticipantMenuLabel,
+                    role: 'menuitem',
                     iconProps: {
                         iconName: 'PinParticipant',
-                        styles: {
-                            root: {
-                                lineHeight: '1rem',
-                                textAlign: 'center'
-                            }
-                        }
+                        styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
                     },
                     onClick: () => {
                         onPinParticipant(participantId);
@@ -398,44 +399,91 @@ export const usePeoplePane = (props) => {
         if (defaultMenuItems) {
             _defaultMenuItems.push(...defaultMenuItems);
         }
-        return onFetchParticipantMenuItems ? onFetchParticipantMenuItems(participantId, myUserId, _defaultMenuItems) : _defaultMenuItems;
-    }, [pinnedParticipants, spotlightedParticipantUserIds, onMuteParticipant, remoteParticipants, onPermitAudio, onForbidAudio, onPermitVideo, onForbidVideo, onFetchParticipantMenuItems, localeStrings.permitAudioMenuLabel, localeStrings.forbidAudioMenuLabel, localeStrings.permitVideoMenuLabel, localeStrings.forbidVideoMenuLabel, localeStrings.stopSpotlightOnSelfMenuLabel, localeStrings.stopSpotlightMenuLabel, localeStrings.addSpotlightMenuLabel, localeStrings.startSpotlightMenuLabel, localeStrings.spotlightLimitReachedMenuTitle, localeStrings === null || localeStrings === void 0 ? void 0 : localeStrings.unpinParticipantMenuLabel, localeStrings.pinParticipantMenuLabel, localeStrings.unpinParticipantMenuItemAriaLabel, localeStrings.pinParticipantLimitReachedMenuLabel, localeStrings.pinParticipantMenuItemAriaLabel, onStopLocalSpotlight, onStopRemoteSpotlight, maxParticipantsToSpotlight, onStartLocalSpotlight, onStartRemoteSpotlight, onUnpinParticipant, onPinParticipant, disablePinMenuItem]);
+        return onFetchParticipantMenuItems
+            ? onFetchParticipantMenuItems(participantId, myUserId, _defaultMenuItems)
+            : _defaultMenuItems;
+    }, [
+        pinnedParticipants,
+        spotlightedParticipantUserIds,
+        onMuteParticipant,
+        remoteParticipants,
+        onPermitAudio,
+        onForbidAudio,
+        onPermitVideo,
+        onForbidVideo,
+        onFetchParticipantMenuItems,
+        localeStrings.permitAudioMenuLabel,
+        localeStrings.forbidAudioMenuLabel,
+        localeStrings.permitVideoMenuLabel,
+        localeStrings.forbidVideoMenuLabel,
+        localeStrings.stopSpotlightOnSelfMenuLabel,
+        localeStrings.stopSpotlightMenuLabel,
+        localeStrings.addSpotlightMenuLabel,
+        localeStrings.startSpotlightMenuLabel,
+        localeStrings.spotlightLimitReachedMenuTitle,
+        localeStrings === null || localeStrings === void 0 ? void 0 : localeStrings.unpinParticipantMenuLabel,
+        localeStrings.pinParticipantMenuLabel,
+        localeStrings.unpinParticipantMenuItemAriaLabel,
+        localeStrings.pinParticipantLimitReachedMenuLabel,
+        localeStrings.pinParticipantMenuItemAriaLabel,
+        onStopLocalSpotlight,
+        onStopRemoteSpotlight,
+        maxParticipantsToSpotlight,
+        onStartLocalSpotlight,
+        onStartRemoteSpotlight,
+        onUnpinParticipant,
+        onPinParticipant,
+        disablePinMenuItem
+    ]);
     const role = useSelector(getRole);
     const alternateCallerId = useSelector(getAlternateCallerId);
     const onRenderContent = useCallback(() => {
-        return React.createElement(React.Fragment, null,
-            React.createElement(Prompt, Object.assign({}, muteAllPromptLabels, { styles: {
-                    main: {
-                        minWidth: '22.5rem',
-                        padding: '1.5rem'
-                    }
-                }, onConfirm: () => onMuteAllPromptConfirm(), isOpen: showMuteAllPrompt, onCancel: () => setShowMuteAllPrompt(false) })),
-            React.createElement(Prompt, { heading: localeStrings.forbidOthersAudioDialogTitle, text: localeStrings.forbidOthersAudioDialogContent, confirmButtonLabel: localeStrings.forbidOthersAudioConfirmButtonLabel, cancelButtonLabel: localeStrings.forbidOthersAudioCancelButtonLabel, styles: {
-                    main: {
-                        minWidth: '22.5rem',
-                        padding: '1.5rem'
-                    }
-                }, onConfirm: () => onForbidAllAttendeesPromptConfirm(), isOpen: showForbidOthersAudioPrompt, onCancel: () => setShowForbidOthersAudioPrompt(false) }),
-            React.createElement(Prompt, { heading: localeStrings.permitOthersAudioDialogTitle, text: localeStrings.permitOthersAudioDialogContent, confirmButtonLabel: localeStrings.permitOthersAudioConfirmButtonLabel, cancelButtonLabel: localeStrings.permitOthersAudioCancelButtonLabel, styles: {
-                    main: {
-                        minWidth: '22.5rem',
-                        padding: '1.5rem'
-                    }
-                }, onConfirm: () => onPermitAllAttendeesPromptConfirm(), isOpen: showPermitOthersAudioPrompt, onCancel: () => setShowForbidOthersAudioPrompt(false) }),
-            React.createElement(Prompt, { heading: localeStrings.forbidOthersVideoDialogTitle, text: localeStrings.forbidOthersVideoDialogContent, confirmButtonLabel: localeStrings.forbidOthersVideoConfirmButtonLabel, cancelButtonLabel: localeStrings.forbidOthersVideoCancelButtonLabel, styles: {
-                    main: {
-                        minWidth: '22.5rem',
-                        padding: '1.5rem'
-                    }
-                }, onConfirm: () => onForbidOthersVideoPromptConfirm(), isOpen: showForbidOthersVideoPrompt, onCancel: () => setShowForbidOthersVideoPrompt(false) }),
-            React.createElement(Prompt, { heading: localeStrings.permitOthersVideoDialogTitle, text: localeStrings.permitOthersVideoDialogContent, confirmButtonLabel: localeStrings.permitOthersVideoConfirmButtonLabel, cancelButtonLabel: localeStrings.permitOthersVideoCancelButtonLabel, styles: {
-                    main: {
-                        minWidth: '22.5rem',
-                        padding: '1.5rem'
-                    }
-                }, onConfirm: () => onPermitOthersVideoPromptConfirm(), isOpen: showPermitOthersVideoPrompt, onCancel: () => setShowForbidOthersVideoPrompt(false) }),
-            React.createElement(PeoplePaneContent, { inviteLink: inviteLink, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItemsForCallComposite, setDrawerMenuItems: setDrawerMenuItems, mobileView: mobileView, setParticipantActioned: setParticipantActioned, participantListHeadingMoreButtonProps: sidePaneHeaderMenuProps, pinnedParticipants: pinnedParticipants, role: role, alternateCallerId: alternateCallerId }));
-    }, [muteAllPromptLabels, showMuteAllPrompt, localeStrings.forbidOthersAudioDialogTitle, localeStrings.forbidOthersAudioDialogContent, localeStrings.forbidOthersAudioConfirmButtonLabel, localeStrings.forbidOthersAudioCancelButtonLabel, localeStrings.permitOthersAudioDialogTitle, localeStrings.permitOthersAudioDialogContent, localeStrings.permitOthersAudioConfirmButtonLabel, localeStrings.permitOthersAudioCancelButtonLabel, localeStrings.forbidOthersVideoDialogTitle, localeStrings.forbidOthersVideoDialogContent, localeStrings.forbidOthersVideoConfirmButtonLabel, localeStrings.forbidOthersVideoCancelButtonLabel, localeStrings.permitOthersVideoDialogTitle, localeStrings.permitOthersVideoDialogContent, localeStrings.permitOthersVideoConfirmButtonLabel, localeStrings.permitOthersVideoCancelButtonLabel, showForbidOthersAudioPrompt, showPermitOthersAudioPrompt, showForbidOthersVideoPrompt, showPermitOthersVideoPrompt, inviteLink, onFetchAvatarPersonaData, onFetchParticipantMenuItemsForCallComposite, setDrawerMenuItems, mobileView, setParticipantActioned, sidePaneHeaderMenuProps, pinnedParticipants, role, alternateCallerId, onMuteAllPromptConfirm, onForbidAllAttendeesPromptConfirm, onPermitAllAttendeesPromptConfirm, onForbidOthersVideoPromptConfirm, onPermitOthersVideoPromptConfirm]);
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Prompt, Object.assign({}, muteAllPromptLabels, { styles: { main: { minWidth: '22.5rem', padding: '1.5rem' } }, onConfirm: () => onMuteAllPromptConfirm(), isOpen: showMuteAllPrompt, onCancel: () => setShowMuteAllPrompt(false) })),
+            React.createElement(Prompt, { heading: localeStrings.forbidOthersAudioDialogTitle, text: localeStrings.forbidOthersAudioDialogContent, confirmButtonLabel: localeStrings.forbidOthersAudioConfirmButtonLabel, cancelButtonLabel: localeStrings.forbidOthersAudioCancelButtonLabel, styles: { main: { minWidth: '22.5rem', padding: '1.5rem' } }, onConfirm: () => onForbidAllAttendeesPromptConfirm(), isOpen: showForbidOthersAudioPrompt, onCancel: () => setShowForbidOthersAudioPrompt(false) }),
+            React.createElement(Prompt, { heading: localeStrings.permitOthersAudioDialogTitle, text: localeStrings.permitOthersAudioDialogContent, confirmButtonLabel: localeStrings.permitOthersAudioConfirmButtonLabel, cancelButtonLabel: localeStrings.permitOthersAudioCancelButtonLabel, styles: { main: { minWidth: '22.5rem', padding: '1.5rem' } }, onConfirm: () => onPermitAllAttendeesPromptConfirm(), isOpen: showPermitOthersAudioPrompt, onCancel: () => setShowForbidOthersAudioPrompt(false) }),
+            React.createElement(Prompt, { heading: localeStrings.forbidOthersVideoDialogTitle, text: localeStrings.forbidOthersVideoDialogContent, confirmButtonLabel: localeStrings.forbidOthersVideoConfirmButtonLabel, cancelButtonLabel: localeStrings.forbidOthersVideoCancelButtonLabel, styles: { main: { minWidth: '22.5rem', padding: '1.5rem' } }, onConfirm: () => onForbidOthersVideoPromptConfirm(), isOpen: showForbidOthersVideoPrompt, onCancel: () => setShowForbidOthersVideoPrompt(false) }),
+            React.createElement(Prompt, { heading: localeStrings.permitOthersVideoDialogTitle, text: localeStrings.permitOthersVideoDialogContent, confirmButtonLabel: localeStrings.permitOthersVideoConfirmButtonLabel, cancelButtonLabel: localeStrings.permitOthersVideoCancelButtonLabel, styles: { main: { minWidth: '22.5rem', padding: '1.5rem' } }, onConfirm: () => onPermitOthersVideoPromptConfirm(), isOpen: showPermitOthersVideoPrompt, onCancel: () => setShowForbidOthersVideoPrompt(false) }),
+            React.createElement(PeoplePaneContent, { inviteLink: inviteLink, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItemsForCallComposite, setDrawerMenuItems: setDrawerMenuItems, mobileView: mobileView, setParticipantActioned: setParticipantActioned, participantListHeadingMoreButtonProps: sidePaneHeaderMenuProps, pinnedParticipants: pinnedParticipants, role: role, alternateCallerId: alternateCallerId })));
+    }, [
+        muteAllPromptLabels,
+        showMuteAllPrompt,
+        localeStrings.forbidOthersAudioDialogTitle,
+        localeStrings.forbidOthersAudioDialogContent,
+        localeStrings.forbidOthersAudioConfirmButtonLabel,
+        localeStrings.forbidOthersAudioCancelButtonLabel,
+        localeStrings.permitOthersAudioDialogTitle,
+        localeStrings.permitOthersAudioDialogContent,
+        localeStrings.permitOthersAudioConfirmButtonLabel,
+        localeStrings.permitOthersAudioCancelButtonLabel,
+        localeStrings.forbidOthersVideoDialogTitle,
+        localeStrings.forbidOthersVideoDialogContent,
+        localeStrings.forbidOthersVideoConfirmButtonLabel,
+        localeStrings.forbidOthersVideoCancelButtonLabel,
+        localeStrings.permitOthersVideoDialogTitle,
+        localeStrings.permitOthersVideoDialogContent,
+        localeStrings.permitOthersVideoConfirmButtonLabel,
+        localeStrings.permitOthersVideoCancelButtonLabel,
+        showForbidOthersAudioPrompt,
+        showPermitOthersAudioPrompt,
+        showForbidOthersVideoPrompt,
+        showPermitOthersVideoPrompt,
+        inviteLink,
+        onFetchAvatarPersonaData,
+        onFetchParticipantMenuItemsForCallComposite,
+        setDrawerMenuItems,
+        mobileView,
+        setParticipantActioned,
+        sidePaneHeaderMenuProps,
+        pinnedParticipants,
+        role,
+        alternateCallerId,
+        onMuteAllPromptConfirm,
+        onForbidAllAttendeesPromptConfirm,
+        onPermitAllAttendeesPromptConfirm,
+        onForbidOthersVideoPromptConfirm,
+        onPermitOthersVideoPromptConfirm
+    ]);
     const sidePaneRenderer = useMemo(() => ({
         headerRenderer: onRenderHeader,
         contentRenderer: onRenderContent,
@@ -451,10 +499,6 @@ export const usePeoplePane = (props) => {
             openPane();
         }
     }, [isOpen, openPane]);
-    return {
-        openPeoplePane: openPane,
-        closePeoplePane: closePane,
-        isPeoplePaneOpen: isOpen
-    };
+    return { openPeoplePane: openPane, closePeoplePane: closePane, isPeoplePaneOpen: isOpen };
 };
 //# sourceMappingURL=usePeoplePane.js.map