@azure/communication-react 1.21.0 → 1.22.0-alpha-202411190017

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

@@ -1 +1 @@
-{"version":3,"file":"ParticipantItem.js","sourceRoot":"","sources":["../../../../../preprocess-dist/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 { ContextualMenu, DirectionalHint, Icon, IContextualMenuItem, IStyle, mergeStyles, Persona, PersonaPresence, PersonaSize, Stack, Text } 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 { displayNoneStyle, iconContainerStyle, iconStyles, meContainerStyle, menuButtonContainerStyle, participantItemContainerStyle, participantStateStringStyles } 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  const strings = {\n    ...localeStrings,\n    ...props.strings\n  };\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  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  const avatar = onRenderAvatar ? onRenderAvatar(userId ?? '', avatarOptions) : <Persona className={mergeStyles({\n    // Prevents persona text from being vertically truncated if a global line height is less than 1.15.\n    lineHeight: '1.15rem'\n  }, styles?.avatar)} {...avatarOptions} />;\n  const meTextStyle = useMemo(() => mergeStyles(meContainerStyle, {\n    color: theme.palette.neutralSecondary\n  }, styles?.me), [theme.palette.neutralSecondary, styles?.me]);\n  const contextualMenuStyle = useMemo(() => mergeStyles({\n    background: theme.palette.neutralLighterAlt\n  }, styles?.menu), [theme.palette.neutralLighterAlt, styles?.menu]);\n  const infoContainerStyle = useMemo(() => mergeStyles(iconContainerStyle, {\n    color: theme.palette.neutralSecondary,\n    marginLeft: 'auto'\n  }, styles?.iconContainer), [theme.palette.neutralSecondary, styles?.iconContainer]);\n  const onDismissMenu = (): void => {\n    setItemHovered(false);\n    setMenuHidden(true);\n  };\n  const menuButton = useMemo(() => <Stack horizontal={true} horizontalAlign=\"end\" className={mergeStyles(menuButtonContainerStyle, {\n    color: theme.palette.neutralPrimary\n  })} title={strings.menuTitle} data-ui-id={ids.participantItemMenuButton}>\n        <Icon iconName=\"ParticipantItemOptionsHovered\" className={mergeStyles(iconStyles, !showMenuIcon ? displayNoneStyle : {})} />\n      </Stack>, [theme.palette.neutralPrimary, strings.menuTitle, ids.participantItemMenuButton, showMenuIcon]);\n  return <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({\n    clickable: !!menuItems && menuItems.length > 0\n  }, theme), styles?.root)} onMouseEnter={() => setItemHovered(true)} onMouseLeave={() => setItemHovered(false)} onClick={() => {\n    if (!participantStateString) {\n      setItemHovered(true);\n      setMenuHidden(false);\n      onClick?.(props);\n    }\n    if (!menuHidden) {\n      onDismissMenu();\n    }\n  }} tabIndex={0}>\n      <Stack horizontal className={mergeStyles({\n      flexGrow: 1,\n      maxWidth: '100%',\n      alignItems: 'center'\n    })} id={uniqueId} aria-labelledby={`${props.ariaLabelledBy} ${uniqueId}`}>\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 ? <Text data-ui-id=\"participant-item-state-string\" className={mergeStyles(participantStateStringStyles)}>\n              {participantStateString}\n            </Text> : <>\n              {menuItems && menuItems.length > 0 && <>\n                  {menuButton}\n                  <ContextualMenu items={menuItems} hidden={menuHidden} target={containerRef} onItemClick={onDismissMenu} onDismiss={onDismissMenu} directionalHint={DirectionalHint.bottomRightEdge} className={contextualMenuStyle} calloutProps={{\n              preventDismissOnEvent\n            }} />\n                </>}\n            </>}\n        </Stack>\n      </Stack>\n    </div>;\n};\nconst participantStateStringTrampoline = (props: ParticipantItemProps, strings: ParticipantItemStrings): string | undefined => {\n  return props.participantState === 'EarlyMedia' || props.participantState === 'Ringing' ? strings?.participantStateRinging : props.participantState === 'Hold' ? strings?.participantStateHold : undefined;\n  return undefined;\n};"]}
+{"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"]}

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

@@ -20,6 +20,17 @@ export interface ParticipantListStyles extends BaseCustomStyles {
     /** Styles for the {@link ParticipantList} {@link ParticipantItem}. */
     participantItemStyles?: ParticipantListItemStyles;
 }
+/**
+ * Strings for the {@link ParticipantList}.
+ *
+ * @beta
+ */
+export interface ParticipantListStrings {
+    /**
+     * String for rendering the count of participants not contained in the displayed participant list
+     */
+    overflowParticipantCount?: string;
+}
 /**
  * A callback for providing custom menu items for each participant in {@link ParticipantList}.
  *
@@ -57,6 +68,10 @@ export type ParticipantListProps = {
     styles?: ParticipantListStyles;
     /** Optional value to determine if the tooltip should be shown for participants or not */
     showParticipantOverflowTooltip?: boolean;
+    /** Total number of people in the call. This number can be larger than the remote participant count. */
+    totalParticipantCount?: number;
+    /** Strings for the participant list */
+    strings?: ParticipantListStrings;
     /** Optional aria-labelledby prop that prefixes each ParticipantItem aria-label */
     participantAriaLabelledBy?: string;
     /** List of pinned participants */

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

@@ -19,43 +19,37 @@ const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvat
     const menuItems = createParticipantMenuItems && createParticipantMenuItems(participant);
     const formatDisplayName = (displayName) => {
         if (displayName && strings.attendeeRole) {
-            return _formatString(displayName, {
-                AttendeeRole: strings.attendeeRole
-            });
+            return _formatString(displayName, { AttendeeRole: strings.attendeeRole });
         }
         return displayName;
     };
     const displayName = formatDisplayName(participant.displayName);
     const callingPalette = theme.callingPalette;
     const isPinned = pinnedParticipants && (pinnedParticipants === null || pinnedParticipants === void 0 ? void 0 : pinnedParticipants.includes(participant.userId));
-    const onRenderIcon = (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.isScreenSharing) || (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.isMuted) || (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.raisedHand) || isPinned ? () => {
-        var _a;
-        return React.createElement(Stack, { horizontal: true, tokens: {
-                childrenGap: '0.5rem'
-            } },
-            callingParticipant.raisedHand && React.createElement(Stack, { horizontal: true, tokens: {
-                    childrenGap: '0.2rem'
-                }, style: {
-                    alignItems: 'center',
-                    padding: '0.1rem 0.2rem',
-                    backgroundColor: theme === null || theme === void 0 ? void 0 : theme.palette.neutralLighter,
-                    borderRadius: '0.3rem'
-                } },
-                callingParticipant.raisedHand.raisedHandOrderPosition && React.createElement(Stack.Item, null,
-                    React.createElement(Text, null, (_a = callingParticipant.raisedHand) === null || _a === void 0 ? void 0 : _a.raisedHandOrderPosition)),
-                React.createElement(Stack.Item, null,
-                    React.createElement(RaisedHandIcon, null))),
-            callingParticipant.isScreenSharing && React.createElement(Icon, { iconName: "ParticipantItemScreenShareStart", className: iconStyles, ariaLabel: strings.sharingIconLabel }),
-            callingParticipant.isMuted && React.createElement(Icon, { iconName: "ParticipantItemMicOff", className: iconStyles, ariaLabel: strings.mutedIconLabel }),
-            callingParticipant.spotlight && React.createElement(Icon, { iconName: "ParticipantItemSpotlighted", className: iconStyles }),
-            isPinned && React.createElement(Icon, { iconName: "ParticipantItemPinned", className: iconStyles }));
-    } : () => null;
-    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 onRenderIcon = (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.isScreenSharing) || (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.isMuted) || (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.raisedHand) || isPinned
+        ? () => {
+            var _a;
+            return (React.createElement(Stack, { horizontal: true, tokens: { childrenGap: '0.5rem' } },
+                callingParticipant.raisedHand && (React.createElement(Stack, { horizontal: true, tokens: { childrenGap: '0.2rem' }, style: {
+                        alignItems: 'center',
+                        padding: '0.1rem 0.2rem',
+                        backgroundColor: theme === null || theme === void 0 ? void 0 : theme.palette.neutralLighter,
+                        borderRadius: '0.3rem'
+                    } },
+                    callingParticipant.raisedHand.raisedHandOrderPosition && (React.createElement(Stack.Item, null,
+                        React.createElement(Text, null, (_a = callingParticipant.raisedHand) === null || _a === void 0 ? void 0 : _a.raisedHandOrderPosition))),
+                    React.createElement(Stack.Item, null,
+                        React.createElement(RaisedHandIcon, null)))),
+                callingParticipant.isScreenSharing && (React.createElement(Icon, { iconName: "ParticipantItemScreenShareStart", className: iconStyles, ariaLabel: strings.sharingIconLabel })),
+                callingParticipant.isMuted && (React.createElement(Icon, { iconName: "ParticipantItemMicOff", className: iconStyles, ariaLabel: strings.mutedIconLabel })),
+                callingParticipant.spotlight && React.createElement(Icon, { iconName: "ParticipantItemSpotlighted", className: iconStyles }),
+                isPinned && React.createElement(Icon, { iconName: "ParticipantItemPinned", className: iconStyles })));
+        }
+        : () => null;
+    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 }));
 };
 /**
  * Sort participants by raised hand order position
@@ -87,7 +81,7 @@ const getParticipantsForDefaultRender = (participants, excludeMe, myUserId) => {
     if (!excludeMe || !myUserId) {
         return [...participants];
     }
-    const userIndex = participants.map(p => p.userId).indexOf(myUserId);
+    const userIndex = participants.map((p) => p.userId).indexOf(myUserId);
     if (userIndex === -1) {
         return [...participants];
     }
@@ -103,11 +97,17 @@ const getParticipantsForDefaultRender = (participants, excludeMe, myUserId) => {
  * @public
  */
 export const ParticipantList = (props) => {
-    var _a, _b, _c, _d;
-    const { excludeMe = false, myUserId, participants, onRemoveParticipant, onRenderAvatar, onRenderParticipant, onFetchParticipantMenuItems, showParticipantOverflowTooltip, participantAriaLabelledBy, pinnedParticipants } = props;
+    var _a, _b, _c, _d, _e;
+    const { excludeMe = false, myUserId, participants, onRemoveParticipant, onRenderAvatar, onRenderParticipant, onFetchParticipantMenuItems, showParticipantOverflowTooltip, 
+    /* @conditional-compile-remove(total-participant-count) */
+    totalParticipantCount, 
+    /* @conditional-compile-remove(total-participant-count) */
+    strings, participantAriaLabelledBy, pinnedParticipants } = props;
     const theme = useTheme();
     const ids = useIdentifiers();
     const participantItemStrings = useLocale().strings.participantItem;
+    /* @conditional-compile-remove(total-participant-count) */
+    const participantListStrings = useLocale().strings.ParticipantList;
     const displayedParticipants = useMemo(() => {
         return onRenderParticipant ? participants : getParticipantsForDefaultRender(participants, excludeMe, myUserId);
     }, [participants, excludeMe, myUserId, onRenderParticipant]);
@@ -126,11 +126,7 @@ export const ParticipantList = (props) => {
                 },
                 iconProps: {
                     iconName: 'ContextMenuRemoveParticipant',
-                    styles: {
-                        root: {
-                            lineHeight: 0
-                        }
-                    }
+                    styles: { root: { lineHeight: 0 } }
                 },
                 'data-ui-id': ids.participantListRemoveParticipantButton
             });
@@ -139,8 +135,25 @@ export const ParticipantList = (props) => {
             menuItems = onFetchParticipantMenuItems(participant.userId, myUserId, menuItems);
         }
         return menuItems;
-    }, [ids.participantListRemoveParticipantButton, myUserId, onFetchParticipantMenuItems, onRemoveParticipant, (_b = (_a = props.styles) === null || _a === void 0 ? void 0 : _a.participantItemStyles) === null || _b === void 0 ? void 0 : _b.participantSubMenuItemsStyles, participantItemStrings.removeButtonLabel]);
+    }, [
+        ids.participantListRemoveParticipantButton,
+        myUserId,
+        onFetchParticipantMenuItems,
+        onRemoveParticipant,
+        (_b = (_a = props.styles) === null || _a === void 0 ? void 0 : _a.participantItemStyles) === null || _b === void 0 ? void 0 : _b.participantSubMenuItemsStyles,
+        participantItemStrings.removeButtonLabel
+    ]);
     const participantItemStyles = useMemo(() => { var _a; return merge(participantListItemStyle, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.participantItemStyles); }, [(_c = props.styles) === null || _c === void 0 ? void 0 : _c.participantItemStyles]);
-    return React.createElement(Stack, { "data-ui-id": ids.participantList, className: mergeStyles(participantListStyle, (_d = props.styles) === null || _d === void 0 ? void 0 : _d.root), role: 'menu' }, displayedParticipants.map((participant) => onRenderParticipant ? onRenderParticipant(participant) : onRenderParticipantDefault(participant, participantItemStrings, myUserId, onRenderAvatar, createParticipantMenuItems, participantItemStyles, props.onParticipantClick, showParticipantOverflowTooltip, participantAriaLabelledBy, theme, pinnedParticipants)));
+    /* @conditional-compile-remove(total-participant-count) */
+    const overflowParticipantCountString = (_d = strings === null || strings === void 0 ? void 0 : strings.overflowParticipantCount) !== null && _d !== void 0 ? _d : participantListStrings === null || participantListStrings === void 0 ? void 0 : participantListStrings.overflowParticipantCount;
+    return (React.createElement(Stack, { "data-ui-id": ids.participantList, className: mergeStyles(participantListStyle, (_e = props.styles) === null || _e === void 0 ? void 0 : _e.root), role: 'menu' },
+        displayedParticipants.map((participant) => onRenderParticipant
+            ? onRenderParticipant(participant)
+            : onRenderParticipantDefault(participant, participantItemStrings, myUserId, onRenderAvatar, createParticipantMenuItems, participantItemStyles, props.onParticipantClick, showParticipantOverflowTooltip, participantAriaLabelledBy, theme, pinnedParticipants)),
+        /* @conditional-compile-remove(total-participant-count) */ overflowParticipantCountString &&
+            totalParticipantCount &&
+            totalParticipantCount > displayedParticipants.length && (React.createElement(Text, { style: { fontWeight: 400, margin: '0.5rem' } }, _formatString(overflowParticipantCountString, {
+            overflowCount: `${totalParticipantCount - displayedParticipants.length}`
+        })))));
 };
 //# sourceMappingURL=ParticipantList.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ParticipantList.js","sourceRoot":"","sources":["../../../../../preprocess-dist/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 { Icon, IContextualMenuItem, IContextualMenuItemStyles, merge, mergeStyles, PersonaPresence, Stack, Theme } 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 { BaseCustomStyles, CallParticipantListParticipant, OnRenderAvatarCallback, ParticipantListParticipant } 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 * A callback for providing custom menu items for each participant in {@link ParticipantList}.\n *\n * @public\n */\nexport type ParticipantMenuItemsCallback = (participantUserId: string, userId?: string, defaultMenuItems?: IContextualMenuItem[]) => 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  /** Optional aria-labelledby prop that prefixes each ParticipantItem aria-label */\n  participantAriaLabelledBy?: string;\n  /** List of pinned participants */\n  pinnedParticipants?: string[];\n};\nconst onRenderParticipantDefault = (participant: ParticipantListParticipant, strings: ParticipantItemStrings, myUserId?: string, onRenderAvatar?: OnRenderAvatarCallback, createParticipantMenuItems?: (participant: ParticipantListParticipant) => IContextualMenuItem[], styles?: ParticipantListItemStyles, onParticipantClick?: (participant?: ParticipantListParticipant) => void, showParticipantOverflowTooltip?: boolean, participantAriaLabelledBy?: string, theme?: Theme, pinnedParticipants?: string[]): JSX.Element | null => {\n  const callingParticipant = participant as CallParticipantListParticipant;\n  let presence: PersonaPresence | undefined = undefined;\n  if (callingParticipant) {\n    presence = PersonaPresence.none;\n  }\n  const menuItems = createParticipantMenuItems && createParticipantMenuItems(participant);\n  const formatDisplayName = (displayName?: string): string | undefined => {\n    if (displayName && strings.attendeeRole) {\n      return _formatString(displayName, {\n        AttendeeRole: strings.attendeeRole\n      });\n    }\n    return displayName;\n  };\n  const displayName = formatDisplayName(participant.displayName);\n  const callingPalette = (theme as unknown as CallingTheme).callingPalette;\n  const isPinned = pinnedParticipants && pinnedParticipants?.includes(participant.userId);\n  const onRenderIcon = callingParticipant?.isScreenSharing || callingParticipant?.isMuted || callingParticipant?.raisedHand || isPinned ? () => <Stack horizontal={true} tokens={{\n    childrenGap: '0.5rem'\n  }}>\n            {callingParticipant.raisedHand && <Stack horizontal={true} tokens={{\n      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                {callingParticipant.raisedHand.raisedHandOrderPosition && <Stack.Item>\n                    <Text>{callingParticipant.raisedHand?.raisedHandOrderPosition}</Text>\n                  </Stack.Item>}\n                <Stack.Item>\n                  <RaisedHandIcon />\n                </Stack.Item>\n              </Stack>}\n            {callingParticipant.isScreenSharing && <Icon iconName=\"ParticipantItemScreenShareStart\" className={iconStyles} ariaLabel={strings.sharingIconLabel} />}\n            {callingParticipant.isMuted && <Icon iconName=\"ParticipantItemMicOff\" className={iconStyles} ariaLabel={strings.mutedIconLabel} />}\n            {callingParticipant.spotlight && <Icon iconName=\"ParticipantItemSpotlighted\" className={iconStyles} />}\n\n            {isPinned && <Icon iconName=\"ParticipantItemPinned\" className={iconStyles} />}\n          </Stack> : () => null;\n  const onRenderAvatarWithRaiseHand = callingParticipant?.raisedHand && onRenderAvatar ? (userId?: string, options?: CustomAvatarOptions, defaultOnRender?: (props: CustomAvatarOptions) => JSX.Element) => onRenderAvatar(userId, {\n    ...options,\n    styles: {\n      root: {\n        border: callingPalette.raiseHandGold\n      }\n    }\n  }, defaultOnRender) : onRenderAvatar;\n  return <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?.(participant) : undefined} showParticipantOverflowTooltip={showParticipantOverflowTooltip} participantState={callingParticipant.state} ariaLabelledBy={participantAriaLabelledBy} />;\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  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};\nconst getParticipantsForDefaultRender = (participants: ParticipantListParticipant[], excludeMe: boolean, myUserId: string | undefined): ParticipantListParticipant[] => {\n  if (!excludeMe || !myUserId) {\n    return [...participants];\n  }\n  const userIndex = participants.map(p => p.userId).indexOf(myUserId);\n  if (userIndex === -1) {\n    return [...participants];\n  }\n  const remoteParticipants = [...participants];\n  remoteParticipants.splice(userIndex, 1);\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    participantAriaLabelledBy,\n    pinnedParticipants\n  } = props;\n  const theme = useTheme();\n  const ids = useIdentifiers();\n  const participantItemStrings = useLocale().strings.participantItem;\n  const displayedParticipants: ParticipantListParticipant[] = useMemo(() => {\n    return onRenderParticipant ? participants : getParticipantsForDefaultRender(participants, excludeMe, myUserId);\n  }, [participants, excludeMe, myUserId, onRenderParticipant]);\n  sortParticipants(displayedParticipants);\n  const createParticipantMenuItems = useCallback((participant: ParticipantListParticipant): IContextualMenuItem[] => {\n    let menuItems: IContextualMenuItem[] = [];\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: {\n            root: {\n              lineHeight: 0\n            }\n          }\n        },\n        'data-ui-id': ids.participantListRemoveParticipantButton\n      });\n    }\n    if (onFetchParticipantMenuItems) {\n      menuItems = onFetchParticipantMenuItems(participant.userId, myUserId, menuItems);\n    }\n    return menuItems;\n  }, [ids.participantListRemoveParticipantButton, myUserId, onFetchParticipantMenuItems, onRemoveParticipant, props.styles?.participantItemStyles?.participantSubMenuItemsStyles, participantItemStrings.removeButtonLabel]);\n  const participantItemStyles = useMemo(() => merge(participantListItemStyle, props.styles?.participantItemStyles), [props.styles?.participantItemStyles]);\n  return <Stack data-ui-id={ids.participantList} className={mergeStyles(participantListStyle, props.styles?.root)} role={'menu'}>\n      {displayedParticipants.map((participant: ParticipantListParticipant) => onRenderParticipant ? onRenderParticipant(participant) : onRenderParticipantDefault(participant, participantItemStrings, myUserId, onRenderAvatar, createParticipantMenuItems, participantItemStyles, props.onParticipantClick, showParticipantOverflowTooltip, participantAriaLabelledBy, theme, pinnedParticipants))}\n      {}\n    </Stack>;\n};"]}
+{"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"]}

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

@@ -28,7 +28,7 @@ export const ParticipantsButton = (props) => {
     const { callInvitationURL, styles, onMuteAll, onRenderIcon, onRenderParticipantList, participants, myUserId, excludeMe, onRenderParticipant, onRenderAvatar, onRemoveParticipant, onFetchParticipantMenuItems, showParticipantOverflowTooltip } = props;
     const disabled = props.disabled;
     const [copyInviteLinkAnnouncerStrings, setCopyInviteLinkAnnouncerStrings] = useState('');
-    const onRenderPeopleIcon = () => React.createElement(_HighContrastAwareIcon, { disabled: disabled, iconName: "ControlButtonParticipants" });
+    const onRenderPeopleIcon = () => (React.createElement(_HighContrastAwareIcon, { disabled: disabled, iconName: "ControlButtonParticipants" }));
     const ids = useIdentifiers();
     const onMuteAllCallback = useCallback(() => {
         if (onMuteAll) {
@@ -37,8 +37,18 @@ export const ParticipantsButton = (props) => {
     }, [onMuteAll]);
     const defaultParticipantList = useCallback(() => {
         var _a;
-        return React.createElement(ParticipantList, { participants: participants, myUserId: myUserId, excludeMe: excludeMe, onRenderParticipant: onRenderParticipant, onRenderAvatar: onRenderAvatar, onRemoveParticipant: onRemoveParticipant, onFetchParticipantMenuItems: onFetchParticipantMenuItems, styles: (_a = styles === null || styles === void 0 ? void 0 : styles.menuStyles) === null || _a === void 0 ? void 0 : _a.participantListStyles, showParticipantOverflowTooltip: showParticipantOverflowTooltip });
-    }, [excludeMe, myUserId, onRemoveParticipant, onRenderAvatar, onRenderParticipant, participants, (_a = styles === null || styles === void 0 ? void 0 : styles.menuStyles) === null || _a === void 0 ? void 0 : _a.participantListStyles, onFetchParticipantMenuItems, showParticipantOverflowTooltip]);
+        return (React.createElement(ParticipantList, { participants: participants, myUserId: myUserId, excludeMe: excludeMe, onRenderParticipant: onRenderParticipant, onRenderAvatar: onRenderAvatar, onRemoveParticipant: onRemoveParticipant, onFetchParticipantMenuItems: onFetchParticipantMenuItems, styles: (_a = styles === null || styles === void 0 ? void 0 : styles.menuStyles) === null || _a === void 0 ? void 0 : _a.participantListStyles, showParticipantOverflowTooltip: showParticipantOverflowTooltip }));
+    }, [
+        excludeMe,
+        myUserId,
+        onRemoveParticipant,
+        onRenderAvatar,
+        onRenderParticipant,
+        participants,
+        (_a = styles === null || styles === void 0 ? void 0 : styles.menuStyles) === null || _a === void 0 ? void 0 : _a.participantListStyles,
+        onFetchParticipantMenuItems,
+        showParticipantOverflowTooltip
+    ]);
     const onCopyCallback = useCallback(() => {
         if (callInvitationURL) {
             return copy(callInvitationURL);
@@ -69,25 +79,28 @@ export const ParticipantsButton = (props) => {
                 key: 'participantListMenuItemKey',
                 onRender: onRenderParticipantList !== null && onRenderParticipantList !== void 0 ? onRenderParticipantList : defaultParticipantList
             });
-            items.push({
-                key: 'participantsDivider1',
-                itemType: ContextualMenuItemType.Divider
-            });
+            items.push({ key: 'participantsDivider1', itemType: ContextualMenuItemType.Divider });
             if (onMuteAll) {
                 items.push({
                     key: 'muteAllKey',
                     text: strings.muteAllButtonLabel,
                     title: strings.muteAllButtonLabel,
                     styles: (_a = styles === null || styles === void 0 ? void 0 : styles.menuStyles) === null || _a === void 0 ? void 0 : _a.menuItemStyles,
-                    iconProps: {
-                        iconName: 'MicOff2'
-                    },
+                    iconProps: { iconName: 'MicOff2' },
                     onClick: onMuteAllCallback
                 });
             }
         }
         return items;
-    }, [participantCount, onRenderParticipantList, defaultParticipantList, onMuteAll, strings.muteAllButtonLabel, (_b = styles === null || styles === void 0 ? void 0 : styles.menuStyles) === null || _b === void 0 ? void 0 : _b.menuItemStyles, onMuteAllCallback]);
+    }, [
+        participantCount,
+        onRenderParticipantList,
+        defaultParticipantList,
+        onMuteAll,
+        strings.muteAllButtonLabel,
+        (_b = styles === null || styles === void 0 ? void 0 : styles.menuStyles) === null || _b === void 0 ? void 0 : _b.menuItemStyles,
+        onMuteAllCallback
+    ]);
     const defaultMenuProps = useMemo(() => {
         var _a, _b;
         const menuProps = {
@@ -100,22 +113,16 @@ export const ParticipantsButton = (props) => {
             }
         };
         if (participantCount > 0) {
-            const participantIds = participants.map(p => p.userId);
+            const participantIds = participants.map((p) => p.userId);
             let participantCountWithoutMe = participantIds.length;
             if (excludeMe) {
                 participantCountWithoutMe -= 1;
             }
             menuProps.items.push({
                 key: 'participantCountKey',
-                name: _formatString(strings.participantsListButtonLabel, {
-                    numParticipants: `${participantCountWithoutMe}`
-                }),
-                itemProps: {
-                    styles: (_a = styles === null || styles === void 0 ? void 0 : styles.menuStyles) === null || _a === void 0 ? void 0 : _a.menuItemStyles
-                },
-                iconProps: {
-                    iconName: 'People'
-                },
+                name: _formatString(strings.participantsListButtonLabel, { numParticipants: `${participantCountWithoutMe}` }),
+                itemProps: { styles: (_a = styles === null || styles === void 0 ? void 0 : styles.menuStyles) === null || _a === void 0 ? void 0 : _a.menuItemStyles },
+                iconProps: { iconName: 'People' },
                 subMenuProps: {
                     items: generateDefaultParticipantsSubMenuProps(),
                     calloutProps: {
@@ -142,12 +149,8 @@ export const ParticipantsButton = (props) => {
                 key: 'InviteLinkKey',
                 name: strings.copyInviteLinkButtonLabel,
                 title: strings.copyInviteLinkButtonLabel,
-                itemProps: {
-                    styles: (_b = styles === null || styles === void 0 ? void 0 : styles.menuStyles) === null || _b === void 0 ? void 0 : _b.menuItemStyles
-                },
-                iconProps: {
-                    iconName: 'Link'
-                },
+                itemProps: { styles: (_b = styles === null || styles === void 0 ? void 0 : styles.menuStyles) === null || _b === void 0 ? void 0 : _b.menuItemStyles },
+                iconProps: { iconName: 'Link' },
                 onClick: () => {
                     onCopyCallback();
                     toggleAnnouncerString();
@@ -155,11 +158,22 @@ export const ParticipantsButton = (props) => {
             });
         }
         return menuProps;
-    }, [strings.menuHeader, strings.participantsListButtonLabel, strings.copyInviteLinkButtonLabel, styles === null || styles === void 0 ? void 0 : styles.menuStyles, participantCount, callInvitationURL, participants, excludeMe, ids.participantButtonPeopleMenuItem, generateDefaultParticipantsSubMenuProps, onCopyCallback, toggleAnnouncerString]);
-    return React.createElement(React.Fragment, null,
+    }, [
+        strings.menuHeader,
+        strings.participantsListButtonLabel,
+        strings.copyInviteLinkButtonLabel,
+        styles === null || styles === void 0 ? void 0 : styles.menuStyles,
+        participantCount,
+        callInvitationURL,
+        participants,
+        excludeMe,
+        ids.participantButtonPeopleMenuItem,
+        generateDefaultParticipantsSubMenuProps,
+        onCopyCallback,
+        toggleAnnouncerString
+    ]);
+    return (React.createElement(React.Fragment, null,
         React.createElement(Announcer, { announcementString: copyInviteLinkAnnouncerStrings, ariaLive: 'polite' }),
-        React.createElement(ControlBarButton, Object.assign({}, props, { disabled: disabled, menuProps: (_c = props.menuProps) !== null && _c !== void 0 ? _c : defaultMenuProps, menuIconProps: {
-                hidden: true
-            }, onRenderIcon: onRenderIcon !== null && onRenderIcon !== void 0 ? onRenderIcon : onRenderPeopleIcon, strings: strings, labelKey: (_d = props.labelKey) !== null && _d !== void 0 ? _d : 'participantsButtonLabel' })));
+        React.createElement(ControlBarButton, Object.assign({}, props, { disabled: disabled, menuProps: (_c = props.menuProps) !== null && _c !== void 0 ? _c : defaultMenuProps, menuIconProps: { hidden: true }, onRenderIcon: onRenderIcon !== null && onRenderIcon !== void 0 ? onRenderIcon : onRenderPeopleIcon, strings: strings, labelKey: (_d = props.labelKey) !== null && _d !== void 0 ? _d : 'participantsButtonLabel' }))));
 };
 //# sourceMappingURL=ParticipantsButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ParticipantsButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ParticipantsButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ContextualMenuItemType, IContextualMenuItem, IContextualMenuProps, IContextualMenuStyles, IContextualMenuItemStyles, merge } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport copy from 'copy-to-clipboard';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { ParticipantList, ParticipantListProps, ParticipantListStyles, ParticipantMenuItemsCallback } from './ParticipantList';\nimport { participantsButtonMenuPropsStyle } from './styles/ControlBar.styles';\nimport { useLocale } from '../localization';\nimport { ControlBarButton, ControlBarButtonProps, ControlBarButtonStyles } from './ControlBarButton';\nimport { useIdentifiers } from '../identifiers';\nimport { CommunicationParticipant } from '../types/CommunicationParticipant';\nimport { OnRenderAvatarCallback } from '../types/OnRender';\nimport { ParticipantListParticipant } from '../types';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\nimport { Announcer } from './Announcer';\n\n/**\n * Styles for the {@link ParticipantsButton} menu.\n *\n * @public\n */\nexport interface ParticipantsButtonContextualMenuStyles extends IContextualMenuStyles {\n  /** Styles for the {@link ParticipantsButton} menu items. */\n  menuItemStyles?: IContextualMenuItemStyles;\n  /** Styles for the {@link ParticipantList} menu item inside the {@link ParticipantsButton} menu. */\n  participantListStyles?: ParticipantListStyles;\n}\n\n/**\n * Styles Props for {@link ParticipantsButton}.\n *\n * @public\n */\nexport interface ParticipantsButtonStyles extends ControlBarButtonStyles {\n  /** Styles of the {@link ParticipantsButton} menu flyout */\n  menuStyles?: Partial<ParticipantsButtonContextualMenuStyles>;\n}\n\n/**\n * Strings of {@link ParticipantsButton} that can be overridden.\n *\n * @public\n */\nexport interface ParticipantsButtonStrings {\n  /**\n   * Label of button\n   */\n  label: string;\n  /**\n   * Button tooltip content.\n   */\n  tooltipContent?: string;\n  /**\n   * Header of menu pop up\n   */\n  menuHeader: string;\n  /**\n   * Label of menu button to show list of participants. Placeholders: [numParticipants]\n   */\n  participantsListButtonLabel: string;\n  /**\n   * Label of menu button to copy invite link\n   */\n  copyInviteLinkButtonLabel: string;\n  /**\n   * Label of menu button to mute all participants\n   */\n  muteAllButtonLabel: string;\n  /**\n   * Narrator announcement for when the invite link has been copied by the user to the clipboard\n   */\n  copyInviteLinkActionedAriaLabel: string;\n}\n\n/**\n * Props for {@link ParticipantsButton}.\n *\n * @public\n */\nexport interface ParticipantsButtonProps extends ControlBarButtonProps {\n  /**\n   * Participants in user call or chat\n   */\n  participants: ParticipantListParticipant[];\n  /**\n   * User ID of user\n   */\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  /**\n   * Callback to render each participant. If no callback is provided, each participant will be rendered with `ParticipantItem`\n   */\n  onRenderParticipant?: (participant: CommunicationParticipant) => JSX.Element | null;\n  /**\n   * Callback to render the avatar for each participant. This property will have no effect if `onRenderParticipant` is assigned.\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /**\n   * Callback to render the context menu for each participant\n   */\n  onRemoveParticipant?: (userId: string) => void;\n  /**\n   * Callback to render custom menu items for each participant.\n   */\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  /**\n   * Optional callback to render a custom participant list.\n   */\n  onRenderParticipantList?: (props: ParticipantListProps) => JSX.Element | null;\n  /**\n   * Allows users to pass an object containing custom CSS styles.\n   * @Example\n   * ```\n   * <ParticipantsButton styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: ParticipantsButtonStyles;\n  /**\n   * URL to invite new participants to the current call\n   */\n  callInvitationURL?: string;\n  /**\n   * CallBack to mute all remote participants\n   */\n  onMuteAll?: () => void;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<ParticipantsButtonStrings>;\n  /** Optional value to determine if the tooltip should be shown for participants or not */\n  showParticipantOverflowTooltip?: boolean;\n}\n\n/**\n * A button to show a menu with calling or chat participants.\n *\n * Can be used with {@link ControlBar}.\n *\n * This button contains dropdown menu items defined through its property `menuProps`. By default, it can display the number of remote participants with the full list\n * as sub-menu and an option to mute all participants, as well as a copy-to-clipboard button to copy the call invitation URL.\n * This `menuProps` can be fully redefined and its property is of type [IContextualMenuProps](https://developer.microsoft.com/fluentui#/controls/web/contextualmenu#IContextualMenuProps).\n *\n * @public\n */\nexport const ParticipantsButton = (props: ParticipantsButtonProps): JSX.Element => {\n  const {\n    callInvitationURL,\n    styles,\n    onMuteAll,\n    onRenderIcon,\n    onRenderParticipantList,\n    participants,\n    myUserId,\n    excludeMe,\n    onRenderParticipant,\n    onRenderAvatar,\n    onRemoveParticipant,\n    onFetchParticipantMenuItems,\n    showParticipantOverflowTooltip\n  } = props;\n  const disabled = props.disabled;\n  const [copyInviteLinkAnnouncerStrings, setCopyInviteLinkAnnouncerStrings] = useState<string>('');\n  const onRenderPeopleIcon = (): JSX.Element => <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonParticipants\" />;\n  const ids = useIdentifiers();\n  const onMuteAllCallback = useCallback(() => {\n    if (onMuteAll) {\n      onMuteAll();\n    }\n  }, [onMuteAll]);\n  const defaultParticipantList = useCallback(() => {\n    return <ParticipantList participants={participants} myUserId={myUserId} excludeMe={excludeMe} onRenderParticipant={onRenderParticipant} onRenderAvatar={onRenderAvatar} onRemoveParticipant={onRemoveParticipant} onFetchParticipantMenuItems={onFetchParticipantMenuItems} styles={styles?.menuStyles?.participantListStyles} showParticipantOverflowTooltip={showParticipantOverflowTooltip} />;\n  }, [excludeMe, myUserId, onRemoveParticipant, onRenderAvatar, onRenderParticipant, participants, styles?.menuStyles?.participantListStyles, onFetchParticipantMenuItems, showParticipantOverflowTooltip]);\n  const onCopyCallback = useCallback(() => {\n    if (callInvitationURL) {\n      return copy(callInvitationURL);\n    }\n    return false;\n  }, [callInvitationURL]);\n  const localeStrings = useLocale().strings.participantsButton;\n  const strings = useMemo(() => ({\n    ...localeStrings,\n    ...props.strings\n  }), [localeStrings, props.strings]);\n  const participantCount = participants.length;\n\n  /**\n   * sets the announcement string for when the link is copied.\n   */\n  const toggleAnnouncerString = useCallback(() => {\n    setCopyInviteLinkAnnouncerStrings(strings.copyInviteLinkActionedAriaLabel);\n    /**\n     * Clears the announcer string after the user clicks the\n     * copyInviteLink button allowing it to be re-announced.\n     */\n    setTimeout(() => {\n      setCopyInviteLinkAnnouncerStrings('');\n    }, 3000);\n  }, [strings.copyInviteLinkActionedAriaLabel]);\n  const generateDefaultParticipantsSubMenuProps = useCallback((): IContextualMenuItem[] => {\n    const items: IContextualMenuItem[] = [];\n    if (participantCount > 0) {\n      items.push({\n        key: 'participantListMenuItemKey',\n        onRender: onRenderParticipantList ?? defaultParticipantList\n      });\n      items.push({\n        key: 'participantsDivider1',\n        itemType: ContextualMenuItemType.Divider\n      });\n      if (onMuteAll) {\n        items.push({\n          key: 'muteAllKey',\n          text: strings.muteAllButtonLabel,\n          title: strings.muteAllButtonLabel,\n          styles: styles?.menuStyles?.menuItemStyles,\n          iconProps: {\n            iconName: 'MicOff2'\n          },\n          onClick: onMuteAllCallback\n        });\n      }\n    }\n    return items;\n  }, [participantCount, onRenderParticipantList, defaultParticipantList, onMuteAll, strings.muteAllButtonLabel, styles?.menuStyles?.menuItemStyles, onMuteAllCallback]);\n  const defaultMenuProps = useMemo((): IContextualMenuProps => {\n    const menuProps: IContextualMenuProps = {\n      title: strings.menuHeader,\n      ariaLabel: strings.menuHeader,\n      styles: merge(participantsButtonMenuPropsStyle, styles?.menuStyles),\n      items: [],\n      calloutProps: {\n        preventDismissOnEvent\n      }\n    };\n    if (participantCount > 0) {\n      const participantIds = participants.map(p => p.userId);\n      let participantCountWithoutMe = participantIds.length;\n      if (excludeMe) {\n        participantCountWithoutMe -= 1;\n      }\n      menuProps.items.push({\n        key: 'participantCountKey',\n        name: _formatString(strings.participantsListButtonLabel, {\n          numParticipants: `${participantCountWithoutMe}`\n        }),\n        itemProps: {\n          styles: styles?.menuStyles?.menuItemStyles\n        },\n        iconProps: {\n          iconName: 'People'\n        },\n        subMenuProps: {\n          items: generateDefaultParticipantsSubMenuProps(),\n          calloutProps: {\n            styles: {\n              root: {\n                // Confine the menu to the parents bounds.\n                // More info: https://github.com/microsoft/fluentui/issues/18835\n                maxWidth: '100%'\n              }\n            },\n            style: {\n              maxHeight: '20rem'\n            },\n            // Disable dismiss on resize to work around a couple Fluent UI bugs\n            // See reasoning in the props for the parent menu.\n            preventDismissOnEvent\n          }\n        },\n        'data-ui-id': ids.participantButtonPeopleMenuItem\n      });\n    }\n    if (callInvitationURL) {\n      menuProps.items.push({\n        key: 'InviteLinkKey',\n        name: strings.copyInviteLinkButtonLabel,\n        title: strings.copyInviteLinkButtonLabel,\n        itemProps: {\n          styles: styles?.menuStyles?.menuItemStyles\n        },\n        iconProps: {\n          iconName: 'Link'\n        },\n        onClick: () => {\n          onCopyCallback();\n          toggleAnnouncerString();\n        }\n      });\n    }\n    return menuProps;\n  }, [strings.menuHeader, strings.participantsListButtonLabel, strings.copyInviteLinkButtonLabel, styles?.menuStyles, participantCount, callInvitationURL, participants, excludeMe, ids.participantButtonPeopleMenuItem, generateDefaultParticipantsSubMenuProps, onCopyCallback, toggleAnnouncerString]);\n  return <>\n      <Announcer announcementString={copyInviteLinkAnnouncerStrings} ariaLive={'polite'} />\n      <ControlBarButton {...props} disabled={disabled} menuProps={props.menuProps ?? defaultMenuProps} menuIconProps={{\n      hidden: true\n    }} onRenderIcon={onRenderIcon ?? onRenderPeopleIcon} strings={strings} labelKey={props.labelKey ?? 'participantsButtonLabel'} />\n    </>;\n};"]}
+{"version":3,"file":"ParticipantsButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantsButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  ContextualMenuItemType,\n  IContextualMenuItem,\n  IContextualMenuProps,\n  IContextualMenuStyles,\n  IContextualMenuItemStyles,\n  merge\n} from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport copy from 'copy-to-clipboard';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport {\n  ParticipantList,\n  ParticipantListProps,\n  ParticipantListStyles,\n  ParticipantMenuItemsCallback\n} from './ParticipantList';\nimport { participantsButtonMenuPropsStyle } from './styles/ControlBar.styles';\nimport { useLocale } from '../localization';\nimport { ControlBarButton, ControlBarButtonProps, ControlBarButtonStyles } from './ControlBarButton';\nimport { useIdentifiers } from '../identifiers';\nimport { CommunicationParticipant } from '../types/CommunicationParticipant';\nimport { OnRenderAvatarCallback } from '../types/OnRender';\nimport { ParticipantListParticipant } from '../types';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\nimport { Announcer } from './Announcer';\n\n/**\n * Styles for the {@link ParticipantsButton} menu.\n *\n * @public\n */\nexport interface ParticipantsButtonContextualMenuStyles extends IContextualMenuStyles {\n  /** Styles for the {@link ParticipantsButton} menu items. */\n  menuItemStyles?: IContextualMenuItemStyles;\n  /** Styles for the {@link ParticipantList} menu item inside the {@link ParticipantsButton} menu. */\n  participantListStyles?: ParticipantListStyles;\n}\n\n/**\n * Styles Props for {@link ParticipantsButton}.\n *\n * @public\n */\nexport interface ParticipantsButtonStyles extends ControlBarButtonStyles {\n  /** Styles of the {@link ParticipantsButton} menu flyout */\n  menuStyles?: Partial<ParticipantsButtonContextualMenuStyles>;\n}\n\n/**\n * Strings of {@link ParticipantsButton} that can be overridden.\n *\n * @public\n */\nexport interface ParticipantsButtonStrings {\n  /**\n   * Label of button\n   */\n  label: string;\n  /**\n   * Button tooltip content.\n   */\n  tooltipContent?: string;\n  /**\n   * Header of menu pop up\n   */\n  menuHeader: string;\n  /**\n   * Label of menu button to show list of participants. Placeholders: [numParticipants]\n   */\n  participantsListButtonLabel: string;\n  /**\n   * Label of menu button to copy invite link\n   */\n  copyInviteLinkButtonLabel: string;\n  /**\n   * Label of menu button to mute all participants\n   */\n  muteAllButtonLabel: string;\n  /**\n   * Narrator announcement for when the invite link has been copied by the user to the clipboard\n   */\n  copyInviteLinkActionedAriaLabel: string;\n}\n\n/**\n * Props for {@link ParticipantsButton}.\n *\n * @public\n */\nexport interface ParticipantsButtonProps extends ControlBarButtonProps {\n  /**\n   * Participants in user call or chat\n   */\n  participants: ParticipantListParticipant[];\n  /**\n   * User ID of user\n   */\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  /**\n   * Callback to render each participant. If no callback is provided, each participant will be rendered with `ParticipantItem`\n   */\n  onRenderParticipant?: (participant: CommunicationParticipant) => JSX.Element | null;\n  /**\n   * Callback to render the avatar for each participant. This property will have no effect if `onRenderParticipant` is assigned.\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /**\n   * Callback to render the context menu for each participant\n   */\n  onRemoveParticipant?: (userId: string) => void;\n  /**\n   * Callback to render custom menu items for each participant.\n   */\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  /**\n   * Optional callback to render a custom participant list.\n   */\n  onRenderParticipantList?: (props: ParticipantListProps) => JSX.Element | null;\n  /**\n   * Allows users to pass an object containing custom CSS styles.\n   * @Example\n   * ```\n   * <ParticipantsButton styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: ParticipantsButtonStyles;\n  /**\n   * URL to invite new participants to the current call\n   */\n  callInvitationURL?: string;\n  /**\n   * CallBack to mute all remote participants\n   */\n  onMuteAll?: () => void;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<ParticipantsButtonStrings>;\n  /** Optional value to determine if the tooltip should be shown for participants or not */\n  showParticipantOverflowTooltip?: boolean;\n}\n\n/**\n * A button to show a menu with calling or chat participants.\n *\n * Can be used with {@link ControlBar}.\n *\n * This button contains dropdown menu items defined through its property `menuProps`. By default, it can display the number of remote participants with the full list\n * as sub-menu and an option to mute all participants, as well as a copy-to-clipboard button to copy the call invitation URL.\n * This `menuProps` can be fully redefined and its property is of type [IContextualMenuProps](https://developer.microsoft.com/fluentui#/controls/web/contextualmenu#IContextualMenuProps).\n *\n * @public\n */\nexport const ParticipantsButton = (props: ParticipantsButtonProps): JSX.Element => {\n  const {\n    callInvitationURL,\n    styles,\n    onMuteAll,\n    onRenderIcon,\n    onRenderParticipantList,\n    participants,\n    myUserId,\n    excludeMe,\n    onRenderParticipant,\n    onRenderAvatar,\n    onRemoveParticipant,\n    onFetchParticipantMenuItems,\n    showParticipantOverflowTooltip\n  } = props;\n\n  const disabled = props.disabled;\n\n  const [copyInviteLinkAnnouncerStrings, setCopyInviteLinkAnnouncerStrings] = useState<string>('');\n\n  const onRenderPeopleIcon = (): JSX.Element => (\n    <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonParticipants\" />\n  );\n\n  const ids = useIdentifiers();\n\n  const onMuteAllCallback = useCallback(() => {\n    if (onMuteAll) {\n      onMuteAll();\n    }\n  }, [onMuteAll]);\n\n  const defaultParticipantList = useCallback(() => {\n    return (\n      <ParticipantList\n        participants={participants}\n        myUserId={myUserId}\n        excludeMe={excludeMe}\n        onRenderParticipant={onRenderParticipant}\n        onRenderAvatar={onRenderAvatar}\n        onRemoveParticipant={onRemoveParticipant}\n        onFetchParticipantMenuItems={onFetchParticipantMenuItems}\n        styles={styles?.menuStyles?.participantListStyles}\n        showParticipantOverflowTooltip={showParticipantOverflowTooltip}\n      />\n    );\n  }, [\n    excludeMe,\n    myUserId,\n    onRemoveParticipant,\n    onRenderAvatar,\n    onRenderParticipant,\n    participants,\n    styles?.menuStyles?.participantListStyles,\n    onFetchParticipantMenuItems,\n    showParticipantOverflowTooltip\n  ]);\n\n  const onCopyCallback = useCallback(() => {\n    if (callInvitationURL) {\n      return copy(callInvitationURL);\n    }\n    return false;\n  }, [callInvitationURL]);\n\n  const localeStrings = useLocale().strings.participantsButton;\n  const strings = useMemo(() => ({ ...localeStrings, ...props.strings }), [localeStrings, props.strings]);\n  const participantCount = participants.length;\n\n  /**\n   * sets the announcement string for when the link is copied.\n   */\n  const toggleAnnouncerString = useCallback(() => {\n    setCopyInviteLinkAnnouncerStrings(strings.copyInviteLinkActionedAriaLabel);\n    /**\n     * Clears the announcer string after the user clicks the\n     * copyInviteLink button allowing it to be re-announced.\n     */\n    setTimeout(() => {\n      setCopyInviteLinkAnnouncerStrings('');\n    }, 3000);\n  }, [strings.copyInviteLinkActionedAriaLabel]);\n\n  const generateDefaultParticipantsSubMenuProps = useCallback((): IContextualMenuItem[] => {\n    const items: IContextualMenuItem[] = [];\n\n    if (participantCount > 0) {\n      items.push({\n        key: 'participantListMenuItemKey',\n        onRender: onRenderParticipantList ?? defaultParticipantList\n      });\n\n      items.push({ key: 'participantsDivider1', itemType: ContextualMenuItemType.Divider });\n\n      if (onMuteAll) {\n        items.push({\n          key: 'muteAllKey',\n          text: strings.muteAllButtonLabel,\n          title: strings.muteAllButtonLabel,\n          styles: styles?.menuStyles?.menuItemStyles,\n          iconProps: { iconName: 'MicOff2' },\n          onClick: onMuteAllCallback\n        });\n      }\n    }\n\n    return items;\n  }, [\n    participantCount,\n    onRenderParticipantList,\n    defaultParticipantList,\n    onMuteAll,\n    strings.muteAllButtonLabel,\n    styles?.menuStyles?.menuItemStyles,\n    onMuteAllCallback\n  ]);\n\n  const defaultMenuProps = useMemo((): IContextualMenuProps => {\n    const menuProps: IContextualMenuProps = {\n      title: strings.menuHeader,\n      ariaLabel: strings.menuHeader,\n      styles: merge(participantsButtonMenuPropsStyle, styles?.menuStyles),\n      items: [],\n      calloutProps: {\n        preventDismissOnEvent\n      }\n    };\n\n    if (participantCount > 0) {\n      const participantIds = participants.map((p) => p.userId);\n\n      let participantCountWithoutMe = participantIds.length;\n      if (excludeMe) {\n        participantCountWithoutMe -= 1;\n      }\n\n      menuProps.items.push({\n        key: 'participantCountKey',\n        name: _formatString(strings.participantsListButtonLabel, { numParticipants: `${participantCountWithoutMe}` }),\n        itemProps: { styles: styles?.menuStyles?.menuItemStyles },\n        iconProps: { iconName: 'People' },\n        subMenuProps: {\n          items: generateDefaultParticipantsSubMenuProps(),\n          calloutProps: {\n            styles: {\n              root: {\n                // Confine the menu to the parents bounds.\n                // More info: https://github.com/microsoft/fluentui/issues/18835\n                maxWidth: '100%'\n              }\n            },\n            style: {\n              maxHeight: '20rem'\n            },\n            // Disable dismiss on resize to work around a couple Fluent UI bugs\n            // See reasoning in the props for the parent menu.\n            preventDismissOnEvent\n          }\n        },\n        'data-ui-id': ids.participantButtonPeopleMenuItem\n      });\n    }\n\n    if (callInvitationURL) {\n      menuProps.items.push({\n        key: 'InviteLinkKey',\n        name: strings.copyInviteLinkButtonLabel,\n        title: strings.copyInviteLinkButtonLabel,\n        itemProps: { styles: styles?.menuStyles?.menuItemStyles },\n        iconProps: { iconName: 'Link' },\n        onClick: () => {\n          onCopyCallback();\n          toggleAnnouncerString();\n        }\n      });\n    }\n\n    return menuProps;\n  }, [\n    strings.menuHeader,\n    strings.participantsListButtonLabel,\n    strings.copyInviteLinkButtonLabel,\n    styles?.menuStyles,\n    participantCount,\n    callInvitationURL,\n    participants,\n    excludeMe,\n    ids.participantButtonPeopleMenuItem,\n    generateDefaultParticipantsSubMenuProps,\n    onCopyCallback,\n    toggleAnnouncerString\n  ]);\n\n  return (\n    <>\n      <Announcer announcementString={copyInviteLinkAnnouncerStrings} ariaLive={'polite'} />\n      <ControlBarButton\n        {...props}\n        disabled={disabled}\n        menuProps={props.menuProps ?? defaultMenuProps}\n        menuIconProps={{ hidden: true }}\n        onRenderIcon={onRenderIcon ?? onRenderPeopleIcon}\n        strings={strings}\n        labelKey={props.labelKey ?? 'participantsButtonLabel'}\n      />\n    </>\n  );\n};\n"]}

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

@@ -13,7 +13,7 @@ import { PictureInPictureInPicturePrimaryTile, PictureInPictureInPictureSecondar
  * @internal
  */
 export const _PictureInPictureInPicture = (props) => {
-    return React.createElement(PictureInPictureInPictureContainer, { onClick: props.onClick, primaryView: React.createElement(PictureInPictureInPicturePrimaryTile, Object.assign({}, props.primaryTile)), secondaryView: props.secondaryTile && React.createElement(PictureInPictureInPictureSecondaryTile, Object.assign({}, props.secondaryTile)), ariaLabel: props.strings.rootAriaLabel });
+    return (React.createElement(PictureInPictureInPictureContainer, { onClick: props.onClick, primaryView: React.createElement(PictureInPictureInPicturePrimaryTile, Object.assign({}, props.primaryTile)), secondaryView: props.secondaryTile && React.createElement(PictureInPictureInPictureSecondaryTile, Object.assign({}, props.secondaryTile)), ariaLabel: props.strings.rootAriaLabel }));
 };
 /**
  * Container for the picture in picture in picture component.
@@ -21,9 +21,9 @@ export const _PictureInPictureInPicture = (props) => {
  */
 const PictureInPictureInPictureContainer = (props) => {
     const onKeyPress = (e) => props.onClick && submitWithKeyboard(e, props.onClick);
-    return React.createElement("aside", { style: tileContainerStyles, onClick: props.onClick, onKeyPress: onKeyPress, "aria-label": props.ariaLabel, tabIndex: props.onClick ? 0 : -1, "data-ui-id": "picture-in-picture-in-picture-root" },
+    return (React.createElement("aside", { style: tileContainerStyles, onClick: props.onClick, onKeyPress: onKeyPress, "aria-label": props.ariaLabel, tabIndex: props.onClick ? 0 : -1, "data-ui-id": "picture-in-picture-in-picture-root" },
         props.primaryView,
-        React.createElement("div", { style: secondaryTileFloatingStyles }, props.secondaryView));
+        React.createElement("div", { style: secondaryTileFloatingStyles }, props.secondaryView)));
 };
 const tileContainerStyles = {
     display: 'flex',