@azure/communication-react 1.7.0-alpha-202308030014 → 1.7.0-alpha-202308040014

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.7.0-alpha-202308030014';
+var telemetryVersion = '1.7.0-alpha-202308040014';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -21872,7 +21872,7 @@ const Camera = (props) => {
             props.disabled ||
             /* @conditional-compile-remove(rooms) */ (isRoomsCall && ((_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.role) === 'Unknown'), 
         /* @conditional-compile-remove(video-background-effects) */
-        onShowVideoEffectsPicker: props.onShowVideoEffectsPicker })));
+        onShowVideoEffectsPicker: props.onShowVideoEffectsPicker, componentRef: props.componentRef })));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -22921,7 +22921,7 @@ const CommonCallControlBar = (props) => {
                                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
                                         disabled: props.disableButtonsForHoldScreen || isDisabled$2(options.cameraButton), 
                                         /* @conditional-compile-remove(video-background-effects) */
-                                        onShowVideoEffectsPicker: props.onShowVideoEffectsPicker })),
+                                        onShowVideoEffectsPicker: props.onShowVideoEffectsPicker, componentRef: props.cameraButtonRef })),
                                     screenShareButtonIsEnabled && (React__default['default'].createElement(ScreenShare, { option: options.screenShareButton, displayType: options.displayType, styles: screenShareButtonStyles, 
                                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
                                         disabled: props.disableButtonsForHoldScreen || isDisabled$2(options.screenShareButton) })), (_a = customButtons['primary']) === null || _a === void 0 ? void 0 :
@@ -22946,7 +22946,7 @@ const CommonCallControlBar = (props) => {
                     React__default['default'].createElement(react.Stack, { horizontal: true, className: !props.mobileView ? react.mergeStyles(desktopButtonContainerStyle) : undefined },
                         isEnabled$1(options === null || options === void 0 ? void 0 : options.peopleButton) && (React__default['default'].createElement(PeopleButton, { checked: props.peopleButtonChecked, ariaLabel: peopleButtonStrings === null || peopleButtonStrings === void 0 ? void 0 : peopleButtonStrings.label, showLabel: options.displayType !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "common-call-composite-people-button", disabled: props.disableButtonsForLobbyPage ||
                                 props.disableButtonsForHoldScreen ||
-                                isDisabled$2(options.peopleButton), strings: peopleButtonStrings, styles: commonButtonStyles })), (_b = customButtons['secondary']) === null || _b === void 0 ? void 0 :
+                                isDisabled$2(options.peopleButton), strings: peopleButtonStrings, styles: commonButtonStyles, componentRef: props.peopleButtonRef })), (_b = customButtons['secondary']) === null || _b === void 0 ? void 0 :
                         _b.slice(0, CUSTOM_BUTTON_OPTIONS.MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS).map((CustomButton, i) => {
                             return (React__default['default'].createElement(CustomButton, { key: `secondary-custom-button-${i}`, styles: commonButtonStyles, showLabel: options.displayType !== 'compact' }));
                         }))))))));
@@ -24128,10 +24128,12 @@ const hasRemoveParticipantsPermissionTrampoline = (adapter) => {
 const PEOPLE_SIDE_PANE_ID = 'people';
 /** @private */
 const usePeoplePane = (props) => {
-    const { updateSidePaneRenderer, inviteLink, onFetchAvatarPersonaData, onFetchParticipantMenuItems, setDrawerMenuItems, mobileView } = props;
+    const { updateSidePaneRenderer, inviteLink, onFetchAvatarPersonaData, onFetchParticipantMenuItems, setDrawerMenuItems, mobileView, peopleButtonRef } = props;
     const closePane = React.useCallback(() => {
+        var _a;
         updateSidePaneRenderer(undefined);
-    }, [updateSidePaneRenderer]);
+        (_a = peopleButtonRef === null || peopleButtonRef === void 0 ? void 0 : peopleButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [peopleButtonRef, updateSidePaneRenderer]);
     const localeStrings = localeTrampoline(useLocale());
     const onRenderHeader = React.useCallback(() => (React__default['default'].createElement(SidePaneHeader, { onClose: closePane, headingText: localeStrings.peoplePaneTitle, dismissSidePaneButtonAriaLabel: localeStrings.dismissSidePaneButtonLabel, mobileView: mobileView !== null && mobileView !== void 0 ? mobileView : false })), [mobileView, closePane, localeStrings]);
     const onRenderContent = React.useCallback(() => {
@@ -24350,10 +24352,12 @@ const VIDEO_EFFECTS_SIDE_PANE_ID = 'videoeffects';
 /** @private */
 const VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM = 17.5;
 /** @private */
-const useVideoEffectsPane = (updateSidePaneRenderer, mobileView, latestErrors, onDismissError) => {
+const useVideoEffectsPane = (updateSidePaneRenderer, mobileView, latestErrors, onDismissError, cameraButtonRef) => {
     const closePane = React.useCallback(() => {
+        var _a;
         updateSidePaneRenderer(undefined);
-    }, [updateSidePaneRenderer]);
+        (_a = cameraButtonRef === null || cameraButtonRef === void 0 ? void 0 : cameraButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [cameraButtonRef, updateSidePaneRenderer]);
     /* @conditional-compile-remove(video-background-effects) */
     const locale = useLocale();
     const onRenderHeader = React.useCallback(() => {
@@ -24686,6 +24690,8 @@ const CallArrangement = (props) => {
     }, [props.mobileView]);
     const theme = useTheme();
     const callGalleryStyles = React.useMemo(() => galleryParentContainerStyles(theme.palette.neutralLighterAlt), [theme.palette.neutralLighterAlt]);
+    const peopleButtonRef = React.useRef(null);
+    const cameraButtonRef = React.useRef(null);
     const containerRef = React.useRef(null);
     const containerWidth = _useContainerWidth(containerRef);
     const containerHeight = _useContainerHeight(containerRef);
@@ -24711,7 +24717,8 @@ const CallArrangement = (props) => {
             /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
             onFetchAvatarPersonaData: props.onFetchAvatarPersonaData,
             onFetchParticipantMenuItems: (_a = props.callControlProps) === null || _a === void 0 ? void 0 : _a.onFetchParticipantMenuItems,
-            mobileView: props.mobileView
+            mobileView: props.mobileView,
+            peopleButtonRef
         });
     }, [
         updateSidePaneRenderer,
@@ -24719,7 +24726,8 @@ const CallArrangement = (props) => {
         (_a = props.callControlProps) === null || _a === void 0 ? void 0 : _a.onFetchParticipantMenuItems,
         /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
         props.onFetchAvatarPersonaData,
-        props.mobileView
+        props.mobileView,
+        peopleButtonRef
     ]);
     const { isPeoplePaneOpen, openPeoplePane, closePeoplePane } = usePeoplePane(peoplePaneProps);
     const togglePeoplePane = React.useCallback(() => {
@@ -24752,7 +24760,7 @@ const CallArrangement = (props) => {
     /* @conditional-compile-remove(video-background-effects) */
     const onResolveVideoEffectDependency = adapter.getState().onResolveVideoEffectDependency;
     /* @conditional-compile-remove(video-background-effects) */
-    const { openVideoEffectsPane } = useVideoEffectsPane(props.updateSidePaneRenderer, props.mobileView, props.latestErrors, props.onDismissError);
+    const { openVideoEffectsPane } = useVideoEffectsPane(props.updateSidePaneRenderer, props.mobileView, props.latestErrors, props.onDismissError, cameraButtonRef);
     const [showDrawer, setShowDrawer] = React.useState(false);
     const onMoreButtonClicked = React.useCallback(() => {
         setShowDrawer(true);
@@ -24821,7 +24829,7 @@ const CallArrangement = (props) => {
                     /* @conditional-compile-remove(video-background-effects) */
                     onShowVideoEffectsPicker: onResolveVideoEffectDependency ? openVideoEffectsPane : undefined, 
                     /* @conditional-compile-remove(PSTN-calls) */
-                    onClickShowDialpad: alternateCallerId ? onClickShowDialpad : undefined, displayVertical: verticalControlBar }))))),
+                    onClickShowDialpad: alternateCallerId ? onClickShowDialpad : undefined, displayVertical: verticalControlBar, peopleButtonRef: peopleButtonRef, cameraButtonRef: cameraButtonRef }))))),
                 ((_e = props.callControlProps) === null || _e === void 0 ? void 0 : _e.options) !== false && showDrawer && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStylesValue },
                     React__default['default'].createElement(PreparedMoreDrawer, { callControls: props.callControlProps.options, onLightDismiss: closeDrawer, onPeopleButtonClicked: onMoreDrawerPeopleClicked, 
                         /* @conditional-compile-remove(PSTN-calls) */