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

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

@@ -1 +1 @@
-{"version":3,"file":"FileDownloadCards.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/FileDownloadCards.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { Icon, IconButton, Spinner, SpinnerSize } from '@fluentui/react';\nimport React, { useCallback, useState } from 'react';\nimport { useMemo } from 'react';\n/* @conditional-compile-remove(file-sharing) */\nimport { useLocale } from '../localization';\nimport { _FileCard } from './FileCard';\nimport { _FileCardGroup } from './FileCardGroup';\nimport { iconButtonClassName } from './styles/IconButton.styles';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n/**\n * @beta\n */\nexport type FileMetadataAttachmentType = 'fileSharing' | /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */'inlineImage' | 'unknown';\n\n/**\n * Base interface that all Meta Data should extend.\n * Typically used for ACS to ACS file transfers.\n * @beta\n */\nexport interface BaseFileMetadata {\n  /**\n   * File name to be displayed.\n   */\n  name: string;\n  /**\n   * Extension is used for rendering the file icon.\n   * An unknown extension will be rendered as a generic icon.\n   * Example: `jpeg`\n   */\n  extension: string;\n  /**\n   * Download URL for the file.\n   */\n  url: string;\n  /**\n   * Unique ID of the file.\n   */\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  id: string;\n  /**\n   * Attachment Type\n   */\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  attachmentType: FileMetadataAttachmentType;\n}\n/**\n * Meta Data containing basic information about the uploaded file.\n * Typically used for ACS to ACS file transfers.\n * @beta\n */\nexport interface FileSharingMetadata extends BaseFileMetadata {\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  attachmentType: 'fileSharing';\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  /*\n   * Optional dictionary of meta data asscoiated with the file.\n   */\n  payload?: Record<string, string>;\n}\n\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n/**\n * Meta Data containing data for images.\n * @beta\n */\nexport interface ImageFileMetadata extends BaseFileMetadata {\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  /*\n   * Attachment type of the file.\n   * Possible values {@link FileDownloadHandler}.\n   */\n  attachmentType: 'inlineImage';\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  /*\n   * Preview URL for the file.\n   * Used in the message bubble for inline images.\n   */\n  previewUrl?: string;\n}\n\n/**\n * Meta Data containing information about the uploaded file.\n * @beta\n */\nexport type FileMetadata = FileSharingMetadata | /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ImageFileMetadata;\n\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n/**\n * @beta\n */\nexport interface AttachmentDownloadResult {\n  blobUrl: string;\n}\n\n/**\n * Strings of _FileDownloadCards that can be overridden.\n *\n * @internal\n */\nexport interface _FileDownloadCardsStrings {\n  /** Aria label to notify user when focus is on file download button. */\n  downloadFile: string;\n  fileCardGroupMessage: string;\n}\n\n/**\n * @beta\n * A file download error returned via a {@link FileDownloadHandler}.\n * This error message is used to render an error message in the UI.\n */\nexport interface FileDownloadError {\n  /** The error message to display in the UI */\n  errorMessage: string;\n}\n\n/**\n * @beta\n *\n * A callback function for handling file downloads.\n * The function needs to return a promise that resolves to a file download URL.\n * If the promise is rejected, the {@link Error.message} will be used to display an error message to the user.\n *\n * @example\n * ```ts\n * const fileDownloadHandler: FileDownloadHandler = async (userId, fileData) => {\n *   if (isUnauthorizedUser(userId)) {\n *     return { errorMessage: 'You don’t have permission to download this file.' };\n *   } else {\n *     return new URL(fileData.url);\n *   }\n * }\n *\n * const App = () => (\n *   <ChatComposite\n *     ...\n *     fileSharing={{\n *       fileDownloadHandler: fileDownloadHandler\n *     }}\n *   />\n * )\n *\n * ```\n * @param userId - The user ID of the user downloading the file.\n * @param fileMetadata - The {@link FileMetadata} containing file `url`, `extension` and `name`.\n */\nexport type FileDownloadHandler = (userId: string, fileMetadata: FileMetadata) => Promise<URL | FileDownloadError>;\n\n/**\n * @internal\n */\nexport interface _FileDownloadCards {\n  /**\n   * User id of the local participant\n   */\n  userId: string;\n  /**\n   * A chat message metadata that inculdes file metadata\n   */\n  fileMetadata: FileMetadata[];\n  /**\n   * A function of type {@link FileDownloadHandler} for handling file downloads.\n   * If the function is not specified, the file's `url` will be opened in a new tab to\n   * initiate the download.\n   */\n  downloadHandler?: FileDownloadHandler;\n  /**\n   * Optional callback that runs if downloadHandler returns {@link FileDownloadError}.\n   */\n  onDownloadErrorMessage?: (errMsg: string) => void;\n  /**\n   * Optional arialabel strings for file download cards\n   */\n  strings?: _FileDownloadCardsStrings;\n}\nconst fileDownloadCardsStyle = {\n  marginTop: '0.25rem'\n};\nconst actionIconStyle = {\n  height: '1rem'\n};\n\n/**\n * @internal\n */\nexport const _FileDownloadCards = (props: _FileDownloadCards): JSX.Element => {\n  const {\n    userId,\n    fileMetadata\n  } = props;\n  const [showSpinner, setShowSpinner] = useState(false);\n  const localeStrings = useLocaleStringsTrampoline();\n  const downloadFileButtonString = useMemo(() => () => {\n    return props.strings?.downloadFile ?? localeStrings.downloadFile;\n  }, [props.strings?.downloadFile, localeStrings.downloadFile]);\n  const isFileSharingAttachment = useCallback((attachment: FileMetadata): boolean => {\n    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n    return attachment.attachmentType === 'fileSharing';\n    return false;\n  }, []);\n\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  const isShowDownloadIcon = useCallback((attachment: FileMetadata): boolean => {\n    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n    return attachment.attachmentType === 'fileSharing' && attachment.payload?.teamsFileAttachment !== 'true';\n    return true;\n  }, []);\n  const fileCardGroupDescription = useMemo(() => () => {\n    const fileGroupLocaleString = props.strings?.fileCardGroupMessage ?? localeStrings.fileCardGroupMessage;\n    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n    return _formatString(fileGroupLocaleString, {\n      fileCount: `${fileMetadata.filter(isFileSharingAttachment).length}`\n    });\n    return _formatString(fileGroupLocaleString, {\n      fileCount: `${fileMetadata.length}`\n    });\n  }, [props.strings?.fileCardGroupMessage, localeStrings.fileCardGroupMessage, fileMetadata, isFileSharingAttachment]);\n  const fileDownloadHandler = useCallback(async (userId, file: FileMetadata) => {\n    if (!props.downloadHandler) {\n      window.open(file.url, '_blank', 'noopener,noreferrer');\n    } else {\n      setShowSpinner(true);\n      try {\n        const response = await props.downloadHandler(userId, file);\n        setShowSpinner(false);\n        if (response instanceof URL) {\n          window.open(response.toString(), '_blank', 'noopener,noreferrer');\n        } else {\n          props.onDownloadErrorMessage && props.onDownloadErrorMessage(response.errorMessage);\n        }\n      } finally {\n        setShowSpinner(false);\n      }\n    }\n  }, [props]);\n  if (!fileMetadata || fileMetadata.length === 0 || /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */!fileMetadata.some(isFileSharingAttachment)) {\n    return <></>;\n  }\n  return <div style={fileDownloadCardsStyle} data-ui-id=\"file-download-card-group\">\n      <_FileCardGroup ariaLabel={fileCardGroupDescription()}>\n        {fileMetadata && fileMetadata.filter(attachment => {\n        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n        return isFileSharingAttachment(attachment);\n        return true;\n      }).map(file => <_FileCard fileName={file.name} key={file.name} fileExtension={file.extension} actionIcon={showSpinner ? <Spinner size={SpinnerSize.medium} aria-live={'polite'} role={'status'} /> : true && /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n      isShowDownloadIcon(file) ? <IconButton className={iconButtonClassName} ariaLabel={downloadFileButtonString()}>\n                      <DownloadIconTrampoline />\n                    </IconButton> : undefined} actionHandler={() => fileDownloadHandler(userId, file)} />)}\n      </_FileCardGroup>\n    </div>;\n};\n\n/**\n * @private\n */\nconst DownloadIconTrampoline = (): JSX.Element => {\n  // @conditional-compile-remove(file-sharing)\n  return <Icon data-ui-id=\"file-download-card-download-icon\" iconName=\"DownloadFile\" style={actionIconStyle} />;\n  // Return _some_ available icon, as the real icon is beta-only.\n  return <Icon iconName=\"EditBoxCancel\" style={actionIconStyle} />;\n};\nconst useLocaleStringsTrampoline = (): _FileDownloadCardsStrings => {\n  /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)*/\n  return useLocale().strings.messageThread;\n  return {\n    downloadFile: '',\n    fileCardGroupMessage: ''\n  };\n};\"../../../acs-ui-common/src\""]}
+{"version":3,"file":"FileDownloadCards.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/FileDownloadCards.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { Icon, IconButton, Spinner, SpinnerSize } from '@fluentui/react';\nimport React, { useCallback, useState } from 'react';\nimport { useMemo } from 'react';\nimport { _FileCard } from './FileCard';\nimport { _FileCardGroup } from './FileCardGroup';\nimport { iconButtonClassName } from './styles/IconButton.styles';\nimport { _formatString } from '@internal/acs-ui-common';\n/**\n * Base interface that all Meta Data should extend.\n * Typically used for ACS to ACS file transfers.\n * @beta\n */\nexport interface BaseFileMetadata {\n  /**\n   * File name to be displayed.\n   */\n  name: string;\n  /**\n   * Extension is used for rendering the file icon.\n   * An unknown extension will be rendered as a generic icon.\n   * Example: `jpeg`\n   */\n  extension: string;\n  /**\n   * Download URL for the file.\n   */\n  url: string;\n  /**\n   * Unique ID of the file.\n   */\n  /**\n   * Attachment Type\n   */\n}\n/**\n * Meta Data containing basic information about the uploaded file.\n * Typically used for ACS to ACS file transfers.\n * @beta\n */\nexport interface FileSharingMetadata extends BaseFileMetadata {}\n/**\n * Meta Data containing information about the uploaded file.\n * @beta\n */\nexport type FileMetadata = FileSharingMetadata;\n/**\n * Strings of _FileDownloadCards that can be overridden.\n *\n * @internal\n */\nexport interface _FileDownloadCardsStrings {\n  /** Aria label to notify user when focus is on file download button. */\n  downloadFile: string;\n  fileCardGroupMessage: string;\n}\n\n/**\n * @beta\n * A file download error returned via a {@link FileDownloadHandler}.\n * This error message is used to render an error message in the UI.\n */\nexport interface FileDownloadError {\n  /** The error message to display in the UI */\n  errorMessage: string;\n}\n\n/**\n * @beta\n *\n * A callback function for handling file downloads.\n * The function needs to return a promise that resolves to a file download URL.\n * If the promise is rejected, the {@link Error.message} will be used to display an error message to the user.\n *\n * @example\n * ```ts\n * const fileDownloadHandler: FileDownloadHandler = async (userId, fileData) => {\n *   if (isUnauthorizedUser(userId)) {\n *     return { errorMessage: 'You don’t have permission to download this file.' };\n *   } else {\n *     return new URL(fileData.url);\n *   }\n * }\n *\n * const App = () => (\n *   <ChatComposite\n *     ...\n *     fileSharing={{\n *       fileDownloadHandler: fileDownloadHandler\n *     }}\n *   />\n * )\n *\n * ```\n * @param userId - The user ID of the user downloading the file.\n * @param fileMetadata - The {@link FileMetadata} containing file `url`, `extension` and `name`.\n */\nexport type FileDownloadHandler = (userId: string, fileMetadata: FileMetadata) => Promise<URL | FileDownloadError>;\n\n/**\n * @internal\n */\nexport interface _FileDownloadCards {\n  /**\n   * User id of the local participant\n   */\n  userId: string;\n  /**\n   * A chat message metadata that inculdes file metadata\n   */\n  fileMetadata: FileMetadata[];\n  /**\n   * A function of type {@link FileDownloadHandler} for handling file downloads.\n   * If the function is not specified, the file's `url` will be opened in a new tab to\n   * initiate the download.\n   */\n  downloadHandler?: FileDownloadHandler;\n  /**\n   * Optional callback that runs if downloadHandler returns {@link FileDownloadError}.\n   */\n  onDownloadErrorMessage?: (errMsg: string) => void;\n  /**\n   * Optional arialabel strings for file download cards\n   */\n  strings?: _FileDownloadCardsStrings;\n}\nconst fileDownloadCardsStyle = {\n  marginTop: '0.25rem'\n};\nconst actionIconStyle = {\n  height: '1rem'\n};\n\n/**\n * @internal\n */\nexport const _FileDownloadCards = (props: _FileDownloadCards): JSX.Element => {\n  const {\n    userId,\n    fileMetadata\n  } = props;\n  const [showSpinner, setShowSpinner] = useState(false);\n  const localeStrings = useLocaleStringsTrampoline();\n  const downloadFileButtonString = useMemo(() => () => {\n    return props.strings?.downloadFile ?? localeStrings.downloadFile;\n  }, [props.strings?.downloadFile, localeStrings.downloadFile]);\n  const isFileSharingAttachment = useCallback((attachment: FileMetadata): boolean => {\n    return false;\n  }, []);\n  const fileCardGroupDescription = useMemo(() => () => {\n    const fileGroupLocaleString = props.strings?.fileCardGroupMessage ?? localeStrings.fileCardGroupMessage;\n    return _formatString(fileGroupLocaleString, {\n      fileCount: `${fileMetadata.length}`\n    });\n  }, [props.strings?.fileCardGroupMessage, localeStrings.fileCardGroupMessage, fileMetadata, isFileSharingAttachment]);\n  const fileDownloadHandler = useCallback(async (userId, file: FileMetadata) => {\n    if (!props.downloadHandler) {\n      window.open(file.url, '_blank', 'noopener,noreferrer');\n    } else {\n      setShowSpinner(true);\n      try {\n        const response = await props.downloadHandler(userId, file);\n        setShowSpinner(false);\n        if (response instanceof URL) {\n          window.open(response.toString(), '_blank', 'noopener,noreferrer');\n        } else {\n          props.onDownloadErrorMessage && props.onDownloadErrorMessage(response.errorMessage);\n        }\n      } finally {\n        setShowSpinner(false);\n      }\n    }\n  }, [props]);\n  if (!fileMetadata || fileMetadata.length === 0) {\n    return <></>;\n  }\n  return <div style={fileDownloadCardsStyle} data-ui-id=\"file-download-card-group\">\n      <_FileCardGroup ariaLabel={fileCardGroupDescription()}>\n        {fileMetadata && fileMetadata.filter(attachment => {\n        return true;\n      }).map(file => <_FileCard fileName={file.name} key={file.name} fileExtension={file.extension} actionIcon={showSpinner ? <Spinner size={SpinnerSize.medium} aria-live={'polite'} role={'status'} /> : true ? <IconButton className={iconButtonClassName} ariaLabel={downloadFileButtonString()}>\n                      <DownloadIconTrampoline />\n                    </IconButton> : undefined} actionHandler={() => fileDownloadHandler(userId, file)} />)}\n      </_FileCardGroup>\n    </div>;\n};\n\n/**\n * @private\n */\nconst DownloadIconTrampoline = (): JSX.Element => {\n  // Return _some_ available icon, as the real icon is beta-only.\n  return <Icon iconName=\"EditBoxCancel\" style={actionIconStyle} />;\n};\nconst useLocaleStringsTrampoline = (): _FileDownloadCardsStrings => {\n  return {\n    downloadFile: '',\n    fileCardGroupMessage: ''\n  };\n};\"../../../acs-ui-common/src\""]}

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

@@ -1,7 +1,6 @@
 import React, { ReactNode, FormEvent } from 'react';
 import { IStyle, ITextField } from '@fluentui/react';
 import { BaseCustomStyles } from '../types';
-import { MentionLookupOptions } from './MentionPopover';
 /**
  * @private
  */
@@ -34,7 +33,6 @@ declare type InputBoxComponentProps = {
     disabled?: boolean;
     styles?: InputBoxStylesProps;
     autoFocus?: 'sendBoxTextField';
-    mentionLookupOptions?: MentionLookupOptions;
 };
 /**
  * @private

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

@@ -6,8 +6,6 @@ import { isEnterKeyEventFromCompositionSession } from './utils';
 import { inputBoxStyle, inputBoxWrapperStyle, inputButtonStyle, textFieldStyle, textContainerStyle, newLineButtonsContainerStyle, inputBoxNewLineSpaceAffordance, inputButtonTooltipStyle, iconWrapperStyle } from './styles/InputBoxComponent.style';
 import { isDarkThemed } from '../theming/themeUtils';
 import { useTheme } from '../theming';
-/* @conditional-compile-remove(mention) */
-import { TextFieldWithMention } from './TextFieldWithMention/TextFieldWithMention';
 /**
  * @private
  */
@@ -55,22 +53,6 @@ export const InputBoxComponent = (props) => {
             errorMessage,
             onRenderSuffix: onRenderChildren
         };
-        /* @conditional-compile-remove(mention) */
-        const textFieldWithMentionProps = {
-            textFieldProps: textFieldProps,
-            dataUiId: dataUiId,
-            textValue: textValue,
-            onChange: onChange,
-            onKeyDown: onKeyDown,
-            onEnterKeyDown: onEnterKeyDown,
-            textFieldRef: textFieldRef,
-            supportNewline: supportNewline,
-            mentionLookupOptions: props.mentionLookupOptions
-        };
-        /* @conditional-compile-remove(mention) */
-        if (props.mentionLookupOptions) {
-            return React.createElement(TextFieldWithMention, Object.assign({}, textFieldWithMentionProps));
-        }
         return React.createElement(TextField, Object.assign({}, textFieldProps, { "data-ui-id": dataUiId, value: textValue, onChange: onChange, onKeyDown: onTextFieldKeyDown, onFocus: e => {
                 // Fix for setting the cursor to the correct position when multiline is true
                 // This approach should be reviewed during migration to FluentUI v9

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

@@ -1 +1 @@
-{"version":3,"file":"InputBoxComponent.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/InputBoxComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useState, ReactNode, FormEvent, useCallback } from 'react';\nimport { Stack, TextField, mergeStyles, IStyle, ITextField, concatStyleSets, IconButton, TooltipHost, ICalloutContentStyles, ITextFieldProps } from '@fluentui/react';\nimport { BaseCustomStyles } from '../types';\nimport { isEnterKeyEventFromCompositionSession } from './utils';\nimport { inputBoxStyle, inputBoxWrapperStyle, inputButtonStyle, textFieldStyle, textContainerStyle, newLineButtonsContainerStyle, inputBoxNewLineSpaceAffordance, inputButtonTooltipStyle, iconWrapperStyle } from './styles/InputBoxComponent.style';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport { useTheme } from '../theming';\n/* @conditional-compile-remove(mention) */\nimport { MentionLookupOptions } from './MentionPopover';\n/* @conditional-compile-remove(mention) */\nimport { TextFieldWithMention, TextFieldWithMentionProps } from './TextFieldWithMention/TextFieldWithMention';\n\n/**\n * @private\n */\nexport interface InputBoxStylesProps extends BaseCustomStyles {\n  /** Styles for the text field. */\n  textField?: IStyle;\n\n  /** Styles for the system message; These styles will be ignored when a custom system message component is provided. */\n  systemMessage?: IStyle;\n\n  /** Styles for customizing the container of the text field */\n  textFieldContainer?: IStyle;\n}\ntype InputBoxComponentProps = {\n  children: ReactNode;\n  /**\n   * Inline child elements passed in. Setting to false will mean they are on a new line.\n   */\n  inlineChildren: boolean;\n  'data-ui-id'?: string;\n  id?: string;\n  textValue: string; // This could be plain text or HTML.\n  onChange: (event?: FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => void;\n  textFieldRef?: React.RefObject<ITextField>;\n  inputClassName?: string;\n  placeholderText?: string;\n  supportNewline?: boolean;\n  maxLength: number;\n  onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;\n  onEnterKeyDown?: () => void;\n  errorMessage?: string | React.ReactElement;\n  disabled?: boolean;\n  styles?: InputBoxStylesProps;\n  autoFocus?: 'sendBoxTextField';\n  /* @conditional-compile-remove(mention) */\n  mentionLookupOptions?: MentionLookupOptions;\n};\n\n/**\n * @private\n */\nexport const InputBoxComponent = (props: InputBoxComponentProps): JSX.Element => {\n  const {\n    styles,\n    id,\n    'data-ui-id': dataUiId,\n    textValue,\n    onChange,\n    textFieldRef,\n    placeholderText,\n    onKeyDown,\n    onEnterKeyDown,\n    supportNewline,\n    inputClassName,\n    errorMessage,\n    disabled,\n    children\n  } = props;\n  const mergedRootStyle = mergeStyles(inputBoxWrapperStyle, styles?.root);\n  const mergedInputFieldStyle = mergeStyles(inputBoxStyle, inputClassName, props.inlineChildren ? {} : inputBoxNewLineSpaceAffordance);\n  const mergedTextContainerStyle = mergeStyles(textContainerStyle, styles?.textFieldContainer);\n  const mergedTextFieldStyle = concatStyleSets(textFieldStyle, {\n    fieldGroup: styles?.textField,\n    errorMessage: styles?.systemMessage,\n    suffix: {\n      backgroundColor: 'transparent',\n      padding: '0 0'\n    }\n  });\n  const mergedChildrenStyle = mergeStyles(props.inlineChildren ? {} : newLineButtonsContainerStyle);\n  const onTextFieldKeyDown = useCallback((ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n    if (isEnterKeyEventFromCompositionSession(ev)) {\n      return;\n    }\n    if (ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline)) {\n      ev.preventDefault();\n      onEnterKeyDown && onEnterKeyDown();\n    }\n    onKeyDown && onKeyDown(ev);\n  }, [onEnterKeyDown, onKeyDown, supportNewline]);\n  const onRenderChildren = (): JSX.Element => {\n    return <Stack horizontal className={mergedChildrenStyle}>\n        {children}\n      </Stack>;\n  };\n  const renderTextField = (): JSX.Element => {\n    const textFieldProps: ITextFieldProps = {\n      autoFocus: props.autoFocus === 'sendBoxTextField',\n      multiline: true,\n      autoAdjustHeight: true,\n      multiple: false,\n      resizable: false,\n      componentRef: textFieldRef,\n      id,\n      inputClassName: mergedInputFieldStyle,\n      placeholder: placeholderText,\n      autoComplete: 'off',\n      styles: mergedTextFieldStyle,\n      disabled,\n      errorMessage,\n      onRenderSuffix: onRenderChildren\n    };\n\n    /* @conditional-compile-remove(mention) */\n    const textFieldWithMentionProps: TextFieldWithMentionProps = {\n      textFieldProps: textFieldProps,\n      dataUiId: dataUiId,\n      textValue: textValue,\n      onChange: onChange,\n      onKeyDown: onKeyDown,\n      onEnterKeyDown: onEnterKeyDown,\n      textFieldRef: textFieldRef,\n      supportNewline: supportNewline,\n      mentionLookupOptions: props.mentionLookupOptions\n    };\n    /* @conditional-compile-remove(mention) */\n    if (props.mentionLookupOptions) {\n      return <TextFieldWithMention {...textFieldWithMentionProps} />;\n    }\n    return <TextField {...textFieldProps} data-ui-id={dataUiId} value={textValue} onChange={onChange} onKeyDown={onTextFieldKeyDown} onFocus={e => {\n      // Fix for setting the cursor to the correct position when multiline is true\n      // This approach should be reviewed during migration to FluentUI v9\n      e.currentTarget.value = '';\n      e.currentTarget.value = textValue;\n    }} />;\n  };\n  return <Stack className={mergedRootStyle}>\n      <div className={mergedTextContainerStyle}>{renderTextField()}</div>\n    </Stack>;\n};\n\n/**\n * Props for displaying a send button besides the text input area.\n *\n * @private\n */\nexport type InputBoxButtonProps = {\n  onRenderIcon: (isHover: boolean) => JSX.Element;\n  onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n  className?: string;\n  id?: string;\n  ariaLabel?: string;\n  tooltipContent?: string;\n};\n\n/**\n * @private\n */\nexport const InputBoxButton = (props: InputBoxButtonProps): JSX.Element => {\n  const {\n    onRenderIcon,\n    onClick,\n    ariaLabel,\n    className,\n    id,\n    tooltipContent\n  } = props;\n  const [isHover, setIsHover] = useState(false);\n  const mergedButtonStyle = mergeStyles(inputButtonStyle, className);\n  const theme = useTheme();\n  const calloutStyle: Partial<ICalloutContentStyles> = {\n    root: {\n      padding: 0\n    },\n    calloutMain: {\n      padding: '0.5rem'\n    }\n  };\n\n  // Place callout with no gap between it and the button.\n  const calloutProps = {\n    gapSpace: 0,\n    styles: calloutStyle,\n    backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n  };\n  return <TooltipHost hostClassName={inputButtonTooltipStyle} content={tooltipContent} calloutProps={{\n    ...calloutProps\n  }}>\n      <IconButton className={mergedButtonStyle} ariaLabel={ariaLabel} onClick={onClick} id={id} onMouseEnter={() => {\n      setIsHover(true);\n    }} onMouseLeave={() => {\n      setIsHover(false);\n    }}\n    // VoiceOver fix: Avoid icon from stealing focus when IconButton is double-tapped to send message by wrapping with Stack with pointerEvents style to none\n    onRenderIcon={() => <Stack className={iconWrapperStyle}>{onRenderIcon(isHover)}</Stack>} />\n    </TooltipHost>;\n};"]}
+{"version":3,"file":"InputBoxComponent.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/InputBoxComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useState, ReactNode, FormEvent, useCallback } from 'react';\nimport { Stack, TextField, mergeStyles, IStyle, ITextField, concatStyleSets, IconButton, TooltipHost, ICalloutContentStyles, ITextFieldProps } from '@fluentui/react';\nimport { BaseCustomStyles } from '../types';\nimport { isEnterKeyEventFromCompositionSession } from './utils';\nimport { inputBoxStyle, inputBoxWrapperStyle, inputButtonStyle, textFieldStyle, textContainerStyle, newLineButtonsContainerStyle, inputBoxNewLineSpaceAffordance, inputButtonTooltipStyle, iconWrapperStyle } from './styles/InputBoxComponent.style';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport { useTheme } from '../theming';\n/**\n * @private\n */\nexport interface InputBoxStylesProps extends BaseCustomStyles {\n  /** Styles for the text field. */\n  textField?: IStyle;\n\n  /** Styles for the system message; These styles will be ignored when a custom system message component is provided. */\n  systemMessage?: IStyle;\n\n  /** Styles for customizing the container of the text field */\n  textFieldContainer?: IStyle;\n}\ntype InputBoxComponentProps = {\n  children: ReactNode;\n  /**\n   * Inline child elements passed in. Setting to false will mean they are on a new line.\n   */\n  inlineChildren: boolean;\n  'data-ui-id'?: string;\n  id?: string;\n  textValue: string; // This could be plain text or HTML.\n  onChange: (event?: FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => void;\n  textFieldRef?: React.RefObject<ITextField>;\n  inputClassName?: string;\n  placeholderText?: string;\n  supportNewline?: boolean;\n  maxLength: number;\n  onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;\n  onEnterKeyDown?: () => void;\n  errorMessage?: string | React.ReactElement;\n  disabled?: boolean;\n  styles?: InputBoxStylesProps;\n  autoFocus?: 'sendBoxTextField';\n};\n\n/**\n * @private\n */\nexport const InputBoxComponent = (props: InputBoxComponentProps): JSX.Element => {\n  const {\n    styles,\n    id,\n    'data-ui-id': dataUiId,\n    textValue,\n    onChange,\n    textFieldRef,\n    placeholderText,\n    onKeyDown,\n    onEnterKeyDown,\n    supportNewline,\n    inputClassName,\n    errorMessage,\n    disabled,\n    children\n  } = props;\n  const mergedRootStyle = mergeStyles(inputBoxWrapperStyle, styles?.root);\n  const mergedInputFieldStyle = mergeStyles(inputBoxStyle, inputClassName, props.inlineChildren ? {} : inputBoxNewLineSpaceAffordance);\n  const mergedTextContainerStyle = mergeStyles(textContainerStyle, styles?.textFieldContainer);\n  const mergedTextFieldStyle = concatStyleSets(textFieldStyle, {\n    fieldGroup: styles?.textField,\n    errorMessage: styles?.systemMessage,\n    suffix: {\n      backgroundColor: 'transparent',\n      padding: '0 0'\n    }\n  });\n  const mergedChildrenStyle = mergeStyles(props.inlineChildren ? {} : newLineButtonsContainerStyle);\n  const onTextFieldKeyDown = useCallback((ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n    if (isEnterKeyEventFromCompositionSession(ev)) {\n      return;\n    }\n    if (ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline)) {\n      ev.preventDefault();\n      onEnterKeyDown && onEnterKeyDown();\n    }\n    onKeyDown && onKeyDown(ev);\n  }, [onEnterKeyDown, onKeyDown, supportNewline]);\n  const onRenderChildren = (): JSX.Element => {\n    return <Stack horizontal className={mergedChildrenStyle}>\n        {children}\n      </Stack>;\n  };\n  const renderTextField = (): JSX.Element => {\n    const textFieldProps: ITextFieldProps = {\n      autoFocus: props.autoFocus === 'sendBoxTextField',\n      multiline: true,\n      autoAdjustHeight: true,\n      multiple: false,\n      resizable: false,\n      componentRef: textFieldRef,\n      id,\n      inputClassName: mergedInputFieldStyle,\n      placeholder: placeholderText,\n      autoComplete: 'off',\n      styles: mergedTextFieldStyle,\n      disabled,\n      errorMessage,\n      onRenderSuffix: onRenderChildren\n    };\n    return <TextField {...textFieldProps} data-ui-id={dataUiId} value={textValue} onChange={onChange} onKeyDown={onTextFieldKeyDown} onFocus={e => {\n      // Fix for setting the cursor to the correct position when multiline is true\n      // This approach should be reviewed during migration to FluentUI v9\n      e.currentTarget.value = '';\n      e.currentTarget.value = textValue;\n    }} />;\n  };\n  return <Stack className={mergedRootStyle}>\n      <div className={mergedTextContainerStyle}>{renderTextField()}</div>\n    </Stack>;\n};\n\n/**\n * Props for displaying a send button besides the text input area.\n *\n * @private\n */\nexport type InputBoxButtonProps = {\n  onRenderIcon: (isHover: boolean) => JSX.Element;\n  onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n  className?: string;\n  id?: string;\n  ariaLabel?: string;\n  tooltipContent?: string;\n};\n\n/**\n * @private\n */\nexport const InputBoxButton = (props: InputBoxButtonProps): JSX.Element => {\n  const {\n    onRenderIcon,\n    onClick,\n    ariaLabel,\n    className,\n    id,\n    tooltipContent\n  } = props;\n  const [isHover, setIsHover] = useState(false);\n  const mergedButtonStyle = mergeStyles(inputButtonStyle, className);\n  const theme = useTheme();\n  const calloutStyle: Partial<ICalloutContentStyles> = {\n    root: {\n      padding: 0\n    },\n    calloutMain: {\n      padding: '0.5rem'\n    }\n  };\n\n  // Place callout with no gap between it and the button.\n  const calloutProps = {\n    gapSpace: 0,\n    styles: calloutStyle,\n    backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n  };\n  return <TooltipHost hostClassName={inputButtonTooltipStyle} content={tooltipContent} calloutProps={{\n    ...calloutProps\n  }}>\n      <IconButton className={mergedButtonStyle} ariaLabel={ariaLabel} onClick={onClick} id={id} onMouseEnter={() => {\n      setIsHover(true);\n    }} onMouseLeave={() => {\n      setIsHover(false);\n    }}\n    // VoiceOver fix: Avoid icon from stealing focus when IconButton is double-tapped to send message by wrapping with Stack with pointerEvents style to none\n    onRenderIcon={() => <Stack className={iconWrapperStyle}>{onRenderIcon(isHover)}</Stack>} />\n    </TooltipHost>;\n};"]}

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

@@ -1 +1 @@
-{"version":3,"file":"LocalVideoTile.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/LocalVideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { Stack } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { OnRenderAvatarCallback, VideoStreamOptions, CreateVideoStreamViewResult } from '../types';\nimport { LocalVideoCameraCycleButton, LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nimport { StreamMedia } from './StreamMedia';\nimport { useLocalVideoStreamLifecycleMaintainer, LocalVideoStreamLifecycleMaintainerProps } from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { VideoTile, VideoTileStylesProps } from './VideoTile';\n\n/**\n * A memoized version of VideoTile for rendering local participant.\n *\n * @internal\n */\nexport const _LocalVideoTile = React.memo((props: {\n  userId?: string;\n  onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  onDisposeLocalStreamView?: () => void;\n  isAvailable?: boolean;\n  isMuted?: boolean;\n  renderElement?: HTMLElement;\n  displayName?: string;\n  initialsName?: string;\n  localVideoViewOptions?: VideoStreamOptions;\n  onRenderAvatar?: OnRenderAvatarCallback;\n  showLabel: boolean;\n  showMuteIndicator?: boolean;\n  showCameraSwitcherInLocalPreview?: boolean;\n  localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n  localVideoCameraSwitcherLabel?: string;\n  localVideoSelectedDescription?: string;\n  styles?: VideoTileStylesProps;\n  personaMinSize?: number;\n}) => {\n  const {\n    isAvailable,\n    isMuted,\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    localVideoViewOptions,\n    renderElement,\n    userId,\n    showLabel,\n    displayName,\n    initialsName,\n    onRenderAvatar,\n    showMuteIndicator,\n    styles,\n    showCameraSwitcherInLocalPreview,\n    localVideoCameraCycleButtonProps,\n    localVideoCameraSwitcherLabel,\n    localVideoSelectedDescription\n  } = props;\n  const localVideoStreamProps: LocalVideoStreamLifecycleMaintainerProps = useMemo(() => ({\n    isMirrored: localVideoViewOptions?.isMirrored,\n    isStreamAvailable: isAvailable,\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    renderElementExists: !!renderElement,\n    scalingMode: localVideoViewOptions?.scalingMode\n  }), [isAvailable, localVideoViewOptions?.isMirrored, localVideoViewOptions?.scalingMode, onCreateLocalStreamView, onDisposeLocalStreamView, renderElement]);\n\n  // Handle creating, destroying and updating the video stream as necessary\n  useLocalVideoStreamLifecycleMaintainer(localVideoStreamProps);\n  const renderVideoStreamElement = useMemo(() => {\n    // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which\n    // implies that, after their threshold, all streams have no child (blank video)\n    if (!renderElement || !renderElement.childElementCount) {\n      // Returning `undefined` results in the placeholder with avatar being shown\n      return undefined;\n    }\n    return <>\n          <FloatingLocalCameraCycleButton showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview ?? false} localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps} localVideoCameraSwitcherLabel={localVideoCameraSwitcherLabel} localVideoSelectedDescription={localVideoSelectedDescription} />\n          <StreamMedia videoStreamElement={renderElement} isMirrored={true} />\n        </>;\n  }, [localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription, renderElement, showCameraSwitcherInLocalPreview]);\n  return <VideoTile key={userId ?? 'local-video-tile'} userId={userId} renderElement={renderVideoStreamElement} showLabel={showLabel} displayName={displayName} initialsName={initialsName} styles={styles} onRenderPlaceholder={onRenderAvatar} isMuted={isMuted} showMuteIndicator={showMuteIndicator} personaMinSize={props.personaMinSize} />;\n});\nconst FloatingLocalCameraCycleButton = (props: {\n  showCameraSwitcherInLocalPreview: boolean;\n  localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n  localVideoCameraSwitcherLabel?: string;\n  localVideoSelectedDescription?: string;\n}): JSX.Element => {\n  const {\n    showCameraSwitcherInLocalPreview,\n    localVideoCameraCycleButtonProps,\n    localVideoCameraSwitcherLabel,\n    localVideoSelectedDescription\n  } = props;\n  const ariaDescription = localVideoCameraCycleButtonProps?.selectedCamera && localVideoSelectedDescription && _formatString(localVideoSelectedDescription, {\n    cameraName: localVideoCameraCycleButtonProps.selectedCamera.name\n  });\n  return <Stack horizontalAlign=\"end\">\n      {showCameraSwitcherInLocalPreview && localVideoCameraCycleButtonProps?.cameras !== undefined && localVideoCameraCycleButtonProps?.selectedCamera !== undefined && localVideoCameraCycleButtonProps?.onSelectCamera !== undefined && <LocalVideoCameraCycleButton cameras={localVideoCameraCycleButtonProps.cameras} selectedCamera={localVideoCameraCycleButtonProps.selectedCamera} onSelectCamera={localVideoCameraCycleButtonProps.onSelectCamera} label={localVideoCameraSwitcherLabel} ariaDescription={ariaDescription} />}\n    </Stack>;\n};\"../../../acs-ui-common/src\""]}
+{"version":3,"file":"LocalVideoTile.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/LocalVideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { Stack } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { OnRenderAvatarCallback, VideoStreamOptions, CreateVideoStreamViewResult } from '../types';\nimport { LocalVideoCameraCycleButton, LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nimport { StreamMedia } from './StreamMedia';\nimport { useLocalVideoStreamLifecycleMaintainer, LocalVideoStreamLifecycleMaintainerProps } from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { VideoTile, VideoTileStylesProps } from './VideoTile';\n/**\n * A memoized version of VideoTile for rendering local participant.\n *\n * @internal\n */\nexport const _LocalVideoTile = React.memo((props: {\n  userId?: string;\n  onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  onDisposeLocalStreamView?: () => void;\n  isAvailable?: boolean;\n  isMuted?: boolean;\n  renderElement?: HTMLElement;\n  displayName?: string;\n  initialsName?: string;\n  localVideoViewOptions?: VideoStreamOptions;\n  onRenderAvatar?: OnRenderAvatarCallback;\n  showLabel: boolean;\n  showMuteIndicator?: boolean;\n  showCameraSwitcherInLocalPreview?: boolean;\n  localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n  localVideoCameraSwitcherLabel?: string;\n  localVideoSelectedDescription?: string;\n  styles?: VideoTileStylesProps;\n  personaMinSize?: number;\n}) => {\n  const {\n    isAvailable,\n    isMuted,\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    localVideoViewOptions,\n    renderElement,\n    userId,\n    showLabel,\n    displayName,\n    initialsName,\n    onRenderAvatar,\n    showMuteIndicator,\n    styles,\n    showCameraSwitcherInLocalPreview,\n    localVideoCameraCycleButtonProps,\n    localVideoCameraSwitcherLabel,\n    localVideoSelectedDescription\n  } = props;\n  const localVideoStreamProps: LocalVideoStreamLifecycleMaintainerProps = useMemo(() => ({\n    isMirrored: localVideoViewOptions?.isMirrored,\n    isStreamAvailable: isAvailable,\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    renderElementExists: !!renderElement,\n    scalingMode: localVideoViewOptions?.scalingMode\n  }), [isAvailable, localVideoViewOptions?.isMirrored, localVideoViewOptions?.scalingMode, onCreateLocalStreamView, onDisposeLocalStreamView, renderElement]);\n\n  // Handle creating, destroying and updating the video stream as necessary\n  useLocalVideoStreamLifecycleMaintainer(localVideoStreamProps);\n  const renderVideoStreamElement = useMemo(() => {\n    // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which\n    // implies that, after their threshold, all streams have no child (blank video)\n    if (!renderElement || !renderElement.childElementCount) {\n      // Returning `undefined` results in the placeholder with avatar being shown\n      return undefined;\n    }\n    return <>\n          <FloatingLocalCameraCycleButton showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview ?? false} localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps} localVideoCameraSwitcherLabel={localVideoCameraSwitcherLabel} localVideoSelectedDescription={localVideoSelectedDescription} />\n          <StreamMedia videoStreamElement={renderElement} isMirrored={true} />\n        </>;\n  }, [localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription, renderElement, showCameraSwitcherInLocalPreview]);\n  return <VideoTile key={userId ?? 'local-video-tile'} userId={userId} renderElement={renderVideoStreamElement} showLabel={showLabel} displayName={displayName} initialsName={initialsName} styles={styles} onRenderPlaceholder={onRenderAvatar} isMuted={isMuted} showMuteIndicator={showMuteIndicator} personaMinSize={props.personaMinSize} />;\n});\nconst FloatingLocalCameraCycleButton = (props: {\n  showCameraSwitcherInLocalPreview: boolean;\n  localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n  localVideoCameraSwitcherLabel?: string;\n  localVideoSelectedDescription?: string;\n}): JSX.Element => {\n  const {\n    showCameraSwitcherInLocalPreview,\n    localVideoCameraCycleButtonProps,\n    localVideoCameraSwitcherLabel,\n    localVideoSelectedDescription\n  } = props;\n  const ariaDescription = localVideoCameraCycleButtonProps?.selectedCamera && localVideoSelectedDescription && _formatString(localVideoSelectedDescription, {\n    cameraName: localVideoCameraCycleButtonProps.selectedCamera.name\n  });\n  return <Stack horizontalAlign=\"end\">\n      {showCameraSwitcherInLocalPreview && localVideoCameraCycleButtonProps?.cameras !== undefined && localVideoCameraCycleButtonProps?.selectedCamera !== undefined && localVideoCameraCycleButtonProps?.onSelectCamera !== undefined && <LocalVideoCameraCycleButton cameras={localVideoCameraCycleButtonProps.cameras} selectedCamera={localVideoCameraCycleButtonProps.selectedCamera} onSelectCamera={localVideoCameraCycleButtonProps.onSelectCamera} label={localVideoCameraSwitcherLabel} ariaDescription={ariaDescription} />}\n    </Stack>;\n};\"../../../acs-ui-common/src\""]}

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

@@ -1,11 +1,6 @@
 import { IStyle } from '@fluentui/react';
 import { BaseCustomStyles, ChatMessage, CustomMessage, SystemMessage, OnRenderAvatarCallback, Message, ReadReceiptsBySenderId, ComponentSlotStyle } from '../types';
-import { BlockedMessage } from '../types';
 import { MessageStatusIndicatorProps } from './MessageStatusIndicator';
-import { FileDownloadHandler } from './FileDownloadCards';
-import { FileMetadata } from './FileDownloadCards';
-import { AttachmentDownloadResult } from './FileDownloadCards';
-import { MentionOptions } from './MentionPopover';
 /**
  * Fluent styles for {@link MessageThread}.
  *
@@ -31,7 +26,6 @@ export interface MessageThreadStyles extends BaseCustomStyles {
     /** Styles for system message container. */
     systemMessageContainer?: ComponentSlotStyle;
     /** Styles for blocked message container. */
-    blockedMessageContainer?: ComponentSlotStyle;
     /** Styles for message status indicator container. */
     messageStatusContainer?: (mine: boolean) => IStyle;
 }
@@ -93,14 +87,6 @@ export interface MessageThreadStrings {
     editBoxSubmitButton: string;
     /** String for action menu indicating there are more options */
     actionMenuMoreOptions?: string;
-    /** String for download file button in file card */
-    downloadFile: string;
-    /** String for policy violation message removal */
-    blockedWarningText: string;
-    /** String for policy violation message removal details link */
-    blockedWarningLinkText: string;
-    /** String for aria text in file attachment group*/
-    fileCardGroupMessage: string;
 }
 /**
  * Arguments for {@link MessageThreadProps.onRenderJumpToNewMessageButton}.
@@ -123,9 +109,7 @@ export declare type MessageRenderer = (props: MessageProps) => JSX.Element;
  * @public
  * Callback function run when a message is updated.
  */
-export declare type UpdateMessageCallback = (messageId: string, content: string, /* @conditional-compile-remove(file-sharing) */ metadata?: Record<string, string>, /* @conditional-compile-remove(file-sharing) */ options?: {
-    attachedFilesMetadata?: FileMetadata[];
-}) => Promise<void>;
+export declare type UpdateMessageCallback = (messageId: string, content: string) => Promise<void>;
 /**
  * @public
  * Callback function run when a message edit is cancelled.
@@ -144,7 +128,7 @@ export declare type MessageThreadProps = {
     /**
      * Messages to render in message thread. A message can be of type `ChatMessage`, `SystemMessage`, `BlockedMessage` or `CustomMessage`.
      */
-    messages: (ChatMessage | SystemMessage | CustomMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage)[];
+    messages: (ChatMessage | SystemMessage | CustomMessage)[];
     /**
      * number of participants in the thread
      */
@@ -226,17 +210,6 @@ export declare type MessageThreadProps = {
      * `messageRenderer` is not provided for `CustomMessage` and thus only available for `ChatMessage` and `SystemMessage`.
      */
     onRenderMessage?: (messageProps: MessageProps, messageRenderer?: MessageRenderer) => JSX.Element;
-    /**
-     * Optional callback to render uploaded files in the message component.
-     * @beta
-     */
-    onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;
-    /**
-     * Optional callback to retrieve the inline image in a message.
-     * @param attachment - FileMetadata object we want to render
-     * @beta
-     */
-    onFetchAttachments?: (attachment: FileMetadata) => Promise<AttachmentDownloadResult[]>;
     /**
      * Optional callback to edit a message.
      *
@@ -278,23 +251,6 @@ export declare type MessageThreadProps = {
      * Optional strings to override in component
      */
     strings?: Partial<MessageThreadStrings>;
-    /**
-     * @beta
-     * Optional function called when someone clicks on the file download icon.
-     * If file attachments are defined in the `message.metadata` property using the `fileSharingMetadata` key,
-     * this function will be called with the data inside `fileSharingMetadata` key.
-     */
-    fileDownloadHandler?: FileDownloadHandler;
-    /**
-     * Optional function to provide customized date format.
-     * @beta
-     */
-    onDisplayDateTimeString?: (messageDate: Date) => string;
-    /**
-     * Optional props needed to lookup a mention query and display mentions
-     * @beta
-     */
-    mentionOptions?: MentionOptions;
 };
 /**
  * Props to render a single message.

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

@@ -12,8 +12,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Chat, Flex, mergeStyles as mergeNorthstarThemes, Ref } from "../../../northstar-wrapper/src";
 import { DownIconStyle, newMessageButtonContainerStyle, messageThreadContainerStyle, chatStyle, buttonWithIconStyles, newMessageButtonStyle, messageStatusContainerStyle, noMessageStatusStyle, defaultChatItemMessageContainer, defaultMyChatMessageContainer, defaultChatMessageContainer, gutterWithAvatar, gutterWithHiddenAvatar, FailedMyChatMessageContainer } from './styles/MessageThread.styles';
-/* @conditional-compile-remove(data-loss-prevention) */
-import { defaultBlockedMessageStyleContainer } from './styles/MessageThread.styles';
 import { Icon, mergeStyles, Persona, PersonaSize, PrimaryButton, Stack } from '@fluentui/react';
 import { delay } from './utils/delay';
 import { MessageStatusIndicator } from './MessageStatusIndicator';
@@ -25,8 +23,6 @@ import { isNarrowWidth, _useContainerWidth } from './utils/responsive';
 import getParticipantsWhoHaveReadMessage from './utils/getParticipantsWhoHaveReadMessage';
 import { useTheme } from '../theming';
 import LiveAnnouncer from './Announcer/LiveAnnouncer';
-/* @conditional-compile-remove(file-sharing) */ /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-import { initializeFileTypeIcons } from '@fluentui/react-file-type-icons';
 const isMessageSame = (first, second) => {
     return first.messageId === second.messageId && first.content === second.content && first.contentType === second.contentType && JSON.stringify(first.createdOn) === JSON.stringify(second.createdOn) && first.senderId === second.senderId && first.senderDisplayName === second.senderDisplayName && first.status === second.status;
 };
@@ -102,7 +98,7 @@ const DefaultSystemMessage = (props) => {
     return React.createElement(React.Fragment, null);
 };
 const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate, showMessageStatus, onRenderAvatar, shouldOverlapAvatarAndMessage, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, theme, _attached, statusToRender, participantCount, readCount, onRenderMessage, onUpdateMessage, onCancelEditMessage, onDeleteMessage, onSendMessage, disableEditing) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d;
     const messageProps = {
         message,
         strings,
@@ -142,19 +138,11 @@ const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate,
             key: _messageKey
         };
     };
-    /* @conditional-compile-remove(data-loss-prevention) */
-    // Similar logic as switch statement case 'chat', if statement for conditional compile (merge logic to switch case when stablize)
-    if (message.messageType === 'blocked') {
-        const myChatMessageStyle = message.status === 'failed' ? (_b = (_a = styles === null || styles === void 0 ? void 0 : styles.failedMyChatMessageContainer) !== null && _a !== void 0 ? _a : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer) !== null && _b !== void 0 ? _b : FailedMyChatMessageContainer : (_c = styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer) !== null && _c !== void 0 ? _c : defaultBlockedMessageStyleContainer(theme);
-        const blockedMessageStyle = (_d = styles === null || styles === void 0 ? void 0 : styles.blockedMessageContainer) !== null && _d !== void 0 ? _d : defaultBlockedMessageStyleContainer(theme);
-        messageProps.messageContainerStyle = message.mine ? myChatMessageStyle : blockedMessageStyle;
-        return chatMessageItemProps(message, messageProps);
-    }
     switch (message.messageType) {
         case 'chat':
             {
-                const myChatMessageStyle = message.status === 'failed' ? (_f = (_e = styles === null || styles === void 0 ? void 0 : styles.failedMyChatMessageContainer) !== null && _e !== void 0 ? _e : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer) !== null && _f !== void 0 ? _f : FailedMyChatMessageContainer : (_g = styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer) !== null && _g !== void 0 ? _g : defaultMyChatMessageContainer;
-                const chatMessageStyle = (_h = styles === null || styles === void 0 ? void 0 : styles.chatMessageContainer) !== null && _h !== void 0 ? _h : defaultChatMessageContainer(theme);
+                const myChatMessageStyle = message.status === 'failed' ? (_b = (_a = styles === null || styles === void 0 ? void 0 : styles.failedMyChatMessageContainer) !== null && _a !== void 0 ? _a : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer) !== null && _b !== void 0 ? _b : FailedMyChatMessageContainer : (_c = styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer) !== null && _c !== void 0 ? _c : defaultMyChatMessageContainer;
+                const chatMessageStyle = (_d = styles === null || styles === void 0 ? void 0 : styles.chatMessageContainer) !== null && _d !== void 0 ? _d : defaultChatMessageContainer(theme);
                 messageProps.messageContainerStyle = message.mine ? myChatMessageStyle : chatMessageStyle;
                 return chatMessageItemProps(message, messageProps);
             }
@@ -200,13 +188,7 @@ const getLastChatMessageIdWithStatus = (messages, status) => {
  */
 export const MessageThread = (props) => {
     var _a;
-    const { messages: newMessages, userId, participantCount, readReceiptsBySenderId, styles, disableJumpToNewMessageButton = false, showMessageDate = false, showMessageStatus = false, numberOfChatMessagesToReload = 5, onMessageSeen, onRenderMessageStatus, onRenderAvatar, onLoadPreviousChatMessages, onRenderJumpToNewMessageButton, onRenderMessage, onUpdateMessage, onCancelEditMessage, onDeleteMessage, onSendMessage, 
-    /* @conditional-compile-remove(date-time-customization) */
-    onDisplayDateTimeString, 
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    onFetchAttachments, 
-    /* @conditional-compile-remove(mention) */
-    mentionOptions } = props;
+    const { messages: newMessages, userId, participantCount, readReceiptsBySenderId, styles, disableJumpToNewMessageButton = false, showMessageDate = false, showMessageStatus = false, numberOfChatMessagesToReload = 5, onMessageSeen, onRenderMessageStatus, onRenderAvatar, onLoadPreviousChatMessages, onRenderJumpToNewMessageButton, onRenderMessage, onUpdateMessage, onCancelEditMessage, onDeleteMessage, onSendMessage } = props;
     const onRenderFileDownloads = onRenderFileDownloadsTrampoline(props);
     const [messages, setMessages] = useState([]);
     // We need this state to wait for one tick and scroll to bottom after messages have been initialized.
@@ -223,19 +205,6 @@ export const MessageThread = (props) => {
     const [lastSendingChatMessage, setLastSendingChatMessage] = useState(undefined);
     // readCount and participantCount will only need to be updated on-fly when user hover on an indicator
     const [readCountForHoveredIndicator, setReadCountForHoveredIndicator] = useState(undefined);
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    const [inlineAttachments, setInlineAttachments] = useState({});
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    const onFetchInlineAttachment = useCallback((attachment) => __awaiter(void 0, void 0, void 0, function* () {
-        if (!onFetchAttachments || attachment.attachmentType !== 'inlineImage' || attachment.id in inlineAttachments) {
-            return;
-        }
-        setInlineAttachments(prev => (Object.assign(Object.assign({}, prev), { [attachment.id]: '' })));
-        const attachmentDownloadResult = yield onFetchAttachments(attachment);
-        if (attachmentDownloadResult[0]) {
-            setInlineAttachments(prev => (Object.assign(Object.assign({}, prev), { [attachment.id]: attachmentDownloadResult[0].blobUrl })));
-        }
-    }), [inlineAttachments, onFetchAttachments]);
     const isAllChatMessagesLoadedRef = useRef(false);
     // isAllChatMessagesLoadedRef needs to be updated every time when a new adapter is set in order to display correct data
     // onLoadPreviousChatMessages is updated when a new adapter is set
@@ -244,10 +213,6 @@ export const MessageThread = (props) => {
             isAllChatMessagesLoadedRef.current = false;
         }
     }, [onLoadPreviousChatMessages]);
-    /* @conditional-compile-remove(file-sharing) */ /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    useEffect(() => {
-        initializeFileTypeIcons();
-    }, []);
     const previousTopRef = useRef(-1);
     const previousHeightRef = useRef(-1);
     const messageIdSeenByMeRef = useRef('');
@@ -431,21 +396,11 @@ export const MessageThread = (props) => {
     const strings = useMemo(() => (Object.assign(Object.assign({}, localeStrings), props.strings)), [localeStrings, props.strings]);
     // To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp need to be regenerated)
     const defaultChatMessageRenderer = useCallback((messageProps) => {
-        if (messageProps.message.messageType === 'chat' || /* @conditional-compile-remove(data-loss-prevention) */ messageProps.message.messageType === 'blocked') {
-            return React.createElement(ChatMessageComponent, Object.assign({}, messageProps, { onRenderFileDownloads: onRenderFileDownloads, 
-                /* @conditional-compile-remove(file-sharing) */ strings: strings, message: messageProps.message, userId: props.userId, remoteParticipantsCount: participantCount ? participantCount - 1 : 0, inlineAcceptRejectEditButtons: !isNarrow, onRenderAvatar: onRenderAvatar, showMessageStatus: showMessageStatus, messageStatus: messageProps.message.status, onActionButtonClick: onActionButtonClickMemo, 
-                /* @conditional-compile-remove(date-time-customization) */ onDisplayDateTimeString: onDisplayDateTimeString, 
-                /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ onFetchAttachments: onFetchInlineAttachment, 
-                /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ attachmentsMap: inlineAttachments, 
-                /* @conditional-compile-remove(mention) */ mentionOptions: mentionOptions }));
+        if (messageProps.message.messageType === 'chat') {
+            return React.createElement(ChatMessageComponent, Object.assign({}, messageProps, { onRenderFileDownloads: onRenderFileDownloads, message: messageProps.message, userId: props.userId, remoteParticipantsCount: participantCount ? participantCount - 1 : 0, inlineAcceptRejectEditButtons: !isNarrow, onRenderAvatar: onRenderAvatar, showMessageStatus: showMessageStatus, messageStatus: messageProps.message.status, onActionButtonClick: onActionButtonClickMemo }));
         }
         return React.createElement(React.Fragment, null);
-    }, [onRenderFileDownloads,
-        strings, props.userId, participantCount, isNarrow, onRenderAvatar, showMessageStatus, onActionButtonClickMemo,
-        onDisplayDateTimeString,
-        onFetchInlineAttachment,
-        inlineAttachments,
-        mentionOptions]);
+    }, [onRenderFileDownloads, props.userId, participantCount, isNarrow, onRenderAvatar, showMessageStatus, onActionButtonClickMemo]);
     const defaultStatusRenderer = useCallback((message, status, participantCount, readCount) => {
         const onToggleToolTip = (isToggled) => {
             if (isToggled && readReceiptsBySenderIdRef.current) {
@@ -464,7 +419,7 @@ export const MessageThread = (props) => {
         return messages.map((message, index) => {
             let key = message.messageId;
             let statusToRender = undefined;
-            if (message.messageType === 'chat' || /* @conditional-compile-remove(data-loss-prevention) */ message.messageType === 'blocked') {
+            if (message.messageType === 'chat') {
                 if ((!message.messageId || message.messageId === '') && 'clientMessageId' in message) {
                     key = message.clientMessageId;
                 }
@@ -494,7 +449,7 @@ export const MessageThread = (props) => {
             return memoizedMessageFn(key !== null && key !== void 0 ? key : 'id_' + index, message, showMessageDate, showMessageStatus, onRenderAvatar, isNarrow, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, theme, 
             // Temporary solution to make sure we re-render if attach attribute is changed.
             // The proper fix should be in selector.
-            message.messageType === 'chat' || /* @conditional-compile-remove(data-loss-prevention) */ message.messageType === 'blocked' ? message.attached : undefined, statusToRender, participantCount, readCountForHoveredIndicator, onRenderMessage, onUpdateMessage, onCancelEditMessage, onDeleteMessage, onSendMessage, props.disableEditing);
+            message.messageType === 'chat' ? message.attached : undefined, statusToRender, participantCount, readCountForHoveredIndicator, onRenderMessage, onUpdateMessage, onCancelEditMessage, onDeleteMessage, onSendMessage, props.disableEditing);
         });
     }), [messages, showMessageDate, showMessageStatus, onRenderAvatar, isNarrow, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, theme, participantCount, readCountForHoveredIndicator, onRenderMessage, onUpdateMessage, onCancelEditMessage, onDeleteMessage, onSendMessage, lastSeenChatMessage, lastSendingChatMessage, lastDeliveredChatMessage, props.disableEditing]);
     const chatBody = useMemo(() => {
@@ -511,8 +466,6 @@ export const MessageThread = (props) => {
             React.createElement(Ref, { innerRef: chatScrollDivRef }, chatBody)));
 };
 const onRenderFileDownloadsTrampoline = (props) => {
-    /* @conditional-compile-remove(file-sharing) */
-    return props.onRenderFileDownloads;
     return undefined;
 };
 const linkStyles = (theme) => {