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

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

@@ -25,12 +25,7 @@ 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);
@@ -73,7 +68,11 @@ export const usePeoplePane = (props) => {
                 text: localeStrings.muteAllMenuLabel,
                 iconProps: {
                     iconName: 'ContextualMenuMicMutedIcon',
-                    styles: { root: { lineHeight: 0 } }
+                    styles: {
+                        root: {
+                            lineHeight: 0
+                        }
+                    }
                 },
                 onClick: () => {
                     setShowMuteAllPrompt(true);
@@ -94,82 +93,97 @@ 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();
                 },
@@ -179,32 +193,8 @@ 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);
@@ -220,7 +210,11 @@ export const usePeoplePane = (props) => {
                 text: 'Mute',
                 iconProps: {
                     iconName: 'ContextualMenuMicMutedIcon',
-                    styles: { root: { lineHeight: 0 } }
+                    styles: {
+                        root: {
+                            lineHeight: 0
+                        }
+                    }
                 },
                 onClick: () => {
                     onMuteParticipant(participantId);
@@ -231,16 +225,18 @@ 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,
                 iconProps: {
                     iconName: 'ControlButtonMicOn',
-                    styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
+                    styles: {
+                        root: {
+                            lineHeight: '1rem',
+                            textAlign: 'center'
+                        }
+                    }
                 },
                 onClick: () => {
                     onPermitAudio([participantId]);
@@ -255,7 +251,12 @@ export const usePeoplePane = (props) => {
                 text: localeStrings.forbidAudioMenuLabel,
                 iconProps: {
                     iconName: 'ControlButtonMicProhibited',
-                    styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
+                    styles: {
+                        root: {
+                            lineHeight: '1rem',
+                            textAlign: 'center'
+                        }
+                    }
                 },
                 onClick: () => {
                     onForbidAudio([participantId]);
@@ -264,16 +265,18 @@ 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,
                 iconProps: {
                     iconName: 'ControlButtonCameraOn',
-                    styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
+                    styles: {
+                        root: {
+                            lineHeight: '1rem',
+                            textAlign: 'center'
+                        }
+                    }
                 },
                 onClick: () => {
                     onPermitVideo([participantId]);
@@ -288,7 +291,12 @@ export const usePeoplePane = (props) => {
                 text: localeStrings.forbidVideoMenuLabel,
                 iconProps: {
                     iconName: 'ControlButtonCameraProhibitedSmall',
-                    styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
+                    styles: {
+                        root: {
+                            lineHeight: '1rem',
+                            textAlign: 'center'
+                        }
+                    }
                 },
                 onClick: () => {
                     onForbidVideo([participantId]);
@@ -298,16 +306,10 @@ 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',
@@ -315,28 +317,22 @@ export const usePeoplePane = (props) => {
                     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',
@@ -344,7 +340,11 @@ export const usePeoplePane = (props) => {
                     onClick: onStartSpotlight,
                     iconProps: {
                         iconName: 'StartSpotlightContextualMenuItem',
-                        styles: { root: { lineHeight: 0 } }
+                        styles: {
+                            root: {
+                                lineHeight: 0
+                            }
+                        }
                     },
                     ariaLabel: startSpotlightMenuText,
                     disabled: maxSpotlightedParticipantsReached,
@@ -359,7 +359,12 @@ export const usePeoplePane = (props) => {
                     text: localeStrings === null || localeStrings === void 0 ? void 0 : localeStrings.unpinParticipantMenuLabel,
                     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);
@@ -371,12 +376,15 @@ 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,
                     iconProps: {
                         iconName: 'PinParticipant',
-                        styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
+                        styles: {
+                            root: {
+                                lineHeight: '1rem',
+                                textAlign: 'center'
+                            }
+                        }
                     },
                     onClick: () => {
                         onPinParticipant(participantId);
@@ -390,91 +398,44 @@ 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,
@@ -490,6 +451,10 @@ 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