@azure/communication-react 1.8.1-alpha-202310070012 → 1.9.0-alpha-202310110013

package/dist/communication-react.d.ts

@@ -8024,7 +8024,7 @@ export declare interface OptionsDevice {
 /**
  * Different modes and positions of the overflow gallery in the VideoGallery
  *
- * @beta
+ * @public
  */
 export declare type OverflowGalleryPosition = 'horizontalBottom' | 'verticalRight' | /* @conditional-compile-remove(gallery-layouts) */ 'horizontalTop';
 
@@ -9860,7 +9860,7 @@ export declare const useTheme: () => Theme;
 /**
  * Styles for the control bar inside the VerticalGallery component
  *
- * @beta
+ * @public
  */
 export declare interface VerticalGalleryControlBarStyles extends BaseCustomStyles {
     /**
@@ -9880,7 +9880,7 @@ export declare interface VerticalGalleryControlBarStyles extends BaseCustomStyle
 /**
  * Strings for localization of the vertical gallery.
  *
- * @beta
+ * @public
  */
 export declare interface VerticalGalleryStrings {
     /** Aria label for the left page navigation button */
@@ -9892,7 +9892,7 @@ export declare interface VerticalGalleryStrings {
 /**
  * Styles for the VerticalGallery component
  *
- * @beta
+ * @public
  */
 export declare interface VerticalGalleryStyles extends BaseCustomStyles {
     /** Styles for each video tile in the vertical gallery */

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

@@ -177,7 +177,7 @@ const _isValidIdentifier = (identifier) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.8.1-alpha-202310070012';
+var telemetryVersion = '1.9.0-alpha-202310110013';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -13815,7 +13815,7 @@ const navIconStyles = {
  * VerticalGallery is a overflow gallery for participants in the {@link VideoGallery} component. Stacks
  * participants on the Y-axis of the VideoGallery for better use of horizontal space.
  *
- * @beta
+ * @public
  */
 const VerticalGallery = (props) => {
     const { children, styles, childrenPerPage, onFetchTilesToRender } = props;
@@ -23531,6 +23531,10 @@ const CaptionsBanner = (props) => {
         captionsBannerSpinnerText: strings.captionsBannerSpinnerText
     };
     /* @conditional-compile-remove(close-captions) */
+    const onRenderAvatar = React.useCallback((userId, options) => {
+        return React__default["default"].createElement(AvatarPersona, Object.assign({ userId: userId }, options, { dataProvider: props.onFetchAvatarPersonaData }));
+    }, [props.onFetchAvatarPersonaData]);
+    /* @conditional-compile-remove(close-captions) */
     const { innerWidth: width } = window;
     /* @conditional-compile-remove(close-captions) */
     const [windowWidth, setWindowWidth] = React.useState(width);
@@ -23549,7 +23553,7 @@ const CaptionsBanner = (props) => {
         /* @conditional-compile-remove(close-captions) */ React__default["default"].createElement("div", { className: containerClassName },
             React__default["default"].createElement(react.Stack, { horizontalAlign: "center" },
                 React__default["default"].createElement(react.Stack.Item, { style: { width: props.isMobile ? mobileViewBannerWidth : desktopViewBannerWidth } },
-                    React__default["default"].createElement(_CaptionsBanner, Object.assign({}, captionsBannerProps, handlers, { formFactor: props.isMobile ? 'compact' : 'default', strings: captionsBannerStrings })))),
+                    React__default["default"].createElement(_CaptionsBanner, Object.assign({}, captionsBannerProps, handlers, { onRenderAvatar: onRenderAvatar, formFactor: props.isMobile ? 'compact' : 'default', strings: captionsBannerStrings })))),
             !props.isMobile && captionsBannerProps.isCaptionsOn && (React__default["default"].createElement("div", { className: floatingChildClassName },
                 React__default["default"].createElement(CaptionsBannerMoreButton, { onCaptionsSettingsClick: onClickCaptionsSettings }))))));
 };
@@ -27135,7 +27139,7 @@ const CallArrangement = (props) => {
                                     canUnmute && !!props.mutedNotificationProps && (React__default["default"].createElement(MutedNotification, Object.assign({}, props.mutedNotificationProps)))),
                                 props.onRenderGalleryContent && props.onRenderGalleryContent(),
                                 /* @conditional-compile-remove(close-captions) */
-                                /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !isInLocalHold && (React__default["default"].createElement(CaptionsBanner, { isMobile: props.mobileView }))))),
+                                /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !isInLocalHold && (React__default["default"].createElement(CaptionsBanner, { isMobile: props.mobileView, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData }))))),
                     React__default["default"].createElement(SidePane, { mobileView: props.mobileView, 
                         /* @conditional-compile-remove(video-background-effects) */
                         maxWidth: isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined, updateSidePaneRenderer: props.updateSidePaneRenderer, onPeopleButtonClicked: props.mobileView && !shouldShowPeopleTabHeaderButton(props.callControlProps.options)
@@ -27340,7 +27344,7 @@ const MediaGallery = (props) => {
     const containerWidth = _useContainerWidth(containerRef);
     /* @conditional-compile-remove(vertical-gallery) */ /* @conditional-compile-remove(rooms) */
     const containerHeight = _useContainerHeight(containerRef);
-    /* @conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */
+    /* @conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */ /* @conditional-compile-remove(vertical-gallery) */
     const containerAspectRatio = containerWidth && containerHeight ? containerWidth / containerHeight : 0;
     const layoutBasedOnTilePosition = localVideoTileLayoutTrampoline(
     /* @conditional-compile-remove(click-to-call) */ (_b = props.localVideoTileOptions) === null || _b === void 0 ? void 0 : _b.position);
@@ -27376,12 +27380,11 @@ const MediaGallery = (props) => {
         containerHeight
     ]);
     const VideoGalleryMemoized = React.useMemo(() => {
-        var _a;
         const layoutBasedOnUserSelection = () => {
             /* @conditional-compile-remove(gallery-layouts) */
             return props.localVideoTileOptions ? layoutBasedOnTilePosition : props.userSetGalleryLayout;
         };
-        return (React__default["default"].createElement(VideoGallery, Object.assign({}, videoGalleryProps, { localVideoViewOptions: localVideoViewOptions$2, remoteVideoViewOptions: remoteVideoViewOptions, styles: VideoGalleryStyles, layout: layoutBasedOnUserSelection(), showCameraSwitcherInLocalPreview: props.isMobile, localVideoCameraCycleButtonProps: cameraSwitcherProps, onRenderAvatar: (_a = props.onRenderAvatar) !== null && _a !== void 0 ? _a : onRenderAvatar, 
+        return (React__default["default"].createElement(VideoGallery, Object.assign({}, videoGalleryProps, { localVideoViewOptions: localVideoViewOptions$2, remoteVideoViewOptions: remoteVideoViewOptions, styles: VideoGalleryStyles, layout: layoutBasedOnUserSelection(), showCameraSwitcherInLocalPreview: props.isMobile, localVideoCameraCycleButtonProps: cameraSwitcherProps, onRenderAvatar: onRenderAvatar, 
             /* @conditional-compile-remove(pinned-participants) */
             remoteVideoTileMenu: remoteVideoTileMenuOptions, 
             /* @conditional-compile-remove(vertical-gallery) */
@@ -27395,7 +27398,6 @@ const MediaGallery = (props) => {
     }, [
         videoGalleryProps,
         props.isMobile,
-        props.onRenderAvatar,
         /* @conditional-compile-remove(rooms) */
         props.localVideoTileOptions,
         cameraSwitcherProps,
@@ -27625,7 +27627,7 @@ const networkReconnectTileSelector = reselect__namespace.createSelector([getUser
  * @private
  */
 const CallPage = (props) => {
-    const { callInvitationURL, onRenderAvatar, onFetchAvatarPersonaData, onFetchParticipantMenuItems, options, mobileView, 
+    const { callInvitationURL, onFetchAvatarPersonaData, onFetchParticipantMenuItems, options, mobileView, 
     /* @conditional-compile-remove(gallery-layouts) */
     galleryLayout = 'floatingLocalVideo', 
     /* @conditional-compile-remove(gallery-layouts) */
@@ -27653,8 +27655,8 @@ const CallPage = (props) => {
             options: callControlOptions,
             increaseFlyoutItemSize: mobileView
         }, 
-        /* @conditional-compile-remove(one-to-n-calling) */
-        onFetchAvatarPersonaData: onFetchAvatarPersonaData, mobileView: mobileView, modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => _isInCall(callStatus) ? (isNetworkHealthy(networkReconnectTileProps.networkReconnectValue) ? (React__default["default"].createElement(MediaGallery, Object.assign({ isMobile: mobileView }, mediaGalleryProps, mediaGalleryHandlers, { onRenderAvatar: onRenderAvatar, onFetchAvatarPersonaData: onFetchAvatarPersonaData, 
+        /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */
+        onFetchAvatarPersonaData: onFetchAvatarPersonaData, mobileView: mobileView, modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => _isInCall(callStatus) ? (isNetworkHealthy(networkReconnectTileProps.networkReconnectValue) ? (React__default["default"].createElement(MediaGallery, Object.assign({ isMobile: mobileView }, mediaGalleryProps, mediaGalleryHandlers, { onFetchAvatarPersonaData: onFetchAvatarPersonaData, 
             /* @conditional-compile-remove(pinned-participants) */
             remoteVideoTileMenuOptions: options === null || options === void 0 ? void 0 : options.remoteVideoTileMenuOptions, drawerMenuHostId: drawerMenuHostId, 
             /* @conditional-compile-remove(click-to-call) */
@@ -28962,10 +28964,10 @@ const TransferPage = (props) => {
                 /* @conditional-compile-remove(call-transfer) */
                 statusText: pageSubject === 'transferTarget'
                     ? strings.transferPageTransferTargetText
-                    : strings.transferPageTransferorText, onRenderAvatar: props.onRenderAvatar, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData })), dataUiId: 'transfer-page', updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: props.latestErrors, onDismissError: props.onDismissError })));
+                    : strings.transferPageTransferorText, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData })), dataUiId: 'transfer-page', updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: props.latestErrors, onDismissError: props.onDismissError })));
 };
 const TransferTile = (props) => {
-    const { displayName, initialsName, userId, onRenderAvatar, onFetchAvatarPersonaData, statusText } = props;
+    const { displayName, initialsName, userId, onFetchAvatarPersonaData, statusText } = props;
     const [personaSize, setPersonaSize] = React.useState();
     const tileRef = React.useRef(null);
     const observer = React.useRef(new ResizeObserver((entries) => {
@@ -28994,7 +28996,7 @@ const TransferTile = (props) => {
     return (React__default["default"].createElement("div", { ref: tileRef, className: react.mergeStyles(tileContainerStyles), "data-is-focusable": true },
         React__default["default"].createElement(react.Stack, { className: react.mergeStyles(tileContentStyles), tokens: { childrenGap: '1rem' } },
             React__default["default"].createElement(react.Stack, { horizontalAlign: "center", tokens: { childrenGap: '0.5rem' } },
-                onRenderAvatar ? onRenderAvatar(userId !== null && userId !== void 0 ? userId : '', placeholderOptions, defaultOnRenderAvatar) : defaultAvatar,
+                defaultAvatar,
                 React__default["default"].createElement(react.Text, { className: react.mergeStyles(displayNameStyles) }, displayName)),
             React__default["default"].createElement(react.Stack, { horizontal: true, horizontalAlign: "center", verticalAlign: "center", tokens: { childrenGap: '0.5rem' } },
                 React__default["default"].createElement(react.Spinner, { size: react.SpinnerSize.large, className: react.mergeStyles(spinnerStyles) }),
@@ -29385,7 +29387,7 @@ const MainScreen = (props) => {
         hasCameras,
         hasMicrophones
     ]);
-    const { callInvitationUrl, onRenderAvatar, onFetchAvatarPersonaData, onFetchParticipantMenuItems } = props;
+    const { callInvitationUrl, onFetchAvatarPersonaData, onFetchParticipantMenuItems } = props;
     const page = useSelector$1(getPage);
     const endedCall = useSelector$1(getEndedCall);
     const [sidePaneRenderer, setSidePaneRenderer] = React__default["default"].useState();
@@ -29475,12 +29477,12 @@ const MainScreen = (props) => {
             break;
         /* @conditional-compile-remove(call-transfer) */
         case 'transferring':
-            pageElement = (React__default["default"].createElement(TransferPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, onRenderAvatar: onRenderAvatar, onFetchAvatarPersonaData: onFetchAvatarPersonaData, latestErrors: latestErrors, onDismissError: onDismissError, 
+            pageElement = (React__default["default"].createElement(TransferPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, onFetchAvatarPersonaData: onFetchAvatarPersonaData, latestErrors: latestErrors, onDismissError: onDismissError, 
                 /* @conditional-compile-remove(capabilities) */
                 capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps }));
             break;
         case 'call':
-            pageElement = (React__default["default"].createElement(CallPage, { onRenderAvatar: onRenderAvatar, callInvitationURL: callInvitationUrl, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: latestErrors, onDismissError: onDismissError, 
+            pageElement = (React__default["default"].createElement(CallPage, { callInvitationURL: callInvitationUrl, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: latestErrors, onDismissError: onDismissError, 
                 /* @conditional-compile-remove(gallery-layouts) */
                 galleryLayout: userSetGalleryLayout, 
                 /* @conditional-compile-remove(gallery-layouts) */