@azure/communication-react 1.5.2-alpha-202301190014.0 → 1.6.1-alpha-202306220014

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

@@ -1 +1 @@
-{"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';\n/* @conditional-compile-remove(rooms) */\nimport { _usePermissions } from '../permissions/PermissionsProvider';\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  /** prop to determine if we should show tooltip 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      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\"../../../acs-ui-common/src\""]}
+{"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';\n/* @conditional-compile-remove(rooms) */\nimport { _usePermissions } from '../permissions/PermissionsProvider';\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  /** prop to determine if we should show tooltip 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\"../../../acs-ui-common/src\""]}

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

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

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

@@ -18,8 +18,9 @@ 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 = 'contextual', isPinned, onPinParticipant, onUnpinParticipant, disablePinMenuItem } = props;
+    isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, renderElement, userId, onRenderAvatar, showMuteIndicator, remoteParticipant, participantState, menuKind, isPinned, onPinParticipant, onUnpinParticipant, disablePinMenuItem, toggleAnnouncerString, strings } = props;
     const remoteVideoStreamProps = useMemo(() => ({
         isMirrored: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored,
         isScreenSharingOn,
@@ -51,7 +52,8 @@ export const _RemoteVideoTile = React.memo((props) => {
         isPinned,
         onPinParticipant,
         onUnpinParticipant,
-        disablePinMenuItem
+        disablePinMenuItem,
+        toggleAnnouncerString
     });
     const videoTileContextualMenuProps = useMemo(() => {
         if (menuKind !== 'contextual') {
@@ -83,7 +85,7 @@ export const _RemoteVideoTile = React.memo((props) => {
         tabIndex: menuKind === 'drawer' ? 0 : undefined, 
         /* @conditional-compile-remove(pinned-participants) */
         onKeyDown: menuKind === 'drawer' ? onKeyDown : undefined, style: remoteVideoTileWrapperStyle },
-        React.createElement(VideoTile, Object.assign({ key: userId, userId: userId, renderElement: renderVideoStreamElement, displayName: remoteParticipant.displayName, onRenderPlaceholder: onRenderAvatar, isMuted: remoteParticipant.isMuted, isSpeaking: remoteParticipant.isSpeaking, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, showLabel: props.showLabel, 
+        React.createElement(VideoTile, Object.assign({ key: userId, userId: userId, initialsName: (_a = remoteParticipant.displayName) !== null && _a !== void 0 ? _a : '', renderElement: renderVideoStreamElement, displayName: remoteParticipant.displayName || (strings === null || strings === void 0 ? void 0 : strings.displayNamePlaceholder), onRenderPlaceholder: onRenderAvatar, isMuted: remoteParticipant.isMuted, 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, { 

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';\n/* @conditional-compile-remove(pinned-participants) */\nimport { KeyboardEvent, useCallback } from 'react';\nimport {\n  CreateVideoStreamViewResult,\n  OnRenderAvatarCallback,\n  ParticipantState,\n  VideoGalleryRemoteParticipant,\n  VideoStreamOptions\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\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    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    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    isPinned?: boolean;\n    disablePinMenuItem?: boolean;\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 = 'contextual',\n      isPinned,\n      onPinParticipant,\n      onUnpinParticipant,\n      disablePinMenuItem\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      }),\n      [\n        isAvailable,\n        isReceiving,\n        isScreenSharingOn,\n        onCreateRemoteStreamView,\n        onDisposeRemoteStreamView,\n        remoteVideoViewOptions?.isMirrored,\n        remoteVideoViewOptions?.scalingMode,\n        renderElement,\n        userId\n      ]\n    );\n\n    // Handle creating, destroying and updating the video stream as necessary\n    const createVideoStreamResult = useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);\n\n    const contextualMenuProps = useVideoTileContextualMenuProps({\n      remoteParticipant,\n      view: createVideoStreamResult?.view,\n      /* @conditional-compile-remove(pinned-participants) */\n      strings: { ...props.strings },\n      isPinned,\n      onPinParticipant,\n      onUnpinParticipant,\n      disablePinMenuItem\n    });\n\n    const videoTileContextualMenuProps = useMemo(() => {\n      if (menuKind !== 'contextual') {\n        return {};\n      }\n      return videoTileContextualMenuPropsTrampoline(contextualMenuProps);\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    /* @conditional-compile-remove(pinned-participants) */\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    return (\n      <Stack\n        /* @conditional-compile-remove(pinned-participants) */\n        tabIndex={menuKind === 'drawer' ? 0 : undefined}\n        /* @conditional-compile-remove(pinned-participants) */\n        onKeyDown={menuKind === 'drawer' ? onKeyDown : undefined}\n        style={remoteVideoTileWrapperStyle}\n      >\n        <VideoTile\n          key={userId}\n          userId={userId}\n          renderElement={renderVideoStreamElement}\n          displayName={remoteParticipant.displayName}\n          onRenderPlaceholder={onRenderAvatar}\n          isMuted={remoteParticipant.isMuted}\n          isSpeaking={remoteParticipant.isSpeaking}\n          showMuteIndicator={showMuteIndicator}\n          personaMinSize={props.personaMinSize}\n          showLabel={props.showLabel}\n          /* @conditional-compile-remove(one-to-n-calling) */\n          /* @conditional-compile-remove(PSTN-calls) */\n          participantState={participantState}\n          {...videoTileContextualMenuProps}\n          /* @conditional-compile-remove(pinned-participants) */\n          isPinned={props.isPinned}\n          /* @conditional-compile-remove(pinned-participants) */\n          onLongTouch={() =>\n            setDrawerMenuItemProps(\n              convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n            )\n          }\n        />\n        {drawerMenuItemProps.length > 0 && (\n          <Layer hostId={props.drawerMenuHostId}>\n            <Stack styles={drawerMenuWrapperStyles}>\n              <_DrawerMenu\n                onLightDismiss={() => setDrawerMenuItemProps([])}\n                items={drawerMenuItemProps}\n                heading={remoteParticipant.displayName}\n              />\n            </Stack>\n          </Layer>\n        )}\n      </Stack>\n    );\n  }\n);\n\nconst videoTileContextualMenuPropsTrampoline = (\n  contextualMenuProps?: IContextualMenuProps\n): { contextualMenu?: IContextualMenuProps } => {\n  if (!contextualMenuProps) {\n    return {};\n  }\n  /* @conditional-compile-remove(pinned-participants) */\n  return {\n    contextualMenu: contextualMenuProps\n  };\n\n  return {};\n};\n\n/* @conditional-compile-remove(pinned-participants) */\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';\n/* @conditional-compile-remove(pinned-participants) */\nimport { KeyboardEvent, useCallback } from 'react';\nimport {\n  CreateVideoStreamViewResult,\n  OnRenderAvatarCallback,\n  ParticipantState,\n  VideoGalleryRemoteParticipant,\n  VideoStreamOptions\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\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    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    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    isPinned?: boolean;\n    disablePinMenuItem?: boolean;\n    toggleAnnouncerString?: (announcerString: string) => void;\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      disablePinMenuItem,\n      toggleAnnouncerString,\n      strings\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      }),\n      [\n        isAvailable,\n        isReceiving,\n        isScreenSharingOn,\n        onCreateRemoteStreamView,\n        onDisposeRemoteStreamView,\n        remoteVideoViewOptions?.isMirrored,\n        remoteVideoViewOptions?.scalingMode,\n        renderElement,\n        userId\n      ]\n    );\n\n    // Handle creating, destroying and updating the video stream as necessary\n    const createVideoStreamResult = useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);\n\n    const contextualMenuProps = useVideoTileContextualMenuProps({\n      remoteParticipant,\n      view: createVideoStreamResult?.view,\n      /* @conditional-compile-remove(pinned-participants) */\n      strings: { ...props.strings },\n      isPinned,\n      onPinParticipant,\n      onUnpinParticipant,\n      disablePinMenuItem,\n      toggleAnnouncerString\n    });\n\n    const videoTileContextualMenuProps = useMemo(() => {\n      if (menuKind !== 'contextual') {\n        return {};\n      }\n      return videoTileContextualMenuPropsTrampoline(contextualMenuProps);\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    /* @conditional-compile-remove(pinned-participants) */\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    return (\n      <Stack\n        /* @conditional-compile-remove(pinned-participants) */\n        tabIndex={menuKind === 'drawer' ? 0 : undefined}\n        /* @conditional-compile-remove(pinned-participants) */\n        onKeyDown={menuKind === 'drawer' ? onKeyDown : undefined}\n        style={remoteVideoTileWrapperStyle}\n      >\n        <VideoTile\n          key={userId}\n          userId={userId}\n          initialsName={remoteParticipant.displayName ?? ''}\n          renderElement={renderVideoStreamElement}\n          displayName={remoteParticipant.displayName || strings?.displayNamePlaceholder}\n          onRenderPlaceholder={onRenderAvatar}\n          isMuted={remoteParticipant.isMuted}\n          isSpeaking={remoteParticipant.isSpeaking}\n          showMuteIndicator={showMuteIndicator}\n          personaMinSize={props.personaMinSize}\n          showLabel={props.showLabel}\n          /* @conditional-compile-remove(one-to-n-calling) */\n          /* @conditional-compile-remove(PSTN-calls) */\n          participantState={participantState}\n          {...videoTileContextualMenuProps}\n          /* @conditional-compile-remove(pinned-participants) */\n          isPinned={props.isPinned}\n          /* @conditional-compile-remove(pinned-participants) */\n          onLongTouch={() =>\n            setDrawerMenuItemProps(\n              convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n            )\n          }\n        />\n        {drawerMenuItemProps.length > 0 && (\n          <Layer hostId={props.drawerMenuHostId}>\n            <Stack styles={drawerMenuWrapperStyles}>\n              <_DrawerMenu\n                onLightDismiss={() => setDrawerMenuItemProps([])}\n                items={drawerMenuItemProps}\n                heading={remoteParticipant.displayName}\n              />\n            </Stack>\n          </Layer>\n        )}\n      </Stack>\n    );\n  }\n);\n\nconst videoTileContextualMenuPropsTrampoline = (\n  contextualMenuProps?: IContextualMenuProps\n): { contextualMenu?: IContextualMenuProps } => {\n  if (!contextualMenuProps) {\n    return {};\n  }\n  /* @conditional-compile-remove(pinned-participants) */\n  return {\n    contextualMenu: contextualMenuProps\n  };\n\n  return {};\n};\n\n/* @conditional-compile-remove(pinned-participants) */\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/components/ResponsiveHorizontalGallery.d.ts

@@ -9,8 +9,10 @@ export declare const ResponsiveHorizontalGallery: (props: {
     children: React.ReactNode;
     containerStyles: IStyle;
     horizontalGalleryStyles: HorizontalGalleryStyles;
-    childWidthRem: number;
     gapWidthRem: number;
-    buttonWidthRem?: number;
+    buttonWidthRem?: number | undefined;
+    onFetchTilesToRender?: ((indexes: number[]) => void) | undefined;
+    /** event to listen for children per page changes */
+    onChildrenPerPageChange?: ((childrenPerPage: number) => void) | undefined;
 }) => JSX.Element;
 //# sourceMappingURL=ResponsiveHorizontalGallery.d.ts.map

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

@@ -3,62 +3,26 @@
 import { mergeStyles } from '@fluentui/react';
 import React, { useRef } from 'react';
 import { HorizontalGallery } from './HorizontalGallery';
-import { _convertRemToPx as convertRemToPx } from "../../../acs-ui-common/src";
 import { _useContainerWidth } from './utils/responsive';
+import { calculateHorizontalChildrenPerPage } from './VideoGallery/utils/OverflowGalleryUtils';
 /**
  * Wrapped HorizontalGallery that adjusts the number of items per page based on the
  * available width obtained from a ResizeObserver, width per child, gap width, and button width
  */
 export const ResponsiveHorizontalGallery = (props) => {
-    const { childWidthRem, gapWidthRem, buttonWidthRem = 0 } = props;
+    const { gapWidthRem, buttonWidthRem = 0, onFetchTilesToRender, onChildrenPerPageChange } = props;
     const containerRef = useRef(null);
     const containerWidth = _useContainerWidth(containerRef);
     const leftPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingLeft) : 0;
     const rightPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingRight) : 0;
-    const childrenPerPage = calculateChildrenPerPage({
+    const childrenPerPage = calculateHorizontalChildrenPerPage({
         numberOfChildren: React.Children.count(props.children),
         containerWidth: (containerWidth !== null && containerWidth !== void 0 ? containerWidth : 0) - leftPadding - rightPadding,
-        childWidthRem,
         gapWidthRem,
         buttonWidthRem
     });
-    return (React.createElement("div", { ref: containerRef, className: mergeStyles(props.containerStyles) },
-        React.createElement(HorizontalGallery, { childrenPerPage: childrenPerPage, styles: props.horizontalGalleryStyles }, props.children)));
-};
-/**
- * Helper function to calculate children per page for HorizontalGallery based on width of container, child, buttons, and
- * gaps in between
- */
-const calculateChildrenPerPage = (args) => {
-    const { numberOfChildren, containerWidth, buttonWidthRem, childWidthRem, gapWidthRem } = args;
-    const childWidth = convertRemToPx(childWidthRem);
-    const gapWidth = convertRemToPx(gapWidthRem);
-    /** First check how many children can fit in containerWidth.
-     *    __________________________________
-     *   |                ||                |
-     *   |                ||                |
-     *   |________________||________________|
-     *   <-----------containerWidth--------->
-     *  containerWidth = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.
-     */
-    const numberOfChildrenInContainer = Math.floor((containerWidth + gapWidth) / (childWidth + gapWidth));
-    // If all children fit then return numberOfChildrenInContainer
-    if (numberOfChildren <= numberOfChildrenInContainer) {
-        return numberOfChildrenInContainer;
-    }
-    const buttonWidth = convertRemToPx(buttonWidthRem);
-    /** We know we need to paginate. So we need to subtract the buttonWidth twice and gapWidth twice from
-     * containerWidth to compute childrenSpace
-     *   <-----------containerWidth--------->
-     *    __________________________________
-     *   | ||             ||             || |
-     *   |<||             ||             ||>|
-     *   |_||_____________||_____________||_|
-     *       <-------childrenSpace------>
-     */
-    const childrenSpace = containerWidth - 2 * buttonWidth - 2 * gapWidth;
-    // Now that we have childrenSpace width we can figure out how many children can fit in childrenSpace.
-    // childrenSpace = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.
-    return Math.floor((childrenSpace + gapWidth) / (childWidth + gapWidth));
+    onChildrenPerPageChange === null || onChildrenPerPageChange === void 0 ? void 0 : onChildrenPerPageChange(childrenPerPage);
+    return (React.createElement("div", { "data-ui-id": "responsive-horizontal-gallery", ref: containerRef, className: mergeStyles(props.containerStyles) },
+        React.createElement(HorizontalGallery, { childrenPerPage: childrenPerPage, styles: props.horizontalGalleryStyles, onFetchTilesToRender: onFetchTilesToRender }, props.children)));
 };
 //# sourceMappingURL=ResponsiveHorizontalGallery.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveHorizontalGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ResponsiveHorizontalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAA2B,MAAM,qBAAqB,CAAC;AACjF,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,mCAAgC;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAExD;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,KAO3C,EAAe,EAAE;IAChB,MAAM,EAAE,aAAa,EAAE,WAAW,EAAE,cAAc,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC;IACjE,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,cAAc,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAExD,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9G,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEhH,MAAM,eAAe,GAAG,wBAAwB,CAAC;QAC/C,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;QACtD,cAAc,EAAE,CAAC,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,CAAC,CAAC,GAAG,WAAW,GAAG,YAAY;QAClE,aAAa;QACb,WAAW;QACX,cAAc;KACf,CAAC,CAAC;IAEH,OAAO,CACL,6BAAK,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,KAAK,CAAC,eAAe,CAAC;QACnE,oBAAC,iBAAiB,IAAC,eAAe,EAAE,eAAe,EAAE,MAAM,EAAE,KAAK,CAAC,uBAAuB,IACvF,KAAK,CAAC,QAAQ,CACG,CAChB,CACP,CAAC;AACJ,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,wBAAwB,GAAG,CAAC,IAMjC,EAAU,EAAE;IACX,MAAM,EAAE,gBAAgB,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;IAE9F,MAAM,UAAU,GAAG,cAAc,CAAC,aAAa,CAAC,CAAC;IACjD,MAAM,QAAQ,GAAG,cAAc,CAAC,WAAW,CAAC,CAAC;IAE7C;;;;;;;OAOG;IACH,MAAM,2BAA2B,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,cAAc,GAAG,QAAQ,CAAC,GAAG,CAAC,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC;IACtG,8DAA8D;IAC9D,IAAI,gBAAgB,IAAI,2BAA2B,EAAE;QACnD,OAAO,2BAA2B,CAAC;KACpC;IAED,MAAM,WAAW,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;IAEnD;;;;;;;;OAQG;IACH,MAAM,aAAa,GAAG,cAAc,GAAG,CAAC,GAAG,WAAW,GAAG,CAAC,GAAG,QAAQ,CAAC;IACtE,qGAAqG;IACrG,qFAAqF;IACrF,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,aAAa,GAAG,QAAQ,CAAC,GAAG,CAAC,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC;AAC1E,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\nimport React, { useRef } from 'react';\nimport { HorizontalGallery, HorizontalGalleryStyles } from './HorizontalGallery';\nimport { _convertRemToPx as convertRemToPx } from '@internal/acs-ui-common';\nimport { _useContainerWidth } from './utils/responsive';\n\n/**\n * Wrapped HorizontalGallery that adjusts the number of items per page based on the\n * available width obtained from a ResizeObserver, width per child, gap width, and button width\n */\nexport const ResponsiveHorizontalGallery = (props: {\n  children: React.ReactNode;\n  containerStyles: IStyle;\n  horizontalGalleryStyles: HorizontalGalleryStyles;\n  childWidthRem: number;\n  gapWidthRem: number;\n  buttonWidthRem?: number;\n}): JSX.Element => {\n  const { childWidthRem, gapWidthRem, buttonWidthRem = 0 } = props;\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerWidth = _useContainerWidth(containerRef);\n\n  const leftPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingLeft) : 0;\n  const rightPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingRight) : 0;\n\n  const childrenPerPage = calculateChildrenPerPage({\n    numberOfChildren: React.Children.count(props.children),\n    containerWidth: (containerWidth ?? 0) - leftPadding - rightPadding,\n    childWidthRem,\n    gapWidthRem,\n    buttonWidthRem\n  });\n\n  return (\n    <div ref={containerRef} className={mergeStyles(props.containerStyles)}>\n      <HorizontalGallery childrenPerPage={childrenPerPage} styles={props.horizontalGalleryStyles}>\n        {props.children}\n      </HorizontalGallery>\n    </div>\n  );\n};\n\n/**\n * Helper function to calculate children per page for HorizontalGallery based on width of container, child, buttons, and\n * gaps in between\n */\nconst calculateChildrenPerPage = (args: {\n  numberOfChildren: number;\n  containerWidth: number;\n  childWidthRem: number;\n  gapWidthRem: number;\n  buttonWidthRem: number;\n}): number => {\n  const { numberOfChildren, containerWidth, buttonWidthRem, childWidthRem, gapWidthRem } = args;\n\n  const childWidth = convertRemToPx(childWidthRem);\n  const gapWidth = convertRemToPx(gapWidthRem);\n\n  /** First check how many children can fit in containerWidth.\n   *    __________________________________\n   *   |                ||                |\n   *   |                ||                |\n   *   |________________||________________|\n   *   <-----------containerWidth--------->\n   *  containerWidth = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.\n   */\n  const numberOfChildrenInContainer = Math.floor((containerWidth + gapWidth) / (childWidth + gapWidth));\n  // If all children fit then return numberOfChildrenInContainer\n  if (numberOfChildren <= numberOfChildrenInContainer) {\n    return numberOfChildrenInContainer;\n  }\n\n  const buttonWidth = convertRemToPx(buttonWidthRem);\n\n  /** We know we need to paginate. So we need to subtract the buttonWidth twice and gapWidth twice from\n   * containerWidth to compute childrenSpace\n   *   <-----------containerWidth--------->\n   *    __________________________________\n   *   | ||             ||             || |\n   *   |<||             ||             ||>|\n   *   |_||_____________||_____________||_|\n   *       <-------childrenSpace------>\n   */\n  const childrenSpace = containerWidth - 2 * buttonWidth - 2 * gapWidth;\n  // Now that we have childrenSpace width we can figure out how many children can fit in childrenSpace.\n  // childrenSpace = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.\n  return Math.floor((childrenSpace + gapWidth) / (childWidth + gapWidth));\n};\n\"../../../acs-ui-common/src\""]}
+{"version":3,"file":"ResponsiveHorizontalGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ResponsiveHorizontalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAA2B,MAAM,qBAAqB,CAAC;AACjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,kCAAkC,EAAE,MAAM,2CAA2C,CAAC;AAE/F;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,KAS3C,EAAe,EAAE;IAChB,MAAM,EAAE,WAAW,EAAE,cAAc,GAAG,CAAC,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,GAAG,KAAK,CAAC;IACjG,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,cAAc,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAExD,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9G,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEhH,MAAM,eAAe,GAAG,kCAAkC,CAAC;QACzD,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;QACtD,cAAc,EAAE,CAAC,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,CAAC,CAAC,GAAG,WAAW,GAAG,YAAY;QAClE,WAAW;QACX,cAAc;KACf,CAAC,CAAC;IACH,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAG,eAAe,CAAC,CAAC;IAE3C,OAAO,CACL,2CAAgB,+BAA+B,EAAC,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,KAAK,CAAC,eAAe,CAAC;QAC9G,oBAAC,iBAAiB,IAChB,eAAe,EAAE,eAAe,EAChC,MAAM,EAAE,KAAK,CAAC,uBAAuB,EACrC,oBAAoB,EAAE,oBAAoB,IAEzC,KAAK,CAAC,QAAQ,CACG,CAChB,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\nimport React, { useRef } from 'react';\nimport { HorizontalGallery, HorizontalGalleryStyles } from './HorizontalGallery';\nimport { _useContainerWidth } from './utils/responsive';\nimport { calculateHorizontalChildrenPerPage } from './VideoGallery/utils/OverflowGalleryUtils';\n\n/**\n * Wrapped HorizontalGallery that adjusts the number of items per page based on the\n * available width obtained from a ResizeObserver, width per child, gap width, and button width\n */\nexport const ResponsiveHorizontalGallery = (props: {\n  children: React.ReactNode;\n  containerStyles: IStyle;\n  horizontalGalleryStyles: HorizontalGalleryStyles;\n  gapWidthRem: number;\n  buttonWidthRem?: number;\n  onFetchTilesToRender?: (indexes: number[]) => void;\n  /** event to listen for children per page changes */\n  onChildrenPerPageChange?: (childrenPerPage: number) => void;\n}): JSX.Element => {\n  const { gapWidthRem, buttonWidthRem = 0, onFetchTilesToRender, onChildrenPerPageChange } = props;\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerWidth = _useContainerWidth(containerRef);\n\n  const leftPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingLeft) : 0;\n  const rightPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingRight) : 0;\n\n  const childrenPerPage = calculateHorizontalChildrenPerPage({\n    numberOfChildren: React.Children.count(props.children),\n    containerWidth: (containerWidth ?? 0) - leftPadding - rightPadding,\n    gapWidthRem,\n    buttonWidthRem\n  });\n  onChildrenPerPageChange?.(childrenPerPage);\n\n  return (\n    <div data-ui-id=\"responsive-horizontal-gallery\" ref={containerRef} className={mergeStyles(props.containerStyles)}>\n      <HorizontalGallery\n        childrenPerPage={childrenPerPage}\n        styles={props.horizontalGalleryStyles}\n        onFetchTilesToRender={onFetchTilesToRender}\n      >\n        {props.children}\n      </HorizontalGallery>\n    </div>\n  );\n};\n"]}

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

@@ -0,0 +1,35 @@
+import { IStyle } from '@fluentui/react';
+import React from 'react';
+import { VerticalGalleryStyles } from './VerticalGallery';
+/**
+ * Props for the Responsive wrapper of the VerticalGallery component
+ *
+ * @beta
+ */
+export interface ResponsiveVerticalGalleryProps {
+    /** Styles for the Children space container */
+    containerStyles: IStyle;
+    /** Styles for the VerticalGallery component */
+    verticalGalleryStyles: VerticalGalleryStyles;
+    /** Height of the gap in between the video tiles */
+    gapHeightRem: number;
+    /** Video tiles to be rendered in the Vertical Gallery */
+    children?: React.ReactNode;
+    /** Height of the control bar for navigating pages */
+    controlBarHeightRem?: number;
+    /** container is shorter than 480 px. */
+    isShort?: boolean;
+    /** Function to set which tiles to give video to in the children. */
+    onFetchTilesToRender?: (indexes: number[]) => void;
+    /** event to listen for children per page changes */
+    onChildrenPerPageChange?: (childrenPerPage: number) => void;
+}
+/**
+ * Responsive container for the VerticalGallery Component. Performs calculations for number of children
+ * for the VerticalGallery
+ * @param props
+ *
+ * @beta
+ */
+export declare const ResponsiveVerticalGallery: (props: ResponsiveVerticalGalleryProps) => JSX.Element;
+//# sourceMappingURL=ResponsiveVerticalGallery.d.ts.map

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

@@ -0,0 +1,33 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { mergeStyles } from '@fluentui/react';
+import React, { useRef } from 'react';
+import { _useContainerHeight } from './utils/responsive';
+import { VerticalGallery } from './VerticalGallery';
+import { calculateVerticalChildrenPerPage } from './VideoGallery/utils/OverflowGalleryUtils';
+/**
+ * Responsive container for the VerticalGallery Component. Performs calculations for number of children
+ * for the VerticalGallery
+ * @param props
+ *
+ * @beta
+ */
+export const ResponsiveVerticalGallery = (props) => {
+    var _a;
+    const { children, containerStyles, verticalGalleryStyles, gapHeightRem, controlBarHeightRem, isShort, onFetchTilesToRender, onChildrenPerPageChange } = props;
+    const containerRef = useRef(null);
+    const containerHeight = _useContainerHeight(containerRef);
+    const topPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingTop) : 0;
+    const bottomPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingBottom) : 0;
+    const childrenPerPage = calculateVerticalChildrenPerPage({
+        numberOfChildren: (_a = React.Children.count(children)) !== null && _a !== void 0 ? _a : 0,
+        containerHeight: (containerHeight !== null && containerHeight !== void 0 ? containerHeight : 0) - topPadding - bottomPadding,
+        gapHeightRem,
+        controlBarHeight: controlBarHeightRem !== null && controlBarHeightRem !== void 0 ? controlBarHeightRem : 2,
+        isShort: isShort !== null && isShort !== void 0 ? isShort : false
+    });
+    onChildrenPerPageChange === null || onChildrenPerPageChange === void 0 ? void 0 : onChildrenPerPageChange(childrenPerPage);
+    return (React.createElement("div", { "data-ui-id": "responsive-vertical-gallery", ref: containerRef, className: mergeStyles(containerStyles) },
+        React.createElement(VerticalGallery, { childrenPerPage: childrenPerPage, styles: verticalGalleryStyles, onFetchTilesToRender: onFetchTilesToRender }, children)));
+};
+//# sourceMappingURL=ResponsiveVerticalGallery.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveVerticalGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ResponsiveVerticalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEtD,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAyB,MAAM,mBAAmB,CAAC;AAC3E,OAAO,EAAE,gCAAgC,EAAE,MAAM,2CAA2C,CAAC;AA0B7F;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;;IAC9F,MAAM,EACJ,QAAQ,EACR,eAAe,EACf,qBAAqB,EACrB,YAAY,EACZ,mBAAmB,EACnB,OAAO,EACP,oBAAoB,EACpB,uBAAuB,EACxB,GAAG,KAAK,CAAC;IACV,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,eAAe,GAAG,mBAAmB,CAAC,YAAY,CAAC,CAAC;IAE1D,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5G,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAElH,MAAM,eAAe,GAAG,gCAAgC,CAAC;QACvD,gBAAgB,EAAE,MAAA,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,mCAAI,CAAC;QACrD,eAAe,EAAE,CAAC,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,CAAC,CAAC,GAAG,UAAU,GAAG,aAAa;QACpE,YAAY;QACZ,gBAAgB,EAAE,mBAAmB,aAAnB,mBAAmB,cAAnB,mBAAmB,GAAI,CAAC;QAC1C,OAAO,EAAE,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,KAAK;KAC1B,CAAC,CAAC;IACH,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAG,eAAe,CAAC,CAAC;IAC3C,OAAO,CACL,2CAAgB,6BAA6B,EAAC,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,eAAe,CAAC;QACtG,oBAAC,eAAe,IACd,eAAe,EAAE,eAAe,EAChC,MAAM,EAAE,qBAAqB,EAC7B,oBAAoB,EAAE,oBAAoB,IAEzC,QAAQ,CACO,CACd,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\nimport { _convertRemToPx } from '@internal/acs-ui-common';\nimport React, { useRef } from 'react';\nimport { _useContainerHeight } from './utils/responsive';\nimport { VerticalGallery, VerticalGalleryStyles } from './VerticalGallery';\nimport { calculateVerticalChildrenPerPage } from './VideoGallery/utils/OverflowGalleryUtils';\n\n/**\n * Props for the Responsive wrapper of the VerticalGallery component\n *\n * @beta\n */\nexport interface ResponsiveVerticalGalleryProps {\n  /** Styles for the Children space container */\n  containerStyles: IStyle;\n  /** Styles for the VerticalGallery component */\n  verticalGalleryStyles: VerticalGalleryStyles;\n  /** Height of the gap in between the video tiles */\n  gapHeightRem: number;\n  /** Video tiles to be rendered in the Vertical Gallery */\n  children?: React.ReactNode;\n  /** Height of the control bar for navigating pages */\n  controlBarHeightRem?: number;\n  /** container is shorter than 480 px. */\n  isShort?: boolean;\n  /** Function to set which tiles to give video to in the children. */\n  onFetchTilesToRender?: (indexes: number[]) => void;\n  /** event to listen for children per page changes */\n  onChildrenPerPageChange?: (childrenPerPage: number) => void;\n}\n\n/**\n * Responsive container for the VerticalGallery Component. Performs calculations for number of children\n * for the VerticalGallery\n * @param props\n *\n * @beta\n */\nexport const ResponsiveVerticalGallery = (props: ResponsiveVerticalGalleryProps): JSX.Element => {\n  const {\n    children,\n    containerStyles,\n    verticalGalleryStyles,\n    gapHeightRem,\n    controlBarHeightRem,\n    isShort,\n    onFetchTilesToRender,\n    onChildrenPerPageChange\n  } = props;\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerHeight = _useContainerHeight(containerRef);\n\n  const topPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingTop) : 0;\n  const bottomPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingBottom) : 0;\n\n  const childrenPerPage = calculateVerticalChildrenPerPage({\n    numberOfChildren: React.Children.count(children) ?? 0,\n    containerHeight: (containerHeight ?? 0) - topPadding - bottomPadding,\n    gapHeightRem,\n    controlBarHeight: controlBarHeightRem ?? 2,\n    isShort: isShort ?? false\n  });\n  onChildrenPerPageChange?.(childrenPerPage);\n  return (\n    <div data-ui-id=\"responsive-vertical-gallery\" ref={containerRef} className={mergeStyles(containerStyles)}>\n      <VerticalGallery\n        childrenPerPage={childrenPerPage}\n        styles={verticalGalleryStyles}\n        onFetchTilesToRender={onFetchTilesToRender}\n      >\n        {children}\n      </VerticalGallery>\n    </div>\n  );\n};\n\"../../../acs-ui-common/src\""]}

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

@@ -26,12 +26,20 @@ const screenshareButtonStyles = (theme) => ({
     rootChecked: {
         background: theme.palette.themePrimary,
         color: DefaultPalette.white,
-        ':focus::after': { outlineColor: `${DefaultPalette.white} !important` } // added !important to avoid override by FluentUI button styles
+        ':focus::after': { outlineColor: `${DefaultPalette.white} !important` },
+        '@media (forced-colors: active)': {
+            border: '1px solid',
+            borderColor: theme.palette.black
+        }
     },
     rootCheckedHovered: {
         background: theme.palette.themePrimary,
         color: DefaultPalette.white,
-        ':focus::after': { outlineColor: `${DefaultPalette.white} !important` } // added !important to avoid override by FluentUI button styles
+        ':focus::after': { outlineColor: `${DefaultPalette.white} !important` },
+        '@media (forced-colors: active)': {
+            border: '1px solid',
+            borderColor: theme.palette.black
+        }
     },
     labelChecked: { color: DefaultPalette.white }
 });

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

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

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { IStyle } from '@fluentui/react';
 import { BaseCustomStyles } from '../types';
 import { SendBoxErrorBarError } from './SendBoxErrorBar';
+import { MentionLookupOptions } from './MentionPopover';
 /**
  * Fluent styles for {@link Sendbox}.
  *
@@ -104,6 +105,11 @@ export interface SendBoxProps {
      * Optional callback called when message is sent
      */
     onSendMessage?: (content: string) => Promise<void>;
+    /**
+     * Optional props needed to lookup suggestions in the mention scenario.
+     * @beta
+     */
+    mentionLookupOptions?: MentionLookupOptions;
     /**
      * Optional callback called when user is typing
      */
@@ -141,14 +147,14 @@ export interface SendBoxProps {
      */
     autoFocus?: 'sendBoxTextField';
     /**
-     * Optional callback to render uploaded files in the SendBox. The sendbox will expand
-     * veritcally to accomodate the uploaded files. File uploads will
-     * be rendered below the text area in sendbox.
+     * Optional callback to render uploaded files in the SendBox. The sendBox will expand
+     * vertically to accommodate the uploaded files. File uploads will
+     * be rendered below the text area in sendBox.
      * @beta
      */
     onRenderFileUploads?: () => JSX.Element;
     /**
-     * Optional array of active file uploads where each object has attibutes
+     * Optional array of active file uploads where each object has attributes
      * of a file upload like name, progress, errorMessage etc.
      * @beta
      */

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

@@ -2,12 +2,11 @@
 // Licensed under the MIT license.
 import React, { useState, useMemo, useCallback } from 'react';
 import { mergeStyles, concatStyleSets, Icon, Stack } from '@fluentui/react';
-import { sendBoxStyle, sendButtonStyle, sendIconStyle, sendBoxWrapperStyles, borderAndBoxShadowStyle } from './styles/SendBox.styles';
+import { sendButtonStyle, sendIconStyle, sendBoxWrapperStyles, borderAndBoxShadowStyle } from './styles/SendBox.styles';
 import { useTheme } from '../theming';
 import { useLocale } from '../localization';
 import { useIdentifiers } from '../identifiers';
-import { InputBoxComponent } from './InputBoxComponent';
-import { VoiceOverButton } from './VoiceOverButton';
+import { InputBoxButton, InputBoxComponent } from './InputBoxComponent';
 import { SendBoxErrors } from './SendBoxErrors';
 /* @conditional-compile-remove(file-sharing) */
 import { _FileUploadCards } from './FileUploadCards';
@@ -24,7 +23,9 @@ const MAXIMUM_LENGTH_OF_MESSAGE = 8000;
  * @public
  */
 export const SendBox = (props) => {
-    const { disabled, systemMessage, supportNewline, onSendMessage, onTyping, onRenderIcon, onRenderSystemMessage, styles, autoFocus } = props;
+    const { disabled, systemMessage, supportNewline, onSendMessage, onTyping, onRenderIcon, onRenderSystemMessage, styles, autoFocus, 
+    /* @conditional-compile-remove(mention) */
+    mentionLookupOptions } = props;
     const theme = useTheme();
     const localeStrings = useLocale().strings.sendBox;
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
@@ -47,15 +48,16 @@ export const SendBox = (props) => {
             setFileUploadsPendingError({ message: strings.fileUploadsPendingError, timestamp: Date.now() });
             return;
         }
-        // we dont want to send empty messages including spaces, newlines, tabs
+        const message = textValue;
+        // we don't want to send empty messages including spaces, newlines, tabs
         // Message can be empty if there is a valid file upload
-        if (!EMPTY_MESSAGE_REGEX.test(textValue) || hasFile(props)) {
-            onSendMessage && onSendMessage(sanitizeText(textValue));
+        if (!EMPTY_MESSAGE_REGEX.test(message) || hasFile(props)) {
+            onSendMessage && onSendMessage(sanitizeText(message));
             setTextValue('');
         }
         (_a = sendTextFieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
-    const setText = (event, newValue) => {
+    const setText = (newValue) => {
         if (newValue === undefined) {
             return;
         }
@@ -77,7 +79,7 @@ export const SendBox = (props) => {
         color: !!errorMessage || !hasTextOrFile ? theme.palette.neutralTertiary : theme.palette.themePrimary
     }, styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon), [errorMessage, hasTextOrFile, theme, styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon]);
     const onRenderSendIcon = useCallback((isHover) => onRenderIcon ? (onRenderIcon(isHover)) : (React.createElement(Icon, { iconName: isHover && textValue ? 'SendBoxSendHovered' : 'SendBoxSend', className: mergedSendIconStyle })), [mergedSendIconStyle, onRenderIcon, textValue]);
-    // Ensure that errors are cleared when there are no files in sendbox
+    // Ensure that errors are cleared when there are no files in sendBox
     React.useEffect(() => {
         if (!(activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.filter((upload) => !upload.error).length)) {
             setFileUploadsPendingError(undefined);
@@ -103,19 +105,25 @@ export const SendBox = (props) => {
                     uploadCompleted: (_f = (_e = props.strings) === null || _e === void 0 ? void 0 : _e.uploadCompleted) !== null && _f !== void 0 ? _f : localeStrings.uploadCompleted
                 } })));
     }, [activeFileUploads, props, localeStrings]);
-    return (React.createElement(Stack, { className: mergeStyles(sendBoxWrapperStyles) },
+    return (React.createElement(Stack, { className: mergeStyles(sendBoxWrapperStyles, { overflow: 'visible' } // This is needed for the mention popup to be visible
+        ) },
         React.createElement(SendBoxErrors, Object.assign({}, sendBoxErrorsProps)),
         React.createElement(Stack, { className: mergeStyles(borderAndBoxShadowStyle({
                 theme,
                 hasErrorMessage: !!errorMessage,
                 disabled: !!disabled
             })) },
-            React.createElement(InputBoxComponent, { autoFocus: autoFocus, "data-ui-id": ids.sendboxTextField, inlineChildren: true, disabled: disabled, errorMessage: onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage, textFieldRef: sendTextFieldRef, id: "sendbox", inputClassName: sendBoxStyle, placeholderText: strings.placeholderText, textValue: textValue, onChange: setText, onKeyDown: () => {
-                    onTyping && onTyping();
+            React.createElement(InputBoxComponent, { autoFocus: autoFocus, "data-ui-id": ids.sendboxTextField, inlineChildren: true, disabled: disabled, errorMessage: onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage, textFieldRef: sendTextFieldRef, id: "sendbox", placeholderText: strings.placeholderText, textValue: textValue, onChange: (_, newValue) => setText(newValue), onKeyDown: (ev) => {
+                    const keyWasSendingMessage = ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline);
+                    if (!keyWasSendingMessage) {
+                        onTyping === null || onTyping === void 0 ? void 0 : onTyping();
+                    }
                 }, onEnterKeyDown: () => {
                     sendMessageOnClick();
-                }, styles: mergedStyles, supportNewline: supportNewline, maxLength: MAXIMUM_LENGTH_OF_MESSAGE },
-                React.createElement(VoiceOverButton, { onRenderIcon: onRenderSendIcon, onClick: (e) => {
+                }, styles: mergedStyles, supportNewline: supportNewline, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, 
+                /* @conditional-compile-remove(mention) */
+                mentionLookupOptions: mentionLookupOptions },
+                React.createElement(InputBoxButton, { onRenderIcon: onRenderSendIcon, onClick: (e) => {
                         if (!textValueOverflow) {
                             sendMessageOnClick();
                         }