@azure/communication-react 1.15.0-beta.2 → 1.15.0

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

@@ -2,7 +2,7 @@ import { IContextualMenuProps, IStyle } from '@fluentui/react';
 import React from 'react';
 import { BaseCustomStyles, OnRenderAvatarCallback } from '../types';
 import { RaisedHand } from '../types';
-import { ParticipantState } from '../types';
+import { ReactionResources } from '../types/ReactionTypes';
 /**
  * Strings of {@link VideoTile} that can be overridden.
  * @beta
@@ -44,6 +44,10 @@ export interface VideoTileProps {
     userId?: string;
     /** Component with the video stream. */
     renderElement?: JSX.Element | null;
+    /**
+     * Overlay component responsible for rendering reaction
+     */
+    overlay?: JSX.Element | null;
     /** Determines if the video is mirrored or not. */
     isMirrored?: boolean;
     /** Custom render Component function for no video is available. Render a Persona Icon if undefined. */
@@ -96,12 +100,6 @@ export interface VideoTileProps {
     isSpeaking?: boolean;
     /** Whether the participant is raised hand. Show a indicator (border) and icon with order */
     raisedHand?: RaisedHand;
-    /**
-     * The call connection state of the participant.
-     * For example, `Hold` means the participant is on hold.
-     */
-    participantState?: ParticipantState;
-    strings?: VideoTileStrings;
     /**
      * Display custom menu items in the VideoTile's contextual menu.
      * Uses Fluent UI ContextualMenu.
@@ -112,6 +110,14 @@ export interface VideoTileProps {
      * Callback triggered by video tile on touch and hold.
      */
     onLongTouch?: () => void;
+    /**
+     * If true, the video tile will show the spotlighted icon.
+     */
+    isSpotlighted?: boolean;
+    /**
+     * Reactions resources' url and metadata.
+     */
+    reactionResources?: ReactionResources;
 }
 /**
  * A component to render the video stream for a single call participant.

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

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 import { DirectionalHint, Icon, IconButton, mergeStyles, Persona, Stack, Text } from '@fluentui/react';
-import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useIdentifiers } from '../identifiers';
 import { useLocale } from '../localization';
 import { useTheme } from '../theming';
@@ -64,7 +64,11 @@ const VideoTileMoreOptionsButton = (props) => {
  * @public
  */
 export const VideoTile = (props) => {
-    const { children, displayName, initialsName, isMirrored, isMuted, isPinned, onRenderPlaceholder, renderElement, showLabel = true, showMuteIndicator = true, styles, userId, noVideoAvailableAriaLabel, isSpeaking, raisedHand, personaMinSize = DEFAULT_PERSONA_MIN_SIZE_PX, personaMaxSize = DEFAULT_PERSONA_MAX_SIZE_PX, contextualMenu } = props;
+    const { children, displayName, initialsName, isMirrored, isMuted, 
+    /* @conditional-compile-remove(spotlight) */
+    isSpotlighted, isPinned, onRenderPlaceholder, renderElement, 
+    /* @conditional-compile-remove(reaction) */
+    overlay: reactionOverlay, showLabel = true, showMuteIndicator = true, styles, userId, noVideoAvailableAriaLabel, isSpeaking, raisedHand, personaMinSize = DEFAULT_PERSONA_MIN_SIZE_PX, personaMaxSize = DEFAULT_PERSONA_MAX_SIZE_PX, contextualMenu } = props;
     const [isHovered, setIsHovered] = useState(false);
     const [isFocused, setIsFocused] = useState(false);
     // need to set a default otherwise the resizeObserver will get stuck in an infinite loop.
@@ -88,6 +92,36 @@ export const VideoTile = (props) => {
         const currentObserver = observer.current;
         return () => currentObserver.disconnect();
     }, [videoTileRef]);
+    /* @conditional-compile-remove(ppt-live) */
+    // TODO: Remove after calling sdk fix the keybaord focus
+    useEffect(() => {
+        // PPTLive display name is undefined, return as it is not screen share
+        if (displayName !== undefined) {
+            return;
+        }
+        let observer;
+        if (videoTileRef.current) {
+            observer = new MutationObserver(mutationsList => {
+                for (const mutation of mutationsList) {
+                    if (mutation.type === 'childList') {
+                        const iframe = document.querySelector('iframe');
+                        if (iframe) {
+                            if (!iframe.getAttribute('tabIndex')) {
+                                iframe.setAttribute('tabIndex', '-1');
+                            }
+                        }
+                    }
+                }
+            });
+            observer.observe(videoTileRef.current, {
+                childList: true,
+                subtree: true
+            });
+        }
+        return () => {
+            observer === null || observer === void 0 ? void 0 : observer.disconnect();
+        };
+    }, [displayName, renderElement]);
     const useLongPressProps = useMemo(() => {
         return {
             onLongPress: () => {
@@ -147,8 +181,9 @@ export const VideoTile = (props) => {
             isVideoRendered ? React.createElement(Stack, { className: mergeStyles(videoContainerStyles, isMirrored && {
                     transform: 'scaleX(-1)'
                 }, styles === null || styles === void 0 ? void 0 : styles.videoContainer) }, renderElement) : React.createElement(Stack, { className: mergeStyles(videoContainerStyles, {
-                    opacity: participantStateString || /* @conditional-compile-remove(PSTN-calls) */ props.participantState === 'Idle' ? 0.4 : 1
-                }) }, onRenderPlaceholder ? onRenderPlaceholder(userId !== null && userId !== void 0 ? userId : '', placeholderOptions, DefaultPlaceholder) : React.createElement(DefaultPlaceholder, Object.assign({}, placeholderOptions))),
+                    opacity: participantStateString ? 0.4 : 1
+                }) }, onRenderPlaceholder ? onRenderPlaceholder(userId !== null && userId !== void 0 ? userId : '', placeholderOptions, DefaultPlaceholder) : React.createElement(DefaultPlaceholder, Object.assign({}, placeholderOptions))), /* @conditional-compile-remove(reaction) */
+            reactionOverlay,
             (canShowLabel || participantStateString) && React.createElement(Stack, { horizontal: true, className: tileInfoContainerStyle, tokens: tileInfoContainerTokens },
                 React.createElement(Stack, { horizontal: true, className: tileInfoStyle },
                     canShowLabel && React.createElement(Text, { className: mergeStyles(displayNameStyle), title: displayName, style: {
@@ -156,7 +191,9 @@ export const VideoTile = (props) => {
                         }, "data-ui-id": "video-tile-display-name" }, displayName),
                     participantStateString && React.createElement(Text, { className: mergeStyles(participantStateStringStyles(theme)) }, bracketedParticipantString(participantStateString, !!canShowLabel)),
                     showMuteIndicator && isMuted && React.createElement(Stack, { className: mergeStyles(iconContainerStyle) },
-                        React.createElement(Icon, { iconName: "VideoTileMicOff" })),
+                        React.createElement(Icon, { iconName: "VideoTileMicOff" })), /* @conditional-compile-remove(spotlight) */
+                    isSpotlighted && React.createElement(Stack, { className: mergeStyles(iconContainerStyle) },
+                        React.createElement(Icon, { iconName: "VideoTileSpotlighted" })),
                     isPinned && React.createElement(Stack, { className: mergeStyles(iconContainerStyle) },
                         React.createElement(Icon, { iconName: "VideoTilePinned", className: mergeStyles(pinIconStyle) })),
                     React.createElement(VideoTileMoreOptionsButton, { contextualMenu: contextualMenu, canShowContextMenuButton: canShowContextMenuButton }))),
@@ -170,12 +207,6 @@ export const VideoTile = (props) => {
                     React.createElement(RaisedHandIcon, null)))));
 };
 const participantStateStringTrampoline = (props, locale) => {
-    /* @conditional-compile-remove(one-to-n-calling) */
-    /* @conditional-compile-remove(PSTN-calls) */
-    const strings = Object.assign(Object.assign({}, locale.strings.videoTile), props.strings);
-    /* @conditional-compile-remove(one-to-n-calling) */
-    /* @conditional-compile-remove(PSTN-calls) */
-    return props.participantState === 'EarlyMedia' || props.participantState === 'Ringing' ? strings === null || strings === void 0 ? void 0 : strings.participantStateRinging : props.participantState === 'Hold' ? strings === null || strings === void 0 ? void 0 : strings.participantStateHold : undefined;
     return undefined;
 };
 const tileInfoContainerTokens = {

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

@@ -1 +1 @@
-{"version":3,"file":"VideoTile.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/VideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DirectionalHint, Icon, IconButton, IContextualMenuProps, IStyle, mergeStyles, Persona, Stack, Text } from '@fluentui/react';\nimport React, { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { ComponentLocale, useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles, CustomAvatarOptions, OnRenderAvatarCallback } from '../types';\nimport { CallingTheme } from '../theming';\nimport { RaisedHand } from '../types';\nimport { RaisedHandIcon } from './assets/RaisedHandIcon';\n/* @conditional-compile-remove(one-to-n-calling) */\n/* @conditional-compile-remove(PSTN-calls) */\nimport { ParticipantState } from '../types';\nimport { disabledVideoHint, displayNameStyle, iconContainerStyle, overlayContainerStyles, rootStyles, videoContainerStyles, videoHint, tileInfoContainerStyle, participantStateStringStyles } from './styles/VideoTile.styles';\nimport { getVideoTileOverrideColor } from './utils/videoTileStylesUtils';\nimport { pinIconStyle } from './styles/VideoTile.styles';\nimport useLongPress from './utils/useLongPress';\nimport { moreButtonStyles } from './styles/VideoTile.styles';\nimport { raiseHandContainerStyles } from './styles/VideoTile.styles';\n/**\n * Strings of {@link VideoTile} that can be overridden.\n * @beta\n */\nexport interface VideoTileStrings {\n  participantStateRinging: string;\n  participantStateHold: string;\n}\n\n/**\n * Fluent styles for {@link VideoTile}.\n *\n * @public\n */\nexport interface VideoTileStylesProps extends BaseCustomStyles {\n  /** Styles for video container. */\n  videoContainer?: IStyle;\n  /** Styles for container overlayed on the video container. */\n  overlayContainer?: IStyle;\n  /** Styles for displayName on the video container. */\n  displayNameContainer?: IStyle;\n}\n\n/**\n * Props for {@link VideoTile}.\n *\n * @public\n */\nexport interface VideoTileProps {\n  /** React Child components. Child Components will show as overlay component in the VideoTile. */\n  children?: React.ReactNode;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <VideoTile styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: VideoTileStylesProps;\n  /** user id for the VideoTile placeholder. */\n  userId?: string;\n  /** Component with the video stream. */\n  renderElement?: JSX.Element | null;\n  /** Determines if the video is mirrored or not. */\n  isMirrored?: boolean;\n  /** Custom render Component function for no video is available. Render a Persona Icon if undefined. */\n  onRenderPlaceholder?: OnRenderAvatarCallback;\n  /**\n   * Show label on the VideoTile\n   * @defaultValue true\n   */\n  showLabel?: boolean;\n  /**\n   * Whether to display a mute icon beside the user's display name.\n   * @defaultValue true\n   */\n  showMuteIndicator?: boolean;\n  /**\n   * Whether the video is muted or not.\n   */\n  isMuted?: boolean;\n  /**\n   * If true, the video tile will show the pin icon.\n   */\n  isPinned?: boolean;\n  /**\n   * Display Name of the Participant to be shown in the label.\n   * @remarks `displayName` is used to generate avatar initials if `initialsName` is not provided.\n   */\n  displayName?: string;\n  /**\n   * Name of the participant used to generate initials. For example, a name `John Doe` will display `JD` as initials.\n   * @remarks `displayName` is used if this property is not specified.\n   */\n  initialsName?: string;\n  /**\n   * Minimum size of the persona avatar in px.\n   * The persona avatar is the default placeholder shown when no video stream is available.\n   * For more information see https://developer.microsoft.com/en-us/fluentui#/controls/web/persona\n   * @defaultValue 32px\n   */\n  personaMinSize?: number;\n  /**\n   * Maximum size of the personal avatar in px.\n   * The persona avatar is the default placeholder shown when no video stream is available.\n   * For more information see https://developer.microsoft.com/en-us/fluentui#/controls/web/persona\n   * @defaultValue 100px\n   */\n  personaMaxSize?: number;\n  /** Optional property to set the aria label of the video tile if there is no available stream. */\n  noVideoAvailableAriaLabel?: string;\n  /** Whether the participant in the videoTile is speaking. Shows a speaking indicator (border). */\n  isSpeaking?: boolean;\n\n  /** Whether the participant is raised hand. Show a indicator (border) and icon with order */\n  raisedHand?: RaisedHand;\n\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * The call connection state of the participant.\n   * For example, `Hold` means the participant is on hold.\n   */\n  participantState?: ParticipantState;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  strings?: VideoTileStrings;\n  /**\n   * Display custom menu items in the VideoTile's contextual menu.\n   * Uses Fluent UI ContextualMenu.\n   * An ellipses icon will be displayed to open the contextual menu if this prop is defined.\n   */\n  contextualMenu?: IContextualMenuProps;\n  /**\n   * Callback triggered by video tile on touch and hold.\n   */\n  onLongTouch?: () => void;\n}\n\n// Coin max size is set to PersonaSize.size100\nconst DEFAULT_PERSONA_MAX_SIZE_PX = 100;\n// Coin min size is set PersonaSize.size32\nconst DEFAULT_PERSONA_MIN_SIZE_PX = 32;\nconst DefaultPlaceholder = (props: CustomAvatarOptions): JSX.Element => {\n  const {\n    text,\n    noVideoAvailableAriaLabel,\n    coinSize,\n    hidePersonaDetails\n  } = props;\n  return <Stack className={mergeStyles({\n    position: 'absolute',\n    height: '100%',\n    width: '100%'\n  })}>\n      <Stack styles={defaultPersonaStyles}>\n        {coinSize && <Persona coinSize={coinSize} hidePersonaDetails={hidePersonaDetails} text={text ?? ''} initialsTextColor=\"white\" aria-label={noVideoAvailableAriaLabel ?? ''} showOverflowTooltip={false} />}\n      </Stack>\n    </Stack>;\n};\nconst defaultPersonaStyles = {\n  root: {\n    margin: 'auto',\n    maxHeight: '100%'\n  }\n};\nconst videoTileMoreMenuIconProps = {\n  iconName: undefined,\n  style: {\n    display: 'none'\n  }\n};\nconst videoTileMoreMenuProps = {\n  directionalHint: DirectionalHint.topLeftEdge,\n  isBeakVisible: false,\n  styles: {\n    container: {\n      maxWidth: '8rem'\n    }\n  }\n};\nconst VideoTileMoreOptionsButton = (props: {\n  contextualMenu?: IContextualMenuProps;\n  canShowContextMenuButton: boolean;\n}): JSX.Element => {\n  const {\n    contextualMenu,\n    canShowContextMenuButton\n  } = props;\n  if (!contextualMenu) {\n    return <></>;\n  }\n  const optionsIcon = canShowContextMenuButton ? 'VideoTileMoreOptions' : undefined;\n  return <IconButton data-ui-id=\"video-tile-more-options-button\" styles={moreButtonStyles} menuIconProps={videoTileMoreMenuIconProps} menuProps={{\n    ...videoTileMoreMenuProps,\n    ...contextualMenu\n  }} iconProps={{\n    iconName: optionsIcon\n  }} />;\n};\n\n/**\n * A component to render the video stream for a single call participant.\n *\n * Use with {@link GridLayout} in a {@link VideoGallery}.\n *\n * @public\n */\nexport const VideoTile = (props: VideoTileProps): JSX.Element => {\n  const {\n    children,\n    displayName,\n    initialsName,\n    isMirrored,\n    isMuted,\n    isPinned,\n    onRenderPlaceholder,\n    renderElement,\n    showLabel = true,\n    showMuteIndicator = true,\n    styles,\n    userId,\n    noVideoAvailableAriaLabel,\n    isSpeaking,\n    raisedHand,\n    personaMinSize = DEFAULT_PERSONA_MIN_SIZE_PX,\n    personaMaxSize = DEFAULT_PERSONA_MAX_SIZE_PX,\n    contextualMenu\n  } = props;\n  const [isHovered, setIsHovered] = useState<boolean>(false);\n  const [isFocused, setIsFocused] = useState<boolean>(false);\n  // need to set a default otherwise the resizeObserver will get stuck in an infinite loop.\n  const [personaSize, setPersonaSize] = useState<number>(1);\n  const videoTileRef = useRef<HTMLDivElement>(null);\n  const locale = useLocale();\n  const theme = useTheme();\n  const isVideoRendered = !!renderElement;\n  const observer = useRef(new ResizeObserver((entries): void => {\n    const {\n      width,\n      height\n    } = entries[0].contentRect;\n    const personaCalcSize = Math.min(width, height) / 3;\n    // we only want to set the persona size if it has changed\n    if (personaCalcSize !== personaSize) {\n      setPersonaSize(Math.max(Math.min(personaCalcSize, personaMaxSize), personaMinSize));\n    }\n  }));\n  useLayoutEffect(() => {\n    if (videoTileRef.current) {\n      observer.current.observe(videoTileRef.current);\n    }\n    const currentObserver = observer.current;\n    return () => currentObserver.disconnect();\n  }, [videoTileRef]);\n  const useLongPressProps = useMemo(() => {\n    return {\n      onLongPress: () => {\n        props.onLongTouch?.();\n      },\n      touchEventsOnly: true\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [props.onLongTouch]);\n  const longPressHandlers = useLongPress(useLongPressProps);\n  const hoverHandlers = useMemo(() => {\n    return {\n      onMouseEnter: () => setIsHovered(true),\n      onMouseLeave: () => setIsHovered(false),\n      onFocus: () => setIsFocused(true),\n      onBlur: () => setIsFocused(false)\n    };\n  }, []);\n  const placeholderOptions = {\n    userId,\n    text: initialsName ?? displayName,\n    noVideoAvailableAriaLabel,\n    coinSize: personaSize,\n    styles: defaultPersonaStyles,\n    hidePersonaDetails: true\n  };\n  const videoHintWithBorderRadius = mergeStyles(videoHint, {\n    borderRadius: theme.effects.roundedCorner4\n  });\n  const tileInfoStyle = useMemo(() => mergeStyles(isVideoRendered ? videoHintWithBorderRadius : disabledVideoHint, getVideoTileOverrideColor(isVideoRendered, theme, 'neutralPrimary'), styles?.displayNameContainer), [isVideoRendered, videoHintWithBorderRadius, theme, styles?.displayNameContainer]);\n  const ids = useIdentifiers();\n  const canShowLabel = showLabel && (displayName || showMuteIndicator && isMuted);\n  const participantStateString = participantStateStringTrampoline(props, locale);\n  const canShowContextMenuButton = isHovered || isFocused;\n  let raisedHandBackgroundColor = '';\n  const callingPalette = ((theme as unknown) as CallingTheme).callingPalette;\n  raisedHandBackgroundColor = callingPalette.raiseHandGold;\n  return <Stack data-ui-id={ids.videoTile} className={mergeStyles(rootStyles, {\n    background: theme.palette.neutralLighter,\n    borderRadius: theme.effects.roundedCorner4\n  }, (isSpeaking || raisedHand) && {\n    '&::after': {\n      content: `''`,\n      position: 'absolute',\n      border: `0.25rem solid ${isSpeaking ? theme.palette.themePrimary : raisedHandBackgroundColor}`,\n      borderRadius: theme.effects.roundedCorner4,\n      width: '100%',\n      height: '100%',\n      pointerEvents: 'none'\n    }\n  }, styles?.root)} {...longPressHandlers}>\n      <div ref={videoTileRef} style={{\n      width: '100%',\n      height: '100%'\n    }} {...hoverHandlers} data-is-focusable={true}>\n        {isVideoRendered ? <Stack className={mergeStyles(videoContainerStyles, isMirrored && {\n        transform: 'scaleX(-1)'\n      }, styles?.videoContainer)}>\n            {renderElement}\n          </Stack> : <Stack className={mergeStyles(videoContainerStyles, {\n        opacity: participantStateString || /* @conditional-compile-remove(PSTN-calls) */props.participantState === 'Idle' ? 0.4 : 1\n      })}>\n            {onRenderPlaceholder ? onRenderPlaceholder(userId ?? '', placeholderOptions, DefaultPlaceholder) : <DefaultPlaceholder {...placeholderOptions} />}\n          </Stack>}\n        {}\n        {(canShowLabel || participantStateString) && <Stack horizontal className={tileInfoContainerStyle} tokens={tileInfoContainerTokens}>\n            <Stack horizontal className={tileInfoStyle}>\n              {canShowLabel && <Text className={mergeStyles(displayNameStyle)} title={displayName} style={{\n            color: participantStateString ? theme.palette.neutralSecondary : 'inherit'\n          }} data-ui-id=\"video-tile-display-name\">\n                  {displayName}\n                </Text>}\n              {participantStateString && <Text className={mergeStyles(participantStateStringStyles(theme))}>\n                  {bracketedParticipantString(participantStateString, !!canShowLabel)}\n                </Text>}\n              {showMuteIndicator && isMuted && <Stack className={mergeStyles(iconContainerStyle)}>\n                  <Icon iconName=\"VideoTileMicOff\" />\n                </Stack>}\n              {}\n              {isPinned && <Stack className={mergeStyles(iconContainerStyle)}>\n                  <Icon iconName=\"VideoTilePinned\" className={mergeStyles(pinIconStyle)} />\n                </Stack>}\n              <VideoTileMoreOptionsButton contextualMenu={contextualMenu} canShowContextMenuButton={canShowContextMenuButton} />\n            </Stack>\n          </Stack>}\n\n        {children && <Stack className={mergeStyles(overlayContainerStyles, styles?.overlayContainer)}>{children}</Stack>}\n        {raisedHand && <Stack horizontal={true} tokens={{\n        childrenGap: '0.2rem'\n      }} className={raiseHandContainerStyles(theme, !canShowLabel)}>\n            <Stack.Item>\n              <Text>{raisedHand.raisedHandOrderPosition}</Text>\n            </Stack.Item>\n            <Stack.Item>\n              <RaisedHandIcon />\n            </Stack.Item>\n          </Stack>}\n      </div>\n    </Stack>;\n};\nconst participantStateStringTrampoline = (props: VideoTileProps, locale: ComponentLocale): string | undefined => {\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  const strings = {\n    ...locale.strings.videoTile,\n    ...props.strings\n  };\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  return props.participantState === 'EarlyMedia' || props.participantState === 'Ringing' ? strings?.participantStateRinging : props.participantState === 'Hold' ? strings?.participantStateHold : undefined;\n  return undefined;\n};\nconst tileInfoContainerTokens = {\n  // A horizontal Stack sets the left margin to 0 for all it's children.\n  // We need to allow the children to set their own margins\n  childrenGap: 'none'\n};\nconst bracketedParticipantString = (participantString: string, withBrackets: boolean): string => {\n  return withBrackets ? `(${participantString})` : participantString;\n};"]}
+{"version":3,"file":"VideoTile.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/VideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DirectionalHint, Icon, IconButton, IContextualMenuProps, IStyle, mergeStyles, Persona, Stack, Text } from '@fluentui/react';\nimport React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { ComponentLocale, useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles, CustomAvatarOptions, OnRenderAvatarCallback } from '../types';\nimport { CallingTheme } from '../theming';\nimport { RaisedHand } from '../types';\nimport { RaisedHandIcon } from './assets/RaisedHandIcon';\nimport { disabledVideoHint, displayNameStyle, iconContainerStyle, overlayContainerStyles, rootStyles, videoContainerStyles, videoHint, tileInfoContainerStyle, participantStateStringStyles } from './styles/VideoTile.styles';\nimport { getVideoTileOverrideColor } from './utils/videoTileStylesUtils';\nimport { pinIconStyle } from './styles/VideoTile.styles';\nimport useLongPress from './utils/useLongPress';\nimport { moreButtonStyles } from './styles/VideoTile.styles';\nimport { raiseHandContainerStyles } from './styles/VideoTile.styles';\n/* @conditional-compile-remove(reaction) */\nimport { ReactionResources } from '../types/ReactionTypes';\n\n/**\n * Strings of {@link VideoTile} that can be overridden.\n * @beta\n */\nexport interface VideoTileStrings {\n  participantStateRinging: string;\n  participantStateHold: string;\n}\n\n/**\n * Fluent styles for {@link VideoTile}.\n *\n * @public\n */\nexport interface VideoTileStylesProps extends BaseCustomStyles {\n  /** Styles for video container. */\n  videoContainer?: IStyle;\n  /** Styles for container overlayed on the video container. */\n  overlayContainer?: IStyle;\n  /** Styles for displayName on the video container. */\n  displayNameContainer?: IStyle;\n}\n\n/**\n * Props for {@link VideoTile}.\n *\n * @public\n */\nexport interface VideoTileProps {\n  /** React Child components. Child Components will show as overlay component in the VideoTile. */\n  children?: React.ReactNode;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <VideoTile styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: VideoTileStylesProps;\n  /** user id for the VideoTile placeholder. */\n  userId?: string;\n  /** Component with the video stream. */\n  renderElement?: JSX.Element | null;\n  /* @conditional-compile-remove(reaction) */\n  /**\n   * Overlay component responsible for rendering reaction\n   */\n  overlay?: JSX.Element | null;\n  /** Determines if the video is mirrored or not. */\n  isMirrored?: boolean;\n  /** Custom render Component function for no video is available. Render a Persona Icon if undefined. */\n  onRenderPlaceholder?: OnRenderAvatarCallback;\n  /**\n   * Show label on the VideoTile\n   * @defaultValue true\n   */\n  showLabel?: boolean;\n  /**\n   * Whether to display a mute icon beside the user's display name.\n   * @defaultValue true\n   */\n  showMuteIndicator?: boolean;\n  /**\n   * Whether the video is muted or not.\n   */\n  isMuted?: boolean;\n  /**\n   * If true, the video tile will show the pin icon.\n   */\n  isPinned?: boolean;\n  /**\n   * Display Name of the Participant to be shown in the label.\n   * @remarks `displayName` is used to generate avatar initials if `initialsName` is not provided.\n   */\n  displayName?: string;\n  /**\n   * Name of the participant used to generate initials. For example, a name `John Doe` will display `JD` as initials.\n   * @remarks `displayName` is used if this property is not specified.\n   */\n  initialsName?: string;\n  /**\n   * Minimum size of the persona avatar in px.\n   * The persona avatar is the default placeholder shown when no video stream is available.\n   * For more information see https://developer.microsoft.com/en-us/fluentui#/controls/web/persona\n   * @defaultValue 32px\n   */\n  personaMinSize?: number;\n  /**\n   * Maximum size of the personal avatar in px.\n   * The persona avatar is the default placeholder shown when no video stream is available.\n   * For more information see https://developer.microsoft.com/en-us/fluentui#/controls/web/persona\n   * @defaultValue 100px\n   */\n  personaMaxSize?: number;\n  /** Optional property to set the aria label of the video tile if there is no available stream. */\n  noVideoAvailableAriaLabel?: string;\n  /** Whether the participant in the videoTile is speaking. Shows a speaking indicator (border). */\n  isSpeaking?: boolean;\n\n  /** Whether the participant is raised hand. Show a indicator (border) and icon with order */\n  raisedHand?: RaisedHand;\n  /**\n   * Display custom menu items in the VideoTile's contextual menu.\n   * Uses Fluent UI ContextualMenu.\n   * An ellipses icon will be displayed to open the contextual menu if this prop is defined.\n   */\n  contextualMenu?: IContextualMenuProps;\n  /**\n   * Callback triggered by video tile on touch and hold.\n   */\n  onLongTouch?: () => void;\n  /* @conditional-compile-remove(spotlight) */\n  /**\n   * If true, the video tile will show the spotlighted icon.\n   */\n  isSpotlighted?: boolean;\n  /* @conditional-compile-remove(reaction) */\n  /**\n   * Reactions resources' url and metadata.\n   */\n  reactionResources?: ReactionResources;\n}\n\n// Coin max size is set to PersonaSize.size100\nconst DEFAULT_PERSONA_MAX_SIZE_PX = 100;\n// Coin min size is set PersonaSize.size32\nconst DEFAULT_PERSONA_MIN_SIZE_PX = 32;\nconst DefaultPlaceholder = (props: CustomAvatarOptions): JSX.Element => {\n  const {\n    text,\n    noVideoAvailableAriaLabel,\n    coinSize,\n    hidePersonaDetails\n  } = props;\n  return <Stack className={mergeStyles({\n    position: 'absolute',\n    height: '100%',\n    width: '100%'\n  })}>\n      <Stack styles={defaultPersonaStyles}>\n        {coinSize && <Persona coinSize={coinSize} hidePersonaDetails={hidePersonaDetails} text={text ?? ''} initialsTextColor=\"white\" aria-label={noVideoAvailableAriaLabel ?? ''} showOverflowTooltip={false} />}\n      </Stack>\n    </Stack>;\n};\nconst defaultPersonaStyles = {\n  root: {\n    margin: 'auto',\n    maxHeight: '100%'\n  }\n};\nconst videoTileMoreMenuIconProps = {\n  iconName: undefined,\n  style: {\n    display: 'none'\n  }\n};\nconst videoTileMoreMenuProps = {\n  directionalHint: DirectionalHint.topLeftEdge,\n  isBeakVisible: false,\n  styles: {\n    container: {\n      maxWidth: '8rem'\n    }\n  }\n};\nconst VideoTileMoreOptionsButton = (props: {\n  contextualMenu?: IContextualMenuProps;\n  canShowContextMenuButton: boolean;\n}): JSX.Element => {\n  const {\n    contextualMenu,\n    canShowContextMenuButton\n  } = props;\n  if (!contextualMenu) {\n    return <></>;\n  }\n  const optionsIcon = canShowContextMenuButton ? 'VideoTileMoreOptions' : undefined;\n  return <IconButton data-ui-id=\"video-tile-more-options-button\" styles={moreButtonStyles} menuIconProps={videoTileMoreMenuIconProps} menuProps={{\n    ...videoTileMoreMenuProps,\n    ...contextualMenu\n  }} iconProps={{\n    iconName: optionsIcon\n  }} />;\n};\n\n/**\n * A component to render the video stream for a single call participant.\n *\n * Use with {@link GridLayout} in a {@link VideoGallery}.\n *\n * @public\n */\nexport const VideoTile = (props: VideoTileProps): JSX.Element => {\n  const {\n    children,\n    displayName,\n    initialsName,\n    isMirrored,\n    isMuted,\n    /* @conditional-compile-remove(spotlight) */\n    isSpotlighted,\n    isPinned,\n    onRenderPlaceholder,\n    renderElement,\n    /* @conditional-compile-remove(reaction) */\n    overlay: reactionOverlay,\n    showLabel = true,\n    showMuteIndicator = true,\n    styles,\n    userId,\n    noVideoAvailableAriaLabel,\n    isSpeaking,\n    raisedHand,\n    personaMinSize = DEFAULT_PERSONA_MIN_SIZE_PX,\n    personaMaxSize = DEFAULT_PERSONA_MAX_SIZE_PX,\n    contextualMenu\n  } = props;\n  const [isHovered, setIsHovered] = useState<boolean>(false);\n  const [isFocused, setIsFocused] = useState<boolean>(false);\n  // need to set a default otherwise the resizeObserver will get stuck in an infinite loop.\n  const [personaSize, setPersonaSize] = useState<number>(1);\n  const videoTileRef = useRef<HTMLDivElement>(null);\n  const locale = useLocale();\n  const theme = useTheme();\n  const isVideoRendered = !!renderElement;\n  const observer = useRef(new ResizeObserver((entries): void => {\n    const {\n      width,\n      height\n    } = entries[0].contentRect;\n    const personaCalcSize = Math.min(width, height) / 3;\n    // we only want to set the persona size if it has changed\n    if (personaCalcSize !== personaSize) {\n      setPersonaSize(Math.max(Math.min(personaCalcSize, personaMaxSize), personaMinSize));\n    }\n  }));\n  useLayoutEffect(() => {\n    if (videoTileRef.current) {\n      observer.current.observe(videoTileRef.current);\n    }\n    const currentObserver = observer.current;\n    return () => currentObserver.disconnect();\n  }, [videoTileRef]);\n\n  /* @conditional-compile-remove(ppt-live) */\n  // TODO: Remove after calling sdk fix the keybaord focus\n  useEffect(() => {\n    // PPTLive display name is undefined, return as it is not screen share\n    if (displayName !== undefined) {\n      return;\n    }\n    let observer: MutationObserver | undefined;\n    if (videoTileRef.current) {\n      observer = new MutationObserver(mutationsList => {\n        for (const mutation of mutationsList) {\n          if (mutation.type === 'childList') {\n            const iframe = document.querySelector('iframe');\n            if (iframe) {\n              if (!iframe.getAttribute('tabIndex')) {\n                iframe.setAttribute('tabIndex', '-1');\n              }\n            }\n          }\n        }\n      });\n      observer.observe(videoTileRef.current, {\n        childList: true,\n        subtree: true\n      });\n    }\n    return () => {\n      observer?.disconnect();\n    };\n  }, [displayName, renderElement]);\n  const useLongPressProps = useMemo(() => {\n    return {\n      onLongPress: () => {\n        props.onLongTouch?.();\n      },\n      touchEventsOnly: true\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [props.onLongTouch]);\n  const longPressHandlers = useLongPress(useLongPressProps);\n  const hoverHandlers = useMemo(() => {\n    return {\n      onMouseEnter: () => setIsHovered(true),\n      onMouseLeave: () => setIsHovered(false),\n      onFocus: () => setIsFocused(true),\n      onBlur: () => setIsFocused(false)\n    };\n  }, []);\n  const placeholderOptions = {\n    userId,\n    text: initialsName ?? displayName,\n    noVideoAvailableAriaLabel,\n    coinSize: personaSize,\n    styles: defaultPersonaStyles,\n    hidePersonaDetails: true\n  };\n  const videoHintWithBorderRadius = mergeStyles(videoHint, {\n    borderRadius: theme.effects.roundedCorner4\n  });\n  const tileInfoStyle = useMemo(() => mergeStyles(isVideoRendered ? videoHintWithBorderRadius : disabledVideoHint, getVideoTileOverrideColor(isVideoRendered, theme, 'neutralPrimary'), styles?.displayNameContainer), [isVideoRendered, videoHintWithBorderRadius, theme, styles?.displayNameContainer]);\n  const ids = useIdentifiers();\n  const canShowLabel = showLabel && (displayName || showMuteIndicator && isMuted);\n  const participantStateString = participantStateStringTrampoline(props, locale);\n  const canShowContextMenuButton = isHovered || isFocused;\n  let raisedHandBackgroundColor = '';\n  const callingPalette = ((theme as unknown) as CallingTheme).callingPalette;\n  raisedHandBackgroundColor = callingPalette.raiseHandGold;\n  return <Stack data-ui-id={ids.videoTile} className={mergeStyles(rootStyles, {\n    background: theme.palette.neutralLighter,\n    borderRadius: theme.effects.roundedCorner4\n  }, (isSpeaking || raisedHand) && {\n    '&::after': {\n      content: `''`,\n      position: 'absolute',\n      border: `0.25rem solid ${isSpeaking ? theme.palette.themePrimary : raisedHandBackgroundColor}`,\n      borderRadius: theme.effects.roundedCorner4,\n      width: '100%',\n      height: '100%',\n      pointerEvents: 'none'\n    }\n  }, styles?.root)} {...longPressHandlers}>\n      <div ref={videoTileRef} style={{\n      width: '100%',\n      height: '100%'\n    }} {...hoverHandlers} data-is-focusable={true}>\n        {isVideoRendered ? <Stack className={mergeStyles(videoContainerStyles, isMirrored && {\n        transform: 'scaleX(-1)'\n      }, styles?.videoContainer)}>\n            {renderElement}\n          </Stack> : <Stack className={mergeStyles(videoContainerStyles, {\n        opacity: participantStateString ? 0.4 : 1\n      })}>\n            {onRenderPlaceholder ? onRenderPlaceholder(userId ?? '', placeholderOptions, DefaultPlaceholder) : <DefaultPlaceholder {...placeholderOptions} />}\n          </Stack>}\n        {/* @conditional-compile-remove(reaction) */\n      reactionOverlay}\n        {(canShowLabel || participantStateString) && <Stack horizontal className={tileInfoContainerStyle} tokens={tileInfoContainerTokens}>\n            <Stack horizontal className={tileInfoStyle}>\n              {canShowLabel && <Text className={mergeStyles(displayNameStyle)} title={displayName} style={{\n            color: participantStateString ? theme.palette.neutralSecondary : 'inherit'\n          }} data-ui-id=\"video-tile-display-name\">\n                  {displayName}\n                </Text>}\n              {participantStateString && <Text className={mergeStyles(participantStateStringStyles(theme))}>\n                  {bracketedParticipantString(participantStateString, !!canShowLabel)}\n                </Text>}\n              {showMuteIndicator && isMuted && <Stack className={mergeStyles(iconContainerStyle)}>\n                  <Icon iconName=\"VideoTileMicOff\" />\n                </Stack>}\n              {/* @conditional-compile-remove(spotlight) */\n          isSpotlighted && <Stack className={mergeStyles(iconContainerStyle)}>\n                    <Icon iconName=\"VideoTileSpotlighted\" />\n                  </Stack>}\n              {isPinned && <Stack className={mergeStyles(iconContainerStyle)}>\n                  <Icon iconName=\"VideoTilePinned\" className={mergeStyles(pinIconStyle)} />\n                </Stack>}\n              <VideoTileMoreOptionsButton contextualMenu={contextualMenu} canShowContextMenuButton={canShowContextMenuButton} />\n            </Stack>\n          </Stack>}\n\n        {children && <Stack className={mergeStyles(overlayContainerStyles, styles?.overlayContainer)}>{children}</Stack>}\n        {raisedHand && <Stack horizontal={true} tokens={{\n        childrenGap: '0.2rem'\n      }} className={raiseHandContainerStyles(theme, !canShowLabel)}>\n            <Stack.Item>\n              <Text>{raisedHand.raisedHandOrderPosition}</Text>\n            </Stack.Item>\n            <Stack.Item>\n              <RaisedHandIcon />\n            </Stack.Item>\n          </Stack>}\n      </div>\n    </Stack>;\n};\nconst participantStateStringTrampoline = (props: VideoTileProps, locale: ComponentLocale): string | undefined => {\n  return undefined;\n};\nconst tileInfoContainerTokens = {\n  // A horizontal Stack sets the left margin to 0 for all it's children.\n  // We need to allow the children to set their own margins\n  childrenGap: 'none'\n};\nconst bracketedParticipantString = (participantString: string, withBrackets: boolean): string => {\n  return withBrackets ? `(${participantString})` : participantString;\n};"]}

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

@@ -5,14 +5,11 @@ export type { ActiveErrorMessage, ErrorBarProps, ErrorBarStrings, ErrorType } fr
 export { GridLayout } from './GridLayout';
 export type { GridLayoutProps, GridLayoutStyles } from './GridLayout';
 export { SendBox } from './SendBox';
-export { _MentionPopover } from './MentionPopover';
 export { ImageOverlay } from './ImageOverlay';
 export type { ImageOverlayStrings } from './ImageOverlay';
 export type { SendBoxProps, SendBoxStrings, SendBoxStylesProps } from './SendBox';
-export type { _MentionPopoverProps, MentionLookupOptions, MentionDisplayOptions, MentionOptions, Mention, MentionPopoverStrings } from './MentionPopover';
 export type { ImageOverlayProps } from './ImageOverlay';
 export type { InlineImageOptions, InlineImage } from './ChatMessage/ChatMessageContent';
-export type { ActiveFileUpload } from './AttachmentUploadCards';
 export { MessageStatusIndicator } from './MessageStatusIndicator';
 export type { MessageStatusIndicatorProps, MessageStatusIndicatorStrings } from './MessageStatusIndicator';
 export { MessageThread } from './MessageThread';
@@ -24,7 +21,6 @@ export { ParticipantItem } from './ParticipantItem';
 export type { ParticipantItemProps, ParticipantItemStrings, ParticipantItemStyles } from './ParticipantItem';
 export { ParticipantList } from './ParticipantList';
 export type { ParticipantListItemStyles, ParticipantListProps, ParticipantListStyles, ParticipantMenuItemsCallback } from './ParticipantList';
-export type { ParticipantListStrings } from './ParticipantList';
 export { Announcer } from './Announcer';
 export type { AnnouncerProps } from './Announcer';
 export { VideoGallery } from './VideoGallery';
@@ -46,34 +42,26 @@ export { MicrophoneButton } from './MicrophoneButton';
 export type { MicrophoneButtonStyles, MicrophoneButtonContextualMenuStyles, MicrophoneButtonProps, MicrophoneButtonStrings } from './MicrophoneButton';
 export { DevicesButton, generateDefaultDeviceMenuProps as _generateDefaultDeviceMenuProps } from './DevicesButton';
 export type { OptionsDevice, DevicesButtonProps, DevicesButtonStrings, DevicesButtonStyles, DevicesButtonContextualMenuStyles, DeviceMenuProps as _DeviceMenuProps, DeviceMenuStrings as _DeviceMenuStrings, DeviceMenuStyles as _DeviceMenuStyles } from './DevicesButton';
-export { CameraAndMicrophoneSitePermissions, MicrophoneSitePermissions, CameraSitePermissions } from './DevicePermissions/SitePermissions';
-export type { SitePermissionsStrings, SitePermissionsStyles } from './DevicePermissions/SitePermissionsScaffolding';
-export type { CameraAndMicrophoneSitePermissionsStrings, CameraAndMicrophoneSitePermissionsProps, CameraSitePermissionsStrings, CameraSitePermissionsProps, CommonSitePermissionsProps, MicrophoneSitePermissionsStrings, MicrophoneSitePermissionsProps } from './DevicePermissions/SitePermissions';
-export { BrowserPermissionDenied } from './DevicePermissions/BrowserPermissionDenied';
-export type { BrowserPermissionDeniedStrings, BrowserPermissionDeniedStyles, BrowserPermissionDeniedProps } from './DevicePermissions/BrowserPermissionDenied';
-export { BrowserPermissionDeniedIOS } from './DevicePermissions/BrowserPermissionDeniedIOS';
-export type { BrowserPermissionDeniedIOSStrings, BrowserPermissionDeniedIOSProps } from './DevicePermissions/BrowserPermissionDeniedIOS';
 export { ParticipantsButton } from './ParticipantsButton';
 export type { ParticipantsButtonContextualMenuStyles, ParticipantsButtonProps, ParticipantsButtonStrings, ParticipantsButtonStyles } from './ParticipantsButton';
 export { ScreenShareButton } from './ScreenShareButton';
 export type { ScreenShareButtonProps, ScreenShareButtonStrings } from './ScreenShareButton';
 export { RaiseHandButton } from './RaiseHandButton';
 export type { RaiseHandButtonProps, RaiseHandButtonStrings } from './RaiseHandButton';
+export { ReactionButton } from './ReactionButton';
+export type { ReactionButtonProps, ReactionButtonStrings } from './ReactionButton';
 export { VideoTile } from './VideoTile';
 export type { VideoTileProps, VideoTileStylesProps } from './VideoTile';
-export type { VideoTileStrings } from './VideoTile';
 export { _PictureInPictureInPicture } from './PictureInPictureInPicture/PictureInPictureInPicture';
 export type { _PictureInPictureInPictureProps, _PictureInPictureInPictureStrings } from './PictureInPictureInPicture/PictureInPictureInPicture';
 export type { _PictureInPictureInPictureTileProps, _TileOrientation } from './PictureInPictureInPicture/PictureInPictureInPictureTile';
 export * from './Drawer';
-export type { SendBoxErrorBarError } from './SendBoxErrorBar';
 export * from './AttachmentCard';
 export * from './AttachmentCardGroup';
 export * from './ModalClone/ModalClone';
 export * from './AttachmentDownloadCards';
 export type { _AttachmentUploadCardsStrings } from './AttachmentUploadCards';
-export type { AttachmentMetadata, FileUploadHandler, FileUploadManager, FileUploadState, FileUploadError } from '../types/Attachment';
-export type { FileDownloadHandler, FileDownloadError } from '../types/Attachment';
+export type { AttachmentOptions, AttachmentUploadOptions, AttachmentMetadata, AttachmentUploadStatus, AttachmentUploadHandler, AttachmentUploadManager } from '../types/Attachment';
 export { _useContainerHeight, _useContainerWidth } from './utils/responsive';
 export { _ComplianceBanner } from './ComplianceBanner';
 export type { _ComplianceBannerProps, _ComplianceBannerStrings } from './ComplianceBanner';
@@ -85,8 +73,6 @@ export type { _StarSurveyProps, _StarSurveyStrings } from './Survey/StarSurvey/S
 export * from './Survey/SurveyTypes';
 export { _TagsSurvey } from './Survey/TagsSurvey/TagsSurvey';
 export type { _TagsSurveyProps, _TagsSurveyStrings, _IssueCategory, _SurveyTag } from './Survey/TagsSurvey/TagsSurvey';
-export { HoldButton } from './HoldButton';
-export type { HoldButtonProps, HoldButtonStrings } from './HoldButton';
 export { _LocalVideoTile } from './LocalVideoTile';
 export { _RemoteVideoTile } from './RemoteVideoTile';
 export { _HighContrastAwareIcon } from './HighContrastAwareIcon';

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

@@ -4,8 +4,6 @@ export { TypingIndicator } from './TypingIndicator';
 export { ErrorBar } from './ErrorBar';
 export { GridLayout } from './GridLayout';
 export { SendBox } from './SendBox';
-/* @conditional-compile-remove(mention) */
-export { _MentionPopover } from './MentionPopover';
 export { ImageOverlay } from './ImageOverlay';
 export { MessageStatusIndicator } from './MessageStatusIndicator';
 export { MessageThread } from './MessageThread';
@@ -21,15 +19,11 @@ export { ControlBarButton } from './ControlBarButton';
 export { EndCallButton } from './EndCallButton';
 export { MicrophoneButton } from './MicrophoneButton';
 export { DevicesButton, generateDefaultDeviceMenuProps as _generateDefaultDeviceMenuProps } from './DevicesButton';
-/* @conditional-compile-remove(call-readiness) */
-export { CameraAndMicrophoneSitePermissions, MicrophoneSitePermissions, CameraSitePermissions } from './DevicePermissions/SitePermissions';
-/* @conditional-compile-remove(call-readiness) */
-export { BrowserPermissionDenied } from './DevicePermissions/BrowserPermissionDenied';
-/* @conditional-compile-remove(call-readiness) */
-export { BrowserPermissionDeniedIOS } from './DevicePermissions/BrowserPermissionDeniedIOS';
 export { ParticipantsButton } from './ParticipantsButton';
 export { ScreenShareButton } from './ScreenShareButton';
 export { RaiseHandButton } from './RaiseHandButton';
+/* @conditional-compile-remove(reaction) */
+export { ReactionButton } from './ReactionButton';
 export { VideoTile } from './VideoTile';
 export { _PictureInPictureInPicture } from './PictureInPictureInPicture/PictureInPictureInPicture';
 export * from './Drawer';
@@ -46,8 +40,6 @@ export { _StarSurvey } from './Survey/StarSurvey/StarSurvey';
 export * from './Survey/SurveyTypes';
 /* @conditional-compile-remove(end-of-call-survey) */
 export { _TagsSurvey } from './Survey/TagsSurvey/TagsSurvey';
-/* @conditional-compile-remove(PSTN-calls) */
-export { HoldButton } from './HoldButton';
 export { _LocalVideoTile } from './LocalVideoTile';
 export { _RemoteVideoTile } from './RemoteVideoTile';
 export { _HighContrastAwareIcon } from './HighContrastAwareIcon';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/index.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nexport { TypingIndicator } from './TypingIndicator';\nexport type { TypingIndicatorProps, TypingIndicatorStrings, TypingIndicatorStylesProps } from './TypingIndicator';\nexport { ErrorBar } from './ErrorBar';\nexport type { ActiveErrorMessage, ErrorBarProps, ErrorBarStrings, ErrorType } from './ErrorBar';\nexport { GridLayout } from './GridLayout';\nexport type { GridLayoutProps, GridLayoutStyles } from './GridLayout';\nexport { SendBox } from './SendBox';\n/* @conditional-compile-remove(mention) */\nexport { _MentionPopover } from './MentionPopover';\nexport { ImageOverlay } from './ImageOverlay';\nexport type { ImageOverlayStrings } from './ImageOverlay';\nexport type { SendBoxProps, SendBoxStrings, SendBoxStylesProps } from './SendBox'; // TODO: This component is exported only for testing purposes. Remove this when this component is added to composites\n// TODO: This component is exported only for testing purposes. Remove this when this component is added to composites\n/* @conditional-compile-remove(mention) */\nexport type { _MentionPopoverProps, MentionLookupOptions, MentionDisplayOptions, MentionOptions, Mention, MentionPopoverStrings } from './MentionPopover';\nexport type { ImageOverlayProps } from './ImageOverlay';\nexport type { InlineImageOptions, InlineImage } from './ChatMessage/ChatMessageContent';\n\n/* @conditional-compile-remove(file-sharing) */\nexport type { ActiveFileUpload } from './AttachmentUploadCards';\nexport { MessageStatusIndicator } from './MessageStatusIndicator';\nexport type { MessageStatusIndicatorProps, MessageStatusIndicatorStrings } from './MessageStatusIndicator';\nexport { MessageThread } from './MessageThread';\nexport type { MessageProps, MessageThreadProps, MessageThreadStrings, MessageThreadStyles, JumpToNewMessageButtonProps, MessageRenderer, UpdateMessageCallback, CancelEditCallback } from './MessageThread';\nexport { StreamMedia } from './StreamMedia';\nexport type { StreamMediaProps } from './StreamMedia';\nexport type { LoadingState } from './StreamMedia';\nexport { ParticipantItem } from './ParticipantItem';\nexport type { ParticipantItemProps, ParticipantItemStrings, ParticipantItemStyles } from './ParticipantItem';\nexport { ParticipantList } from './ParticipantList';\nexport type { ParticipantListItemStyles, ParticipantListProps, ParticipantListStyles, ParticipantMenuItemsCallback } from './ParticipantList';\n\n/* @conditional-compile-remove(total-participant-count) */\nexport type { ParticipantListStrings } from './ParticipantList';\nexport { Announcer } from './Announcer';\nexport type { AnnouncerProps } from './Announcer';\nexport { VideoGallery } from './VideoGallery';\nexport type { VideoGalleryProps, VideoGalleryStrings, VideoGalleryStyles, VideoGalleryLayout, VideoTileContextualMenuProps, VideoTileDrawerMenuProps } from './VideoGallery';\nexport type { OverflowGalleryPosition } from './VideoGallery';\nexport type { LocalVideoTileSize } from './VideoGallery';\nexport type { HorizontalGalleryStyles } from './HorizontalGallery';\nexport { LocalVideoCameraCycleButton } from './LocalVideoCameraButton';\nexport type { LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nexport { CameraButton } from './CameraButton';\nexport type { CameraButtonContextualMenuStyles, CameraButtonProps, CameraButtonStrings, CameraButtonStyles } from './CameraButton';\nexport { ControlBar } from './ControlBar';\nexport type { ControlBarProps, ControlBarLayout } from './ControlBar';\nexport { ControlBarButton } from './ControlBarButton';\nexport type { ControlBarButtonProps, ControlBarButtonStrings, ControlBarButtonStyles } from './ControlBarButton';\nexport { EndCallButton } from './EndCallButton';\nexport type { EndCallButtonProps, EndCallButtonStrings } from './EndCallButton';\nexport { MicrophoneButton } from './MicrophoneButton';\nexport type { MicrophoneButtonStyles, MicrophoneButtonContextualMenuStyles, MicrophoneButtonProps, MicrophoneButtonStrings } from './MicrophoneButton';\nexport { DevicesButton, generateDefaultDeviceMenuProps as _generateDefaultDeviceMenuProps } from './DevicesButton';\nexport type { OptionsDevice, DevicesButtonProps, DevicesButtonStrings, DevicesButtonStyles, DevicesButtonContextualMenuStyles, DeviceMenuProps as _DeviceMenuProps, DeviceMenuStrings as _DeviceMenuStrings, DeviceMenuStyles as _DeviceMenuStyles } from './DevicesButton';\n\n/* @conditional-compile-remove(call-readiness) */\nexport { CameraAndMicrophoneSitePermissions, MicrophoneSitePermissions, CameraSitePermissions } from './DevicePermissions/SitePermissions';\n/* @conditional-compile-remove(call-readiness) */\nexport type { SitePermissionsStrings, SitePermissionsStyles } from './DevicePermissions/SitePermissionsScaffolding';\n/* @conditional-compile-remove(call-readiness) */\nexport type { CameraAndMicrophoneSitePermissionsStrings, CameraAndMicrophoneSitePermissionsProps, CameraSitePermissionsStrings, CameraSitePermissionsProps, CommonSitePermissionsProps, MicrophoneSitePermissionsStrings, MicrophoneSitePermissionsProps } from './DevicePermissions/SitePermissions';\n/* @conditional-compile-remove(call-readiness) */\nexport { BrowserPermissionDenied } from './DevicePermissions/BrowserPermissionDenied';\n/* @conditional-compile-remove(call-readiness) */\nexport type { BrowserPermissionDeniedStrings, BrowserPermissionDeniedStyles, BrowserPermissionDeniedProps } from './DevicePermissions/BrowserPermissionDenied';\n/* @conditional-compile-remove(call-readiness) */\nexport { BrowserPermissionDeniedIOS } from './DevicePermissions/BrowserPermissionDeniedIOS';\n/* @conditional-compile-remove(call-readiness) */\nexport type { BrowserPermissionDeniedIOSStrings, BrowserPermissionDeniedIOSProps } from './DevicePermissions/BrowserPermissionDeniedIOS';\nexport { ParticipantsButton } from './ParticipantsButton';\nexport type { ParticipantsButtonContextualMenuStyles, ParticipantsButtonProps, ParticipantsButtonStrings, ParticipantsButtonStyles } from './ParticipantsButton';\nexport { ScreenShareButton } from './ScreenShareButton';\nexport type { ScreenShareButtonProps, ScreenShareButtonStrings } from './ScreenShareButton';\nexport { RaiseHandButton } from './RaiseHandButton';\nexport type { RaiseHandButtonProps, RaiseHandButtonStrings } from './RaiseHandButton';\nexport { VideoTile } from './VideoTile';\nexport type { VideoTileProps, VideoTileStylesProps } from './VideoTile';\n/* @conditional-compile-remove(PSTN-calls) */\nexport type { VideoTileStrings } from './VideoTile';\nexport { _PictureInPictureInPicture } from './PictureInPictureInPicture/PictureInPictureInPicture';\nexport type { _PictureInPictureInPictureProps, _PictureInPictureInPictureStrings } from './PictureInPictureInPicture/PictureInPictureInPicture';\nexport type { _PictureInPictureInPictureTileProps, _TileOrientation } from './PictureInPictureInPicture/PictureInPictureInPictureTile';\nexport * from './Drawer';\n/* @conditional-compile-remove(file-sharing) */\nexport type { SendBoxErrorBarError } from './SendBoxErrorBar';\nexport * from './AttachmentCard';\nexport * from './AttachmentCardGroup';\nexport * from './ModalClone/ModalClone';\nexport * from './AttachmentDownloadCards';\nexport type { _AttachmentUploadCardsStrings } from './AttachmentUploadCards';\nexport type { AttachmentMetadata, FileUploadHandler, FileUploadManager, FileUploadState, FileUploadError } from '../types/Attachment';\n\n/* @conditional-compile-remove(file-sharing) */\nexport type { FileDownloadHandler, FileDownloadError } from '../types/Attachment';\nexport { _useContainerHeight, _useContainerWidth } from './utils/responsive';\nexport { _ComplianceBanner } from './ComplianceBanner';\nexport type { _ComplianceBannerProps, _ComplianceBannerStrings } from './ComplianceBanner';\nexport { Dialpad } from './Dialpad/Dialpad';\nexport type { DialpadProps, DialpadStrings, DialpadStyles, DtmfTone } from './Dialpad/Dialpad';\nexport type { DialpadMode, LongPressTrigger } from './Dialpad/Dialpad';\n/* @conditional-compile-remove(end-of-call-survey) */\nexport { _StarSurvey } from './Survey/StarSurvey/StarSurvey';\n/* @conditional-compile-remove(end-of-call-survey) */\nexport type { _StarSurveyProps, _StarSurveyStrings } from './Survey/StarSurvey/StarSurvey';\n/* @conditional-compile-remove(end-of-call-survey) */\nexport * from './Survey/SurveyTypes';\n/* @conditional-compile-remove(end-of-call-survey) */\nexport { _TagsSurvey } from './Survey/TagsSurvey/TagsSurvey';\n/* @conditional-compile-remove(end-of-call-survey) */\nexport type { _TagsSurveyProps, _TagsSurveyStrings, _IssueCategory, _SurveyTag } from './Survey/TagsSurvey/TagsSurvey';\n/* @conditional-compile-remove(PSTN-calls) */\nexport { HoldButton } from './HoldButton';\n/* @conditional-compile-remove(PSTN-calls) */\nexport type { HoldButtonProps, HoldButtonStrings } from './HoldButton';\nexport { _LocalVideoTile } from './LocalVideoTile';\nexport { _RemoteVideoTile } from './RemoteVideoTile';\nexport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nexport type { _HighContrastAwareIconProps } from './HighContrastAwareIcon';\nexport { UnsupportedBrowser } from './UnsupportedBrowser';\nexport type { UnsupportedBrowserStrings, UnsupportedBrowserProps } from './UnsupportedBrowser';\nexport { UnsupportedBrowserVersion } from './UnsupportedBrowserVersion';\nexport type { UnsupportedBrowserVersionStrings, UnsupportedBrowserVersionProps } from './UnsupportedBrowserVersion';\nexport { UnsupportedOperatingSystem } from './UnsupportedOperatingSystem';\nexport type { UnsupportedOperatingSystemStrings, UnsupportedOperatingSystemProps } from './UnsupportedOperatingSystem';\nexport { _TroubleshootingGuideErrorBar } from './TroubleshootingGuideErrorBar';\nexport type { _TroubleshootingGuideErrorBarStrings, _TroubleshootingGuideErrorBarProps } from './TroubleshootingGuideErrorBar';\nexport { _DevicePermissionDropdown } from './DevicePermissions/DevicePermissionDropdown';\nexport type { _DevicePermissionDropdownStrings, _DevicePermissionDropdownProps, _PermissionConstraints } from './DevicePermissions/DevicePermissionDropdown';\nexport { _VideoEffectsItem } from './VideoEffects/VideoEffectsItem';\nexport type { _VideoEffectsItemProps, _VideoEffectsItemStyles } from './VideoEffects/VideoEffectsItem';\nexport { _VideoEffectsItemNoBackground, _VideoEffectsItemBlur, _VideoEffectsItemAddImage } from './VideoEffects/PresetVideoEffectsItems';\nexport { _VideoBackgroundEffectsPicker } from './VideoEffects/VideoBackgroundEffectsPicker';\nexport type { _VideoBackgroundEffectsPickerProps, _VideoBackgroundEffectChoiceOption, _VideoBackgroundEffectsPickerStyles } from './VideoEffects/VideoBackgroundEffectsPicker';\nexport type { VerticalGalleryStyles, VerticalGalleryStrings, VerticalGalleryControlBarStyles } from './VerticalGallery';\n/* @conditional-compile-remove(close-captions) */\nexport * from './CaptionsBanner';\n/* @conditional-compile-remove(close-captions) */\nexport * from './Caption';\n/* @conditional-compile-remove(close-captions) */\nexport * from './StartCaptionsButton';\n/* @conditional-compile-remove(close-captions) */\nexport * from './CaptionsSettingsModal';"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/index.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nexport { TypingIndicator } from './TypingIndicator';\nexport type { TypingIndicatorProps, TypingIndicatorStrings, TypingIndicatorStylesProps } from './TypingIndicator';\nexport { ErrorBar } from './ErrorBar';\nexport type { ActiveErrorMessage, ErrorBarProps, ErrorBarStrings, ErrorType } from './ErrorBar';\nexport { GridLayout } from './GridLayout';\nexport type { GridLayoutProps, GridLayoutStyles } from './GridLayout';\nexport { SendBox } from './SendBox';\nexport { ImageOverlay } from './ImageOverlay';\nexport type { ImageOverlayStrings } from './ImageOverlay';\nexport type { SendBoxProps, SendBoxStrings, SendBoxStylesProps } from './SendBox'; // TODO: This component is exported only for testing purposes. Remove this when this component is added to composites\n// TODO: This component is exported only for testing purposes. Remove this when this component is added to composites\nexport type { ImageOverlayProps } from './ImageOverlay';\nexport type { InlineImageOptions, InlineImage } from './ChatMessage/ChatMessageContent';\nexport { MessageStatusIndicator } from './MessageStatusIndicator';\nexport type { MessageStatusIndicatorProps, MessageStatusIndicatorStrings } from './MessageStatusIndicator';\nexport { MessageThread } from './MessageThread';\nexport type { MessageProps, MessageThreadProps, MessageThreadStrings, MessageThreadStyles, JumpToNewMessageButtonProps, MessageRenderer, UpdateMessageCallback, CancelEditCallback } from './MessageThread';\nexport { StreamMedia } from './StreamMedia';\nexport type { StreamMediaProps } from './StreamMedia';\nexport type { LoadingState } from './StreamMedia';\nexport { ParticipantItem } from './ParticipantItem';\nexport type { ParticipantItemProps, ParticipantItemStrings, ParticipantItemStyles } from './ParticipantItem';\nexport { ParticipantList } from './ParticipantList';\nexport type { ParticipantListItemStyles, ParticipantListProps, ParticipantListStyles, ParticipantMenuItemsCallback } from './ParticipantList';\nexport { Announcer } from './Announcer';\nexport type { AnnouncerProps } from './Announcer';\nexport { VideoGallery } from './VideoGallery';\nexport type { VideoGalleryProps, VideoGalleryStrings, VideoGalleryStyles, VideoGalleryLayout, VideoTileContextualMenuProps, VideoTileDrawerMenuProps } from './VideoGallery';\nexport type { OverflowGalleryPosition } from './VideoGallery';\nexport type { LocalVideoTileSize } from './VideoGallery';\nexport type { HorizontalGalleryStyles } from './HorizontalGallery';\nexport { LocalVideoCameraCycleButton } from './LocalVideoCameraButton';\nexport type { LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nexport { CameraButton } from './CameraButton';\nexport type { CameraButtonContextualMenuStyles, CameraButtonProps, CameraButtonStrings, CameraButtonStyles } from './CameraButton';\nexport { ControlBar } from './ControlBar';\nexport type { ControlBarProps, ControlBarLayout } from './ControlBar';\nexport { ControlBarButton } from './ControlBarButton';\nexport type { ControlBarButtonProps, ControlBarButtonStrings, ControlBarButtonStyles } from './ControlBarButton';\nexport { EndCallButton } from './EndCallButton';\nexport type { EndCallButtonProps, EndCallButtonStrings } from './EndCallButton';\nexport { MicrophoneButton } from './MicrophoneButton';\nexport type { MicrophoneButtonStyles, MicrophoneButtonContextualMenuStyles, MicrophoneButtonProps, MicrophoneButtonStrings } from './MicrophoneButton';\nexport { DevicesButton, generateDefaultDeviceMenuProps as _generateDefaultDeviceMenuProps } from './DevicesButton';\nexport type { OptionsDevice, DevicesButtonProps, DevicesButtonStrings, DevicesButtonStyles, DevicesButtonContextualMenuStyles, DeviceMenuProps as _DeviceMenuProps, DeviceMenuStrings as _DeviceMenuStrings, DeviceMenuStyles as _DeviceMenuStyles } from './DevicesButton';\nexport { ParticipantsButton } from './ParticipantsButton';\nexport type { ParticipantsButtonContextualMenuStyles, ParticipantsButtonProps, ParticipantsButtonStrings, ParticipantsButtonStyles } from './ParticipantsButton';\nexport { ScreenShareButton } from './ScreenShareButton';\nexport type { ScreenShareButtonProps, ScreenShareButtonStrings } from './ScreenShareButton';\nexport { RaiseHandButton } from './RaiseHandButton';\nexport type { RaiseHandButtonProps, RaiseHandButtonStrings } from './RaiseHandButton';\n/* @conditional-compile-remove(reaction) */\nexport { ReactionButton } from './ReactionButton';\n/* @conditional-compile-remove(reaction) */\nexport type { ReactionButtonProps, ReactionButtonStrings } from './ReactionButton';\nexport { VideoTile } from './VideoTile';\nexport type { VideoTileProps, VideoTileStylesProps } from './VideoTile';\nexport { _PictureInPictureInPicture } from './PictureInPictureInPicture/PictureInPictureInPicture';\nexport type { _PictureInPictureInPictureProps, _PictureInPictureInPictureStrings } from './PictureInPictureInPicture/PictureInPictureInPicture';\nexport type { _PictureInPictureInPictureTileProps, _TileOrientation } from './PictureInPictureInPicture/PictureInPictureInPictureTile';\nexport * from './Drawer';\nexport * from './AttachmentCard';\nexport * from './AttachmentCardGroup';\nexport * from './ModalClone/ModalClone';\nexport * from './AttachmentDownloadCards';\nexport type { _AttachmentUploadCardsStrings } from './AttachmentUploadCards';\nexport type { AttachmentOptions, AttachmentUploadOptions, AttachmentMetadata, AttachmentUploadStatus, AttachmentUploadHandler, AttachmentUploadManager } from '../types/Attachment';\nexport { _useContainerHeight, _useContainerWidth } from './utils/responsive';\nexport { _ComplianceBanner } from './ComplianceBanner';\nexport type { _ComplianceBannerProps, _ComplianceBannerStrings } from './ComplianceBanner';\nexport { Dialpad } from './Dialpad/Dialpad';\nexport type { DialpadProps, DialpadStrings, DialpadStyles, DtmfTone } from './Dialpad/Dialpad';\nexport type { DialpadMode, LongPressTrigger } from './Dialpad/Dialpad';\n/* @conditional-compile-remove(end-of-call-survey) */\nexport { _StarSurvey } from './Survey/StarSurvey/StarSurvey';\n/* @conditional-compile-remove(end-of-call-survey) */\nexport type { _StarSurveyProps, _StarSurveyStrings } from './Survey/StarSurvey/StarSurvey';\n/* @conditional-compile-remove(end-of-call-survey) */\nexport * from './Survey/SurveyTypes';\n/* @conditional-compile-remove(end-of-call-survey) */\nexport { _TagsSurvey } from './Survey/TagsSurvey/TagsSurvey';\n/* @conditional-compile-remove(end-of-call-survey) */\nexport type { _TagsSurveyProps, _TagsSurveyStrings, _IssueCategory, _SurveyTag } from './Survey/TagsSurvey/TagsSurvey';\nexport { _LocalVideoTile } from './LocalVideoTile';\nexport { _RemoteVideoTile } from './RemoteVideoTile';\nexport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nexport type { _HighContrastAwareIconProps } from './HighContrastAwareIcon';\nexport { UnsupportedBrowser } from './UnsupportedBrowser';\nexport type { UnsupportedBrowserStrings, UnsupportedBrowserProps } from './UnsupportedBrowser';\nexport { UnsupportedBrowserVersion } from './UnsupportedBrowserVersion';\nexport type { UnsupportedBrowserVersionStrings, UnsupportedBrowserVersionProps } from './UnsupportedBrowserVersion';\nexport { UnsupportedOperatingSystem } from './UnsupportedOperatingSystem';\nexport type { UnsupportedOperatingSystemStrings, UnsupportedOperatingSystemProps } from './UnsupportedOperatingSystem';\nexport { _TroubleshootingGuideErrorBar } from './TroubleshootingGuideErrorBar';\nexport type { _TroubleshootingGuideErrorBarStrings, _TroubleshootingGuideErrorBarProps } from './TroubleshootingGuideErrorBar';\nexport { _DevicePermissionDropdown } from './DevicePermissions/DevicePermissionDropdown';\nexport type { _DevicePermissionDropdownStrings, _DevicePermissionDropdownProps, _PermissionConstraints } from './DevicePermissions/DevicePermissionDropdown';\nexport { _VideoEffectsItem } from './VideoEffects/VideoEffectsItem';\nexport type { _VideoEffectsItemProps, _VideoEffectsItemStyles } from './VideoEffects/VideoEffectsItem';\nexport { _VideoEffectsItemNoBackground, _VideoEffectsItemBlur, _VideoEffectsItemAddImage } from './VideoEffects/PresetVideoEffectsItems';\nexport { _VideoBackgroundEffectsPicker } from './VideoEffects/VideoBackgroundEffectsPicker';\nexport type { _VideoBackgroundEffectsPickerProps, _VideoBackgroundEffectChoiceOption, _VideoBackgroundEffectsPickerStyles } from './VideoEffects/VideoBackgroundEffectsPicker';\nexport type { VerticalGalleryStyles, VerticalGalleryStrings, VerticalGalleryControlBarStyles } from './VerticalGallery';\n/* @conditional-compile-remove(close-captions) */\nexport * from './CaptionsBanner';\n/* @conditional-compile-remove(close-captions) */\nexport * from './Caption';\n/* @conditional-compile-remove(close-captions) */\nexport * from './StartCaptionsButton';\n/* @conditional-compile-remove(close-captions) */\nexport * from './CaptionsSettingsModal';"]}

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

@@ -0,0 +1,9 @@
+/**
+ * @private
+ */
+export declare const useAttachmentCardStyles: () => Record<"root", string>;
+/**
+ * @private
+ */
+export declare const attachmentNameContainerClassName: string;
+//# sourceMappingURL=AttachmentCard.styles.d.ts.map

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

@@ -0,0 +1,28 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { mergeStyles } from '@fluentui/react';
+import { makeStyles, shorthands } from '@fluentui/react-components';
+import { _pxToRem } from "../../../../acs-ui-common/src";
+/**
+ * @private
+ */
+export const useAttachmentCardStyles = makeStyles({
+    root: {
+        width: '12rem',
+        minWidth: '75%',
+        '& div[role=toolbar]': Object.assign({}, shorthands.padding(0))
+    }
+});
+/**
+ * @private
+ */
+export const attachmentNameContainerClassName = mergeStyles({
+    marginTop: _pxToRem(5),
+    width: '5.75rem',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    span: {
+        whiteSpace: 'nowrap'
+    }
+});
+//# sourceMappingURL=AttachmentCard.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AttachmentCard.styles.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/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,uBAAuB,GAAG,UAAU,CAAC;IAChD,IAAI,EAAE;QACJ,KAAK,EAAE,OAAO;QACd,QAAQ,EAAE,KAAK;QACf,qBAAqB,oBAChB,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CACzB;KACF;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,gCAAgC,GAAG,WAAW,CAAC;IAC1D,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;IACtB,KAAK,EAAE,SAAS;IAChB,QAAQ,EAAE,QAAQ;IAClB,YAAY,EAAE,UAAU;IACxB,IAAI,EAAE;QACJ,UAAU,EAAE,QAAQ;KACrB;CACF,CAAC,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 useAttachmentCardStyles = makeStyles({\n  root: {\n    width: '12rem',\n    minWidth: '75%',\n    '& div[role=toolbar]': {\n      ...shorthands.padding(0)\n    }\n  }\n});\n\n/**\n * @private\n */\nexport const attachmentNameContainerClassName = mergeStyles({\n  marginTop: _pxToRem(5),\n  width: '5.75rem',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  span: {\n    whiteSpace: 'nowrap'\n  }\n});"]}

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

@@ -24,7 +24,7 @@ export declare const useChatMessageRenderStyles: () => Record<"rootCommon" | "ro
 /**
  * @private
  */
-export declare const useChatMyMessageStyles: () => Record<"root" | "body" | "menu" | "menuHidden" | "bodyAttached" | "menuAttached" | "menuVisible", string>;
+export declare const useChatMyMessageStyles: () => Record<"body" | "menu" | "root" | "bodyAttached" | "menuAttached" | "menuHidden" | "menuVisible", string>;
 /**
  * @private
  */
@@ -36,7 +36,7 @@ export declare const chatMessageDateStyle: CSSProperties;
 /**
  * @private
  */
-export declare const useChatMessageStyles: () => Record<"root" | "body" | "bodyWithoutAvatar" | "bodyWithAvatar" | "avatarNoOverlap" | "avatarOverlap" | "bodyWithPlaceholderImage", string>;
+export declare const useChatMessageStyles: () => Record<"body" | "root" | "bodyWithoutAvatar" | "bodyWithAvatar" | "avatarNoOverlap" | "avatarOverlap" | "bodyWithPlaceholderImage", string>;
 /**
  * @private
  */

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

@@ -97,7 +97,9 @@ export const useChatMessageRenderStyles = makeStyles({
  */
 export const useChatMyMessageStyles = makeStyles({
     root: {
-        gridTemplateColumns: 'auto auto',
+        // The first column's width should be set to  1fr
+        // because otherwise rich text editor's width will grow indefinitely
+        gridTemplateColumns: '1fr auto',
         gridTemplateAreas: `
         ". actions"
         "body body"