@azure/communication-react 1.4.2-alpha-202211160016.0 → 1.4.2-alpha-202211190015.0

package/dist/communication-react.d.ts

@@ -52,6 +52,7 @@ import { IContextualMenuItemStyles } 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';
@@ -261,6 +262,10 @@ export declare type AzureCommunicationCallAdapterArgs = {
     displayName: string;
     credential: CommunicationTokenCredential;
     locator: CallAdapterLocator;
+    /**
+     * A phone number in E.164 format procured using Azure Communication Services that will be used to represent callers identity.
+     * E.164 numbers are formatted as [+] [country code] [phone number including area code]. For example, +14255550123 for a US phone number.
+     */
     alternateCallerId?: string;
     /**
      * Optional parameters for the {@link AzureCommunicationCallAdapter} created
@@ -8075,6 +8080,18 @@ 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}.
  *
@@ -8113,6 +8130,10 @@ 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.
      */

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-202211160016.0';
+var telemetryVersion = '1.4.2-alpha-202211190015.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -4354,6 +4354,22 @@ 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
@@ -4661,7 +4677,7 @@ const sendIconStyle = react.mergeStyles({
  * @private
  */
 const fileUploadCardsStyles = react.mergeStyles({
-    margin: '0.25rem',
+    margin: '0 0.25rem 0.25rem 0.25rem',
     maxHeight: '12.5rem',
     overflow: 'auto'
 });
@@ -7955,6 +7971,41 @@ const participantStateStringStyles = (theme) => {
         padding: '0.1rem'
     };
 };
+/**
+ * @private
+ */
+const menuButtonStyles = {
+    root: {
+        background: 'none',
+        border: 'none',
+        borderRadius: 0,
+        minHeight: '0.125rem',
+        minWidth: '2rem',
+        width: '100%',
+        maxWidth: '3rem',
+        svg: {
+            verticalAlign: 'text-top'
+        }
+    },
+    splitButtonMenuButton: {
+        border: 'none'
+    },
+    flexContainer: {
+        flexFlow: 'column',
+        display: 'contents'
+    },
+    label: {
+        fontSize: '0.625rem',
+        fontWeight: '400',
+        lineHeight: '1rem',
+        cursor: 'pointer',
+        display: 'block',
+        margin: '0rem 0.25rem',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
+    }
+};
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -7976,7 +8027,17 @@ 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 VideoTileMoreOptionsButton = (props) => {
+    const { menuItems, menuStyles } = props;
+    if (!menuItems || menuItems.length === 0) {
+        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 } }));
+};
 /**
  * A component to render the video stream for a single call participant.
  *
@@ -7987,7 +8048,9 @@ const defaultPersonaStyles = { root: { margin: 'auto', maxHeight: '100%' } };
 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, personaMinSize = DEFAULT_PERSONA_MIN_SIZE_PX, personaMaxSize = DEFAULT_PERSONA_MAX_SIZE_PX } = props;
+    isPinned, onRenderPlaceholder, renderElement, showLabel = true, showMuteIndicator = true, styles, userId, noVideoAvailableAriaLabel, isSpeaking, 
+    /* @conditional-compile-remove(pinned-participants) */
+    menuItems, personaMinSize = DEFAULT_PERSONA_MIN_SIZE_PX, personaMaxSize = DEFAULT_PERSONA_MAX_SIZE_PX } = props;
     const [personaSize, setPersonaSize] = React.useState(100);
     const videoTileRef = React.useRef(null);
     const locale = useLocale$1();
@@ -8041,6 +8104,8 @@ 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 }),
+                    /* @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) })))))),
             children && (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(overlayContainerStyles, styles === null || styles === void 0 ? void 0 : styles.overlayContainer) }, children)))));
@@ -10078,10 +10143,19 @@ const MicrophoneButton = (props) => {
  */
 const iconContainerStyles = {
     root: {
-        margin: 'auto',
+        marginTop: 'auto',
+        marginBottom: 'auto',
         position: 'relative'
     }
 };
+/**
+ * @internal
+ */
+const iconBannerContainerStyles = {
+    root: {
+        paddingBottom: '1rem'
+    }
+};
 /**
  * @internal
  */
@@ -10154,18 +10228,22 @@ const primaryButtonStyles = {
 };
 
 // Copyright (c) Microsoft Corporation.
+/**
+ * spacing for the icons in the banner.
+ */
+const tokens = { childrenGap: '2rem' };
 /** @private */
 const DomainPermissionsContainer = (props) => {
     var _a, _b;
     const { appName, onTroubleshootingClick, onPrimaryButtonClick, strings } = props;
     const theme = react.useTheme();
     return (React__default['default'].createElement(react.Stack, { style: { padding: '2rem', maxWidth: '25.375rem' }, "aria-label": strings === null || strings === void 0 ? void 0 : strings.ariaLabel },
-        React__default['default'].createElement(react.Stack, { horizontal: true, style: { paddingBottom: '1rem' }, horizontalAlign: 'space-between' },
-            props.cameraIconName && (React__default['default'].createElement(react.Stack, { styles: iconContainerStyles, horizontalAlign: 'center' },
+        React__default['default'].createElement(react.Stack, { styles: iconBannerContainerStyles, horizontal: true, horizontalAlign: 'center', verticalFill: true, tokens: tokens },
+            props.cameraIconName && (React__default['default'].createElement(react.Stack, null,
                 React__default['default'].createElement(react.Icon, { styles: iconPrimaryStyles, iconName: props.cameraIconName }))),
-            props.connectorIconName && (React__default['default'].createElement(react.Stack, { styles: iconContainerStyles, horizontalAlign: 'center' },
+            props.connectorIconName && (React__default['default'].createElement(react.Stack, { styles: iconContainerStyles, horizontal: true },
                 React__default['default'].createElement(react.Icon, { styles: sparkleIconBackdropStyles(theme), iconName: props.connectorIconName }))),
-            props.microphoneIconName && (React__default['default'].createElement(react.Stack, { styles: iconContainerStyles, horizontalAlign: 'center' },
+            props.microphoneIconName && (React__default['default'].createElement(react.Stack, null,
                 React__default['default'].createElement(react.Icon, { styles: iconPrimaryStyles, iconName: props.microphoneIconName })))),
         React__default['default'].createElement(react.Stack, { styles: textContainerStyles },
             strings && isValidString(strings === null || strings === void 0 ? void 0 : strings.primaryText) && (React__default['default'].createElement(react.Text, { styles: primaryTextStyles }, appName ? _formatString(strings.primaryText, { appName: appName }) : strings.primaryText)),