npm - @azure/communication-react - Versions diffs - 1.32.0-beta.1 → 1.32.0 - Mend

@azure/communication-react 1.32.0-beta.1 → 1.32.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (946) hide show

package/dist/dist-esm/react-components/src/components/MeetingConferencePhoneInfo.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MeetingConferencePhoneInfo.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/MeetingConferencePhoneInfo.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback } from 'react';\nimport { useMemo } from 'react';\nimport { IModalStyles, Modal, Stack, useTheme, Text, IconButton, Icon } from '@fluentui/react';\nimport { themedPhoneInfoModalStyle, titleClassName, titleContainerClassName, phoneInfoTextStyle, phoneInfoIcon, phoneInfoInctructionLine, phoneInfoStep, stepTextStyle, infoConnectionLinkStyle, phoneInfoIconStyle } from './styles/TeamsMeetingConferenceInfo';\nimport { _preventDismissOnEvent } from '@internal/acs-ui-common';\nimport { useLocale } from '../localization';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { _formatPhoneNumber } from './utils/formatPhoneNumber';\n\n/*\n strings for phone info modal\n * @public\n /\nexport interface MeetingConferencePhoneInfoModalStrings {\n /\n Header for the phone info modal\n /\n meetingConferencePhoneInfoModalTitle: string;\n /\n Phone number instruction\n /\n meetingConferencePhoneInfoModalDialIn: string;\n /\n Meeting ID instruction\n /\n meetingConferencePhoneInfoModalMeetingId: string;\n /\n Wait for phone connection\n /\n meetingConferencePhoneInfoModalWait: string;\n /\n Toll Free Phone Label\n /\n meetingConferencePhoneInfoModalTollFree: string;\n /\n Toll Phone Label\n /\n meetingConferencePhoneInfoModalToll: string;\n /\n Toll Phone Label without geo data\n /\n meetingConferencePhoneInfoModalTollGeoData: string;\n /\n No phone number available message\n /\n meetingConferencePhoneInfoModalNoPhoneAvailable: string;\n}\n\n/\n @public\n * MeetingConferencePhoneInfoModal Component Props.\n /\nexport interface MeetingConferencePhoneInfoModalProps {\n conferencePhoneInfoList: ConferencePhoneInfo[];\n showModal?: boolean;\n onDismissMeetingPhoneInfoSettings?: () => void;\n}\n\n/\n @public\n * a component for setting spoken languages\n /\nexport const MeetingConferencePhoneInfoModal = (props: MeetingConferencePhoneInfoModalProps): JSX.Element => {\n const {\n conferencePhoneInfoList,\n showModal,\n onDismissMeetingPhoneInfoSettings\n } = props;\n const theme = useTheme();\n const strings = useLocale().strings.meetingConferencePhoneInfo;\n const onDismiss = useCallback((): void => {\n if (onDismissMeetingPhoneInfoSettings) {\n onDismissMeetingPhoneInfoSettings();\n }\n }, [onDismissMeetingPhoneInfoSettings]);\n const PhoneInfoModalStyle: Partial<IModalStyles> = useMemo(() => themedPhoneInfoModalStyle(theme), [theme]);\n return <>\n <Modal titleAriaId={strings?.meetingConferencePhoneInfoModalTitle} isOpen={showModal} onDismiss={onDismiss} isBlocking={true} styles={PhoneInfoModalStyle}>\n <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\" className={titleContainerClassName}>\n <Text role=\"heading\" aria-level={2} className={titleClassName}>\n {strings?.meetingConferencePhoneInfoModalTitle}\n </Text>\n <IconButton iconProps={{\n iconName: 'Cancel'\n }} ariaLabel={strings?.meetingConferencePhoneInfoModalTitle} onClick={onDismiss} style={{\n color: theme.palette.black\n }} />\n </Stack>\n {conferencePhoneInfoList.length === 0 && <Stack horizontal>\n <Text className={stepTextStyle}>{strings?.meetingConferencePhoneInfoModalNoPhoneAvailable}</Text>\n </Stack>}\n {conferencePhoneInfoList.length > 0 && <Stack>\n <Stack horizontal horizontalAlign=\"space-between\" className={phoneInfoInctructionLine}>\n <Stack.Item style={{\n display: 'flex'\n }}>\n <Stack horizontal className={phoneInfoStep}>\n <Stack className={infoConnectionLinkStyle(theme)}></Stack>\n <Stack.Item className={phoneInfoIcon(theme)}>\n <Stack verticalAlign=\"center\" horizontalAlign=\"center\">\n <Icon iconName=\"JoinByPhoneDialStepIcon\" className={phoneInfoIconStyle(theme)} />\n </Stack>\n </Stack.Item>\n <Stack.Item>\n <Text className={stepTextStyle}>{strings?.meetingConferencePhoneInfoModalDialIn}</Text>\n </Stack.Item>\n </Stack>\n </Stack.Item>\n <Stack.Item className={phoneInfoStep}>\n {conferencePhoneInfoList.map((phoneNumber, index) => <Stack.Item key={index}>\n <Text className={phoneInfoTextStyle}>\n {_formatPhoneNumber(phoneNumber.phoneNumber, true)}{' '}\n {phoneNumber.isTollFree ? strings.meetingConferencePhoneInfoModalTollFree : strings.meetingConferencePhoneInfoModalToll}\n </Text>\n <br />\n <Text className={phoneInfoTextStyle}> {formatPhoneNumberInfo(phoneNumber, strings)}</Text>\n </Stack.Item>)}\n </Stack.Item>\n </Stack>\n <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\" className={phoneInfoInctructionLine}>\n <Stack.Item style={{\n display: 'flex'\n }}>\n <Stack horizontal>\n <Stack className={infoConnectionLinkStyle(theme)}></Stack>\n <Stack.Item className={phoneInfoIcon(theme)}>\n <Stack verticalAlign=\"center\" horizontalAlign=\"center\">\n <Icon iconName=\"JoinByPhoneConferenceIdIcon\" className={phoneInfoIconStyle(theme)} />\n </Stack>\n </Stack.Item>\n <Stack.Item>\n <Text className={stepTextStyle}>{strings?.meetingConferencePhoneInfoModalMeetingId}</Text>\n </Stack.Item>\n </Stack>\n </Stack.Item>\n <Text className={phoneInfoTextStyle}>{formatMeetingId(conferencePhoneInfoList[0]?.conferenceId)}</Text>\n </Stack>\n <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\">\n <Stack horizontal>\n <Stack.Item className={phoneInfoIcon(theme)} style={{\n marginLeft: _pxToRem(2)\n }}>\n <Icon iconName=\"JoinByPhoneWaitToBeAdmittedIcon\" className={phoneInfoIconStyle(theme)} />\n </Stack.Item>\n <Stack.Item>\n <Text className={stepTextStyle}>{strings?.meetingConferencePhoneInfoModalWait}</Text>\n </Stack.Item>\n </Stack>\n </Stack>\n </Stack>}\n </Modal>\n </>;\n};\n\n/\n @internal\n * format phone number link\n /\nexport const formatPhoneNumberLink = (phoneNumber: ConferencePhoneInfo): string => {\n return `tel:+${phoneNumber.phoneNumber},,${phoneNumber.conferenceId}#`;\n};\n\n/\n @internal\n * format phone number\n /\nexport const formatPhoneNumberInfo = (phoneNumber: ConferencePhoneInfo, strings: MeetingConferencePhoneInfoModalStrings \| undefined): string => {\n const templateText = phoneNumber.country && phoneNumber.city ? strings?.meetingConferencePhoneInfoModalTollGeoData : '';\n return templateText?.replace('{country}', phoneNumber.country \|\| '').replace('{city}', phoneNumber.city \|\| '').trim() \|\| '';\n};\n\n/\n @internal\n * format meeting id\n /\nexport const formatMeetingId = (meetingId?: string): string => {\n if (!meetingId) {\n return '';\n }\n if (meetingId?.length !== 9) {\n return meetingId;\n }\n return [meetingId.slice(0, 3), meetingId.slice(3, 6), meetingId.slice(6, 9)].join(' ') + '#';\n};\n\n/\n @public\n * Information for conference phone info\n */\nexport interface ConferencePhoneInfo {\n phoneNumber: string;\n conferenceId: string;\n isTollFree: boolean;\n country?: string;\n city?: string;\n}"]}
1	+ {"version":3,"file":"MeetingConferencePhoneInfo.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/MeetingConferencePhoneInfo.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback } from 'react';\nimport { useMemo } from 'react';\nimport { IModalStyles, Modal, Stack, useTheme, Text, IconButton, Icon } from '@fluentui/react';\nimport { themedPhoneInfoModalStyle, titleClassName, titleContainerClassName, phoneInfoTextStyle, phoneInfoIcon, phoneInfoInctructionLine, phoneInfoStep, stepTextStyle, infoConnectionLinkStyle, phoneInfoIconStyle } from './styles/TeamsMeetingConferenceInfo';\nimport { _preventDismissOnEvent } from '@internal/acs-ui-common';\nimport { useLocale } from '../localization';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { _formatPhoneNumber } from './utils/formatPhoneNumber';\n\n/*\r\n strings for phone info modal\r\n * @public\r\n /\nexport interface MeetingConferencePhoneInfoModalStrings {\n /\r\n Header for the phone info modal\r\n /\n meetingConferencePhoneInfoModalTitle: string;\n /\r\n Phone number instruction\r\n /\n meetingConferencePhoneInfoModalDialIn: string;\n /\r\n Meeting ID instruction\r\n /\n meetingConferencePhoneInfoModalMeetingId: string;\n /\r\n Wait for phone connection\r\n /\n meetingConferencePhoneInfoModalWait: string;\n /\r\n Toll Free Phone Label\r\n /\n meetingConferencePhoneInfoModalTollFree: string;\n /\r\n Toll Phone Label\r\n /\n meetingConferencePhoneInfoModalToll: string;\n /\r\n Toll Phone Label without geo data\r\n /\n meetingConferencePhoneInfoModalTollGeoData: string;\n /\r\n No phone number available message\r\n /\n meetingConferencePhoneInfoModalNoPhoneAvailable: string;\n /\r\n Dismiss button aria label\r\n /\n meetingConferencePhoneInfoModalDismissButtonAriaLabel: string;\n}\n\n/\r\n @public\r\n * MeetingConferencePhoneInfoModal Component Props.\r\n /\nexport interface MeetingConferencePhoneInfoModalProps {\n conferencePhoneInfoList: ConferencePhoneInfo[];\n showModal?: boolean;\n onDismissMeetingPhoneInfoSettings?: () => void;\n}\n\n/\r\n @public\r\n * a component for setting spoken languages\r\n /\nexport const MeetingConferencePhoneInfoModal = (props: MeetingConferencePhoneInfoModalProps): JSX.Element => {\n const {\n conferencePhoneInfoList,\n showModal,\n onDismissMeetingPhoneInfoSettings\n } = props;\n const theme = useTheme();\n const strings = useLocale().strings.meetingConferencePhoneInfo;\n const onDismiss = useCallback((): void => {\n if (onDismissMeetingPhoneInfoSettings) {\n onDismissMeetingPhoneInfoSettings();\n }\n }, [onDismissMeetingPhoneInfoSettings]);\n const PhoneInfoModalStyle: Partial<IModalStyles> = useMemo(() => themedPhoneInfoModalStyle(theme), [theme]);\n return <>\r\n <Modal titleAriaId={strings?.meetingConferencePhoneInfoModalTitle} isOpen={showModal} onDismiss={onDismiss} isBlocking={true} styles={PhoneInfoModalStyle}>\r\n <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\" className={titleContainerClassName}>\r\n <Text role=\"heading\" aria-level={2} className={titleClassName}>\r\n {strings?.meetingConferencePhoneInfoModalTitle}\r\n </Text>\r\n <IconButton iconProps={{\n iconName: 'Cancel'\n }} ariaLabel={strings?.meetingConferencePhoneInfoModalDismissButtonAriaLabel} onClick={onDismiss} style={{\n color: theme.palette.black\n }} />\r\n </Stack>\r\n {conferencePhoneInfoList.length === 0 && <Stack horizontal>\r\n <Text className={stepTextStyle}>{strings?.meetingConferencePhoneInfoModalNoPhoneAvailable}</Text>\r\n </Stack>}\r\n {conferencePhoneInfoList.length > 0 && <Stack>\r\n <Stack horizontal horizontalAlign=\"space-between\" className={phoneInfoInctructionLine}>\r\n <Stack.Item style={{\n display: 'flex'\n }}>\r\n <Stack horizontal className={phoneInfoStep}>\r\n <Stack className={infoConnectionLinkStyle(theme)}></Stack>\r\n <Stack.Item className={phoneInfoIcon(theme)}>\r\n <Stack verticalAlign=\"center\" horizontalAlign=\"center\">\r\n <Icon iconName=\"JoinByPhoneDialStepIcon\" className={phoneInfoIconStyle(theme)} />\r\n </Stack>\r\n </Stack.Item>\r\n <Stack.Item>\r\n <Text className={stepTextStyle}>{strings?.meetingConferencePhoneInfoModalDialIn}</Text>\r\n </Stack.Item>\r\n </Stack>\r\n </Stack.Item>\r\n <Stack.Item className={phoneInfoStep}>\r\n {conferencePhoneInfoList.map((phoneNumber, index) => <Stack.Item key={index}>\r\n <Text className={phoneInfoTextStyle}>\r\n {_formatPhoneNumber(phoneNumber.phoneNumber, true)}{' '}\r\n {phoneNumber.isTollFree ? strings.meetingConferencePhoneInfoModalTollFree : strings.meetingConferencePhoneInfoModalToll}\r\n </Text>\r\n <br />\r\n <Text className={phoneInfoTextStyle}> {formatPhoneNumberInfo(phoneNumber, strings)}</Text>\r\n </Stack.Item>)}\r\n </Stack.Item>\r\n </Stack>\r\n <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\" className={phoneInfoInctructionLine}>\r\n <Stack.Item style={{\n display: 'flex'\n }}>\r\n <Stack horizontal>\r\n <Stack className={infoConnectionLinkStyle(theme)}></Stack>\r\n <Stack.Item className={phoneInfoIcon(theme)}>\r\n <Stack verticalAlign=\"center\" horizontalAlign=\"center\">\r\n <Icon iconName=\"JoinByPhoneConferenceIdIcon\" className={phoneInfoIconStyle(theme)} />\r\n </Stack>\r\n </Stack.Item>\r\n <Stack.Item>\r\n <Text className={stepTextStyle}>{strings?.meetingConferencePhoneInfoModalMeetingId}</Text>\r\n </Stack.Item>\r\n </Stack>\r\n </Stack.Item>\r\n <Text className={phoneInfoTextStyle}>{formatMeetingId(conferencePhoneInfoList[0]?.conferenceId)}</Text>\r\n </Stack>\r\n <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\">\r\n <Stack horizontal>\r\n <Stack.Item className={phoneInfoIcon(theme)} style={{\n marginLeft: _pxToRem(2)\n }}>\r\n <Icon iconName=\"JoinByPhoneWaitToBeAdmittedIcon\" className={phoneInfoIconStyle(theme)} />\r\n </Stack.Item>\r\n <Stack.Item>\r\n <Text className={stepTextStyle}>{strings?.meetingConferencePhoneInfoModalWait}</Text>\r\n </Stack.Item>\r\n </Stack>\r\n </Stack>\r\n </Stack>}\r\n </Modal>\r\n </>;\n};\n\n/\r\n @internal\r\n * format phone number link\r\n /\nexport const formatPhoneNumberLink = (phoneNumber: ConferencePhoneInfo): string => {\n return `tel:+${phoneNumber.phoneNumber},,${phoneNumber.conferenceId}#`;\n};\n\n/\r\n @internal\r\n * format phone number\r\n /\nexport const formatPhoneNumberInfo = (phoneNumber: ConferencePhoneInfo, strings: MeetingConferencePhoneInfoModalStrings \| undefined): string => {\n const templateText = phoneNumber.country && phoneNumber.city ? strings?.meetingConferencePhoneInfoModalTollGeoData : '';\n return templateText?.replace('{country}', phoneNumber.country \|\| '').replace('{city}', phoneNumber.city \|\| '').trim() \|\| '';\n};\n\n/\r\n @internal\r\n * format meeting id\r\n /\nexport const formatMeetingId = (meetingId?: string): string => {\n if (!meetingId) {\n return '';\n }\n if (meetingId?.length !== 9) {\n return meetingId;\n }\n return [meetingId.slice(0, 3), meetingId.slice(3, 6), meetingId.slice(6, 9)].join(' ') + '#';\n};\n\n/\r\n @public\r\n * Information for conference phone info\r\n */\nexport interface ConferencePhoneInfo {\n phoneNumber: string;\n conferenceId: string;\n isTollFree: boolean;\n country?: string;\n city?: string;\n}"]}

package/dist/dist-esm/react-components/src/components/MeetingReactionOverlay.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MeetingReactionOverlay.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/MeetingReactionOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { OverlayModeTypes, Reaction, ReactionResources, VideoGalleryLocalParticipant, VideoGalleryRemoteParticipant } from '../types';\nimport { VideoGalleryTogetherModeParticipantPosition } from '../types';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport { ParticipantVideoTileOverlay } from './VideoGallery/ParticipantVideoTileOverlay';\nimport { RemoteContentShareReactionOverlay } from './VideoGallery/RemoteContentShareReactionOverlay';\nimport { TogetherModeOverlay } from './TogetherModeOverlay';\nimport { togetherModeMeetingOverlayStyle } from './styles/TogetherMode.styles';\n\n/*\n Reaction overlay component props\n \n Can be used with {@link VideoTile}.\n \n @internal\n /\nexport interface MeetingReactionOverlayProps {\n /\n Reaction rendering overlay type. i.e. single reaction rendering on grid-tile, screen share mode overlay\n /\n overlayMode: OverlayModeTypes;\n /\n Received reaction when overlay mode is grid-tile\n /\n reaction?: Reaction;\n /\n Reactions resources' url and metadata.\n /\n reactionResources: ReactionResources;\n /\n Local participant's reaction event that comes from participant object.\n /\n localParticipant?: VideoGalleryLocalParticipant;\n /\n Remote participant's reaction event.\n /\n remoteParticipants?: VideoGalleryRemoteParticipant[];\n togetherModeSeatPositions?: VideoGalleryTogetherModeParticipantPosition;\n}\n\n/\n Emoji max size\n * @internal\n /\nconst DEFAULT_EMOJI_MAX_SIZE_PX = 70;\n\n/\n Emoji min size\n * @internal\n /\nconst DEFAULT_EMOJI_MIN_SIZE_PX = 32;\n\n/\n Emoji resize scale constant\n * @internal\n /\nconst REACTION_EMOJI_RESIZE_SCALE_CONSTANT = 3;\n\n/\n Reaction overlay component\n \n Can be used with {@link VideoTile}.\n \n @internal\n */\nexport const MeetingReactionOverlay = (props: MeetingReactionOverlayProps): JSX.Element => {\n const {\n overlayMode,\n reaction,\n reactionResources,\n localParticipant,\n remoteParticipants,\n togetherModeSeatPositions\n } = props;\n const [emojiSizePx, setEmojiSizePx] = useState(0);\n const [divHeight, setDivHeight] = useState(0);\n const [divWidth, setDivWidth] = useState(0);\n const videoTileRef = useRef<HTMLDivElement>(null);\n const observer = useRef(new ResizeObserver((entries): void => {\n const domRect = entries.at(0)?.contentRect;\n const width = domRect !== undefined ? domRect.width : 0;\n const height = domRect !== undefined ? domRect.height : 0;\n const reactionEmojiCalcSize = Math.min(width, height) / REACTION_EMOJI_RESIZE_SCALE_CONSTANT;\n // we only want to set the persona size if it has changed\n if (reactionEmojiCalcSize !== emojiSizePx) {\n setEmojiSizePx(Math.max(Math.min(reactionEmojiCalcSize, DEFAULT_EMOJI_MAX_SIZE_PX), DEFAULT_EMOJI_MIN_SIZE_PX));\n }\n if (height !== divHeight) {\n setDivHeight(height);\n }\n if (width !== divWidth) {\n setDivWidth(width);\n }\n }));\n useLayoutEffect(() => {\n if (videoTileRef.current) {\n observer.current.observe(videoTileRef.current);\n }\n const currentObserver = observer.current;\n return () => currentObserver.disconnect();\n }, [videoTileRef]);\n if (overlayMode === 'grid-tiles') {\n return <div ref={videoTileRef} style={{\n width: '100%',\n height: '100%',\n pointerEvents: 'none'\n }}>\n <ParticipantVideoTileOverlay emojiSize={emojiSizePx} reaction={reaction} reactionResources={reactionResources} />\n </div>;\n } else if (props.overlayMode === 'screen-share' \|\| props.overlayMode === 'content-share') {\n return <div ref={videoTileRef} style={{\n width: '100%',\n height: '100%',\n pointerEvents: 'none'\n }}>\n <RemoteContentShareReactionOverlay hostDivHeight={divHeight} hostDivWidth={divWidth} reactionResources={reactionResources} localParticipant={localParticipant} remoteParticipants={remoteParticipants} />\n </div>;\n } else if (props.overlayMode === 'together-mode') {\n return <div style={{\n ...togetherModeMeetingOverlayStyle\n }}>\n <TogetherModeOverlay emojiSize={emojiSizePx} reactionResources={reactionResources} localParticipant={localParticipant ?? {} as VideoGalleryLocalParticipant} remoteParticipants={remoteParticipants ?? [] as VideoGalleryRemoteParticipant[]} togetherModeSeatPositions={togetherModeSeatPositions ?? {}} />\n </div>;\n return <></>;\n } else {\n return <></>;\n }\n};"]}
1	+ {"version":3,"file":"MeetingReactionOverlay.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/MeetingReactionOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { OverlayModeTypes, Reaction, ReactionResources, VideoGalleryLocalParticipant, VideoGalleryRemoteParticipant } from '../types';\nimport { VideoGalleryTogetherModeParticipantPosition } from '../types';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport { ParticipantVideoTileOverlay } from './VideoGallery/ParticipantVideoTileOverlay';\nimport { RemoteContentShareReactionOverlay } from './VideoGallery/RemoteContentShareReactionOverlay';\nimport { TogetherModeOverlay } from './TogetherModeOverlay';\nimport { togetherModeMeetingOverlayStyle } from './styles/TogetherMode.styles';\n\n/*\r\n Reaction overlay component props\r\n \r\n Can be used with {@link VideoTile}.\r\n \r\n @internal\r\n /\nexport interface MeetingReactionOverlayProps {\n /\r\n Reaction rendering overlay type. i.e. single reaction rendering on grid-tile, screen share mode overlay\r\n /\n overlayMode: OverlayModeTypes;\n /\r\n Received reaction when overlay mode is grid-tile\r\n /\n reaction?: Reaction;\n /\r\n Reactions resources' url and metadata.\r\n /\n reactionResources: ReactionResources;\n /\r\n Local participant's reaction event that comes from participant object.\r\n /\n localParticipant?: VideoGalleryLocalParticipant;\n /\r\n Remote participant's reaction event.\r\n /\n remoteParticipants?: VideoGalleryRemoteParticipant[];\n togetherModeSeatPositions?: VideoGalleryTogetherModeParticipantPosition;\n}\n\n/\r\n Emoji max size\r\n * @internal\r\n /\nconst DEFAULT_EMOJI_MAX_SIZE_PX = 70;\n\n/\r\n Emoji min size\r\n * @internal\r\n /\nconst DEFAULT_EMOJI_MIN_SIZE_PX = 32;\n\n/\r\n Emoji resize scale constant\r\n * @internal\r\n /\nconst REACTION_EMOJI_RESIZE_SCALE_CONSTANT = 3;\n\n/\r\n Reaction overlay component\r\n \r\n Can be used with {@link VideoTile}.\r\n \r\n @internal\r\n */\nexport const MeetingReactionOverlay = (props: MeetingReactionOverlayProps): JSX.Element => {\n const {\n overlayMode,\n reaction,\n reactionResources,\n localParticipant,\n remoteParticipants,\n togetherModeSeatPositions\n } = props;\n const [emojiSizePx, setEmojiSizePx] = useState(0);\n const [divHeight, setDivHeight] = useState(0);\n const [divWidth, setDivWidth] = useState(0);\n const videoTileRef = useRef<HTMLDivElement>(null);\n const observer = useRef(new ResizeObserver((entries): void => {\n const domRect = entries.at(0)?.contentRect;\n const width = domRect !== undefined ? domRect.width : 0;\n const height = domRect !== undefined ? domRect.height : 0;\n const reactionEmojiCalcSize = Math.min(width, height) / REACTION_EMOJI_RESIZE_SCALE_CONSTANT;\n // we only want to set the persona size if it has changed\n if (reactionEmojiCalcSize !== emojiSizePx) {\n setEmojiSizePx(Math.max(Math.min(reactionEmojiCalcSize, DEFAULT_EMOJI_MAX_SIZE_PX), DEFAULT_EMOJI_MIN_SIZE_PX));\n }\n if (height !== divHeight) {\n setDivHeight(height);\n }\n if (width !== divWidth) {\n setDivWidth(width);\n }\n }));\n useLayoutEffect(() => {\n if (videoTileRef.current) {\n observer.current.observe(videoTileRef.current);\n }\n const currentObserver = observer.current;\n return () => currentObserver.disconnect();\n }, [videoTileRef]);\n if (overlayMode === 'grid-tiles') {\n return <div ref={videoTileRef} style={{\n width: '100%',\n height: '100%',\n pointerEvents: 'none'\n }}>\r\n <ParticipantVideoTileOverlay emojiSize={emojiSizePx} reaction={reaction} reactionResources={reactionResources} />\r\n </div>;\n } else if (props.overlayMode === 'screen-share' \|\| props.overlayMode === 'content-share') {\n return <div ref={videoTileRef} style={{\n width: '100%',\n height: '100%',\n pointerEvents: 'none'\n }}>\r\n <RemoteContentShareReactionOverlay hostDivHeight={divHeight} hostDivWidth={divWidth} reactionResources={reactionResources} localParticipant={localParticipant} remoteParticipants={remoteParticipants} />\r\n </div>;\n } else if (props.overlayMode === 'together-mode') {\n return <div style={{\n ...togetherModeMeetingOverlayStyle\n }}>\r\n <TogetherModeOverlay emojiSize={emojiSizePx} reactionResources={reactionResources} localParticipant={localParticipant ?? {} as VideoGalleryLocalParticipant} remoteParticipants={remoteParticipants ?? [] as VideoGalleryRemoteParticipant[]} togetherModeSeatPositions={togetherModeSeatPositions ?? {}} />\r\n </div>;\n return <></>;\n } else {\n return <></>;\n }\n};"]}

package/dist/dist-esm/react-components/src/components/MessageStatusIcon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MessageStatusIcon.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/MessageStatusIcon.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,WAAW,MAAM,yBAAyB,CAAC;AAclD;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;IAC9E,MAAM,EACJ,cAAc,EACd,QAAQ,EACR,aAAa,EACb,SAAS,EACV,GAAG,KAAK,CAAC;IACV,OAAO;QAEF,SAAS,IAAI,cAAc,IAAI,oBAAC,WAAW,IAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAC,QAAQ,GAAG;QACrF;YACE,oBAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,eAKX,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,gBAAc,oCAAoC,gBAAc,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,aAAa,GAAI,CACjK,CACL,CAAC;AACR,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon } from '@fluentui/react';\nimport React from 'react';\nimport LiveMessage from './Announcer/LiveMessage';\n\n/*\n Props for {@link MessageStatusIndicatorInternal}.\n \n @internal\n /\nexport interface MessageStatusIconProps {\n shouldAnnounce: boolean;\n iconName: string;\n iconClassName: string;\n ariaLabel?: string;\n}\n\n/\n Component to display message status icon\n \n @internal\n /\nexport const MessageStatusIcon = (props: MessageStatusIconProps): JSX.Element => {\n const {\n shouldAnnounce,\n iconName,\n iconClassName,\n ariaLabel\n } = props;\n return <>\n {/ live message is used here so that aria labels are announced on mobile */}\n {ariaLabel && shouldAnnounce && <LiveMessage message={ariaLabel} ariaLive=\"polite\" />}\n <div>\n <Icon role={'status'}\n // Role `status` is one of the live region roles and is used to notify screen readers of changes to the status of the message\n // it has aria-live prop set to `polite` by default.\n // By setting it to `off` value, we disable live updates when they aren't needed\n // and keep it available in the accessibility tree\n aria-live={shouldAnnounce ? 'polite' : 'off'} data-ui-id={'chat-composite-message-status-icon'} aria-label={ariaLabel} iconName={iconName} className={iconClassName} />\n </div>\n </>;\n};"]}
1	+ {"version":3,"file":"MessageStatusIcon.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/MessageStatusIcon.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,WAAW,MAAM,yBAAyB,CAAC;AAclD;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;IAC9E,MAAM,EACJ,cAAc,EACd,QAAQ,EACR,aAAa,EACb,SAAS,EACV,GAAG,KAAK,CAAC;IACV,OAAO;QAEF,SAAS,IAAI,cAAc,IAAI,oBAAC,WAAW,IAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAC,QAAQ,GAAG;QACrF;YACE,oBAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,eAKX,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,gBAAc,oCAAoC,gBAAc,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,aAAa,GAAI,CACjK,CACL,CAAC;AACR,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon } from '@fluentui/react';\nimport React from 'react';\nimport LiveMessage from './Announcer/LiveMessage';\n\n/*\r\n Props for {@link MessageStatusIndicatorInternal}.\r\n \r\n @internal\r\n /\nexport interface MessageStatusIconProps {\n shouldAnnounce: boolean;\n iconName: string;\n iconClassName: string;\n ariaLabel?: string;\n}\n\n/\r\n Component to display message status icon\r\n \r\n @internal\r\n /\nexport const MessageStatusIcon = (props: MessageStatusIconProps): JSX.Element => {\n const {\n shouldAnnounce,\n iconName,\n iconClassName,\n ariaLabel\n } = props;\n return <>\r\n {/ live message is used here so that aria labels are announced on mobile */}\r\n {ariaLabel && shouldAnnounce && <LiveMessage message={ariaLabel} ariaLive=\"polite\" />}\r\n <div>\r\n <Icon role={'status'}\n // Role `status` is one of the live region roles and is used to notify screen readers of changes to the status of the message\n // it has aria-live prop set to `polite` by default.\n // By setting it to `off` value, we disable live updates when they aren't needed\n // and keep it available in the accessibility tree\n aria-live={shouldAnnounce ? 'polite' : 'off'} data-ui-id={'chat-composite-message-status-icon'} aria-label={ariaLabel} iconName={iconName} className={iconClassName} />\r\n </div>\r\n </>;\n};"]}

package/dist/dist-esm/react-components/src/components/MessageStatusIndicator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MessageStatusIndicator.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/MessageStatusIndicator.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,8BAA8B,EAAuC,MAAM,kCAAkC,CAAC;AAsDvH;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAkC,EAAe,EAAE;IACxF,MAAM,aAAa,mCACd,KAAK,KACR,cAAc,EAAE,IAAI,GACrB,CAAC;IACF,OAAO,oBAAC,8BAA8B,oBAAK,aAAa,EAAmC,CAAC;AAC9F,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageStatus, _formatString } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { BaseCustomStyles } from '../types';\nimport { MessageStatusIndicatorInternal, MessageStatusIndicatorInternalProps } from './MessageStatusIndicatorInternal';\n\n/*\n Strings of {@link MessageStatusIndicator} that can be overridden.\n \n @public\n /\nexport interface MessageStatusIndicatorStrings {\n /* Aria label to notify user when their message has been delivered. /\n deliveredAriaLabel?: string;\n /* Text to display in the delivered message icon tooltip. /\n deliveredTooltipText: string;\n /* Aria label to notify user when their message has been seen by others. /\n seenAriaLabel?: string;\n /* Text to display in the seen message icon tooltip if read number/ participant number is 1 /\n seenTooltipText: string;\n /* Text to display in the seen message icon tooltip if read number logic is working correctly (more than 1 read number and more than 1 particiants)/\n readByTooltipText?: string;\n /* Aria label to notify user when their message is being sent. /\n sendingAriaLabel?: string;\n /* Text to display in the sending message icon tooltip. /\n sendingTooltipText: string;\n /* Aria label to notify user when their message has failed to be sent. /\n failedToSendAriaLabel?: string;\n /* Text to display in the failed message icon tooltip. /\n failedToSendTooltipText: string;\n}\n\n/\n Props for {@link MessageStatusIndicator}.\n \n @public\n /\nexport interface MessageStatusIndicatorProps {\n /* Message status that determines the icon to display. /\n status?: MessageStatus;\n readCount?: number;\n onToggleToolTip?: (isToggled: boolean) => void;\n /* number of participants not including myself /\n remoteParticipantsCount?: number;\n /\n Allows users to pass an object containing custom CSS styles.\n * @Example\n * ```\n * <MessageStatus styles={{ root: { background: 'blue' } }} />\n * ```\n /\n styles?: BaseCustomStyles;\n /\n Optional strings to override in component\n /\n strings?: MessageStatusIndicatorStrings;\n}\n\n/\n Component to display the status of a sent message.\n \n Adds an icon and tooltip corresponding to the message status.\n \n @public\n */\nexport const MessageStatusIndicator = (props: MessageStatusIndicatorProps): JSX.Element => {\n const internalProps: MessageStatusIndicatorInternalProps = {\n ...props,\n shouldAnnounce: true\n };\n return <MessageStatusIndicatorInternal {...internalProps}></MessageStatusIndicatorInternal>;\n};"]}
1	+ {"version":3,"file":"MessageStatusIndicator.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/MessageStatusIndicator.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,8BAA8B,EAAuC,MAAM,kCAAkC,CAAC;AAsDvH;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAkC,EAAe,EAAE;IACxF,MAAM,aAAa,mCACd,KAAK,KACR,cAAc,EAAE,IAAI,GACrB,CAAC;IACF,OAAO,oBAAC,8BAA8B,oBAAK,aAAa,EAAmC,CAAC;AAC9F,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageStatus, _formatString } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { BaseCustomStyles } from '../types';\nimport { MessageStatusIndicatorInternal, MessageStatusIndicatorInternalProps } from './MessageStatusIndicatorInternal';\n\n/*\r\n Strings of {@link MessageStatusIndicator} that can be overridden.\r\n \r\n @public\r\n /\nexport interface MessageStatusIndicatorStrings {\n /* Aria label to notify user when their message has been delivered. /\n deliveredAriaLabel?: string;\n /* Text to display in the delivered message icon tooltip. /\n deliveredTooltipText: string;\n /* Aria label to notify user when their message has been seen by others. /\n seenAriaLabel?: string;\n /* Text to display in the seen message icon tooltip if read number/ participant number is 1 /\n seenTooltipText: string;\n /* Text to display in the seen message icon tooltip if read number logic is working correctly (more than 1 read number and more than 1 particiants)/\n readByTooltipText?: string;\n /* Aria label to notify user when their message is being sent. /\n sendingAriaLabel?: string;\n /* Text to display in the sending message icon tooltip. /\n sendingTooltipText: string;\n /* Aria label to notify user when their message has failed to be sent. /\n failedToSendAriaLabel?: string;\n /* Text to display in the failed message icon tooltip. /\n failedToSendTooltipText: string;\n}\n\n/\r\n Props for {@link MessageStatusIndicator}.\r\n \r\n @public\r\n /\nexport interface MessageStatusIndicatorProps {\n /* Message status that determines the icon to display. /\n status?: MessageStatus;\n readCount?: number;\n onToggleToolTip?: (isToggled: boolean) => void;\n /* number of participants not including myself /\n remoteParticipantsCount?: number;\n /\r\n Allows users to pass an object containing custom CSS styles.\r\n * @Example\r\n * ```\r\n * <MessageStatus styles={{ root: { background: 'blue' } }} />\r\n * ```\r\n /\n styles?: BaseCustomStyles;\n /\r\n Optional strings to override in component\r\n /\n strings?: MessageStatusIndicatorStrings;\n}\n\n/\r\n Component to display the status of a sent message.\r\n \r\n Adds an icon and tooltip corresponding to the message status.\r\n \r\n @public\r\n */\nexport const MessageStatusIndicator = (props: MessageStatusIndicatorProps): JSX.Element => {\n const internalProps: MessageStatusIndicatorInternalProps = {\n ...props,\n shouldAnnounce: true\n };\n return <MessageStatusIndicatorInternal {...internalProps}></MessageStatusIndicatorInternal>;\n};"]}

package/dist/dist-esm/react-components/src/components/MessageStatusIndicatorInternal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MessageStatusIndicatorInternal.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/MessageStatusIndicatorInternal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ICalloutContentStyles, ITooltipHostStyles, mergeStyles, TooltipHost } from '@fluentui/react';\nimport { MessageStatus, _formatString } from '@internal/acs-ui-common';\nimport React, { useState } from 'react';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport { BaseCustomStyles } from '../types';\nimport { MessageStatusIndicatorErrorIconStyle, MessageStatusIndicatorIconStyle } from './styles/MessageStatusIndicator.styles';\nimport { MessageStatusIndicatorStrings } from './MessageStatusIndicator';\nimport { MessageStatusIcon, MessageStatusIconProps } from './MessageStatusIcon';\n\n/*\n Props for {@link MessageStatusIndicatorInternal}.\n \n @internal\n /\nexport interface MessageStatusIndicatorInternalProps {\n /* Message status that determines the icon to display. /\n status?: MessageStatus;\n readCount?: number;\n onToggleToolTip?: (isToggled: boolean) => void;\n /* number of participants not including myself /\n remoteParticipantsCount?: number;\n /\n Allows users to pass an object containing custom CSS styles.\n * @Example\n * ```\n * <MessageStatus styles={{ root: { background: 'blue' } }} />\n * ```\n /\n styles?: BaseCustomStyles;\n /\n Optional strings to override in component\n /\n strings?: MessageStatusIndicatorStrings;\n /\n Optional call back to provide LiveMessage component for accessibility\n /\n shouldAnnounce: boolean;\n}\n\n/\n Component to display the status of a sent message.\n \n Adds an icon and tooltip corresponding to the message status.\n \n @internal\n */\nexport const MessageStatusIndicatorInternal = (props: MessageStatusIndicatorInternalProps): JSX.Element => {\n const {\n status,\n styles,\n remoteParticipantsCount,\n onToggleToolTip,\n readCount,\n shouldAnnounce\n } = props;\n const localeStrings = useLocale().strings.messageStatusIndicator;\n const [isTooltipToggled, setIsTooltipToggled] = useState<boolean>(false);\n const strings = {\n ...localeStrings,\n ...props.strings\n };\n const theme = useTheme();\n const calloutStyle: Partial<ICalloutContentStyles> = {\n root: {\n padding: 0\n },\n calloutMain: {\n padding: '0.5rem'\n }\n };\n\n // Place callout with no gap between it and the button.\n const calloutProps = {\n gapSpace: 0,\n styles: calloutStyle,\n backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n };\n switch (status) {\n case 'failed':\n return <TooltipHost content={strings.failedToSendTooltipText} data-ui-id=\"chat-composite-message-tooltip\" calloutProps={{\n ...calloutProps\n }} styles={hostStyles}>\n <MemoMessageStatusIcon shouldAnnounce={shouldAnnounce} iconName=\"MessageFailed\" iconClassName={mergeStyles(MessageStatusIndicatorErrorIconStyle, {\n color: isDarkThemed(theme) ? theme.semanticColors.errorText : theme.palette.redDark\n }, styles?.root)} ariaLabel={strings.failedToSendAriaLabel} />\n </TooltipHost>;\n case 'sending':\n return <TooltipHost content={strings.sendingTooltipText} data-ui-id=\"chat-composite-message-tooltip\" calloutProps={{\n ...calloutProps\n }} styles={hostStyles}>\n <MemoMessageStatusIcon shouldAnnounce={shouldAnnounce} iconName=\"MessageSending\" iconClassName={mergeStyles(MessageStatusIndicatorIconStyle, {\n color: theme.palette.themePrimary\n }, styles?.root)} ariaLabel={strings.sendingAriaLabel} />\n </TooltipHost>;\n case 'seen':\n return <TooltipHost calloutProps={{\n ...calloutProps\n }} data-ui-id=\"chat-composite-message-tooltip\" styles={hostStyles} content={\n // when it's just 1 to 1 texting, we don't need to know who has read the message, just show message as 'seen'\n // when readCount is 0, we have a bug, show 'seen' to cover up as a fall back\n // when participant count is 0, we have a bug, show 'seen' to cover up as a fall back\n readCount === 0 \|\| remoteParticipantsCount && remoteParticipantsCount <= 1 \|\| !readCount \|\| !remoteParticipantsCount \|\| strings.readByTooltipText === undefined ? strings.seenTooltipText : _formatString(strings.readByTooltipText, {\n messageThreadReadCount: `${readCount}`,\n remoteParticipantsCount: `${remoteParticipantsCount}`\n })} onTooltipToggle={() => {\n if (onToggleToolTip) {\n onToggleToolTip(!isTooltipToggled);\n setIsTooltipToggled(!isTooltipToggled);\n }\n }}>\n <MemoMessageStatusIcon shouldAnnounce={shouldAnnounce} iconName=\"MessageSeen\" iconClassName={mergeStyles({\n color: theme.palette.themePrimary\n }, styles?.root)} ariaLabel={strings.seenAriaLabel} />\n </TooltipHost>;\n case 'delivered':\n return <TooltipHost calloutProps={{\n ...calloutProps\n }} content={strings.deliveredTooltipText} data-ui-id=\"chat-composite-message-tooltip\" styles={hostStyles}>\n <MemoMessageStatusIcon shouldAnnounce={shouldAnnounce} iconName=\"MessageDelivered\" iconClassName={mergeStyles(MessageStatusIndicatorIconStyle, {\n color: theme.palette.themePrimary\n }, styles?.root)} ariaLabel={strings.deliveredAriaLabel} />\n </TooltipHost>;\n default:\n return <></>;\n }\n};\n\n// The TooltipHost root uses display: inline by default.\n// To prevent sizing issues or tooltip positioning issues, we override to inline-block.\n// For more details see \"Icon Button with Tooltip\" on https://developer.microsoft.com/en-us/fluentui#/controls/web/button\nconst hostStyles: Partial<ITooltipHostStyles> = {\n root: {\n display: 'inline-block'\n }\n};\nconst MemoMessageStatusIcon = React.memo((obj: MessageStatusIconProps): JSX.Element => {\n return <MessageStatusIcon {...obj} />;\n});"]}
1	+ {"version":3,"file":"MessageStatusIndicatorInternal.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/MessageStatusIndicatorInternal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ICalloutContentStyles, ITooltipHostStyles, mergeStyles, TooltipHost } from '@fluentui/react';\nimport { MessageStatus, _formatString } from '@internal/acs-ui-common';\nimport React, { useState } from 'react';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport { BaseCustomStyles } from '../types';\nimport { MessageStatusIndicatorErrorIconStyle, MessageStatusIndicatorIconStyle } from './styles/MessageStatusIndicator.styles';\nimport { MessageStatusIndicatorStrings } from './MessageStatusIndicator';\nimport { MessageStatusIcon, MessageStatusIconProps } from './MessageStatusIcon';\n\n/*\r\n Props for {@link MessageStatusIndicatorInternal}.\r\n \r\n @internal\r\n /\nexport interface MessageStatusIndicatorInternalProps {\n /* Message status that determines the icon to display. /\n status?: MessageStatus;\n readCount?: number;\n onToggleToolTip?: (isToggled: boolean) => void;\n /* number of participants not including myself /\n remoteParticipantsCount?: number;\n /\r\n Allows users to pass an object containing custom CSS styles.\r\n * @Example\r\n * ```\r\n * <MessageStatus styles={{ root: { background: 'blue' } }} />\r\n * ```\r\n /\n styles?: BaseCustomStyles;\n /\r\n Optional strings to override in component\r\n /\n strings?: MessageStatusIndicatorStrings;\n /\r\n Optional call back to provide LiveMessage component for accessibility\r\n /\n shouldAnnounce: boolean;\n}\n\n/\r\n Component to display the status of a sent message.\r\n \r\n Adds an icon and tooltip corresponding to the message status.\r\n \r\n @internal\r\n */\nexport const MessageStatusIndicatorInternal = (props: MessageStatusIndicatorInternalProps): JSX.Element => {\n const {\n status,\n styles,\n remoteParticipantsCount,\n onToggleToolTip,\n readCount,\n shouldAnnounce\n } = props;\n const localeStrings = useLocale().strings.messageStatusIndicator;\n const [isTooltipToggled, setIsTooltipToggled] = useState<boolean>(false);\n const strings = {\n ...localeStrings,\n ...props.strings\n };\n const theme = useTheme();\n const calloutStyle: Partial<ICalloutContentStyles> = {\n root: {\n padding: 0\n },\n calloutMain: {\n padding: '0.5rem'\n }\n };\n\n // Place callout with no gap between it and the button.\n const calloutProps = {\n gapSpace: 0,\n styles: calloutStyle,\n backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n };\n switch (status) {\n case 'failed':\n return <TooltipHost content={strings.failedToSendTooltipText} data-ui-id=\"chat-composite-message-tooltip\" calloutProps={{\n ...calloutProps\n }} styles={hostStyles}>\r\n <MemoMessageStatusIcon shouldAnnounce={shouldAnnounce} iconName=\"MessageFailed\" iconClassName={mergeStyles(MessageStatusIndicatorErrorIconStyle, {\n color: isDarkThemed(theme) ? theme.semanticColors.errorText : theme.palette.redDark\n }, styles?.root)} ariaLabel={strings.failedToSendAriaLabel} />\r\n </TooltipHost>;\n case 'sending':\n return <TooltipHost content={strings.sendingTooltipText} data-ui-id=\"chat-composite-message-tooltip\" calloutProps={{\n ...calloutProps\n }} styles={hostStyles}>\r\n <MemoMessageStatusIcon shouldAnnounce={shouldAnnounce} iconName=\"MessageSending\" iconClassName={mergeStyles(MessageStatusIndicatorIconStyle, {\n color: theme.palette.themePrimary\n }, styles?.root)} ariaLabel={strings.sendingAriaLabel} />\r\n </TooltipHost>;\n case 'seen':\n return <TooltipHost calloutProps={{\n ...calloutProps\n }} data-ui-id=\"chat-composite-message-tooltip\" styles={hostStyles} content={\n // when it's just 1 to 1 texting, we don't need to know who has read the message, just show message as 'seen'\n // when readCount is 0, we have a bug, show 'seen' to cover up as a fall back\n // when participant count is 0, we have a bug, show 'seen' to cover up as a fall back\n readCount === 0 \|\| remoteParticipantsCount && remoteParticipantsCount <= 1 \|\| !readCount \|\| !remoteParticipantsCount \|\| strings.readByTooltipText === undefined ? strings.seenTooltipText : _formatString(strings.readByTooltipText, {\n messageThreadReadCount: `${readCount}`,\n remoteParticipantsCount: `${remoteParticipantsCount}`\n })} onTooltipToggle={() => {\n if (onToggleToolTip) {\n onToggleToolTip(!isTooltipToggled);\n setIsTooltipToggled(!isTooltipToggled);\n }\n }}>\r\n <MemoMessageStatusIcon shouldAnnounce={shouldAnnounce} iconName=\"MessageSeen\" iconClassName={mergeStyles({\n color: theme.palette.themePrimary\n }, styles?.root)} ariaLabel={strings.seenAriaLabel} />\r\n </TooltipHost>;\n case 'delivered':\n return <TooltipHost calloutProps={{\n ...calloutProps\n }} content={strings.deliveredTooltipText} data-ui-id=\"chat-composite-message-tooltip\" styles={hostStyles}>\r\n <MemoMessageStatusIcon shouldAnnounce={shouldAnnounce} iconName=\"MessageDelivered\" iconClassName={mergeStyles(MessageStatusIndicatorIconStyle, {\n color: theme.palette.themePrimary\n }, styles?.root)} ariaLabel={strings.deliveredAriaLabel} />\r\n </TooltipHost>;\n default:\n return <></>;\n }\n};\n\n// The TooltipHost root uses display: inline by default.\n// To prevent sizing issues or tooltip positioning issues, we override to inline-block.\n// For more details see \"Icon Button with Tooltip\" on https://developer.microsoft.com/en-us/fluentui#/controls/web/button\nconst hostStyles: Partial<ITooltipHostStyles> = {\n root: {\n display: 'inline-block'\n }\n};\nconst MemoMessageStatusIcon = React.memo((obj: MessageStatusIconProps): JSX.Element => {\n return <MessageStatusIcon {...obj} />;\n});"]}

package/dist/dist-esm/react-components/src/components/MessageThread.d.ts CHANGED Viewed

@@ -1,15 +1,9 @@
 /// <reference types="react" />
 import { IStyle } from '@fluentui/react';
 import { BaseCustomStyles, ChatMessage, CustomMessage, SystemMessage, OnRenderAvatarCallback, Message, ReadReceiptsBySenderId, ComponentSlotStyle } from '../types';
-import { BlockedMessage } from '../types';
 import { MessageStatusIndicatorProps } from './MessageStatusIndicator';
 import { MessageStatus } from "../../../acs-ui-common/src";
-import { AttachmentMetadataInProgress } from "../../../acs-ui-common/src";
-import { MessageOptions } from "../../../acs-ui-common/src";
-import { AttachmentOptions } from '../types/Attachment';
-import { MentionOptions } from './MentionPopover';
 import { InlineImageOptions } from './ChatMessage/ChatMessageContent';
-import { RichTextEditorOptions, RichTextStrings } from './RichTextEditor/RichTextSendBox';
 /**
  * Fluent styles for {@link MessageThread}.
  *
@@ -35,7 +29,6 @@ export interface MessageThreadStyles extends BaseCustomStyles {
     /** Styles for system message container. */
     systemMessageContainer?: ComponentSlotStyle;
     /** Styles for blocked message container. */
-    blockedMessageContainer?: ComponentSlotStyle;
     /** Styles for message status indicator container. */
     messageStatusContainer?: (mine: boolean) => IStyle;
 }
@@ -105,20 +98,10 @@ export interface MessageThreadStrings {
     actionMenuMoreOptions?: string;
     /** Aria label to announce when a message is deleted */
     messageDeletedAnnouncementAriaLabel: string;
-    /** String for download attachment button in attachment card */
-    downloadAttachment: string;
     /** String for open attachment button in attachment card */
     openAttachment: string;
-    /** String for policy violation message removal */
-    blockedWarningText: string;
-    /** String for policy violation message removal details link */
-    blockedWarningLinkText: string;
     /** String for aria text in attachment card group*/
     attachmentCardGroupMessage: string;
-    /**
-     * Error message indicating that one or more image uploads are not complete.
-     */
-    imageUploadsPendingError: string;
 }
 /**
  * Arguments for {@link MessageThreadProps.onRenderJumpToNewMessageButton}.
@@ -141,7 +124,7 @@ export type MessageRenderer = (props: MessageProps) => JSX.Element;
  * @public
  * Callback function run when a message is updated.
  */
-export type UpdateMessageCallback = (messageId: string, content: string, options?: MessageOptions) => Promise<void>;
+export type UpdateMessageCallback = (messageId: string, content: string) => Promise<void>;
 /**
  * @public
  * Callback function run when a message edit is cancelled.
@@ -160,7 +143,7 @@ export type MessageThreadProps = {
     /**
      * Messages to render in message thread. A message can be of type `ChatMessage`, `SystemMessage`, `BlockedMessage` or `CustomMessage`.
      */
-    messages: (ChatMessage | SystemMessage | CustomMessage | BlockedMessage)[];
+    messages: (ChatMessage | SystemMessage | CustomMessage)[];
     /**
      * number of participants in the thread
      */
@@ -241,11 +224,6 @@ export type MessageThreadProps = {
      * `messageRenderer` is not provided for `CustomMessage` and thus only available for `ChatMessage` and `SystemMessage`.
      */
     onRenderMessage?: (messageProps: MessageProps, messageRenderer?: MessageRenderer) => JSX.Element;
-    /**
-     * Optional callback to render attachments in the message component.
-     * @beta
-     */
-    onRenderAttachmentDownloads?: (message: ChatMessage) => JSX.Element;
     /**
      * Optional callback to edit a message.
      *
@@ -274,7 +252,7 @@ export type MessageThreadProps = {
      * @param options - message options to be included in the message
      *
      */
-    onSendMessage?: (content: string, options?: MessageOptions) => Promise<void>;
+    onSendMessage?: (content: string) => Promise<void>;
     /**
     /**
      * Disable editing messages.
@@ -288,66 +266,12 @@ export type MessageThreadProps = {
      * Optional strings to override in component
      */
     strings?: Partial<MessageThreadStrings>;
-    /**
-     * @beta
-     * Optional attachment options, which defines behvaiour for uploading and downloading attachments.
-     * As this moment, the uploadOptions would be ignored and this option is intended for download only.
-     */
-    attachmentOptions?: AttachmentOptions;
-    /**
-     * Optional function to provide customized date format.
-     * @beta
-     */
-    onDisplayDateTimeString?: (messageDate: Date) => string;
-    /**
-     * Optional props needed to lookup a mention query and display mentions
-     * @beta
-     */
-    mentionOptions?: MentionOptions;
     /**
      * Optional callback called when an inline image is clicked.
      * @beta
      */
     inlineImageOptions?: InlineImageOptions;
-    /**
-     * Options to enable rich text editor for the edit box.
-     * @beta
-     */
-    richTextEditorOptions?: RichTextEditBoxOptions;
 };
-/**
- * Options for the rich text editor edit box configuration.
- *
- * @beta
- */
-export interface RichTextEditBoxOptions extends RichTextEditorOptions {
-    /**
-     * Optional callback to handle an inline image that's inserted in the rich text editor.
-     * When not provided, pasting images into rich text editor will be disabled.
-     * @param imageAttributes - attributes of the image such as id, src, style, etc.
-     *        It also contains the image file name which can be accessed through imageAttributes['data-image-file-name']
-     * @param messageId - the id of the message that the inlineImage belongs to.
-     */
-    onInsertInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;
-    /**
-     * Optional callback invoked after inline image is removed from the UI.
-     * @param imageAttributes - attributes of the image such as id, src, style, etc.
-     *        It also contains the image file name which can be accessed through imageAttributes['data-image-file-name'].
-     *        Note that if the src attribute is a local blob url, it has been revoked at this point.
-     * @param messageId - the id of the message that the inlineImage belongs to.
-     */
-    onRemoveInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;
-    /**
-     * Optional Record of type {@link AttachmentMetadataInProgress}
-     * to render the errorBar for inline images inserted in the MessageThread's edit boxes when:
-     *   - there is an error provided in the messagesInlineImagesWithProgress
-     *   - progress is less than 1 when the send button is clicked
-     *   - content html string is longer than the max allowed length.
-     *     (Note that the id and the url prop of the messagesInlineImagesWithProgress will be used as the id and src attribute of the content html
-     *     when calculating the content length, only for the purpose of displaying the content length overflow error.)
-     */
-    messagesInlineImagesWithProgress?: Record<string, AttachmentMetadataInProgress[]>;
-}
 /**
  * Props to render a single message.
  *
@@ -363,7 +287,7 @@ export type MessageProps = {
     /**
      * Strings from parent MessageThread component
      */
-    strings: MessageThreadStrings & Partial<RichTextStrings>;
+    strings: MessageThreadStrings;
     /**
      * Custom CSS styles for chat message container.
      */
@@ -409,7 +333,7 @@ export type MessageProps = {
      * @param options - message options to be included in the message
      *
      */
-    onSendMessage?: (content: string, options?: MessageOptions) => Promise<void>;
+    onSendMessage?: (content: string) => Promise<void>;
 };
 /**
  * @internal

package/dist/dist-esm/react-components/src/components/MessageThread.js CHANGED Viewed

@@ -26,7 +26,6 @@ import { createStyleFromV8Style } from './styles/v8StyleShim';
 import { ChatMessageComponentWrapper } from './ChatMessage/ChatMessageComponentWrapper';
 import { MessageStatusIndicatorInternal } from './MessageStatusIndicatorInternal';
 import { Announcer } from './Announcer';
-import { loadChatMessageComponentAsRichTextEditBox } from './ChatMessage/MyMessageComponents/ChatMessageComponentAsEditBoxPicker';
 const isMessageSame = (first, second) => {
     return first.messageId === second.messageId && first.content === second.content && first.contentType === second.contentType && JSON.stringify(first.createdOn) === JSON.stringify(second.createdOn) && first.senderId === second.senderId && first.senderDisplayName === second.senderDisplayName && JSON.stringify(first.editedOn) === JSON.stringify(second.editedOn);
 };
@@ -79,7 +78,7 @@ const DefaultJumpToNewMessageButton = (props) => {
 const memoizeAllMessages = memoizeFnAll((message, showMessageDate, showMessageStatus, strings, index, onUpdateMessage, onCancelEditMessage, onDeleteMessage, onSendMessage, disableEditing, lastSeenChatMessage, lastSendingChatMessage, lastDeliveredChatMessage) => {
     let key = message.messageId;
     let statusToRender = undefined;
-    if (message.messageType === 'chat' || message.messageType === 'blocked') {
+    if (message.messageType === 'chat') {
         if ((!message.messageId || message.messageId === '') && 'clientMessageId' in message) {
             key = message.clientMessageId;
         }
@@ -163,7 +162,7 @@ export const MessageThread = (props) => {
  */
 export const MessageThreadWrapper = (props) => {
     var _a;
-    const { messages: newMessages, userId, participantCount, readReceiptsBySenderId, styles, disableJumpToNewMessageButton = false, showMessageDate = false, showMessageStatus = false, numberOfChatMessagesToReload = 5, onMessageSeen, onRenderMessageStatus, onRenderAvatar, onLoadPreviousChatMessages, onRenderJumpToNewMessageButton, onRenderMessage, onUpdateMessage, onCancelEditMessage, onDeleteMessage, onSendMessage, onDisplayDateTimeString, mentionOptions, inlineImageOptions, attachmentOptions, onRenderAttachmentDownloads, richTextEditorOptions } = props;
+    const { messages: newMessages, userId, participantCount, readReceiptsBySenderId, styles, disableJumpToNewMessageButton = false, showMessageDate = false, showMessageStatus = false, numberOfChatMessagesToReload = 5, onMessageSeen, onRenderMessageStatus, onRenderAvatar, onLoadPreviousChatMessages, onRenderJumpToNewMessageButton, onRenderMessage, onUpdateMessage, onCancelEditMessage, onDeleteMessage, onSendMessage, inlineImageOptions } = props;
     // We need this state to wait for one tick and scroll to bottom after messages have been initialized.
     // Otherwise chatScrollDivRef.current.clientHeight is wrong if we scroll to bottom before messages are initialized.
     const [chatMessagesInitialized, setChatMessagesInitialized] = useState(false);
@@ -189,14 +188,6 @@ export const MessageThreadWrapper = (props) => {
     const previousMessagesRef = useRef([]);
     // an aria label for Narrator to notify when a message is deleted
     const [deletedMessageAriaLabel, setDeletedMessageAriaLabel] = useState(undefined);
-    useEffect(() => {
-        // if rich text editor is enabled, the rich text editor component should be loaded early for good UX
-        if (richTextEditorOptions !== undefined) {
-            // this line is needed to load the Rooster JS dependencies early in the lifecycle
-            // when the rich text editor is enabled
-            loadChatMessageComponentAsRichTextEditBox();
-        }
-    }, [richTextEditorOptions]);
     const onDeleteMessageCallback = useCallback((messageId) => __awaiter(void 0, void 0, void 0, function* () {
         if (!onDeleteMessage) {
             return;
@@ -486,8 +477,7 @@ export const MessageThreadWrapper = (props) => {
                     className: mergeClasses(classes.root, mergeStyles(styles === null || styles === void 0 ? void 0 : styles.chatContainer)), ref: chatScrollDivRef, style: Object.assign({}, createStyleFromV8Style(styles === null || styles === void 0 ? void 0 : styles.chatContainer)) }, chatArrowNavigationAttributes),
                     latestDeletedMessageId && React.createElement(Announcer, { key: latestDeletedMessageId, announcementString: deletedMessageAriaLabel, ariaLive: 'polite' }),
                     messagesToDisplay.map((message) => {
-                        var _a;
-                        return React.createElement(MemoChatMessageComponentWrapper, Object.assign({}, message, { userId: userId, key: message.key, styles: styles, shouldOverlapAvatarAndMessage: isNarrow, strings: strings, onRenderAvatar: onRenderAvatar, onRenderMessage: onRenderMessage, onRenderMessageStatus: onRenderMessageStatus, defaultStatusRenderer: defaultStatusRenderer, onActionButtonClick: onActionButtonClickMemo, readCount: readCountForHoveredIndicator, participantCount: participantCount, actionsForAttachment: (_a = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.downloadOptions) === null || _a === void 0 ? void 0 : _a.actionsForAttachment, inlineImageOptions: inlineImageOptions, onDisplayDateTimeString: onDisplayDateTimeString, mentionOptions: mentionOptions, onRenderAttachmentDownloads: onRenderAttachmentDownloads, isRichTextEditorEnabled: !!richTextEditorOptions, onPaste: richTextEditorOptions === null || richTextEditorOptions === void 0 ? void 0 : richTextEditorOptions.onPaste, onInsertInlineImage: richTextEditorOptions === null || richTextEditorOptions === void 0 ? void 0 : richTextEditorOptions.onInsertInlineImage, inlineImagesWithProgress: (richTextEditorOptions === null || richTextEditorOptions === void 0 ? void 0 : richTextEditorOptions.messagesInlineImagesWithProgress) && (richTextEditorOptions === null || richTextEditorOptions === void 0 ? void 0 : richTextEditorOptions.messagesInlineImagesWithProgress[message.message.messageId]), onRemoveInlineImage: richTextEditorOptions === null || richTextEditorOptions === void 0 ? void 0 : richTextEditorOptions.onRemoveInlineImage }));
+                        return React.createElement(MemoChatMessageComponentWrapper, Object.assign({}, message, { userId: userId, key: message.key, styles: styles, shouldOverlapAvatarAndMessage: isNarrow, strings: strings, onRenderAvatar: onRenderAvatar, onRenderMessage: onRenderMessage, onRenderMessageStatus: onRenderMessageStatus, defaultStatusRenderer: defaultStatusRenderer, onActionButtonClick: onActionButtonClickMemo, readCount: readCountForHoveredIndicator, participantCount: participantCount, inlineImageOptions: inlineImageOptions }));
                     })))));
 };
 const MemoChatMessageComponentWrapper = React.memo((obj) => {