@azure/communication-react 1.13.0-beta.1 → 1.13.1-alpha-202402280012

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

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

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

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

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/RTE/RTEInputBoxComponent.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { BaseCustomStyles } from '../../types';
+import { RichTextEditorComponentRef } from './RichTextEditor';
+import { RichTextSendBoxStrings } from './RTESendBox';
+/**
+ * @private
+ */
+export interface RTEInputBoxComponentStylesProps extends BaseCustomStyles {
+}
+/**
+ * @private
+ */
+export interface RTEInputBoxComponentProps {
+    placeholderText?: string;
+    content: string;
+    onChange: (newValue?: string) => void;
+    editorComponentRef: React.RefObject<RichTextEditorComponentRef>;
+    strings: Partial<RichTextSendBoxStrings>;
+}
+/**
+ * @private
+ */
+export declare const RTEInputBoxComponent: (props: RTEInputBoxComponentProps) => JSX.Element;
+//# sourceMappingURL=RTEInputBoxComponent.d.ts.map

package/dist/dist-esm/react-components/src/components/RTE/RTEInputBoxComponent.js

@@ -0,0 +1,13 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React from 'react';
+import { RichTextEditor } from './RichTextEditor';
+/**
+ * @private
+ */
+export const RTEInputBoxComponent = (props) => {
+    const { placeholderText, content, onChange, editorComponentRef } = props;
+    return (React.createElement("div", null,
+        React.createElement(RichTextEditor, { content: content, placeholderText: placeholderText, onChange: onChange, ref: editorComponentRef, strings: props.strings })));
+};
+//# sourceMappingURL=RTEInputBoxComponent.js.map

package/dist/dist-esm/react-components/src/components/RTE/RTEInputBoxComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RTEInputBoxComponent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RTE/RTEInputBoxComponent.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAA8B,MAAM,kBAAkB,CAAC;AAmB9E;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAe,EAAE;IACpF,MAAM,EAAE,eAAe,EAAE,OAAO,EAAE,QAAQ,EAAE,kBAAkB,EAAE,GAAG,KAAK,CAAC;IAEzE,OAAO,CACL;QACE,oBAAC,cAAc,IACb,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,kBAAkB,EACvB,OAAO,EAAE,KAAK,CAAC,OAAO,GACtB,CACE,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { BaseCustomStyles } from '../../types';\nimport { RichTextEditor, RichTextEditorComponentRef } from './RichTextEditor';\nimport { RichTextSendBoxStrings } from './RTESendBox';\n\n/**\n * @private\n */\nexport interface RTEInputBoxComponentStylesProps extends BaseCustomStyles {}\n\n/**\n * @private\n */\nexport interface RTEInputBoxComponentProps {\n  placeholderText?: string;\n  content: string;\n  onChange: (newValue?: string) => void;\n  editorComponentRef: React.RefObject<RichTextEditorComponentRef>;\n  strings: Partial<RichTextSendBoxStrings>;\n}\n\n/**\n * @private\n */\nexport const RTEInputBoxComponent = (props: RTEInputBoxComponentProps): JSX.Element => {\n  const { placeholderText, content, onChange, editorComponentRef } = props;\n\n  return (\n    <div>\n      <RichTextEditor\n        content={content}\n        placeholderText={placeholderText}\n        onChange={onChange}\n        ref={editorComponentRef}\n        strings={props.strings}\n      />\n    </div>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/RTE/RTERibbonButtons.d.ts

@@ -0,0 +1,12 @@
+import { Theme } from '@fluentui/react';
+import { LocalizedStrings, RibbonButton } from 'roosterjs-react';
+import { RichTextSendBoxStrings } from './RTESendBox';
+/**
+ * @private
+ */
+export declare const ribbonButtons: (theme: Theme) => RibbonButton<string>[];
+/**
+ * @private
+ */
+export declare const ribbonButtonsStrings: (strings: Partial<RichTextSendBoxStrings>) => LocalizedStrings<string>;
+//# sourceMappingURL=RTERibbonButtons.d.ts.map

package/dist/dist-esm/react-components/src/components/RTE/RTERibbonButtons.js

@@ -0,0 +1,86 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { KnownRibbonButtonKey, getButtons } from 'roosterjs-react';
+import { ribbonButtonStyle, ribbonDividerStyle } from '../styles/RichTextEditor.styles';
+const dividerRibbonButton = (theme) => {
+    return {
+        key: 'Divider',
+        iconName: 'RTEDividerIcon',
+        unlocalizedText: '',
+        onClick: () => { },
+        isDisabled: () => true,
+        commandBarProperties: {
+            buttonStyles: ribbonDividerStyle(theme)
+        }
+    };
+};
+const boldButton = (theme) => {
+    return createKnownRibbonButton(KnownRibbonButtonKey.Bold, theme, 'RTEBoldButtonIcon');
+};
+const italicButton = (theme) => {
+    return createKnownRibbonButton(KnownRibbonButtonKey.Italic, theme, 'RTEItalicButtonIcon');
+};
+const underlineButton = (theme) => {
+    return createKnownRibbonButton(KnownRibbonButtonKey.Underline, theme, 'RTEUnderlineButtonIcon');
+};
+const bulletListButton = (theme) => {
+    return createKnownRibbonButton(KnownRibbonButtonKey.BulletedList, theme, 'RTEBulletListButtonIcon');
+};
+const numberListButton = (theme) => {
+    return createKnownRibbonButton(KnownRibbonButtonKey.NumberedList, theme, 'RTEtNumberListButtonIcon');
+};
+const indentIncreaseButton = (theme) => {
+    return createKnownRibbonButton(KnownRibbonButtonKey.IncreaseIndent, theme, 'RTEIndentIncreaseButtonIcon');
+};
+const indentDecreaseButton = (theme) => {
+    return createKnownRibbonButton(KnownRibbonButtonKey.DecreaseIndent, theme, 'RTEIndentDecreaseButtonIcon');
+};
+const createKnownRibbonButton = (key, theme, icon) => {
+    var _a;
+    const buttons = getButtons([key]);
+    if (buttons.length > 0) {
+        const button = buttons[0];
+        // AllButtonStringKeys is a union of all the string keys of all the buttons
+        const result = buttons[0];
+        button.iconName = icon;
+        button.commandBarProperties = Object.assign(Object.assign({}, button.commandBarProperties), { buttonStyles: Object.assign(Object.assign({}, (_a = button.commandBarProperties) === null || _a === void 0 ? void 0 : _a.buttonStyles), ribbonButtonStyle(theme)) });
+        return result;
+    }
+    return undefined;
+};
+/**
+ * @private
+ */
+export const ribbonButtons = (theme) => {
+    const buttons = [];
+    [
+        boldButton(theme),
+        italicButton(theme),
+        underlineButton(theme),
+        dividerRibbonButton(theme),
+        bulletListButton(theme),
+        numberListButton(theme),
+        indentIncreaseButton(theme),
+        indentDecreaseButton(theme)
+    ].forEach((item) => {
+        if (item !== undefined) {
+            buttons.push(item);
+        }
+    });
+    return buttons;
+};
+/**
+ * @private
+ */
+export const ribbonButtonsStrings = (strings) => {
+    return {
+        buttonNameBold: strings.boldTooltip,
+        buttonNameItalic: strings.italicTooltip,
+        buttonNameUnderline: strings.underlineTooltip,
+        buttonNameBulletedList: strings.bulletListTooltip,
+        buttonNameNumberedList: strings.numberListTooltip,
+        buttonNameIncreaseIndent: strings.increaseIndentTooltip,
+        buttonNameDecreaseIndent: strings.decreaseIndentTooltip
+    };
+};
+//# sourceMappingURL=RTERibbonButtons.js.map

package/dist/dist-esm/react-components/src/components/RTE/RTERibbonButtons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RTERibbonButtons.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RTE/RTERibbonButtons.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Theme } from '@fluentui/react';\nimport { KnownRibbonButtonKey, LocalizedStrings, RibbonButton, getButtons } from 'roosterjs-react';\nimport { ribbonButtonStyle, ribbonDividerStyle } from '../styles/RichTextEditor.styles';\nimport { RichTextSendBoxStrings } from './RTESendBox';\n\nconst dividerRibbonButton = (theme: Theme): RibbonButton<string> => {\n  return {\n    key: 'Divider',\n    iconName: 'RTEDividerIcon',\n    unlocalizedText: '',\n    onClick: () => {},\n    isDisabled: () => true,\n    commandBarProperties: {\n      buttonStyles: ribbonDividerStyle(theme)\n    }\n  };\n};\n\nconst boldButton = (theme: Theme): RibbonButton<string> | undefined => {\n  return createKnownRibbonButton(KnownRibbonButtonKey.Bold, theme, 'RTEBoldButtonIcon');\n};\n\nconst italicButton = (theme: Theme): RibbonButton<string> | undefined => {\n  return createKnownRibbonButton(KnownRibbonButtonKey.Italic, theme, 'RTEItalicButtonIcon');\n};\n\nconst underlineButton = (theme: Theme): RibbonButton<string> | undefined => {\n  return createKnownRibbonButton(KnownRibbonButtonKey.Underline, theme, 'RTEUnderlineButtonIcon');\n};\n\nconst bulletListButton = (theme: Theme): RibbonButton<string> | undefined => {\n  return createKnownRibbonButton(KnownRibbonButtonKey.BulletedList, theme, 'RTEBulletListButtonIcon');\n};\n\nconst numberListButton = (theme: Theme): RibbonButton<string> | undefined => {\n  return createKnownRibbonButton(KnownRibbonButtonKey.NumberedList, theme, 'RTEtNumberListButtonIcon');\n};\n\nconst indentIncreaseButton = (theme: Theme): RibbonButton<string> | undefined => {\n  return createKnownRibbonButton(KnownRibbonButtonKey.IncreaseIndent, theme, 'RTEIndentIncreaseButtonIcon');\n};\n\nconst indentDecreaseButton = (theme: Theme): RibbonButton<string> | undefined => {\n  return createKnownRibbonButton(KnownRibbonButtonKey.DecreaseIndent, theme, 'RTEIndentDecreaseButtonIcon');\n};\n\nconst createKnownRibbonButton = (\n  key: KnownRibbonButtonKey,\n  theme: Theme,\n  icon: string\n): RibbonButton<string> | undefined => {\n  const buttons = getButtons([key]);\n  if (buttons.length > 0) {\n    const button = buttons[0];\n    // AllButtonStringKeys is a union of all the string keys of all the buttons\n    const result = buttons[0] as RibbonButton<typeof button.key>;\n    button.iconName = icon;\n    button.commandBarProperties = {\n      ...button.commandBarProperties,\n      buttonStyles: {\n        ...button.commandBarProperties?.buttonStyles,\n        ...ribbonButtonStyle(theme)\n      }\n    };\n    return result;\n  }\n  return undefined;\n};\n\n/**\n * @private\n */\nexport const ribbonButtons = (theme: Theme): RibbonButton<string>[] => {\n  const buttons: RibbonButton<string>[] = [];\n  [\n    boldButton(theme),\n    italicButton(theme),\n    underlineButton(theme),\n    dividerRibbonButton(theme),\n    bulletListButton(theme),\n    numberListButton(theme),\n    indentIncreaseButton(theme),\n    indentDecreaseButton(theme)\n  ].forEach((item) => {\n    if (item !== undefined) {\n      buttons.push(item);\n    }\n  });\n\n  return buttons;\n};\n\n/**\n * @private\n */\nexport const ribbonButtonsStrings = (strings: Partial<RichTextSendBoxStrings>): LocalizedStrings<string> => {\n  return {\n    buttonNameBold: strings.boldTooltip,\n    buttonNameItalic: strings.italicTooltip,\n    buttonNameUnderline: strings.underlineTooltip,\n    buttonNameBulletedList: strings.bulletListTooltip,\n    buttonNameNumberedList: strings.numberListTooltip,\n    buttonNameIncreaseIndent: strings.increaseIndentTooltip,\n    buttonNameDecreaseIndent: strings.decreaseIndentTooltip\n  };\n};\n"]}

package/dist/dist-esm/react-components/src/components/RTE/RTESendBox.d.ts

@@ -0,0 +1,88 @@
+/// <reference types="react" />
+import { SendBoxStrings } from '../SendBox';
+import { ActiveFileUpload } from '../FileUploadCards';
+/**
+ * Strings of {@link RichTextSendBox} that can be overridden.
+ *
+ * @beta
+ */
+export interface RichTextSendBoxStrings extends SendBoxStrings {
+    /**
+     * Tooltip text for the bold button.
+     */
+    boldTooltip: string;
+    /**
+     * Tooltip text for the italic button.
+     */
+    italicTooltip: string;
+    /**
+     * Tooltip text for the underline button.
+     */
+    underlineTooltip: string;
+    /**
+     * Tooltip text for the bullet list button.
+     */
+    bulletListTooltip: string;
+    /**
+     * Tooltip text for the number list button.
+     */
+    numberListTooltip: string;
+    /**
+     * Tooltip text for the increase indent button.
+     */
+    increaseIndentTooltip: string;
+    /**
+     * Tooltip text for the decrease indent button.
+     */
+    decreaseIndentTooltip: string;
+}
+/**
+ * Props for {@link RichTextSendBox}.
+ *
+ * @beta
+ */
+export interface RichTextSendBoxProps {
+    /**
+     * Optional boolean to disable text box
+     * @defaultValue false
+     */
+    disabled?: boolean;
+    /**
+     * Optional strings to override in component
+     */
+    strings?: Partial<RichTextSendBoxStrings>;
+    /**
+     * Optional text for system message above the text box
+     */
+    systemMessage?: string;
+    /**
+     * 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 attributes
+     * of a file upload like name, progress, errorMessage etc.
+     * @beta
+     */
+    activeFileUploads?: ActiveFileUpload[];
+    /**
+     * Optional callback to remove the file upload before sending by clicking on
+     * cancel icon.
+     * @beta
+     */
+    onCancelFileUpload?: (fileId: string) => void;
+    /**
+     * Callback function used when the send button is clicked.
+     */
+    onSendMessage: (content: string) => Promise<void>;
+}
+/**
+ * A component to render SendBox with Rich Text Editor support.
+ *
+ * @beta
+ */
+export declare const RichTextSendBox: (props: RichTextSendBoxProps) => JSX.Element;
+//# sourceMappingURL=RTESendBox.d.ts.map

package/dist/dist-esm/react-components/src/components/RTE/RTESendBox.js

@@ -0,0 +1,121 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { RTEInputBoxComponent } from './RTEInputBoxComponent';
+import { Icon, Stack, useTheme } from '@fluentui/react';
+import { useLocale } from '../../localization';
+import { borderAndBoxShadowStyle, sendButtonStyle, sendIconStyle } from '../styles/SendBox.styles';
+import { InputBoxButton } from '../InputBoxButton';
+import { RTESendBoxErrors } from './RTESendBoxErrors';
+import { exceedsMaxAllowedLength, sanitizeText } from '../utils/SendBoxUtils';
+/* @conditional-compile-remove(file-sharing) */
+import { hasCompletedFileUploads } from '../utils/SendBoxUtils';
+/**
+ * A component to render SendBox with Rich Text Editor support.
+ *
+ * @beta
+ */
+export const RichTextSendBox = (props) => {
+    const { disabled = false, systemMessage, onSendMessage, 
+    /* @conditional-compile-remove(file-sharing) */
+    activeFileUploads } = props;
+    const theme = useTheme();
+    const locale = useLocale();
+    const localeStrings = useMemo(() => {
+        /* @conditional-compile-remove(rich-text-editor) */
+        return locale.strings.richTextSendBox;
+        return locale.strings.sendBox;
+    }, [/* @conditional-compile-remove(rich-text-editor) */ locale.strings.richTextSendBox, locale.strings.sendBox]);
+    const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
+    const [contentValue, setContentValue] = useState('');
+    const [contentValueOverflow, setContentValueOverflow] = useState(false);
+    /* @conditional-compile-remove(file-sharing) */
+    const [fileUploadsPendingError, setFileUploadsPendingError] = useState(undefined);
+    const editorComponentRef = useRef(null);
+    const contentTooLongMessage = useMemo(() => (contentValueOverflow ? strings.textTooLong : undefined), [contentValueOverflow, strings.textTooLong]);
+    const setContent = useCallback((newValue) => {
+        if (newValue === undefined) {
+            return;
+        }
+        setContentValueOverflow(exceedsMaxAllowedLength(newValue.length));
+        setContentValue(newValue);
+    }, []);
+    const sendMessageOnClick = () => {
+        var _a;
+        if (disabled || contentValueOverflow) {
+            return;
+        }
+        // Don't send message until all files have been uploaded successfully
+        /* @conditional-compile-remove(file-sharing) */
+        setFileUploadsPendingError(undefined);
+        // if (hasIncompleteFileUploads(activeFileUploads)) {
+        //   setFileUploadsPendingError({ message: strings.fileUploadsPendingError, timestamp: Date.now() });
+        //   return;
+        // }
+        const message = contentValue;
+        // we don't want to send empty messages including spaces, newlines, tabs
+        // Message can be empty if there is a valid file upload
+        if (sanitizeText(message).length > 0 ||
+            /* @conditional-compile-remove(file-sharing) */ hasCompletedFileUploads(activeFileUploads)) {
+            onSendMessage(message);
+            setContentValue('');
+        }
+        (_a = editorComponentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const hasErrorMessage = useMemo(() => {
+        var _a;
+        return (!!systemMessage ||
+            !!contentTooLongMessage ||
+            /* @conditional-compile-remove(file-sharing) */
+            !!fileUploadsPendingError ||
+            /* @conditional-compile-remove(file-sharing) */
+            !!((_a = activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.filter((fileUpload) => fileUpload.error).pop()) === null || _a === void 0 ? void 0 : _a.error));
+    }, [
+        /* @conditional-compile-remove(file-sharing) */
+        activeFileUploads,
+        contentTooLongMessage,
+        /* @conditional-compile-remove(file-sharing) */
+        fileUploadsPendingError,
+        systemMessage
+    ]);
+    const onRenderSendIcon = useCallback((isHover) => (React.createElement(Icon, { iconName: isHover && contentValue ? 'SendBoxSendHovered' : 'SendBoxSend', className: sendIconStyle({
+            theme,
+            hasText: !!contentValue,
+            /* @conditional-compile-remove(file-sharing) */
+            hasFile: false,
+            hasErrorMessage: hasErrorMessage
+        }) })), [contentValue, hasErrorMessage, theme]);
+    const sendBoxErrorsProps = useMemo(() => {
+        var _a;
+        return {
+            /* @conditional-compile-remove(file-sharing) */
+            fileUploadsPendingError: fileUploadsPendingError,
+            /* @conditional-compile-remove(file-sharing) */
+            fileUploadError: (_a = activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.filter((fileUpload) => fileUpload.error).pop()) === null || _a === void 0 ? void 0 : _a.error,
+            systemMessage: systemMessage,
+            textTooLongMessage: contentTooLongMessage
+        };
+    }, [
+        /* @conditional-compile-remove(file-sharing) */
+        activeFileUploads,
+        contentTooLongMessage,
+        /* @conditional-compile-remove(file-sharing) */
+        fileUploadsPendingError,
+        systemMessage
+    ]);
+    return (React.createElement(Stack, null,
+        React.createElement(RTESendBoxErrors, Object.assign({}, sendBoxErrorsProps)),
+        React.createElement("div", { className: borderAndBoxShadowStyle({
+                theme: theme,
+                // should always be false as we don't want to show the border when there is an error
+                hasErrorMessage: false,
+                disabled: !!disabled
+            }) },
+            React.createElement(RTEInputBoxComponent, { placeholderText: strings.placeholderText, content: contentValue, onChange: setContent, editorComponentRef: editorComponentRef, strings: strings })),
+        React.createElement(Stack.Item, { align: "end" },
+            React.createElement(InputBoxButton, { onRenderIcon: onRenderSendIcon, onClick: (e) => {
+                    sendMessageOnClick();
+                    e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.
+                }, className: sendButtonStyle, ariaLabel: localeStrings.sendButtonAriaLabel, tooltipContent: localeStrings.sendButtonAriaLabel }))));
+};
+//# sourceMappingURL=RTESendBox.js.map

package/dist/dist-esm/react-components/src/components/RTE/RTESendBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RTESendBox.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RTE/RTESendBox.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,OAAO,EAAE,uBAAuB,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACnG,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAK7E,OAAO,EAAE,uBAAuB,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC9E,+CAA+C;AAC/C,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAsFhE;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;IAC1E,MAAM,EACJ,QAAQ,GAAG,KAAK,EAChB,aAAa,EACb,aAAa;IACb,+CAA+C;IAC/C,iBAAiB,EAClB,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,mDAAmD;QACnD,OAAO,MAAM,CAAC,OAAO,CAAC,eAAe,CAAC;QACtC,OAAO,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC;IAChC,CAAC,EAAE,CAAC,mDAAmD,CAAC,MAAM,CAAC,OAAO,CAAC,eAAe,EAAE,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IAEjH,MAAM,OAAO,mCAAQ,aAAa,GAAK,KAAK,CAAC,OAAO,CAAE,CAAC;IAEvD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACrD,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxE,+CAA+C;IAC/C,MAAM,CAAC,uBAAuB,EAAE,0BAA0B,CAAC,GAAG,QAAQ,CAAmC,SAAS,CAAC,CAAC;IACpH,MAAM,kBAAkB,GAAG,MAAM,CAA6B,IAAI,CAAC,CAAC;IAEpE,MAAM,qBAAqB,GAAG,OAAO,CACnC,GAAG,EAAE,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,EAC9D,CAAC,oBAAoB,EAAE,OAAO,CAAC,WAAW,CAAC,CAC5C,CAAC;IAEF,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,QAAiB,EAAQ,EAAE;QACzD,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;YAC3B,OAAO;QACT,CAAC;QAED,uBAAuB,CAAC,uBAAuB,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;QAClE,eAAe,CAAC,QAAQ,CAAC,CAAC;IAC5B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,kBAAkB,GAAG,GAAS,EAAE;;QACpC,IAAI,QAAQ,IAAI,oBAAoB,EAAE,CAAC;YACrC,OAAO;QACT,CAAC;QACD,qEAAqE;QACrE,+CAA+C;QAC/C,0BAA0B,CAAC,SAAS,CAAC,CAAC;QAEtC,qDAAqD;QACrD,qGAAqG;QACrG,YAAY;QACZ,IAAI;QAEJ,MAAM,OAAO,GAAG,YAAY,CAAC;QAC7B,wEAAwE;QACxE,uDAAuD;QACvD,IACE,YAAY,CAAC,OAAO,CAAC,CAAC,MAAM,GAAG,CAAC;YAChC,+CAA+C,CAAC,uBAAuB,CAAC,iBAAiB,CAAC,EAC1F,CAAC;YACD,aAAa,CAAC,OAAO,CAAC,CAAC;YACvB,eAAe,CAAC,EAAE,CAAC,CAAC;QACtB,CAAC;QACD,MAAA,kBAAkB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;IACtC,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;;QACnC,OAAO,CACL,CAAC,CAAC,aAAa;YACf,CAAC,CAAC,qBAAqB;YACvB,+CAA+C;YAC/C,CAAC,CAAC,uBAAuB;YACzB,+CAA+C;YAC/C,CAAC,CAAC,CAAA,MAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,MAAM,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,UAAU,CAAC,KAAK,EAAE,GAAG,EAAE,0CAAE,KAAK,CAAA,CAC3E,CAAC;IACJ,CAAC,EAAE;QACD,+CAA+C;QAC/C,iBAAiB;QACjB,qBAAqB;QACrB,+CAA+C;QAC/C,uBAAuB;QACvB,aAAa;KACd,CAAC,CAAC;IAEH,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,OAAgB,EAAE,EAAE,CAAC,CACpB,oBAAC,IAAI,IACH,QAAQ,EAAE,OAAO,IAAI,YAAY,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,aAAa,EACxE,SAAS,EAAE,aAAa,CAAC;YACvB,KAAK;YACL,OAAO,EAAE,CAAC,CAAC,YAAY;YACvB,+CAA+C;YAC/C,OAAO,EAAE,KAAK;YACd,eAAe,EAAE,eAAe;SACjC,CAAC,GACF,CACH,EACD,CAAC,YAAY,EAAE,eAAe,EAAE,KAAK,CAAC,CACvC,CAAC;IAEF,MAAM,kBAAkB,GAA0B,OAAO,CAAC,GAAG,EAAE;;QAC7D,OAAO;YACL,+CAA+C;YAC/C,uBAAuB,EAAE,uBAAuB;YAChD,+CAA+C;YAC/C,eAAe,EAAE,MAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,MAAM,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,UAAU,CAAC,KAAK,EAAE,GAAG,EAAE,0CAAE,KAAK;YACzF,aAAa,EAAE,aAAa;YAC5B,kBAAkB,EAAE,qBAAqB;SAC1C,CAAC;IACJ,CAAC,EAAE;QACD,+CAA+C;QAC/C,iBAAiB;QACjB,qBAAqB;QACrB,+CAA+C;QAC/C,uBAAuB;QACvB,aAAa;KACd,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,KAAK;QACJ,oBAAC,gBAAgB,oBAAK,kBAAkB,EAAI;QAC5C,6BACE,SAAS,EAAE,uBAAuB,CAAC;gBACjC,KAAK,EAAE,KAAK;gBACZ,oFAAoF;gBACpF,eAAe,EAAE,KAAK;gBACtB,QAAQ,EAAE,CAAC,CAAC,QAAQ;aACrB,CAAC;YAEF,oBAAC,oBAAoB,IACnB,eAAe,EAAE,OAAO,CAAC,eAAe,EACxC,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,UAAU,EACpB,kBAAkB,EAAE,kBAAkB,EACtC,OAAO,EAAE,OAAO,GAChB,CAEE;QACN,oBAAC,KAAK,CAAC,IAAI,IAAC,KAAK,EAAC,KAAK;YACrB,oBAAC,cAAc,IACb,YAAY,EAAE,gBAAgB,EAC9B,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,kBAAkB,EAAE,CAAC;oBACrB,CAAC,CAAC,eAAe,EAAE,CAAC,CAAC,gFAAgF;gBACvG,CAAC,EACD,SAAS,EAAE,eAAe,EAC1B,SAAS,EAAE,aAAa,CAAC,mBAAmB,EAC5C,cAAc,EAAE,aAAa,CAAC,mBAAmB,GACjD,CACS,CACP,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { RTEInputBoxComponent } from './RTEInputBoxComponent';\nimport { Icon, Stack, useTheme } from '@fluentui/react';\nimport { useLocale } from '../../localization';\nimport { SendBoxStrings } from '../SendBox';\nimport { borderAndBoxShadowStyle, sendButtonStyle, sendIconStyle } from '../styles/SendBox.styles';\nimport { InputBoxButton } from '../InputBoxButton';\nimport { RTESendBoxErrors, RTESendBoxErrorsProps } from './RTESendBoxErrors';\n/* @conditional-compile-remove(file-sharing) */\nimport { ActiveFileUpload } from '../FileUploadCards';\n/* @conditional-compile-remove(file-sharing) */\nimport { SendBoxErrorBarError } from '../SendBoxErrorBar';\nimport { exceedsMaxAllowedLength, sanitizeText } from '../utils/SendBoxUtils';\n/* @conditional-compile-remove(file-sharing) */\nimport { hasCompletedFileUploads } from '../utils/SendBoxUtils';\nimport { RichTextEditorComponentRef } from './RichTextEditor';\n\n/**\n * Strings of {@link RichTextSendBox} that can be overridden.\n *\n * @beta\n */\nexport interface RichTextSendBoxStrings extends SendBoxStrings {\n  /**\n   * Tooltip text for the bold button.\n   */\n  boldTooltip: string;\n  /**\n   * Tooltip text for the italic button.\n   */\n  italicTooltip: string;\n  /**\n   * Tooltip text for the underline button.\n   */\n  underlineTooltip: string;\n  /**\n   * Tooltip text for the bullet list button.\n   */\n  bulletListTooltip: string;\n  /**\n   * Tooltip text for the number list button.\n   */\n  numberListTooltip: string;\n  /**\n   * Tooltip text for the increase indent button.\n   */\n  increaseIndentTooltip: string;\n  /**\n   * Tooltip text for the decrease indent button.\n   */\n  decreaseIndentTooltip: string;\n}\n\n/**\n * Props for {@link RichTextSendBox}.\n *\n * @beta\n */\nexport interface RichTextSendBoxProps {\n  /**\n   * Optional boolean to disable text box\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<RichTextSendBoxStrings>;\n  /**\n   * Optional text for system message above the text box\n   */\n  systemMessage?: string;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional callback to render uploaded files in the SendBox. The sendBox will expand\n   * vertically to accommodate the uploaded files. File uploads will\n   * be rendered below the text area in sendBox.\n   * @beta\n   */\n  onRenderFileUploads?: () => JSX.Element;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional array of active file uploads where each object has attributes\n   * of a file upload like name, progress, errorMessage etc.\n   * @beta\n   */\n  activeFileUploads?: ActiveFileUpload[];\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional callback to remove the file upload before sending by clicking on\n   * cancel icon.\n   * @beta\n   */\n  onCancelFileUpload?: (fileId: string) => void;\n  /**\n   * Callback function used when the send button is clicked.\n   */\n  onSendMessage: (content: string) => Promise<void>;\n}\n\n/**\n * A component to render SendBox with Rich Text Editor support.\n *\n * @beta\n */\nexport const RichTextSendBox = (props: RichTextSendBoxProps): JSX.Element => {\n  const {\n    disabled = false,\n    systemMessage,\n    onSendMessage,\n    /* @conditional-compile-remove(file-sharing) */\n    activeFileUploads\n  } = props;\n\n  const theme = useTheme();\n  const locale = useLocale();\n\n  const localeStrings = useMemo(() => {\n    /* @conditional-compile-remove(rich-text-editor) */\n    return locale.strings.richTextSendBox;\n    return locale.strings.sendBox;\n  }, [/* @conditional-compile-remove(rich-text-editor) */ locale.strings.richTextSendBox, locale.strings.sendBox]);\n\n  const strings = { ...localeStrings, ...props.strings };\n\n  const [contentValue, setContentValue] = useState('');\n  const [contentValueOverflow, setContentValueOverflow] = useState(false);\n  /* @conditional-compile-remove(file-sharing) */\n  const [fileUploadsPendingError, setFileUploadsPendingError] = useState<SendBoxErrorBarError | undefined>(undefined);\n  const editorComponentRef = useRef<RichTextEditorComponentRef>(null);\n\n  const contentTooLongMessage = useMemo(\n    () => (contentValueOverflow ? strings.textTooLong : undefined),\n    [contentValueOverflow, strings.textTooLong]\n  );\n\n  const setContent = useCallback((newValue?: string): void => {\n    if (newValue === undefined) {\n      return;\n    }\n\n    setContentValueOverflow(exceedsMaxAllowedLength(newValue.length));\n    setContentValue(newValue);\n  }, []);\n\n  const sendMessageOnClick = (): void => {\n    if (disabled || contentValueOverflow) {\n      return;\n    }\n    // Don't send message until all files have been uploaded successfully\n    /* @conditional-compile-remove(file-sharing) */\n    setFileUploadsPendingError(undefined);\n\n    // if (hasIncompleteFileUploads(activeFileUploads)) {\n    //   setFileUploadsPendingError({ message: strings.fileUploadsPendingError, timestamp: Date.now() });\n    //   return;\n    // }\n\n    const message = contentValue;\n    // we don't want to send empty messages including spaces, newlines, tabs\n    // Message can be empty if there is a valid file upload\n    if (\n      sanitizeText(message).length > 0 ||\n      /* @conditional-compile-remove(file-sharing) */ hasCompletedFileUploads(activeFileUploads)\n    ) {\n      onSendMessage(message);\n      setContentValue('');\n    }\n    editorComponentRef.current?.focus();\n  };\n\n  const hasErrorMessage = useMemo(() => {\n    return (\n      !!systemMessage ||\n      !!contentTooLongMessage ||\n      /* @conditional-compile-remove(file-sharing) */\n      !!fileUploadsPendingError ||\n      /* @conditional-compile-remove(file-sharing) */\n      !!activeFileUploads?.filter((fileUpload) => fileUpload.error).pop()?.error\n    );\n  }, [\n    /* @conditional-compile-remove(file-sharing) */\n    activeFileUploads,\n    contentTooLongMessage,\n    /* @conditional-compile-remove(file-sharing) */\n    fileUploadsPendingError,\n    systemMessage\n  ]);\n\n  const onRenderSendIcon = useCallback(\n    (isHover: boolean) => (\n      <Icon\n        iconName={isHover && contentValue ? 'SendBoxSendHovered' : 'SendBoxSend'}\n        className={sendIconStyle({\n          theme,\n          hasText: !!contentValue,\n          /* @conditional-compile-remove(file-sharing) */\n          hasFile: false,\n          hasErrorMessage: hasErrorMessage\n        })}\n      />\n    ),\n    [contentValue, hasErrorMessage, theme]\n  );\n\n  const sendBoxErrorsProps: RTESendBoxErrorsProps = useMemo(() => {\n    return {\n      /* @conditional-compile-remove(file-sharing) */\n      fileUploadsPendingError: fileUploadsPendingError,\n      /* @conditional-compile-remove(file-sharing) */\n      fileUploadError: activeFileUploads?.filter((fileUpload) => fileUpload.error).pop()?.error,\n      systemMessage: systemMessage,\n      textTooLongMessage: contentTooLongMessage\n    };\n  }, [\n    /* @conditional-compile-remove(file-sharing) */\n    activeFileUploads,\n    contentTooLongMessage,\n    /* @conditional-compile-remove(file-sharing) */\n    fileUploadsPendingError,\n    systemMessage\n  ]);\n\n  return (\n    <Stack>\n      <RTESendBoxErrors {...sendBoxErrorsProps} />\n      <div\n        className={borderAndBoxShadowStyle({\n          theme: theme,\n          // should always be false as we don't want to show the border when there is an error\n          hasErrorMessage: false,\n          disabled: !!disabled\n        })}\n      >\n        <RTEInputBoxComponent\n          placeholderText={strings.placeholderText}\n          content={contentValue}\n          onChange={setContent}\n          editorComponentRef={editorComponentRef}\n          strings={strings}\n        />\n        {/* File Upload */}\n      </div>\n      <Stack.Item align=\"end\">\n        <InputBoxButton\n          onRenderIcon={onRenderSendIcon}\n          onClick={(e) => {\n            sendMessageOnClick();\n            e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.\n          }}\n          className={sendButtonStyle}\n          ariaLabel={localeStrings.sendButtonAriaLabel}\n          tooltipContent={localeStrings.sendButtonAriaLabel}\n        />\n      </Stack.Item>\n    </Stack>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/RTE/RTESendBoxErrors.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { SendBoxErrorBarError } from '../SendBoxErrorBar';
+/**
+ * @private
+ */
+export interface RTESendBoxErrorsProps {
+    fileUploadsPendingError?: SendBoxErrorBarError;
+    fileUploadError?: SendBoxErrorBarError;
+    systemMessage?: string;
+    textTooLongMessage?: string;
+}
+/**
+ * @private
+ */
+export declare const RTESendBoxErrors: (props: RTESendBoxErrorsProps) => JSX.Element;
+//# sourceMappingURL=RTESendBoxErrors.d.ts.map