npm - @azure/communication-react - Versions diffs - 1.22.0-alpha-202411210017 → 1.22.0-alpha-202411260017 - Mend

@azure/communication-react 1.22.0-alpha-202411210017 → 1.22.0-alpha-202411260017

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (65) hide show

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

@@ -16,6 +16,7 @@ import { useId } from '@fluentui/react-hooks';
  * @public
  */
 export const ParticipantItem = (props) => {
+    var _a, _b, _c;
     const { userId, displayName, onRenderAvatar, menuItems, onRenderIcon, presence, styles, me, onClick, showParticipantOverflowTooltip } = props;
     const [itemHovered, setItemHovered] = useState(false);
     const [menuHidden, setMenuHidden] = useState(true);
@@ -23,10 +24,13 @@ export const ParticipantItem = (props) => {
     const theme = useTheme();
     const localeStrings = useLocale().strings.participantItem;
     const ids = useIdentifiers();
-    const uniqueId = useId();
+    const participantItemId = useId();
+    const participantItemFlyoutId = useId();
+    const hasFlyout = !!(menuItems && (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) > 0);
+    const flyoutShowing = hasFlyout && menuHidden;
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
-    const participantStateString = participantStateStringTrampoline(props, strings);
-    const showMenuIcon = !participantStateString && (itemHovered || !menuHidden) && menuItems && (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) > 0;
+    const participantStateString = formatParticipantStateString(props, strings);
+    const showMenuIcon = !participantStateString && (itemHovered || !menuHidden) && hasFlyout;
     // For 'me' show empty name so avatar will get 'Person' icon, when there is no name
     const meAvatarText = (displayName === null || displayName === void 0 ? void 0 : displayName.trim()) || '';
     const avatarOptions = {
@@ -50,7 +54,7 @@ export const ParticipantItem = (props) => {
     };
     const menuButton = useMemo(() => (React.createElement(Stack, { horizontal: true, horizontalAlign: "end", className: mergeStyles(menuButtonContainerStyle, { color: theme.palette.neutralPrimary }), title: strings.menuTitle, "data-ui-id": ids.participantItemMenuButton },
         React.createElement(Icon, { iconName: "ParticipantItemOptionsHovered", className: mergeStyles(iconStyles, !showMenuIcon ? displayNoneStyle : {}) }))), [theme.palette.neutralPrimary, strings.menuTitle, ids.participantItemMenuButton, showMenuIcon]);
-    return (React.createElement("div", { ref: containerRef, role: 'menuitem', "aria-expanded": !me ? !menuHidden : undefined, "aria-disabled": (menuItems && menuItems.length > 0) || props.onClick ? false : true, "data-is-focusable": true, "data-ui-id": "participant-item", className: mergeStyles(participantItemContainerStyle({ clickable: !!menuItems && menuItems.length > 0 }, theme), styles === null || styles === void 0 ? void 0 : styles.root), onMouseEnter: () => setItemHovered(true), onMouseLeave: () => setItemHovered(false), onClick: () => {
+    return (React.createElement("div", { ref: containerRef, role: 'menuitem', id: participantItemId, "aria-label": (_b = (hasFlyout ? (_a = props.strings) === null || _a === void 0 ? void 0 : _a.participantItemWithMoreOptionsAriaLabel : undefined)) !== null && _b !== void 0 ? _b : (_c = props.strings) === null || _c === void 0 ? void 0 : _c.participantItemAriaLabel, "aria-labelledby": `${props.ariaLabelledBy} ${participantItemId}`, "aria-expanded": flyoutShowing, "aria-disabled": hasFlyout || props.onClick ? false : true, "aria-haspopup": hasFlyout ? true : undefined, "aria-controls": participantItemFlyoutId, "data-is-focusable": hasFlyout, "data-ui-id": "participant-item", className: mergeStyles(participantItemContainerStyle({ clickable: hasFlyout }, theme), styles === null || styles === void 0 ? void 0 : styles.root), onMouseEnter: () => setItemHovered(true), onMouseLeave: () => setItemHovered(false), onClick: () => {
             if (!participantStateString) {
                 setItemHovered(true);
                 setMenuHidden(false);
@@ -59,28 +63,28 @@ export const ParticipantItem = (props) => {
             if (!menuHidden) {
                 onDismissMenu();
             }
-        }, tabIndex: 0 },
+        }, tabIndex: hasFlyout ? 0 : undefined },
         React.createElement(Stack, { horizontal: true, className: mergeStyles({
                 flexGrow: 1,
                 maxWidth: '100%',
                 alignItems: 'center'
-            }), id: uniqueId, "aria-labelledby": `${props.ariaLabelledBy} ${uniqueId}` },
+            }) },
             avatar,
             me && React.createElement(Text, { className: meTextStyle }, strings.isMeText),
             React.createElement(Stack, { horizontal: true, className: mergeStyles(infoContainerStyle) },
                 !showMenuIcon && onRenderIcon && onRenderIcon(props),
-                !me && participantStateString ? (React.createElement(Text, { "data-ui-id": "participant-item-state-string", className: mergeStyles(participantStateStringStyles) }, participantStateString)) : (React.createElement(React.Fragment, null, menuItems && menuItems.length > 0 && (React.createElement(React.Fragment, null,
+                !me && participantStateString ? (React.createElement(Text, { "data-ui-id": "participant-item-state-string", className: mergeStyles(participantStateStringStyles) }, participantStateString)) : (React.createElement(React.Fragment, null, hasFlyout && (React.createElement(React.Fragment, null,
                     menuButton,
-                    React.createElement(ContextualMenu, { items: menuItems, hidden: menuHidden, target: containerRef, onItemClick: onDismissMenu, onDismiss: onDismissMenu, directionalHint: DirectionalHint.bottomRightEdge, className: contextualMenuStyle, calloutProps: {
+                    React.createElement(ContextualMenu, { id: participantItemFlyoutId, items: menuItems, hidden: menuHidden, target: containerRef, onItemClick: onDismissMenu, onDismiss: onDismissMenu, directionalHint: DirectionalHint.bottomRightEdge, className: contextualMenuStyle, calloutProps: {
                             preventDismissOnEvent
                         } })))))))));
 };
-const participantStateStringTrampoline = (props, strings) => {
+/** @private */
+export const formatParticipantStateString = (props, strings) => {
     return props.participantState === 'EarlyMedia' || props.participantState === 'Ringing'
         ? strings === null || strings === void 0 ? void 0 : strings.participantStateRinging
         : props.participantState === 'Hold'
             ? strings === null || strings === void 0 ? void 0 : strings.participantStateHold
             : undefined;
-    return undefined;
 };
 //# sourceMappingURL=ParticipantItem.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ParticipantItem.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantItem.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n ContextualMenu,\n DirectionalHint,\n Icon,\n IContextualMenuItem,\n IStyle,\n mergeStyles,\n Persona,\n PersonaPresence,\n PersonaSize,\n Stack,\n Text\n} from '@fluentui/react';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles, OnRenderAvatarCallback } from '../types';\nimport {\n displayNoneStyle,\n iconContainerStyle,\n iconStyles,\n meContainerStyle,\n menuButtonContainerStyle,\n participantItemContainerStyle,\n participantStateStringStyles\n} from './styles/ParticipantItem.styles';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\nimport { ParticipantState } from '../types';\nimport { useId } from '@fluentui/react-hooks';\n\n/*\n Fluent styles for {@link ParticipantItem}.\n \n @public\n /\nexport interface ParticipantItemStyles extends BaseCustomStyles {\n /* Styles for the avatar. /\n avatar?: IStyle;\n /* Styles for the (You) string. /\n me?: IStyle;\n /* Styles for the container of the icon. /\n iconContainer?: IStyle;\n /* Styles for the menu. /\n menu?: IStyle;\n}\n\n/\n Strings of {@link ParticipantItem} that can be overridden.\n \n @public\n /\nexport interface ParticipantItemStrings {\n /* String shown when participant is me /\n isMeText: string;\n /* String shown when hovering over menu button /\n menuTitle: string;\n /* Label for the remove button in participant menu /\n removeButtonLabel: string;\n /* Label for the sharing icon in participant state stack /\n sharingIconLabel: string;\n /* Label for the muted icon in participant state stack /\n mutedIconLabel: string;\n /* placeholder text for participants who does not have a display name/\n displayNamePlaceholder?: string;\n /* String shown when `participantState` is `Ringing` /\n participantStateRinging?: string;\n /* String shown when `participantState` is `Hold` /\n participantStateHold?: string;\n /* String for the attendee role /\n attendeeRole: string;\n}\n\n/\n Props for {@link ParticipantItem}.\n \n @public\n /\nexport interface ParticipantItemProps {\n /* Unique User ID of the participant. This `userId` is available in the `onRenderAvatar` callback function /\n userId?: string;\n /* Name of participant. /\n displayName?: string;\n /* Optional indicator to show participant is the user. /\n me?: boolean;\n /* Optional callback returning a JSX element to override avatar. /\n onRenderAvatar?: OnRenderAvatarCallback;\n /* Optional array of IContextualMenuItem for contextual menu. /\n menuItems?: IContextualMenuItem[];\n /* Optional callback returning a JSX element rendered on the right portion of the ParticipantItem. Intended for adding icons. /\n onRenderIcon?: (props?: ParticipantItemProps) => JSX.Element \| null;\n /* Optional PersonaPresence to show participant presence. This will not have an effect if property avatar is assigned. /\n presence?: PersonaPresence;\n /\n Allows users to pass in an object contains custom CSS styles.\n * @Example\n * ```\n * <ParticipantItem styles={{ root: { background: 'blue' } }} />\n * ```\n /\n styles?: ParticipantItemStyles;\n /\n Optional strings to override in component\n /\n strings?: Partial<ParticipantItemStrings>;\n /\n Optional callback when component is clicked\n /\n onClick?: (props?: ParticipantItemProps) => void;\n /* Optional value to determine if the tooltip should be shown for participants or not /\n showParticipantOverflowTooltip?: boolean;\n /\n Optional value to determine and display a participants connection status.\n * For example, `Connecting`, `Ringing` etc.\n * The actual text that is displayed is determined by the localized string\n * corresponding to the provided participant state.\n * For example, `strings.participantStateConnecting` will be used if `participantState` is `Connecting`.\n /\n participantState?: ParticipantState;\n /\n Optional aria property that prefixes the ParticipantItems aria content\n * Takes in a unique id value of the element you would like to be read before the ParticipantItem.\n /\n ariaLabelledBy?: string;\n}\n\n/\n Component to render a calling or chat participant.\n \n Displays the participant's avatar, displayName and status as well as optional icons and context menu.\n \n @public\n /\nexport const ParticipantItem = (props: ParticipantItemProps): JSX.Element => {\n const {\n userId,\n displayName,\n onRenderAvatar,\n menuItems,\n onRenderIcon,\n presence,\n styles,\n me,\n onClick,\n showParticipantOverflowTooltip\n } = props;\n const [itemHovered, setItemHovered] = useState<boolean>(false);\n const [menuHidden, setMenuHidden] = useState<boolean>(true);\n const containerRef = useRef<HTMLDivElement>(null);\n const theme = useTheme();\n const localeStrings = useLocale().strings.participantItem;\n const ids = useIdentifiers();\n const uniqueId = useId();\n\n const strings = { ...localeStrings, ...props.strings };\n const participantStateString = participantStateStringTrampoline(props, strings);\n const showMenuIcon = !participantStateString && (itemHovered \|\| !menuHidden) && menuItems && menuItems?.length > 0;\n\n // For 'me' show empty name so avatar will get 'Person' icon, when there is no name\n const meAvatarText = displayName?.trim() \|\| '';\n\n const avatarOptions = {\n text: me ? meAvatarText : displayName?.trim() \|\| strings.displayNamePlaceholder,\n size: PersonaSize.size32,\n presence: presence,\n initialsTextColor: 'white',\n showOverflowTooltip: showParticipantOverflowTooltip,\n showUnknownPersonaCoin: !me && (!displayName?.trim() \|\| displayName === strings.displayNamePlaceholder)\n };\n\n const avatar = onRenderAvatar ? (\n onRenderAvatar(userId ?? '', avatarOptions)\n ) : (\n <Persona\n className={mergeStyles(\n {\n // Prevents persona text from being vertically truncated if a global line height is less than 1.15.\n lineHeight: '1.15rem'\n },\n styles?.avatar\n )}\n {...avatarOptions}\n />\n );\n\n const meTextStyle = useMemo(\n () => mergeStyles(meContainerStyle, { color: theme.palette.neutralSecondary }, styles?.me),\n [theme.palette.neutralSecondary, styles?.me]\n );\n const contextualMenuStyle = useMemo(\n () => mergeStyles({ background: theme.palette.neutralLighterAlt }, styles?.menu),\n [theme.palette.neutralLighterAlt, styles?.menu]\n );\n const infoContainerStyle = useMemo(\n () =>\n mergeStyles(\n iconContainerStyle,\n { color: theme.palette.neutralSecondary, marginLeft: 'auto' },\n styles?.iconContainer\n ),\n [theme.palette.neutralSecondary, styles?.iconContainer]\n );\n\n const onDismissMenu = (): void => {\n setItemHovered(false);\n setMenuHidden(true);\n };\n\n const menuButton = useMemo(\n () => (\n <Stack\n horizontal={true}\n horizontalAlign=\"end\"\n className={mergeStyles(menuButtonContainerStyle, { color: theme.palette.neutralPrimary })}\n title={strings.menuTitle}\n data-ui-id={ids.participantItemMenuButton}\n >\n <Icon\n iconName=\"ParticipantItemOptionsHovered\"\n className={mergeStyles(iconStyles, !showMenuIcon ? displayNoneStyle : {})}\n />\n </Stack>\n ),\n [theme.palette.neutralPrimary, strings.menuTitle, ids.participantItemMenuButton, showMenuIcon]\n );\n\n return (\n <div\n ref={containerRef}\n role={'menuitem'}\n aria-expanded={!me ? !menuHidden : undefined}\n aria-disabled={(menuItems && menuItems.length > 0) \|\| props.onClick ? false : true}\n data-is-focusable={true}\n data-ui-id=\"participant-item\"\n className={mergeStyles(\n participantItemContainerStyle({ clickable: !!menuItems && menuItems.length > 0 }, theme),\n styles?.root\n )}\n onMouseEnter={() => setItemHovered(true)}\n onMouseLeave={() => setItemHovered(false)}\n onClick={() => {\n if (!participantStateString) {\n setItemHovered(true);\n setMenuHidden(false);\n onClick?.(props);\n }\n if (!menuHidden) {\n onDismissMenu();\n }\n }}\n tabIndex={0}\n >\n <Stack\n horizontal\n className={mergeStyles({\n flexGrow: 1,\n maxWidth: '100%',\n alignItems: 'center'\n })}\n id={uniqueId}\n aria-labelledby={`${props.ariaLabelledBy} ${uniqueId}`}\n >\n {avatar}\n {me && <Text className={meTextStyle}>{strings.isMeText}</Text>}\n <Stack horizontal className={mergeStyles(infoContainerStyle)}>\n {!showMenuIcon && onRenderIcon && onRenderIcon(props)}\n {/ When the participantStateString has a value, we don't show the menu */}\n {!me && participantStateString ? (\n <Text data-ui-id=\"participant-item-state-string\" className={mergeStyles(participantStateStringStyles)}>\n {participantStateString}\n </Text>\n ) : (\n <>\n {menuItems && menuItems.length > 0 && (\n <>\n {menuButton}\n <ContextualMenu\n items={menuItems}\n hidden={menuHidden}\n target={containerRef}\n onItemClick={onDismissMenu}\n onDismiss={onDismissMenu}\n directionalHint={DirectionalHint.bottomRightEdge}\n className={contextualMenuStyle}\n calloutProps={{\n preventDismissOnEvent\n }}\n />\n </>\n )}\n </>\n )}\n </Stack>\n </Stack>\n </div>\n );\n};\n\nconst participantStateStringTrampoline = (\n props: ParticipantItemProps,\n strings: ParticipantItemStrings\n): string \| undefined => {\n return props.participantState === 'EarlyMedia' \|\| props.participantState === 'Ringing'\n ? strings?.participantStateRinging\n : props.participantState === 'Hold'\n ? strings?.participantStateHold\n : undefined;\n\n return undefined;\n};\n"]}
1	+ {"version":3,"file":"ParticipantItem.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantItem.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n ContextualMenu,\n DirectionalHint,\n Icon,\n IContextualMenuItem,\n IStyle,\n mergeStyles,\n Persona,\n PersonaPresence,\n PersonaSize,\n Stack,\n Text\n} from '@fluentui/react';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles, OnRenderAvatarCallback } from '../types';\nimport {\n displayNoneStyle,\n iconContainerStyle,\n iconStyles,\n meContainerStyle,\n menuButtonContainerStyle,\n participantItemContainerStyle,\n participantStateStringStyles\n} from './styles/ParticipantItem.styles';\nimport { _formatString, _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\nimport { ParticipantState } from '../types';\nimport { useId } from '@fluentui/react-hooks';\n\n/*\n Fluent styles for {@link ParticipantItem}.\n \n @public\n /\nexport interface ParticipantItemStyles extends BaseCustomStyles {\n /* Styles for the avatar. /\n avatar?: IStyle;\n /* Styles for the (You) string. /\n me?: IStyle;\n /* Styles for the container of the icon. /\n iconContainer?: IStyle;\n /* Styles for the menu. /\n menu?: IStyle;\n}\n\n/\n Strings of {@link ParticipantItem} that can be overridden.\n \n @public\n /\nexport interface ParticipantItemStrings {\n /* String shown when participant is me /\n isMeText: string;\n /* String shown when hovering over menu button /\n menuTitle: string;\n /* Label for the remove button in participant menu /\n removeButtonLabel: string;\n /* Label for the sharing icon in participant state stack /\n sharingIconLabel: string;\n /* Label for the muted icon in participant state stack /\n mutedIconLabel: string;\n /* Label for the raised hand icon in participant state stack /\n handRaisedIconLabel?: string;\n /* placeholder text for participants who does not have a display name/\n displayNamePlaceholder?: string;\n /* String shown when `participantState` is `Ringing` /\n participantStateRinging?: string;\n /* String shown when `participantState` is `Hold` /\n participantStateHold?: string;\n /* Aria Label applied to the base element of the `participantItem` /\n participantItemAriaLabel?: string;\n /* Aria Label applied to the base element of the `participantItem` when there are more options present /\n participantItemWithMoreOptionsAriaLabel?: string;\n /* String for the attendee role /\n attendeeRole: string;\n}\n\n/\n Props for {@link ParticipantItem}.\n \n @public\n /\nexport interface ParticipantItemProps {\n /* Unique User ID of the participant. This `userId` is available in the `onRenderAvatar` callback function /\n userId?: string;\n /* Name of participant. /\n displayName?: string;\n /* Optional indicator to show participant is the user. /\n me?: boolean;\n /* Optional callback returning a JSX element to override avatar. /\n onRenderAvatar?: OnRenderAvatarCallback;\n /* Optional array of IContextualMenuItem for contextual menu. /\n menuItems?: IContextualMenuItem[];\n /* Optional callback returning a JSX element rendered on the right portion of the ParticipantItem. Intended for adding icons. /\n onRenderIcon?: (props?: ParticipantItemProps) => JSX.Element \| null;\n /* Optional PersonaPresence to show participant presence. This will not have an effect if property avatar is assigned. /\n presence?: PersonaPresence;\n /\n Allows users to pass in an object contains custom CSS styles.\n * @Example\n * ```\n * <ParticipantItem styles={{ root: { background: 'blue' } }} />\n * ```\n /\n styles?: ParticipantItemStyles;\n /\n Optional strings to override in component\n /\n strings?: Partial<ParticipantItemStrings>;\n /\n Optional callback when component is clicked\n /\n onClick?: (props?: ParticipantItemProps) => void;\n /* Optional value to determine if the tooltip should be shown for participants or not /\n showParticipantOverflowTooltip?: boolean;\n /\n Optional value to determine and display a participants connection status.\n * For example, `Connecting`, `Ringing` etc.\n * The actual text that is displayed is determined by the localized string\n * corresponding to the provided participant state.\n * For example, `strings.participantStateConnecting` will be used if `participantState` is `Connecting`.\n /\n participantState?: ParticipantState;\n /\n Optional aria property that prefixes the ParticipantItems aria content\n * Takes in a unique id value of the element you would like to be read before the ParticipantItem.\n /\n ariaLabelledBy?: string;\n}\n\n/\n Component to render a calling or chat participant.\n \n Displays the participant's avatar, displayName and status as well as optional icons and context menu.\n \n @public\n /\nexport const ParticipantItem = (props: ParticipantItemProps): JSX.Element => {\n const {\n userId,\n displayName,\n onRenderAvatar,\n menuItems,\n onRenderIcon,\n presence,\n styles,\n me,\n onClick,\n showParticipantOverflowTooltip\n } = props;\n const [itemHovered, setItemHovered] = useState<boolean>(false);\n const [menuHidden, setMenuHidden] = useState<boolean>(true);\n const containerRef = useRef<HTMLDivElement>(null);\n const theme = useTheme();\n const localeStrings = useLocale().strings.participantItem;\n const ids = useIdentifiers();\n const participantItemId = useId();\n const participantItemFlyoutId = useId();\n const hasFlyout = !!(menuItems && menuItems?.length > 0);\n const flyoutShowing = hasFlyout && menuHidden;\n\n const strings = { ...localeStrings, ...props.strings };\n const participantStateString = formatParticipantStateString(props, strings);\n\n const showMenuIcon = !participantStateString && (itemHovered \|\| !menuHidden) && hasFlyout;\n\n // For 'me' show empty name so avatar will get 'Person' icon, when there is no name\n const meAvatarText = displayName?.trim() \|\| '';\n\n const avatarOptions = {\n text: me ? meAvatarText : displayName?.trim() \|\| strings.displayNamePlaceholder,\n size: PersonaSize.size32,\n presence: presence,\n initialsTextColor: 'white',\n showOverflowTooltip: showParticipantOverflowTooltip,\n showUnknownPersonaCoin: !me && (!displayName?.trim() \|\| displayName === strings.displayNamePlaceholder)\n };\n\n const avatar = onRenderAvatar ? (\n onRenderAvatar(userId ?? '', avatarOptions)\n ) : (\n <Persona\n className={mergeStyles(\n {\n // Prevents persona text from being vertically truncated if a global line height is less than 1.15.\n lineHeight: '1.15rem'\n },\n styles?.avatar\n )}\n {...avatarOptions}\n />\n );\n\n const meTextStyle = useMemo(\n () => mergeStyles(meContainerStyle, { color: theme.palette.neutralSecondary }, styles?.me),\n [theme.palette.neutralSecondary, styles?.me]\n );\n const contextualMenuStyle = useMemo(\n () => mergeStyles({ background: theme.palette.neutralLighterAlt }, styles?.menu),\n [theme.palette.neutralLighterAlt, styles?.menu]\n );\n const infoContainerStyle = useMemo(\n () =>\n mergeStyles(\n iconContainerStyle,\n { color: theme.palette.neutralSecondary, marginLeft: 'auto' },\n styles?.iconContainer\n ),\n [theme.palette.neutralSecondary, styles?.iconContainer]\n );\n\n const onDismissMenu = (): void => {\n setItemHovered(false);\n setMenuHidden(true);\n };\n\n const menuButton = useMemo(\n () => (\n <Stack\n horizontal={true}\n horizontalAlign=\"end\"\n className={mergeStyles(menuButtonContainerStyle, { color: theme.palette.neutralPrimary })}\n title={strings.menuTitle}\n data-ui-id={ids.participantItemMenuButton}\n >\n <Icon\n iconName=\"ParticipantItemOptionsHovered\"\n className={mergeStyles(iconStyles, !showMenuIcon ? displayNoneStyle : {})}\n />\n </Stack>\n ),\n [theme.palette.neutralPrimary, strings.menuTitle, ids.participantItemMenuButton, showMenuIcon]\n );\n\n return (\n <div\n ref={containerRef}\n role={'menuitem'}\n id={participantItemId}\n aria-label={\n (hasFlyout ? props.strings?.participantItemWithMoreOptionsAriaLabel : undefined) ??\n props.strings?.participantItemAriaLabel\n }\n aria-labelledby={`${props.ariaLabelledBy} ${participantItemId}`}\n aria-expanded={flyoutShowing}\n aria-disabled={hasFlyout \|\| props.onClick ? false : true}\n aria-haspopup={hasFlyout ? true : undefined}\n aria-controls={participantItemFlyoutId}\n data-is-focusable={hasFlyout}\n data-ui-id=\"participant-item\"\n className={mergeStyles(participantItemContainerStyle({ clickable: hasFlyout }, theme), styles?.root)}\n onMouseEnter={() => setItemHovered(true)}\n onMouseLeave={() => setItemHovered(false)}\n onClick={() => {\n if (!participantStateString) {\n setItemHovered(true);\n setMenuHidden(false);\n onClick?.(props);\n }\n if (!menuHidden) {\n onDismissMenu();\n }\n }}\n tabIndex={hasFlyout ? 0 : undefined}\n >\n <Stack\n horizontal\n className={mergeStyles({\n flexGrow: 1,\n maxWidth: '100%',\n alignItems: 'center'\n })}\n >\n {avatar}\n {me && <Text className={meTextStyle}>{strings.isMeText}</Text>}\n <Stack horizontal className={mergeStyles(infoContainerStyle)}>\n {!showMenuIcon && onRenderIcon && onRenderIcon(props)}\n {/ When the participantStateString has a value, we don't show the menu /}\n {!me && participantStateString ? (\n <Text data-ui-id=\"participant-item-state-string\" className={mergeStyles(participantStateStringStyles)}>\n {participantStateString}\n </Text>\n ) : (\n <>\n {hasFlyout && (\n <>\n {menuButton}\n <ContextualMenu\n id={participantItemFlyoutId}\n items={menuItems}\n hidden={menuHidden}\n target={containerRef}\n onItemClick={onDismissMenu}\n onDismiss={onDismissMenu}\n directionalHint={DirectionalHint.bottomRightEdge}\n className={contextualMenuStyle}\n calloutProps={{\n preventDismissOnEvent\n }}\n />\n </>\n )}\n </>\n )}\n </Stack>\n </Stack>\n </div>\n );\n};\n\n/* @private */\nexport const formatParticipantStateString = (\n props: ParticipantItemProps,\n strings: ParticipantItemStrings\n): string \| undefined => {\n return props.participantState === 'EarlyMedia' \|\| props.participantState === 'Ringing'\n ? strings?.participantStateRinging\n : props.participantState === 'Hold'\n ? strings?.participantStateHold\n : undefined;\n};\n"]}

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

@@ -7,10 +7,11 @@ import { RaisedHandIcon } from './assets/RaisedHandIcon';
 import React, { useCallback, useMemo } from 'react';
 import { useIdentifiers } from '../identifiers';
 import { useLocale } from '../localization';
-import { ParticipantItem } from './ParticipantItem';
+import { formatParticipantStateString, ParticipantItem } from './ParticipantItem';
 import { iconStyles, participantListItemStyle, participantListStyle } from './styles/ParticipantList.styles';
 import { _formatString } from "../../../acs-ui-common/src";
 const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvatar, createParticipantMenuItems, styles, onParticipantClick, showParticipantOverflowTooltip, participantAriaLabelledBy, theme, pinnedParticipants) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const callingParticipant = participant;
     let presence = undefined;
     if (callingParticipant) {
@@ -49,7 +50,21 @@ const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvat
     const onRenderAvatarWithRaiseHand = (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.raisedHand) && onRenderAvatar
         ? (userId, options, defaultOnRender) => onRenderAvatar(userId, Object.assign(Object.assign({}, options), { styles: { root: { border: callingPalette.raiseHandGold } } }), defaultOnRender)
         : onRenderAvatar;
-    return (React.createElement(ParticipantItem, { styles: styles, key: participant.userId, userId: participant.userId, displayName: displayName, me: myUserId ? participant.userId === myUserId : false, menuItems: menuItems, presence: presence, onRenderIcon: onRenderIcon, onRenderAvatar: onRenderAvatarWithRaiseHand, onClick: onParticipantClick ? () => onParticipantClick === null || onParticipantClick === void 0 ? void 0 : onParticipantClick(participant) : undefined, showParticipantOverflowTooltip: showParticipantOverflowTooltip, participantState: callingParticipant.state, ariaLabelledBy: participantAriaLabelledBy }));
+    const ariaLabelTemplate = (_a = (menuItems && menuItems.length > 0 ? strings === null || strings === void 0 ? void 0 : strings.participantItemWithMoreOptionsAriaLabel : undefined)) !== null && _a !== void 0 ? _a : strings === null || strings === void 0 ? void 0 : strings.participantItemAriaLabel;
+    const ariaLabel = _formatString(ariaLabelTemplate !== null && ariaLabelTemplate !== void 0 ? ariaLabelTemplate : '', {
+        displayName: displayName !== null && displayName !== void 0 ? displayName : '',
+        connectionState: (_b = formatParticipantStateString(callingParticipant, strings)) !== null && _b !== void 0 ? _b : '',
+        mutedState: (_c = (callingParticipant.isMuted ? strings === null || strings === void 0 ? void 0 : strings.mutedIconLabel : undefined)) !== null && _c !== void 0 ? _c : '',
+        sharingState: (_d = (callingParticipant.isScreenSharing ? strings === null || strings === void 0 ? void 0 : strings.sharingIconLabel : undefined)) !== null && _d !== void 0 ? _d : '',
+        handRaisedState: (_k = (((_e = callingParticipant.raisedHand) === null || _e === void 0 ? void 0 : _e.raisedHandOrderPosition)
+            ? _formatString((_f = strings === null || strings === void 0 ? void 0 : strings.handRaisedIconLabel) !== null && _f !== void 0 ? _f : '', {
+                position: (_j = (_h = (_g = callingParticipant.raisedHand) === null || _g === void 0 ? void 0 : _g.raisedHandOrderPosition) === null || _h === void 0 ? void 0 : _h.toString()) !== null && _j !== void 0 ? _j : ''
+            })
+            : undefined)) !== null && _k !== void 0 ? _k : ''
+    });
+    return (React.createElement(ParticipantItem, { styles: styles, key: participant.userId, userId: participant.userId, displayName: displayName, me: myUserId ? participant.userId === myUserId : false, menuItems: menuItems, presence: presence, onRenderIcon: onRenderIcon, onRenderAvatar: onRenderAvatarWithRaiseHand, onClick: onParticipantClick ? () => onParticipantClick === null || onParticipantClick === void 0 ? void 0 : onParticipantClick(participant) : undefined, showParticipantOverflowTooltip: showParticipantOverflowTooltip, participantState: callingParticipant.state, ariaLabelledBy: participantAriaLabelledBy, strings: {
+            participantItemAriaLabel: ariaLabel
+        } }));
 };
 /**
  * Sort participants by raised hand order position

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ParticipantList.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantList.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n Icon,\n IContextualMenuItem,\n IContextualMenuItemStyles,\n merge,\n mergeStyles,\n PersonaPresence,\n Stack,\n Theme\n} from '@fluentui/react';\nimport { Text } from '@fluentui/react';\nimport { useTheme, CallingTheme } from '../theming';\nimport { RaisedHandIcon } from './assets/RaisedHandIcon';\nimport React, { useCallback, useMemo } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\nimport {\n BaseCustomStyles,\n CallParticipantListParticipant,\n OnRenderAvatarCallback,\n ParticipantListParticipant\n} from '../types';\nimport { CustomAvatarOptions } from '../types';\nimport { ParticipantItem, ParticipantItemStrings, ParticipantItemStyles } from './ParticipantItem';\nimport { iconStyles, participantListItemStyle, participantListStyle } from './styles/ParticipantList.styles';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/*\n Styles for the {@link ParticipantList} {@link ParticipantItem}.\n \n @public\n /\nexport interface ParticipantListItemStyles extends ParticipantItemStyles {\n /* Styles applied to the sub-menu of the {@link ParticipantList} {@link ParticipantItem}. /\n participantSubMenuItemsStyles?: IContextualMenuItemStyles;\n}\n\n/\n Styles for the {@link ParticipantList}.\n \n @public\n /\nexport interface ParticipantListStyles extends BaseCustomStyles {\n /* Styles for the {@link ParticipantList} {@link ParticipantItem}. /\n participantItemStyles?: ParticipantListItemStyles;\n}\n\n/ @conditional-compile-remove(total-participant-count) /\n/\n Strings for the {@link ParticipantList}.\n \n @beta\n /\nexport interface ParticipantListStrings {\n /\n String for rendering the count of participants not contained in the displayed participant list\n /\n overflowParticipantCount?: string;\n}\n\n/\n A callback for providing custom menu items for each participant in {@link ParticipantList}.\n \n @public\n /\nexport type ParticipantMenuItemsCallback = (\n participantUserId: string,\n userId?: string,\n defaultMenuItems?: IContextualMenuItem[]\n) => IContextualMenuItem[];\n\n/\n Props for {@link ParticipantList}.\n \n @public\n /\nexport type ParticipantListProps = {\n /* Participants in user call or chat /\n participants: ParticipantListParticipant[];\n /* User ID of user /\n myUserId?: string;\n /\n If set to `true`, excludes the local participant from the participant list with use of `myUserId` props (required in this case).\n \n @defaultValue `false`\n /\n excludeMe?: boolean;\n /* Optional callback to render each participant. If no callback is provided, each participant will be rendered with `ParticipantItem` /\n onRenderParticipant?: (participant: ParticipantListParticipant) => JSX.Element \| null;\n /* Optional callback to render the avatar for each participant. This property will have no effect if `onRenderParticipant` is assigned. /\n onRenderAvatar?: OnRenderAvatarCallback;\n /* Optional callback to render the context menu for each participant /\n onRemoveParticipant?: (userId: string) => void;\n /* Optional callback to render custom menu items for each participant. /\n onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n /* Optional callback when rendered ParticipantItem is clicked /\n onParticipantClick?: (participant?: ParticipantListParticipant) => void;\n /* Optional callback to render a context menu to mute a participant /\n onMuteParticipant?: (userId: string) => Promise<void>;\n styles?: ParticipantListStyles;\n /* Optional value to determine if the tooltip should be shown for participants or not /\n showParticipantOverflowTooltip?: boolean;\n / @conditional-compile-remove(total-participant-count) /\n /* Total number of people in the call. This number can be larger than the remote participant count. /\n totalParticipantCount?: number;\n / @conditional-compile-remove(total-participant-count) /\n /* Strings for the participant list /\n strings?: ParticipantListStrings;\n /* Optional aria-labelledby prop that prefixes each ParticipantItem aria-label /\n participantAriaLabelledBy?: string;\n /* List of pinned participants /\n pinnedParticipants?: string[];\n};\n\nconst onRenderParticipantDefault = (\n participant: ParticipantListParticipant,\n strings: ParticipantItemStrings,\n myUserId?: string,\n onRenderAvatar?: OnRenderAvatarCallback,\n createParticipantMenuItems?: (participant: ParticipantListParticipant) => IContextualMenuItem[],\n styles?: ParticipantListItemStyles,\n onParticipantClick?: (participant?: ParticipantListParticipant) => void,\n showParticipantOverflowTooltip?: boolean,\n participantAriaLabelledBy?: string,\n theme?: Theme,\n pinnedParticipants?: string[]\n): JSX.Element \| null => {\n const callingParticipant = participant as CallParticipantListParticipant;\n\n let presence: PersonaPresence \| undefined = undefined;\n if (callingParticipant) {\n presence = PersonaPresence.none;\n }\n\n const menuItems = createParticipantMenuItems && createParticipantMenuItems(participant);\n\n const formatDisplayName = (displayName?: string): string \| undefined => {\n if (displayName && strings.attendeeRole) {\n return _formatString(displayName, { AttendeeRole: strings.attendeeRole });\n }\n return displayName;\n };\n const displayName = formatDisplayName(participant.displayName);\n\n const callingPalette = (theme as unknown as CallingTheme).callingPalette;\n\n const isPinned = pinnedParticipants && pinnedParticipants?.includes(participant.userId);\n\n const onRenderIcon =\n callingParticipant?.isScreenSharing \|\| callingParticipant?.isMuted \|\| callingParticipant?.raisedHand \|\| isPinned\n ? () => (\n <Stack horizontal={true} tokens={{ childrenGap: '0.5rem' }}>\n {callingParticipant.raisedHand && (\n <Stack\n horizontal={true}\n tokens={{ childrenGap: '0.2rem' }}\n style={{\n alignItems: 'center',\n padding: '0.1rem 0.2rem',\n backgroundColor: theme?.palette.neutralLighter,\n borderRadius: '0.3rem'\n }}\n >\n {callingParticipant.raisedHand.raisedHandOrderPosition && (\n <Stack.Item>\n <Text>{callingParticipant.raisedHand?.raisedHandOrderPosition}</Text>\n </Stack.Item>\n )}\n <Stack.Item>\n <RaisedHandIcon />\n </Stack.Item>\n </Stack>\n )}\n {callingParticipant.isScreenSharing && (\n <Icon\n iconName=\"ParticipantItemScreenShareStart\"\n className={iconStyles}\n ariaLabel={strings.sharingIconLabel}\n />\n )}\n {callingParticipant.isMuted && (\n <Icon iconName=\"ParticipantItemMicOff\" className={iconStyles} ariaLabel={strings.mutedIconLabel} />\n )}\n {callingParticipant.spotlight && <Icon iconName=\"ParticipantItemSpotlighted\" className={iconStyles} />}\n\n {isPinned && <Icon iconName=\"ParticipantItemPinned\" className={iconStyles} />}\n </Stack>\n )\n : () => null;\n\n const onRenderAvatarWithRaiseHand =\n callingParticipant?.raisedHand && onRenderAvatar\n ? (\n userId?: string,\n options?: CustomAvatarOptions,\n defaultOnRender?: (props: CustomAvatarOptions) => JSX.Element\n ) =>\n onRenderAvatar(\n userId,\n { ...options, styles: { root: { border: callingPalette.raiseHandGold } } },\n defaultOnRender\n )\n : onRenderAvatar;\n\n return (\n <ParticipantItem\n styles={styles}\n key={participant.userId}\n userId={participant.userId}\n displayName={displayName}\n me={myUserId ? participant.userId === myUserId : false}\n menuItems={menuItems}\n presence={presence}\n onRenderIcon={onRenderIcon}\n onRenderAvatar={onRenderAvatarWithRaiseHand}\n onClick={onParticipantClick ? () => onParticipantClick?.(participant) : undefined}\n showParticipantOverflowTooltip={showParticipantOverflowTooltip}\n participantState={callingParticipant.state}\n ariaLabelledBy={participantAriaLabelledBy}\n />\n );\n};\n\n/\n Sort participants by raised hand order position\n /\nconst sortParticipants = (participants: ParticipantListParticipant[]): ParticipantListParticipant[] => {\n const isParticipantListCallParticipant = function (participant: ParticipantListParticipant): boolean {\n return 'raisedHand' in participant;\n };\n\n participants.sort((a, b) => {\n if (!isParticipantListCallParticipant(a) \|\| !isParticipantListCallParticipant(b)) {\n return 0;\n }\n const callA = a as CallParticipantListParticipant;\n const callB = b as CallParticipantListParticipant;\n if (callA.raisedHand && callB.raisedHand) {\n return callA.raisedHand.raisedHandOrderPosition - callB.raisedHand.raisedHandOrderPosition;\n } else if (callA.raisedHand) {\n return -1;\n } else if (callB.raisedHand) {\n return 1;\n }\n return 0;\n });\n return participants;\n};\n\nconst getParticipantsForDefaultRender = (\n participants: ParticipantListParticipant[],\n excludeMe: boolean,\n myUserId: string \| undefined\n): ParticipantListParticipant[] => {\n if (!excludeMe \|\| !myUserId) {\n return [...participants];\n }\n\n const userIndex = participants.map((p) => p.userId).indexOf(myUserId);\n\n if (userIndex === -1) {\n return [...participants];\n }\n\n const remoteParticipants = [...participants];\n remoteParticipants.splice(userIndex, 1);\n\n return remoteParticipants;\n};\n\n/\n Component to render all calling or chat participants.\n \n By default, each participant is rendered with {@link ParticipantItem}. See {@link ParticipantListProps.onRenderParticipant} to override.\n \n @public\n /\nexport const ParticipantList = (props: ParticipantListProps): JSX.Element => {\n const {\n excludeMe = false,\n myUserId,\n participants,\n onRemoveParticipant,\n onRenderAvatar,\n onRenderParticipant,\n onFetchParticipantMenuItems,\n showParticipantOverflowTooltip,\n / @conditional-compile-remove(total-participant-count) /\n totalParticipantCount,\n / @conditional-compile-remove(total-participant-count) /\n strings,\n participantAriaLabelledBy,\n pinnedParticipants\n } = props;\n\n const theme = useTheme();\n const ids = useIdentifiers();\n const participantItemStrings = useLocale().strings.participantItem;\n / @conditional-compile-remove(total-participant-count) /\n const participantListStrings = useLocale().strings.ParticipantList;\n\n const displayedParticipants: ParticipantListParticipant[] = useMemo(() => {\n return onRenderParticipant ? participants : getParticipantsForDefaultRender(participants, excludeMe, myUserId);\n }, [participants, excludeMe, myUserId, onRenderParticipant]);\n\n sortParticipants(displayedParticipants);\n\n const createParticipantMenuItems = useCallback(\n (participant: ParticipantListParticipant): IContextualMenuItem[] => {\n let menuItems: IContextualMenuItem[] = [];\n\n const participantIsRemovable = participant.isRemovable;\n if (participant.userId !== myUserId && onRemoveParticipant && participantIsRemovable) {\n menuItems.push({\n key: 'remove',\n text: participantItemStrings.removeButtonLabel,\n onClick: () => onRemoveParticipant(participant.userId),\n itemProps: {\n styles: props.styles?.participantItemStyles?.participantSubMenuItemsStyles\n },\n iconProps: {\n iconName: 'ContextMenuRemoveParticipant',\n styles: { root: { lineHeight: 0 } }\n },\n 'data-ui-id': ids.participantListRemoveParticipantButton\n });\n }\n\n if (onFetchParticipantMenuItems) {\n menuItems = onFetchParticipantMenuItems(participant.userId, myUserId, menuItems);\n }\n\n return menuItems;\n },\n [\n ids.participantListRemoveParticipantButton,\n myUserId,\n onFetchParticipantMenuItems,\n onRemoveParticipant,\n props.styles?.participantItemStyles?.participantSubMenuItemsStyles,\n participantItemStrings.removeButtonLabel\n ]\n );\n\n const participantItemStyles = useMemo(\n () => merge(participantListItemStyle, props.styles?.participantItemStyles),\n [props.styles?.participantItemStyles]\n );\n\n / @conditional-compile-remove(total-participant-count) /\n const overflowParticipantCountString =\n strings?.overflowParticipantCount ?? participantListStrings?.overflowParticipantCount;\n\n return (\n <Stack\n data-ui-id={ids.participantList}\n className={mergeStyles(participantListStyle, props.styles?.root)}\n role={'menu'}\n >\n {displayedParticipants.map((participant: ParticipantListParticipant) =>\n onRenderParticipant\n ? onRenderParticipant(participant)\n : onRenderParticipantDefault(\n participant,\n participantItemStrings,\n myUserId,\n onRenderAvatar,\n createParticipantMenuItems,\n participantItemStyles,\n props.onParticipantClick,\n showParticipantOverflowTooltip,\n participantAriaLabelledBy,\n theme,\n pinnedParticipants\n )\n )}\n {\n / @conditional-compile-remove(total-participant-count) */ overflowParticipantCountString &&\n totalParticipantCount &&\n totalParticipantCount > displayedParticipants.length && (\n <Text style={{ fontWeight: 400, margin: '0.5rem' }}>\n {_formatString(overflowParticipantCountString, {\n overflowCount: `${totalParticipantCount - displayedParticipants.length}`\n })}\n </Text>\n )\n }\n </Stack>\n );\n};\n"]}
1	+ {"version":3,"file":"ParticipantList.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantList.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EACL,IAAI,EAGJ,KAAK,EACL,WAAW,EACX,eAAe,EACf,KAAK,EAEN,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAgB,MAAM,YAAY,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAQ5C,OAAO,EACL,4BAA4B,EAC5B,eAAe,EAGhB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAE,wBAAwB,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AAC7G,OAAO,EAAE,aAAa,EAAE,mCAAgC;AAyFxD,MAAM,0BAA0B,GAAG,CACjC,WAAuC,EACvC,OAA+B,EAC/B,QAAiB,EACjB,cAAuC,EACvC,0BAA+F,EAC/F,MAAkC,EAClC,kBAAuE,EACvE,8BAAwC,EACxC,yBAAkC,EAClC,KAAa,EACb,kBAA6B,EACT,EAAE;;IACtB,MAAM,kBAAkB,GAAG,WAA6C,CAAC;IAEzE,IAAI,QAAQ,GAAgC,SAAS,CAAC;IACtD,IAAI,kBAAkB,EAAE,CAAC;QACvB,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC;IAClC,CAAC;IAED,MAAM,SAAS,GAAG,0BAA0B,IAAI,0BAA0B,CAAC,WAAW,CAAC,CAAC;IAExF,MAAM,iBAAiB,GAAG,CAAC,WAAoB,EAAsB,EAAE;QACrE,IAAI,WAAW,IAAI,OAAO,CAAC,YAAY,EAAE,CAAC;YACxC,OAAO,aAAa,CAAC,WAAW,EAAE,EAAE,YAAY,EAAE,OAAO,CAAC,YAAY,EAAE,CAAC,CAAC;QAC5E,CAAC;QACD,OAAO,WAAW,CAAC;IACrB,CAAC,CAAC;IACF,MAAM,WAAW,GAAG,iBAAiB,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IAE/D,MAAM,cAAc,GAAI,KAAiC,CAAC,cAAc,CAAC;IAEzE,MAAM,QAAQ,GAAG,kBAAkB,KAAI,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAA,CAAC;IAExF,MAAM,YAAY,GAChB,CAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,eAAe,MAAI,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,OAAO,CAAA,KAAI,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,UAAU,CAAA,IAAI,QAAQ;QAC9G,CAAC,CAAC,GAAG,EAAE;;YAAC,OAAA,CACJ,oBAAC,KAAK,IAAC,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE;gBACvD,kBAAkB,CAAC,UAAU,IAAI,CAChC,oBAAC,KAAK,IACJ,UAAU,EAAE,IAAI,EAChB,MAAM,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,EACjC,KAAK,EAAE;wBACL,UAAU,EAAE,QAAQ;wBACpB,OAAO,EAAE,eAAe;wBACxB,eAAe,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,cAAc;wBAC9C,YAAY,EAAE,QAAQ;qBACvB;oBAEA,kBAAkB,CAAC,UAAU,CAAC,uBAAuB,IAAI,CACxD,oBAAC,KAAK,CAAC,IAAI;wBACT,oBAAC,IAAI,QAAE,MAAA,kBAAkB,CAAC,UAAU,0CAAE,uBAAuB,CAAQ,CAC1D,CACd;oBACD,oBAAC,KAAK,CAAC,IAAI;wBACT,oBAAC,cAAc,OAAG,CACP,CACP,CACT;gBACA,kBAAkB,CAAC,eAAe,IAAI,CACrC,oBAAC,IAAI,IACH,QAAQ,EAAC,iCAAiC,EAC1C,SAAS,EAAE,UAAU,EACrB,SAAS,EAAE,OAAO,CAAC,gBAAgB,GACnC,CACH;gBACA,kBAAkB,CAAC,OAAO,IAAI,CAC7B,oBAAC,IAAI,IAAC,QAAQ,EAAC,uBAAuB,EAAC,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,CAAC,cAAc,GAAI,CACpG;gBACA,kBAAkB,CAAC,SAAS,IAAI,oBAAC,IAAI,IAAC,QAAQ,EAAC,4BAA4B,EAAC,SAAS,EAAE,UAAU,GAAI;gBAErG,QAAQ,IAAI,oBAAC,IAAI,IAAC,QAAQ,EAAC,uBAAuB,EAAC,SAAS,EAAE,UAAU,GAAI,CACvE,CACT,CAAA;SAAA;QACH,CAAC,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC;IAEjB,MAAM,2BAA2B,GAC/B,CAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,UAAU,KAAI,cAAc;QAC9C,CAAC,CAAC,CACE,MAAe,EACf,OAA6B,EAC7B,eAA6D,EAC7D,EAAE,CACF,cAAc,CACZ,MAAM,kCACD,OAAO,KAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,MAAM,EAAE,cAAc,CAAC,aAAa,EAAE,EAAE,KACxE,eAAe,CAChB;QACL,CAAC,CAAC,cAAc,CAAC;IAErB,MAAM,iBAAiB,GACrB,MAAA,CAAC,SAAS,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,uCAAuC,CAAC,CAAC,CAAC,SAAS,CAAC,mCAClG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,wBAAwB,CAAC;IACpC,MAAM,SAAS,GAAG,aAAa,CAAC,iBAAiB,aAAjB,iBAAiB,cAAjB,iBAAiB,GAAI,EAAE,EAAE;QACvD,WAAW,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,EAAE;QAC9B,eAAe,EAAE,MAAA,4BAA4B,CAAC,kBAAkB,EAAE,OAAO,CAAC,mCAAI,EAAE;QAChF,UAAU,EAAE,MAAA,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,mCAAI,EAAE;QACpF,YAAY,EAAE,MAAA,CAAC,kBAAkB,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC,mCAAI,EAAE;QAChG,eAAe,EACb,MAAA,CAAC,CAAA,MAAA,kBAAkB,CAAC,UAAU,0CAAE,uBAAuB;YACrD,CAAC,CAAC,aAAa,CAAC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,mBAAmB,mCAAI,EAAE,EAAE;gBAChD,QAAQ,EAAE,MAAA,MAAA,MAAA,kBAAkB,CAAC,UAAU,0CAAE,uBAAuB,0CAAE,QAAQ,EAAE,mCAAI,EAAE;aACnF,CAAC;YACJ,CAAC,CAAC,SAAS,CAAC,mCAAI,EAAE;KACvB,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,eAAe,IACd,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,WAAW,CAAC,MAAM,EACvB,MAAM,EAAE,WAAW,CAAC,MAAM,EAC1B,WAAW,EAAE,WAAW,EACxB,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,EACtD,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,2BAA2B,EAC3C,OAAO,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAG,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,EACjF,8BAA8B,EAAE,8BAA8B,EAC9D,gBAAgB,EAAE,kBAAkB,CAAC,KAAK,EAC1C,cAAc,EAAE,yBAAyB,EACzC,OAAO,EAAE;YACP,wBAAwB,EAAE,SAAS;SACpC,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,gBAAgB,GAAG,CAAC,YAA0C,EAAgC,EAAE;IACpG,MAAM,gCAAgC,GAAG,UAAU,WAAuC;QACxF,OAAO,YAAY,IAAI,WAAW,CAAC;IACrC,CAAC,CAAC;IAEF,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACzB,IAAI,CAAC,gCAAgC,CAAC,CAAC,CAAC,IAAI,CAAC,gCAAgC,CAAC,CAAC,CAAC,EAAE,CAAC;YACjF,OAAO,CAAC,CAAC;QACX,CAAC;QACD,MAAM,KAAK,GAAG,CAAmC,CAAC;QAClD,MAAM,KAAK,GAAG,CAAmC,CAAC;QAClD,IAAI,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,UAAU,EAAE,CAAC;YACzC,OAAO,KAAK,CAAC,UAAU,CAAC,uBAAuB,GAAG,KAAK,CAAC,UAAU,CAAC,uBAAuB,CAAC;QAC7F,CAAC;aAAM,IAAI,KAAK,CAAC,UAAU,EAAE,CAAC;YAC5B,OAAO,CAAC,CAAC,CAAC;QACZ,CAAC;aAAM,IAAI,KAAK,CAAC,UAAU,EAAE,CAAC;YAC5B,OAAO,CAAC,CAAC;QACX,CAAC;QACD,OAAO,CAAC,CAAC;IACX,CAAC,CAAC,CAAC;IACH,OAAO,YAAY,CAAC;AACtB,CAAC,CAAC;AAEF,MAAM,+BAA+B,GAAG,CACtC,YAA0C,EAC1C,SAAkB,EAClB,QAA4B,EACE,EAAE;IAChC,IAAI,CAAC,SAAS,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC5B,OAAO,CAAC,GAAG,YAAY,CAAC,CAAC;IAC3B,CAAC;IAED,MAAM,SAAS,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAEtE,IAAI,SAAS,KAAK,CAAC,CAAC,EAAE,CAAC;QACrB,OAAO,CAAC,GAAG,YAAY,CAAC,CAAC;IAC3B,CAAC;IAED,MAAM,kBAAkB,GAAG,CAAC,GAAG,YAAY,CAAC,CAAC;IAC7C,kBAAkB,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;IAExC,OAAO,kBAAkB,CAAC;AAC5B,CAAC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;;IAC1E,MAAM,EACJ,SAAS,GAAG,KAAK,EACjB,QAAQ,EACR,YAAY,EACZ,mBAAmB,EACnB,cAAc,EACd,mBAAmB,EACnB,2BAA2B,EAC3B,8BAA8B;IAC9B,0DAA0D;IAC1D,qBAAqB;IACrB,0DAA0D;IAC1D,OAAO,EACP,yBAAyB,EACzB,kBAAkB,EACnB,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,GAAG,GAAG,cAAc,EAAE,CAAC;IAC7B,MAAM,sBAAsB,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,eAAe,CAAC;IACnE,0DAA0D;IAC1D,MAAM,sBAAsB,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,eAAe,CAAC;IAEnE,MAAM,qBAAqB,GAAiC,OAAO,CAAC,GAAG,EAAE;QACvE,OAAO,mBAAmB,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,+BAA+B,CAAC,YAAY,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC;IACjH,CAAC,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAE7D,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;IAExC,MAAM,0BAA0B,GAAG,WAAW,CAC5C,CAAC,WAAuC,EAAyB,EAAE;;QACjE,IAAI,SAAS,GAA0B,EAAE,CAAC;QAE1C,MAAM,sBAAsB,GAAG,WAAW,CAAC,WAAW,CAAC;QACvD,IAAI,WAAW,CAAC,MAAM,KAAK,QAAQ,IAAI,mBAAmB,IAAI,sBAAsB,EAAE,CAAC;YACrF,SAAS,CAAC,IAAI,CAAC;gBACb,GAAG,EAAE,QAAQ;gBACb,IAAI,EAAE,sBAAsB,CAAC,iBAAiB;gBAC9C,OAAO,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,WAAW,CAAC,MAAM,CAAC;gBACtD,SAAS,EAAE;oBACT,MAAM,EAAE,MAAA,MAAA,KAAK,CAAC,MAAM,0CAAE,qBAAqB,0CAAE,6BAA6B;iBAC3E;gBACD,SAAS,EAAE;oBACT,QAAQ,EAAE,8BAA8B;oBACxC,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,EAAE;iBACpC;gBACD,YAAY,EAAE,GAAG,CAAC,sCAAsC;aACzD,CAAC,CAAC;QACL,CAAC;QAED,IAAI,2BAA2B,EAAE,CAAC;YAChC,SAAS,GAAG,2BAA2B,CAAC,WAAW,CAAC,MAAM,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;QACnF,CAAC;QAED,OAAO,SAAS,CAAC;IACnB,CAAC,EACD;QACE,GAAG,CAAC,sCAAsC;QAC1C,QAAQ;QACR,2BAA2B;QAC3B,mBAAmB;QACnB,MAAA,MAAA,KAAK,CAAC,MAAM,0CAAE,qBAAqB,0CAAE,6BAA6B;QAClE,sBAAsB,CAAC,iBAAiB;KACzC,CACF,CAAC;IAEF,MAAM,qBAAqB,GAAG,OAAO,CACnC,GAAG,EAAE,WAAC,OAAA,KAAK,CAAC,wBAAwB,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,qBAAqB,CAAC,CAAA,EAAA,EAC1E,CAAC,MAAA,KAAK,CAAC,MAAM,0CAAE,qBAAqB,CAAC,CACtC,CAAC;IAEF,0DAA0D;IAC1D,MAAM,8BAA8B,GAClC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,wBAAwB,mCAAI,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,wBAAwB,CAAC;IAExF,OAAO,CACL,oBAAC,KAAK,kBACQ,GAAG,CAAC,eAAe,EAC/B,SAAS,EAAE,WAAW,CAAC,oBAAoB,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,CAAC,EAChE,IAAI,EAAE,MAAM;QAEX,qBAAqB,CAAC,GAAG,CAAC,CAAC,WAAuC,EAAE,EAAE,CACrE,mBAAmB;YACjB,CAAC,CAAC,mBAAmB,CAAC,WAAW,CAAC;YAClC,CAAC,CAAC,0BAA0B,CACxB,WAAW,EACX,sBAAsB,EACtB,QAAQ,EACR,cAAc,EACd,0BAA0B,EAC1B,qBAAqB,EACrB,KAAK,CAAC,kBAAkB,EACxB,8BAA8B,EAC9B,yBAAyB,EACzB,KAAK,EACL,kBAAkB,CACnB,CACN;QAEC,0DAA0D,CAAC,8BAA8B;YACvF,qBAAqB;YACrB,qBAAqB,GAAG,qBAAqB,CAAC,MAAM,IAAI,CACtD,oBAAC,IAAI,IAAC,KAAK,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,IAC/C,aAAa,CAAC,8BAA8B,EAAE;YAC7C,aAAa,EAAE,GAAG,qBAAqB,GAAG,qBAAqB,CAAC,MAAM,EAAE;SACzE,CAAC,CACG,CACR,CAEC,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n Icon,\n IContextualMenuItem,\n IContextualMenuItemStyles,\n merge,\n mergeStyles,\n PersonaPresence,\n Stack,\n Theme\n} from '@fluentui/react';\nimport { Text } from '@fluentui/react';\nimport { useTheme, CallingTheme } from '../theming';\nimport { RaisedHandIcon } from './assets/RaisedHandIcon';\nimport React, { useCallback, useMemo } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\nimport {\n BaseCustomStyles,\n CallParticipantListParticipant,\n OnRenderAvatarCallback,\n ParticipantListParticipant\n} from '../types';\nimport { CustomAvatarOptions } from '../types';\nimport {\n formatParticipantStateString,\n ParticipantItem,\n ParticipantItemStrings,\n ParticipantItemStyles\n} from './ParticipantItem';\nimport { iconStyles, participantListItemStyle, participantListStyle } from './styles/ParticipantList.styles';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/*\n Styles for the {@link ParticipantList} {@link ParticipantItem}.\n \n @public\n /\nexport interface ParticipantListItemStyles extends ParticipantItemStyles {\n /* Styles applied to the sub-menu of the {@link ParticipantList} {@link ParticipantItem}. /\n participantSubMenuItemsStyles?: IContextualMenuItemStyles;\n}\n\n/\n Styles for the {@link ParticipantList}.\n \n @public\n /\nexport interface ParticipantListStyles extends BaseCustomStyles {\n /* Styles for the {@link ParticipantList} {@link ParticipantItem}. /\n participantItemStyles?: ParticipantListItemStyles;\n}\n\n/ @conditional-compile-remove(total-participant-count) /\n/\n Strings for the {@link ParticipantList}.\n \n @beta\n /\nexport interface ParticipantListStrings {\n /\n String for rendering the count of participants not contained in the displayed participant list\n /\n overflowParticipantCount?: string;\n}\n\n/\n A callback for providing custom menu items for each participant in {@link ParticipantList}.\n \n @public\n /\nexport type ParticipantMenuItemsCallback = (\n participantUserId: string,\n userId?: string,\n defaultMenuItems?: IContextualMenuItem[]\n) => IContextualMenuItem[];\n\n/\n Props for {@link ParticipantList}.\n \n @public\n /\nexport type ParticipantListProps = {\n /* Participants in user call or chat /\n participants: ParticipantListParticipant[];\n /* User ID of user /\n myUserId?: string;\n /\n If set to `true`, excludes the local participant from the participant list with use of `myUserId` props (required in this case).\n \n @defaultValue `false`\n /\n excludeMe?: boolean;\n /* Optional callback to render each participant. If no callback is provided, each participant will be rendered with `ParticipantItem` /\n onRenderParticipant?: (participant: ParticipantListParticipant) => JSX.Element \| null;\n /* Optional callback to render the avatar for each participant. This property will have no effect if `onRenderParticipant` is assigned. /\n onRenderAvatar?: OnRenderAvatarCallback;\n /* Optional callback to render the context menu for each participant /\n onRemoveParticipant?: (userId: string) => void;\n /* Optional callback to render custom menu items for each participant. /\n onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n /* Optional callback when rendered ParticipantItem is clicked /\n onParticipantClick?: (participant?: ParticipantListParticipant) => void;\n /* Optional callback to render a context menu to mute a participant /\n onMuteParticipant?: (userId: string) => Promise<void>;\n styles?: ParticipantListStyles;\n /* Optional value to determine if the tooltip should be shown for participants or not /\n showParticipantOverflowTooltip?: boolean;\n / @conditional-compile-remove(total-participant-count) /\n /* Total number of people in the call. This number can be larger than the remote participant count. /\n totalParticipantCount?: number;\n / @conditional-compile-remove(total-participant-count) /\n /* Strings for the participant list /\n strings?: ParticipantListStrings;\n /* Optional aria-labelledby prop that prefixes each ParticipantItem aria-label /\n participantAriaLabelledBy?: string;\n /* List of pinned participants /\n pinnedParticipants?: string[];\n};\n\nconst onRenderParticipantDefault = (\n participant: ParticipantListParticipant,\n strings: ParticipantItemStrings,\n myUserId?: string,\n onRenderAvatar?: OnRenderAvatarCallback,\n createParticipantMenuItems?: (participant: ParticipantListParticipant) => IContextualMenuItem[],\n styles?: ParticipantListItemStyles,\n onParticipantClick?: (participant?: ParticipantListParticipant) => void,\n showParticipantOverflowTooltip?: boolean,\n participantAriaLabelledBy?: string,\n theme?: Theme,\n pinnedParticipants?: string[]\n): JSX.Element \| null => {\n const callingParticipant = participant as CallParticipantListParticipant;\n\n let presence: PersonaPresence \| undefined = undefined;\n if (callingParticipant) {\n presence = PersonaPresence.none;\n }\n\n const menuItems = createParticipantMenuItems && createParticipantMenuItems(participant);\n\n const formatDisplayName = (displayName?: string): string \| undefined => {\n if (displayName && strings.attendeeRole) {\n return _formatString(displayName, { AttendeeRole: strings.attendeeRole });\n }\n return displayName;\n };\n const displayName = formatDisplayName(participant.displayName);\n\n const callingPalette = (theme as unknown as CallingTheme).callingPalette;\n\n const isPinned = pinnedParticipants && pinnedParticipants?.includes(participant.userId);\n\n const onRenderIcon =\n callingParticipant?.isScreenSharing \|\| callingParticipant?.isMuted \|\| callingParticipant?.raisedHand \|\| isPinned\n ? () => (\n <Stack horizontal={true} tokens={{ childrenGap: '0.5rem' }}>\n {callingParticipant.raisedHand && (\n <Stack\n horizontal={true}\n tokens={{ childrenGap: '0.2rem' }}\n style={{\n alignItems: 'center',\n padding: '0.1rem 0.2rem',\n backgroundColor: theme?.palette.neutralLighter,\n borderRadius: '0.3rem'\n }}\n >\n {callingParticipant.raisedHand.raisedHandOrderPosition && (\n <Stack.Item>\n <Text>{callingParticipant.raisedHand?.raisedHandOrderPosition}</Text>\n </Stack.Item>\n )}\n <Stack.Item>\n <RaisedHandIcon />\n </Stack.Item>\n </Stack>\n )}\n {callingParticipant.isScreenSharing && (\n <Icon\n iconName=\"ParticipantItemScreenShareStart\"\n className={iconStyles}\n ariaLabel={strings.sharingIconLabel}\n />\n )}\n {callingParticipant.isMuted && (\n <Icon iconName=\"ParticipantItemMicOff\" className={iconStyles} ariaLabel={strings.mutedIconLabel} />\n )}\n {callingParticipant.spotlight && <Icon iconName=\"ParticipantItemSpotlighted\" className={iconStyles} />}\n\n {isPinned && <Icon iconName=\"ParticipantItemPinned\" className={iconStyles} />}\n </Stack>\n )\n : () => null;\n\n const onRenderAvatarWithRaiseHand =\n callingParticipant?.raisedHand && onRenderAvatar\n ? (\n userId?: string,\n options?: CustomAvatarOptions,\n defaultOnRender?: (props: CustomAvatarOptions) => JSX.Element\n ) =>\n onRenderAvatar(\n userId,\n { ...options, styles: { root: { border: callingPalette.raiseHandGold } } },\n defaultOnRender\n )\n : onRenderAvatar;\n\n const ariaLabelTemplate =\n (menuItems && menuItems.length > 0 ? strings?.participantItemWithMoreOptionsAriaLabel : undefined) ??\n strings?.participantItemAriaLabel;\n const ariaLabel = _formatString(ariaLabelTemplate ?? '', {\n displayName: displayName ?? '',\n connectionState: formatParticipantStateString(callingParticipant, strings) ?? '',\n mutedState: (callingParticipant.isMuted ? strings?.mutedIconLabel : undefined) ?? '',\n sharingState: (callingParticipant.isScreenSharing ? strings?.sharingIconLabel : undefined) ?? '',\n handRaisedState:\n (callingParticipant.raisedHand?.raisedHandOrderPosition\n ? _formatString(strings?.handRaisedIconLabel ?? '', {\n position: callingParticipant.raisedHand?.raisedHandOrderPosition?.toString() ?? ''\n })\n : undefined) ?? ''\n });\n\n return (\n <ParticipantItem\n styles={styles}\n key={participant.userId}\n userId={participant.userId}\n displayName={displayName}\n me={myUserId ? participant.userId === myUserId : false}\n menuItems={menuItems}\n presence={presence}\n onRenderIcon={onRenderIcon}\n onRenderAvatar={onRenderAvatarWithRaiseHand}\n onClick={onParticipantClick ? () => onParticipantClick?.(participant) : undefined}\n showParticipantOverflowTooltip={showParticipantOverflowTooltip}\n participantState={callingParticipant.state}\n ariaLabelledBy={participantAriaLabelledBy}\n strings={{\n participantItemAriaLabel: ariaLabel\n }}\n />\n );\n};\n\n/\n Sort participants by raised hand order position\n /\nconst sortParticipants = (participants: ParticipantListParticipant[]): ParticipantListParticipant[] => {\n const isParticipantListCallParticipant = function (participant: ParticipantListParticipant): boolean {\n return 'raisedHand' in participant;\n };\n\n participants.sort((a, b) => {\n if (!isParticipantListCallParticipant(a) \|\| !isParticipantListCallParticipant(b)) {\n return 0;\n }\n const callA = a as CallParticipantListParticipant;\n const callB = b as CallParticipantListParticipant;\n if (callA.raisedHand && callB.raisedHand) {\n return callA.raisedHand.raisedHandOrderPosition - callB.raisedHand.raisedHandOrderPosition;\n } else if (callA.raisedHand) {\n return -1;\n } else if (callB.raisedHand) {\n return 1;\n }\n return 0;\n });\n return participants;\n};\n\nconst getParticipantsForDefaultRender = (\n participants: ParticipantListParticipant[],\n excludeMe: boolean,\n myUserId: string \| undefined\n): ParticipantListParticipant[] => {\n if (!excludeMe \|\| !myUserId) {\n return [...participants];\n }\n\n const userIndex = participants.map((p) => p.userId).indexOf(myUserId);\n\n if (userIndex === -1) {\n return [...participants];\n }\n\n const remoteParticipants = [...participants];\n remoteParticipants.splice(userIndex, 1);\n\n return remoteParticipants;\n};\n\n/\n Component to render all calling or chat participants.\n \n By default, each participant is rendered with {@link ParticipantItem}. See {@link ParticipantListProps.onRenderParticipant} to override.\n \n @public\n /\nexport const ParticipantList = (props: ParticipantListProps): JSX.Element => {\n const {\n excludeMe = false,\n myUserId,\n participants,\n onRemoveParticipant,\n onRenderAvatar,\n onRenderParticipant,\n onFetchParticipantMenuItems,\n showParticipantOverflowTooltip,\n / @conditional-compile-remove(total-participant-count) /\n totalParticipantCount,\n / @conditional-compile-remove(total-participant-count) /\n strings,\n participantAriaLabelledBy,\n pinnedParticipants\n } = props;\n\n const theme = useTheme();\n const ids = useIdentifiers();\n const participantItemStrings = useLocale().strings.participantItem;\n / @conditional-compile-remove(total-participant-count) /\n const participantListStrings = useLocale().strings.ParticipantList;\n\n const displayedParticipants: ParticipantListParticipant[] = useMemo(() => {\n return onRenderParticipant ? participants : getParticipantsForDefaultRender(participants, excludeMe, myUserId);\n }, [participants, excludeMe, myUserId, onRenderParticipant]);\n\n sortParticipants(displayedParticipants);\n\n const createParticipantMenuItems = useCallback(\n (participant: ParticipantListParticipant): IContextualMenuItem[] => {\n let menuItems: IContextualMenuItem[] = [];\n\n const participantIsRemovable = participant.isRemovable;\n if (participant.userId !== myUserId && onRemoveParticipant && participantIsRemovable) {\n menuItems.push({\n key: 'remove',\n text: participantItemStrings.removeButtonLabel,\n onClick: () => onRemoveParticipant(participant.userId),\n itemProps: {\n styles: props.styles?.participantItemStyles?.participantSubMenuItemsStyles\n },\n iconProps: {\n iconName: 'ContextMenuRemoveParticipant',\n styles: { root: { lineHeight: 0 } }\n },\n 'data-ui-id': ids.participantListRemoveParticipantButton\n });\n }\n\n if (onFetchParticipantMenuItems) {\n menuItems = onFetchParticipantMenuItems(participant.userId, myUserId, menuItems);\n }\n\n return menuItems;\n },\n [\n ids.participantListRemoveParticipantButton,\n myUserId,\n onFetchParticipantMenuItems,\n onRemoveParticipant,\n props.styles?.participantItemStyles?.participantSubMenuItemsStyles,\n participantItemStrings.removeButtonLabel\n ]\n );\n\n const participantItemStyles = useMemo(\n () => merge(participantListItemStyle, props.styles?.participantItemStyles),\n [props.styles?.participantItemStyles]\n );\n\n / @conditional-compile-remove(total-participant-count) /\n const overflowParticipantCountString =\n strings?.overflowParticipantCount ?? participantListStrings?.overflowParticipantCount;\n\n return (\n <Stack\n data-ui-id={ids.participantList}\n className={mergeStyles(participantListStyle, props.styles?.root)}\n role={'menu'}\n >\n {displayedParticipants.map((participant: ParticipantListParticipant) =>\n onRenderParticipant\n ? onRenderParticipant(participant)\n : onRenderParticipantDefault(\n participant,\n participantItemStrings,\n myUserId,\n onRenderAvatar,\n createParticipantMenuItems,\n participantItemStyles,\n props.onParticipantClick,\n showParticipantOverflowTooltip,\n participantAriaLabelledBy,\n theme,\n pinnedParticipants\n )\n )}\n {\n / @conditional-compile-remove(total-participant-count) */ overflowParticipantCountString &&\n totalParticipantCount &&\n totalParticipantCount > displayedParticipants.length && (\n <Text style={{ fontWeight: 400, margin: '0.5rem' }}>\n {_formatString(overflowParticipantCountString, {\n overflowCount: `${totalParticipantCount - displayedParticipants.length}`\n })}\n </Text>\n )\n }\n </Stack>\n );\n};\n"]}

package/dist/dist-esm/react-components/src/components/ScreenShareButton.js CHANGED Viewed

@@ -3,7 +3,7 @@
 import React from 'react';
 import { useLocale } from '../localization';
 import { ControlBarButton } from './ControlBarButton';
-import { DefaultPalette, mergeStyles, useTheme } from '@fluentui/react';
+import { DefaultPalette, mergeStyleSets, useTheme } from '@fluentui/react';
 import { _HighContrastAwareIcon } from './HighContrastAwareIcon';
 /**
  * A button to start / stop screen sharing.
@@ -20,7 +20,7 @@ export const ScreenShareButton = (props) => {
     const styles = screenshareButtonStyles(theme);
     const onRenderScreenShareOnIcon = () => (React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "ControlButtonScreenShareStop" }));
     const onRenderScreenShareOffIcon = () => (React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "ControlButtonScreenShareStart" }));
-    return (React.createElement(ControlBarButton, Object.assign({}, props, { className: mergeStyles(styles, props.styles), onClick: (_a = props.onToggleScreenShare) !== null && _a !== void 0 ? _a : props.onClick, onRenderOnIcon: (_b = props.onRenderOnIcon) !== null && _b !== void 0 ? _b : onRenderScreenShareOnIcon, onRenderOffIcon: (_c = props.onRenderOffIcon) !== null && _c !== void 0 ? _c : onRenderScreenShareOffIcon, strings: strings, labelKey: (_d = props.labelKey) !== null && _d !== void 0 ? _d : 'screenShareButtonLabel', disabled: props.disabled })));
+    return (React.createElement(ControlBarButton, Object.assign({}, props, { styles: mergeStyleSets(styles, props.styles), onClick: (_a = props.onToggleScreenShare) !== null && _a !== void 0 ? _a : props.onClick, onRenderOnIcon: (_b = props.onRenderOnIcon) !== null && _b !== void 0 ? _b : onRenderScreenShareOnIcon, onRenderOffIcon: (_c = props.onRenderOffIcon) !== null && _c !== void 0 ? _c : onRenderScreenShareOffIcon, strings: strings, labelKey: (_d = props.labelKey) !== null && _d !== void 0 ? _d : 'screenShareButtonLabel', disabled: props.disabled })));
 };
 const screenshareButtonStyles = (theme) => ({
     rootChecked: {

package/dist/dist-esm/react-components/src/components/ScreenShareButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScreenShareButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ScreenShareButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAiB,~~WAAW~~,EAAS,QAAQ,EAAE,MAAM,iBAAiB,CAAC;~~AAC9F~~,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAsCjE;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;;IAC9E,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,iBAAiB,CAAC;IAC5D,MAAM,OAAO,mCAAQ,aAAa,GAAK,KAAK,CAAC,OAAO,CAAE,CAAC;IAEvD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAAG,uBAAuB,CAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,yBAAyB,GAAG,GAAgB,EAAE,CAAC,CACnD,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,8BAA8B,GAAG,CAC7F,CAAC;IACF,MAAM,0BAA0B,GAAG,GAAgB,EAAE,CAAC,CACpD,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,+BAA+B,GAAG,CAC9F,CAAC;IAEF,OAAO,CACL,oBAAC,gBAAgB,oBACX,KAAK,IACT,~~SAAS~~,EAAE,~~WAAW~~,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,EAC5C,OAAO,EAAE,MAAA,KAAK,CAAC,mBAAmB,mCAAI,KAAK,CAAC,OAAO,EACnD,cAAc,EAAE,MAAA,KAAK,CAAC,cAAc,mCAAI,yBAAyB,EACjE,eAAe,EAAE,MAAA,KAAK,CAAC,eAAe,mCAAI,0BAA0B,EACpE,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,MAAA,KAAK,CAAC,QAAQ,mCAAI,wBAAwB,EACpD,QAAQ,EAAE,KAAK,CAAC,QAAQ,IACxB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,uBAAuB,GAAG,CAAC,KAAY,EAAiB,EAAE,CAAC,CAAC;IAChE,WAAW,EAAE;QACX,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;QACtC,KAAK,EAAE,cAAc,CAAC,KAAK;QAC3B,eAAe,EAAE,EAAE,YAAY,EAAE,GAAG,cAAc,CAAC,KAAK,aAAa,EAAE,EAAE,+DAA+D;QACxI,gCAAgC,EAAE;YAChC,MAAM,EAAE,WAAW;YACnB,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;SACjC;KACF;IACD,kBAAkB,EAAE;QAClB,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;QACtC,KAAK,EAAE,cAAc,CAAC,KAAK;QAC3B,eAAe,EAAE,EAAE,YAAY,EAAE,GAAG,cAAc,CAAC,KAAK,aAAa,EAAE,EAAE,+DAA+D;QACxI,gCAAgC,EAAE;YAChC,MAAM,EAAE,WAAW;YACnB,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;SACjC;KACF;IACD,YAAY,EAAE,EAAE,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE;CAC9C,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { useLocale } from '../localization';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport { DefaultPalette, IButtonStyles, ~~mergeStyles~~, Theme, useTheme } from '@fluentui/react';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n\n/*\n Strings of {@link ScreenShareButton} that can be overridden.\n \n @public\n /\nexport interface ScreenShareButtonStrings {\n /* Label when button is on. /\n onLabel: string;\n /* Label when button is off. /\n offLabel: string;\n /* * Tooltip content when the button is disabled. /\n tooltipDisabledContent?: string;\n /* Tooltip content when the button is on. /\n tooltipOnContent?: string;\n /* Tooltip content when the button is off. /\n tooltipOffContent?: string;\n}\n\n/\n Props for {@link ScreenShareButton}.\n \n @public\n /\nexport interface ScreenShareButtonProps extends ControlBarButtonProps {\n /\n Utility property for using this component with `communication react eventHandlers`.\n * Maps directly to the `onClick` property.\n /\n onToggleScreenShare?: () => Promise<void>;\n\n /\n Optional strings to override in component\n /\n strings?: Partial<ScreenShareButtonStrings>;\n}\n\n/\n A button to start / stop screen sharing.\n \n Can be used with {@link ControlBar}.\n \n @public\n */\nexport const ScreenShareButton = (props: ScreenShareButtonProps): JSX.Element => {\n const localeStrings = useLocale().strings.screenShareButton;\n const strings = { ...localeStrings, ...props.strings };\n\n const theme = useTheme();\n const styles = screenshareButtonStyles(theme);\n\n const onRenderScreenShareOnIcon = (): JSX.Element => (\n <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ControlButtonScreenShareStop\" />\n );\n const onRenderScreenShareOffIcon = (): JSX.Element => (\n <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ControlButtonScreenShareStart\" />\n );\n\n return (\n <ControlBarButton\n {...props}\n ~~className~~={~~mergeStyles~~(styles, props.styles)}\n onClick={props.onToggleScreenShare ?? props.onClick}\n onRenderOnIcon={props.onRenderOnIcon ?? onRenderScreenShareOnIcon}\n onRenderOffIcon={props.onRenderOffIcon ?? onRenderScreenShareOffIcon}\n strings={strings}\n labelKey={props.labelKey ?? 'screenShareButtonLabel'}\n disabled={props.disabled}\n />\n );\n};\n\nconst screenshareButtonStyles = (theme: Theme): IButtonStyles => ({\n rootChecked: {\n background: theme.palette.themePrimary,\n color: DefaultPalette.white,\n ':focus::after': { outlineColor: `${DefaultPalette.white} !important` }, // added !important to avoid override by FluentUI button styles\n '@media (forced-colors: active)': {\n border: '1px solid',\n borderColor: theme.palette.black\n }\n },\n rootCheckedHovered: {\n background: theme.palette.themePrimary,\n color: DefaultPalette.white,\n ':focus::after': { outlineColor: `${DefaultPalette.white} !important` }, // added !important to avoid override by FluentUI button styles\n '@media (forced-colors: active)': {\n border: '1px solid',\n borderColor: theme.palette.black\n }\n },\n labelChecked: { color: DefaultPalette.white }\n});\n"]}
1	+ {"version":3,"file":"ScreenShareButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ScreenShareButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAiB,cAAc,EAAS,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACjG,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAsCjE;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;;IAC9E,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,iBAAiB,CAAC;IAC5D,MAAM,OAAO,mCAAQ,aAAa,GAAK,KAAK,CAAC,OAAO,CAAE,CAAC;IAEvD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAAG,uBAAuB,CAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,yBAAyB,GAAG,GAAgB,EAAE,CAAC,CACnD,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,8BAA8B,GAAG,CAC7F,CAAC;IACF,MAAM,0BAA0B,GAAG,GAAgB,EAAE,CAAC,CACpD,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,+BAA+B,GAAG,CAC9F,CAAC;IAEF,OAAO,CACL,oBAAC,gBAAgB,oBACX,KAAK,IACT,MAAM,EAAE,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,EAC5C,OAAO,EAAE,MAAA,KAAK,CAAC,mBAAmB,mCAAI,KAAK,CAAC,OAAO,EACnD,cAAc,EAAE,MAAA,KAAK,CAAC,cAAc,mCAAI,yBAAyB,EACjE,eAAe,EAAE,MAAA,KAAK,CAAC,eAAe,mCAAI,0BAA0B,EACpE,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,MAAA,KAAK,CAAC,QAAQ,mCAAI,wBAAwB,EACpD,QAAQ,EAAE,KAAK,CAAC,QAAQ,IACxB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,uBAAuB,GAAG,CAAC,KAAY,EAAiB,EAAE,CAAC,CAAC;IAChE,WAAW,EAAE;QACX,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;QACtC,KAAK,EAAE,cAAc,CAAC,KAAK;QAC3B,eAAe,EAAE,EAAE,YAAY,EAAE,GAAG,cAAc,CAAC,KAAK,aAAa,EAAE,EAAE,+DAA+D;QACxI,gCAAgC,EAAE;YAChC,MAAM,EAAE,WAAW;YACnB,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;SACjC;KACF;IACD,kBAAkB,EAAE;QAClB,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;QACtC,KAAK,EAAE,cAAc,CAAC,KAAK;QAC3B,eAAe,EAAE,EAAE,YAAY,EAAE,GAAG,cAAc,CAAC,KAAK,aAAa,EAAE,EAAE,+DAA+D;QACxI,gCAAgC,EAAE;YAChC,MAAM,EAAE,WAAW;YACnB,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;SACjC;KACF;IACD,YAAY,EAAE,EAAE,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE;CAC9C,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { useLocale } from '../localization';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport { DefaultPalette, IButtonStyles, mergeStyleSets, Theme, useTheme } from '@fluentui/react';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n\n/*\n Strings of {@link ScreenShareButton} that can be overridden.\n \n @public\n /\nexport interface ScreenShareButtonStrings {\n /* Label when button is on. /\n onLabel: string;\n /* Label when button is off. /\n offLabel: string;\n /* * Tooltip content when the button is disabled. /\n tooltipDisabledContent?: string;\n /* Tooltip content when the button is on. /\n tooltipOnContent?: string;\n /* Tooltip content when the button is off. /\n tooltipOffContent?: string;\n}\n\n/\n Props for {@link ScreenShareButton}.\n \n @public\n /\nexport interface ScreenShareButtonProps extends ControlBarButtonProps {\n /\n Utility property for using this component with `communication react eventHandlers`.\n * Maps directly to the `onClick` property.\n /\n onToggleScreenShare?: () => Promise<void>;\n\n /\n Optional strings to override in component\n /\n strings?: Partial<ScreenShareButtonStrings>;\n}\n\n/\n A button to start / stop screen sharing.\n \n Can be used with {@link ControlBar}.\n \n @public\n */\nexport const ScreenShareButton = (props: ScreenShareButtonProps): JSX.Element => {\n const localeStrings = useLocale().strings.screenShareButton;\n const strings = { ...localeStrings, ...props.strings };\n\n const theme = useTheme();\n const styles = screenshareButtonStyles(theme);\n\n const onRenderScreenShareOnIcon = (): JSX.Element => (\n <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ControlButtonScreenShareStop\" />\n );\n const onRenderScreenShareOffIcon = (): JSX.Element => (\n <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ControlButtonScreenShareStart\" />\n );\n\n return (\n <ControlBarButton\n {...props}\n styles={mergeStyleSets(styles, props.styles)}\n onClick={props.onToggleScreenShare ?? props.onClick}\n onRenderOnIcon={props.onRenderOnIcon ?? onRenderScreenShareOnIcon}\n onRenderOffIcon={props.onRenderOffIcon ?? onRenderScreenShareOffIcon}\n strings={strings}\n labelKey={props.labelKey ?? 'screenShareButtonLabel'}\n disabled={props.disabled}\n />\n );\n};\n\nconst screenshareButtonStyles = (theme: Theme): IButtonStyles => ({\n rootChecked: {\n background: theme.palette.themePrimary,\n color: DefaultPalette.white,\n ':focus::after': { outlineColor: `${DefaultPalette.white} !important` }, // added !important to avoid override by FluentUI button styles\n '@media (forced-colors: active)': {\n border: '1px solid',\n borderColor: theme.palette.black\n }\n },\n rootCheckedHovered: {\n background: theme.palette.themePrimary,\n color: DefaultPalette.white,\n ':focus::after': { outlineColor: `${DefaultPalette.white} !important` }, // added !important to avoid override by FluentUI button styles\n '@media (forced-colors: active)': {\n border: '1px solid',\n borderColor: theme.palette.black\n }\n },\n labelChecked: { color: DefaultPalette.white }\n});\n"]}

package/dist/dist-esm/react-components/src/components/TroubleshootingGuideErrorBar.js CHANGED Viewed

@@ -25,7 +25,7 @@ export const _TroubleshootingGuideErrorBar = (props) => {
     // Without this behaviour, this `useEffect` block would cause a render loop.
     useEffect(() => setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors)), [props.activeErrorMessages, dismissedErrors]);
     const toShow = errorsToShow(props.activeErrorMessages, dismissedErrors);
-    return (React.createElement(Stack, { "data-ui-id": "notifications-stack" }, toShow.map((error) => {
+    return (React.createElement(Stack, { "data-ui-id": "notifications-stack" }, toShow.map((error, i) => {
         const devicePermissionErrorBar = (React.createElement("div", null,
             strings[error.type],
             ' ',
@@ -38,9 +38,9 @@ export const _TroubleshootingGuideErrorBar = (props) => {
             ' ',
             onNetworkingTroubleshootingClick && (React.createElement(Link, { onClick: onNetworkingTroubleshootingClick, underline: true },
                 React.createElement("span", { className: messageBarLinkStyles(theme, true) }, troubleshootingGuideStrings.networkTroubleshootingLinkText)))));
-        return (React.createElement(MessageBar, Object.assign({}, props, { styles: messageBarStyle(theme, messageBarType(error.type)), key: error.type, messageBarType: messageBarType(error.type), messageBarIconProps: messageBarIconProps(error.type), actions: React.createElement(MessageBarButton, { text: troubleshootingGuideStrings.dismissButtonText, styles: dismissButtonStyle(theme), onClick: () => {
+        return (React.createElement(MessageBar, Object.assign({}, props, { styles: messageBarStyle(theme, messageBarType(error.type)), key: `${error.type} ${i}`, messageBarType: messageBarType(error.type), messageBarIconProps: messageBarIconProps(error.type), actions: React.createElement(MessageBarButton, { text: troubleshootingGuideStrings.dismissButtonText, styles: dismissButtonStyle(theme), onClick: () => {
                     setDismissedErrors(dismissError(dismissedErrors, error));
-                }, ariaLabel: troubleshootingGuideStrings.dismissButtonText }), isMultiline: false }), showErrorBar(error.type, devicePermissionErrorBar, networkErrorBar)));
+                }, ariaLabel: troubleshootingGuideStrings.dismissButtonText }), isMultiline: false, "aria-role": "alert", "aria-live": "assertive" }), showErrorBar(error.type, devicePermissionErrorBar, networkErrorBar)));
     })));
 };
 const showErrorBar = (errorType, devicePermissionErrorBar, networkErrorBar) => {

package/dist/dist-esm/react-components/src/components/TroubleshootingGuideErrorBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TroubleshootingGuideErrorBar.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/TroubleshootingGuideErrorBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,gBAAgB,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACtF,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AACnG,OAAO,EAEL,YAAY,EACZ,+BAA+B,EAC/B,YAAY,EACZ,mBAAmB,EACnB,cAAc,EACf,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AA+DtE;;;GAGG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,KAAyC,EAAe,EAAE;;IACtG,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,oBAAoB;IACpB,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC;IACnD,MAAM,OAAO,GAAG,MAAA,KAAK,CAAC,OAAO,mCAAI,aAAa,CAAC;IAE/C,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAmB,EAAE,CAAC,CAAC;IAE7E,MAAM,EACJ,iCAAiC,EACjC,gCAAgC,EAChC,gBAAgB,GAAG;QACjB,MAAM,EAAE,QAAQ;QAChB,UAAU,EAAE,QAAQ;KACrB,EACD,2BAA2B,EAC5B,GAAG,KAAK,CAAC;IAEV,mGAAmG;IACnG,4EAA4E;IAC5E,SAAS,CACP,GAAG,EAAE,CAAC,kBAAkB,CAAC,+BAA+B,CAAC,KAAK,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC,EACrG,CAAC,KAAK,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAC7C,CAAC;IAEF,MAAM,MAAM,GAAG,YAAY,CAAC,KAAK,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC;IAExE,OAAO,CACL,oBAAC,KAAK,kBAAY,qBAAqB,IACpC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;~~QACpB~~,MAAM,wBAAwB,GAAG,CAC/B;YACG,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC;YAAE,GAAG;YACxB,iCAAiC,IAAI,CACpC,oBAAC,IAAI,IACH,OAAO,EAAE,GAAG,EAAE;oBACZ,iCAAiC,CAAC,gBAAgB,CAAC,CAAC;gBACtD,CAAC;gBAED,8BAAM,SAAS,EAAE,oBAAoB,CAAC,KAAK,EAAE,IAAI,CAAC,IAC/C,2BAA2B,CAAC,wBAAwB,CAChD,CACF,CACR,CACG,CACP,CAAC;QAEF,MAAM,eAAe,GAAG,CACtB;YACG,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC;YAAE,GAAG;YACxB,gCAAgC,IAAI,CACnC,oBAAC,IAAI,IAAC,OAAO,EAAE,gCAAgC,EAAE,SAAS;gBACxD,8BAAM,SAAS,EAAE,oBAAoB,CAAC,KAAK,EAAE,IAAI,CAAC,IAC/C,2BAA2B,CAAC,8BAA8B,CACtD,CACF,CACR,CACG,CACP,CAAC;QAEF,OAAO,CACL,oBAAC,UAAU,oBACL,KAAK,IACT,MAAM,EAAE,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,EAC1D,GAAG,EAAE,KAAK,CAAC,IAAI,~~EACf~~,cAAc,EAAE,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,EAC1C,mBAAmB,EAAE,mBAAmB,CAAC,KAAK,CAAC,IAAI,CAAC,EACpD,OAAO,EACL,oBAAC,gBAAgB,IACf,IAAI,EAAE,2BAA2B,CAAC,iBAAiB,EACnD,MAAM,EAAE,kBAAkB,CAAC,KAAK,CAAC,EACjC,OAAO,EAAE,GAAG,EAAE;oBACZ,kBAAkB,CAAC,YAAY,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC,CAAC;gBAC3D,CAAC,EACD,SAAS,EAAE,2BAA2B,CAAC,iBAAiB,GACxD,EAEJ,WAAW,EAAE,KAAK,~~KAEjB~~,YAAY,CAAC,KAAK,CAAC,IAAI,EAAE,wBAAwB,EAAE,eAAe,CAAC,CACzD,CACd,CAAC;IACJ,CAAC,CAAC,CACI,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CACnB,SAAiB,EACjB,wBAAqC,EACrC,eAA4B,EACf,EAAE;IACf,IAAI,SAAS,KAAK,uBAAuB,EAAE,CAAC;QAC1C,OAAO,eAAe,CAAC;IACzB,CAAC;SAAM,CAAC;QACN,OAAO,wBAAwB,CAAC;IAClC,CAAC;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect, useState } from 'react';\nimport { Link, MessageBar, MessageBarButton, Stack, useTheme } from '@fluentui/react';\nimport { useLocale } from '../localization';\nimport { ErrorBarProps } from './ErrorBar';\nimport { dismissButtonStyle, messageBarStyle } from './styles/TroubleshootingGuideErrorBar.styles';\nimport {\n DismissedError,\n dismissError,\n dropDismissalsForInactiveErrors,\n errorsToShow,\n messageBarIconProps,\n messageBarType\n} from './utils';\nimport { messageBarLinkStyles } from './styles/MessageBarLink.styles';\n\n/*\n Strings for {@link _TroubleshootingGuideErrorBar}.\n \n @internal\n /\nexport interface _TroubleshootingGuideErrorBarStrings {\n devicePermissionLinkText?: string;\n networkTroubleshootingLinkText?: string;\n dismissButtonText?: string;\n}\n\n/\n Props for {@link _TroubleshootingGuideErrorBar}.\n \n @internal\n /\nexport interface _TroubleshootingGuideErrorBarProps extends ErrorBarProps {\n /\n permissions state for camera/microphone\n /\n permissionsState?: {\n camera: PermissionState;\n microphone: PermissionState;\n };\n /\n Callback you may provide to supply users with further steps to troubleshoot why they have been\n * unable to grant your site the required permissions for the call.\n \n @example\n * ```ts\n * onPermissionsTroubleshootingClick: () =>\n * window.open('https://contoso.com/permissions-troubleshooting', '_blank');\n * ```\n \n @remarks\n * if this is not supplied, the composite will not show a 'further troubleshooting' link.\n /\n onPermissionsTroubleshootingClick?: (permissionsState: {\n camera: PermissionState;\n microphone: PermissionState;\n }) => void;\n /\n Optional callback to supply users with further troubleshooting steps for network issues\n * experienced when connecting to a call.\n \n @example\n * ```ts\n * onNetworkingTroubleshootingClick?: () =>\n * window.open('https://contoso.com/network-troubleshooting', '_blank');\n * ```\n \n @remarks\n * if this is not supplied, the composite will not show a 'network troubleshooting' link.\n /\n onNetworkingTroubleshootingClick?: () => void;\n /\n strings related to trouble shooting guidance link and dismiss button\n /\n troubleshootingGuideStrings: _TroubleshootingGuideErrorBarStrings;\n}\n\n/\n @internal\n * A component to show device Permission/network connection related errors, contains link that leads to further trouble shooting guide\n */\nexport const _TroubleshootingGuideErrorBar = (props: _TroubleshootingGuideErrorBarProps): JSX.Element => {\n const theme = useTheme();\n // error bar strings\n const localeStrings = useLocale().strings.errorBar;\n const strings = props.strings ?? localeStrings;\n\n const [dismissedErrors, setDismissedErrors] = useState<DismissedError[]>([]);\n\n const {\n onPermissionsTroubleshootingClick,\n onNetworkingTroubleshootingClick,\n permissionsState = {\n camera: 'denied',\n microphone: 'denied'\n },\n troubleshootingGuideStrings\n } = props;\n\n // dropDismissalsForInactiveErrors only returns a new object if `dismissedErrors` actually changes.\n // Without this behaviour, this `useEffect` block would cause a render loop.\n useEffect(\n () => setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors)),\n [props.activeErrorMessages, dismissedErrors]\n );\n\n const toShow = errorsToShow(props.activeErrorMessages, dismissedErrors);\n\n return (\n <Stack data-ui-id=\"notifications-stack\">\n {toShow.map((error) => {\n const devicePermissionErrorBar = (\n <div>\n {strings[error.type]}{' '}\n {onPermissionsTroubleshootingClick && (\n <Link\n onClick={() => {\n onPermissionsTroubleshootingClick(permissionsState);\n }}\n >\n <span className={messageBarLinkStyles(theme, true)}>\n {troubleshootingGuideStrings.devicePermissionLinkText}\n </span>\n </Link>\n )}\n </div>\n );\n\n const networkErrorBar = (\n <div>\n {strings[error.type]}{' '}\n {onNetworkingTroubleshootingClick && (\n <Link onClick={onNetworkingTroubleshootingClick} underline>\n <span className={messageBarLinkStyles(theme, true)}>\n {troubleshootingGuideStrings.networkTroubleshootingLinkText}\n </span>\n </Link>\n )}\n </div>\n );\n\n return (\n <MessageBar\n {...props}\n styles={messageBarStyle(theme, messageBarType(error.type))}\n key={error.type}\n messageBarType={messageBarType(error.type)}\n messageBarIconProps={messageBarIconProps(error.type)}\n actions={\n <MessageBarButton\n text={troubleshootingGuideStrings.dismissButtonText}\n styles={dismissButtonStyle(theme)}\n onClick={() => {\n setDismissedErrors(dismissError(dismissedErrors, error));\n }}\n ariaLabel={troubleshootingGuideStrings.dismissButtonText}\n />\n }\n isMultiline={false}\n >\n {showErrorBar(error.type, devicePermissionErrorBar, networkErrorBar)}\n </MessageBar>\n );\n })}\n </Stack>\n );\n};\n\nconst showErrorBar = (\n errorType: string,\n devicePermissionErrorBar: JSX.Element,\n networkErrorBar: JSX.Element\n): JSX.Element => {\n if (errorType === 'callNetworkQualityLow') {\n return networkErrorBar;\n } else {\n return devicePermissionErrorBar;\n }\n};\n"]}
1	+ {"version":3,"file":"TroubleshootingGuideErrorBar.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/TroubleshootingGuideErrorBar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect, useState } from 'react';\nimport { Link, MessageBar, MessageBarButton, Stack, useTheme } from '@fluentui/react';\nimport { useLocale } from '../localization';\nimport { ErrorBarProps } from './ErrorBar';\nimport { dismissButtonStyle, messageBarStyle } from './styles/TroubleshootingGuideErrorBar.styles';\nimport {\n DismissedError,\n dismissError,\n dropDismissalsForInactiveErrors,\n errorsToShow,\n messageBarIconProps,\n messageBarType\n} from './utils';\nimport { messageBarLinkStyles } from './styles/MessageBarLink.styles';\n\n/*\n Strings for {@link _TroubleshootingGuideErrorBar}.\n \n @internal\n /\nexport interface _TroubleshootingGuideErrorBarStrings {\n devicePermissionLinkText?: string;\n networkTroubleshootingLinkText?: string;\n dismissButtonText?: string;\n}\n\n/\n Props for {@link _TroubleshootingGuideErrorBar}.\n \n @internal\n /\nexport interface _TroubleshootingGuideErrorBarProps extends ErrorBarProps {\n /\n permissions state for camera/microphone\n /\n permissionsState?: {\n camera: PermissionState;\n microphone: PermissionState;\n };\n /\n Callback you may provide to supply users with further steps to troubleshoot why they have been\n * unable to grant your site the required permissions for the call.\n \n @example\n * ```ts\n * onPermissionsTroubleshootingClick: () =>\n * window.open('https://contoso.com/permissions-troubleshooting', '_blank');\n * ```\n \n @remarks\n * if this is not supplied, the composite will not show a 'further troubleshooting' link.\n /\n onPermissionsTroubleshootingClick?: (permissionsState: {\n camera: PermissionState;\n microphone: PermissionState;\n }) => void;\n /\n Optional callback to supply users with further troubleshooting steps for network issues\n * experienced when connecting to a call.\n \n @example\n * ```ts\n * onNetworkingTroubleshootingClick?: () =>\n * window.open('https://contoso.com/network-troubleshooting', '_blank');\n * ```\n \n @remarks\n * if this is not supplied, the composite will not show a 'network troubleshooting' link.\n /\n onNetworkingTroubleshootingClick?: () => void;\n /\n strings related to trouble shooting guidance link and dismiss button\n /\n troubleshootingGuideStrings: _TroubleshootingGuideErrorBarStrings;\n}\n\n/\n @internal\n * A component to show device Permission/network connection related errors, contains link that leads to further trouble shooting guide\n */\nexport const _TroubleshootingGuideErrorBar = (props: _TroubleshootingGuideErrorBarProps): JSX.Element => {\n const theme = useTheme();\n // error bar strings\n const localeStrings = useLocale().strings.errorBar;\n const strings = props.strings ?? localeStrings;\n\n const [dismissedErrors, setDismissedErrors] = useState<DismissedError[]>([]);\n\n const {\n onPermissionsTroubleshootingClick,\n onNetworkingTroubleshootingClick,\n permissionsState = {\n camera: 'denied',\n microphone: 'denied'\n },\n troubleshootingGuideStrings\n } = props;\n\n // dropDismissalsForInactiveErrors only returns a new object if `dismissedErrors` actually changes.\n // Without this behaviour, this `useEffect` block would cause a render loop.\n useEffect(\n () => setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors)),\n [props.activeErrorMessages, dismissedErrors]\n );\n\n const toShow = errorsToShow(props.activeErrorMessages, dismissedErrors);\n\n return (\n <Stack data-ui-id=\"notifications-stack\">\n {toShow.map((error, i) => {\n const devicePermissionErrorBar = (\n <div>\n {strings[error.type]}{' '}\n {onPermissionsTroubleshootingClick && (\n <Link\n onClick={() => {\n onPermissionsTroubleshootingClick(permissionsState);\n }}\n >\n <span className={messageBarLinkStyles(theme, true)}>\n {troubleshootingGuideStrings.devicePermissionLinkText}\n </span>\n </Link>\n )}\n </div>\n );\n\n const networkErrorBar = (\n <div>\n {strings[error.type]}{' '}\n {onNetworkingTroubleshootingClick && (\n <Link onClick={onNetworkingTroubleshootingClick} underline>\n <span className={messageBarLinkStyles(theme, true)}>\n {troubleshootingGuideStrings.networkTroubleshootingLinkText}\n </span>\n </Link>\n )}\n </div>\n );\n\n return (\n <MessageBar\n {...props}\n styles={messageBarStyle(theme, messageBarType(error.type))}\n key={`${error.type} ${i}`}\n messageBarType={messageBarType(error.type)}\n messageBarIconProps={messageBarIconProps(error.type)}\n actions={\n <MessageBarButton\n text={troubleshootingGuideStrings.dismissButtonText}\n styles={dismissButtonStyle(theme)}\n onClick={() => {\n setDismissedErrors(dismissError(dismissedErrors, error));\n }}\n ariaLabel={troubleshootingGuideStrings.dismissButtonText}\n />\n }\n isMultiline={false}\n aria-role=\"alert\"\n aria-live=\"assertive\"\n >\n {showErrorBar(error.type, devicePermissionErrorBar, networkErrorBar)}\n </MessageBar>\n );\n })}\n </Stack>\n );\n};\n\nconst showErrorBar = (\n errorType: string,\n devicePermissionErrorBar: JSX.Element,\n networkErrorBar: JSX.Element\n): JSX.Element => {\n if (errorType === 'callNetworkQualityLow') {\n return networkErrorBar;\n } else {\n return devicePermissionErrorBar;\n }\n};\n"]}

package/dist/dist-esm/react-components/src/localization/locales/en-US/strings.json CHANGED Viewed

@@ -5,9 +5,12 @@
         "removeButtonLabel": "Remove",
         "sharingIconLabel": "Sharing",
         "mutedIconLabel": "Muted",
+        "handRaisedIconLabel": "Hand raised - Position {position}",
         "displayNamePlaceholder": "Unnamed participant",
         "participantStateRinging": "Calling...",
         "participantStateHold": "On hold",
+        "participantItemAriaLabel": "{displayName}, {handRaisedState}, {mutedState}, {sharingState}, {connectionState}",
+        "participantItemWithMoreOptionsAriaLabel": "{displayName}, {handRaisedState}, {mutedState}, {sharingState}, {connectionState}, More Options",
         "attendeeRole": "Attendee"
     },
     "ParticipantList": {

package/dist/dist-esm/react-composites/src/composites/CallComposite/Strings.d.ts CHANGED Viewed

@@ -358,6 +358,10 @@ export interface CallCompositeStrings {
      * Aria label for video effects pane
      */
     videoEffectsPaneAriaLabel: string;
+    /**
+     * Label for the button to open effects
+     */
+    configurationPageCameraIsLoadingLabel?: string;
     /**
      * Label for the button to open effects
      */