@azure/communication-react 1.17.0-alpha-202405230013 → 1.17.0-alpha-202405240014

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CwHFMnmg.js');
+var index = require('./index-qGuuq6Hb.js');
 require('react');
 require('@fluentui/react');
 require('@fluentui/react-components');

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js

@@ -2,5 +2,5 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-module.exports = '1.17.0-alpha-202405230013';
+module.exports = '1.17.0-alpha-202405240014';
 //# sourceMappingURL=telemetryVersion.js.map

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map

@@ -1 +1 @@
-{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.17.0-alpha-202405230013';\n"]}
+{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.17.0-alpha-202405240014';\n"]}

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

@@ -26,7 +26,7 @@ export const ParticipantItem = (props) => {
     const uniqueId = useId();
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
     const participantStateString = participantStateStringTrampoline(props, strings);
-    const showMenuIcon = !me && !participantStateString && (itemHovered || !menuHidden);
+    const showMenuIcon = !participantStateString && (itemHovered || !menuHidden) && menuItems && (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) > 0;
     // For 'me' show empty name so avatar will get 'Person' icon, when there is no name
     const meAvatarText = (displayName === null || displayName === void 0 ? void 0 : displayName.trim()) || '';
     const avatarOptions = {

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

@@ -1 +1 @@
-{"version":3,"file":"ParticipantItem.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantItem.tsx"],"names":[],"mappings":"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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';\n/* @conditional-compile-remove(one-to-n-calling) */\n/* @conditional-compile-remove(PSTN-calls) */\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  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  /** String shown when `participantState` is `Ringing` */\n  participantStateRinging?: string;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  /** String shown when `participantState` is `Hold` */\n  participantStateHold?: string;\n  /* @conditional-compile-remove(hide-attendee-name) */\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  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\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 = !me && !participantStateString && (itemHovered || !menuHidden);\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      data-is-focusable={true}\n      data-ui-id=\"participant-item\"\n      className={mergeStyles(\n        participantItemContainerStyle({ clickable: !!menuItems && menuItems.length > 0 }),\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  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\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"]}
+{"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';\n/* @conditional-compile-remove(one-to-n-calling) */\n/* @conditional-compile-remove(PSTN-calls) */\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  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  /** String shown when `participantState` is `Ringing` */\n  participantStateRinging?: string;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  /** String shown when `participantState` is `Hold` */\n  participantStateHold?: string;\n  /* @conditional-compile-remove(hide-attendee-name) */\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  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\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      data-is-focusable={true}\n      data-ui-id=\"participant-item\"\n      className={mergeStyles(\n        participantItemContainerStyle({ clickable: !!menuItems && menuItems.length > 0 }),\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  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\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/RemoteVideoTile.d.ts

@@ -41,5 +41,6 @@ export declare const _RemoteVideoTile: React.MemoExoticComponent<(props: {
     disablePinMenuItem?: boolean;
     toggleAnnouncerString?: (announcerString: string) => void;
     reactionResources?: ReactionResources;
+    onLongTouch?: (() => void) | undefined;
 }) => React.JSX.Element>;
 //# sourceMappingURL=RemoteVideoTile.d.ts.map

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

@@ -116,7 +116,9 @@ export const _RemoteVideoTile = React.memo((props) => {
         React.createElement(VideoTile, Object.assign({ key: userId, userId: userId, initialsName: (_b = formatInitialsName()) !== null && _b !== void 0 ? _b : '', renderElement: renderVideoStreamElement, displayName: displayName, onRenderPlaceholder: onRenderAvatar, isMuted: remoteParticipant.isMuted, raisedHand: remoteParticipant.raisedHand, isSpeaking: remoteParticipant.isSpeaking, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, showLabel: props.showLabel, alwaysShowLabelBackground: props.alwaysShowLabelBackground, 
             /* @conditional-compile-remove(one-to-n-calling) */
             /* @conditional-compile-remove(PSTN-calls) */
-            participantState: participantState }, videoTileContextualMenuProps, { isPinned: props.isPinned, onLongTouch: () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))), 
+            participantState: participantState }, videoTileContextualMenuProps, { isPinned: props.isPinned, onLongTouch: props.onLongTouch
+                ? props.onLongTouch
+                : () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))), 
             /* @conditional-compile-remove(spotlight) */
             isSpotlighted: isSpotlighted, overlay: reactionOverlay })),
         drawerMenuItemProps.length > 0 && (React.createElement(Layer, { hostId: props.drawerMenuHostId },

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

@@ -1 +1 @@
-{"version":3,"file":"RemoteVideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/RemoteVideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IContextualMenuProps, Layer, Stack } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { KeyboardEvent, useCallback } from 'react';\nimport {\n  CreateVideoStreamViewResult,\n  OnRenderAvatarCallback,\n  ParticipantState,\n  VideoGalleryRemoteParticipant,\n  VideoStreamOptions,\n  ViewScalingMode\n} from '../types';\nimport { _DrawerMenu, _DrawerMenuItemProps } from './Drawer';\nimport { StreamMedia } from './StreamMedia';\nimport { VideoGalleryStrings } from './VideoGallery';\nimport { drawerMenuWrapperStyles, remoteVideoTileWrapperStyle } from './VideoGallery/styles/RemoteVideoTile.styles';\nimport {\n  RemoteVideoStreamLifecycleMaintainerProps,\n  useRemoteVideoStreamLifecycleMaintainer\n} from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileContextualMenuProps';\nimport { VideoTile } from './VideoTile';\n/* @conditional-compile-remove(hide-attendee-name) */\nimport { _formatString } from '@internal/acs-ui-common';\nimport { ReactionResources } from '../types/ReactionTypes';\nimport { MeetingReactionOverlay } from './MeetingReactionOverlay';\n\n/**\n * A memoized version of VideoTile for rendering remote participants. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering a VideoTile when its position in the\n * array changes causing a rerender in the parent component. https://reactjs.org/docs/react-api.html#reactmemo\n *\n * @internal\n */\nexport const _RemoteVideoTile = React.memo(\n  (props: {\n    userId: string;\n    remoteParticipant: VideoGalleryRemoteParticipant;\n    onCreateRemoteStreamView?: (\n      userId: string,\n      options?: VideoStreamOptions\n    ) => Promise<void | CreateVideoStreamViewResult>;\n    onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n    isAvailable?: boolean;\n    isReceiving?: boolean;\n    streamId?: number;\n    isScreenSharingOn?: boolean; // TODO: Remove this once onDisposeRemoteStreamView no longer disposes of screen share stream\n    renderElement?: HTMLElement;\n    remoteVideoViewOptions?: VideoStreamOptions;\n    onRenderAvatar?: OnRenderAvatarCallback;\n    showMuteIndicator?: boolean;\n    showLabel?: boolean;\n    alwaysShowLabelBackground?: boolean;\n    personaMinSize?: number;\n    strings: VideoGalleryStrings;\n    participantState?: ParticipantState;\n    menuKind?: 'contextual' | 'drawer';\n    drawerMenuHostId?: string;\n    onPinParticipant?: (userId: string) => void;\n    onUnpinParticipant?: (userId: string) => void;\n    onUpdateScalingMode?: (userId: string, scalingMode: ViewScalingMode) => void;\n    isPinned?: boolean;\n    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds?: string[];\n    /* @conditional-compile-remove(spotlight) */ isSpotlighted?: boolean;\n    /* @conditional-compile-remove(spotlight) */ onStartSpotlight?: (userIds: string[]) => void;\n    /* @conditional-compile-remove(spotlight) */ onStopSpotlight?: (userIds: string[]) => void;\n    /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight?: number;\n    disablePinMenuItem?: boolean;\n    toggleAnnouncerString?: (announcerString: string) => void;\n    reactionResources?: ReactionResources;\n  }) => {\n    const {\n      isAvailable,\n      isReceiving = true, // default to true to prevent any breaking change\n      isScreenSharingOn,\n      onCreateRemoteStreamView,\n      onDisposeRemoteStreamView,\n      remoteVideoViewOptions,\n      renderElement,\n      userId,\n      onRenderAvatar,\n      showMuteIndicator,\n      remoteParticipant,\n      participantState,\n      menuKind,\n      isPinned,\n      onPinParticipant,\n      onUnpinParticipant,\n      /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds,\n      /* @conditional-compile-remove(spotlight) */ isSpotlighted,\n      /* @conditional-compile-remove(spotlight) */ onStartSpotlight,\n      /* @conditional-compile-remove(spotlight) */ onStopSpotlight,\n      /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight,\n      onUpdateScalingMode,\n      disablePinMenuItem,\n      toggleAnnouncerString,\n      strings,\n      reactionResources,\n      streamId\n    } = props;\n\n    const remoteVideoStreamProps: RemoteVideoStreamLifecycleMaintainerProps = useMemo(\n      () => ({\n        isMirrored: remoteVideoViewOptions?.isMirrored,\n        isScreenSharingOn,\n        isStreamAvailable: isAvailable,\n        isStreamReceiving: isReceiving,\n        onCreateRemoteStreamView,\n        onDisposeRemoteStreamView,\n        remoteParticipantId: userId,\n        renderElementExists: !!renderElement,\n        scalingMode: remoteVideoViewOptions?.scalingMode,\n        streamId\n      }),\n      [\n        isAvailable,\n        isReceiving,\n        isScreenSharingOn,\n        onCreateRemoteStreamView,\n        onDisposeRemoteStreamView,\n        remoteVideoViewOptions?.isMirrored,\n        remoteVideoViewOptions?.scalingMode,\n        renderElement,\n        userId,\n        streamId\n      ]\n    );\n\n    // Handle creating, destroying and updating the video stream as necessary\n    const createVideoStreamResult = useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);\n    const contextualMenuProps = useVideoTileContextualMenuProps({\n      participant: remoteParticipant,\n      view: createVideoStreamResult?.view,\n      strings: { ...props.strings },\n      isPinned,\n      onPinParticipant,\n      onUnpinParticipant,\n      onUpdateScalingMode,\n      disablePinMenuItem,\n      toggleAnnouncerString,\n      /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds,\n      /* @conditional-compile-remove(spotlight) */ isSpotlighted,\n      /* @conditional-compile-remove(spotlight) */ onStartSpotlight,\n      /* @conditional-compile-remove(spotlight) */ onStopSpotlight,\n      /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight\n    });\n\n    const videoTileContextualMenuProps = useMemo(() => {\n      if (menuKind !== 'contextual' || !contextualMenuProps) {\n        return {};\n      }\n      return {\n        contextualMenu: contextualMenuProps\n      };\n    }, [contextualMenuProps, menuKind]);\n\n    const showLoadingIndicator = isAvailable && isReceiving === false && participantState !== 'Disconnected';\n\n    const [drawerMenuItemProps, setDrawerMenuItemProps] = React.useState<_DrawerMenuItemProps[]>([]);\n\n    const renderVideoStreamElement = useMemo(() => {\n      // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which\n      // implies that, after their threshold, all streams have no child (blank video)\n      if (!renderElement || !renderElement.childElementCount) {\n        // Returning `undefined` results in the placeholder with avatar being shown\n        return undefined;\n      }\n\n      return (\n        <StreamMedia videoStreamElement={renderElement} loadingState={showLoadingIndicator ? 'loading' : 'none'} />\n      );\n    }, [renderElement, showLoadingIndicator]);\n\n    const onKeyDown = useCallback(\n      (e: KeyboardEvent) => {\n        if (e.key === 'Enter') {\n          setDrawerMenuItemProps(\n            convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n          );\n        }\n      },\n      [setDrawerMenuItemProps, contextualMenuProps]\n    );\n\n    let displayName = remoteParticipant.displayName || strings.displayNamePlaceholder;\n    /* @conditional-compile-remove(hide-attendee-name) */\n    const attendeeRoleString = props.strings?.attendeeRole;\n\n    /* @conditional-compile-remove(hide-attendee-name) */\n    const formatDisplayName = (): string => {\n      if (displayName && attendeeRoleString) {\n        return _formatString(displayName, { AttendeeRole: attendeeRoleString });\n      }\n      return displayName;\n    };\n\n    const formatInitialsName = (): string | undefined => {\n      if (remoteParticipant.displayName && attendeeRoleString) {\n        return _formatString(remoteParticipant.displayName, { AttendeeRole: attendeeRoleString });\n      }\n      return remoteParticipant.displayName;\n    };\n\n    const reactionOverlay = reactionResources && (\n      <MeetingReactionOverlay\n        overlayMode=\"grid-tiles\"\n        reaction={remoteParticipant.reaction}\n        reactionResources={reactionResources}\n      />\n    );\n\n    /* @conditional-compile-remove(hide-attendee-name) */\n    displayName = formatDisplayName();\n    return (\n      <Stack\n        tabIndex={menuKind === 'drawer' ? 0 : undefined}\n        onKeyDown={menuKind === 'drawer' ? onKeyDown : undefined}\n        style={remoteVideoTileWrapperStyle}\n      >\n        <VideoTile\n          key={userId}\n          userId={userId}\n          initialsName={formatInitialsName() ?? ''}\n          renderElement={renderVideoStreamElement}\n          displayName={displayName}\n          onRenderPlaceholder={onRenderAvatar}\n          isMuted={remoteParticipant.isMuted}\n          raisedHand={remoteParticipant.raisedHand}\n          isSpeaking={remoteParticipant.isSpeaking}\n          showMuteIndicator={showMuteIndicator}\n          personaMinSize={props.personaMinSize}\n          showLabel={props.showLabel}\n          alwaysShowLabelBackground={props.alwaysShowLabelBackground}\n          /* @conditional-compile-remove(one-to-n-calling) */\n          /* @conditional-compile-remove(PSTN-calls) */\n          participantState={participantState}\n          {...videoTileContextualMenuProps}\n          isPinned={props.isPinned}\n          onLongTouch={() =>\n            setDrawerMenuItemProps(\n              convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n            )\n          }\n          /* @conditional-compile-remove(spotlight) */\n          isSpotlighted={isSpotlighted}\n          overlay={reactionOverlay}\n        />\n        {drawerMenuItemProps.length > 0 && (\n          <Layer hostId={props.drawerMenuHostId}>\n            <Stack styles={drawerMenuWrapperStyles}>\n              <_DrawerMenu\n                onLightDismiss={() => setDrawerMenuItemProps([])}\n                items={drawerMenuItemProps}\n                heading={displayName}\n              />\n            </Stack>\n          </Layer>\n        )}\n      </Stack>\n    );\n  }\n);\n\nconst convertContextualMenuItemsToDrawerMenuItemProps = (\n  contextualMenuProps?: IContextualMenuProps,\n  onLightDismiss?: () => void\n): _DrawerMenuItemProps[] => {\n  if (!contextualMenuProps) {\n    return [];\n  }\n  return contextualMenuProps.items.map((item) => {\n    return {\n      itemKey: item.key,\n      text: item.text,\n      iconProps: item.iconProps,\n      disabled: item.disabled,\n      onItemClick: () => {\n        item.onClick?.();\n        onLightDismiss?.();\n      }\n    };\n  });\n};\n"]}
+{"version":3,"file":"RemoteVideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/RemoteVideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IContextualMenuProps, Layer, Stack } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { KeyboardEvent, useCallback } from 'react';\nimport {\n  CreateVideoStreamViewResult,\n  OnRenderAvatarCallback,\n  ParticipantState,\n  VideoGalleryRemoteParticipant,\n  VideoStreamOptions,\n  ViewScalingMode\n} from '../types';\nimport { _DrawerMenu, _DrawerMenuItemProps } from './Drawer';\nimport { StreamMedia } from './StreamMedia';\nimport { VideoGalleryStrings } from './VideoGallery';\nimport { drawerMenuWrapperStyles, remoteVideoTileWrapperStyle } from './VideoGallery/styles/RemoteVideoTile.styles';\nimport {\n  RemoteVideoStreamLifecycleMaintainerProps,\n  useRemoteVideoStreamLifecycleMaintainer\n} from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileContextualMenuProps';\nimport { VideoTile } from './VideoTile';\n/* @conditional-compile-remove(hide-attendee-name) */\nimport { _formatString } from '@internal/acs-ui-common';\nimport { ReactionResources } from '../types/ReactionTypes';\nimport { MeetingReactionOverlay } from './MeetingReactionOverlay';\n\n/**\n * A memoized version of VideoTile for rendering remote participants. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering a VideoTile when its position in the\n * array changes causing a rerender in the parent component. https://reactjs.org/docs/react-api.html#reactmemo\n *\n * @internal\n */\nexport const _RemoteVideoTile = React.memo(\n  (props: {\n    userId: string;\n    remoteParticipant: VideoGalleryRemoteParticipant;\n    onCreateRemoteStreamView?: (\n      userId: string,\n      options?: VideoStreamOptions\n    ) => Promise<void | CreateVideoStreamViewResult>;\n    onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n    isAvailable?: boolean;\n    isReceiving?: boolean;\n    streamId?: number;\n    isScreenSharingOn?: boolean; // TODO: Remove this once onDisposeRemoteStreamView no longer disposes of screen share stream\n    renderElement?: HTMLElement;\n    remoteVideoViewOptions?: VideoStreamOptions;\n    onRenderAvatar?: OnRenderAvatarCallback;\n    showMuteIndicator?: boolean;\n    showLabel?: boolean;\n    alwaysShowLabelBackground?: boolean;\n    personaMinSize?: number;\n    strings: VideoGalleryStrings;\n    participantState?: ParticipantState;\n    menuKind?: 'contextual' | 'drawer';\n    drawerMenuHostId?: string;\n    onPinParticipant?: (userId: string) => void;\n    onUnpinParticipant?: (userId: string) => void;\n    onUpdateScalingMode?: (userId: string, scalingMode: ViewScalingMode) => void;\n    isPinned?: boolean;\n    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds?: string[];\n    /* @conditional-compile-remove(spotlight) */ isSpotlighted?: boolean;\n    /* @conditional-compile-remove(spotlight) */ onStartSpotlight?: (userIds: string[]) => void;\n    /* @conditional-compile-remove(spotlight) */ onStopSpotlight?: (userIds: string[]) => void;\n    /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight?: number;\n    disablePinMenuItem?: boolean;\n    toggleAnnouncerString?: (announcerString: string) => void;\n    reactionResources?: ReactionResources;\n    onLongTouch?: (() => void) | undefined;\n  }) => {\n    const {\n      isAvailable,\n      isReceiving = true, // default to true to prevent any breaking change\n      isScreenSharingOn,\n      onCreateRemoteStreamView,\n      onDisposeRemoteStreamView,\n      remoteVideoViewOptions,\n      renderElement,\n      userId,\n      onRenderAvatar,\n      showMuteIndicator,\n      remoteParticipant,\n      participantState,\n      menuKind,\n      isPinned,\n      onPinParticipant,\n      onUnpinParticipant,\n      /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds,\n      /* @conditional-compile-remove(spotlight) */ isSpotlighted,\n      /* @conditional-compile-remove(spotlight) */ onStartSpotlight,\n      /* @conditional-compile-remove(spotlight) */ onStopSpotlight,\n      /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight,\n      onUpdateScalingMode,\n      disablePinMenuItem,\n      toggleAnnouncerString,\n      strings,\n      reactionResources,\n      streamId\n    } = props;\n\n    const remoteVideoStreamProps: RemoteVideoStreamLifecycleMaintainerProps = useMemo(\n      () => ({\n        isMirrored: remoteVideoViewOptions?.isMirrored,\n        isScreenSharingOn,\n        isStreamAvailable: isAvailable,\n        isStreamReceiving: isReceiving,\n        onCreateRemoteStreamView,\n        onDisposeRemoteStreamView,\n        remoteParticipantId: userId,\n        renderElementExists: !!renderElement,\n        scalingMode: remoteVideoViewOptions?.scalingMode,\n        streamId\n      }),\n      [\n        isAvailable,\n        isReceiving,\n        isScreenSharingOn,\n        onCreateRemoteStreamView,\n        onDisposeRemoteStreamView,\n        remoteVideoViewOptions?.isMirrored,\n        remoteVideoViewOptions?.scalingMode,\n        renderElement,\n        userId,\n        streamId\n      ]\n    );\n\n    // Handle creating, destroying and updating the video stream as necessary\n    const createVideoStreamResult = useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);\n    const contextualMenuProps = useVideoTileContextualMenuProps({\n      participant: remoteParticipant,\n      view: createVideoStreamResult?.view,\n      strings: { ...props.strings },\n      isPinned,\n      onPinParticipant,\n      onUnpinParticipant,\n      onUpdateScalingMode,\n      disablePinMenuItem,\n      toggleAnnouncerString,\n      /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds,\n      /* @conditional-compile-remove(spotlight) */ isSpotlighted,\n      /* @conditional-compile-remove(spotlight) */ onStartSpotlight,\n      /* @conditional-compile-remove(spotlight) */ onStopSpotlight,\n      /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight\n    });\n\n    const videoTileContextualMenuProps = useMemo(() => {\n      if (menuKind !== 'contextual' || !contextualMenuProps) {\n        return {};\n      }\n      return {\n        contextualMenu: contextualMenuProps\n      };\n    }, [contextualMenuProps, menuKind]);\n\n    const showLoadingIndicator = isAvailable && isReceiving === false && participantState !== 'Disconnected';\n\n    const [drawerMenuItemProps, setDrawerMenuItemProps] = React.useState<_DrawerMenuItemProps[]>([]);\n\n    const renderVideoStreamElement = useMemo(() => {\n      // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which\n      // implies that, after their threshold, all streams have no child (blank video)\n      if (!renderElement || !renderElement.childElementCount) {\n        // Returning `undefined` results in the placeholder with avatar being shown\n        return undefined;\n      }\n\n      return (\n        <StreamMedia videoStreamElement={renderElement} loadingState={showLoadingIndicator ? 'loading' : 'none'} />\n      );\n    }, [renderElement, showLoadingIndicator]);\n\n    const onKeyDown = useCallback(\n      (e: KeyboardEvent) => {\n        if (e.key === 'Enter') {\n          setDrawerMenuItemProps(\n            convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n          );\n        }\n      },\n      [setDrawerMenuItemProps, contextualMenuProps]\n    );\n\n    let displayName = remoteParticipant.displayName || strings.displayNamePlaceholder;\n    /* @conditional-compile-remove(hide-attendee-name) */\n    const attendeeRoleString = props.strings?.attendeeRole;\n\n    /* @conditional-compile-remove(hide-attendee-name) */\n    const formatDisplayName = (): string => {\n      if (displayName && attendeeRoleString) {\n        return _formatString(displayName, { AttendeeRole: attendeeRoleString });\n      }\n      return displayName;\n    };\n\n    const formatInitialsName = (): string | undefined => {\n      if (remoteParticipant.displayName && attendeeRoleString) {\n        return _formatString(remoteParticipant.displayName, { AttendeeRole: attendeeRoleString });\n      }\n      return remoteParticipant.displayName;\n    };\n\n    const reactionOverlay = reactionResources && (\n      <MeetingReactionOverlay\n        overlayMode=\"grid-tiles\"\n        reaction={remoteParticipant.reaction}\n        reactionResources={reactionResources}\n      />\n    );\n\n    /* @conditional-compile-remove(hide-attendee-name) */\n    displayName = formatDisplayName();\n    return (\n      <Stack\n        tabIndex={menuKind === 'drawer' ? 0 : undefined}\n        onKeyDown={menuKind === 'drawer' ? onKeyDown : undefined}\n        style={remoteVideoTileWrapperStyle}\n      >\n        <VideoTile\n          key={userId}\n          userId={userId}\n          initialsName={formatInitialsName() ?? ''}\n          renderElement={renderVideoStreamElement}\n          displayName={displayName}\n          onRenderPlaceholder={onRenderAvatar}\n          isMuted={remoteParticipant.isMuted}\n          raisedHand={remoteParticipant.raisedHand}\n          isSpeaking={remoteParticipant.isSpeaking}\n          showMuteIndicator={showMuteIndicator}\n          personaMinSize={props.personaMinSize}\n          showLabel={props.showLabel}\n          alwaysShowLabelBackground={props.alwaysShowLabelBackground}\n          /* @conditional-compile-remove(one-to-n-calling) */\n          /* @conditional-compile-remove(PSTN-calls) */\n          participantState={participantState}\n          {...videoTileContextualMenuProps}\n          isPinned={props.isPinned}\n          onLongTouch={\n            props.onLongTouch\n              ? props.onLongTouch\n              : () =>\n                  setDrawerMenuItemProps(\n                    convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () =>\n                      setDrawerMenuItemProps([])\n                    )\n                  )\n          }\n          /* @conditional-compile-remove(spotlight) */\n          isSpotlighted={isSpotlighted}\n          overlay={reactionOverlay}\n        />\n        {drawerMenuItemProps.length > 0 && (\n          <Layer hostId={props.drawerMenuHostId}>\n            <Stack styles={drawerMenuWrapperStyles}>\n              <_DrawerMenu\n                onLightDismiss={() => setDrawerMenuItemProps([])}\n                items={drawerMenuItemProps}\n                heading={displayName}\n              />\n            </Stack>\n          </Layer>\n        )}\n      </Stack>\n    );\n  }\n);\n\nconst convertContextualMenuItemsToDrawerMenuItemProps = (\n  contextualMenuProps?: IContextualMenuProps,\n  onLightDismiss?: () => void\n): _DrawerMenuItemProps[] => {\n  if (!contextualMenuProps) {\n    return [];\n  }\n  return contextualMenuProps.items.map((item) => {\n    return {\n      itemKey: item.key,\n      text: item.text,\n      iconProps: item.iconProps,\n      disabled: item.disabled,\n      onItemClick: () => {\n        item.onClick?.();\n        onLightDismiss?.();\n      }\n    };\n  });\n};\n"]}

package/dist/dist-esm/react-components/src/localization/locales/cs-CZ/strings.json

@@ -57,7 +57,7 @@
         "richTextDeleteColumnMenu": "Odstranit sloupec",
         "richTextDeleteRowMenu": "Odstranit řádek",
         "richTextDeleteTableMenu": "Odstranit tabulku",
-        "richTextToolbarMoreButtonAriaLabel": "More options",
+        "richTextToolbarMoreButtonAriaLabel": "Další možnosti",
         "attachmentMoreMenu": "Další možnosti"
     },
     "mentionPopover": {
@@ -220,7 +220,7 @@
         "richTextDeleteColumnMenu": "Odstranit sloupec",
         "richTextDeleteRowMenu": "Odstranit řádek",
         "richTextDeleteTableMenu": "Odstranit tabulku",
-        "richTextToolbarMoreButtonAriaLabel": "More options"
+        "richTextToolbarMoreButtonAriaLabel": "Další možnosti"
     },
     "errorBar": {
         "unableToReachChatService": "Jste offline",

package/dist/dist-esm/react-components/src/localization/locales/fi-FI/strings.json

@@ -57,7 +57,7 @@
         "richTextDeleteColumnMenu": "Poista sarake",
         "richTextDeleteRowMenu": "Poista rivi",
         "richTextDeleteTableMenu": "Poista taulukko",
-        "richTextToolbarMoreButtonAriaLabel": "More options",
+        "richTextToolbarMoreButtonAriaLabel": "Lisää asetuksia",
         "attachmentMoreMenu": "Lisää asetuksia"
     },
     "mentionPopover": {
@@ -220,7 +220,7 @@
         "richTextDeleteColumnMenu": "Poista sarake",
         "richTextDeleteRowMenu": "Poista rivi",
         "richTextDeleteTableMenu": "Poista taulukko",
-        "richTextToolbarMoreButtonAriaLabel": "More options"
+        "richTextToolbarMoreButtonAriaLabel": "Lisää asetuksia"
     },
     "errorBar": {
         "unableToReachChatService": "Olet offline-tilassa",

package/dist/dist-esm/react-components/src/localization/locales/fr-FR/strings.json

@@ -38,24 +38,24 @@
         "removeAttachment": "Supprimer un fichier",
         "uploading": "Téléchargement",
         "uploadCompleted": "Chargement terminé",
-        "richTextBoldTooltip": "Bold",
+        "richTextBoldTooltip": "Gras",
         "richTextItalicTooltip": "Italique",
         "richTextUnderlineTooltip": "Souligner",
-        "richTextBulletListTooltip": "Bulleted list",
+        "richTextBulletListTooltip": "Liste à puces",
         "richTextNumberListTooltip": "Liste numérotée",
-        "richTextIncreaseIndentTooltip": "Increase indent",
-        "richTextDecreaseIndentTooltip": "Decrease indent",
-        "richTextInsertTableTooltip": "Insert table",
+        "richTextIncreaseIndentTooltip": "Augmenter le retrait",
+        "richTextDecreaseIndentTooltip": "Réduire le retrait",
+        "richTextInsertTableTooltip": "Insérer un tableau",
         "richTextFormatButtonTooltip": "Format",
         "richTextInsertRowOrColumnMenu": "Insérer",
         "richTextInsertTableMenuTitle": "Insérer une table {column} x {row}",
         "richTextInsertRowAboveMenu": "Insérer au-dessus",
         "richTextInsertRowBelowMenu": "Insérer l’élément ci-dessous",
-        "richTextInsertColumnLeftMenu": "Insert left",
-        "richTextInsertColumnRightMenu": "Insert right",
+        "richTextInsertColumnLeftMenu": "Insérer à gauche",
+        "richTextInsertColumnRightMenu": "Insérer à droite",
         "richTextDeleteRowOrColumnMenu": "Supprimer",
-        "richTextDeleteColumnMenu": "Delete column",
-        "richTextDeleteRowMenu": "Delete row",
+        "richTextDeleteColumnMenu": "Supprimer la colonne",
+        "richTextDeleteRowMenu": "Supprimer une ligne",
         "richTextDeleteTableMenu": "Supprimer le tableau",
         "richTextToolbarMoreButtonAriaLabel": "More options",
         "attachmentMoreMenu": "Plus d’options"
@@ -202,24 +202,24 @@
         "attachmentCardGroupMessage": "Le message a {attachmentCount} pièce jointe",
         "messageDeletedAnnouncementAriaLabel": "Le message est supprimé",
         "richTextBoldTooltip": "Gras",
-        "richTextItalicTooltip": "Italic",
-        "richTextUnderlineTooltip": "Underline",
+        "richTextItalicTooltip": "Italique",
+        "richTextUnderlineTooltip": "Souligner",
         "richTextBulletListTooltip": "Liste à puces",
-        "richTextNumberListTooltip": "Numbered list",
+        "richTextNumberListTooltip": "Liste numérotée",
         "richTextIncreaseIndentTooltip": "Augmenter le retrait",
         "richTextDecreaseIndentTooltip": "Réduire le retrait",
         "richTextInsertTableTooltip": "Insérer un tableau",
         "richTextFormatButtonTooltip": "Format",
-        "richTextInsertRowOrColumnMenu": "Insert",
+        "richTextInsertRowOrColumnMenu": "Insérer",
         "richTextInsertTableMenuTitle": "Insérer une table {column} x {row}",
-        "richTextInsertRowAboveMenu": "Insert above",
-        "richTextInsertRowBelowMenu": "Insert below",
+        "richTextInsertRowAboveMenu": "Insérer au-dessus",
+        "richTextInsertRowBelowMenu": "Insérer l’élément ci-dessous",
         "richTextInsertColumnLeftMenu": "Insérer à gauche",
         "richTextInsertColumnRightMenu": "Insérer à droite",
-        "richTextDeleteRowOrColumnMenu": "Delete",
+        "richTextDeleteRowOrColumnMenu": "Supprimer",
         "richTextDeleteColumnMenu": "Supprimer la colonne",
         "richTextDeleteRowMenu": "Supprimer une ligne",
-        "richTextDeleteTableMenu": "Delete table",
+        "richTextDeleteTableMenu": "Supprimer le tableau",
         "richTextToolbarMoreButtonAriaLabel": "More options"
     },
     "errorBar": {

package/dist/dist-esm/react-components/src/localization/locales/he-IL/strings.json

@@ -57,7 +57,7 @@
         "richTextDeleteColumnMenu": "מחק עמודה",
         "richTextDeleteRowMenu": "מחק שורה",
         "richTextDeleteTableMenu": "מחק טבלה",
-        "richTextToolbarMoreButtonAriaLabel": "More options",
+        "richTextToolbarMoreButtonAriaLabel": "אפשרויות נוספות",
         "attachmentMoreMenu": "אפשרויות נוספות"
     },
     "mentionPopover": {
@@ -220,7 +220,7 @@
         "richTextDeleteColumnMenu": "מחק עמודה",
         "richTextDeleteRowMenu": "מחק שורה",
         "richTextDeleteTableMenu": "מחק טבלה",
-        "richTextToolbarMoreButtonAriaLabel": "More options"
+        "richTextToolbarMoreButtonAriaLabel": "אפשרויות נוספות"
     },
     "errorBar": {
         "unableToReachChatService": "אתה נמצא במצב לא מקוון",

package/dist/dist-esm/react-components/src/localization/locales/ja-JP/strings.json

@@ -38,26 +38,26 @@
         "removeAttachment": "ファイルを削除します",
         "uploading": "アップロード中",
         "uploadCompleted": "アップロード完了",
-        "richTextBoldTooltip": "Bold",
+        "richTextBoldTooltip": "太字",
         "richTextItalicTooltip": "斜体",
         "richTextUnderlineTooltip": "下線",
-        "richTextBulletListTooltip": "Bulleted list",
+        "richTextBulletListTooltip": "箇条書き",
         "richTextNumberListTooltip": "番号付きリスト",
-        "richTextIncreaseIndentTooltip": "Increase indent",
-        "richTextDecreaseIndentTooltip": "Decrease indent",
-        "richTextInsertTableTooltip": "Insert table",
+        "richTextIncreaseIndentTooltip": "インデントを増やします",
+        "richTextDecreaseIndentTooltip": "インデントを減らします",
+        "richTextInsertTableTooltip": "表を挿入します",
         "richTextFormatButtonTooltip": "形式",
         "richTextInsertRowOrColumnMenu": "挿入",
         "richTextInsertTableMenuTitle": "{column} x {row} の表を挿入する",
         "richTextInsertRowAboveMenu": "上に挿入",
         "richTextInsertRowBelowMenu": "下に挿入",
-        "richTextInsertColumnLeftMenu": "Insert left",
-        "richTextInsertColumnRightMenu": "Insert right",
+        "richTextInsertColumnLeftMenu": "左に挿入",
+        "richTextInsertColumnRightMenu": "右に挿入",
         "richTextDeleteRowOrColumnMenu": "削除",
-        "richTextDeleteColumnMenu": "Delete column",
-        "richTextDeleteRowMenu": "Delete row",
+        "richTextDeleteColumnMenu": "列の削除",
+        "richTextDeleteRowMenu": "行の削除",
         "richTextDeleteTableMenu": "表の削除",
-        "richTextToolbarMoreButtonAriaLabel": "More options",
+        "richTextToolbarMoreButtonAriaLabel": "その他のオプション",
         "attachmentMoreMenu": "その他のオプション"
     },
     "mentionPopover": {
@@ -202,25 +202,25 @@
         "attachmentCardGroupMessage": "メッセージに添付ファイルが {attachmentCount} 個あります",
         "messageDeletedAnnouncementAriaLabel": "メッセージが削除されます",
         "richTextBoldTooltip": "太字",
-        "richTextItalicTooltip": "Italic",
-        "richTextUnderlineTooltip": "Underline",
+        "richTextItalicTooltip": "斜体",
+        "richTextUnderlineTooltip": "下線",
         "richTextBulletListTooltip": "箇条書き",
-        "richTextNumberListTooltip": "Numbered list",
+        "richTextNumberListTooltip": "番号付きリスト",
         "richTextIncreaseIndentTooltip": "インデントを増やす",
         "richTextDecreaseIndentTooltip": "インデントを減らす",
         "richTextInsertTableTooltip": "表の挿入",
-        "richTextFormatButtonTooltip": "Format",
-        "richTextInsertRowOrColumnMenu": "Insert",
+        "richTextFormatButtonTooltip": "書式設定します",
+        "richTextInsertRowOrColumnMenu": "挿入",
         "richTextInsertTableMenuTitle": "{column} x {row} の表を挿入する",
-        "richTextInsertRowAboveMenu": "Insert above",
-        "richTextInsertRowBelowMenu": "Insert below",
+        "richTextInsertRowAboveMenu": "上に挿入",
+        "richTextInsertRowBelowMenu": "下に挿入",
         "richTextInsertColumnLeftMenu": "左に挿入",
         "richTextInsertColumnRightMenu": "右に挿入",
-        "richTextDeleteRowOrColumnMenu": "Delete",
+        "richTextDeleteRowOrColumnMenu": "削除",
         "richTextDeleteColumnMenu": "列の削除",
         "richTextDeleteRowMenu": "行の削除",
-        "richTextDeleteTableMenu": "Delete table",
-        "richTextToolbarMoreButtonAriaLabel": "More options"
+        "richTextDeleteTableMenu": "テーブルの削除",
+        "richTextToolbarMoreButtonAriaLabel": "その他のオプション"
     },
     "errorBar": {
         "unableToReachChatService": "オフラインです",

package/dist/dist-esm/react-components/src/localization/locales/ko-KR/strings.json

@@ -38,26 +38,26 @@
         "removeAttachment": "파일 제거",
         "uploading": "업로드 중",
         "uploadCompleted": "업로드 완료",
-        "richTextBoldTooltip": "Bold",
+        "richTextBoldTooltip": "굵게",
         "richTextItalicTooltip": "기울임꼴",
         "richTextUnderlineTooltip": "밑줄",
-        "richTextBulletListTooltip": "Bulleted list",
+        "richTextBulletListTooltip": "글머리 기호 목록",
         "richTextNumberListTooltip": "번호 매기기 목록",
-        "richTextIncreaseIndentTooltip": "Increase indent",
-        "richTextDecreaseIndentTooltip": "Decrease indent",
-        "richTextInsertTableTooltip": "Insert table",
+        "richTextIncreaseIndentTooltip": "들여쓰기",
+        "richTextDecreaseIndentTooltip": "내어쓰기",
+        "richTextInsertTableTooltip": "표 삽입",
         "richTextFormatButtonTooltip": "형식",
         "richTextInsertRowOrColumnMenu": "삽입",
         "richTextInsertTableMenuTitle": "{column} x {row} 표 삽입",
         "richTextInsertRowAboveMenu": "위에 삽입",
         "richTextInsertRowBelowMenu": "아래에 삽입",
-        "richTextInsertColumnLeftMenu": "Insert left",
-        "richTextInsertColumnRightMenu": "Insert right",
+        "richTextInsertColumnLeftMenu": "왼쪽에 삽입",
+        "richTextInsertColumnRightMenu": "오른쪽에 삽입",
         "richTextDeleteRowOrColumnMenu": "삭제",
-        "richTextDeleteColumnMenu": "Delete column",
-        "richTextDeleteRowMenu": "Delete row",
+        "richTextDeleteColumnMenu": "열 삭제",
+        "richTextDeleteRowMenu": "행 삭제",
         "richTextDeleteTableMenu": "표 삭제",
-        "richTextToolbarMoreButtonAriaLabel": "More options",
+        "richTextToolbarMoreButtonAriaLabel": "옵션 더 보기",
         "attachmentMoreMenu": "옵션 더 보기"
     },
     "mentionPopover": {
@@ -202,25 +202,25 @@
         "attachmentCardGroupMessage": "메시지에 {attachmentCount}개의 첨부 파일이 있습니다.",
         "messageDeletedAnnouncementAriaLabel": "메시지가 삭제되었습니다.",
         "richTextBoldTooltip": "굵게",
-        "richTextItalicTooltip": "Italic",
-        "richTextUnderlineTooltip": "Underline",
+        "richTextItalicTooltip": "기울임꼴",
+        "richTextUnderlineTooltip": "밑줄",
         "richTextBulletListTooltip": "글머리 기호 목록",
-        "richTextNumberListTooltip": "Numbered list",
+        "richTextNumberListTooltip": "번호 매기기 목록",
         "richTextIncreaseIndentTooltip": "들여쓰기",
         "richTextDecreaseIndentTooltip": "내어쓰기",
         "richTextInsertTableTooltip": "표 삽입",
-        "richTextFormatButtonTooltip": "Format",
-        "richTextInsertRowOrColumnMenu": "Insert",
+        "richTextFormatButtonTooltip": "형식",
+        "richTextInsertRowOrColumnMenu": "삽입",
         "richTextInsertTableMenuTitle": "{column} x {row} 표 삽입",
-        "richTextInsertRowAboveMenu": "Insert above",
-        "richTextInsertRowBelowMenu": "Insert below",
+        "richTextInsertRowAboveMenu": "위에 삽입",
+        "richTextInsertRowBelowMenu": "아래에 삽입",
         "richTextInsertColumnLeftMenu": "왼쪽에 삽입",
         "richTextInsertColumnRightMenu": "오른쪽에 삽입",
-        "richTextDeleteRowOrColumnMenu": "Delete",
+        "richTextDeleteRowOrColumnMenu": "삭제",
         "richTextDeleteColumnMenu": "열 삭제",
         "richTextDeleteRowMenu": "행 삭제",
-        "richTextDeleteTableMenu": "Delete table",
-        "richTextToolbarMoreButtonAriaLabel": "More options"
+        "richTextDeleteTableMenu": "표 삭제",
+        "richTextToolbarMoreButtonAriaLabel": "옵션 더 보기"
     },
     "errorBar": {
         "unableToReachChatService": "오프라인 상태입니다.",

package/dist/dist-esm/react-components/src/localization/locales/nb-NO/strings.json

@@ -57,7 +57,7 @@
         "richTextDeleteColumnMenu": "Slett kolonne",
         "richTextDeleteRowMenu": "Slett rad",
         "richTextDeleteTableMenu": "Slett tabell",
-        "richTextToolbarMoreButtonAriaLabel": "More options",
+        "richTextToolbarMoreButtonAriaLabel": "Flere alternativer",
         "attachmentMoreMenu": "Flere alternativer"
     },
     "mentionPopover": {
@@ -220,7 +220,7 @@
         "richTextDeleteColumnMenu": "Slett kolonne",
         "richTextDeleteRowMenu": "Slett rad",
         "richTextDeleteTableMenu": "Slett tabell",
-        "richTextToolbarMoreButtonAriaLabel": "More options"
+        "richTextToolbarMoreButtonAriaLabel": "Flere alternativer"
     },
     "errorBar": {
         "unableToReachChatService": "Du er frakoblet",

package/dist/dist-esm/react-components/src/localization/locales/nl-NL/strings.json

@@ -57,7 +57,7 @@
         "richTextDeleteColumnMenu": "Kolom verwijderen",
         "richTextDeleteRowMenu": "Rij verwijderen",
         "richTextDeleteTableMenu": "Tabel verwijderen",
-        "richTextToolbarMoreButtonAriaLabel": "More options",
+        "richTextToolbarMoreButtonAriaLabel": "Meer opties",
         "attachmentMoreMenu": "Meer opties"
     },
     "mentionPopover": {
@@ -220,7 +220,7 @@
         "richTextDeleteColumnMenu": "Kolom verwijderen",
         "richTextDeleteRowMenu": "Rij verwijderen",
         "richTextDeleteTableMenu": "Tabel verwijderen",
-        "richTextToolbarMoreButtonAriaLabel": "More options"
+        "richTextToolbarMoreButtonAriaLabel": "Meer opties"
     },
     "errorBar": {
         "unableToReachChatService": "U bent offline",

package/dist/dist-esm/react-components/src/localization/locales/pl-PL/strings.json

@@ -57,7 +57,7 @@
         "richTextDeleteColumnMenu": "Usuń kolumnę",
         "richTextDeleteRowMenu": "Usuń wiersz",
         "richTextDeleteTableMenu": "Usuń tabelę",
-        "richTextToolbarMoreButtonAriaLabel": "More options",
+        "richTextToolbarMoreButtonAriaLabel": "Więcej opcji",
         "attachmentMoreMenu": "Więcej opcji"
     },
     "mentionPopover": {
@@ -220,7 +220,7 @@
         "richTextDeleteColumnMenu": "Usuń kolumnę",
         "richTextDeleteRowMenu": "Usuń wiersz",
         "richTextDeleteTableMenu": "Usuń tabelę",
-        "richTextToolbarMoreButtonAriaLabel": "More options"
+        "richTextToolbarMoreButtonAriaLabel": "Więcej opcji"
     },
     "errorBar": {
         "unableToReachChatService": "Jesteś w trybie offline",