npm - @azure/communication-react - Versions diffs - 1.18.0-alpha-202406150014 → 1.18.0-alpha-202406191739 - Mend

@azure/communication-react 1.18.0-alpha-202406150014 → 1.18.0-alpha-202406191739

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 (170) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"VideoGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VideoGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, IStyle, mergeStyles, Stack } from '@fluentui/react';\nimport React, { useCallback, useMemo, useRef } from 'react';\nimport { GridLayoutStyles } from '.';\nimport { Announcer } from './Announcer';\nimport { useEffect } from 'react';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport {\n BaseCustomStyles,\n OnRenderAvatarCallback,\n VideoGalleryLocalParticipant,\n VideoGalleryRemoteParticipant,\n VideoStreamOptions,\n CreateVideoStreamViewResult\n} from '../types';\nimport { ViewScalingMode } from '../types';\nimport { HorizontalGalleryStyles } from './HorizontalGallery';\nimport { _RemoteVideoTile } from './RemoteVideoTile';\nimport { isNarrowWidth, _useContainerHeight, _useContainerWidth } from './utils/responsive';\nimport { LocalScreenShare } from './VideoGallery/LocalScreenShare';\nimport { RemoteScreenShare } from './VideoGallery/RemoteScreenShare';\nimport { LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nimport { _ICoordinates, _ModalClone } from './ModalClone/ModalClone';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { _LocalVideoTile } from './LocalVideoTile';\nimport { DefaultLayout } from './VideoGallery/DefaultLayout';\nimport { FloatingLocalVideoLayout } from './VideoGallery/FloatingLocalVideoLayout';\nimport { useIdentifiers } from '../identifiers';\nimport { localVideoTileContainerStyles, videoGalleryOuterDivStyle } from './styles/VideoGallery.styles';\nimport { floatingLocalVideoTileStyle } from './VideoGallery/styles/FloatingLocalVideo.styles';\nimport { useId } from '@fluentui/react-hooks';\nimport { VerticalGalleryStyles } from './VerticalGallery';\nimport { SpeakerVideoLayout } from './VideoGallery/SpeakerVideoLayout';\nimport { FocusedContentLayout } from './VideoGallery/FocusContentLayout';\n/* @conditional-compile-remove(large-gallery) /\nimport { LargeGalleryLayout } from './VideoGallery/LargeGalleryLayout';\nimport { LayoutProps } from './VideoGallery/Layout';\nimport { ReactionResources } from '../types/ReactionTypes';\n\n/\n @private\n * Currently the Calling JS SDK supports up to 4 remote video streams\n /\nexport const DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;\n\n/\n @private\n * Styles to disable the selectivity of a text in video gallery\n /\nexport const unselectable = {\n '-webkit-user-select': 'none',\n '-webkit-touch-callout': 'none',\n '-moz-user-select': 'none',\n '-ms-user-select': 'none',\n 'user-select': 'none'\n};\n/\n @private\n * Set aside only 6 dominant speakers for remaining audio participants\n /\nexport const MAX_AUDIO_DOMINANT_SPEAKERS = 6;\n/\n @private\n * Default remote video tile menu options\n /\nexport const DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS = {\n kind: 'contextual'\n};\n\n/\n @private\n * Maximum number of remote video tiles that can be pinned\n /\nexport const MAX_PINNED_REMOTE_VIDEO_TILES = 4;\n\n/\n All strings that may be shown on the UI in the {@link VideoGallery}.\n \n @public\n /\nexport interface VideoGalleryStrings {\n /* String to notify that local user is sharing their screen /\n screenIsBeingSharedMessage: string;\n /* String to show when remote screen share stream is loading /\n screenShareLoadingMessage: string;\n /* String for local video label. Default is \"You\" /\n localVideoLabel: string;\n /* String for local video camera switcher /\n localVideoCameraSwitcherLabel: string;\n /* String for announcing the local video tile can be moved by keyboard controls /\n localVideoMovementLabel: string;\n /* Aria-label for announcing the local video tile can be moved by keyboard controls /\n localVideoMovementAriaLabel: string;\n /* String for announcing the selected camera /\n localVideoSelectedDescription: string;\n /* placeholder text for participants who does not have a display name/\n displayNamePlaceholder: string;\n /* Menu text shown in Video Tile contextual menu for setting a remote participants video to fit in frame /\n fitRemoteParticipantToFrame: string;\n /* Menu text shown in Video Tile contextual menu for setting a remote participants video to fill the frame /\n fillRemoteParticipantFrame: string;\n /* Menu text shown in Video Tile contextual menu for pinning a remote participant's video tile /\n pinParticipantForMe: string;\n /* Menu text shown in Video Tile contextual menu for unpinning a remote participant's video tile /\n unpinParticipantForMe: string;\n /* Aria label for pin participant menu item of remote participant's video tile /\n pinParticipantMenuItemAriaLabel: string;\n /* Aria label for unpin participant menu item of remote participant's video tile /\n unpinParticipantMenuItemAriaLabel: string;\n /* Aria label to announce when remote participant's video tile is pinned /\n pinnedParticipantAnnouncementAriaLabel: string;\n /* Aria label to announce when remote participant's video tile is unpinned /\n unpinnedParticipantAnnouncementAriaLabel: string;\n /* Menu text shown in Video Tile contextual menu to start spotlight on participant's video tile /\n startSpotlightVideoTileMenuLabel: string;\n /* Menu text shown in Video Tile contextual menu to add spotlight to participant's video tile /\n addSpotlightVideoTileMenuLabel: string;\n /* Menu title for start spotlight menu item when spotlight limit is reached /\n spotlightLimitReachedMenuTitle: string;\n /* Menu text shown in Video Tile contextual menu to stop spotlight on participant's video tile /\n stopSpotlightVideoTileMenuLabel: string;\n /* Menu text shown in Video Tile contextual menu to stop spotlight on local user's video tile /\n stopSpotlightOnSelfVideoTileMenuLabel: string;\n / @conditional-compile-remove(hide-attendee-name) /\n /* String for the attendee role /\n attendeeRole: string;\n}\n\n/\n @public\n /\nexport type VideoGalleryLayout =\n \| 'default'\n \| 'floatingLocalVideo'\n \| 'speaker'\n \| / @conditional-compile-remove(large-gallery) / 'largeGallery'\n \| 'focusedContent';\n\n/\n {@link VideoGallery} Component Styles.\n * @public\n /\nexport interface VideoGalleryStyles extends BaseCustomStyles {\n /* Styles for the grid layout /\n gridLayout?: GridLayoutStyles;\n /* Styles for the horizontal gallery /\n horizontalGallery?: HorizontalGalleryStyles;\n /* Styles for the local video /\n localVideo?: IStyle;\n /* Styles for the vertical gallery /\n verticalGallery?: VerticalGalleryStyles;\n}\n\n/\n Different modes and positions of the overflow gallery in the VideoGallery\n \n @public\n /\nexport type OverflowGalleryPosition = 'horizontalBottom' \| 'verticalRight' \| 'horizontalTop';\n\n/\n different modes of the local video tile\n \n @public\n /\nexport type LocalVideoTileSize = '9:16' \| '16:9' \| 'hidden' \| 'followDeviceOrientation';\n\n/\n Props for {@link VideoGallery}.\n \n @public\n /\nexport interface VideoGalleryProps {\n /\n Allows users to pass an object containing custom CSS styles for the gallery container.\n \n @Example\n * ```\n * <VideoGallery styles={{ root: { border: 'solid 1px red' } }} />\n * ```\n /\n styles?: VideoGalleryStyles;\n /* Layout of the video tiles. /\n layout?: VideoGalleryLayout;\n /* Local video particpant /\n localParticipant: VideoGalleryLocalParticipant;\n /* List of remote video particpants /\n remoteParticipants?: VideoGalleryRemoteParticipant[];\n /* List of dominant speaker userIds in the order of their dominance. 0th index is the most dominant. /\n dominantSpeakers?: string[];\n /* Local video view options /\n localVideoViewOptions?: VideoStreamOptions;\n /* Remote videos view options /\n remoteVideoViewOptions?: VideoStreamOptions;\n /* Callback to create the local video stream view /\n onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void \| CreateVideoStreamViewResult>;\n /* Callback to dispose of the local video stream view /\n onDisposeLocalStreamView?: () => void;\n /* Callback to render the local video tile/\n onRenderLocalVideoTile?: (localParticipant: VideoGalleryLocalParticipant) => JSX.Element;\n /* Callback to create a remote video stream view /\n onCreateRemoteStreamView?: (\n userId: string,\n options?: VideoStreamOptions\n ) => Promise<void \| CreateVideoStreamViewResult>;\n /* Callback to render a remote video tile /\n onRenderRemoteVideoTile?: (remoteParticipant: VideoGalleryRemoteParticipant) => JSX.Element;\n /\n @deprecated use {@link onDisposeRemoteVideoStreamView} and {@link onDisposeRemoteScreenShareStreamView} instead\n \n Callback to dispose a remote video stream view\n /\n onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n /* Callback to dispose a remote video stream view /\n onDisposeRemoteVideoStreamView?: (userId: string) => Promise<void>;\n /* Callback to dispose a remote screen share stream view /\n onDisposeRemoteScreenShareStreamView?: (userId: string) => Promise<void>;\n /* Callback to render a particpant avatar /\n onRenderAvatar?: OnRenderAvatarCallback;\n /\n Whether to display the local video camera switcher button\n /\n showCameraSwitcherInLocalPreview?: boolean;\n /\n Whether to display a mute icon beside the user's display name.\n * @defaultValue `true`\n /\n showMuteIndicator?: boolean;\n /* Optional strings to override in component /\n strings?: Partial<VideoGalleryStrings>;\n /\n Maximum number of participant remote video streams that is rendered.\n * @defaultValue 4\n /\n maxRemoteVideoStreams?: number;\n /\n Camera control information for button to switch cameras.\n /\n localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n /\n List of pinned participant userIds.\n /\n pinnedParticipants?: string[];\n /\n This callback will be called when a participant video tile is pinned.\n /\n onPinParticipant?: (userId: string) => void;\n /\n This callback will be called when a participant video tile is un-pinned.\n /\n onUnpinParticipant?: (userId: string) => void;\n /\n List of spotlighted participant userIds.\n /\n spotlightedParticipants?: string[];\n /\n This callback is to start spotlight for local participant video tile.\n /\n onStartLocalSpotlight?: () => Promise<void>;\n /\n This callback is to stop spotlight for local participant video tile.\n /\n onStartRemoteSpotlight?: (userIds: string[]) => Promise<void>;\n /\n This callback is to start spotlight for remote participant video tiles.\n /\n onStopLocalSpotlight?: () => Promise<void>;\n /\n This callback is to stop spotlight for remote participant video tiles.\n /\n onStopRemoteSpotlight?: (userIds: string[]) => Promise<void>;\n /\n Maximum participants that can be spotlighted\n /\n maxParticipantsToSpotlight?: number;\n /\n Options for showing the remote video tile menu.\n \n @defaultValue \\{ kind: 'contextual' \\}\n /\n remoteVideoTileMenu?: false \| VideoTileContextualMenuProps \| VideoTileDrawerMenuProps;\n /\n Determines the layout of the overflowGallery inside the VideoGallery.\n * @defaultValue 'horizontalBottom'\n /\n overflowGalleryPosition?: OverflowGalleryPosition;\n /\n Determines the aspect ratio of local video tile in the video gallery.\n * @remarks 'followDeviceOrientation' will be responsive to the screen orientation and will change between 9:16 (portrait) and\n * 16:9 (landscape) aspect ratios.\n * @defaultValue 'followDeviceOrientation'\n /\n localVideoTileSize?: LocalVideoTileSize;\n /\n Reaction resources for like, heart, laugh, applause and surprised.\n /\n reactionResources?: ReactionResources;\n /\n Additional Options for Video Tiles\n /\n videoTilesOptions?: VideoTilesOptions;\n / @conditional-compile-remove(soft-mute) /\n /\n This callback is to mute a remote participant\n /\n onMuteParticipant?: (userId: string) => Promise<void>;\n}\n\n/\n Options that apply to all Video Tiles in the {@link VideoGallery}\n \n @public\n /\nexport interface VideoTilesOptions {\n /\n Whether to always show the label background for the video tile\n /\n alwaysShowLabelBackground?: boolean;\n}\n\n/\n Properties for showing contextual menu for remote {@link VideoTile} components in {@link VideoGallery}.\n \n @public\n /\nexport interface VideoTileContextualMenuProps {\n /\n The menu property kind\n /\n kind: 'contextual';\n}\n\n/\n Properties for showing drawer menu on remote {@link VideoTile} long touch in {@link VideoGallery}.\n \n @public\n /\nexport interface VideoTileDrawerMenuProps {\n /\n The menu property kind\n /\n kind: 'drawer';\n /\n The optional id property provided on an element that the drawer menu should render within when a\n * remote participant video tile Drawer is shown. If an id is not provided, then a drawer menu will\n * render within the VideoGallery component.\n /\n hostId?: string;\n}\n/\n VideoGallery represents a layout of video tiles for a specific call.\n * It displays a {@link VideoTile} for the local user as well as for each remote participant who has joined the call.\n \n @public\n /\nexport const VideoGallery = (props: VideoGalleryProps): JSX.Element => {\n const {\n localParticipant,\n remoteParticipants = [],\n localVideoViewOptions,\n remoteVideoViewOptions,\n dominantSpeakers,\n onRenderLocalVideoTile,\n onRenderRemoteVideoTile,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n onCreateRemoteStreamView,\n onDisposeRemoteScreenShareStreamView,\n onDisposeRemoteVideoStreamView,\n styles,\n layout,\n onRenderAvatar,\n showMuteIndicator,\n maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS,\n showCameraSwitcherInLocalPreview,\n localVideoCameraCycleButtonProps,\n onPinParticipant: onPinParticipantHandler,\n onUnpinParticipant: onUnpinParticipantHandler,\n remoteVideoTileMenu = DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS,\n overflowGalleryPosition = 'horizontalBottom',\n localVideoTileSize = 'followDeviceOrientation',\n spotlightedParticipants,\n onStartLocalSpotlight,\n onStartRemoteSpotlight,\n onStopLocalSpotlight,\n onStopRemoteSpotlight,\n maxParticipantsToSpotlight,\n reactionResources,\n videoTilesOptions,\n / @conditional-compile-remove(soft-mute) /\n onMuteParticipant\n } = props;\n\n const ids = useIdentifiers();\n const theme = useTheme();\n const localeStrings = useLocale().strings.videoGallery;\n const strings = useMemo(() => ({ ...localeStrings, ...props.strings }), [localeStrings, props.strings]);\n\n const drawerMenuHostIdFromProp =\n remoteVideoTileMenu && remoteVideoTileMenu.kind === 'drawer'\n ? (remoteVideoTileMenu as VideoTileDrawerMenuProps).hostId\n : undefined;\n const drawerMenuHostId = useId('drawerMenuHost', drawerMenuHostIdFromProp);\n\n const localTileNotInGrid = (layout === 'floatingLocalVideo' \|\| layout === 'speaker') && remoteParticipants.length > 0;\n\n const containerRef = useRef<HTMLDivElement>(null);\n const containerWidth = _useContainerWidth(containerRef);\n const containerHeight = _useContainerHeight(containerRef);\n const isNarrow = containerWidth ? isNarrowWidth(containerWidth) : false;\n\n const [pinnedParticipantsState, setPinnedParticipantsState] = React.useState<string[]>([]);\n const [selectedScalingModeState, setselectedScalingModeState] = React.useState<Record<string, VideoStreamOptions>>(\n {}\n );\n\n const onUpdateScalingMode = useCallback(\n (remoteUserId: string, scalingMode: ViewScalingMode) => {\n setselectedScalingModeState((current) => ({\n ...current,\n [remoteUserId]: {\n scalingMode,\n isMirrored: remoteVideoViewOptions?.isMirrored\n }\n }));\n },\n [remoteVideoViewOptions?.isMirrored]\n );\n useEffect(() => {\n props.pinnedParticipants?.forEach((pinParticipant) => {\n if (!props.remoteParticipants?.find((t) => t.userId === pinParticipant)) {\n // warning will be logged in the console when invalid participant id is passed in pinned participants\n console.warn('Invalid pinned participant UserId :' + pinParticipant);\n }\n });\n }, [props.pinnedParticipants, props.remoteParticipants]);\n // Use pinnedParticipants from props but if it is not defined use the maintained state of pinned participants\n const pinnedParticipants = props.pinnedParticipants ?? pinnedParticipantsState;\n\n const showLocalVideoTileLabel =\n !((localTileNotInGrid && isNarrow) \|\| localVideoTileSize === '9:16') \|\| layout === 'default';\n /\n Utility function for memoized rendering of LocalParticipant.\n /\n const localVideoTile = useMemo((): JSX.Element \| undefined => {\n if (localVideoTileSize === 'hidden') {\n return undefined;\n }\n if (onRenderLocalVideoTile) {\n return onRenderLocalVideoTile(localParticipant);\n }\n\n const isSpotlighted = !!localParticipant.spotlight;\n\n const localVideoTileStyles = concatStyleSets(\n localTileNotInGrid ? floatingLocalVideoTileStyle : {},\n {\n root: { borderRadius: theme.effects.roundedCorner4 }\n },\n styles?.localVideo\n );\n\n const initialsName = !localParticipant.displayName ? '' : localParticipant.displayName;\n\n const showDisplayNameTrampoline = (): string => {\n return layout === 'default' ? strings.localVideoLabel : isNarrow ? '' : strings.localVideoLabel;\n return isNarrow ? '' : strings.localVideoLabel;\n };\n\n return (\n <Stack\n styles={localVideoTileContainerStyles}\n key=\"local-video-tile-key\"\n tabIndex={0}\n aria-label={strings.localVideoMovementAriaLabel ?? strings.localVideoMovementLabel}\n role={'dialog'}\n >\n <_LocalVideoTile\n alwaysShowLabelBackground={videoTilesOptions?.alwaysShowLabelBackground}\n userId={localParticipant.userId}\n onCreateLocalStreamView={onCreateLocalStreamView}\n onDisposeLocalStreamView={onDisposeLocalStreamView}\n isAvailable={localParticipant?.videoStream?.isAvailable}\n isMuted={localParticipant.isMuted}\n renderElement={localParticipant?.videoStream?.renderElement}\n displayName={showDisplayNameTrampoline()}\n initialsName={initialsName}\n localVideoViewOptions={localVideoViewOptions}\n onRenderAvatar={onRenderAvatar}\n showLabel={showLocalVideoTileLabel}\n showMuteIndicator={showMuteIndicator}\n showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview}\n localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps}\n localVideoCameraSwitcherLabel={strings.localVideoCameraSwitcherLabel}\n localVideoSelectedDescription={strings.localVideoSelectedDescription}\n styles={localVideoTileStyles}\n raisedHand={localParticipant.raisedHand}\n reaction={localParticipant.reaction}\n spotlightedParticipantUserIds={spotlightedParticipants}\n isSpotlighted={isSpotlighted}\n onStartSpotlight={onStartLocalSpotlight}\n onStopSpotlight={onStopLocalSpotlight}\n maxParticipantsToSpotlight={maxParticipantsToSpotlight}\n menuKind={remoteVideoTileMenu ? (remoteVideoTileMenu.kind === 'drawer' ? 'drawer' : 'contextual') : undefined}\n drawerMenuHostId={drawerMenuHostId}\n strings={strings}\n reactionResources={reactionResources}\n />\n </Stack>\n );\n }, [\n isNarrow,\n localParticipant,\n localVideoCameraCycleButtonProps,\n localVideoViewOptions,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n onRenderAvatar,\n onRenderLocalVideoTile,\n localTileNotInGrid,\n showCameraSwitcherInLocalPreview,\n showMuteIndicator,\n styles?.localVideo,\n theme.effects.roundedCorner4,\n localVideoTileSize,\n layout,\n showLocalVideoTileLabel,\n spotlightedParticipants,\n onStartLocalSpotlight,\n onStopLocalSpotlight,\n maxParticipantsToSpotlight,\n remoteVideoTileMenu,\n strings,\n drawerMenuHostId,\n reactionResources,\n videoTilesOptions\n ]);\n\n const onPinParticipant = useCallback(\n (userId: string) => {\n if (pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES) {\n return;\n }\n if (!pinnedParticipantsState.includes(userId)) {\n setPinnedParticipantsState(pinnedParticipantsState.concat(userId));\n }\n onPinParticipantHandler?.(userId);\n },\n [pinnedParticipants.length, pinnedParticipantsState, setPinnedParticipantsState, onPinParticipantHandler]\n );\n const onUnpinParticipant = useCallback(\n (userId: string) => {\n setPinnedParticipantsState(pinnedParticipantsState.filter((p) => p !== userId));\n onUnpinParticipantHandler?.(userId);\n },\n [pinnedParticipantsState, setPinnedParticipantsState, onUnpinParticipantHandler]\n );\n\n const [announcementString, setAnnouncementString] = React.useState<string>('');\n /\n sets the announcement string for VideoGallery actions so that the screenreader will trigger\n /\n const toggleAnnouncerString = useCallback(\n (announcement: string) => {\n setAnnouncementString(announcement);\n /\n Clears the announcer string after VideoGallery action allowing it to be re-announced.\n /\n setTimeout(() => {\n setAnnouncementString('');\n }, 3000);\n },\n [setAnnouncementString]\n );\n\n const defaultOnRenderVideoTile = useCallback(\n (participant: VideoGalleryRemoteParticipant, isVideoParticipant?: boolean) => {\n const remoteVideoStream = participant.videoStream;\n const selectedScalingMode = remoteVideoStream ? selectedScalingModeState[participant.userId] : undefined;\n let isPinned = pinnedParticipants?.includes(participant.userId);\n const isSpotlighted = !!participant.spotlight;\n isPinned = isSpotlighted ? false : isPinned;\n\n const createViewOptions = (): VideoStreamOptions \| undefined => {\n if (selectedScalingMode) {\n return selectedScalingMode;\n }\n return remoteVideoStream?.streamSize &&\n remoteVideoStream.streamSize?.height > remoteVideoStream.streamSize?.width\n ? ({\n scalingMode: 'Fit',\n isMirrored: remoteVideoViewOptions?.isMirrored\n } as VideoStreamOptions)\n : remoteVideoViewOptions;\n };\n\n return (\n <_RemoteVideoTile\n alwaysShowLabelBackground={videoTilesOptions?.alwaysShowLabelBackground}\n streamId={remoteVideoStream?.id}\n key={participant.userId}\n userId={participant.userId}\n remoteParticipant={participant}\n onCreateRemoteStreamView={isVideoParticipant ? onCreateRemoteStreamView : undefined}\n onDisposeRemoteStreamView={isVideoParticipant ? onDisposeRemoteVideoStreamView : undefined}\n isAvailable={isVideoParticipant ? remoteVideoStream?.isAvailable : false}\n isReceiving={isVideoParticipant ? remoteVideoStream?.isReceiving : false}\n renderElement={isVideoParticipant ? remoteVideoStream?.renderElement : undefined}\n remoteVideoViewOptions={createViewOptions()}\n onRenderAvatar={onRenderAvatar}\n showMuteIndicator={showMuteIndicator}\n strings={strings}\n / @conditional-compile-remove(PSTN-calls) /\n participantState={participant.state}\n menuKind={\n participant.userId === localParticipant.userId\n ? undefined\n : remoteVideoTileMenu\n ? remoteVideoTileMenu.kind === 'drawer'\n ? 'drawer'\n : 'contextual'\n : undefined\n }\n drawerMenuHostId={drawerMenuHostId}\n onPinParticipant={onPinParticipant}\n onUnpinParticipant={onUnpinParticipant}\n onUpdateScalingMode={onUpdateScalingMode}\n isPinned={isPinned}\n disablePinMenuItem={pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES}\n toggleAnnouncerString={toggleAnnouncerString}\n spotlightedParticipantUserIds={spotlightedParticipants}\n isSpotlighted={isSpotlighted}\n onStartSpotlight={onStartRemoteSpotlight}\n onStopSpotlight={onStopRemoteSpotlight}\n maxParticipantsToSpotlight={maxParticipantsToSpotlight}\n reactionResources={reactionResources}\n / @conditional-compile-remove(soft-mute) /\n onMuteParticipant={onMuteParticipant}\n />\n );\n },\n [\n onCreateRemoteStreamView,\n onDisposeRemoteVideoStreamView,\n remoteVideoViewOptions,\n localParticipant,\n onRenderAvatar,\n showMuteIndicator,\n strings,\n drawerMenuHostId,\n remoteVideoTileMenu,\n selectedScalingModeState,\n pinnedParticipants,\n onPinParticipant,\n onUnpinParticipant,\n toggleAnnouncerString,\n onUpdateScalingMode,\n spotlightedParticipants,\n onStartRemoteSpotlight,\n onStopRemoteSpotlight,\n maxParticipantsToSpotlight,\n / @conditional-compile-remove(soft-mute) / onMuteParticipant,\n reactionResources,\n videoTilesOptions\n ]\n );\n\n const screenShareParticipant = remoteParticipants.find((participant) => participant.screenShareStream?.isAvailable);\n\n const localScreenShareStreamComponent = <LocalScreenShare localParticipant={localParticipant} />;\n\n const remoteScreenShareComponent = screenShareParticipant && (\n <RemoteScreenShare\n {...screenShareParticipant}\n renderElement={screenShareParticipant.screenShareStream?.renderElement}\n onCreateRemoteStreamView={onCreateRemoteStreamView}\n onDisposeRemoteStreamView={onDisposeRemoteScreenShareStreamView}\n isReceiving={screenShareParticipant.screenShareStream?.isReceiving}\n participantVideoScalingMode={selectedScalingModeState[screenShareParticipant.userId]}\n localParticipant={localParticipant}\n remoteParticipants={remoteParticipants}\n reactionResources={reactionResources}\n isPPTLive={!screenShareParticipant.screenShareStream?.id}\n />\n );\n\n const screenShareComponent = remoteScreenShareComponent\n ? remoteScreenShareComponent\n : localParticipant.isScreenSharingOn\n ? localScreenShareStreamComponent\n : undefined;\n\n const layoutProps = useMemo<LayoutProps>(\n () => ({\n remoteParticipants,\n localParticipant,\n screenShareComponent,\n showCameraSwitcherInLocalPreview,\n maxRemoteVideoStreams,\n dominantSpeakers,\n styles,\n onRenderRemoteParticipant: onRenderRemoteVideoTile ?? defaultOnRenderVideoTile,\n localVideoComponent: localVideoTile,\n parentWidth: containerWidth,\n parentHeight: containerHeight,\n pinnedParticipantUserIds: pinnedParticipants,\n overflowGalleryPosition,\n localVideoTileSize,\n spotlightedParticipantUserIds: spotlightedParticipants\n }),\n [\n remoteParticipants,\n localParticipant,\n screenShareComponent,\n showCameraSwitcherInLocalPreview,\n maxRemoteVideoStreams,\n dominantSpeakers,\n styles,\n localVideoTile,\n containerWidth,\n containerHeight,\n onRenderRemoteVideoTile,\n defaultOnRenderVideoTile,\n pinnedParticipants,\n overflowGalleryPosition,\n localVideoTileSize,\n spotlightedParticipants\n ]\n );\n\n const videoGalleryLayout = useMemo(() => {\n if (screenShareParticipant && layout === 'focusedContent') {\n return <FocusedContentLayout {...layoutProps} />;\n }\n if (layout === 'floatingLocalVideo') {\n return <FloatingLocalVideoLayout {...layoutProps} />;\n }\n\n if (layout === 'speaker') {\n return <SpeakerVideoLayout {...layoutProps} />;\n }\n / @conditional-compile-remove(large-gallery) */\n if (layout === 'largeGallery') {\n return <LargeGalleryLayout {...layoutProps} />;\n }\n return <DefaultLayout {...layoutProps} />;\n }, [layout, layoutProps, screenShareParticipant]);\n\n return (\n <div\n // We don't assign an drawer menu host id to the VideoGallery when a drawerMenuHostId is assigned from props\n id={drawerMenuHostIdFromProp ? undefined : drawerMenuHostId}\n data-ui-id={ids.videoGallery}\n ref={containerRef}\n className={mergeStyles(videoGalleryOuterDivStyle, styles?.root, unselectable)}\n >\n {videoGalleryLayout}\n <Announcer announcementString={announcementString} ariaLive=\"polite\" />\n </div>\n );\n};\n"]}
1	+ {"version":3,"file":"VideoGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VideoGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, IStyle, mergeStyles, Stack } from '@fluentui/react';\nimport React, { useCallback, useMemo, useRef } from 'react';\nimport { GridLayoutStyles } from '.';\nimport { Announcer } from './Announcer';\nimport { useEffect } from 'react';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport {\n BaseCustomStyles,\n OnRenderAvatarCallback,\n VideoGalleryLocalParticipant,\n VideoGalleryRemoteParticipant,\n VideoStreamOptions,\n CreateVideoStreamViewResult\n} from '../types';\nimport { ViewScalingMode } from '../types';\nimport { HorizontalGalleryStyles } from './HorizontalGallery';\nimport { _RemoteVideoTile } from './RemoteVideoTile';\nimport { isNarrowWidth, _useContainerHeight, _useContainerWidth } from './utils/responsive';\nimport { LocalScreenShare } from './VideoGallery/LocalScreenShare';\nimport { RemoteScreenShare } from './VideoGallery/RemoteScreenShare';\nimport { LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nimport { _ICoordinates, _ModalClone } from './ModalClone/ModalClone';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { _LocalVideoTile } from './LocalVideoTile';\nimport { DefaultLayout } from './VideoGallery/DefaultLayout';\nimport { FloatingLocalVideoLayout } from './VideoGallery/FloatingLocalVideoLayout';\nimport { useIdentifiers } from '../identifiers';\nimport { localVideoTileContainerStyles, videoGalleryOuterDivStyle } from './styles/VideoGallery.styles';\nimport { floatingLocalVideoTileStyle } from './VideoGallery/styles/FloatingLocalVideo.styles';\nimport { useId } from '@fluentui/react-hooks';\nimport { VerticalGalleryStyles } from './VerticalGallery';\nimport { SpeakerVideoLayout } from './VideoGallery/SpeakerVideoLayout';\nimport { FocusedContentLayout } from './VideoGallery/FocusContentLayout';\n/* @conditional-compile-remove(large-gallery) /\nimport { LargeGalleryLayout } from './VideoGallery/LargeGalleryLayout';\nimport { LayoutProps } from './VideoGallery/Layout';\nimport { ReactionResources } from '../types/ReactionTypes';\n\n/\n @private\n * Currently the Calling JS SDK supports up to 4 remote video streams\n /\nexport const DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;\n\n/\n @private\n * Styles to disable the selectivity of a text in video gallery\n /\nexport const unselectable = {\n '-webkit-user-select': 'none',\n '-webkit-touch-callout': 'none',\n '-moz-user-select': 'none',\n '-ms-user-select': 'none',\n 'user-select': 'none'\n};\n/\n @private\n * Set aside only 6 dominant speakers for remaining audio participants\n /\nexport const MAX_AUDIO_DOMINANT_SPEAKERS = 6;\n/\n @private\n * Default remote video tile menu options\n /\nexport const DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS = {\n kind: 'contextual'\n};\n\n/\n @private\n * Maximum number of remote video tiles that can be pinned\n /\nexport const MAX_PINNED_REMOTE_VIDEO_TILES = 4;\n\n/\n All strings that may be shown on the UI in the {@link VideoGallery}.\n \n @public\n /\nexport interface VideoGalleryStrings {\n /* String to notify that local user is sharing their screen /\n screenIsBeingSharedMessage: string;\n /* String to show when remote screen share stream is loading /\n screenShareLoadingMessage: string;\n /* String for local video label. Default is \"You\" /\n localVideoLabel: string;\n /* String for local video camera switcher /\n localVideoCameraSwitcherLabel: string;\n /* String for announcing the local video tile can be moved by keyboard controls /\n localVideoMovementLabel: string;\n /* Aria-label for announcing the local video tile can be moved by keyboard controls /\n localVideoMovementAriaLabel: string;\n /* String for announcing the selected camera /\n localVideoSelectedDescription: string;\n /* placeholder text for participants who does not have a display name/\n displayNamePlaceholder: string;\n /* Menu text shown in Video Tile contextual menu for setting a remote participants video to fit in frame /\n fitRemoteParticipantToFrame: string;\n /* Menu text shown in Video Tile contextual menu for setting a remote participants video to fill the frame /\n fillRemoteParticipantFrame: string;\n /* Menu text shown in Video Tile contextual menu for pinning a remote participant's video tile /\n pinParticipantForMe: string;\n /* Menu text shown in Video Tile contextual menu for unpinning a remote participant's video tile /\n unpinParticipantForMe: string;\n /* Aria label for pin participant menu item of remote participant's video tile /\n pinParticipantMenuItemAriaLabel: string;\n /* Aria label for unpin participant menu item of remote participant's video tile /\n unpinParticipantMenuItemAriaLabel: string;\n /* Aria label to announce when remote participant's video tile is pinned /\n pinnedParticipantAnnouncementAriaLabel: string;\n /* Aria label to announce when remote participant's video tile is unpinned /\n unpinnedParticipantAnnouncementAriaLabel: string;\n /* Menu text shown in Video Tile contextual menu to start spotlight on participant's video tile /\n startSpotlightVideoTileMenuLabel: string;\n /* Menu text shown in Video Tile contextual menu to add spotlight to participant's video tile /\n addSpotlightVideoTileMenuLabel: string;\n /* Menu title for start spotlight menu item when spotlight limit is reached /\n spotlightLimitReachedMenuTitle: string;\n /* Menu text shown in Video Tile contextual menu to stop spotlight on participant's video tile /\n stopSpotlightVideoTileMenuLabel: string;\n /* Menu text shown in Video Tile contextual menu to stop spotlight on local user's video tile /\n stopSpotlightOnSelfVideoTileMenuLabel: string;\n / @conditional-compile-remove(hide-attendee-name) /\n /* String for the attendee role /\n attendeeRole: string;\n / @conditional-compile-remove(soft-mute) /\n /* Menu text shown in Video Tile contextual menu to mute a remote participant /\n muteParticipantMenuItemLabel: string;\n}\n\n/\n @public\n /\nexport type VideoGalleryLayout =\n \| 'default'\n \| 'floatingLocalVideo'\n \| 'speaker'\n \| / @conditional-compile-remove(large-gallery) / 'largeGallery'\n \| 'focusedContent';\n\n/\n {@link VideoGallery} Component Styles.\n * @public\n /\nexport interface VideoGalleryStyles extends BaseCustomStyles {\n /* Styles for the grid layout /\n gridLayout?: GridLayoutStyles;\n /* Styles for the horizontal gallery /\n horizontalGallery?: HorizontalGalleryStyles;\n /* Styles for the local video /\n localVideo?: IStyle;\n /* Styles for the vertical gallery /\n verticalGallery?: VerticalGalleryStyles;\n}\n\n/\n Different modes and positions of the overflow gallery in the VideoGallery\n \n @public\n /\nexport type OverflowGalleryPosition = 'horizontalBottom' \| 'verticalRight' \| 'horizontalTop';\n\n/\n different modes of the local video tile\n \n @public\n /\nexport type LocalVideoTileSize = '9:16' \| '16:9' \| 'hidden' \| 'followDeviceOrientation';\n\n/\n Props for {@link VideoGallery}.\n \n @public\n /\nexport interface VideoGalleryProps {\n /\n Allows users to pass an object containing custom CSS styles for the gallery container.\n \n @Example\n * ```\n * <VideoGallery styles={{ root: { border: 'solid 1px red' } }} />\n * ```\n /\n styles?: VideoGalleryStyles;\n /* Layout of the video tiles. /\n layout?: VideoGalleryLayout;\n /* Local video particpant /\n localParticipant: VideoGalleryLocalParticipant;\n /* List of remote video particpants /\n remoteParticipants?: VideoGalleryRemoteParticipant[];\n /* List of dominant speaker userIds in the order of their dominance. 0th index is the most dominant. /\n dominantSpeakers?: string[];\n /* Local video view options /\n localVideoViewOptions?: VideoStreamOptions;\n /* Remote videos view options /\n remoteVideoViewOptions?: VideoStreamOptions;\n /* Callback to create the local video stream view /\n onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void \| CreateVideoStreamViewResult>;\n /* Callback to dispose of the local video stream view /\n onDisposeLocalStreamView?: () => void;\n /* Callback to render the local video tile/\n onRenderLocalVideoTile?: (localParticipant: VideoGalleryLocalParticipant) => JSX.Element;\n /* Callback to create a remote video stream view /\n onCreateRemoteStreamView?: (\n userId: string,\n options?: VideoStreamOptions\n ) => Promise<void \| CreateVideoStreamViewResult>;\n /* Callback to render a remote video tile /\n onRenderRemoteVideoTile?: (remoteParticipant: VideoGalleryRemoteParticipant) => JSX.Element;\n /\n @deprecated use {@link onDisposeRemoteVideoStreamView} and {@link onDisposeRemoteScreenShareStreamView} instead\n \n Callback to dispose a remote video stream view\n /\n onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n /* Callback to dispose a remote video stream view /\n onDisposeRemoteVideoStreamView?: (userId: string) => Promise<void>;\n /* Callback to dispose a remote screen share stream view /\n onDisposeRemoteScreenShareStreamView?: (userId: string) => Promise<void>;\n /* Callback to render a particpant avatar /\n onRenderAvatar?: OnRenderAvatarCallback;\n /\n Whether to display the local video camera switcher button\n /\n showCameraSwitcherInLocalPreview?: boolean;\n /\n Whether to display a mute icon beside the user's display name.\n * @defaultValue `true`\n /\n showMuteIndicator?: boolean;\n /* Optional strings to override in component /\n strings?: Partial<VideoGalleryStrings>;\n /\n Maximum number of participant remote video streams that is rendered.\n * @defaultValue 4\n /\n maxRemoteVideoStreams?: number;\n /\n Camera control information for button to switch cameras.\n /\n localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n /\n List of pinned participant userIds.\n /\n pinnedParticipants?: string[];\n /\n This callback will be called when a participant video tile is pinned.\n /\n onPinParticipant?: (userId: string) => void;\n /\n This callback will be called when a participant video tile is un-pinned.\n /\n onUnpinParticipant?: (userId: string) => void;\n /\n List of spotlighted participant userIds.\n /\n spotlightedParticipants?: string[];\n /\n This callback is to start spotlight for local participant video tile.\n /\n onStartLocalSpotlight?: () => Promise<void>;\n /\n This callback is to stop spotlight for local participant video tile.\n /\n onStartRemoteSpotlight?: (userIds: string[]) => Promise<void>;\n /\n This callback is to start spotlight for remote participant video tiles.\n /\n onStopLocalSpotlight?: () => Promise<void>;\n /\n This callback is to stop spotlight for remote participant video tiles.\n /\n onStopRemoteSpotlight?: (userIds: string[]) => Promise<void>;\n /\n Maximum participants that can be spotlighted\n /\n maxParticipantsToSpotlight?: number;\n /\n Options for showing the remote video tile menu.\n \n @defaultValue \\{ kind: 'contextual' \\}\n /\n remoteVideoTileMenu?: false \| VideoTileContextualMenuProps \| VideoTileDrawerMenuProps;\n /\n Determines the layout of the overflowGallery inside the VideoGallery.\n * @defaultValue 'horizontalBottom'\n /\n overflowGalleryPosition?: OverflowGalleryPosition;\n /\n Determines the aspect ratio of local video tile in the video gallery.\n * @remarks 'followDeviceOrientation' will be responsive to the screen orientation and will change between 9:16 (portrait) and\n * 16:9 (landscape) aspect ratios.\n * @defaultValue 'followDeviceOrientation'\n /\n localVideoTileSize?: LocalVideoTileSize;\n /\n Reaction resources for like, heart, laugh, applause and surprised.\n /\n reactionResources?: ReactionResources;\n /\n Additional Options for Video Tiles\n /\n videoTilesOptions?: VideoTilesOptions;\n / @conditional-compile-remove(soft-mute) /\n /\n This callback is to mute a remote participant\n /\n onMuteParticipant?: (userId: string) => Promise<void>;\n}\n\n/\n Options that apply to all Video Tiles in the {@link VideoGallery}\n \n @public\n /\nexport interface VideoTilesOptions {\n /\n Whether to always show the label background for the video tile\n /\n alwaysShowLabelBackground?: boolean;\n}\n\n/\n Properties for showing contextual menu for remote {@link VideoTile} components in {@link VideoGallery}.\n \n @public\n /\nexport interface VideoTileContextualMenuProps {\n /\n The menu property kind\n /\n kind: 'contextual';\n}\n\n/\n Properties for showing drawer menu on remote {@link VideoTile} long touch in {@link VideoGallery}.\n \n @public\n /\nexport interface VideoTileDrawerMenuProps {\n /\n The menu property kind\n /\n kind: 'drawer';\n /\n The optional id property provided on an element that the drawer menu should render within when a\n * remote participant video tile Drawer is shown. If an id is not provided, then a drawer menu will\n * render within the VideoGallery component.\n /\n hostId?: string;\n}\n/\n VideoGallery represents a layout of video tiles for a specific call.\n * It displays a {@link VideoTile} for the local user as well as for each remote participant who has joined the call.\n \n @public\n /\nexport const VideoGallery = (props: VideoGalleryProps): JSX.Element => {\n const {\n localParticipant,\n remoteParticipants = [],\n localVideoViewOptions,\n remoteVideoViewOptions,\n dominantSpeakers,\n onRenderLocalVideoTile,\n onRenderRemoteVideoTile,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n onCreateRemoteStreamView,\n onDisposeRemoteScreenShareStreamView,\n onDisposeRemoteVideoStreamView,\n styles,\n layout,\n onRenderAvatar,\n showMuteIndicator,\n maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS,\n showCameraSwitcherInLocalPreview,\n localVideoCameraCycleButtonProps,\n onPinParticipant: onPinParticipantHandler,\n onUnpinParticipant: onUnpinParticipantHandler,\n remoteVideoTileMenu = DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS,\n overflowGalleryPosition = 'horizontalBottom',\n localVideoTileSize = 'followDeviceOrientation',\n spotlightedParticipants,\n onStartLocalSpotlight,\n onStartRemoteSpotlight,\n onStopLocalSpotlight,\n onStopRemoteSpotlight,\n maxParticipantsToSpotlight,\n reactionResources,\n videoTilesOptions,\n / @conditional-compile-remove(soft-mute) /\n onMuteParticipant\n } = props;\n\n const ids = useIdentifiers();\n const theme = useTheme();\n const localeStrings = useLocale().strings.videoGallery;\n const strings = useMemo(() => ({ ...localeStrings, ...props.strings }), [localeStrings, props.strings]);\n\n const drawerMenuHostIdFromProp =\n remoteVideoTileMenu && remoteVideoTileMenu.kind === 'drawer'\n ? (remoteVideoTileMenu as VideoTileDrawerMenuProps).hostId\n : undefined;\n const drawerMenuHostId = useId('drawerMenuHost', drawerMenuHostIdFromProp);\n\n const localTileNotInGrid = (layout === 'floatingLocalVideo' \|\| layout === 'speaker') && remoteParticipants.length > 0;\n\n const containerRef = useRef<HTMLDivElement>(null);\n const containerWidth = _useContainerWidth(containerRef);\n const containerHeight = _useContainerHeight(containerRef);\n const isNarrow = containerWidth ? isNarrowWidth(containerWidth) : false;\n\n const [pinnedParticipantsState, setPinnedParticipantsState] = React.useState<string[]>([]);\n const [selectedScalingModeState, setselectedScalingModeState] = React.useState<Record<string, VideoStreamOptions>>(\n {}\n );\n\n const onUpdateScalingMode = useCallback(\n (remoteUserId: string, scalingMode: ViewScalingMode) => {\n setselectedScalingModeState((current) => ({\n ...current,\n [remoteUserId]: {\n scalingMode,\n isMirrored: remoteVideoViewOptions?.isMirrored\n }\n }));\n },\n [remoteVideoViewOptions?.isMirrored]\n );\n useEffect(() => {\n props.pinnedParticipants?.forEach((pinParticipant) => {\n if (!props.remoteParticipants?.find((t) => t.userId === pinParticipant)) {\n // warning will be logged in the console when invalid participant id is passed in pinned participants\n console.warn('Invalid pinned participant UserId :' + pinParticipant);\n }\n });\n }, [props.pinnedParticipants, props.remoteParticipants]);\n // Use pinnedParticipants from props but if it is not defined use the maintained state of pinned participants\n const pinnedParticipants = props.pinnedParticipants ?? pinnedParticipantsState;\n\n const showLocalVideoTileLabel =\n !((localTileNotInGrid && isNarrow) \|\| localVideoTileSize === '9:16') \|\| layout === 'default';\n /\n Utility function for memoized rendering of LocalParticipant.\n /\n const localVideoTile = useMemo((): JSX.Element \| undefined => {\n if (localVideoTileSize === 'hidden') {\n return undefined;\n }\n if (onRenderLocalVideoTile) {\n return onRenderLocalVideoTile(localParticipant);\n }\n\n const isSpotlighted = !!localParticipant.spotlight;\n\n const localVideoTileStyles = concatStyleSets(\n localTileNotInGrid ? floatingLocalVideoTileStyle : {},\n {\n root: { borderRadius: theme.effects.roundedCorner4 }\n },\n styles?.localVideo\n );\n\n const initialsName = !localParticipant.displayName ? '' : localParticipant.displayName;\n\n const showDisplayNameTrampoline = (): string => {\n return layout === 'default' ? strings.localVideoLabel : isNarrow ? '' : strings.localVideoLabel;\n return isNarrow ? '' : strings.localVideoLabel;\n };\n\n return (\n <Stack\n styles={localVideoTileContainerStyles}\n key=\"local-video-tile-key\"\n tabIndex={0}\n aria-label={strings.localVideoMovementAriaLabel ?? strings.localVideoMovementLabel}\n role={'dialog'}\n >\n <_LocalVideoTile\n alwaysShowLabelBackground={videoTilesOptions?.alwaysShowLabelBackground}\n userId={localParticipant.userId}\n onCreateLocalStreamView={onCreateLocalStreamView}\n onDisposeLocalStreamView={onDisposeLocalStreamView}\n isAvailable={localParticipant?.videoStream?.isAvailable}\n isMuted={localParticipant.isMuted}\n renderElement={localParticipant?.videoStream?.renderElement}\n displayName={showDisplayNameTrampoline()}\n initialsName={initialsName}\n localVideoViewOptions={localVideoViewOptions}\n onRenderAvatar={onRenderAvatar}\n showLabel={showLocalVideoTileLabel}\n showMuteIndicator={showMuteIndicator}\n showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview}\n localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps}\n localVideoCameraSwitcherLabel={strings.localVideoCameraSwitcherLabel}\n localVideoSelectedDescription={strings.localVideoSelectedDescription}\n styles={localVideoTileStyles}\n raisedHand={localParticipant.raisedHand}\n reaction={localParticipant.reaction}\n spotlightedParticipantUserIds={spotlightedParticipants}\n isSpotlighted={isSpotlighted}\n onStartSpotlight={onStartLocalSpotlight}\n onStopSpotlight={onStopLocalSpotlight}\n maxParticipantsToSpotlight={maxParticipantsToSpotlight}\n menuKind={remoteVideoTileMenu ? (remoteVideoTileMenu.kind === 'drawer' ? 'drawer' : 'contextual') : undefined}\n drawerMenuHostId={drawerMenuHostId}\n strings={strings}\n reactionResources={reactionResources}\n />\n </Stack>\n );\n }, [\n isNarrow,\n localParticipant,\n localVideoCameraCycleButtonProps,\n localVideoViewOptions,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n onRenderAvatar,\n onRenderLocalVideoTile,\n localTileNotInGrid,\n showCameraSwitcherInLocalPreview,\n showMuteIndicator,\n styles?.localVideo,\n theme.effects.roundedCorner4,\n localVideoTileSize,\n layout,\n showLocalVideoTileLabel,\n spotlightedParticipants,\n onStartLocalSpotlight,\n onStopLocalSpotlight,\n maxParticipantsToSpotlight,\n remoteVideoTileMenu,\n strings,\n drawerMenuHostId,\n reactionResources,\n videoTilesOptions\n ]);\n\n const onPinParticipant = useCallback(\n (userId: string) => {\n if (pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES) {\n return;\n }\n if (!pinnedParticipantsState.includes(userId)) {\n setPinnedParticipantsState(pinnedParticipantsState.concat(userId));\n }\n onPinParticipantHandler?.(userId);\n },\n [pinnedParticipants.length, pinnedParticipantsState, setPinnedParticipantsState, onPinParticipantHandler]\n );\n const onUnpinParticipant = useCallback(\n (userId: string) => {\n setPinnedParticipantsState(pinnedParticipantsState.filter((p) => p !== userId));\n onUnpinParticipantHandler?.(userId);\n },\n [pinnedParticipantsState, setPinnedParticipantsState, onUnpinParticipantHandler]\n );\n\n const [announcementString, setAnnouncementString] = React.useState<string>('');\n /\n sets the announcement string for VideoGallery actions so that the screenreader will trigger\n /\n const toggleAnnouncerString = useCallback(\n (announcement: string) => {\n setAnnouncementString(announcement);\n /\n Clears the announcer string after VideoGallery action allowing it to be re-announced.\n /\n setTimeout(() => {\n setAnnouncementString('');\n }, 3000);\n },\n [setAnnouncementString]\n );\n\n const defaultOnRenderVideoTile = useCallback(\n (participant: VideoGalleryRemoteParticipant, isVideoParticipant?: boolean) => {\n const remoteVideoStream = participant.videoStream;\n const selectedScalingMode = remoteVideoStream ? selectedScalingModeState[participant.userId] : undefined;\n let isPinned = pinnedParticipants?.includes(participant.userId);\n const isSpotlighted = !!participant.spotlight;\n isPinned = isSpotlighted ? false : isPinned;\n\n const createViewOptions = (): VideoStreamOptions \| undefined => {\n if (selectedScalingMode) {\n return selectedScalingMode;\n }\n return remoteVideoStream?.streamSize &&\n remoteVideoStream.streamSize?.height > remoteVideoStream.streamSize?.width\n ? ({\n scalingMode: 'Fit',\n isMirrored: remoteVideoViewOptions?.isMirrored\n } as VideoStreamOptions)\n : remoteVideoViewOptions;\n };\n\n return (\n <_RemoteVideoTile\n alwaysShowLabelBackground={videoTilesOptions?.alwaysShowLabelBackground}\n streamId={remoteVideoStream?.id}\n key={participant.userId}\n userId={participant.userId}\n remoteParticipant={participant}\n onCreateRemoteStreamView={isVideoParticipant ? onCreateRemoteStreamView : undefined}\n onDisposeRemoteStreamView={isVideoParticipant ? onDisposeRemoteVideoStreamView : undefined}\n isAvailable={isVideoParticipant ? remoteVideoStream?.isAvailable : false}\n isReceiving={isVideoParticipant ? remoteVideoStream?.isReceiving : false}\n renderElement={isVideoParticipant ? remoteVideoStream?.renderElement : undefined}\n remoteVideoViewOptions={createViewOptions()}\n onRenderAvatar={onRenderAvatar}\n showMuteIndicator={showMuteIndicator}\n strings={strings}\n / @conditional-compile-remove(PSTN-calls) /\n participantState={participant.state}\n menuKind={\n participant.userId === localParticipant.userId\n ? undefined\n : remoteVideoTileMenu\n ? remoteVideoTileMenu.kind === 'drawer'\n ? 'drawer'\n : 'contextual'\n : undefined\n }\n drawerMenuHostId={drawerMenuHostId}\n onPinParticipant={onPinParticipant}\n onUnpinParticipant={onUnpinParticipant}\n onUpdateScalingMode={onUpdateScalingMode}\n isPinned={isPinned}\n disablePinMenuItem={pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES}\n toggleAnnouncerString={toggleAnnouncerString}\n spotlightedParticipantUserIds={spotlightedParticipants}\n isSpotlighted={isSpotlighted}\n onStartSpotlight={onStartRemoteSpotlight}\n onStopSpotlight={onStopRemoteSpotlight}\n maxParticipantsToSpotlight={maxParticipantsToSpotlight}\n reactionResources={reactionResources}\n / @conditional-compile-remove(soft-mute) /\n onMuteParticipant={onMuteParticipant}\n />\n );\n },\n [\n onCreateRemoteStreamView,\n onDisposeRemoteVideoStreamView,\n remoteVideoViewOptions,\n localParticipant,\n onRenderAvatar,\n showMuteIndicator,\n strings,\n drawerMenuHostId,\n remoteVideoTileMenu,\n selectedScalingModeState,\n pinnedParticipants,\n onPinParticipant,\n onUnpinParticipant,\n toggleAnnouncerString,\n onUpdateScalingMode,\n spotlightedParticipants,\n onStartRemoteSpotlight,\n onStopRemoteSpotlight,\n maxParticipantsToSpotlight,\n / @conditional-compile-remove(soft-mute) / onMuteParticipant,\n reactionResources,\n videoTilesOptions\n ]\n );\n\n const screenShareParticipant = remoteParticipants.find((participant) => participant.screenShareStream?.isAvailable);\n\n const localScreenShareStreamComponent = <LocalScreenShare localParticipant={localParticipant} />;\n\n const remoteScreenShareComponent = screenShareParticipant && (\n <RemoteScreenShare\n {...screenShareParticipant}\n renderElement={screenShareParticipant.screenShareStream?.renderElement}\n onCreateRemoteStreamView={onCreateRemoteStreamView}\n onDisposeRemoteStreamView={onDisposeRemoteScreenShareStreamView}\n isReceiving={screenShareParticipant.screenShareStream?.isReceiving}\n participantVideoScalingMode={selectedScalingModeState[screenShareParticipant.userId]}\n localParticipant={localParticipant}\n remoteParticipants={remoteParticipants}\n reactionResources={reactionResources}\n isPPTLive={!screenShareParticipant.screenShareStream?.id}\n />\n );\n\n const screenShareComponent = remoteScreenShareComponent\n ? remoteScreenShareComponent\n : localParticipant.isScreenSharingOn\n ? localScreenShareStreamComponent\n : undefined;\n\n const layoutProps = useMemo<LayoutProps>(\n () => ({\n remoteParticipants,\n localParticipant,\n screenShareComponent,\n showCameraSwitcherInLocalPreview,\n maxRemoteVideoStreams,\n dominantSpeakers,\n styles,\n onRenderRemoteParticipant: onRenderRemoteVideoTile ?? defaultOnRenderVideoTile,\n localVideoComponent: localVideoTile,\n parentWidth: containerWidth,\n parentHeight: containerHeight,\n pinnedParticipantUserIds: pinnedParticipants,\n overflowGalleryPosition,\n localVideoTileSize,\n spotlightedParticipantUserIds: spotlightedParticipants\n }),\n [\n remoteParticipants,\n localParticipant,\n screenShareComponent,\n showCameraSwitcherInLocalPreview,\n maxRemoteVideoStreams,\n dominantSpeakers,\n styles,\n localVideoTile,\n containerWidth,\n containerHeight,\n onRenderRemoteVideoTile,\n defaultOnRenderVideoTile,\n pinnedParticipants,\n overflowGalleryPosition,\n localVideoTileSize,\n spotlightedParticipants\n ]\n );\n\n const videoGalleryLayout = useMemo(() => {\n if (screenShareParticipant && layout === 'focusedContent') {\n return <FocusedContentLayout {...layoutProps} />;\n }\n if (layout === 'floatingLocalVideo') {\n return <FloatingLocalVideoLayout {...layoutProps} />;\n }\n\n if (layout === 'speaker') {\n return <SpeakerVideoLayout {...layoutProps} />;\n }\n / @conditional-compile-remove(large-gallery) */\n if (layout === 'largeGallery') {\n return <LargeGalleryLayout {...layoutProps} />;\n }\n return <DefaultLayout {...layoutProps} />;\n }, [layout, layoutProps, screenShareParticipant]);\n\n return (\n <div\n // We don't assign an drawer menu host id to the VideoGallery when a drawerMenuHostId is assigned from props\n id={drawerMenuHostIdFromProp ? undefined : drawerMenuHostId}\n data-ui-id={ids.videoGallery}\n ref={containerRef}\n className={mergeStyles(videoGalleryOuterDivStyle, styles?.root, unselectable)}\n >\n {videoGalleryLayout}\n <Announcer announcementString={announcementString} ariaLive=\"polite\" />\n </div>\n );\n};\n"]}

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

@@ -9,7 +9,7 @@ export declare const _ATTACHMENT_CARD_MARGIN_IN_PX = 2;
 /**
  * @private
  */
-export declare const useAttachmentCardStyles: () => Record<"content" | "root" | "title" | "dynamicWidth" | "staticWidth" | "fileIcon", string>;
+export declare const useAttachmentCardStyles: () => Record<"content" | "root" | "title" | "dynamicWidth" | "staticWidth" | "fileIcon" | "focusState" | "fileNameLabel", string>;
 /**
  * @private
  */

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

@@ -36,6 +36,16 @@ export const useAttachmentCardStyles = makeStyles({
     },
     title: {
         width: '100%'
+    },
+    focusState: {
+        '& > * button:focus': {
+            border: `black solid ${_pxToRem(1)}`
+        }
+    },
+    fileNameLabel: {
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        overflowX: 'clip'
     }
 });
 /**

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AttachmentCard.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/AttachmentCard.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,sCAAgC;AAEnD;;GAEG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,EAAE,CAAC;AAChD;;GAEG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,CAAC;AAE/C;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,UAAU,CAAC;IAChD,IAAI,EAAE;QACJ,qBAAqB,oBAChB,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CACzB;KACF;IACD,YAAY,EAAE;QACZ,QAAQ,EAAE,GAAG,6BAA6B,KAAK;KAChD;IACD,WAAW,EAAE;QACX,KAAK,EAAE,GAAG,6BAA6B,KAAK;KAC7C;IACD,QAAQ,EAAE;QACR,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;KACxB;IACD,OAAO,EAAE;QACP,OAAO,EAAE;YACP,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,QAAQ;YAClB,YAAY,EAAE,UAAU;SACzB;KACF;IACD,KAAK,EAAE;QACL,KAAK,EAAE,MAAM;KACd;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,gCAAgC,GAAG,WAAW,CAAC;IAC1D,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;IACtB,QAAQ,EAAE,QAAQ;IAClB,YAAY,EAAE,UAAU;IACxB,IAAI,EAAE;QACJ,UAAU,EAAE,QAAQ;KACrB;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,IAAI,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles } from '@fluentui/react';\nimport { makeStyles, shorthands } from '@fluentui/react-components';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/*\n @private\n /\nexport const _ATTACHMENT_CARD_WIDTH_IN_REM = 12;\n/\n @private\n /\nexport const _ATTACHMENT_CARD_MARGIN_IN_PX = 2;\n\n/\n @private\n /\nexport const useAttachmentCardStyles = makeStyles({\n root: {\n '& div[role=toolbar]': {\n ...shorthands.padding(0)\n }\n },\n dynamicWidth: {\n minWidth: `${_ATTACHMENT_CARD_WIDTH_IN_REM}rem`\n },\n staticWidth: {\n width: `${_ATTACHMENT_CARD_WIDTH_IN_REM}rem`\n },\n fileIcon: {\n marginLeft: _pxToRem(4)\n },\n content: {\n '> div': {\n width: '100%',\n overflow: 'hidden',\n textOverflow: 'ellipsis'\n }\n },\n title: {\n width: '100%'\n }\n});\n\n/\n @private\n /\nexport const attachmentNameContainerClassName = mergeStyles({\n marginTop: _pxToRem(5),\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n span: {\n whiteSpace: 'nowrap'\n }\n});\n\n/\n @private\n */\nexport const ATTACHMENT_CARD_MIN_PROGRESS = 0.05;\n"]}
1	+ {"version":3,"file":"AttachmentCard.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/AttachmentCard.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,sCAAgC;AAEnD;;GAEG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,EAAE,CAAC;AAChD;;GAEG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,CAAC;AAE/C;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,UAAU,CAAC;IAChD,IAAI,EAAE;QACJ,qBAAqB,oBAChB,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CACzB;KACF;IACD,YAAY,EAAE;QACZ,QAAQ,EAAE,GAAG,6BAA6B,KAAK;KAChD;IACD,WAAW,EAAE;QACX,KAAK,EAAE,GAAG,6BAA6B,KAAK;KAC7C;IACD,QAAQ,EAAE;QACR,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;KACxB;IACD,OAAO,EAAE;QACP,OAAO,EAAE;YACP,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,QAAQ;YAClB,YAAY,EAAE,UAAU;SACzB;KACF;IACD,KAAK,EAAE;QACL,KAAK,EAAE,MAAM;KACd;IACD,UAAU,EAAE;QACV,oBAAoB,EAAE;YACpB,MAAM,EAAE,eAAe,QAAQ,CAAC,CAAC,CAAC,EAAE;SACrC;KACF;IACD,aAAa,EAAE;QACb,YAAY,EAAE,UAAU;QACxB,UAAU,EAAE,QAAQ;QACpB,SAAS,EAAE,MAAM;KAClB;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,gCAAgC,GAAG,WAAW,CAAC;IAC1D,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;IACtB,QAAQ,EAAE,QAAQ;IAClB,YAAY,EAAE,UAAU;IACxB,IAAI,EAAE;QACJ,UAAU,EAAE,QAAQ;KACrB;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,IAAI,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles } from '@fluentui/react';\nimport { makeStyles, shorthands } from '@fluentui/react-components';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/*\n @private\n /\nexport const _ATTACHMENT_CARD_WIDTH_IN_REM = 12;\n/\n @private\n /\nexport const _ATTACHMENT_CARD_MARGIN_IN_PX = 2;\n\n/\n @private\n /\nexport const useAttachmentCardStyles = makeStyles({\n root: {\n '& div[role=toolbar]': {\n ...shorthands.padding(0)\n }\n },\n dynamicWidth: {\n minWidth: `${_ATTACHMENT_CARD_WIDTH_IN_REM}rem`\n },\n staticWidth: {\n width: `${_ATTACHMENT_CARD_WIDTH_IN_REM}rem`\n },\n fileIcon: {\n marginLeft: _pxToRem(4)\n },\n content: {\n '> div': {\n width: '100%',\n overflow: 'hidden',\n textOverflow: 'ellipsis'\n }\n },\n title: {\n width: '100%'\n },\n focusState: {\n '& > button:focus': {\n border: `black solid ${_pxToRem(1)}`\n }\n },\n fileNameLabel: {\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n overflowX: 'clip'\n }\n});\n\n/*\n @private\n /\nexport const attachmentNameContainerClassName = mergeStyles({\n marginTop: _pxToRem(5),\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n span: {\n whiteSpace: 'nowrap'\n }\n});\n\n/\n @private\n */\nexport const ATTACHMENT_CARD_MIN_PROGRESS = 0.05;\n"]}

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

@@ -14,4 +14,8 @@ export declare const attachmentCardGirdLayout: string;
  * @private
  */
 export declare const attachmentCardFlexLayout: string;
+/**
+ * @private
+ */
+export declare const attachmentGroupDisabled: string;
 //# sourceMappingURL=AttachmentCardGroup.styles.d.ts.map

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

@@ -46,4 +46,12 @@ export const attachmentCardFlexLayout = mergeStyles({
     display: 'flex',
     flexWrap: 'wrap'
 });
+/**
+ * @private
+ */
+export const attachmentGroupDisabled = mergeStyles({
+    opacity: '0.5',
+    userSelect: 'none',
+    pointerEvents: 'none'
+});
 //# sourceMappingURL=AttachmentCardGroup.styles.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AttachmentCardGroup.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/AttachmentCardGroup.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,6BAA6B,EAAE,6BAA6B,EAAE,MAAM,yBAAyB,CAAC;AACvG,OAAO,EAAE,QAAQ,EAAE,sCAAgC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,UAAU,CAAC;IACrD,IAAI,EAAE;QACJ,SAAS,EAAE,SAAS;KACrB;IACD,gBAAgB,EAAE;QAChB,KAAK,EAAE,GAAG,6BAA6B,KAAK;KAC7C;IACD,mBAAmB,EAAE;QACnB,KAAK,EAAE,MAAM;KACd;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,WAAW,CAAC;IAClD,OAAO,EAAE;QACP,MAAM,EAAE,GAAG,QAAQ,CAAC,6BAA6B,CAAC,EAAE;KACrD;IACD;;OAEG;IACH,yBAAyB,EAAE;QACzB,UAAU,EAAE,GAAG,QAAQ,CAAC,6BAA6B,CAAC,EAAE;KACzD;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,WAAW,CAAC;IAClD,OAAO,EAAE,MAAM;IACf,mBAAmB,EAAE,2BAA2B,6BAA6B,YAAY;CAC1F,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,WAAW,CAAC;IAClD,OAAO,EAAE,MAAM;IACf,QAAQ,EAAE,MAAM;CACjB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { makeStyles } from '@fluentui/react-components';\nimport { _ATTACHMENT_CARD_MARGIN_IN_PX, _ATTACHMENT_CARD_WIDTH_IN_REM } from './AttachmentCard.styles';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { mergeStyles } from '@fluentui/react';\n\n/*\n @private\n /\nexport const useAttachmentCardGroupStyles = makeStyles({\n root: {\n marginTop: '0.25rem'\n },\n singleAttachment: {\n width: `${_ATTACHMENT_CARD_WIDTH_IN_REM}rem`\n },\n multipleAttachments: {\n width: '100%'\n }\n});\n\n/\n @private\n /\nexport const attachmentCardBaseStyles = mergeStyles({\n '& > ': {\n margin: `${_pxToRem(_ATTACHMENT_CARD_MARGIN_IN_PX)}`\n },\n /*\n margin for children is overriden by parent stack, so adding left margin for each child\n /\n '& > :not(:first-child)': {\n marginLeft: `${_pxToRem(_ATTACHMENT_CARD_MARGIN_IN_PX)}`\n }\n});\n\n/*\n @private\n /\nexport const attachmentCardGirdLayout = mergeStyles({\n display: 'grid',\n gridTemplateColumns: `repeat(auto-fit, minmax(${_ATTACHMENT_CARD_WIDTH_IN_REM}rem, 1fr))`\n});\n\n/\n @private\n */\nexport const attachmentCardFlexLayout = mergeStyles({\n display: 'flex',\n flexWrap: 'wrap'\n});\n"]}
1	+ {"version":3,"file":"AttachmentCardGroup.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/AttachmentCardGroup.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,6BAA6B,EAAE,6BAA6B,EAAE,MAAM,yBAAyB,CAAC;AACvG,OAAO,EAAE,QAAQ,EAAE,sCAAgC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,UAAU,CAAC;IACrD,IAAI,EAAE;QACJ,SAAS,EAAE,SAAS;KACrB;IACD,gBAAgB,EAAE;QAChB,KAAK,EAAE,GAAG,6BAA6B,KAAK;KAC7C;IACD,mBAAmB,EAAE;QACnB,KAAK,EAAE,MAAM;KACd;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,WAAW,CAAC;IAClD,OAAO,EAAE;QACP,MAAM,EAAE,GAAG,QAAQ,CAAC,6BAA6B,CAAC,EAAE;KACrD;IACD;;OAEG;IACH,yBAAyB,EAAE;QACzB,UAAU,EAAE,GAAG,QAAQ,CAAC,6BAA6B,CAAC,EAAE;KACzD;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,WAAW,CAAC;IAClD,OAAO,EAAE,MAAM;IACf,mBAAmB,EAAE,2BAA2B,6BAA6B,YAAY;CAC1F,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,WAAW,CAAC;IAClD,OAAO,EAAE,MAAM;IACf,QAAQ,EAAE,MAAM;CACjB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,WAAW,CAAC;IACjD,OAAO,EAAE,KAAK;IACd,UAAU,EAAE,MAAM;IAClB,aAAa,EAAE,MAAM;CACtB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { makeStyles } from '@fluentui/react-components';\nimport { _ATTACHMENT_CARD_MARGIN_IN_PX, _ATTACHMENT_CARD_WIDTH_IN_REM } from './AttachmentCard.styles';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { mergeStyles } from '@fluentui/react';\n\n/*\n @private\n /\nexport const useAttachmentCardGroupStyles = makeStyles({\n root: {\n marginTop: '0.25rem'\n },\n singleAttachment: {\n width: `${_ATTACHMENT_CARD_WIDTH_IN_REM}rem`\n },\n multipleAttachments: {\n width: '100%'\n }\n});\n\n/\n @private\n /\nexport const attachmentCardBaseStyles = mergeStyles({\n '& > ': {\n margin: `${_pxToRem(_ATTACHMENT_CARD_MARGIN_IN_PX)}`\n },\n /*\n margin for children is overriden by parent stack, so adding left margin for each child\n /\n '& > :not(:first-child)': {\n marginLeft: `${_pxToRem(_ATTACHMENT_CARD_MARGIN_IN_PX)}`\n }\n});\n\n/*\n @private\n /\nexport const attachmentCardGirdLayout = mergeStyles({\n display: 'grid',\n gridTemplateColumns: `repeat(auto-fit, minmax(${_ATTACHMENT_CARD_WIDTH_IN_REM}rem, 1fr))`\n});\n\n/\n @private\n /\nexport const attachmentCardFlexLayout = mergeStyles({\n display: 'flex',\n flexWrap: 'wrap'\n});\n\n/\n @private\n */\nexport const attachmentGroupDisabled = mergeStyles({\n opacity: '0.5',\n userSelect: 'none',\n pointerEvents: 'none'\n});\n"]}

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

@@ -229,7 +229,7 @@ export const useChatMessageCommonStyles = makeStyles({
             borderCollapse: 'collapse',
             tableLayout: 'auto',
             width: '100%',
-            '& tr': Object.assign(Object.assign({}, shorthands.border('1px', 'solid', `${tokens.colorNeutralStroke2}`)), { '& td': Object.assign(Object.assign({}, shorthands.border('1px', 'solid', `${tokens.colorNeutralStroke2}`)), { wordBreak: 'normal', paddingTop: '0px', paddingRight: '5px' }) })
+            '& tr': Object.assign(Object.assign({}, shorthands.border('1px', 'solid', `${tokens.colorNeutralStrokeAccessible}`)), { '& td': Object.assign(Object.assign({}, shorthands.border('1px', 'solid', `${tokens.colorNeutralStrokeAccessible}`)), { wordBreak: 'normal', paddingTop: '0px', paddingRight: '5px' }) })
         }
     },
     failed: {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MessageThread.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/MessageThread.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAiB,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAE5E,OAAO,EAAE,iCAAiC,EAAE,MAAM,iCAAiC,CAAC;AAEpF,OAAO,EAAE,6BAA6B,EAAE,6BAA6B,EAAE,MAAM,yBAAyB,CAAC;AAEvG,sFAAsF;AACtF,8CAA8C;AAC9C,MAAM,oCAAoC,GAAG,IAAI,CAAC;AAElD,sEAAsE;AACtE,yEAAyE;AACzE,oFAAoF;AACpF,MAAM,gBAAgB,GAAG,CAAC,CAAC;AAC3B,MAAM,kBAAkB,GAAG,GAAG,CAAC;AAC/B,MAAM,sBAAsB,GAAG,KAAK,CAAC;AACrC,MAAM,gCAAgC,GAAG,CAAC,CAAC;AAE3C,gFAAgF;AAChF,MAAM,0BAA0B,GAAG,KAAK,CAAC;AACzC,MAAM,mBAAmB,GAAG,CAAC,CAAC;AAC9B,MAAM,aAAa,GAAG,CAAC,CAAC;AACxB,sDAAsD;AACtD,MAAM,yBAAyB,GAAG,CAAC,CAAC;AAEpC;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,WAAW,CAAC;IACrD,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE,MAAM;IAChB,QAAQ,EAAE,UAAU;IACpB,SAAS,EAAE,QAAQ;CACpB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,WAAW,CAAC;IAC5D,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,UAAU;CACrB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,CAAC;IAC9C,4EAA4E;IAC5E,4DAA4D;IAC5D,KAAK,EAAE,GAAG,iCAAiC,KAAK;CACjD,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,UAAU,CAAC;IACtC,IAAI;QACF,sEAAsE;QACtE,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,QAAQ,EACpB,aAAa,EAAE,QAAQ,EACvB,YAAY,EAAE,QAAQ,EACtB,WAAW,EAAE,QAAQ,IAClB,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,GACzB,UAAU,CAAC,QAAQ,CAAC,MAAM,CAAC;QAC9B,oFAAoF;QACpF,wEAAwE;QACxE,MAAM,EAAE,MAAM,EAEd,UAAU,EAAE;YACV,KAAK,EAAE,MAAM,CAAC,wBAAwB;SACvC,EACD,aAAa,EAAE;YACb,KAAK,EAAE,MAAM,CAAC,6BAA6B;SAC5C,EACD,WAAW,EAAE;YACX,KAAK,EAAE,MAAM,CAAC,6BAA6B;SAC5C,GACF;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,UAAU,CAAC;IACnD,UAAU,EAAE,EAAE;IACd,WAAW,gDACN,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,GACvB,UAAU,CAAC,MAAM,CAAC,GAAG,CAAC,KACzB,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,GAAG,oCAAoC,KAAK,GACvD;IACD,aAAa,gCACX,mBAAmB,EAAE,qBAAqB,EAC1C,iBAAiB,EAAE;;OAEhB,EACH,SAAS,EAAE,GAAG,EACd,OAAO,EAAE,GAAG,IACT,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,KAC1B,SAAS,EAAE,GAAG,EACd,WAAW,EAAE,GAAG,EAChB,YAAY,EAAE,GAAG,EACjB,UAAU,EAAE,MAAM,EAClB,KAAK,EAAE,mBAAmB,GAC3B;IACD,UAAU,kCACL,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,KAC1B,WAAW,EAAE,GAAG,EAChB,YAAY,EAAE,GAAG,EACjB,eAAe,EAAE,aAAa,EAC9B,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,GAAG,oCAAoC,KAAK,EACtD,iBAAiB,EAAE;YACjB,YAAY,EAAE,MAAM;SACrB,GACF;IACD,aAAa,EAAE;QACb,KAAK,EAAE,MAAM;QACb,SAAS,EAAE,GAAG;KACf;IACD,iBAAiB,EAAE;QACjB,UAAU,EAAE,GAAG,kBAAkB,KAAK;QACtC,SAAS,EAAE,GAAG;KACf;IACD,gBAAgB,EAAE;QAChB,UAAU,EAAE,CAAC;QACb,SAAS,EAAE,CAAC;KACb;IACD,cAAc,EAAE;QACd,UAAU,EAAE,GAAG;QACf,SAAS,EAAE,SAAS;KACrB;IACD,eAAe,EAAE;QACf,KAAK,EAAE,eAAe,gBAAgB,GAAG,gCAAgC,GAAG,sBAAsB,MAAM;KACzG;IACD,aAAa,EAAE;QACb,KAAK,EAAE,eAAe,gBAAgB,GAAG,gCAAgC,GAAG,0BAA0B,MAAM;KAC7G;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,UAAU,CAAC;IAC/C,IAAI,EAAE;QACJ,iDAAiD;QACjD,oEAAoE;QACpE,mBAAmB,EAAE,UAAU;QAC/B,iBAAiB,EAAE;;;OAGhB;QACH,OAAO,EAAE,GAAG;QACZ,SAAS,EAAE,GAAG;QACd,UAAU,EAAE,GAAG;QACf,UAAU,EAAE,GAAG;KAChB;IACD,IAAI,gCACF,aAAa,EAAE,MAAM,EACrB,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,GAAG,oCAAoC,KAAK,EACtD,UAAU,EAAE,MAAM,IAEf,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,aAAa,CAAC,KAEnD,uCAAuC,EAAE;YACvC,UAAU,EAAE,SAAS;SACtB,EACD,uCAAuC,EAAE;YACvC,UAAU,EAAE,SAAS;SACtB,EACD,gBAAgB,EAAE;YAChB,KAAK,EAAE,MAAM,CAAC,6BAA6B;YAC3C,UAAU,EAAE,GAAG;SAChB,EACD,iBAAiB,EAAE;YACjB,YAAY,EAAE,MAAM;SACrB,GACF;IACD,YAAY,EAAE;QACZ,SAAS,EAAE,UAAU;KACtB;IACD,IAAI,gCACF,SAAS,EAAE,MAAM,CAAC,OAAO,EACzB,eAAe,EAAE,MAAM,CAAC,uBAAuB,EAC/C,WAAW,EAAE,KAAK,EAClB,QAAQ,EAAE,UAAU,EACpB,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,GAAG,IACP,UAAU,CAAC,YAAY,CAAC,MAAM,CAAC,kBAAkB,CAAC,KACrD,MAAM,EAAE,CAAC,EACT,UAAU,EAAE,MAAM,CAAC,iBAAiB,EACpC,UAAU,EAAE,QAAQ,EAEpB,kBAAkB,EAAE;YAClB,MAAM,EAAE,SAAS;YACjB,UAAU,EAAE,SAAS;SACtB,GACF;IACD,YAAY,EAAE;QACZ,GAAG,EAAE,OAAO;KACb;IACD,UAAU,EAAE;QACV,UAAU,EAAE,QAAQ;KACrB;IACD,WAAW,EAAE;QACX,UAAU,EAAE,SAAS;KACtB;IACD,mBAAmB,EAAE;QACnB,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,GAAG,CAAC,6BAA6B,GAAG,6BAA6B,CAAC,GAAG,CAAC,KAAK;KACtF;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAG,WAAW,CAAC;IACxD,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,yBAAyB;IACjC,MAAM,EAAE,CAAC;IACT,KAAK,EAAE,QAAQ;CAChB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAkB;IACjD,UAAU,EAAE,GAAG;CAChB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,UAAU,CAAC;IAC7C,IAAI,EAAE;QACJ,UAAU,EAAE,GAAG;KAChB;IACD,IAAI,gCACF,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,GAAG,oCAAoC,KAAK,EACtD,WAAW,EAAE,MAAM,EACnB,aAAa,EAAE,MAAM,EACrB,MAAM,EAAE,mBAAmB,IAExB,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,aAAa,CAAC,KACnD,uBAAuB,EAAE;YACvB,QAAQ,EAAE,MAAM;SACjB,EACD,gBAAgB,EAAE;YAChB,KAAK,EAAE,MAAM,CAAC,6BAA6B;YAC3C,UAAU,EAAE,MAAM,CAAC,kBAAkB;SACtC,EACD,OAAO,EAAE;YACP,QAAQ,EAAE,iBAAiB,EAAE,iFAAiF;YAC9G,MAAM,EAAE,iBAAiB;SAC1B,EACD,SAAS,EAAE;YACT,QAAQ,EAAE,iBAAiB,EAAE,iFAAiF;YAC9G,MAAM,EAAE,iBAAiB;SAC1B,EACD,KAAK,oBAGA,UAAU,CAAC,WAAW,CAAC,UAAU,CAAC,GAEvC,cAAc,0EACZ,eAAe,EAAE,MAAM,CAAC,4BAA4B,EACpD,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,aAAa,EACpB,SAAS,EAAE,KAAK,EAChB,WAAW,EAAE,KAAK,EAClB,UAAU,EAAE,KAAK,EACjB,YAAY,EAAE,KAAK,EACnB,UAAU,EAAE,KAAK,EACjB,YAAY,EAAE,MAAM,EACpB,WAAW,EAAE,MAAM,EACnB,aAAa,EAAE,KAAK,IACjB,UAAU,CAAC,MAAM,CAAC,OAAO,CAAC,GAC1B,UAAU,CAAC,YAAY,CAAC,KAAK,CAAC,GAC9B,UAAU,CAAC,WAAW,CAAC,KAAK,CAAC,GAC7B,UAAU,CAAC,WAAW,CAAC,MAAM,CAAC,2BAA2B,CAAC,KAC7D,eAAe,EAAE,KAAK,KAExB,QAAQ,EAAE;YACR,UAAU,EAAE,UAAU;SACvB,EACD,iBAAiB,EAAE;YACjB,YAAY,EAAE,MAAM;SACrB,GACF;IACD,wBAAwB,EAAE;QACxB,eAAe,EAAE;YACf,OAAO,EAAE,OAAO;YAChB,QAAQ,EAAE,UAAU;YACpB,YAAY,EAAE,KAAK;SACpB;QACD,qBAAqB,EAAE;YACrB,eAAe,EAAE,MAAM,CAAC,+BAA+B;YACvD,OAAO,EAAE,mDAAmD;YAC5D,cAAc,EAAE,QAAQ;YACxB,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,GAAG,EAAE,GAAG;YACR,IAAI,EAAE,GAAG;YACT,OAAO,EAAE,OAAO;SACjB;KACF;IACD,iBAAiB,EAAE;QACjB,SAAS,EAAE,UAAU;KACtB;IACD,cAAc,EAAE;QACd,SAAS,EAAE,UAAU;KACtB;IACD,eAAe,EAAE;QACf,UAAU,EAAE,GAAG,CAAC,kBAAkB,GAAG,sBAAsB,KAAK;KACjE;IACD,aAAa,EAAE;QACb,UAAU,EAAE,GAAG,CAAC,kBAAkB,GAAG,0BAA0B,KAAK;KACrE;IACD,mBAAmB,EAAE;QACnB,KAAK,EAAE,GAAG,CAAC,6BAA6B,GAAG,6BAA6B,CAAC,GAAG,CAAC,KAAK;KACnF;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,UAAU,CAAC;IACnD,IAAI,EAAE;QACJ,SAAS,EAAE;YACT,eAAe,EAAE,MAAM,CAAC,4BAA4B;YACpD,cAAc,EAAE,UAAU;YAC1B,WAAW,EAAE,MAAM;YACnB,KAAK,EAAE,MAAM;YAEb,MAAM,kCACD,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,MAAM,CAAC,mBAAmB,EAAE,CAAC,KAErE,MAAM,kCACD,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,MAAM,CAAC,mBAAmB,EAAE,CAAC,KACrE,SAAS,EAAE,QAAQ,EACnB,UAAU,EAAE,KAAK,EACjB,YAAY,EAAE,KAAK,MAEtB;SACF;KACF;IACD,MAAM,EAAE;QACN,wCAAwC;QACxC,eAAe,EAAE,sBAAsB;KACxC;IACD,OAAO,gCACL,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,GAAG,oCAAoC,KAAK,EACtD,WAAW,EAAE,MAAM,EACnB,KAAK,EAAE,MAAM,CAAC,uBAAuB,IAGlC,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,aAAa,CAAC,KACnD,KAAK,EAAE;YACL,UAAU,EAAE,SAAS;SACtB,EAED,KAAK,kCAGA,UAAU,CAAC,WAAW,CAAC,UAAU,CAAC,KACrC,YAAY,EAAE,SAAS,EACvB,SAAS,EAAE,QAAQ,KAGrB,KAAK,gDACA,UAAU,CAAC,WAAW,CAAC,UAAU,CAAC,KACrC,SAAS,EAAE,QAAQ,EACnB,KAAK,EAAE,MAAM,CAAC,wBAAwB,KACnC,UAAU,CAAC,cAAc,CAAC,MAAM,CAAC,IAEvC;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAuB;IAClD,UAAU,EAAE,SAAS;IACrB,KAAK,EAAE,GAAG,gBAAgB,KAAK;IAC/B,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,MAAM;IACb,OAAO,EAAE,OAAO;IAChB,UAAU,EAAE,SAAS;IACrB,MAAM,EAAE,aAAa;CACtB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,mCAC9B,gBAAgB,KACnB,UAAU,EAAE,QAAQ;IACpB,wDAAwD;IACxD,wDAAwD;IACxD,MAAM,EAAE,CAAC,GACV,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,WAAW,CAAC;IAC/C,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,aAAa;CACrB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAkB;IACjD,aAAa,EAAE;QACb,OAAO,EAAE,UAAU;KACpB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAG,WAAW,CAAC;IACxD,MAAM,EAAE,MAAM;IACd,SAAS,EAAE,QAAQ;IACnB,SAAS,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE;IACjC,UAAU,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE;CACnC,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,WAAW,CAAC;IACvC,WAAW,EAAE,OAAO;CACrB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, mergeStyles } from '@fluentui/react';\nimport { makeStyles, shorthands, tokens } from '@fluentui/react-components';\nimport { CSSProperties } from 'react';\nimport { MESSAGE_STATUS_INDICATOR_SIZE_REM } from './MessageStatusIndicator.styles';\nimport { ComponentSlotStyle } from '../../types';\nimport { _ATTACHMENT_CARD_MARGIN_IN_PX, _ATTACHMENT_CARD_WIDTH_IN_REM } from './AttachmentCard.styles';\n\n// Minimum chat bubble width. This matches the minimum chat bubble width from FluentUI\n// that can contain a message and a timestamp.\nconst CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM = 6.25;\n\n// Chat messages should span just short of the width of the container.\n// When calculating the width of a message we also must take into account\n// the width of the avatar/gutter and the gap between the message and avatar/gutter.\nconst AVATAR_WIDTH_REM = 2;\nconst AVATAR_MARGIN_LEFT = 2.5;\nconst AVATAR_MESSAGE_GAP_REM = 0.125;\nconst MESSAGE_AMOUNT_OUT_FROM_EDGE_REM = 2;\n\n// Avatars should display on top of chat messages when the chat thread is narrow\nconst MESSAGE_AVATAR_OVERLAP_REM = 0.925;\nconst CHAT_MESSAGE_ZINDEX = 1;\nconst AVATAR_ZINDEX = 2;\n// new message button should be on top of chat message\nconst NEW_MESSAGE_BUTTON_ZINDEX = 2;\n\n/*\n @private\n /\nexport const messageThreadContainerStyle = mergeStyles({\n height: '100%',\n width: '100%',\n maxHeight: '100%',\n overflow: 'auto',\n position: 'relative',\n alignSelf: 'center'\n});\n\n/\n @private\n /\nexport const messageThreadWrapperContainerStyle = mergeStyles({\n height: '100%',\n width: '100%',\n position: 'relative'\n});\n\n/\n @private\n /\nexport const noMessageStatusStyle = mergeStyles({\n // This should match the size of the message status indicator icon to ensure\n // multiple messages sent by the user are aligned correctly.\n width: `${MESSAGE_STATUS_INDICATOR_SIZE_REM}rem`\n});\n\n/\n @private\n /\nexport const useChatStyles = makeStyles({\n root: {\n // chat components sets max width value to 1056px, override it to 100%\n maxWidth: '100%',\n paddingTop: '0.8rem',\n paddingBottom: '0.5rem',\n paddingRight: '0.6rem',\n paddingLeft: '0.6rem',\n ...shorthands.border('none'),\n ...shorthands.overflow('auto'),\n // `height: 100%` ensures that the Chat component covers 100% of it's parents height\n // to prevent intermittent scrollbars when GIFs are present in the chat.\n height: '100%',\n\n '& a:link': {\n color: tokens.colorBrandForegroundLink\n },\n '& a:visited': {\n color: tokens.colorBrandForegroundLinkHover\n },\n '& a:hover': {\n color: tokens.colorBrandForegroundLinkHover\n }\n }\n});\n\n/\n @private\n /\nexport const useChatMessageRenderStyles = makeStyles({\n rootCommon: {},\n rootMessage: {\n ...shorthands.padding('0'),\n ...shorthands.margin('0'),\n maxWidth: '100%',\n minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`\n },\n rootMyMessage: {\n gridTemplateColumns: 'auto fit-content(0)',\n gridTemplateAreas: `\n \"body status\"\n `,\n columnGap: '0',\n gridGap: '0',\n ...shorthands.padding('0'),\n marginTop: '0',\n marginRight: '0',\n marginBottom: '0',\n marginLeft: '50px',\n width: `calc(100% - 50px)`\n },\n bodyCommon: {\n ...shorthands.padding('0'),\n marginRight: '0',\n marginBottom: '0',\n backgroundColor: 'transparent',\n maxWidth: '100%',\n minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n '&:focus-visible': {\n outlineStyle: 'auto'\n }\n },\n bodyMyMessage: {\n width: '100%',\n marginTop: '0'\n },\n bodyWithoutAvatar: {\n marginLeft: `${AVATAR_MARGIN_LEFT}rem`,\n marginTop: '0'\n },\n bodyHiddenAvatar: {\n marginLeft: 0,\n marginTop: 0\n },\n bodyWithAvatar: {\n marginLeft: `0`,\n marginTop: '0.75rem'\n },\n avatarNoOverlap: {\n width: `calc(100% - ${AVATAR_WIDTH_REM + MESSAGE_AMOUNT_OUT_FROM_EDGE_REM + AVATAR_MESSAGE_GAP_REM}rem)`\n },\n avatarOverlap: {\n width: `calc(100% - ${AVATAR_WIDTH_REM + MESSAGE_AMOUNT_OUT_FROM_EDGE_REM - MESSAGE_AVATAR_OVERLAP_REM}rem)`\n }\n});\n\n/\n @private\n /\nexport const useChatMyMessageStyles = makeStyles({\n root: {\n // The first column's width should be set to 1fr\n // because otherwise rich text editor's width will grow indefinitely\n gridTemplateColumns: '1fr auto',\n gridTemplateAreas: `\n \". actions\"\n \"body body\"\n `,\n gridGap: '0',\n columnGap: '0',\n paddingTop: '0',\n marginLeft: '0'\n },\n body: {\n paddingBottom: '10px',\n marginTop: '1rem',\n maxWidth: '100%',\n minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n marginLeft: '0rem',\n // This makes message bubble show border in high contrast mode making each message distinguishable\n ...shorthands.border('1px', 'solid', 'transparent'),\n\n '&:hover ~ .fui-ChatMyMessage__actions': {\n visibility: 'visible'\n },\n '&:focus ~ .fui-ChatMyMessage__actions': {\n visibility: 'visible'\n },\n '& msft-mention': {\n color: tokens.colorStatusWarningBackground3,\n fontWeight: 600\n },\n '&:focus-visible': {\n outlineStyle: 'auto'\n }\n },\n bodyAttached: {\n marginTop: '0.125rem'\n },\n menu: {\n boxShadow: tokens.shadow4,\n backgroundColor: tokens.colorNeutralBackground1,\n marginRight: '1px',\n position: 'absolute',\n top: '-2px',\n right: '0',\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n zIndex: 1,\n lineHeight: tokens.lineHeightBase100,\n visibility: 'hidden',\n\n '&:hover, &:focus': {\n cursor: 'pointer',\n visibility: 'visible'\n }\n },\n menuAttached: {\n top: '-18px'\n },\n menuHidden: {\n visibility: 'hidden'\n },\n menuVisible: {\n visibility: 'visible'\n },\n multipleAttachments: {\n width: '100%',\n maxWidth: `${(_ATTACHMENT_CARD_WIDTH_IN_REM + _ATTACHMENT_CARD_MARGIN_IN_PX) 2}rem`\n }\n});\n\n/*\n @private\n /\nexport const newMessageButtonContainerStyle = mergeStyles({\n position: 'absolute',\n zIndex: NEW_MESSAGE_BUTTON_ZINDEX,\n bottom: 0,\n right: '1.5rem'\n});\n\n/\n @private\n /\nexport const chatMessageDateStyle: CSSProperties = {\n fontWeight: 600\n};\n\n/\n @private\n /\nexport const useChatMessageStyles = makeStyles({\n root: {\n paddingTop: '0'\n },\n body: {\n maxWidth: '100%',\n minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n marginRight: '0rem',\n paddingBottom: '10px',\n zIndex: CHAT_MESSAGE_ZINDEX,\n // This makes message bubble show border in high contrast mode making each message distinguishable\n ...shorthands.border('1px', 'solid', 'transparent'),\n '& > div:first-of-type': {\n flexWrap: 'wrap'\n },\n '& msft-mention': {\n color: tokens.colorStatusWarningBackground3,\n fontWeight: tokens.fontWeightSemibold\n },\n '& img': {\n maxWidth: '100% !important', // Add !important to make sure it won't be overridden by style defined in element\n height: 'auto !important'\n },\n '& video': {\n maxWidth: '100% !important', // Add !important to make sure it won't be overridden by style defined in element\n height: 'auto !important'\n },\n '& p': {\n // Deal with awkward padding seen in messages from Teams.\n // For more info see https://github.com/Azure/communication-ui-library/pull/1507\n ...shorthands.marginBlock('0.125rem')\n },\n '& blockquote': {\n backgroundColor: tokens.colorBrandBackgroundInverted,\n clear: 'left',\n minHeight: '2.25rem',\n width: 'fit-content',\n marginTop: '7px',\n marginRight: '0px',\n marginLeft: '0px',\n marginBottom: '7px',\n paddingTop: '7px',\n paddingRight: '15px',\n paddingLeft: '15px',\n paddingBottom: '7px',\n ...shorthands.border('solid'),\n ...shorthands.borderRadius('4px'),\n ...shorthands.borderWidth('1px'),\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n borderLeftWidth: '4px'\n },\n '& code': {\n whiteSpace: 'pre-wrap'\n },\n '&:focus-visible': {\n outlineStyle: 'auto'\n }\n },\n bodyWithPlaceholderImage: {\n '& img[src=\"\"]': {\n display: 'block',\n position: 'relative',\n marginBottom: '5px'\n },\n '& img[src=\"\"]:after': {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n content: `url(\"data:image/gif;base64,R0lGODlhAQABAAAAACw=\")`,\n backgroundSize: 'center',\n position: 'absolute',\n width: '100%',\n height: '100%',\n top: '0',\n left: '0',\n display: 'block'\n }\n },\n bodyWithoutAvatar: {\n marginTop: '0.125rem'\n },\n bodyWithAvatar: {\n marginTop: `0.375rem`\n },\n avatarNoOverlap: {\n marginLeft: `${-AVATAR_MARGIN_LEFT + AVATAR_MESSAGE_GAP_REM}rem`\n },\n avatarOverlap: {\n marginLeft: `${-AVATAR_MARGIN_LEFT - MESSAGE_AVATAR_OVERLAP_REM}rem`\n },\n multipleAttachments: {\n width: `${(_ATTACHMENT_CARD_WIDTH_IN_REM + _ATTACHMENT_CARD_MARGIN_IN_PX) 2}rem`\n }\n});\n\n/*\n @private\n /\nexport const useChatMessageCommonStyles = makeStyles({\n body: {\n '& table': {\n backgroundColor: tokens.colorBrandBackgroundInverted,\n borderCollapse: 'collapse',\n tableLayout: 'auto',\n width: '100%',\n\n '& tr': {\n ...shorthands.border('1px', 'solid', `${tokens.colorNeutralStroke2}`),\n\n '& td': {\n ...shorthands.border('1px', 'solid', `${tokens.colorNeutralStroke2}`),\n wordBreak: 'normal',\n paddingTop: '0px',\n paddingRight: '5px'\n }\n }\n }\n },\n failed: {\n //TODO: can we reuse a theme color here?\n backgroundColor: 'rgba(168, 0, 0, 0.2)'\n },\n blocked: {\n maxWidth: '100%',\n minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n marginRight: '0rem',\n color: tokens.colorNeutralForeground2,\n\n // This makes message bubble show border in high contrast mode making each message distinguishable\n ...shorthands.border('1px', 'solid', 'transparent'),\n '& i': {\n paddingTop: '0.25rem'\n },\n\n '& p': {\n // Deal with awkward padding seen in messages from Teams.\n // For more info see https://github.com/Azure/communication-ui-library/pull/1507\n ...shorthands.marginBlock('0.125rem'),\n paddingRight: '0.75rem',\n fontStyle: 'italic'\n },\n\n '& a': {\n ...shorthands.marginBlock('0.125rem'),\n fontStyle: 'normal',\n color: tokens.colorBrandForegroundLink,\n ...shorthands.textDecoration('none')\n }\n }\n});\n\n/\n @private\n /\nexport const gutterWithAvatar: ComponentSlotStyle = {\n paddingTop: '1.65rem',\n width: `${AVATAR_WIDTH_REM}rem`,\n position: 'relative',\n float: 'left',\n display: 'block',\n visibility: 'visible',\n zIndex: AVATAR_ZINDEX\n};\n\n/\n @private\n /\nexport const gutterWithHiddenAvatar: ComponentSlotStyle = {\n ...gutterWithAvatar,\n visibility: 'hidden',\n // we use this hidden avatar just as a width placeholder\n // the placeholder is needed for responsive bubble width\n height: 0\n};\n\n/\n @private\n /\nexport const newMessageButtonStyle = mergeStyles({\n float: 'right',\n width: 'fit-content'\n});\n\n/\n @private\n /\nexport const buttonWithIconStyles: IButtonStyles = {\n textContainer: {\n display: 'contents'\n }\n};\n\n/\n @private\n /\nexport const loadPreviousMessageButtonStyle = mergeStyles({\n border: 'none',\n minHeight: '1.5rem',\n '&:hover': { background: 'none' },\n '&:active': { background: 'none' }\n});\n\n/\n @private\n */\nexport const DownIconStyle = mergeStyles({\n marginRight: '0.5em'\n});\n"]}
1	+ {"version":3,"file":"MessageThread.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/MessageThread.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, mergeStyles } from '@fluentui/react';\nimport { makeStyles, shorthands, tokens } from '@fluentui/react-components';\nimport { CSSProperties } from 'react';\nimport { MESSAGE_STATUS_INDICATOR_SIZE_REM } from './MessageStatusIndicator.styles';\nimport { ComponentSlotStyle } from '../../types';\nimport { _ATTACHMENT_CARD_MARGIN_IN_PX, _ATTACHMENT_CARD_WIDTH_IN_REM } from './AttachmentCard.styles';\n\n// Minimum chat bubble width. This matches the minimum chat bubble width from FluentUI\n// that can contain a message and a timestamp.\nconst CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM = 6.25;\n\n// Chat messages should span just short of the width of the container.\n// When calculating the width of a message we also must take into account\n// the width of the avatar/gutter and the gap between the message and avatar/gutter.\nconst AVATAR_WIDTH_REM = 2;\nconst AVATAR_MARGIN_LEFT = 2.5;\nconst AVATAR_MESSAGE_GAP_REM = 0.125;\nconst MESSAGE_AMOUNT_OUT_FROM_EDGE_REM = 2;\n\n// Avatars should display on top of chat messages when the chat thread is narrow\nconst MESSAGE_AVATAR_OVERLAP_REM = 0.925;\nconst CHAT_MESSAGE_ZINDEX = 1;\nconst AVATAR_ZINDEX = 2;\n// new message button should be on top of chat message\nconst NEW_MESSAGE_BUTTON_ZINDEX = 2;\n\n/*\n @private\n /\nexport const messageThreadContainerStyle = mergeStyles({\n height: '100%',\n width: '100%',\n maxHeight: '100%',\n overflow: 'auto',\n position: 'relative',\n alignSelf: 'center'\n});\n\n/\n @private\n /\nexport const messageThreadWrapperContainerStyle = mergeStyles({\n height: '100%',\n width: '100%',\n position: 'relative'\n});\n\n/\n @private\n /\nexport const noMessageStatusStyle = mergeStyles({\n // This should match the size of the message status indicator icon to ensure\n // multiple messages sent by the user are aligned correctly.\n width: `${MESSAGE_STATUS_INDICATOR_SIZE_REM}rem`\n});\n\n/\n @private\n /\nexport const useChatStyles = makeStyles({\n root: {\n // chat components sets max width value to 1056px, override it to 100%\n maxWidth: '100%',\n paddingTop: '0.8rem',\n paddingBottom: '0.5rem',\n paddingRight: '0.6rem',\n paddingLeft: '0.6rem',\n ...shorthands.border('none'),\n ...shorthands.overflow('auto'),\n // `height: 100%` ensures that the Chat component covers 100% of it's parents height\n // to prevent intermittent scrollbars when GIFs are present in the chat.\n height: '100%',\n\n '& a:link': {\n color: tokens.colorBrandForegroundLink\n },\n '& a:visited': {\n color: tokens.colorBrandForegroundLinkHover\n },\n '& a:hover': {\n color: tokens.colorBrandForegroundLinkHover\n }\n }\n});\n\n/\n @private\n /\nexport const useChatMessageRenderStyles = makeStyles({\n rootCommon: {},\n rootMessage: {\n ...shorthands.padding('0'),\n ...shorthands.margin('0'),\n maxWidth: '100%',\n minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`\n },\n rootMyMessage: {\n gridTemplateColumns: 'auto fit-content(0)',\n gridTemplateAreas: `\n \"body status\"\n `,\n columnGap: '0',\n gridGap: '0',\n ...shorthands.padding('0'),\n marginTop: '0',\n marginRight: '0',\n marginBottom: '0',\n marginLeft: '50px',\n width: `calc(100% - 50px)`\n },\n bodyCommon: {\n ...shorthands.padding('0'),\n marginRight: '0',\n marginBottom: '0',\n backgroundColor: 'transparent',\n maxWidth: '100%',\n minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n '&:focus-visible': {\n outlineStyle: 'auto'\n }\n },\n bodyMyMessage: {\n width: '100%',\n marginTop: '0'\n },\n bodyWithoutAvatar: {\n marginLeft: `${AVATAR_MARGIN_LEFT}rem`,\n marginTop: '0'\n },\n bodyHiddenAvatar: {\n marginLeft: 0,\n marginTop: 0\n },\n bodyWithAvatar: {\n marginLeft: `0`,\n marginTop: '0.75rem'\n },\n avatarNoOverlap: {\n width: `calc(100% - ${AVATAR_WIDTH_REM + MESSAGE_AMOUNT_OUT_FROM_EDGE_REM + AVATAR_MESSAGE_GAP_REM}rem)`\n },\n avatarOverlap: {\n width: `calc(100% - ${AVATAR_WIDTH_REM + MESSAGE_AMOUNT_OUT_FROM_EDGE_REM - MESSAGE_AVATAR_OVERLAP_REM}rem)`\n }\n});\n\n/\n @private\n /\nexport const useChatMyMessageStyles = makeStyles({\n root: {\n // The first column's width should be set to 1fr\n // because otherwise rich text editor's width will grow indefinitely\n gridTemplateColumns: '1fr auto',\n gridTemplateAreas: `\n \". actions\"\n \"body body\"\n `,\n gridGap: '0',\n columnGap: '0',\n paddingTop: '0',\n marginLeft: '0'\n },\n body: {\n paddingBottom: '10px',\n marginTop: '1rem',\n maxWidth: '100%',\n minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n marginLeft: '0rem',\n // This makes message bubble show border in high contrast mode making each message distinguishable\n ...shorthands.border('1px', 'solid', 'transparent'),\n\n '&:hover ~ .fui-ChatMyMessage__actions': {\n visibility: 'visible'\n },\n '&:focus ~ .fui-ChatMyMessage__actions': {\n visibility: 'visible'\n },\n '& msft-mention': {\n color: tokens.colorStatusWarningBackground3,\n fontWeight: 600\n },\n '&:focus-visible': {\n outlineStyle: 'auto'\n }\n },\n bodyAttached: {\n marginTop: '0.125rem'\n },\n menu: {\n boxShadow: tokens.shadow4,\n backgroundColor: tokens.colorNeutralBackground1,\n marginRight: '1px',\n position: 'absolute',\n top: '-2px',\n right: '0',\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n zIndex: 1,\n lineHeight: tokens.lineHeightBase100,\n visibility: 'hidden',\n\n '&:hover, &:focus': {\n cursor: 'pointer',\n visibility: 'visible'\n }\n },\n menuAttached: {\n top: '-18px'\n },\n menuHidden: {\n visibility: 'hidden'\n },\n menuVisible: {\n visibility: 'visible'\n },\n multipleAttachments: {\n width: '100%',\n maxWidth: `${(_ATTACHMENT_CARD_WIDTH_IN_REM + _ATTACHMENT_CARD_MARGIN_IN_PX) 2}rem`\n }\n});\n\n/*\n @private\n /\nexport const newMessageButtonContainerStyle = mergeStyles({\n position: 'absolute',\n zIndex: NEW_MESSAGE_BUTTON_ZINDEX,\n bottom: 0,\n right: '1.5rem'\n});\n\n/\n @private\n /\nexport const chatMessageDateStyle: CSSProperties = {\n fontWeight: 600\n};\n\n/\n @private\n /\nexport const useChatMessageStyles = makeStyles({\n root: {\n paddingTop: '0'\n },\n body: {\n maxWidth: '100%',\n minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n marginRight: '0rem',\n paddingBottom: '10px',\n zIndex: CHAT_MESSAGE_ZINDEX,\n // This makes message bubble show border in high contrast mode making each message distinguishable\n ...shorthands.border('1px', 'solid', 'transparent'),\n '& > div:first-of-type': {\n flexWrap: 'wrap'\n },\n '& msft-mention': {\n color: tokens.colorStatusWarningBackground3,\n fontWeight: tokens.fontWeightSemibold\n },\n '& img': {\n maxWidth: '100% !important', // Add !important to make sure it won't be overridden by style defined in element\n height: 'auto !important'\n },\n '& video': {\n maxWidth: '100% !important', // Add !important to make sure it won't be overridden by style defined in element\n height: 'auto !important'\n },\n '& p': {\n // Deal with awkward padding seen in messages from Teams.\n // For more info see https://github.com/Azure/communication-ui-library/pull/1507\n ...shorthands.marginBlock('0.125rem')\n },\n '& blockquote': {\n backgroundColor: tokens.colorBrandBackgroundInverted,\n clear: 'left',\n minHeight: '2.25rem',\n width: 'fit-content',\n marginTop: '7px',\n marginRight: '0px',\n marginLeft: '0px',\n marginBottom: '7px',\n paddingTop: '7px',\n paddingRight: '15px',\n paddingLeft: '15px',\n paddingBottom: '7px',\n ...shorthands.border('solid'),\n ...shorthands.borderRadius('4px'),\n ...shorthands.borderWidth('1px'),\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n borderLeftWidth: '4px'\n },\n '& code': {\n whiteSpace: 'pre-wrap'\n },\n '&:focus-visible': {\n outlineStyle: 'auto'\n }\n },\n bodyWithPlaceholderImage: {\n '& img[src=\"\"]': {\n display: 'block',\n position: 'relative',\n marginBottom: '5px'\n },\n '& img[src=\"\"]:after': {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n content: `url(\"data:image/gif;base64,R0lGODlhAQABAAAAACw=\")`,\n backgroundSize: 'center',\n position: 'absolute',\n width: '100%',\n height: '100%',\n top: '0',\n left: '0',\n display: 'block'\n }\n },\n bodyWithoutAvatar: {\n marginTop: '0.125rem'\n },\n bodyWithAvatar: {\n marginTop: `0.375rem`\n },\n avatarNoOverlap: {\n marginLeft: `${-AVATAR_MARGIN_LEFT + AVATAR_MESSAGE_GAP_REM}rem`\n },\n avatarOverlap: {\n marginLeft: `${-AVATAR_MARGIN_LEFT - MESSAGE_AVATAR_OVERLAP_REM}rem`\n },\n multipleAttachments: {\n width: `${(_ATTACHMENT_CARD_WIDTH_IN_REM + _ATTACHMENT_CARD_MARGIN_IN_PX) 2}rem`\n }\n});\n\n/*\n @private\n /\nexport const useChatMessageCommonStyles = makeStyles({\n body: {\n '& table': {\n backgroundColor: tokens.colorBrandBackgroundInverted,\n borderCollapse: 'collapse',\n tableLayout: 'auto',\n width: '100%',\n\n '& tr': {\n ...shorthands.border('1px', 'solid', `${tokens.colorNeutralStrokeAccessible}`),\n\n '& td': {\n ...shorthands.border('1px', 'solid', `${tokens.colorNeutralStrokeAccessible}`),\n wordBreak: 'normal',\n paddingTop: '0px',\n paddingRight: '5px'\n }\n }\n }\n },\n failed: {\n //TODO: can we reuse a theme color here?\n backgroundColor: 'rgba(168, 0, 0, 0.2)'\n },\n blocked: {\n maxWidth: '100%',\n minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n marginRight: '0rem',\n color: tokens.colorNeutralForeground2,\n\n // This makes message bubble show border in high contrast mode making each message distinguishable\n ...shorthands.border('1px', 'solid', 'transparent'),\n '& i': {\n paddingTop: '0.25rem'\n },\n\n '& p': {\n // Deal with awkward padding seen in messages from Teams.\n // For more info see https://github.com/Azure/communication-ui-library/pull/1507\n ...shorthands.marginBlock('0.125rem'),\n paddingRight: '0.75rem',\n fontStyle: 'italic'\n },\n\n '& a': {\n ...shorthands.marginBlock('0.125rem'),\n fontStyle: 'normal',\n color: tokens.colorBrandForegroundLink,\n ...shorthands.textDecoration('none')\n }\n }\n});\n\n/\n @private\n /\nexport const gutterWithAvatar: ComponentSlotStyle = {\n paddingTop: '1.65rem',\n width: `${AVATAR_WIDTH_REM}rem`,\n position: 'relative',\n float: 'left',\n display: 'block',\n visibility: 'visible',\n zIndex: AVATAR_ZINDEX\n};\n\n/\n @private\n /\nexport const gutterWithHiddenAvatar: ComponentSlotStyle = {\n ...gutterWithAvatar,\n visibility: 'hidden',\n // we use this hidden avatar just as a width placeholder\n // the placeholder is needed for responsive bubble width\n height: 0\n};\n\n/\n @private\n /\nexport const newMessageButtonStyle = mergeStyles({\n float: 'right',\n width: 'fit-content'\n});\n\n/\n @private\n /\nexport const buttonWithIconStyles: IButtonStyles = {\n textContainer: {\n display: 'contents'\n }\n};\n\n/\n @private\n /\nexport const loadPreviousMessageButtonStyle = mergeStyles({\n border: 'none',\n minHeight: '1.5rem',\n '&:hover': { background: 'none' },\n '&:active': { background: 'none' }\n});\n\n/\n @private\n */\nexport const DownIconStyle = mergeStyles({\n marginRight: '0.5em'\n});\n"]}

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

@@ -39,10 +39,10 @@ export const richTextEditorWrapperStyle = (theme, addTopOffset) => {
             tableLayout: 'auto',
             '& tr': {
                 background: 'transparent',
-                border: `1px solid ${theme.palette.neutralTertiaryAlt}`,
+                border: `1px solid ${theme.palette.neutralSecondary}`,
                 '& td': {
                     background: 'transparent',
-                    border: `1px solid ${theme.palette.neutralTertiaryAlt}`,
+                    border: `1px solid ${theme.palette.neutralSecondary}`,
                     wordBreak: 'normal',
                     padding: '0.125rem 0.25rem',
                     verticalAlign: 'top'
@@ -112,16 +112,26 @@ const ribbonOverflowButtonRootStyles = (theme) => {
         }
     };
 };
-const ribbonButtonRootStyles = (theme) => {
+const ribbonButtonRootStyles = (iconColor, hoverIconColor) => {
     return {
         backgroundColor: 'transparent',
         selectors: {
-            // Icon's color doesn't work here because of the specificity
+            // media query applies only if the device allows real hover interactions
+            // and hover styles are not applied on touch- only devices where the hover state cannot be accurately detected
+            '@media (hover: hover)': {
+                ':hover .ms-Button-icon': {
+                    color: hoverIconColor
+                },
+                ':hover .ms-Button-menuIcon': {
+                    color: hoverIconColor
+                }
+            },
+            // the classes needs here to apply to styles for icons because of the specificity
             '.ms-Button-icon': {
-                color: theme.palette.themePrimary
+                color: iconColor
             },
             '.ms-Button-menuIcon': {
-                color: theme.palette.themePrimary
+                color: iconColor
             }
         }
     };
@@ -134,13 +144,14 @@ export const toolbarButtonStyle = (theme) => {
         icon: { color: theme.palette.neutralPrimary, height: 'auto' },
         menuIcon: { color: theme.palette.neutralPrimary, height: 'auto' },
         root: { minWidth: 'auto', backgroundColor: 'transparent' },
-        rootChecked: ribbonButtonRootStyles(theme),
-        rootHovered: ribbonButtonRootStyles(theme),
-        rootCheckedHovered: ribbonButtonRootStyles(theme),
-        rootCheckedPressed: ribbonButtonRootStyles(theme),
-        rootPressed: ribbonButtonRootStyles(theme),
-        rootExpanded: ribbonButtonRootStyles(theme),
-        rootExpandedHovered: ribbonButtonRootStyles(theme)
+        rootChecked: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),
+        // there is a bug for Android where the press action is considered hover sometimes
+        rootHovered: ribbonButtonRootStyles(theme.palette.neutralPrimary, theme.palette.themePrimary),
+        rootCheckedHovered: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),
+        rootCheckedPressed: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),
+        rootPressed: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),
+        rootExpanded: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),
+        rootExpandedHovered: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary)
     };
 };
 const rootRibbonTableButtonStyle = (theme) => {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RichTextEditor.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/RichTextEditor.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { IButtonStyles, ICommandBarStyles, IContextualMenuStyles, IStyle, Theme, mergeStyles } from '@fluentui/react';\nimport { editorTextBoxButtonStyle } from './SendBox.styles';\nimport { RichTextEditorStyleProps } from '../RichTextEditor/RichTextEditor';\n\n/*\n @private\n /\nexport const richTextEditorStyle = (props: { minHeight: string; maxHeight: string }): string => {\n return mergeStyles({\n border: 'none',\n overflow: 'auto',\n outline: 'none',\n minHeight: props.minHeight,\n maxHeight: props.maxHeight,\n maxWidth: '100%',\n // this is needed to fix an issue when text has some indentation, indentation uses blockquote tag and\n // it gets both horizontal margins because of the user agent stylesheet\n // remove this code when RoosterJS content model packages are used as they use different approach for indentation\n '& blockquote': {\n marginInlineEnd: '0'\n }\n });\n};\n\n/\n @private\n /\nexport const richTextEditorWrapperStyle = (theme: Theme, addTopOffset: boolean): string => {\n return mergeStyles({\n paddingTop: `${addTopOffset ? '0.5rem' : '0'}`,\n paddingInlineStart: `0.75rem`,\n paddingInlineEnd: `0.75rem`,\n maxWidth: '100%',\n color: theme.palette.neutralPrimary,\n\n '& table': {\n background: 'transparent',\n borderCollapse: 'collapse',\n width: '100%',\n borderSpacing: '0',\n tableLayout: 'auto',\n\n '& tr': {\n background: 'transparent',\n border: `1px solid ${theme.palette.neutralTertiaryAlt}`,\n\n '& td': {\n background: 'transparent',\n border: `1px solid ${theme.palette.neutralTertiaryAlt}`,\n wordBreak: 'normal',\n padding: '0.125rem 0.25rem',\n verticalAlign: 'top'\n }\n }\n }\n });\n};\n\n/\n @private\n /\nexport const richTextActionButtonsStackStyle = mergeStyles({\n paddingRight: `0.125rem`\n});\n\n/\n @private\n /\nexport const richTextActionButtonsStyle = mergeStyles({\n height: '2.25rem',\n width: '2.25rem',\n margin: 'auto'\n});\n\n/\n @private\n /\nexport const richTextActionButtonsDividerStyle = (theme: Theme): string => {\n return mergeStyles({\n color: theme.palette.neutralQuaternaryAlt,\n margin: '0.375rem -0.5rem 0 -0.5rem',\n backgroundColor: 'transparent'\n });\n};\n\n/\n @private\n /\nexport const ribbonOverflowButtonStyle = (theme: Theme): Partial<IContextualMenuStyles> => {\n return {\n subComponentStyles: {\n menuItem: {\n icon: { color: theme.palette.neutralPrimary, paddingTop: '0.5rem' },\n root: ribbonOverflowButtonRootStyles(theme)\n },\n callout: {}\n }\n };\n};\n\nconst ribbonOverflowButtonRootStyles = (theme: Theme): IStyle => {\n return {\n selectors: {\n // Icon's color doesn't work here because of the specificity\n '&:hover': {\n selectors: {\n '.ms-ContextualMenu-icon': {\n color: theme.palette.neutralPrimary\n }\n }\n },\n '.ribbon-table-button-regular-icon': {\n display: 'inline-block',\n margin: '-0.25rem 0.25rem 0 0.25rem',\n width: '1.25rem',\n height: '1.25rem'\n },\n '.ribbon-table-button-filled-icon': {\n display: 'none'\n }\n }\n };\n};\n\nconst ribbonButtonRootStyles = (theme: Theme): IStyle => {\n return {\n backgroundColor: 'transparent',\n selectors: {\n // Icon's color doesn't work here because of the specificity\n '.ms-Button-icon': {\n color: theme.palette.themePrimary\n },\n '.ms-Button-menuIcon': {\n color: theme.palette.themePrimary\n }\n }\n };\n};\n\n/\n @private\n /\nexport const toolbarButtonStyle = (theme: Theme): Partial<IButtonStyles> => {\n return {\n icon: { color: theme.palette.neutralPrimary, height: 'auto' },\n menuIcon: { color: theme.palette.neutralPrimary, height: 'auto' },\n root: { minWidth: 'auto', backgroundColor: 'transparent' },\n rootChecked: ribbonButtonRootStyles(theme),\n rootHovered: ribbonButtonRootStyles(theme),\n rootCheckedHovered: ribbonButtonRootStyles(theme),\n rootCheckedPressed: ribbonButtonRootStyles(theme),\n rootPressed: ribbonButtonRootStyles(theme),\n rootExpanded: ribbonButtonRootStyles(theme),\n rootExpandedHovered: ribbonButtonRootStyles(theme)\n };\n};\n\nconst rootRibbonTableButtonStyle = (theme: Theme): IStyle => {\n // merge IStyles props\n return Object.assign({ minWidth: 'auto' }, ribbonTableButtonRootStyles(theme, false));\n};\n\n/\n @private\n /\nexport const toolbarTableButtonStyle = (theme: Theme): Partial<IButtonStyles> => {\n return {\n icon: { height: 'auto' },\n menuIcon: { height: 'auto' },\n root: rootRibbonTableButtonStyle(theme),\n rootChecked: ribbonTableButtonRootStyles(theme, true),\n rootHovered: ribbonTableButtonRootStyles(theme, true),\n rootCheckedHovered: ribbonTableButtonRootStyles(theme, true),\n rootCheckedPressed: ribbonTableButtonRootStyles(theme, true),\n rootPressed: ribbonTableButtonRootStyles(theme, true),\n rootExpanded: ribbonTableButtonRootStyles(theme, true),\n rootExpandedHovered: ribbonTableButtonRootStyles(theme, true)\n };\n};\nconst ribbonTableButtonRootStyles = (theme: Theme, isSelected: boolean): IStyle => {\n return {\n backgroundColor: 'transparent',\n selectors: {\n '.ribbon-table-button-regular-icon': {\n width: '1.25rem',\n height: '1.25rem',\n margin: '-0.25rem 0.25rem 0 0.25rem',\n color: theme.palette.neutralPrimary,\n display: isSelected ? 'none' : 'inline-block'\n },\n '.ribbon-table-button-filled-icon': {\n width: '1.25rem',\n height: '1.25rem',\n margin: '-0.25rem 0.25rem 0 0.25rem',\n color: theme.palette.themePrimary,\n display: isSelected ? 'inline-block' : 'none'\n }\n }\n };\n};\n\n/\n @private\n /\nexport const ribbonDividerStyle = (theme: Theme): string => {\n return mergeStyles({\n color: theme.palette.neutralQuaternaryAlt,\n margin: '0 -0.5rem',\n paddingTop: '0.5rem'\n });\n};\n\n/\n @private\n /\nexport const richTextToolbarStyle: Partial<ICommandBarStyles> = {\n // Override for the default white color of the Ribbon component\n root: { backgroundColor: 'transparent', padding: '0px' }\n};\n\n/\n @private\n /\nexport const richTextFormatButtonIconStyle = (theme: Theme, isSelected: boolean): string => {\n return mergeStyles(editorTextBoxButtonStyle, {\n color: isSelected ? theme.palette.themePrimary : theme.palette.neutralSecondary\n });\n};\n\n/\n @private\n /\nexport const editBoxRichTextEditorStyle = (): RichTextEditorStyleProps => {\n return {\n minHeight: '2.25rem',\n maxHeight: '8rem'\n };\n};\n\n/\n @private\n /\nexport const sendBoxRichTextEditorStyle = (isExpanded: boolean): RichTextEditorStyleProps => {\n return {\n minHeight: isExpanded ? '4rem' : '1.25rem',\n maxHeight: '8rem'\n };\n};\n\n/\n @private\n /\nexport const insertTableMenuCellButtonStyles = (theme: Theme): IStyle => {\n return {\n width: '16px',\n height: '16px',\n border: `solid 1px ${theme.palette.neutralTertiaryAlt}`,\n cursor: 'pointer',\n background: 'transparent'\n };\n};\n\n/\n @private\n /\nexport const insertTableMenuCellButtonSelectedStyles = (theme: Theme): IStyle => {\n return {\n background: theme.palette.themePrimary\n };\n};\n\n/\n @private\n /\nexport const insertTableMenuTablePane = mergeStyles({\n padding: '8px 10px 12px 10px',\n boxSizing: 'content-box',\n minWidth: 'auto'\n});\n\n/\n @private\n /\nexport const insertTableMenuFocusZone = (theme: Theme): string => {\n return mergeStyles({\n display: 'inline-grid',\n gridTemplateColumns: 'auto auto auto auto auto',\n border: `solid 1px ${theme.palette.neutralTertiaryAlt}`\n });\n};\n\n/\n @private\n /\nexport const insertTableMenuTitleStyles = mergeStyles({\n width: '100%',\n height: '1rem',\n fontSize: '0.75rem',\n marginBottom: '0.5rem'\n});\n\n/\n @private\n */\nexport const tableContextMenuIconStyles = mergeStyles({\n marginTop: '0.375rem'\n});\n"]}
1	+ {"version":3,"file":"RichTextEditor.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/RichTextEditor.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { IButtonStyles, ICommandBarStyles, IContextualMenuStyles, IStyle, Theme, mergeStyles } from '@fluentui/react';\nimport { editorTextBoxButtonStyle } from './SendBox.styles';\nimport { RichTextEditorStyleProps } from '../RichTextEditor/RichTextEditor';\n\n/*\n @private\n /\nexport const richTextEditorStyle = (props: { minHeight: string; maxHeight: string }): string => {\n return mergeStyles({\n border: 'none',\n overflow: 'auto',\n outline: 'none',\n minHeight: props.minHeight,\n maxHeight: props.maxHeight,\n maxWidth: '100%',\n // this is needed to fix an issue when text has some indentation, indentation uses blockquote tag and\n // it gets both horizontal margins because of the user agent stylesheet\n // remove this code when RoosterJS content model packages are used as they use different approach for indentation\n '& blockquote': {\n marginInlineEnd: '0'\n }\n });\n};\n\n/\n @private\n /\nexport const richTextEditorWrapperStyle = (theme: Theme, addTopOffset: boolean): string => {\n return mergeStyles({\n paddingTop: `${addTopOffset ? '0.5rem' : '0'}`,\n paddingInlineStart: `0.75rem`,\n paddingInlineEnd: `0.75rem`,\n maxWidth: '100%',\n color: theme.palette.neutralPrimary,\n\n '& table': {\n background: 'transparent',\n borderCollapse: 'collapse',\n width: '100%',\n borderSpacing: '0',\n tableLayout: 'auto',\n\n '& tr': {\n background: 'transparent',\n border: `1px solid ${theme.palette.neutralSecondary}`,\n\n '& td': {\n background: 'transparent',\n border: `1px solid ${theme.palette.neutralSecondary}`,\n wordBreak: 'normal',\n padding: '0.125rem 0.25rem',\n verticalAlign: 'top'\n }\n }\n }\n });\n};\n\n/\n @private\n /\nexport const richTextActionButtonsStackStyle = mergeStyles({\n paddingRight: `0.125rem`\n});\n\n/\n @private\n /\nexport const richTextActionButtonsStyle = mergeStyles({\n height: '2.25rem',\n width: '2.25rem',\n margin: 'auto'\n});\n\n/\n @private\n /\nexport const richTextActionButtonsDividerStyle = (theme: Theme): string => {\n return mergeStyles({\n color: theme.palette.neutralQuaternaryAlt,\n margin: '0.375rem -0.5rem 0 -0.5rem',\n backgroundColor: 'transparent'\n });\n};\n\n/\n @private\n /\nexport const ribbonOverflowButtonStyle = (theme: Theme): Partial<IContextualMenuStyles> => {\n return {\n subComponentStyles: {\n menuItem: {\n icon: { color: theme.palette.neutralPrimary, paddingTop: '0.5rem' },\n root: ribbonOverflowButtonRootStyles(theme)\n },\n callout: {}\n }\n };\n};\n\nconst ribbonOverflowButtonRootStyles = (theme: Theme): IStyle => {\n return {\n selectors: {\n // Icon's color doesn't work here because of the specificity\n '&:hover': {\n selectors: {\n '.ms-ContextualMenu-icon': {\n color: theme.palette.neutralPrimary\n }\n }\n },\n '.ribbon-table-button-regular-icon': {\n display: 'inline-block',\n margin: '-0.25rem 0.25rem 0 0.25rem',\n width: '1.25rem',\n height: '1.25rem'\n },\n '.ribbon-table-button-filled-icon': {\n display: 'none'\n }\n }\n };\n};\n\nconst ribbonButtonRootStyles = (iconColor: string, hoverIconColor: string): IStyle => {\n return {\n backgroundColor: 'transparent',\n selectors: {\n // media query applies only if the device allows real hover interactions\n // and hover styles are not applied on touch- only devices where the hover state cannot be accurately detected\n '@media (hover: hover)': {\n ':hover .ms-Button-icon': {\n color: hoverIconColor\n },\n ':hover .ms-Button-menuIcon': {\n color: hoverIconColor\n }\n },\n // the classes needs here to apply to styles for icons because of the specificity\n '.ms-Button-icon': {\n color: iconColor\n },\n '.ms-Button-menuIcon': {\n color: iconColor\n }\n }\n };\n};\n\n/\n @private\n /\nexport const toolbarButtonStyle = (theme: Theme): Partial<IButtonStyles> => {\n return {\n icon: { color: theme.palette.neutralPrimary, height: 'auto' },\n menuIcon: { color: theme.palette.neutralPrimary, height: 'auto' },\n root: { minWidth: 'auto', backgroundColor: 'transparent' },\n rootChecked: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),\n // there is a bug for Android where the press action is considered hover sometimes\n rootHovered: ribbonButtonRootStyles(theme.palette.neutralPrimary, theme.palette.themePrimary),\n rootCheckedHovered: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),\n rootCheckedPressed: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),\n rootPressed: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),\n rootExpanded: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),\n rootExpandedHovered: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary)\n };\n};\n\nconst rootRibbonTableButtonStyle = (theme: Theme): IStyle => {\n // merge IStyles props\n return Object.assign({ minWidth: 'auto' }, ribbonTableButtonRootStyles(theme, false));\n};\n\n/\n @private\n /\nexport const toolbarTableButtonStyle = (theme: Theme): Partial<IButtonStyles> => {\n return {\n icon: { height: 'auto' },\n menuIcon: { height: 'auto' },\n root: rootRibbonTableButtonStyle(theme),\n rootChecked: ribbonTableButtonRootStyles(theme, true),\n rootHovered: ribbonTableButtonRootStyles(theme, true),\n rootCheckedHovered: ribbonTableButtonRootStyles(theme, true),\n rootCheckedPressed: ribbonTableButtonRootStyles(theme, true),\n rootPressed: ribbonTableButtonRootStyles(theme, true),\n rootExpanded: ribbonTableButtonRootStyles(theme, true),\n rootExpandedHovered: ribbonTableButtonRootStyles(theme, true)\n };\n};\nconst ribbonTableButtonRootStyles = (theme: Theme, isSelected: boolean): IStyle => {\n return {\n backgroundColor: 'transparent',\n selectors: {\n '.ribbon-table-button-regular-icon': {\n width: '1.25rem',\n height: '1.25rem',\n margin: '-0.25rem 0.25rem 0 0.25rem',\n color: theme.palette.neutralPrimary,\n display: isSelected ? 'none' : 'inline-block'\n },\n '.ribbon-table-button-filled-icon': {\n width: '1.25rem',\n height: '1.25rem',\n margin: '-0.25rem 0.25rem 0 0.25rem',\n color: theme.palette.themePrimary,\n display: isSelected ? 'inline-block' : 'none'\n }\n }\n };\n};\n\n/\n @private\n /\nexport const ribbonDividerStyle = (theme: Theme): string => {\n return mergeStyles({\n color: theme.palette.neutralQuaternaryAlt,\n margin: '0 -0.5rem',\n paddingTop: '0.5rem'\n });\n};\n\n/\n @private\n /\nexport const richTextToolbarStyle: Partial<ICommandBarStyles> = {\n // Override for the default white color of the Ribbon component\n root: { backgroundColor: 'transparent', padding: '0px' }\n};\n\n/\n @private\n /\nexport const richTextFormatButtonIconStyle = (theme: Theme, isSelected: boolean): string => {\n return mergeStyles(editorTextBoxButtonStyle, {\n color: isSelected ? theme.palette.themePrimary : theme.palette.neutralSecondary\n });\n};\n\n/\n @private\n /\nexport const editBoxRichTextEditorStyle = (): RichTextEditorStyleProps => {\n return {\n minHeight: '2.25rem',\n maxHeight: '8rem'\n };\n};\n\n/\n @private\n /\nexport const sendBoxRichTextEditorStyle = (isExpanded: boolean): RichTextEditorStyleProps => {\n return {\n minHeight: isExpanded ? '4rem' : '1.25rem',\n maxHeight: '8rem'\n };\n};\n\n/\n @private\n /\nexport const insertTableMenuCellButtonStyles = (theme: Theme): IStyle => {\n return {\n width: '16px',\n height: '16px',\n border: `solid 1px ${theme.palette.neutralTertiaryAlt}`,\n cursor: 'pointer',\n background: 'transparent'\n };\n};\n\n/\n @private\n /\nexport const insertTableMenuCellButtonSelectedStyles = (theme: Theme): IStyle => {\n return {\n background: theme.palette.themePrimary\n };\n};\n\n/\n @private\n /\nexport const insertTableMenuTablePane = mergeStyles({\n padding: '8px 10px 12px 10px',\n boxSizing: 'content-box',\n minWidth: 'auto'\n});\n\n/\n @private\n /\nexport const insertTableMenuFocusZone = (theme: Theme): string => {\n return mergeStyles({\n display: 'inline-grid',\n gridTemplateColumns: 'auto auto auto auto auto',\n border: `solid 1px ${theme.palette.neutralTertiaryAlt}`\n });\n};\n\n/\n @private\n /\nexport const insertTableMenuTitleStyles = mergeStyles({\n width: '100%',\n height: '1rem',\n fontSize: '0.75rem',\n marginBottom: '0.5rem'\n});\n\n/\n @private\n */\nexport const tableContextMenuIconStyles = mergeStyles({\n marginTop: '0.375rem'\n});\n"]}

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

@@ -42,6 +42,10 @@ export declare const editorTextBoxButtonStyle: IStyle;
  * @private
  */
 export declare const attachmentUploadCardsStyles: string;
+/**
+ * @private
+ */
+export declare const useV9CustomStyles: () => Record<"clearBackground", string>;
 /**
  * @private
  */

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

@@ -1,6 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 import { mergeStyles } from '@fluentui/react';
+import { makeStyles } from '@fluentui/react-components';
 /**
  * @private
  */
@@ -54,6 +55,14 @@ export const attachmentUploadCardsStyles = mergeStyles({
     margin: '0 0.25rem 0.25rem 0.25rem',
     overflow: 'auto'
 });
+/**
+ * @private
+ */
+export const useV9CustomStyles = makeStyles({
+    clearBackground: {
+        backgroundColor: 'transparent'
+    }
+});
 /**
  * @private
  */