@azure/communication-react 1.14.0 → 1.14.1-alpha-202403210013

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":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,sBAAsB,EAA+F,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC7J,OAAO,EAAE,aAAa,EAAE,mCAAgC;AACxD,OAAO,IAAI,MAAM,mBAAmB,CAAC;AACrC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,eAAe,EAA6E,MAAM,mBAAmB,CAAC;AAC/H,OAAO,EAAE,gCAAgC,EAAE,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAiD,MAAM,oBAAoB,CAAC;AACrG,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAIhD,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,sBAAsB,IAAI,qBAAqB,EAAE,mCAAgC;AAC1F,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AA4HxC;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAe,EAAE;;IAChF,MAAM,EACJ,iBAAiB,EACjB,MAAM,EACN,SAAS,EACT,YAAY,EACZ,uBAAuB,EACvB,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,mBAAmB,EACnB,cAAc,EACd,mBAAmB,EACnB,2BAA2B,EAC3B,8BAA8B,EAC/B,GAAG,KAAK,CAAC;IACV,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC;IAChC,MAAM,CAAC,8BAA8B,EAAE,iCAAiC,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IACjG,MAAM,kBAAkB,GAAG,GAAgB,EAAE,CAAC,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAC,2BAA2B,GAAG,CAAC;IAClI,MAAM,GAAG,GAAG,cAAc,EAAE,CAAC;IAC7B,MAAM,iBAAiB,GAAG,WAAW,CAAC,GAAG,EAAE;QACzC,IAAI,SAAS,EAAE,CAAC;YACd,SAAS,EAAE,CAAC;QACd,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAChB,MAAM,sBAAsB,GAAG,WAAW,CAAC,GAAG,EAAE;;QAC9C,OAAO,oBAAC,eAAe,IAAC,YAAY,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,cAAc,EAAE,cAAc,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,2BAA2B,EAAE,2BAA2B,EAAE,MAAM,EAAE,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,0CAAE,qBAAqB,EAAE,8BAA8B,EAAE,8BAA8B,GAAI,CAAC;IACpY,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,mBAAmB,EAAE,cAAc,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,0CAAE,qBAAqB,EAAE,2BAA2B,EAAE,8BAA8B,CAAC,CAAC,CAAC;IAC1M,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE;QACtC,IAAI,iBAAiB,EAAE,CAAC;YACtB,OAAO,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACjC,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC;IACxB,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,kBAAkB,CAAC;IAC7D,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,iCACzB,aAAa,GACb,KAAK,CAAC,OAAO,EAChB,EAAE,CAAC,aAAa,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IACpC,MAAM,gBAAgB,GAAG,YAAY,CAAC,MAAM,CAAC;IAE7C;;OAEG;IACH,MAAM,qBAAqB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7C,iCAAiC,CAAC,OAAO,CAAC,+BAA+B,CAAC,CAAC;QAC3E;;;WAGG;QACH,UAAU,CAAC,GAAG,EAAE;YACd,iCAAiC,CAAC,EAAE,CAAC,CAAC;QACxC,CAAC,EAAE,IAAI,CAAC,CAAC;IACX,CAAC,EAAE,CAAC,OAAO,CAAC,+BAA+B,CAAC,CAAC,CAAC;IAC9C,MAAM,uCAAuC,GAAG,WAAW,CAAC,GAA0B,EAAE;;QACtF,MAAM,KAAK,GAA0B,EAAE,CAAC;QACxC,IAAI,gBAAgB,GAAG,CAAC,EAAE,CAAC;YACzB,KAAK,CAAC,IAAI,CAAC;gBACT,GAAG,EAAE,4BAA4B;gBACjC,QAAQ,EAAE,uBAAuB,aAAvB,uBAAuB,cAAvB,uBAAuB,GAAI,sBAAsB;aAC5D,CAAC,CAAC;YACH,KAAK,CAAC,IAAI,CAAC;gBACT,GAAG,EAAE,sBAAsB;gBAC3B,QAAQ,EAAE,sBAAsB,CAAC,OAAO;aACzC,CAAC,CAAC;YACH,IAAI,SAAS,EAAE,CAAC;gBACd,KAAK,CAAC,IAAI,CAAC;oBACT,GAAG,EAAE,YAAY;oBACjB,IAAI,EAAE,OAAO,CAAC,kBAAkB;oBAChC,KAAK,EAAE,OAAO,CAAC,kBAAkB;oBACjC,MAAM,EAAE,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,0CAAE,cAAc;oBAC1C,SAAS,EAAE;wBACT,QAAQ,EAAE,SAAS;qBACpB;oBACD,OAAO,EAAE,iBAAiB;iBAC3B,CAAC,CAAC;YACL,CAAC;QACH,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,gBAAgB,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,SAAS,EAAE,OAAO,CAAC,kBAAkB,EAAE,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,0CAAE,cAAc,EAAE,iBAAiB,CAAC,CAAC,CAAC;IACtK,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAyB,EAAE;;QAC1D,MAAM,SAAS,GAAyB;YACtC,KAAK,EAAE,OAAO,CAAC,UAAU;YACzB,SAAS,EAAE,OAAO,CAAC,UAAU;YAC7B,MAAM,EAAE,KAAK,CAAC,gCAAgC,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,CAAC;YACnE,KAAK,EAAE,EAAE;YACT,YAAY,EAAE;gBACZ,qBAAqB;aACtB;SACF,CAAC;QACF,IAAI,gBAAgB,GAAG,CAAC,EAAE,CAAC;YACzB,MAAM,cAAc,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;YACvD,IAAI,yBAAyB,GAAG,cAAc,CAAC,MAAM,CAAC;YACtD,IAAI,SAAS,EAAE,CAAC;gBACd,yBAAyB,IAAI,CAAC,CAAC;YACjC,CAAC;YACD,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC;gBACnB,GAAG,EAAE,qBAAqB;gBAC1B,IAAI,EAAE,aAAa,CAAC,OAAO,CAAC,2BAA2B,EAAE;oBACvD,eAAe,EAAE,GAAG,yBAAyB,EAAE;iBAChD,CAAC;gBACF,SAAS,EAAE;oBACT,MAAM,EAAE,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,0CAAE,cAAc;iBAC3C;gBACD,SAAS,EAAE;oBACT,QAAQ,EAAE,QAAQ;iBACnB;gBACD,YAAY,EAAE;oBACZ,KAAK,EAAE,uCAAuC,EAAE;oBAChD,YAAY,EAAE;wBACZ,MAAM,EAAE;4BACN,IAAI,EAAE;gCACJ,0CAA0C;gCAC1C,gEAAgE;gCAChE,QAAQ,EAAE,MAAM;6BACjB;yBACF;wBACD,KAAK,EAAE;4BACL,SAAS,EAAE,OAAO;yBACnB;wBACD,mEAAmE;wBACnE,kDAAkD;wBAClD,qBAAqB;qBACtB;iBACF;gBACD,YAAY,EAAE,GAAG,CAAC,+BAA+B;aAClD,CAAC,CAAC;QACL,CAAC;QACD,IAAI,iBAAiB,EAAE,CAAC;YACtB,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC;gBACnB,GAAG,EAAE,eAAe;gBACpB,IAAI,EAAE,OAAO,CAAC,yBAAyB;gBACvC,KAAK,EAAE,OAAO,CAAC,yBAAyB;gBACxC,SAAS,EAAE;oBACT,MAAM,EAAE,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,0CAAE,cAAc;iBAC3C;gBACD,SAAS,EAAE;oBACT,QAAQ,EAAE,MAAM;iBACjB;gBACD,OAAO,EAAE,GAAG,EAAE;oBACZ,cAAc,EAAE,CAAC;oBACjB,qBAAqB,EAAE,CAAC;gBAC1B,CAAC;aACF,CAAC,CAAC;QACL,CAAC;QACD,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,EAAE,OAAO,CAAC,2BAA2B,EAAE,OAAO,CAAC,yBAAyB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,CAAC,+BAA+B,EAAE,uCAAuC,EAAE,cAAc,EAAE,qBAAqB,CAAC,CAAC,CAAC;IACxS,OAAO;QACH,oBAAC,SAAS,IAAC,kBAAkB,EAAE,8BAA8B,EAAE,QAAQ,EAAE,QAAQ,GAAI;QACrF,oBAAC,gBAAgB,oBAAK,KAAK,IAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAA,KAAK,CAAC,SAAS,mCAAI,gBAAgB,EAAE,aAAa,EAAE;gBAChH,MAAM,EAAE,IAAI;aACb,EAAE,YAAY,EAAE,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,kBAAkB,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAA,KAAK,CAAC,QAAQ,mCAAI,yBAAyB,IAAI,CAC7H,CAAC;AACR,CAAC,CAAC","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',

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

@@ -1 +1 @@
-{"version":3,"file":"PictureInPictureInPicture.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/PictureInPictureInPicture/PictureInPictureInPicture.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,oCAAoC,EAAE,sCAAsC,EAAuC,MAAM,iCAAiC,CAAC;AA2BpK;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,KAAsC,EAAe,EAAE;IAChG,OAAO,oBAAC,kCAAkC,IAAC,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,WAAW,EAAE,oBAAC,oCAAoC,oBAAK,KAAK,CAAC,WAAW,EAAI,EAAE,aAAa,EAAE,KAAK,CAAC,aAAa,IAAI,oBAAC,sCAAsC,oBAAK,KAAK,CAAC,aAAa,EAAI,EAAE,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,aAAa,GAAI,CAAC;AACzS,CAAC,CAAC;AACF;;;GAGG;AACH,MAAM,kCAAkC,GAAG,CAAC,KAK3C,EAAe,EAAE;IAChB,MAAM,UAAU,GAAG,CAAC,CAAmC,EAAQ,EAAE,CAAC,KAAK,CAAC,OAAO,IAAI,kBAAkB,CAAC,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IACxH,OAAO,+BAAO,KAAK,EAAE,mBAAmB,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,UAAU,EAAE,UAAU,gBAAc,KAAK,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,gBAC5I,oCAAoC;QAC1C,KAAK,CAAC,WAAW;QAClB,6BAAK,KAAK,EAAE,2BAA2B,IAAG,KAAK,CAAC,aAAa,CAAO,CAC9D,CAAC;AACb,CAAC,CAAC;AACF,MAAM,mBAAmB,GAAwB;IAC/C,OAAO,EAAE,MAAM;IACf,KAAK,EAAE,aAAa;IACpB,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,SAAS;CAClB,CAAC;AACF,MAAM,2BAA2B,GAAwB;IACvD,uFAAuF;IACvF,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,UAAU;IAClB,KAAK,EAAE,UAAU;CAClB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { ReactChild } from 'react';\nimport { submitWithKeyboard } from '../utils/keyboardNavigation';\nimport { PictureInPictureInPicturePrimaryTile, PictureInPictureInPictureSecondaryTile, _PictureInPictureInPictureTileProps } from './PictureInPictureInPictureTile';\n\n/**\n * Strings of {@link _PictureInPictureInPicture} that can be overridden.\n *\n * @internal\n */\nexport interface _PictureInPictureInPictureStrings {\n  /** Aria-label for the focusable root of the PictureInPictureInPicture component. */\n  rootAriaLabel: string;\n}\n\n/**\n * Props for {@link _PictureInPictureInPicture} component.\n *\n * @internal\n */\nexport interface _PictureInPictureInPictureProps {\n  /**\n   * Callback when the {@link _PictureInPictureInPicture} is clicked.\n   */\n  onClick?: () => void;\n  primaryTile: _PictureInPictureInPictureTileProps;\n  secondaryTile?: _PictureInPictureInPictureTileProps;\n  strings: _PictureInPictureInPictureStrings;\n}\n\n/**\n * Component that displays a video feed for use as a Picture-in-Picture style component.\n * It contains a secondary video feed resulting in an inner Picture-in-Picture style feed.\n *\n * @remarks\n * The double nature of the Picture-in-Picture styles is where this component gets its name; Picture-in-Picture-in-Picture.\n *\n * @internal\n */\nexport const _PictureInPictureInPicture = (props: _PictureInPictureInPictureProps): JSX.Element => {\n  return <PictureInPictureInPictureContainer onClick={props.onClick} primaryView={<PictureInPictureInPicturePrimaryTile {...props.primaryTile} />} secondaryView={props.secondaryTile && <PictureInPictureInPictureSecondaryTile {...props.secondaryTile} />} ariaLabel={props.strings.rootAriaLabel} />;\n};\n/**\n * Container for the picture in picture in picture component.\n * This governs positioning and floating of the secondary PiP.\n */\nconst PictureInPictureInPictureContainer = (props: {\n  primaryView: ReactChild;\n  secondaryView?: ReactChild;\n  onClick?: () => void;\n  ariaLabel: string;\n}): JSX.Element => {\n  const onKeyPress = (e: React.KeyboardEvent<HTMLElement>): void => props.onClick && submitWithKeyboard(e, props.onClick);\n  return <aside style={tileContainerStyles} onClick={props.onClick} onKeyPress={onKeyPress} aria-label={props.ariaLabel} tabIndex={props.onClick ? 0 : -1} // Only allow focus to be set if there is a click handler\n  data-ui-id=\"picture-in-picture-in-picture-root\">\n      {props.primaryView}\n      <div style={secondaryTileFloatingStyles}>{props.secondaryView}</div>\n    </aside>;\n};\nconst tileContainerStyles: React.CSSProperties = {\n  display: 'flex',\n  width: 'min-content',\n  position: 'relative',\n  cursor: 'pointer'\n};\nconst secondaryTileFloatingStyles: React.CSSProperties = {\n  // The secondary tile should float above the primary tile, aligned to the bottom right.\n  position: 'absolute',\n  bottom: '0.125rem',\n  right: '0.125rem'\n};"]}
+{"version":3,"file":"PictureInPictureInPicture.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/PictureInPictureInPicture/PictureInPictureInPicture.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EACL,oCAAoC,EACpC,sCAAsC,EAEvC,MAAM,iCAAiC,CAAC;AA6BzC;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,KAAsC,EAAe,EAAE;IAChG,OAAO,CACL,oBAAC,kCAAkC,IACjC,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,oBAAC,oCAAoC,oBAAK,KAAK,CAAC,WAAW,EAAI,EAC5E,aAAa,EAAE,KAAK,CAAC,aAAa,IAAI,oBAAC,sCAAsC,oBAAK,KAAK,CAAC,aAAa,EAAI,EACzG,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,aAAa,GACtC,CACH,CAAC;AACJ,CAAC,CAAC;AACF;;;GAGG;AACH,MAAM,kCAAkC,GAAG,CAAC,KAK3C,EAAe,EAAE;IAChB,MAAM,UAAU,GAAG,CAAC,CAAmC,EAAQ,EAAE,CAC/D,KAAK,CAAC,OAAO,IAAI,kBAAkB,CAAC,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IAExD,OAAO,CACL,+BACE,KAAK,EAAE,mBAAmB,EAC1B,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,UAAU,EAAE,UAAU,gBACV,KAAK,CAAC,SAAS,EAC3B,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,gBACrB,oCAAoC;QAE9C,KAAK,CAAC,WAAW;QAClB,6BAAK,KAAK,EAAE,2BAA2B,IAAG,KAAK,CAAC,aAAa,CAAO,CAC9D,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,mBAAmB,GAAwB;IAC/C,OAAO,EAAE,MAAM;IACf,KAAK,EAAE,aAAa;IACpB,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,SAAS;CAClB,CAAC;AAEF,MAAM,2BAA2B,GAAwB;IACvD,uFAAuF;IACvF,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,UAAU;IAClB,KAAK,EAAE,UAAU;CAClB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { ReactChild } from 'react';\nimport { submitWithKeyboard } from '../utils/keyboardNavigation';\nimport {\n  PictureInPictureInPicturePrimaryTile,\n  PictureInPictureInPictureSecondaryTile,\n  _PictureInPictureInPictureTileProps\n} from './PictureInPictureInPictureTile';\n\n/**\n * Strings of {@link _PictureInPictureInPicture} that can be overridden.\n *\n * @internal\n */\nexport interface _PictureInPictureInPictureStrings {\n  /** Aria-label for the focusable root of the PictureInPictureInPicture component. */\n  rootAriaLabel: string;\n}\n\n/**\n * Props for {@link _PictureInPictureInPicture} component.\n *\n * @internal\n */\nexport interface _PictureInPictureInPictureProps {\n  /**\n   * Callback when the {@link _PictureInPictureInPicture} is clicked.\n   */\n  onClick?: () => void;\n\n  primaryTile: _PictureInPictureInPictureTileProps;\n  secondaryTile?: _PictureInPictureInPictureTileProps;\n\n  strings: _PictureInPictureInPictureStrings;\n}\n\n/**\n * Component that displays a video feed for use as a Picture-in-Picture style component.\n * It contains a secondary video feed resulting in an inner Picture-in-Picture style feed.\n *\n * @remarks\n * The double nature of the Picture-in-Picture styles is where this component gets its name; Picture-in-Picture-in-Picture.\n *\n * @internal\n */\nexport const _PictureInPictureInPicture = (props: _PictureInPictureInPictureProps): JSX.Element => {\n  return (\n    <PictureInPictureInPictureContainer\n      onClick={props.onClick}\n      primaryView={<PictureInPictureInPicturePrimaryTile {...props.primaryTile} />}\n      secondaryView={props.secondaryTile && <PictureInPictureInPictureSecondaryTile {...props.secondaryTile} />}\n      ariaLabel={props.strings.rootAriaLabel}\n    />\n  );\n};\n/**\n * Container for the picture in picture in picture component.\n * This governs positioning and floating of the secondary PiP.\n */\nconst PictureInPictureInPictureContainer = (props: {\n  primaryView: ReactChild;\n  secondaryView?: ReactChild;\n  onClick?: () => void;\n  ariaLabel: string;\n}): JSX.Element => {\n  const onKeyPress = (e: React.KeyboardEvent<HTMLElement>): void =>\n    props.onClick && submitWithKeyboard(e, props.onClick);\n\n  return (\n    <aside\n      style={tileContainerStyles}\n      onClick={props.onClick}\n      onKeyPress={onKeyPress}\n      aria-label={props.ariaLabel}\n      tabIndex={props.onClick ? 0 : -1} // Only allow focus to be set if there is a click handler\n      data-ui-id=\"picture-in-picture-in-picture-root\"\n    >\n      {props.primaryView}\n      <div style={secondaryTileFloatingStyles}>{props.secondaryView}</div>\n    </aside>\n  );\n};\n\nconst tileContainerStyles: React.CSSProperties = {\n  display: 'flex',\n  width: 'min-content',\n  position: 'relative',\n  cursor: 'pointer'\n};\n\nconst secondaryTileFloatingStyles: React.CSSProperties = {\n  // The secondary tile should float above the primary tile, aligned to the bottom right.\n  position: 'absolute',\n  bottom: '0.125rem',\n  right: '0.125rem'\n};\n"]}

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

@@ -6,11 +6,11 @@ import { useTheme } from '../../theming/FluentThemeProvider';
 /** @private */
 export const PictureInPictureInPicturePrimaryTile = (props) => {
     const boxShadow = useTheme().effects.elevation8;
-    return React.createElement(PictureInPictureInPictureTile, { styles: primaryTileStyles(props.orientation, boxShadow) }, props.children);
+    return (React.createElement(PictureInPictureInPictureTile, { styles: primaryTileStyles(props.orientation, boxShadow) }, props.children));
 };
 /** @private */
-export const PictureInPictureInPictureSecondaryTile = (props) => React.createElement(PictureInPictureInPictureTile, { styles: secondaryTileStyles(props.orientation) }, props.children);
-const PictureInPictureInPictureTile = (props) => React.createElement(Stack, { styles: props.styles }, props.children);
+export const PictureInPictureInPictureSecondaryTile = (props) => (React.createElement(PictureInPictureInPictureTile, { styles: secondaryTileStyles(props.orientation) }, props.children));
+const PictureInPictureInPictureTile = (props) => (React.createElement(Stack, { styles: props.styles }, props.children));
 const primaryTileStyles = memoizeFunction((orientation, themeElevation) => ({
     root: {
         borderRadius: '0.25rem',

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

@@ -1 +1 @@
-{"version":3,"file":"PictureInPictureInPictureTile.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/PictureInPictureInPicture/PictureInPictureInPictureTile.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAgB,eAAe,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAU7D,eAAe;AACf,MAAM,CAAC,MAAM,oCAAoC,GAAG,CAAC,KAA0C,EAAgB,EAAE;IAC/G,MAAM,SAAS,GAAG,QAAQ,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC;IAChD,OAAO,oBAAC,6BAA6B,IAAC,MAAM,EAAE,iBAAiB,CAAC,KAAK,CAAC,WAAW,EAAE,SAAS,CAAC,IACxF,KAAK,CAAC,QAAQ,CACe,CAAC;AACrC,CAAC,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,sCAAsC,GAAG,CAAC,KAA0C,EAAgB,EAAE,CAAC,oBAAC,6BAA6B,IAAC,MAAM,EAAE,mBAAmB,CAAC,KAAK,CAAC,WAAW,CAAC,IAC5L,KAAK,CAAC,QAAQ,CACe,CAAC;AACnC,MAAM,6BAA6B,GAAG,CAAC,KAErC,EAAgB,EAAE,CAAC,oBAAC,KAAK,IAAC,MAAM,EAAE,KAAK,CAAC,MAAM,IAAG,KAAK,CAAC,QAAQ,CAAS,CAAC;AAC3E,MAAM,iBAAiB,GAAG,eAAe,CAAC,CAAC,WAA6B,EAAE,cAAsB,EAAgB,EAAE,CAAC,CAAC;IAClH,IAAI,EAAE;QACJ,YAAY,EAAE,SAAS;QACvB,MAAM,EAAE,WAAW,KAAK,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;QACvD,KAAK,EAAE,WAAW,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;QACtD,SAAS,EAAE,cAAc;QACzB,kHAAkH;QAClH,QAAQ,EAAE,QAAQ;KACnB;CACF,CAAC,CAAC,CAAC;AACJ,MAAM,mBAAmB,GAAG,eAAe,CAAC,CAAC,WAA6B,EAAgB,EAAE,CAAC,CAAC;IAC5F,IAAI,EAAE;QACJ,YAAY,EAAE,SAAS;QACvB,MAAM,EAAE,WAAW,KAAK,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM;QACzD,KAAK,EAAE,WAAW,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU;QACxD,kHAAkH;QAClH,QAAQ,EAAE,QAAQ;KACnB;CACF,CAAC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStackStyles, memoizeFunction, Stack } from '@fluentui/react';\nimport React, { ReactElement, PropsWithChildren } from 'react';\nimport { useTheme } from '../../theming/FluentThemeProvider';\n\n/** @internal */\nexport type _TileOrientation = 'portrait' | 'landscape';\n\n/** @internal */\nexport type _PictureInPictureInPictureTileProps = PropsWithChildren<{\n  orientation: _TileOrientation;\n}>;\n\n/** @private */\nexport const PictureInPictureInPicturePrimaryTile = (props: _PictureInPictureInPictureTileProps): ReactElement => {\n  const boxShadow = useTheme().effects.elevation8;\n  return <PictureInPictureInPictureTile styles={primaryTileStyles(props.orientation, boxShadow)}>\n      {props.children}\n    </PictureInPictureInPictureTile>;\n};\n\n/** @private */\nexport const PictureInPictureInPictureSecondaryTile = (props: _PictureInPictureInPictureTileProps): ReactElement => <PictureInPictureInPictureTile styles={secondaryTileStyles(props.orientation)}>\n    {props.children}\n  </PictureInPictureInPictureTile>;\nconst PictureInPictureInPictureTile = (props: PropsWithChildren<{\n  styles: IStackStyles;\n}>): ReactElement => <Stack styles={props.styles}>{props.children}</Stack>;\nconst primaryTileStyles = memoizeFunction((orientation: _TileOrientation, themeElevation: string): IStackStyles => ({\n  root: {\n    borderRadius: '0.25rem',\n    height: orientation === 'landscape' ? '5.5rem' : '8rem',\n    width: orientation === 'landscape' ? '8rem' : '5.5rem',\n    boxShadow: themeElevation,\n    // PiPiP tiles were not designed to host scrollable content. If removed check no scrollbar is showing in e2e tests\n    overflow: 'hidden'\n  }\n}));\nconst secondaryTileStyles = memoizeFunction((orientation: _TileOrientation): IStackStyles => ({\n  root: {\n    borderRadius: '0.25rem',\n    height: orientation === 'landscape' ? '1.625rem' : '2rem',\n    width: orientation === 'landscape' ? '2rem' : '1.625rem',\n    // PiPiP tiles were not designed to host scrollable content. If removed check no scrollbar is showing in e2e tests\n    overflow: 'hidden'\n  }\n}));"]}
+{"version":3,"file":"PictureInPictureInPictureTile.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/PictureInPictureInPicture/PictureInPictureInPictureTile.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAgB,eAAe,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAU7D,eAAe;AACf,MAAM,CAAC,MAAM,oCAAoC,GAAG,CAAC,KAA0C,EAAgB,EAAE;IAC/G,MAAM,SAAS,GAAG,QAAQ,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC;IAChD,OAAO,CACL,oBAAC,6BAA6B,IAAC,MAAM,EAAE,iBAAiB,CAAC,KAAK,CAAC,WAAW,EAAE,SAAS,CAAC,IACnF,KAAK,CAAC,QAAQ,CACe,CACjC,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,sCAAsC,GAAG,CAAC,KAA0C,EAAgB,EAAE,CAAC,CAClH,oBAAC,6BAA6B,IAAC,MAAM,EAAE,mBAAmB,CAAC,KAAK,CAAC,WAAW,CAAC,IAC1E,KAAK,CAAC,QAAQ,CACe,CACjC,CAAC;AAEF,MAAM,6BAA6B,GAAG,CAAC,KAAkD,EAAgB,EAAE,CAAC,CAC1G,oBAAC,KAAK,IAAC,MAAM,EAAE,KAAK,CAAC,MAAM,IAAG,KAAK,CAAC,QAAQ,CAAS,CACtD,CAAC;AAEF,MAAM,iBAAiB,GAAG,eAAe,CACvC,CAAC,WAA6B,EAAE,cAAsB,EAAgB,EAAE,CAAC,CAAC;IACxE,IAAI,EAAE;QACJ,YAAY,EAAE,SAAS;QACvB,MAAM,EAAE,WAAW,KAAK,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;QACvD,KAAK,EAAE,WAAW,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;QACtD,SAAS,EAAE,cAAc;QACzB,kHAAkH;QAClH,QAAQ,EAAE,QAAQ;KACnB;CACF,CAAC,CACH,CAAC;AAEF,MAAM,mBAAmB,GAAG,eAAe,CACzC,CAAC,WAA6B,EAAgB,EAAE,CAAC,CAAC;IAChD,IAAI,EAAE;QACJ,YAAY,EAAE,SAAS;QACvB,MAAM,EAAE,WAAW,KAAK,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM;QACzD,KAAK,EAAE,WAAW,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU;QACxD,kHAAkH;QAClH,QAAQ,EAAE,QAAQ;KACnB;CACF,CAAC,CACH,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStackStyles, memoizeFunction, Stack } from '@fluentui/react';\nimport React, { ReactElement, PropsWithChildren } from 'react';\nimport { useTheme } from '../../theming/FluentThemeProvider';\n\n/** @internal */\nexport type _TileOrientation = 'portrait' | 'landscape';\n\n/** @internal */\nexport type _PictureInPictureInPictureTileProps = PropsWithChildren<{\n  orientation: _TileOrientation;\n}>;\n\n/** @private */\nexport const PictureInPictureInPicturePrimaryTile = (props: _PictureInPictureInPictureTileProps): ReactElement => {\n  const boxShadow = useTheme().effects.elevation8;\n  return (\n    <PictureInPictureInPictureTile styles={primaryTileStyles(props.orientation, boxShadow)}>\n      {props.children}\n    </PictureInPictureInPictureTile>\n  );\n};\n\n/** @private */\nexport const PictureInPictureInPictureSecondaryTile = (props: _PictureInPictureInPictureTileProps): ReactElement => (\n  <PictureInPictureInPictureTile styles={secondaryTileStyles(props.orientation)}>\n    {props.children}\n  </PictureInPictureInPictureTile>\n);\n\nconst PictureInPictureInPictureTile = (props: PropsWithChildren<{ styles: IStackStyles }>): ReactElement => (\n  <Stack styles={props.styles}>{props.children}</Stack>\n);\n\nconst primaryTileStyles = memoizeFunction(\n  (orientation: _TileOrientation, themeElevation: string): IStackStyles => ({\n    root: {\n      borderRadius: '0.25rem',\n      height: orientation === 'landscape' ? '5.5rem' : '8rem',\n      width: orientation === 'landscape' ? '8rem' : '5.5rem',\n      boxShadow: themeElevation,\n      // PiPiP tiles were not designed to host scrollable content. If removed check no scrollbar is showing in e2e tests\n      overflow: 'hidden'\n    }\n  })\n);\n\nconst secondaryTileStyles = memoizeFunction(\n  (orientation: _TileOrientation): IStackStyles => ({\n    root: {\n      borderRadius: '0.25rem',\n      height: orientation === 'landscape' ? '1.625rem' : '2rem',\n      width: orientation === 'landscape' ? '2rem' : '1.625rem',\n      // PiPiP tiles were not designed to host scrollable content. If removed check no scrollbar is showing in e2e tests\n      overflow: 'hidden'\n    }\n  })\n);\n"]}

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

@@ -1,16 +1,10 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-/* @conditional-compile-remove(raise-hand) */
 import React from 'react';
-/* @conditional-compile-remove(raise-hand) */
 import { useLocale } from '../localization';
-/* @conditional-compile-remove(raise-hand) */
 import { ControlBarButton } from './ControlBarButton';
-/* @conditional-compile-remove(raise-hand) */
 import { DefaultPalette, mergeStyles, useTheme } from '@fluentui/react';
-/* @conditional-compile-remove(raise-hand) */
 import { _HighContrastAwareIcon } from './HighContrastAwareIcon';
-/* @conditional-compile-remove(raise-hand) */
 /**
  * A button to start / stop screen sharing.
  *
@@ -24,28 +18,21 @@ export const RaiseHandButton = (props) => {
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
     const theme = useTheme();
     const styles = raiseHandButtonStyles(theme);
-    const onRenderRaiseHandIcon = () => React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "ControlButtonRaiseHand" });
-    const onRenderLowerHandIcon = () => React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "ControlButtonLowerHand" });
-    return React.createElement(ControlBarButton, Object.assign({}, props, { className: mergeStyles(styles, props.styles), onClick: (_a = props.onToggleRaiseHand) !== null && _a !== void 0 ? _a : props.onClick, onRenderOnIcon: (_b = props.onRenderOnIcon) !== null && _b !== void 0 ? _b : onRenderLowerHandIcon, onRenderOffIcon: (_c = props.onRenderOffIcon) !== null && _c !== void 0 ? _c : onRenderRaiseHandIcon, strings: strings, labelKey: (_d = props.labelKey) !== null && _d !== void 0 ? _d : 'raiseHandButtonLabel', disabled: props.disabled }));
+    const onRenderRaiseHandIcon = () => (React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "ControlButtonRaiseHand" }));
+    const onRenderLowerHandIcon = () => (React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "ControlButtonLowerHand" }));
+    return (React.createElement(ControlBarButton, Object.assign({}, props, { className: mergeStyles(styles, props.styles), onClick: (_a = props.onToggleRaiseHand) !== null && _a !== void 0 ? _a : props.onClick, onRenderOnIcon: (_b = props.onRenderOnIcon) !== null && _b !== void 0 ? _b : onRenderLowerHandIcon, onRenderOffIcon: (_c = props.onRenderOffIcon) !== null && _c !== void 0 ? _c : onRenderRaiseHandIcon, strings: strings, labelKey: (_d = props.labelKey) !== null && _d !== void 0 ? _d : 'raiseHandButtonLabel', disabled: props.disabled })));
 };
-/* @conditional-compile-remove(raise-hand) */
 const raiseHandButtonStyles = (theme) => ({
     rootChecked: {
         background: theme.palette.themePrimary,
         color: DefaultPalette.white,
-        ':focus::after': {
-            outlineColor: `${DefaultPalette.white}`
-        }
+        ':focus::after': { outlineColor: `${DefaultPalette.white}` }
     },
     rootCheckedHovered: {
         background: theme.palette.themePrimary,
         color: DefaultPalette.white,
-        ':focus::after': {
-            outlineColor: `${DefaultPalette.white}`
-        }
+        ':focus::after': { outlineColor: `${DefaultPalette.white}` }
     },
-    labelChecked: {
-        color: DefaultPalette.white
-    }
+    labelChecked: { color: DefaultPalette.white }
 });
 //# sourceMappingURL=RaiseHandButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RaiseHandButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/RaiseHandButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,6CAA6C;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,6CAA6C;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,6CAA6C;AAC7C,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,6CAA6C;AAC7C,OAAO,EAAE,cAAc,EAAiB,WAAW,EAAS,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC9F,6CAA6C;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAwCjE,6CAA6C;AAC7C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;;IAC1E,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,eAAe,CAAC;IAC1D,MAAM,OAAO,mCACR,aAAa,GACb,KAAK,CAAC,OAAO,CACjB,CAAC;IACF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,qBAAqB,GAAG,GAAgB,EAAE,CAAC,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,wBAAwB,GAAG,CAAC;IACxI,MAAM,qBAAqB,GAAG,GAAgB,EAAE,CAAC,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,wBAAwB,GAAG,CAAC;IACxI,OAAO,oBAAC,gBAAgB,oBAAK,KAAK,IAAE,SAAS,EAAE,WAAW,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,MAAA,KAAK,CAAC,iBAAiB,mCAAI,KAAK,CAAC,OAAO,EAAE,cAAc,EAAE,MAAA,KAAK,CAAC,cAAc,mCAAI,qBAAqB,EAAE,eAAe,EAAE,MAAA,KAAK,CAAC,eAAe,mCAAI,qBAAqB,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAA,KAAK,CAAC,QAAQ,mCAAI,sBAAsB,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,CAAC;AAC1W,CAAC,CAAC;AAEF,6CAA6C;AAC7C,MAAM,qBAAqB,GAAG,CAAC,KAAY,EAAiB,EAAE,CAAC,CAAC;IAC9D,WAAW,EAAE;QACX,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;QACtC,KAAK,EAAE,cAAc,CAAC,KAAK;QAC3B,eAAe,EAAE;YACf,YAAY,EAAE,GAAG,cAAc,CAAC,KAAK,EAAE;SACxC;KACF;IACD,kBAAkB,EAAE;QAClB,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;QACtC,KAAK,EAAE,cAAc,CAAC,KAAK;QAC3B,eAAe,EAAE;YACf,YAAY,EAAE,GAAG,cAAc,CAAC,KAAK,EAAE;SACxC;KACF;IACD,YAAY,EAAE;QACZ,KAAK,EAAE,cAAc,CAAC,KAAK;KAC5B;CACF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(raise-hand) */\nimport React from 'react';\n/* @conditional-compile-remove(raise-hand) */\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(raise-hand) */\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\n/* @conditional-compile-remove(raise-hand) */\nimport { DefaultPalette, IButtonStyles, mergeStyles, Theme, useTheme } from '@fluentui/react';\n/* @conditional-compile-remove(raise-hand) */\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n\n/* @conditional-compile-remove(raise-hand) */\n/**\n * Strings of {@link RaiseHandButton} that can be overridden.\n *\n * @public\n */\nexport interface RaiseHandButtonStrings {\n  /** Label when button is on. */\n  onLabel: string;\n  /** Label when button is off. */\n  offLabel: string;\n  /** * Tooltip content when the button is disabled. */\n  tooltipDisabledContent?: string;\n  /** Tooltip content when the button is on. */\n  tooltipOnContent?: string;\n  /** Tooltip content when the button is off. */\n  tooltipOffContent?: string;\n}\n\n/* @conditional-compile-remove(raise-hand) */\n/**\n * Props for {@link RaiseHandButton}.\n *\n * @public\n */\nexport interface RaiseHandButtonProps extends ControlBarButtonProps {\n  /**\n   * Utility property for using this component with `communication react eventHandlers`.\n   * Maps directly to the `onClick` property.\n   */\n  onToggleRaiseHand?: () => Promise<void>;\n\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<RaiseHandButtonStrings>;\n}\n\n/* @conditional-compile-remove(raise-hand) */\n/**\n * A button to start / stop screen sharing.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const RaiseHandButton = (props: RaiseHandButtonProps): JSX.Element => {\n  const localeStrings = useLocale().strings.raiseHandButton;\n  const strings = {\n    ...localeStrings,\n    ...props.strings\n  };\n  const theme = useTheme();\n  const styles = raiseHandButtonStyles(theme);\n  const onRenderRaiseHandIcon = (): JSX.Element => <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ControlButtonRaiseHand\" />;\n  const onRenderLowerHandIcon = (): JSX.Element => <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ControlButtonLowerHand\" />;\n  return <ControlBarButton {...props} className={mergeStyles(styles, props.styles)} onClick={props.onToggleRaiseHand ?? props.onClick} onRenderOnIcon={props.onRenderOnIcon ?? onRenderLowerHandIcon} onRenderOffIcon={props.onRenderOffIcon ?? onRenderRaiseHandIcon} strings={strings} labelKey={props.labelKey ?? 'raiseHandButtonLabel'} disabled={props.disabled} />;\n};\n\n/* @conditional-compile-remove(raise-hand) */\nconst raiseHandButtonStyles = (theme: Theme): IButtonStyles => ({\n  rootChecked: {\n    background: theme.palette.themePrimary,\n    color: DefaultPalette.white,\n    ':focus::after': {\n      outlineColor: `${DefaultPalette.white}`\n    }\n  },\n  rootCheckedHovered: {\n    background: theme.palette.themePrimary,\n    color: DefaultPalette.white,\n    ':focus::after': {\n      outlineColor: `${DefaultPalette.white}`\n    }\n  },\n  labelChecked: {\n    color: DefaultPalette.white\n  }\n});"]}
+{"version":3,"file":"RaiseHandButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/RaiseHandButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAiB,WAAW,EAAS,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC9F,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAsCjE;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;;IAC1E,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,eAAe,CAAC;IAC1D,MAAM,OAAO,mCAAQ,aAAa,GAAK,KAAK,CAAC,OAAO,CAAE,CAAC;IAEvD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;IAE5C,MAAM,qBAAqB,GAAG,GAAgB,EAAE,CAAC,CAC/C,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,wBAAwB,GAAG,CACvF,CAAC;IACF,MAAM,qBAAqB,GAAG,GAAgB,EAAE,CAAC,CAC/C,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,wBAAwB,GAAG,CACvF,CAAC;IAEF,OAAO,CACL,oBAAC,gBAAgB,oBACX,KAAK,IACT,SAAS,EAAE,WAAW,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,EAC5C,OAAO,EAAE,MAAA,KAAK,CAAC,iBAAiB,mCAAI,KAAK,CAAC,OAAO,EACjD,cAAc,EAAE,MAAA,KAAK,CAAC,cAAc,mCAAI,qBAAqB,EAC7D,eAAe,EAAE,MAAA,KAAK,CAAC,eAAe,mCAAI,qBAAqB,EAC/D,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,MAAA,KAAK,CAAC,QAAQ,mCAAI,sBAAsB,EAClD,QAAQ,EAAE,KAAK,CAAC,QAAQ,IACxB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,qBAAqB,GAAG,CAAC,KAAY,EAAiB,EAAE,CAAC,CAAC;IAC9D,WAAW,EAAE;QACX,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;QACtC,KAAK,EAAE,cAAc,CAAC,KAAK;QAC3B,eAAe,EAAE,EAAE,YAAY,EAAE,GAAG,cAAc,CAAC,KAAK,EAAE,EAAE;KAC7D;IACD,kBAAkB,EAAE;QAClB,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;QACtC,KAAK,EAAE,cAAc,CAAC,KAAK;QAC3B,eAAe,EAAE,EAAE,YAAY,EAAE,GAAG,cAAc,CAAC,KAAK,EAAE,EAAE;KAC7D;IACD,YAAY,EAAE,EAAE,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE;CAC9C,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { useLocale } from '../localization';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport { DefaultPalette, IButtonStyles, mergeStyles, Theme, useTheme } from '@fluentui/react';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n\n/**\n * Strings of {@link RaiseHandButton} that can be overridden.\n *\n * @public\n */\nexport interface RaiseHandButtonStrings {\n  /** Label when button is on. */\n  onLabel: string;\n  /** Label when button is off. */\n  offLabel: string;\n  /** * Tooltip content when the button is disabled. */\n  tooltipDisabledContent?: string;\n  /** Tooltip content when the button is on. */\n  tooltipOnContent?: string;\n  /** Tooltip content when the button is off. */\n  tooltipOffContent?: string;\n}\n\n/**\n * Props for {@link RaiseHandButton}.\n *\n * @public\n */\nexport interface RaiseHandButtonProps extends ControlBarButtonProps {\n  /**\n   * Utility property for using this component with `communication react eventHandlers`.\n   * Maps directly to the `onClick` property.\n   */\n  onToggleRaiseHand?: () => Promise<void>;\n\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<RaiseHandButtonStrings>;\n}\n\n/**\n * A button to start / stop screen sharing.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const RaiseHandButton = (props: RaiseHandButtonProps): JSX.Element => {\n  const localeStrings = useLocale().strings.raiseHandButton;\n  const strings = { ...localeStrings, ...props.strings };\n\n  const theme = useTheme();\n  const styles = raiseHandButtonStyles(theme);\n\n  const onRenderRaiseHandIcon = (): JSX.Element => (\n    <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ControlButtonRaiseHand\" />\n  );\n  const onRenderLowerHandIcon = (): JSX.Element => (\n    <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ControlButtonLowerHand\" />\n  );\n\n  return (\n    <ControlBarButton\n      {...props}\n      className={mergeStyles(styles, props.styles)}\n      onClick={props.onToggleRaiseHand ?? props.onClick}\n      onRenderOnIcon={props.onRenderOnIcon ?? onRenderLowerHandIcon}\n      onRenderOffIcon={props.onRenderOffIcon ?? onRenderRaiseHandIcon}\n      strings={strings}\n      labelKey={props.labelKey ?? 'raiseHandButtonLabel'}\n      disabled={props.disabled}\n    />\n  );\n};\n\nconst raiseHandButtonStyles = (theme: Theme): IButtonStyles => ({\n  rootChecked: {\n    background: theme.palette.themePrimary,\n    color: DefaultPalette.white,\n    ':focus::after': { outlineColor: `${DefaultPalette.white}` }\n  },\n  rootCheckedHovered: {\n    background: theme.palette.themePrimary,\n    color: DefaultPalette.white,\n    ':focus::after': { outlineColor: `${DefaultPalette.white}` }\n  },\n  labelChecked: { color: DefaultPalette.white }\n});\n"]}

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

@@ -0,0 +1,56 @@
+/// <reference types="react" />
+import { ControlBarButtonProps } from './ControlBarButton';
+import { ReactionResources } from '..';
+/**
+ * Props for {@link ReactionButton}.
+ *
+ * @beta
+ */
+export interface ReactionButtonProps extends ControlBarButtonProps {
+    /**
+     * Optional strings to override in component
+     */
+    strings?: Partial<ReactionButtonStrings>;
+    /**
+     * Click event to send reaction to meeting
+     */
+    onReactionClick: (reaction: string) => Promise<void>;
+    /**
+     * Reaction resource locator and parameters
+     */
+    reactionResources: ReactionResources;
+}
+/**
+ * Strings of {@link ReactionButton} that can be overridden.
+ *
+ * @beta
+ */
+export interface ReactionButtonStrings {
+    /** Label of the button. */
+    label: string;
+    /** Aria label for reaction button accessibility announcement */
+    ariaLabel: string;
+    /** Tooltip content when the button is disabled. */
+    tooltipDisabledContent?: string;
+    /** Tooltip content when the button is enabled. */
+    tooltipContent?: string;
+    /** Tooltip content of like reaction button. */
+    likeReactionTooltipContent?: string;
+    /** Tooltip content of heart reaction button. */
+    heartReactionTooltipContent?: string;
+    /** Tooltip content of laugh reaction button. */
+    laughReactionTooltipContent?: string;
+    /** Tooltip content of clap reaction button. */
+    applauseReactionTooltipContent?: string;
+    /** Tooltip content of surprised reaction button. */
+    surprisedReactionTooltipContent?: string;
+}
+/**
+ * A button to send reactions.
+ *
+ * Can be used with {@link ControlBar}.
+ *
+ * @beta
+ */
+export declare const ReactionButton: (props: ReactionButtonProps) => JSX.Element;
+//# sourceMappingURL=ReactionButton.d.ts.map

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

@@ -0,0 +1,89 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* @conditional-compile-remove(reaction) */
+import { ContextualMenuItemType, DefaultPalette, IconButton, mergeStyles, TooltipHost, useTheme } from '@fluentui/react';
+/* @conditional-compile-remove(reaction) */
+import React, { useState } from 'react';
+/* @conditional-compile-remove(reaction) */
+import { ControlBarButton } from './ControlBarButton';
+/* @conditional-compile-remove(reaction) */
+import { _HighContrastAwareIcon } from './HighContrastAwareIcon';
+/* @conditional-compile-remove(reaction) */
+import { useLocale } from '../localization';
+/* @conditional-compile-remove(reaction) */
+import { emojiStyles, reactionEmojiMenuStyles, reactionToolTipHostStyle } from './styles/ReactionButton.styles';
+/* @conditional-compile-remove(reaction) */
+import { isDarkThemed } from '../theming/themeUtils';
+/* @conditional-compile-remove(reaction) */
+/**
+ * A button to send reactions.
+ *
+ * Can be used with {@link ControlBar}.
+ *
+ * @beta
+ */
+export const ReactionButton = (props) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const localeStrings = useLocale().strings.reactionButton;
+    const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
+    const theme = useTheme();
+    const styles = reactionButtonStyles(theme);
+    const onRenderIcon = () => (React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "ReactionButtonIcon" }));
+    const [isHoveredMap, setIsHoveredMap] = useState(new Map());
+    const emojis = ['like', 'heart', 'laugh', 'applause', 'surprised'];
+    const emojiButtonTooltip = new Map([
+        ['like', strings.likeReactionTooltipContent],
+        ['heart', strings.heartReactionTooltipContent],
+        ['laugh', strings.laughReactionTooltipContent],
+        ['applause', strings.applauseReactionTooltipContent],
+        ['surprised', strings.surprisedReactionTooltipContent]
+    ]);
+    const emojiResource = new Map([
+        ['like', (_a = props.reactionResources.likeReaction) === null || _a === void 0 ? void 0 : _a.url],
+        ['heart', (_b = props.reactionResources.heartReaction) === null || _b === void 0 ? void 0 : _b.url],
+        ['laugh', (_c = props.reactionResources.laughReaction) === null || _c === void 0 ? void 0 : _c.url],
+        ['applause', (_d = props.reactionResources.applauseReaction) === null || _d === void 0 ? void 0 : _d.url],
+        ['surprised', (_e = props.reactionResources.surprisedReaction) === null || _e === void 0 ? void 0 : _e.url]
+    ]);
+    const calloutStyle = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };
+    const calloutProps = {
+        gapSpace: 4,
+        styles: calloutStyle,
+        backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''
+    };
+    const renderEmoji = (item, dismissMenu) => (React.createElement("div", { style: reactionEmojiMenuStyles() }, emojis.map((emoji, index) => {
+        const resourceUrl = emojiResource.get(emoji);
+        return (React.createElement(TooltipHost, { key: index, "data-ui-id": index, hidden: props.disableTooltip, content: emojiButtonTooltip.get(emoji), styles: reactionToolTipHostStyle(), calloutProps: Object.assign({}, calloutProps) },
+            React.createElement(IconButton, { key: index, onClick: () => {
+                    props.onReactionClick(emoji);
+                    setIsHoveredMap((prevMap) => {
+                        return new Map(prevMap).set(emoji, false);
+                    });
+                    dismissMenu();
+                }, style: emojiStyles(resourceUrl ? resourceUrl : '', isHoveredMap.get(emoji) ? 'running' : 'paused'), onMouseEnter: () => setIsHoveredMap((prevMap) => {
+                    return new Map(prevMap).set(emoji, true);
+                }), onMouseLeave: () => setIsHoveredMap((prevMap) => {
+                    return new Map(prevMap).set(emoji, false);
+                }) })));
+    })));
+    const emojiList = [
+        { key: 'reactions', itemType: ContextualMenuItemType.Normal, onRender: renderEmoji }
+    ];
+    return (React.createElement(ControlBarButton, Object.assign({}, props, { className: mergeStyles(styles, props.styles), menuProps: {
+            shouldFocusOnMount: true,
+            items: emojiList
+        }, onRenderIcon: (_f = props.onRenderIcon) !== null && _f !== void 0 ? _f : onRenderIcon, strings: strings, labelKey: (_g = props.labelKey) !== null && _g !== void 0 ? _g : 'reactionButtonLabel', onRenderMenuIcon: () => React.createElement("div", null), disabled: props.disabled, ariaLabel: strings.ariaLabel })));
+};
+/* @conditional-compile-remove(reaction) */
+const reactionButtonStyles = (theme) => ({
+    rootChecked: {
+        background: theme.palette.themePrimary,
+        color: DefaultPalette.white
+    },
+    rootCheckedHovered: {
+        background: theme.palette.themePrimary,
+        color: DefaultPalette.white
+    },
+    labelChecked: { color: DefaultPalette.white }
+});
+//# sourceMappingURL=ReactionButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReactionButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ReactionButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(reaction) */\nimport {\n  ContextualMenuItemType,\n  DefaultPalette,\n  IButtonStyles,\n  ICalloutContentStyles,\n  IconButton,\n  IContextualMenuItem,\n  mergeStyles,\n  Theme,\n  TooltipHost,\n  useTheme\n} from '@fluentui/react';\n/* @conditional-compile-remove(reaction) */\nimport React, { useState } from 'react';\n/* @conditional-compile-remove(reaction) */\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\n/* @conditional-compile-remove(reaction) */\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n/* @conditional-compile-remove(reaction) */\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(reaction) */\nimport { emojiStyles, reactionEmojiMenuStyles, reactionToolTipHostStyle } from './styles/ReactionButton.styles';\n/* @conditional-compile-remove(reaction) */\nimport { isDarkThemed } from '../theming/themeUtils';\n/* @conditional-compile-remove(reaction) */\nimport { ReactionResources } from '..';\n\n/* @conditional-compile-remove(reaction) */\n/**\n * Props for {@link ReactionButton}.\n *\n * @beta\n */\nexport interface ReactionButtonProps extends ControlBarButtonProps {\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<ReactionButtonStrings>;\n  /**\n   * Click event to send reaction to meeting\n   */\n  onReactionClick: (reaction: string) => Promise<void>;\n  /**\n   * Reaction resource locator and parameters\n   */\n  reactionResources: ReactionResources;\n}\n\n/* @conditional-compile-remove(reaction) */\n/**\n * Strings of {@link ReactionButton} that can be overridden.\n *\n * @beta\n */\nexport interface ReactionButtonStrings {\n  /** Label of the button. */\n  label: string;\n  /** Aria label for reaction button accessibility announcement */\n  ariaLabel: string;\n  /** Tooltip content when the button is disabled. */\n  tooltipDisabledContent?: string;\n  /** Tooltip content when the button is enabled. */\n  tooltipContent?: string;\n  /** Tooltip content of like reaction button. */\n  likeReactionTooltipContent?: string;\n  /** Tooltip content of heart reaction button. */\n  heartReactionTooltipContent?: string;\n  /** Tooltip content of laugh reaction button. */\n  laughReactionTooltipContent?: string;\n  /** Tooltip content of clap reaction button. */\n  applauseReactionTooltipContent?: string;\n  /** Tooltip content of surprised reaction button. */\n  surprisedReactionTooltipContent?: string;\n}\n\n/* @conditional-compile-remove(reaction) */\n/**\n * A button to send reactions.\n *\n * Can be used with {@link ControlBar}.\n *\n * @beta\n */\nexport const ReactionButton = (props: ReactionButtonProps): JSX.Element => {\n  const localeStrings = useLocale().strings.reactionButton;\n  const strings = { ...localeStrings, ...props.strings };\n  const theme = useTheme();\n  const styles = reactionButtonStyles(theme);\n  const onRenderIcon = (): JSX.Element => (\n    <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ReactionButtonIcon\" />\n  );\n\n  const [isHoveredMap, setIsHoveredMap] = useState(new Map());\n  const emojis = ['like', 'heart', 'laugh', 'applause', 'surprised'];\n  const emojiButtonTooltip: Map<string, string | undefined> = new Map([\n    ['like', strings.likeReactionTooltipContent],\n    ['heart', strings.heartReactionTooltipContent],\n    ['laugh', strings.laughReactionTooltipContent],\n    ['applause', strings.applauseReactionTooltipContent],\n    ['surprised', strings.surprisedReactionTooltipContent]\n  ]);\n  const emojiResource: Map<string, string | undefined> = new Map([\n    ['like', props.reactionResources.likeReaction?.url],\n    ['heart', props.reactionResources.heartReaction?.url],\n    ['laugh', props.reactionResources.laughReaction?.url],\n    ['applause', props.reactionResources.applauseReaction?.url],\n    ['surprised', props.reactionResources.surprisedReaction?.url]\n  ]);\n\n  const calloutStyle: Partial<ICalloutContentStyles> = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };\n\n  const calloutProps = {\n    gapSpace: 4,\n    styles: calloutStyle,\n    backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n  };\n\n  const renderEmoji = (item: IContextualMenuItem, dismissMenu: () => void): React.JSX.Element => (\n    <div style={reactionEmojiMenuStyles()}>\n      {emojis.map((emoji, index) => {\n        const resourceUrl = emojiResource.get(emoji);\n        return (\n          <TooltipHost\n            key={index}\n            data-ui-id={index}\n            hidden={props.disableTooltip}\n            content={emojiButtonTooltip.get(emoji)}\n            styles={reactionToolTipHostStyle()}\n            calloutProps={{ ...calloutProps }}\n          >\n            <IconButton\n              key={index}\n              onClick={() => {\n                props.onReactionClick(emoji);\n                setIsHoveredMap((prevMap) => {\n                  return new Map(prevMap).set(emoji, false);\n                });\n                dismissMenu();\n              }}\n              style={emojiStyles(resourceUrl ? resourceUrl : '', isHoveredMap.get(emoji) ? 'running' : 'paused')}\n              onMouseEnter={() =>\n                setIsHoveredMap((prevMap) => {\n                  return new Map(prevMap).set(emoji, true);\n                })\n              }\n              onMouseLeave={() =>\n                setIsHoveredMap((prevMap) => {\n                  return new Map(prevMap).set(emoji, false);\n                })\n              }\n            />\n          </TooltipHost>\n        );\n      })}\n    </div>\n  );\n\n  const emojiList: IContextualMenuItem[] = [\n    { key: 'reactions', itemType: ContextualMenuItemType.Normal, onRender: renderEmoji }\n  ];\n\n  return (\n    <ControlBarButton\n      {...props}\n      className={mergeStyles(styles, props.styles)}\n      menuProps={{\n        shouldFocusOnMount: true,\n        items: emojiList\n      }}\n      onRenderIcon={props.onRenderIcon ?? onRenderIcon}\n      strings={strings}\n      labelKey={props.labelKey ?? 'reactionButtonLabel'}\n      onRenderMenuIcon={() => <div />}\n      disabled={props.disabled}\n      ariaLabel={strings.ariaLabel}\n    />\n  );\n};\n\n/* @conditional-compile-remove(reaction) */\nconst reactionButtonStyles = (theme: Theme): IButtonStyles => ({\n  rootChecked: {\n    background: theme.palette.themePrimary,\n    color: DefaultPalette.white\n  },\n  rootCheckedHovered: {\n    background: theme.palette.themePrimary,\n    color: DefaultPalette.white\n  },\n  labelChecked: { color: DefaultPalette.white }\n});\n"]}

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { CreateVideoStreamViewResult, OnRenderAvatarCallback, ParticipantState, VideoGalleryRemoteParticipant, VideoStreamOptions, ViewScalingMode } from '../types';
 import { VideoGalleryStrings } from './VideoGallery';
+import { ReactionResources } from '../types/ReactionTypes';
 /**
  * A memoized version of VideoTile for rendering remote participants. React.memo is used for a performance
  * boost by memoizing the same rendered component to avoid rerendering a VideoTile when its position in the
@@ -30,7 +31,13 @@ export declare const _RemoteVideoTile: React.MemoExoticComponent<(props: {
     onUnpinParticipant?: ((userId: string) => void) | undefined;
     onUpdateScalingMode?: ((userId: string, scalingMode: ViewScalingMode) => void) | undefined;
     isPinned?: boolean | undefined;
+    spotlightedParticipantUserIds?: string[] | undefined;
+    isSpotlighted?: boolean | undefined;
+    onStartSpotlight?: ((userIds: string[]) => void) | undefined;
+    onStopSpotlight?: ((userIds: string[]) => void) | undefined;
+    maxParticipantsToSpotlight?: number | undefined;
     disablePinMenuItem?: boolean | undefined;
     toggleAnnouncerString?: ((announcerString: string) => void) | undefined;
+    reactionResources?: ReactionResources | undefined;
 }) => React.JSX.Element>;
 //# sourceMappingURL=RemoteVideoTile.d.ts.map

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

@@ -9,6 +9,8 @@ import { drawerMenuWrapperStyles, remoteVideoTileWrapperStyle } from './VideoGal
 import { useRemoteVideoStreamLifecycleMaintainer } from './VideoGallery/useVideoStreamLifecycleMaintainer';
 import { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileContextualMenuProps';
 import { VideoTile } from './VideoTile';
+/* @conditional-compile-remove(hide-attendee-name) */
+import { _formatString } from "../../../acs-ui-common/src";
 /**
  * A memoized version of VideoTile for rendering remote participants. React.memo is used for a performance
  * boost by memoizing the same rendered component to avoid rerendering a VideoTile when its position in the
@@ -17,10 +19,15 @@ import { VideoTile } from './VideoTile';
  * @internal
  */
 export const _RemoteVideoTile = React.memo((props) => {
-    var _a;
-    const { isAvailable, isReceiving = true, 
-    // default to true to prevent any breaking change
-    isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, renderElement, userId, onRenderAvatar, showMuteIndicator, remoteParticipant, participantState, menuKind, isPinned, onPinParticipant, onUnpinParticipant, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString, strings } = props;
+    var _a, _b;
+    const { isAvailable, isReceiving = true, // default to true to prevent any breaking change
+    isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, renderElement, userId, onRenderAvatar, showMuteIndicator, remoteParticipant, participantState, menuKind, isPinned, onPinParticipant, onUnpinParticipant, 
+    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds, 
+    /* @conditional-compile-remove(spotlight) */ isSpotlighted, 
+    /* @conditional-compile-remove(spotlight) */ onStartSpotlight, 
+    /* @conditional-compile-remove(spotlight) */ onStopSpotlight, 
+    /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString, strings, 
+    /* @conditional-compile-remove(reaction) */ reactionResources } = props;
     const remoteVideoStreamProps = useMemo(() => ({
         isMirrored: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored,
         isScreenSharingOn,
@@ -31,7 +38,17 @@ export const _RemoteVideoTile = React.memo((props) => {
         remoteParticipantId: userId,
         renderElementExists: !!renderElement,
         scalingMode: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.scalingMode
-    }), [isAvailable, isReceiving, isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored, remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.scalingMode, renderElement, userId]);
+    }), [
+        isAvailable,
+        isReceiving,
+        isScreenSharingOn,
+        onCreateRemoteStreamView,
+        onDisposeRemoteStreamView,
+        remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored,
+        remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.scalingMode,
+        renderElement,
+        userId
+    ]);
     // Handle creating, destroying and updating the video stream as necessary
     const createVideoStreamResult = useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);
     const contextualMenuProps = useVideoTileContextualMenuProps({
@@ -43,7 +60,12 @@ export const _RemoteVideoTile = React.memo((props) => {
         onUnpinParticipant,
         onUpdateScalingMode,
         disablePinMenuItem,
-        toggleAnnouncerString
+        toggleAnnouncerString,
+        /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds,
+        /* @conditional-compile-remove(spotlight) */ isSpotlighted,
+        /* @conditional-compile-remove(spotlight) */ onStartSpotlight,
+        /* @conditional-compile-remove(spotlight) */ onStopSpotlight,
+        /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight
     });
     const videoTileContextualMenuProps = useMemo(() => {
         if (menuKind !== 'contextual' || !contextualMenuProps) {
@@ -62,7 +84,7 @@ export const _RemoteVideoTile = React.memo((props) => {
             // Returning `undefined` results in the placeholder with avatar being shown
             return undefined;
         }
-        return React.createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: showLoadingIndicator ? 'loading' : 'none' });
+        return (React.createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: showLoadingIndicator ? 'loading' : 'none' }));
     }, [renderElement, showLoadingIndicator]);
     const onKeyDown = useCallback((e) => {
         if (e.key === 'Enter') {
@@ -70,18 +92,37 @@ export const _RemoteVideoTile = React.memo((props) => {
         }
     }, [setDrawerMenuItemProps, contextualMenuProps]);
     let displayName = remoteParticipant.displayName || strings.displayNamePlaceholder;
-    return React.createElement(Stack, { tabIndex: menuKind === 'drawer' ? 0 : undefined, onKeyDown: menuKind === 'drawer' ? onKeyDown : undefined, style: remoteVideoTileWrapperStyle },
-        React.createElement(VideoTile, Object.assign({ key: userId, userId: userId, initialsName: (_a = remoteParticipant.displayName) !== null && _a !== void 0 ? _a : '', renderElement: renderVideoStreamElement, displayName: displayName, onRenderPlaceholder: onRenderAvatar, isMuted: remoteParticipant.isMuted, 
-            /* @conditional-compile-remove(raise-hand) */ raisedHand: remoteParticipant.raisedHand, isSpeaking: remoteParticipant.isSpeaking, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, showLabel: props.showLabel }, videoTileContextualMenuProps, { isPinned: props.isPinned, onLongTouch: () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))) })),
-        drawerMenuItemProps.length > 0 && React.createElement(Layer, { hostId: props.drawerMenuHostId },
+    /* @conditional-compile-remove(hide-attendee-name) */
+    const attendeeRoleString = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.attendeeRole;
+    /* @conditional-compile-remove(hide-attendee-name) */
+    const formatDisplayName = () => {
+        if (displayName && attendeeRoleString) {
+            return _formatString(displayName, { AttendeeRole: attendeeRoleString });
+        }
+        return displayName;
+    };
+    /* @conditional-compile-remove(hide-attendee-name) */
+    displayName = formatDisplayName();
+    return (React.createElement(Stack, { tabIndex: menuKind === 'drawer' ? 0 : undefined, onKeyDown: menuKind === 'drawer' ? onKeyDown : undefined, style: remoteVideoTileWrapperStyle },
+        React.createElement(VideoTile, Object.assign({ key: userId, userId: userId, initialsName: (_b = remoteParticipant.displayName) !== null && _b !== void 0 ? _b : '', renderElement: renderVideoStreamElement, displayName: displayName, onRenderPlaceholder: onRenderAvatar, isMuted: remoteParticipant.isMuted, raisedHand: remoteParticipant.raisedHand, 
+            /* @conditional-compile-remove(reaction) */
+            reaction: remoteParticipant.reaction, isSpeaking: remoteParticipant.isSpeaking, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, showLabel: props.showLabel, 
+            /* @conditional-compile-remove(one-to-n-calling) */
+            /* @conditional-compile-remove(PSTN-calls) */
+            participantState: participantState }, videoTileContextualMenuProps, { isPinned: props.isPinned, onLongTouch: () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))), 
+            /* @conditional-compile-remove(spotlight) */
+            isSpotlighted: isSpotlighted, 
+            /* @conditional-compile-remove(reaction) */
+            reactionResources: reactionResources })),
+        drawerMenuItemProps.length > 0 && (React.createElement(Layer, { hostId: props.drawerMenuHostId },
             React.createElement(Stack, { styles: drawerMenuWrapperStyles },
-                React.createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItemProps([]), items: drawerMenuItemProps, heading: remoteParticipant.displayName }))));
+                React.createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItemProps([]), items: drawerMenuItemProps, heading: remoteParticipant.displayName }))))));
 });
 const convertContextualMenuItemsToDrawerMenuItemProps = (contextualMenuProps, onLightDismiss) => {
     if (!contextualMenuProps) {
         return [];
     }
-    return contextualMenuProps.items.map(item => {
+    return contextualMenuProps.items.map((item) => {
         return {
             itemKey: item.key,
             text: item.text,