@azure/communication-react 1.4.2-alpha-202211290015.0 → 1.4.2-alpha-202211300015.0

package/dist/communication-react.d.ts

@@ -50,10 +50,10 @@ import { IButtonProps } from '@fluentui/react';
 import { IButtonStyles } from '@fluentui/react';
 import { IContextualMenuItem } from '@fluentui/react';
 import { IContextualMenuItemStyles } from '@fluentui/react';
+import { IContextualMenuProps } from '@fluentui/react';
 import { IContextualMenuStyles } from '@fluentui/react';
 import { IDropdownOption } from '@fluentui/react';
 import { IDropdownStyles } from '@fluentui/react';
-import { IIconProps } from '@fluentui/react';
 import { ILinkStyles } from '@fluentui/react';
 import { IMessageBarProps } from '@fluentui/react';
 import { IncomingCall } from '@azure/communication-calling';
@@ -4553,6 +4553,7 @@ export declare const DEFAULT_COMPONENT_ICONS: {
     UnsupportedBrowserWarning: JSX.Element;
     BrowserPermissionDeniedError: JSX.Element;
     VideoTilePinned: JSX.Element;
+    VideoTileMoreOptions: JSX.Element;
 };
 
 /**
@@ -4649,6 +4650,7 @@ export declare const DEFAULT_COMPOSITE_ICONS: {
     UnsupportedBrowserWarning: JSX.Element;
     BrowserPermissionDeniedError: JSX.Element;
     VideoTilePinned: JSX.Element;
+    VideoTileMoreOptions: JSX.Element;
 };
 
 /**
@@ -8295,18 +8297,6 @@ export declare interface VideoStreamRendererViewState {
  */
 export declare const VideoTile: (props: VideoTileProps) => JSX.Element;
 
-/**
- * @beta
- * MenuItems to be diplayed in video tile in the contextual/drawer menu
- */
-export declare type VideoTileMenuItems = Array<{
-    key: string;
-    ariaLabel?: string;
-    text: string;
-    onClick: () => void;
-    iconProps: IIconProps;
-}>;
-
 /**
  * Props for {@link VideoTile}.
  *
@@ -8345,10 +8335,6 @@ export declare interface VideoTileProps {
      * Whether the video is muted or not.
      */
     isMuted?: boolean;
-    /**
-     * Display custom menu items in the VideoTile's contextual menu.
-     */
-    menuItems?: VideoTileMenuItems;
     /**
      * If true, the video tile will show the pin icon.
      */
@@ -8387,6 +8373,12 @@ export declare interface VideoTileProps {
      */
     participantState?: ParticipantState;
     strings?: VideoTileStrings;
+    /**
+     * Display custom menu items in the VideoTile's contextual menu.
+     * Uses Fluent UI ContextualMenu.
+     * An ellipses icon will be displayed to open the contextual menu if this prop is defined.
+     */
+    contextualMenu?: IContextualMenuProps;
     /**
      * Callback triggered by video tile on touch and hold.
      */

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

@@ -202,7 +202,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.4.2-alpha-202211290015.0';
+var telemetryVersion = '1.4.2-alpha-202211300015.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -4382,22 +4382,6 @@ const messageBarType = (errorType) => {
             return react.MessageBarType.error;
     }
 };
-/**
- * @private
- */
-const mapMenuItemsToContextualMenuItems = (menuItems) => {
-    const contextualMenuItems = [];
-    menuItems.map((item) => {
-        contextualMenuItems.push({
-            key: item.key,
-            text: item.text,
-            ariaLabel: item.ariaLabel,
-            onClick: item.onClick,
-            iconProps: item.iconProps
-        });
-    });
-    return contextualMenuItems;
-};
 /**
  * @private
  * @param errorType
@@ -5071,7 +5055,9 @@ const DEFAULT_COMPONENT_ICONS = {
     /* @conditional-compile-remove(call-readiness) */
     BrowserPermissionDeniedError: React__default['default'].createElement(BrowserPermissionDenied20Filled, null),
     /* @conditional-compile-remove(pinned-participants) */
-    VideoTilePinned: React__default['default'].createElement(reactIcons.Pin16Filled, null)
+    VideoTilePinned: React__default['default'].createElement(reactIcons.Pin16Filled, null),
+    /* @conditional-compile-remove(pinned-participants) */
+    VideoTileMoreOptions: React__default['default'].createElement(reactIcons.MoreHorizontal20Filled, null)
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -8001,36 +7987,21 @@ const participantStateStringStyles = (theme) => {
 /**
  * @private
  */
-const menuButtonStyles = {
+const moreButtonStyles = {
     root: {
-        background: 'none',
-        border: 'none',
-        borderRadius: 0,
-        minHeight: '0.125rem',
-        minWidth: '2rem',
-        width: '100%',
-        maxWidth: '3rem',
-        svg: {
-            verticalAlign: 'text-top'
-        }
+        // To ensure that the button is clickable when there is a floating video tile
+        zIndex: 1,
+        color: 'inherit',
+        height: '100%'
     },
-    splitButtonMenuButton: {
-        border: 'none'
+    rootHovered: {
+        background: 'none'
     },
-    flexContainer: {
-        flexFlow: 'column',
-        display: 'contents'
+    rootPressed: {
+        background: 'none'
     },
-    label: {
-        fontSize: '0.625rem',
-        fontWeight: '400',
-        lineHeight: '1rem',
-        cursor: 'pointer',
-        display: 'block',
-        margin: '0rem 0.25rem',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap'
+    rootExpanded: {
+        background: 'none'
     }
 };
 
@@ -8141,16 +8112,24 @@ const DefaultPlaceholder = (props) => {
         React__default['default'].createElement(react.Stack, { styles: defaultPersonaStyles },
             React__default['default'].createElement(react.Persona, { coinSize: coinSize, hidePersonaDetails: hidePersonaDetails, text: text !== null && text !== void 0 ? text : '', initialsTextColor: "white", "aria-label": noVideoAvailableAriaLabel !== null && noVideoAvailableAriaLabel !== void 0 ? noVideoAvailableAriaLabel : '', showOverflowTooltip: false }))));
 };
-/* @conditional-compile-remove(pinned-participants) */
-const menuIcon = () => React__default['default'].createElement(reactIcons.MoreHorizontal20Filled, { primaryFill: "currentColor" });
 const defaultPersonaStyles = { root: { margin: 'auto', maxHeight: '100%' } };
 /* @conditional-compile-remove(pinned-participants) */
+const videoTileMoreIconProps = { iconName: 'VideoTileMoreOptions' };
+/* @conditional-compile-remove(pinned-participants) */
+const videoTileMoreMenuIconProps = { iconName: undefined, style: { display: 'none' } };
+/* @conditional-compile-remove(pinned-participants) */
+const videoTileMoreMenuProps = {
+    directionalHint: react.DirectionalHint.topLeftEdge,
+    isBeakVisible: false,
+    styles: { container: { maxWidth: '8rem' } }
+};
+/* @conditional-compile-remove(pinned-participants) */
 const VideoTileMoreOptionsButton = (props) => {
-    const { menuItems, menuStyles } = props;
-    if (!menuItems || menuItems.length === 0) {
+    const { contextualMenu } = props;
+    if (!contextualMenu) {
         return React__default['default'].createElement(React__default['default'].Fragment, null);
     }
-    return (React__default['default'].createElement(react.DefaultButton, { styles: react.concatStyleSets(menuButtonStyles, menuStyles !== null && menuStyles !== void 0 ? menuStyles : {}), onRenderIcon: menuIcon, menuIconProps: { hidden: true }, menuProps: { items: mapMenuItemsToContextualMenuItems(menuItems), directionalHint: react.DirectionalHint.topRightEdge } }));
+    return (React__default['default'].createElement(react.IconButton, { styles: moreButtonStyles, iconProps: videoTileMoreIconProps, menuIconProps: videoTileMoreMenuIconProps, menuProps: Object.assign(Object.assign({}, videoTileMoreMenuProps), contextualMenu) }));
 };
 /**
  * A component to render the video stream for a single call participant.
@@ -8162,9 +8141,9 @@ const VideoTileMoreOptionsButton = (props) => {
 const VideoTile = (props) => {
     const { children, displayName, initialsName, isMirrored, isMuted, 
     /* @conditional-compile-remove(pinned-participants) */
-    isPinned, onRenderPlaceholder, renderElement, showLabel = true, showMuteIndicator = true, styles, userId, noVideoAvailableAriaLabel, isSpeaking, 
+    isPinned, onRenderPlaceholder, renderElement, showLabel = true, showMuteIndicator = true, styles, userId, noVideoAvailableAriaLabel, isSpeaking, personaMinSize = DEFAULT_PERSONA_MIN_SIZE_PX, personaMaxSize = DEFAULT_PERSONA_MAX_SIZE_PX, 
     /* @conditional-compile-remove(pinned-participants) */
-    menuItems, personaMinSize = DEFAULT_PERSONA_MIN_SIZE_PX, personaMaxSize = DEFAULT_PERSONA_MAX_SIZE_PX } = props;
+    contextualMenu } = props;
     const [personaSize, setPersonaSize] = React.useState(100);
     const videoTileRef = React.useRef(null);
     const locale = useLocale$1();
@@ -8238,7 +8217,7 @@ const VideoTile = (props) => {
                     showMuteIndicator && isMuted && (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(iconContainerStyle) },
                         React__default['default'].createElement(react.Icon, { iconName: "VideoTileMicOff" }))),
                     /* @conditional-compile-remove(pinned-participants) */
-                    React__default['default'].createElement(VideoTileMoreOptionsButton, { menuItems: menuItems, menuStyles: props.styles }),
+                    React__default['default'].createElement(VideoTileMoreOptionsButton, { contextualMenu: contextualMenu }),
                     /* @conditional-compile-remove(pinned-participants) */
                     isPinned && (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(iconContainerStyle) },
                         React__default['default'].createElement(react.Icon, { iconName: "VideoTilePinned", className: react.mergeStyles(pinIconStyle) })))))),