@azure/communication-react 1.8.0-alpha-202309080012 → 1.8.0-alpha-202309130012

package/dist/communication-react.d.ts

@@ -1135,7 +1135,7 @@ export declare interface CallAdapterSubscribers {
      */
     on(event: 'transferRequested', listener: TransferRequestedListener): void;
     /**
-     * Unsubscribe function for 'capabilitiesChanged' event.
+     * Subscribe function for 'capabilitiesChanged' event.
      */
     on(event: 'capabilitiesChanged', listener: CapabilitiesChangedListener): void;
     /**
@@ -2861,6 +2861,7 @@ export declare interface CallWithChatAdapterSubscriptions {
     on(event: 'isCaptionsActiveChanged', listener: IsCaptionsActiveChangedListener): void;
     on(event: 'isCaptionLanguageChanged', listener: IsCaptionLanguageChangedListener): void;
     on(event: 'isSpokenLanguageChanged', listener: IsSpokenLanguageChangedListener): void;
+    on(event: 'capabilitiesChanged', listener: CapabilitiesChangedListener): void;
     off(event: 'callEnded', listener: CallEndedListener): void;
     off(event: 'isMutedChanged', listener: IsMutedChangedListener): void;
     off(event: 'callIdChanged', listener: CallIdChangedListener): void;
@@ -2876,6 +2877,7 @@ export declare interface CallWithChatAdapterSubscriptions {
     off(event: 'isCaptionsActiveChanged', listener: IsCaptionsActiveChangedListener): void;
     off(event: 'isCaptionLanguageChanged', listener: IsCaptionLanguageChangedListener): void;
     off(event: 'isSpokenLanguageChanged', listener: IsSpokenLanguageChangedListener): void;
+    off(event: 'capabilitiesChanged', listener: CapabilitiesChangedListener): void;
     on(event: 'messageReceived', listener: MessageReceivedListener): void;
     on(event: 'messageSent', listener: MessageSentListener): void;
     on(event: 'messageRead', listener: MessageReadListener): void;
@@ -3349,7 +3351,7 @@ export declare interface CallWithChatControlOptions extends CommonCallControlOpt
  *
  * @public
  */
-export declare type CallWithChatEvent = 'callError' | 'chatError' | 'callEnded' | 'isMutedChanged' | 'callIdChanged' | 'isLocalScreenSharingActiveChanged' | 'displayNameChanged' | 'isSpeakingChanged' | 'callParticipantsJoined' | 'callParticipantsLeft' | 'selectedMicrophoneChanged' | 'selectedSpeakerChanged' | /* @conditional-compile-remove(close-captions) */ 'isCaptionsActiveChanged' | /* @conditional-compile-remove(close-captions) */ 'captionsReceived' | /* @conditional-compile-remove(close-captions) */ 'isCaptionLanguageChanged' | /* @conditional-compile-remove(close-captions) */ 'isSpokenLanguageChanged' | 'messageReceived' | 'messageSent' | 'messageRead' | 'chatParticipantsAdded' | 'chatParticipantsRemoved';
+export declare type CallWithChatEvent = 'callError' | 'chatError' | 'callEnded' | 'isMutedChanged' | 'callIdChanged' | 'isLocalScreenSharingActiveChanged' | 'displayNameChanged' | 'isSpeakingChanged' | 'callParticipantsJoined' | 'callParticipantsLeft' | 'selectedMicrophoneChanged' | 'selectedSpeakerChanged' | /* @conditional-compile-remove(close-captions) */ 'isCaptionsActiveChanged' | /* @conditional-compile-remove(close-captions) */ 'captionsReceived' | /* @conditional-compile-remove(close-captions) */ 'isCaptionLanguageChanged' | /* @conditional-compile-remove(close-captions) */ 'isSpokenLanguageChanged' | /* @conditional-compile-remove(capabilities) */ 'capabilitiesChanged' | 'messageReceived' | 'messageSent' | 'messageRead' | 'chatParticipantsAdded' | 'chatParticipantsRemoved';
 
 /**
  * @beta

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

@@ -178,7 +178,7 @@ const _isValidIdentifier = (identifier) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.8.0-alpha-202309080012';
+var telemetryVersion = '1.8.0-alpha-202309130012';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -15365,7 +15365,7 @@ const _HighContrastAwareIcon = (props) => {
  * Generates default {@link IContextualMenuProps} for buttons that
  * show a drop-down to select devices to use.
  *
- * @private
+ * @internal
  */
 const generateDefaultDeviceMenuProps = (props, strings, primaryActionItem, isSelectCamAllowed = true, isSelectMicAllowed = true) => {
     var _a, _b;
@@ -23744,7 +23744,29 @@ const CallControls = (props) => {
     const raiseHandButtonProps = usePropsFor$1(RaiseHandButton);
     /* @conditional-compile-remove(PSTN-calls) */
     const alternateCallerId = useAdapter().getState().alternateCallerId;
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */ /* @conditional-compile-remove(raise-hand) */
+    const devicesButtonProps = usePropsFor$1(DevicesButton);
+    let numberOfButtons = 0;
+    const screenShareButtonIsEnabled = isEnabled$2(options === null || options === void 0 ? void 0 : options.screenShareButton);
+    if (screenShareButtonIsEnabled) {
+        numberOfButtons++;
+    }
+    const microphoneButtonIsEnabled = isEnabled$2(options === null || options === void 0 ? void 0 : options.microphoneButton);
+    if (microphoneButtonIsEnabled) {
+        numberOfButtons++;
+    }
+    const cameraButtonIsEnabled = isEnabled$2(options === null || options === void 0 ? void 0 : options.cameraButton);
+    if (cameraButtonIsEnabled) {
+        numberOfButtons++;
+    }
+    if (isEnabled$2(options === null || options === void 0 ? void 0 : options.endCallButton)) {
+        numberOfButtons++;
+    }
+    const showParticipantsButtonInControlBar = isEnabled$2(options === null || options === void 0 ? void 0 : options.participantsButton) &&
+        /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
+        !props.isMobile;
+    if (showParticipantsButtonInControlBar) {
+        numberOfButtons++;
+    }
     const moreButtonContextualMenuItems = () => {
         const items = [];
         if (props.isMobile && props.onPeopleButtonClicked && isEnabled$2(options === null || options === void 0 ? void 0 : options.participantsButton)) {
@@ -23795,32 +23817,72 @@ const CallControls = (props) => {
                 }
             });
         }
-        /* @conditional-compile-remove(raise-hand) */
-        if (raiseHandButtonIsEnabled) {
-            items.push({
-                key: 'raiseHandButtonKey',
-                text: raiseHandButtonProps.checked
-                    ? localeStrings.component.strings.raiseHandButton.onLabel
-                    : localeStrings.component.strings.raiseHandButton.offLabel,
-                onClick: () => {
-                    if (raiseHandButtonProps.onToggleRaiseHand) {
-                        raiseHandButtonProps.onToggleRaiseHand();
-                    }
-                },
-                iconProps: { iconName: 'RaiseHandContextualMenuItem', styles: { root: { lineHeight: 0 } } },
-                itemProps: {
-                    styles: buttonFlyoutIncreasedSizeStyles
-                },
-                disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.raiseHandButton),
-                ['data-ui-id']: 'raise-hand-button'
-            });
-        }
         return items;
     };
+    const moreButtonMenuItems = moreButtonContextualMenuItems();
+    let showMoreButton = isEnabled$2(options === null || options === void 0 ? void 0 : options.moreButton) && moreButtonMenuItems.length > 0;
+    if (showMoreButton) {
+        numberOfButtons++;
+    }
+    const customButtons = React.useMemo(() => generateCustomControlBarButtons$1(onFetchCustomButtonPropsTrampoline$1(options), options === null || options === void 0 ? void 0 : options.displayType), [options]);
+    numberOfButtons += React__default['default'].Children.count(customButtons['primary']) + React__default['default'].Children.count(customButtons['secondary']);
+    let showDevicesButtonInControlBar = isEnabled$2(options === null || options === void 0 ? void 0 : options.devicesButton);
+    if (showDevicesButtonInControlBar && (props.isMobile ? numberOfButtons < 5 : true)) {
+        numberOfButtons++;
+    }
+    else {
+        showDevicesButtonInControlBar = false;
+        showMoreButton = isEnabled$2(options === null || options === void 0 ? void 0 : options.moreButton);
+    }
+    /* @conditional-compile-remove(raise-hand) */
+    const raiseHandButtonIsEnabled = isEnabled$2(options === null || options === void 0 ? void 0 : options.raiseHandButton);
+    /* @conditional-compile-remove(raise-hand) */
+    let showRaiseHandButtonInControlBar = raiseHandButtonIsEnabled;
+    /* @conditional-compile-remove(raise-hand) */
+    if (showRaiseHandButtonInControlBar && (props.isMobile ? numberOfButtons < 5 : true)) {
+        numberOfButtons++;
+    }
+    else {
+        // If more button is not present but enabled then replace previous button (devices button) with more button
+        if (!showMoreButton && isEnabled$2(options === null || options === void 0 ? void 0 : options.moreButton)) {
+            showMoreButton = true;
+            showDevicesButtonInControlBar = false;
+        }
+        showRaiseHandButtonInControlBar = false;
+    }
+    if (!showDevicesButtonInControlBar) {
+        const devicesButtonMenu = generateDefaultDeviceMenuProps(devicesButtonProps, localeStrings.component.strings.devicesButton);
+        moreButtonMenuItems.push({
+            key: 'devicesButtonKey',
+            text: localeStrings.component.strings.devicesButton.label,
+            iconProps: { iconName: 'ControlButtonOptions', styles: { root: { lineHeight: 0 } } },
+            subMenuProps: devicesButtonMenu,
+            ['data-ui-id']: 'call-composite-more-menu-devices-button'
+        });
+    }
+    /* @conditional-compile-remove(raise-hand) */
+    if (!showRaiseHandButtonInControlBar) {
+        moreButtonMenuItems.push({
+            key: 'raiseHandButtonKey',
+            text: raiseHandButtonProps.checked
+                ? localeStrings.component.strings.raiseHandButton.onLabel
+                : localeStrings.component.strings.raiseHandButton.offLabel,
+            onClick: () => {
+                if (raiseHandButtonProps.onToggleRaiseHand) {
+                    raiseHandButtonProps.onToggleRaiseHand();
+                }
+            },
+            iconProps: { iconName: 'RaiseHandContextualMenuItem', styles: { root: { lineHeight: 0 } } },
+            itemProps: {
+                styles: buttonFlyoutIncreasedSizeStyles
+            },
+            disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.raiseHandButton),
+            ['data-ui-id']: 'call-composite-more-menu-raise-hand-button'
+        });
+    }
     /* @conditional-compile-remove(PSTN-calls) */
     const [showDialpad, setShowDialpad] = React.useState(false);
     const theme = react.useTheme();
-    const customButtons = React.useMemo(() => generateCustomControlBarButtons$1(onFetchCustomButtonPropsTrampoline$1(options), options === null || options === void 0 ? void 0 : options.displayType), [options]);
     // when props.options is false then we want to hide the whole control bar.
     if (props.options === false) {
         return React__default['default'].createElement(React__default['default'].Fragment, null);
@@ -23829,11 +23891,6 @@ const CallControls = (props) => {
     const onDismissDialpad = () => {
         setShowDialpad(false);
     };
-    const screenShareButtonIsEnabled = isEnabled$2(options === null || options === void 0 ? void 0 : options.screenShareButton);
-    const microphoneButtonIsEnabled = isEnabled$2(options === null || options === void 0 ? void 0 : options.microphoneButton);
-    const cameraButtonIsEnabled = isEnabled$2(options === null || options === void 0 ? void 0 : options.cameraButton);
-    /* @conditional-compile-remove(raise-hand) */
-    const raiseHandButtonIsEnabled = isEnabled$2(options === null || options === void 0 ? void 0 : options.raiseHandButton);
     return (React__default['default'].createElement(react.Stack, { horizontalAlign: "center", className: callControlsContainerStyles },
         /* @conditional-compile-remove(PSTN-calls) */
         React__default['default'].createElement(SendDtmfDialpad, { isMobile: !!props.isMobile, strings: dialpadStrings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad }),
@@ -23841,16 +23898,14 @@ const CallControls = (props) => {
             React__default['default'].createElement(ControlBar, { layout: props.displayVertical ? 'vertical' : 'horizontal', styles: controlBarStyles(theme.semanticColors.bodyBackground) },
                 microphoneButtonIsEnabled && (React__default['default'].createElement(Microphone, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.microphoneButton) })),
                 cameraButtonIsEnabled && (React__default['default'].createElement(Camera, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.cameraButton) })),
-                /* @conditional-compile-remove(raise-hand) */ raiseHandButtonIsEnabled && !props.isMobile && (React__default['default'].createElement(RaiseHand, { displayType: options === null || options === void 0 ? void 0 : options.displayType })),
+                /* @conditional-compile-remove(raise-hand) */ showRaiseHandButtonInControlBar && (React__default['default'].createElement(RaiseHand, { displayType: options === null || options === void 0 ? void 0 : options.displayType })),
                 screenShareButtonIsEnabled && (React__default['default'].createElement(ScreenShare, { option: options === null || options === void 0 ? void 0 : options.screenShareButton, displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.screenShareButton) })),
-                isEnabled$2(options === null || options === void 0 ? void 0 : options.participantsButton) &&
-                    /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
-                    !props.isMobile && (React__default['default'].createElement(Participants, { option: options === null || options === void 0 ? void 0 : options.participantsButton, callInvitationURL: props.callInvitationURL, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, isMobile: props.isMobile, disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.participantsButton) })) && (
+                showParticipantsButtonInControlBar && (React__default['default'].createElement(Participants, { option: options === null || options === void 0 ? void 0 : options.participantsButton, callInvitationURL: props.callInvitationURL, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, isMobile: props.isMobile, disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.participantsButton) })) && (
                 /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
                 React__default['default'].createElement(People, { checked: props.peopleButtonChecked, ariaLabel: peopleButtonStrings === null || peopleButtonStrings === void 0 ? void 0 : peopleButtonStrings.label, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "call-composite-people-button", strings: peopleButtonStrings, disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.participantsButton) })),
-                isEnabled$2(options === null || options === void 0 ? void 0 : options.devicesButton) && (React__default['default'].createElement(Devices, { displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.devicesButton) })),
+                showDevicesButtonInControlBar && (React__default['default'].createElement(Devices, { displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.devicesButton) })),
                 /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */ /* @conditional-compile-remove(raise-hand) */
-                isEnabled$2(options === null || options === void 0 ? void 0 : options.moreButton) && moreButtonContextualMenuItems().length > 0 && (React__default['default'].createElement(MoreButton, { "data-ui-id": "common-call-composite-more-button", strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: { items: moreButtonContextualMenuItems() }, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact' })),
+                showMoreButton && (React__default['default'].createElement(MoreButton, { "data-ui-id": "common-call-composite-more-button", strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: { items: moreButtonMenuItems }, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact' })),
                 customButtons['primary'],
                 isEnabled$2(options === null || options === void 0 ? void 0 : options.endCallButton) && React__default['default'].createElement(EndCall, { displayType: options === null || options === void 0 ? void 0 : options.displayType })))));
 };
@@ -24235,7 +24290,10 @@ const DesktopMoreButton = (props) => {
                             }
                         }
                     }
-                ]
+                ],
+                calloutProps: {
+                    preventDismissOnEvent: _preventDismissOnEvent
+                }
             }
         });
     }