@azure/communication-react 1.0.0-beta.1 → 1.0.0-beta.5

package/dist/dist-esm/react-components/src/components/ParticipantItem.d.ts

@@ -1,44 +1,59 @@
-/// <reference types="react" />
-import { IContextualMenuItem, PersonaPresence, IStyle } from '@fluentui/react';
-import { BaseCustomStylesProps } from '../types';
-export interface ParticipantItemStylesProps extends BaseCustomStylesProps {
-    /** Styles for the avatar. */
-    avatar?: IStyle;
-    /** Styles for the (You) string. */
-    me?: IStyle;
-    /** Styles for the container of the icon. */
-    iconContainer?: IStyle;
-    /** Styles for the menu. */
-    menu?: IStyle;
-}
-/**
- * Props for ParticipantItem component
- */
-export interface ParticipantItemProps {
-    /** Name of participant. */
-    displayName: string;
-    /** Optional indicator to show participant is the user. */
-    me?: boolean;
-    /** Optional callback returning a JSX element to override avatar. */
-    onRenderAvatar?: (props?: ParticipantItemProps) => JSX.Element | null;
-    /** Optional array of IContextualMenuItem for contextual menu. */
-    menuItems?: IContextualMenuItem[];
-    /** Optional callback returning a JSX element rendered on the right portion of the ParticipantItem. Intended for adding icons. */
-    onRenderIcon?: (props?: ParticipantItemProps) => JSX.Element | null;
-    /** Optional PersonaPresence to show participant presence. This will not have an effect if property avatar is assigned. */
-    presence?: PersonaPresence;
-    /**
-     * Allows users to pass in an object contains custom CSS styles.
-     * @Example
-     * ```
-     * <ParticipantItem styles={{ root: { background: 'blue' } }} />
-     * ```
-     */
-    styles?: ParticipantItemStylesProps;
-}
-/**
- * `ParticipantItem` represents a participant in Calling or Chat. `ParticipantItem` displays a participant's avatar,
- * displayName and status as well as optional icons and context menu.
- */
-export declare const ParticipantItem: (props: ParticipantItemProps) => JSX.Element;
+/// <reference types="react" />
+import { IContextualMenuItem, IStyle, PersonaPresence } from '@fluentui/react';
+import { BaseCustomStylesProps, OnRenderAvatarCallback } from '../types';
+export interface ParticipantItemStylesProps extends BaseCustomStylesProps {
+    /** Styles for the avatar. */
+    avatar?: IStyle;
+    /** Styles for the (You) string. */
+    me?: IStyle;
+    /** Styles for the container of the icon. */
+    iconContainer?: IStyle;
+    /** Styles for the menu. */
+    menu?: IStyle;
+}
+/**
+ * Strings of ParticipantItem that can be overridden
+ */
+export interface ParticipantItemStrings {
+    /** String shown when participant is me */
+    isMeText: string;
+    /** String shown when hovering over menu button */
+    menuTitle: string;
+}
+/**
+ * Props for ParticipantItem component
+ */
+export interface ParticipantItemProps {
+    /** Unique User ID of the participant. This `userId` is available in the `onRenderAvatar` callback function */
+    userId?: string;
+    /** Name of participant. */
+    displayName: string;
+    /** Optional indicator to show participant is the user. */
+    me?: boolean;
+    /** Optional callback returning a JSX element to override avatar. */
+    onRenderAvatar?: OnRenderAvatarCallback;
+    /** Optional array of IContextualMenuItem for contextual menu. */
+    menuItems?: IContextualMenuItem[];
+    /** Optional callback returning a JSX element rendered on the right portion of the ParticipantItem. Intended for adding icons. */
+    onRenderIcon?: (props?: ParticipantItemProps) => JSX.Element | null;
+    /** Optional PersonaPresence to show participant presence. This will not have an effect if property avatar is assigned. */
+    presence?: PersonaPresence;
+    /**
+     * Allows users to pass in an object contains custom CSS styles.
+     * @Example
+     * ```
+     * <ParticipantItem styles={{ root: { background: 'blue' } }} />
+     * ```
+     */
+    styles?: ParticipantItemStylesProps;
+    /**
+     * Optional strings to override in component
+     */
+    strings?: Partial<ParticipantItemStrings>;
+}
+/**
+ * `ParticipantItem` represents a participant in Calling or Chat. `ParticipantItem` displays a participant's avatar,
+ * displayName and status as well as optional icons and context menu.
+ */
+export declare const ParticipantItem: (props: ParticipantItemProps) => JSX.Element;
 //# sourceMappingURL=ParticipantItem.d.ts.map

package/dist/dist-esm/react-components/src/components/ParticipantItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ParticipantItem.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantItem.tsx"],"names":[],"mappings":";AAIA,OAAO,EAGL,mBAAmB,EAGnB,eAAe,EAGf,MAAM,EACP,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAEjD,MAAM,WAAW,0BAA2B,SAAQ,qBAAqB;IACvE,6BAA6B;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mCAAmC;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,4CAA4C;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,2BAA2B;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,0DAA0D;IAC1D,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,oEAAoE;IACpE,cAAc,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;IACtE,iEAAiE;IACjE,SAAS,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAClC,iIAAiI;IACjI,YAAY,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;IACpE,0HAA0H;IAC1H,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,0BAA0B,CAAC;CACrC;AAED;;;GAGG;AACH,eAAO,MAAM,eAAe,UAAW,oBAAoB,KAAG,WAkD7D,CAAC"}
+{"version":3,"file":"ParticipantItem.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantItem.tsx"],"names":[],"mappings":";AAGA,OAAO,EAIL,mBAAmB,EAEnB,MAAM,EAGN,eAAe,EAGhB,MAAM,iBAAiB,CAAC;AAIzB,OAAO,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAOzE,MAAM,WAAW,0BAA2B,SAAQ,qBAAqB;IACvE,6BAA6B;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mCAAmC;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,4CAA4C;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,0CAA0C;IAC1C,QAAQ,EAAE,MAAM,CAAC;IACjB,kDAAkD;IAClD,SAAS,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,8GAA8G;IAC9G,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,0DAA0D;IAC1D,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,oEAAoE;IACpE,cAAc,CAAC,EAAE,sBAAsB,CAAC;IACxC,iEAAiE;IACjE,SAAS,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAClC,iIAAiI;IACjI,YAAY,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;IACpE,0HAA0H;IAC1H,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,0BAA0B,CAAC;IACpC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,sBAAsB,CAAC,CAAC;CAC3C;AAED;;;GAGG;AACH,eAAO,MAAM,eAAe,UAAW,oBAAoB,KAAG,WAoF7D,CAAC"}

package/dist/dist-esm/react-components/src/components/ParticipantItem.js

@@ -1,31 +1,45 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-import { participantItemContainerStyle, iconContainerStyle } from './styles/ParticipantItem.styles';
-import { ContextualMenu, DirectionalHint, Persona, PersonaSize, Stack, mergeStyles } from '@fluentui/react';
-import React, { useRef, useState } from 'react';
-import { useTheme } from '@fluentui/react-theme-provider';
-/**
- * `ParticipantItem` represents a participant in Calling or Chat. `ParticipantItem` displays a participant's avatar,
- * displayName and status as well as optional icons and context menu.
- */
-export const ParticipantItem = (props) => {
-    const { displayName, onRenderAvatar, menuItems, onRenderIcon, presence, styles } = props;
-    const [clickEvent, setClickEvent] = useState();
-    const [menuHidden, setMenuHidden] = useState(true);
-    const containerRef = useRef(null);
-    const theme = useTheme();
-    const showMenu = (clickEvent) => {
-        setClickEvent(clickEvent.nativeEvent);
-        setMenuHidden(false);
-    };
-    const hideMenu = () => {
-        setClickEvent(undefined);
-        setMenuHidden(true);
-    };
-    const avatarToUse = (React.createElement(Persona, { text: displayName, size: PersonaSize.size32, presence: presence, onRenderPersonaCoin: onRenderAvatar ? () => onRenderAvatar(props) : undefined, className: mergeStyles(styles === null || styles === void 0 ? void 0 : styles.avatar), initialsTextColor: "white" }));
-    return (React.createElement("div", { ref: containerRef, className: mergeStyles(participantItemContainerStyle(theme), styles === null || styles === void 0 ? void 0 : styles.root), onClick: showMenu },
-        avatarToUse,
-        onRenderIcon && (React.createElement(Stack, { className: mergeStyles(iconContainerStyle, styles === null || styles === void 0 ? void 0 : styles.iconContainer) }, onRenderIcon(props))),
-        menuItems && (React.createElement(ContextualMenu, { items: menuItems, hidden: menuHidden, target: clickEvent !== null && clickEvent !== void 0 ? clickEvent : containerRef, onItemClick: hideMenu, onDismiss: hideMenu, directionalHint: DirectionalHint.bottomLeftEdge, className: mergeStyles(styles === null || styles === void 0 ? void 0 : styles.menu) }))));
-};
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { ContextualMenu, DirectionalHint, Icon, mergeStyles, Persona, PersonaSize, Stack } from '@fluentui/react';
+import React, { useMemo, useRef, useState } from 'react';
+import { useLocale } from '../localization';
+import { useTheme } from '../theming';
+import { iconContainerStyle, menuButtonContainerStyle, participantItemContainerStyle } from './styles/ParticipantItem.styles';
+/**
+ * `ParticipantItem` represents a participant in Calling or Chat. `ParticipantItem` displays a participant's avatar,
+ * displayName and status as well as optional icons and context menu.
+ */
+export const ParticipantItem = (props) => {
+    var _a, _b, _c, _d, _e, _f;
+    const { userId, displayName, onRenderAvatar, menuItems, onRenderIcon, presence, styles, me } = props;
+    const [itemHovered, setItemHovered] = useState(false);
+    const [menuButtonHovered, setMenuButtonHovered] = useState(false);
+    const [menuHidden, setMenuHidden] = useState(true);
+    const containerRef = useRef(null);
+    const theme = useTheme();
+    const localeStrings = useLocale().strings.participantItem;
+    const isMeText = (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.isMeText) !== null && _b !== void 0 ? _b : localeStrings.isMeText;
+    const menuTitle = (_d = (_c = props.strings) === null || _c === void 0 ? void 0 : _c.menuTitle) !== null && _d !== void 0 ? _d : localeStrings.menuTitle;
+    const avatarOptions = {
+        text: displayName,
+        size: PersonaSize.size32,
+        presence: presence,
+        initialsTextColor: 'white'
+    };
+    const avatar = onRenderAvatar ? (onRenderAvatar(userId !== null && userId !== void 0 ? userId : '', avatarOptions)) : (React.createElement(Persona, Object.assign({ className: mergeStyles(styles === null || styles === void 0 ? void 0 : styles.avatar) }, avatarOptions)));
+    const meTextStyle = useMemo(() => mergeStyles({ color: theme.palette.neutralTertiary }, styles === null || styles === void 0 ? void 0 : styles.me), [theme.palette.neutralTertiary, styles === null || styles === void 0 ? void 0 : styles.me]);
+    const contextualMenuStyle = useMemo(() => mergeStyles({ background: theme.palette.neutralLighterAlt }, styles === null || styles === void 0 ? void 0 : styles.menu), [theme.palette.neutralLighterAlt, styles === null || styles === void 0 ? void 0 : styles.menu]);
+    const iconsContainerWidth = (_f = (_e = styles === null || styles === void 0 ? void 0 : styles.iconContainer) === null || _e === void 0 ? void 0 : _e.width) !== null && _f !== void 0 ? _f : '3.5rem';
+    const menuButton = useMemo(() => (React.createElement(Stack, { horizontalAlign: "end", onMouseEnter: () => setMenuButtonHovered(true), onMouseLeave: () => setMenuButtonHovered(false), title: menuTitle, className: menuButtonContainerStyle, onClick: () => setMenuHidden(false) },
+        React.createElement(Icon, { iconName: menuButtonHovered ? 'ParticipantItemOptionsHovered' : 'ParticipantItemOptions' }))), [menuButtonHovered, menuTitle]);
+    return (React.createElement("div", { ref: containerRef, className: mergeStyles(participantItemContainerStyle, styles === null || styles === void 0 ? void 0 : styles.root), onMouseEnter: () => setItemHovered(true), onMouseLeave: () => setItemHovered(false) },
+        React.createElement(Stack, { horizontal: true, className: mergeStyles({ width: `calc(100% - ${iconsContainerWidth})`, alignItems: 'center' }) },
+            avatar,
+            me && React.createElement(Stack, { className: meTextStyle }, isMeText)),
+        React.createElement(Stack, { horizontal: true, horizontalAlign: "end", className: mergeStyles(iconContainerStyle, { width: iconsContainerWidth }, styles === null || styles === void 0 ? void 0 : styles.iconContainer) },
+            menuItems && menuItems.length > 0 && (itemHovered || !menuHidden)
+                ? menuButton
+                : onRenderIcon && onRenderIcon(props),
+            menuItems && menuItems.length > 0 && (React.createElement(ContextualMenu, { items: menuItems, hidden: menuHidden, target: containerRef, onItemClick: () => setMenuHidden(true), onDismiss: () => setMenuHidden(true), directionalHint: DirectionalHint.bottomRightEdge, className: contextualMenuStyle })))));
+};
 //# sourceMappingURL=ParticipantItem.js.map

package/dist/dist-esm/react-components/src/components/ParticipantItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ParticipantItem.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantItem.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,6BAA6B,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACpG,OAAO,EACL,cAAc,EACd,eAAe,EAEf,OAAO,EACP,WAAW,EAEX,KAAK,EACL,WAAW,EAEZ,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAwC1D;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;IAC1E,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACzF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,EAA0B,CAAC;IACvE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAU,IAAI,CAAC,CAAC;IAC5D,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,QAAQ,GAAG,CAAC,UAAwD,EAAQ,EAAE;QAClF,aAAa,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;QACtC,aAAa,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,GAAS,EAAE;QAC1B,aAAa,CAAC,SAAS,CAAC,CAAC;QACzB,aAAa,CAAC,IAAI,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAClB,oBAAC,OAAO,IACN,IAAI,EAAE,WAAW,EACjB,IAAI,EAAE,WAAW,CAAC,MAAM,EACxB,QAAQ,EAAE,QAAQ,EAClB,mBAAmB,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,EAC7E,SAAS,EAAE,WAAW,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,CAAC,EACtC,iBAAiB,EAAC,OAAO,GACzB,CACH,CAAC;IACF,OAAO,CACL,6BACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,WAAW,CAAC,6BAA6B,CAAC,KAAK,CAAC,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,EAC1E,OAAO,EAAE,QAAQ;QAEhB,WAAW;QACX,YAAY,IAAI,CACf,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,kBAAkB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,aAAa,CAAC,IAAG,YAAY,CAAC,KAAK,CAAC,CAAS,CACxG;QACA,SAAS,IAAI,CACZ,oBAAC,cAAc,IACb,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE,UAAU,EAClB,MAAM,EAAE,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,YAAY,EAClC,WAAW,EAAE,QAAQ,EACrB,SAAS,EAAE,QAAQ,EACnB,eAAe,EAAE,eAAe,CAAC,cAAc,EAC/C,SAAS,EAAE,WAAW,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,GACpC,CACH,CACG,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"ParticipantItem.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantItem.tsx"],"names":[],"mappings":"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"}

package/dist/dist-esm/react-components/src/components/ParticipantList.d.ts

@@ -1,23 +1,29 @@
-/// <reference types="react" />
-import { CommunicationParticipant } from '../types';
-/**
- * Props for component `ParticipantList`
- */
-export declare type ParticipantListProps = {
-    /** Participants in user call or chat */
-    participants: CommunicationParticipant[];
-    /** User ID of user */
-    myUserId?: string;
-    /** Optional callback to render each participant. If no callback is provided, each participant will be rendered with `ParticipantItem`  */
-    onRenderParticipant?: (participant: CommunicationParticipant) => JSX.Element | null;
-    /** Optional callback to render the avatar for each participant. This property will have no effect if `onRenderParticipant` is assigned.  */
-    onRenderAvatar?: (participant: CommunicationParticipant) => JSX.Element | null;
-    /** Optional callback to render the context menu for each participant  */
-    onParticipantRemove?: (userId: string) => void;
-};
-/**
- * `ParticipantList` renders a list of participants in Calling or Chat. If property `onRenderParticipant` is not
- * assigned then each participant is rendered with `ParticipantItem`.
- */
-export declare const ParticipantList: (props: ParticipantListProps) => JSX.Element;
+/// <reference types="react" />
+import { CommunicationParticipant, OnRenderAvatarCallback } from '../types';
+/**
+ * Props for component `ParticipantList`
+ */
+export declare type ParticipantListProps = {
+    /** Participants in user call or chat */
+    participants: CommunicationParticipant[];
+    /** User ID of user */
+    myUserId?: string;
+    /**
+     * If set to `true`, excludes the local participant from the participant list with use of `myUserId` props (required in this case).
+     *
+     * @defaultValue `false`
+     */
+    excludeMe?: boolean;
+    /** Optional callback to render each participant. If no callback is provided, each participant will be rendered with `ParticipantItem`  */
+    onRenderParticipant?: (participant: CommunicationParticipant) => JSX.Element | null;
+    /** Optional callback to render the avatar for each participant. This property will have no effect if `onRenderParticipant` is assigned.  */
+    onRenderAvatar?: OnRenderAvatarCallback;
+    /** Optional callback to render the context menu for each participant  */
+    onParticipantRemove?: (userId: string) => void;
+};
+/**
+ * `ParticipantList` renders a list of participants in Calling or Chat. If property `onRenderParticipant` is not
+ * assigned then each participant is rendered with `ParticipantItem`.
+ */
+export declare const ParticipantList: (props: ParticipantListProps) => JSX.Element;
 //# sourceMappingURL=ParticipantList.d.ts.map

package/dist/dist-esm/react-components/src/components/ParticipantList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ParticipantList.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantList.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,wBAAwB,EAAmB,MAAM,UAAU,CAAC;AAErE;;GAEG;AACH,oBAAY,oBAAoB,GAAG;IACjC,wCAAwC;IACxC,YAAY,EAAE,wBAAwB,EAAE,CAAC;IACzC,sBAAsB;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0IAA0I;IAC1I,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,wBAAwB,KAAK,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;IACpF,4IAA4I;IAC5I,cAAc,CAAC,EAAE,CAAC,WAAW,EAAE,wBAAwB,KAAK,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;IAC/E,yEAAyE;IACzE,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAChD,CAAC;AAyGF;;;GAGG;AACH,eAAO,MAAM,eAAe,UAAW,oBAAoB,KAAG,WAgB7D,CAAC"}
+{"version":3,"file":"ParticipantList.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantList.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAmB,wBAAwB,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAI7F;;GAEG;AACH,oBAAY,oBAAoB,GAAG;IACjC,wCAAwC;IACxC,YAAY,EAAE,wBAAwB,EAAE,CAAC;IACzC,sBAAsB;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0IAA0I;IAC1I,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,wBAAwB,KAAK,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;IACpF,4IAA4I;IAC5I,cAAc,CAAC,EAAE,sBAAsB,CAAC;IACxC,yEAAyE;IACzE,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAChD,CAAC;AA6DF;;;GAGG;AACH,eAAO,MAAM,eAAe,UAAW,oBAAoB,KAAG,WAgC7D,CAAC"}

package/dist/dist-esm/react-components/src/components/ParticipantList.js

@@ -1,74 +1,67 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-import React from 'react';
-import { IconButton, OverflowSet, Stack, PersonaPresence } from '@fluentui/react';
-import { ParticipantItem } from './ParticipantItem';
-import { MicOffIcon, CallControlPresentNewIcon } from '@fluentui/react-northstar';
-import { participantListStyle, overFlowButtonStyles, overflowSetStyle } from './styles/ParticipantList.styles';
-const getDefaultRenderer = (myUserId, onParticipantRemove, onRenderAvatar) => {
-    return (participant) => {
-        // Try to consider CommunicationParticipant as CallParticipant
-        const callingParticipant = participant;
-        let presence = undefined;
-        if (callingParticipant) {
-            if (callingParticipant.state === 'Connected') {
-                presence = PersonaPresence.online;
-            }
-            else if (callingParticipant.state === 'Idle') {
-                presence = PersonaPresence.away;
-            }
-        }
-        const menuItems = [];
-        if (participant.userId !== myUserId && onParticipantRemove) {
-            menuItems.push({
-                key: 'Remove',
-                text: 'Remove',
-                onClick: () => onParticipantRemove(participant.userId)
-            });
-        }
-        const onRenderIcon = (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.isScreenSharing) || (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.isMuted)
-            ? () => (React.createElement(Stack, { horizontal: true, tokens: { childrenGap: '0.5rem' } },
-                callingParticipant.isScreenSharing && React.createElement(CallControlPresentNewIcon, { size: "small" }),
-                callingParticipant.isMuted && React.createElement(MicOffIcon, { size: "small" })))
-            : () => React.createElement(React.Fragment, null);
-        const renderAvatar = onRenderAvatar
-            ? () => {
-                return onRenderAvatar(participant);
-            }
-            : undefined;
-        if (participant.displayName) {
-            return (React.createElement(ParticipantItem, { displayName: participant.displayName, me: myUserId ? participant.userId === myUserId : false, menuItems: menuItems, presence: presence, onRenderIcon: onRenderIcon, onRenderAvatar: renderAvatar }));
-        }
-        return null;
-    };
-};
-const onRenderOverflowButton = (overflowItems) => (React.createElement(IconButton, { role: "menuitem", title: "More options", styles: overFlowButtonStyles, menuIconProps: { iconName: 'More' }, menuProps: { items: overflowItems } }));
-const renderParticipants = (participants, myUserId, onRenderParticipant, onRenderAvatar, onParticipantRemove) => {
-    const renderParticipant = onRenderParticipant !== null && onRenderParticipant !== void 0 ? onRenderParticipant : getDefaultRenderer(myUserId, onParticipantRemove, onRenderAvatar);
-    const onRenderItem = (item) => {
-        const participant = {
-            userId: item.userId,
-            displayName: item.displayName,
-            state: item.state,
-            isScreenSharing: item.isScreenSharing,
-            isMuted: item.isMuted,
-            isSpeaking: item.isSpeaking
-        };
-        return renderParticipant(participant);
-    };
-    return participants.map((item, i) => {
-        return (React.createElement(OverflowSet, { key: i, items: [Object.assign({ key: `${i}`, displayName: item.displayName, me: item.userId === myUserId }, item)], role: "menubar", vertical: false, onRenderOverflowButton: onRenderOverflowButton, onRenderItem: onRenderItem, styles: overflowSetStyle }));
-    });
-};
-/**
- * `ParticipantList` renders a list of participants in Calling or Chat. If property `onRenderParticipant` is not
- * assigned then each participant is rendered with `ParticipantItem`.
- */
-export const ParticipantList = (props) => {
-    const allParticipants = [];
-    if (props.participants !== undefined) {
-        props.participants.forEach((participant) => allParticipants.push(participant));
-    }
-    return (React.createElement(Stack, { className: participantListStyle }, renderParticipants(allParticipants, props.myUserId, props.onRenderParticipant, props.onRenderAvatar, props.onParticipantRemove)));
-};
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { Icon, mergeStyles, PersonaPresence, Stack } from '@fluentui/react';
+import React, { useMemo } from 'react';
+import { useIdentifiers } from '../identifiers';
+import { ParticipantItem } from './ParticipantItem';
+import { participantListStyle } from './styles/ParticipantList.styles';
+const onRenderParticipantsDefault = (participants, myUserId, onParticipantRemove, onRenderAvatar) => {
+    return participants.map((participant) => {
+        // Try to consider CommunicationParticipant as CallParticipant
+        const callingParticipant = participant;
+        let presence = undefined;
+        if (callingParticipant) {
+            if (callingParticipant.state === 'Connected') {
+                presence = PersonaPresence.online;
+            }
+            else if (callingParticipant.state === 'Idle') {
+                presence = PersonaPresence.away;
+            }
+        }
+        const menuItems = [];
+        if (participant.userId !== myUserId && onParticipantRemove) {
+            menuItems.push({
+                key: 'Remove',
+                text: 'Remove',
+                onClick: () => onParticipantRemove(participant.userId)
+            });
+        }
+        const iconStyles = mergeStyles({ lineHeight: 0 });
+        const onRenderIcon = (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.isScreenSharing) || (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.isMuted)
+            ? () => (React.createElement(Stack, { horizontal: true, tokens: { childrenGap: '0.5rem' } },
+                callingParticipant.isScreenSharing && (React.createElement(Icon, { iconName: "ParticipantItemScreenShareStart", className: iconStyles })),
+                callingParticipant.isMuted && React.createElement(Icon, { iconName: "ParticipantItemMicOff", className: iconStyles })))
+            : () => React.createElement(React.Fragment, null);
+        if (participant.displayName) {
+            return (React.createElement(ParticipantItem, { key: participant.userId, userId: participant.userId, displayName: participant.displayName, me: myUserId ? participant.userId === myUserId : false, menuItems: menuItems, presence: presence, onRenderIcon: onRenderIcon, onRenderAvatar: onRenderAvatar }));
+        }
+        return null;
+    });
+};
+/**
+ * `ParticipantList` renders a list of participants in Calling or Chat. If property `onRenderParticipant` is not
+ * assigned then each participant is rendered with `ParticipantItem`.
+ */
+export const ParticipantList = (props) => {
+    const { excludeMe = false, myUserId, participants, onParticipantRemove, onRenderAvatar, onRenderParticipant } = props;
+    const ids = useIdentifiers();
+    const allParticipants = useMemo(() => {
+        if (participants === undefined) {
+            return [];
+        }
+        if (!excludeMe || !myUserId) {
+            return [...participants];
+        }
+        const userIndex = participants.map((p) => p.userId).indexOf(myUserId);
+        if (userIndex === -1) {
+            return [...participants];
+        }
+        const remoteParticipants = [...participants];
+        remoteParticipants.splice(userIndex, 1);
+        return remoteParticipants;
+    }, [participants, excludeMe, myUserId]);
+    return (React.createElement(Stack, { "data-ui-id": ids.participantList, className: participantListStyle }, onRenderParticipant
+        ? participants.map((participant) => onRenderParticipant(participant))
+        : onRenderParticipantsDefault(allParticipants, myUserId, onParticipantRemove, onRenderAvatar)));
+};
 //# sourceMappingURL=ParticipantList.js.map

package/dist/dist-esm/react-components/src/components/ParticipantList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ParticipantList.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantList.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ParticipantList.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantList.tsx"],"names":[],"mappings":"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"}

package/dist/dist-esm/react-components/src/components/ParticipantsButton.d.ts

@@ -0,0 +1,76 @@
+/// <reference types="react" />
+import { IStyle } from '@fluentui/react';
+import { ParticipantListProps } from './ParticipantList';
+import { ButtonCustomStylesProps } from '../types';
+import { ControlBarButtonProps } from './ControlBarButton';
+/**
+ * Styles Props for ParticipantsButton component
+ */
+export interface ParticipantsButtonStylesProps extends ButtonCustomStylesProps {
+    /** Styles of ParticipantList container */
+    participantListContainerStyle?: IStyle;
+}
+/**
+ * Strings of ParticipantsButtonStrings that can be overridden
+ */
+export interface ParticipantsButtonStrings {
+    /**
+     * Label of button
+     */
+    label: string;
+    /**
+     * Header of menu pop up
+     */
+    menuHeader: string;
+    /**
+     * Label of menu button to show list of participants. Placeholders: [numParticipants]
+     */
+    participantsListButtonLabel: string;
+    /**
+     * Label of menu button to copy invite link
+     */
+    copyInviteLinkButtonLabel: string;
+    /**
+     * Label of menu button to mute all participants
+     */
+    muteAllButtonLabel: string;
+}
+/**
+ * Props for ParticipantsButton component
+ */
+export interface ParticipantsButtonProps extends ControlBarButtonProps, ParticipantListProps {
+    /**
+     * Optional callback to render the participant list.
+     */
+    onRenderParticipantList?: (props: ParticipantListProps) => JSX.Element | null;
+    /**
+     * Allows users to pass an object containing custom CSS styles.
+     * @Example
+     * ```
+     * <ParticipantsButton styles={{ root: { background: 'blue' } }} />
+     * ```
+     */
+    styles?: ParticipantsButtonStylesProps;
+    /**
+     * URL to invite new participants to the current call
+     */
+    callInvitationURL?: string;
+    /**
+     * CallBack to mute all remote participants
+     */
+    onMuteAll?: () => void;
+    /**
+     * Optional strings to override in component
+     */
+    strings?: Partial<ParticipantsButtonStrings>;
+}
+/**
+ * `ParticipantsButton` allows you to easily create a component rendering a participants button. It can be used in your ControlBar component for example.
+ * This button contains dropdown menu items defined through its property `menuProps`. By default, it can display the number of remote participants with the full list
+ * as sub-menu and an option to mute all participants, as well as a copy-to-clipboard button to copy the call invitation URL.
+ * This `menuProps` can be fully redefined and its property is of type [IContextualMenuProps](https://developer.microsoft.com/en-us/fluentui#/controls/web/contextualmenu#IContextualMenuProps).
+ *
+ * @param props - of type ParticipantsButtonProps
+ */
+export declare const ParticipantsButton: (props: ParticipantsButtonProps) => JSX.Element;
+//# sourceMappingURL=ParticipantsButton.d.ts.map

package/dist/dist-esm/react-components/src/components/ParticipantsButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParticipantsButton.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantsButton.tsx"],"names":[],"mappings":";AAGA,OAAO,EAIL,MAAM,EAIP,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EAAmB,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAI1E,OAAO,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AACnD,OAAO,EAAoB,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAE7E;;GAEG;AACH,MAAM,WAAW,6BAA8B,SAAQ,uBAAuB;IAC5E,0CAA0C;IAC1C,6BAA6B,CAAC,EAAE,MAAM,CAAC;CACxC;AAED;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,2BAA2B,EAAE,MAAM,CAAC;IACpC;;OAEG;IACH,yBAAyB,EAAE,MAAM,CAAC;IAClC;;OAEG;IACH,kBAAkB,EAAE,MAAM,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,uBAAwB,SAAQ,qBAAqB,EAAE,oBAAoB;IAC1F;;OAEG;IACH,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;IAC9E;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,6BAA6B,CAAC;IACvC;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAC;CAC9C;AAMD;;;;;;;GAOG;AACH,eAAO,MAAM,kBAAkB,UAAW,uBAAuB,KAAG,WA0InE,CAAC"}