@azure/communication-react 1.5.1-alpha-202306020014 → 1.5.1-alpha-202306060014

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageContent.js

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 import React from 'react';
-/* @conditional-compile-remove(teams-inline-images) */
+/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
 import { useEffect } from 'react';
 import { _formatString } from "../../../../acs-ui-common/src";
 import { Parser, ProcessNodeDefinitions, IsValidNodeDefinitions } from 'html-to-react';
@@ -34,7 +34,7 @@ const MessageContentWithLiveAria = (props) => {
 };
 const MessageContentAsRichTextHTML = (props) => {
     const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });
-    /* @conditional-compile-remove(teams-inline-images) */
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
     useEffect(() => {
         var _a;
         (_a = props.message.attachedFilesMetadata) === null || _a === void 0 ? void 0 : _a.map((fileMetadata) => {
@@ -91,7 +91,7 @@ const messageContentAriaText = (props) => {
 };
 const processNodeDefinitions = ProcessNodeDefinitions();
 const htmlToReactParser = Parser();
-/* @conditional-compile-remove(teams-inline-images) */
+/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
 const processInlineImage = (props) => ({
     // Custom <img> processing
     shouldProcessNode: (node) => {
@@ -137,7 +137,7 @@ const processMention = (props) => ({
 const processHtmlToReact = (props) => {
     var _a;
     const steps = [
-        /* @conditional-compile-remove(teams-inline-images) */
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
         processInlineImage(props),
         /* @conditional-compile-remove(mention) */
         processMention(props),

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageContent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageContent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React from 'react';\n/* @conditional-compile-remove(teams-inline-images) */\nimport { useEffect } from 'react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { Parser, ProcessNodeDefinitions, IsValidNodeDefinitions, ProcessingInstructionType } from 'html-to-react';\n\nimport Linkify from 'react-linkify';\nimport { ChatMessage } from '../../types/ChatMessage';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../types/ChatMessage';\nimport { Link } from '@fluentui/react';\n/* @conditional-compile-remove(mention) */\nimport { MentionDisplayOptions, Mention } from '../MentionPopover';\n\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { FontIcon, Stack } from '@fluentui/react';\nimport { MessageThreadStrings } from '../MessageThread';\n/* @conditional-compile-remove(teams-inline-images) */\nimport { FileMetadata } from '../FileDownloadCards';\nimport LiveMessage from '../Announcer/LiveMessage';\n/* @conditional-compile-remove(mention) */\nimport { defaultOnMentionRender } from './MentionRenderer';\nimport DOMPurify from 'dompurify';\n\ntype ChatMessageContentProps = {\n  message: ChatMessage;\n  strings: MessageThreadStrings;\n  /* @conditional-compile-remove(mention) */\n  mentionDisplayOptions?: MentionDisplayOptions;\n  /* @conditional-compile-remove(teams-inline-images) */\n  attachmentsMap?: Record<string, string>;\n  /* @conditional-compile-remove(teams-inline-images) */\n  onFetchAttachment?: (attachment: FileMetadata) => Promise<void>;\n};\n\n/* @conditional-compile-remove(data-loss-prevention) */\ntype BlockedMessageContentProps = {\n  message: BlockedMessage;\n  strings: MessageThreadStrings;\n};\n\ntype MessageContentWithLiveAriaProps = {\n  message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;\n  liveMessage: string;\n  ariaLabel?: string;\n  content: JSX.Element;\n};\n\n/** @private */\nexport const ChatMessageContent = (props: ChatMessageContentProps): JSX.Element => {\n  switch (props.message.contentType) {\n    case 'text':\n      return MessageContentAsText(props);\n    case 'html':\n      return MessageContentAsRichTextHTML(props);\n    case 'richtext/html':\n      return MessageContentAsRichTextHTML(props);\n    default:\n      console.warn('unknown message content type');\n      return <></>;\n  }\n};\n\nconst MessageContentWithLiveAria = (props: MessageContentWithLiveAriaProps): JSX.Element => {\n  return (\n    <div data-ui-status={props.message.status} role=\"text\" aria-label={props.ariaLabel}>\n      <LiveMessage message={props.liveMessage} ariaLive=\"polite\" />\n      {props.content}\n    </div>\n  );\n};\n\nconst MessageContentAsRichTextHTML = (props: ChatMessageContentProps): JSX.Element => {\n  const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });\n\n  /* @conditional-compile-remove(teams-inline-images) */\n  useEffect(() => {\n    props.message.attachedFilesMetadata?.map((fileMetadata) => {\n      if (props.onFetchAttachment && props.attachmentsMap && props.attachmentsMap[fileMetadata.id] === undefined) {\n        props.onFetchAttachment(fileMetadata);\n      }\n    });\n  }, [props]);\n\n  return (\n    <MessageContentWithLiveAria\n      message={props.message}\n      liveMessage={`${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')}`}\n      ariaLabel={messageContentAriaText(props)}\n      content={processHtmlToReact(props)}\n    />\n  );\n};\n\nconst MessageContentAsText = (props: ChatMessageContentProps): JSX.Element => {\n  const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });\n  return (\n    <MessageContentWithLiveAria\n      message={props.message}\n      liveMessage={`${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')}`}\n      ariaLabel={messageContentAriaText(props)}\n      content={\n        <Linkify\n          componentDecorator={(decoratedHref: string, decoratedText: string, key: number) => {\n            return (\n              <Link target=\"_blank\" href={decoratedHref} key={key}>\n                {decoratedText}\n              </Link>\n            );\n          }}\n        >\n          {props.message.content}\n        </Linkify>\n      }\n    />\n  );\n};\n\n/* @conditional-compile-remove(data-loss-prevention) */\n/**\n * @private\n */\nexport const BlockedMessageContent = (props: BlockedMessageContentProps): JSX.Element => {\n  const Icon: JSX.Element = <FontIcon iconName={'DataLossPreventionProhibited'} />;\n  const blockedMessage =\n    props.message.warningText === undefined ? props.strings.blockedWarningText : props.message.warningText;\n  const blockedMessageLink = props.message.link;\n  const blockedMessageLinkText = blockedMessageLink\n    ? props.message.linkText ?? props.strings.blockedWarningLinkText\n    : '';\n\n  const liveAuthor =\n    props.message.mine || props.message.senderDisplayName === undefined ? '' : props.message.senderDisplayName;\n  const liveBlockedWarningText = `${liveAuthor} ${blockedMessage} ${blockedMessageLinkText}`;\n  return (\n    <MessageContentWithLiveAria\n      message={props.message}\n      liveMessage={liveBlockedWarningText}\n      ariaLabel={liveBlockedWarningText}\n      content={\n        <Stack horizontal wrap>\n          {Icon}\n          {blockedMessage && <p>{blockedMessage}</p>}\n          {blockedMessageLink && (\n            <Link target={'_blank'} href={blockedMessageLink}>\n              {blockedMessageLinkText}\n            </Link>\n          )}\n        </Stack>\n      }\n    />\n  );\n};\n\n// https://stackoverflow.com/questions/28899298/extract-the-text-out-of-html-string-using-javascript\nconst extractContent = (s: string): string => {\n  const span = document.createElement('span');\n  span.innerHTML = s;\n  return span.textContent || span.innerText;\n};\n\nconst messageContentAriaText = (props: ChatMessageContentProps): string | undefined => {\n  // Strip all html tags from the content for aria.\n\n  return props.message.content\n    ? props.message.mine\n      ? _formatString(props.strings.messageContentMineAriaText, {\n          message: DOMPurify.sanitize(props.message.content, { ALLOWED_TAGS: [] })\n        })\n      : _formatString(props.strings.messageContentAriaText, {\n          author: `${props.message.senderDisplayName}`,\n          message: DOMPurify.sanitize(props.message.content, { ALLOWED_TAGS: [] })\n        })\n    : undefined;\n};\n\nconst processNodeDefinitions = ProcessNodeDefinitions();\nconst htmlToReactParser = Parser();\n\n/* @conditional-compile-remove(teams-inline-images) */\nconst processInlineImage = (props: ChatMessageContentProps): ProcessingInstructionType => ({\n  // Custom <img> processing\n  shouldProcessNode: (node): boolean => {\n    // Process img node with id in attachments list\n    return (\n      node.name &&\n      node.name === 'img' &&\n      node.attribs &&\n      node.attribs.id &&\n      props.message.attachedFilesMetadata?.find((f) => f.id === node.attribs.id)\n    );\n  },\n  processNode: (node, children, index): HTMLElement => {\n    // logic to check id in map/list\n    if (props.attachmentsMap && node.attribs.id in props.attachmentsMap) {\n      node.attribs = { ...node.attribs, src: props.attachmentsMap[node.attribs.id] };\n    }\n    return processNodeDefinitions.processDefaultNode(node, children, index);\n  }\n});\n\n/* @conditional-compile-remove(mention) */\nconst processMention = (props: ChatMessageContentProps): ProcessingInstructionType => ({\n  shouldProcessNode: (node) => {\n    if (props.mentionDisplayOptions?.onRenderMention) {\n      // Override the handling of the <msft-mention> tag in the HTML if there's a custom renderer\n      return node.name === 'msft-mention';\n    }\n    return false;\n  },\n  processNode: (node) => {\n    if (props.mentionDisplayOptions?.onRenderMention) {\n      const { id, displaytext } = node.attribs;\n      const mention: Mention = {\n        id: id,\n        displayText: displaytext\n      };\n      return props.mentionDisplayOptions.onRenderMention(mention, defaultOnMentionRender);\n    }\n    return processNodeDefinitions.processDefaultNode;\n  }\n});\n\nconst processHtmlToReact = (props: ChatMessageContentProps): JSX.Element => {\n  const steps: ProcessingInstructionType[] = [\n    /* @conditional-compile-remove(teams-inline-images) */\n    processInlineImage(props),\n    /* @conditional-compile-remove(mention) */\n    processMention(props),\n    {\n      // Process everything else in the default way\n      shouldProcessNode: IsValidNodeDefinitions.alwaysValid,\n      processNode: processNodeDefinitions.processDefaultNode\n    }\n  ];\n\n  return htmlToReactParser.parseWithInstructions(\n    props.message.content ?? '',\n    IsValidNodeDefinitions.alwaysValid,\n    steps\n  );\n};\n\"../../../../acs-ui-common/src\""]}
+{"version":3,"file":"ChatMessageContent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageContent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React from 'react';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nimport { useEffect } from 'react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { Parser, ProcessNodeDefinitions, IsValidNodeDefinitions, ProcessingInstructionType } from 'html-to-react';\n\nimport Linkify from 'react-linkify';\nimport { ChatMessage } from '../../types/ChatMessage';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../types/ChatMessage';\nimport { Link } from '@fluentui/react';\n/* @conditional-compile-remove(mention) */\nimport { MentionDisplayOptions, Mention } from '../MentionPopover';\n\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { FontIcon, Stack } from '@fluentui/react';\nimport { MessageThreadStrings } from '../MessageThread';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nimport { FileMetadata } from '../FileDownloadCards';\nimport LiveMessage from '../Announcer/LiveMessage';\n/* @conditional-compile-remove(mention) */\nimport { defaultOnMentionRender } from './MentionRenderer';\nimport DOMPurify from 'dompurify';\n\ntype ChatMessageContentProps = {\n  message: ChatMessage;\n  strings: MessageThreadStrings;\n  /* @conditional-compile-remove(mention) */\n  mentionDisplayOptions?: MentionDisplayOptions;\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  attachmentsMap?: Record<string, string>;\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  onFetchAttachment?: (attachment: FileMetadata) => Promise<void>;\n};\n\n/* @conditional-compile-remove(data-loss-prevention) */\ntype BlockedMessageContentProps = {\n  message: BlockedMessage;\n  strings: MessageThreadStrings;\n};\n\ntype MessageContentWithLiveAriaProps = {\n  message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;\n  liveMessage: string;\n  ariaLabel?: string;\n  content: JSX.Element;\n};\n\n/** @private */\nexport const ChatMessageContent = (props: ChatMessageContentProps): JSX.Element => {\n  switch (props.message.contentType) {\n    case 'text':\n      return MessageContentAsText(props);\n    case 'html':\n      return MessageContentAsRichTextHTML(props);\n    case 'richtext/html':\n      return MessageContentAsRichTextHTML(props);\n    default:\n      console.warn('unknown message content type');\n      return <></>;\n  }\n};\n\nconst MessageContentWithLiveAria = (props: MessageContentWithLiveAriaProps): JSX.Element => {\n  return (\n    <div data-ui-status={props.message.status} role=\"text\" aria-label={props.ariaLabel}>\n      <LiveMessage message={props.liveMessage} ariaLive=\"polite\" />\n      {props.content}\n    </div>\n  );\n};\n\nconst MessageContentAsRichTextHTML = (props: ChatMessageContentProps): JSX.Element => {\n  const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });\n\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  useEffect(() => {\n    props.message.attachedFilesMetadata?.map((fileMetadata) => {\n      if (props.onFetchAttachment && props.attachmentsMap && props.attachmentsMap[fileMetadata.id] === undefined) {\n        props.onFetchAttachment(fileMetadata);\n      }\n    });\n  }, [props]);\n\n  return (\n    <MessageContentWithLiveAria\n      message={props.message}\n      liveMessage={`${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')}`}\n      ariaLabel={messageContentAriaText(props)}\n      content={processHtmlToReact(props)}\n    />\n  );\n};\n\nconst MessageContentAsText = (props: ChatMessageContentProps): JSX.Element => {\n  const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });\n  return (\n    <MessageContentWithLiveAria\n      message={props.message}\n      liveMessage={`${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')}`}\n      ariaLabel={messageContentAriaText(props)}\n      content={\n        <Linkify\n          componentDecorator={(decoratedHref: string, decoratedText: string, key: number) => {\n            return (\n              <Link target=\"_blank\" href={decoratedHref} key={key}>\n                {decoratedText}\n              </Link>\n            );\n          }}\n        >\n          {props.message.content}\n        </Linkify>\n      }\n    />\n  );\n};\n\n/* @conditional-compile-remove(data-loss-prevention) */\n/**\n * @private\n */\nexport const BlockedMessageContent = (props: BlockedMessageContentProps): JSX.Element => {\n  const Icon: JSX.Element = <FontIcon iconName={'DataLossPreventionProhibited'} />;\n  const blockedMessage =\n    props.message.warningText === undefined ? props.strings.blockedWarningText : props.message.warningText;\n  const blockedMessageLink = props.message.link;\n  const blockedMessageLinkText = blockedMessageLink\n    ? props.message.linkText ?? props.strings.blockedWarningLinkText\n    : '';\n\n  const liveAuthor =\n    props.message.mine || props.message.senderDisplayName === undefined ? '' : props.message.senderDisplayName;\n  const liveBlockedWarningText = `${liveAuthor} ${blockedMessage} ${blockedMessageLinkText}`;\n  return (\n    <MessageContentWithLiveAria\n      message={props.message}\n      liveMessage={liveBlockedWarningText}\n      ariaLabel={liveBlockedWarningText}\n      content={\n        <Stack horizontal wrap>\n          {Icon}\n          {blockedMessage && <p>{blockedMessage}</p>}\n          {blockedMessageLink && (\n            <Link target={'_blank'} href={blockedMessageLink}>\n              {blockedMessageLinkText}\n            </Link>\n          )}\n        </Stack>\n      }\n    />\n  );\n};\n\n// https://stackoverflow.com/questions/28899298/extract-the-text-out-of-html-string-using-javascript\nconst extractContent = (s: string): string => {\n  const span = document.createElement('span');\n  span.innerHTML = s;\n  return span.textContent || span.innerText;\n};\n\nconst messageContentAriaText = (props: ChatMessageContentProps): string | undefined => {\n  // Strip all html tags from the content for aria.\n\n  return props.message.content\n    ? props.message.mine\n      ? _formatString(props.strings.messageContentMineAriaText, {\n          message: DOMPurify.sanitize(props.message.content, { ALLOWED_TAGS: [] })\n        })\n      : _formatString(props.strings.messageContentAriaText, {\n          author: `${props.message.senderDisplayName}`,\n          message: DOMPurify.sanitize(props.message.content, { ALLOWED_TAGS: [] })\n        })\n    : undefined;\n};\n\nconst processNodeDefinitions = ProcessNodeDefinitions();\nconst htmlToReactParser = Parser();\n\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nconst processInlineImage = (props: ChatMessageContentProps): ProcessingInstructionType => ({\n  // Custom <img> processing\n  shouldProcessNode: (node): boolean => {\n    // Process img node with id in attachments list\n    return (\n      node.name &&\n      node.name === 'img' &&\n      node.attribs &&\n      node.attribs.id &&\n      props.message.attachedFilesMetadata?.find((f) => f.id === node.attribs.id)\n    );\n  },\n  processNode: (node, children, index): HTMLElement => {\n    // logic to check id in map/list\n    if (props.attachmentsMap && node.attribs.id in props.attachmentsMap) {\n      node.attribs = { ...node.attribs, src: props.attachmentsMap[node.attribs.id] };\n    }\n    return processNodeDefinitions.processDefaultNode(node, children, index);\n  }\n});\n\n/* @conditional-compile-remove(mention) */\nconst processMention = (props: ChatMessageContentProps): ProcessingInstructionType => ({\n  shouldProcessNode: (node) => {\n    if (props.mentionDisplayOptions?.onRenderMention) {\n      // Override the handling of the <msft-mention> tag in the HTML if there's a custom renderer\n      return node.name === 'msft-mention';\n    }\n    return false;\n  },\n  processNode: (node) => {\n    if (props.mentionDisplayOptions?.onRenderMention) {\n      const { id, displaytext } = node.attribs;\n      const mention: Mention = {\n        id: id,\n        displayText: displaytext\n      };\n      return props.mentionDisplayOptions.onRenderMention(mention, defaultOnMentionRender);\n    }\n    return processNodeDefinitions.processDefaultNode;\n  }\n});\n\nconst processHtmlToReact = (props: ChatMessageContentProps): JSX.Element => {\n  const steps: ProcessingInstructionType[] = [\n    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n    processInlineImage(props),\n    /* @conditional-compile-remove(mention) */\n    processMention(props),\n    {\n      // Process everything else in the default way\n      shouldProcessNode: IsValidNodeDefinitions.alwaysValid,\n      processNode: processNodeDefinitions.processDefaultNode\n    }\n  ];\n\n  return htmlToReactParser.parseWithInstructions(\n    props.message.content ?? '',\n    IsValidNodeDefinitions.alwaysValid,\n    steps\n  );\n};\n\"../../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-components/src/components/ChatMessage/MentionRenderer.js

@@ -10,6 +10,6 @@ import React from 'react';
 export const defaultOnMentionRender = (mention) => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const MsftMention = 'msft-mention';
-    return React.createElement(MsftMention, { id: mention.id }, mention.displayText);
+    return (React.createElement(MsftMention, { id: mention.id, displayText: mention.displayText }, mention.displayText));
 };
 //# sourceMappingURL=MentionRenderer.js.map

package/dist/dist-esm/react-components/src/components/ChatMessage/MentionRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"MentionRenderer.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/MentionRenderer.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;;;GAKG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,OAAgB,EAAe,EAAE;IACtE,8DAA8D;IAC9D,MAAM,WAAW,GAAG,cAAqB,CAAC;IAC1C,OAAO,oBAAC,WAAW,IAAC,EAAE,EAAE,OAAO,CAAC,EAAE,IAAG,OAAO,CAAC,WAAW,CAAe,CAAC;AAC1E,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport React from 'react';\nimport { Mention } from '../MentionPopover';\n\n/**\n * Provides the default implementation for rendering an Mention in a message thread\n * @param mention - The mention to render\n *\n * @private\n */\nexport const defaultOnMentionRender = (mention: Mention): JSX.Element => {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const MsftMention = 'msft-mention' as any;\n  return <MsftMention id={mention.id}>{mention.displayText}</MsftMention>;\n};\n"]}
+{"version":3,"file":"MentionRenderer.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/MentionRenderer.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;;;GAKG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,OAAgB,EAAe,EAAE;IACtE,8DAA8D;IAC9D,MAAM,WAAW,GAAG,cAAqB,CAAC;IAC1C,OAAO,CACL,oBAAC,WAAW,IAAC,EAAE,EAAE,OAAO,CAAC,EAAE,EAAE,WAAW,EAAE,OAAO,CAAC,WAAW,IAC1D,OAAO,CAAC,WAAW,CACR,CACf,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport React from 'react';\nimport { Mention } from '../MentionPopover';\n\n/**\n * Provides the default implementation for rendering an Mention in a message thread\n * @param mention - The mention to render\n *\n * @private\n */\nexport const defaultOnMentionRender = (mention: Mention): JSX.Element => {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const MsftMention = 'msft-mention' as any;\n  return (\n    <MsftMention id={mention.id} displayText={mention.displayText}>\n      {mention.displayText}\n    </MsftMention>\n  );\n};\n"]}

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

@@ -79,11 +79,11 @@ export const _FileCard = (props) => {
             } },
             React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center", className: fileInfoWrapperClassName },
                 React.createElement(Stack, null,
-                    React.createElement(Icon, Object.assign({ "data-ui-id": 'filetype-icon' }, getFileTypeIconProps({
-                        extension: fileExtension,
-                        size: 24,
-                        imageFileType: 'svg'
-                    })))),
+                    React.createElement(Icon, { "data-ui-id": 'filetype-icon', iconName: getFileTypeIconProps({
+                            extension: fileExtension,
+                            size: 24,
+                            imageFileType: 'svg'
+                        }).iconName })),
                 React.createElement(Stack, { className: fileNameContainerClassName },
                     React.createElement(Text, { className: fileNameTextClassName }, fileName)),
                 React.createElement(Stack, { verticalAlign: "center", className: actionIconClassName }, actionIcon && actionIcon)),

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

@@ -1 +1 @@
-{"version":3,"file":"FileCard.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/FileCard.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport {\n  // eslint-disable-next-line no-restricted-imports\n  Icon,\n  IProgressIndicatorStyleProps,\n  IProgressIndicatorStyles,\n  IStyleFunctionOrObject,\n  mergeStyles,\n  ProgressIndicator,\n  Stack,\n  Text,\n  useTheme\n} from '@fluentui/react';\nimport { getFileTypeIconProps } from '@fluentui/react-file-type-icons';\nimport React from 'react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { Announcer } from './Announcer';\nimport { useEffect, useState } from 'react';\nimport { _FileUploadCardsStrings } from './FileUploadCards';\nimport { useLocaleFileCardStringsTrampoline } from './utils/common';\n\n/**\n * @internal\n * _FileCard Component Props.\n */\nexport interface _FileCardProps {\n  /**\n   * File name.\n   */\n  fileName: string;\n  /**\n   * Extension of the file used for rendering the file icon.\n   */\n  fileExtension: string;\n  /**\n   * File upload progress percentage between 0 and 1.\n   * File transfer progress indicator is only shown when the value is greater than 0 and less than 1.\n   */\n  progress?: number;\n  /**\n   * Icon to display for actions like download, upload, etc. along the file name.\n   */\n  actionIcon?: JSX.Element;\n  /**\n   * Function that runs when actionIcon is clicked\n   */\n  actionHandler?: () => void;\n  /**\n   * Optional arialabel strings for file cards\n   */\n  strings?: _FileUploadCardsStrings;\n}\n\n/**\n * @internal\n * A component for displaying a file card with file icon and progress bar.\n */\nexport const _FileCard = (props: _FileCardProps): JSX.Element => {\n  const { fileName, fileExtension, progress, actionIcon } = props;\n  const theme = useTheme();\n  const [announcerString, setAnnouncerString] = useState<string | undefined>(undefined);\n  const localeStrings = useLocaleFileCardStringsTrampoline();\n  const uploadStartedString = props.strings?.uploading ?? localeStrings.uploading;\n  const uploadCompletedString = props.strings?.uploadCompleted ?? localeStrings.uploadCompleted;\n\n  const showProgressIndicator = progress !== undefined && progress > 0 && progress < 1;\n\n  useEffect(() => {\n    if (showProgressIndicator) {\n      setAnnouncerString(`${uploadStartedString} ${fileName}`);\n    } else if (progress === 1) {\n      setAnnouncerString(`${fileName} ${uploadCompletedString}`);\n    } else {\n      setAnnouncerString(undefined);\n    }\n  }, [progress, showProgressIndicator, fileName, uploadStartedString, uploadCompletedString]);\n\n  const progressBarThicknessPx = 4;\n\n  const containerClassName = mergeStyles({\n    width: '12rem',\n    background: theme.palette.neutralLighter,\n    borderRadius: theme.effects.roundedCorner4,\n    border: `${_pxToRem(1)} solid ${theme.palette.neutralQuaternary}`,\n    cursor: 'pointer'\n  });\n\n  const fileInfoWrapperClassName = mergeStyles({\n    padding: _pxToRem(12),\n    // To make space for the progress indicator.\n    paddingBottom: showProgressIndicator ? _pxToRem(12 - progressBarThicknessPx * 2) : _pxToRem(12)\n  });\n\n  const fileNameContainerClassName = mergeStyles({\n    paddingLeft: _pxToRem(4),\n    minWidth: '75%',\n    maxWidth: '75%'\n  });\n\n  const fileNameTextClassName = mergeStyles({\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    lineHeight: 'normal',\n    whiteSpace: 'nowrap',\n    paddingRight: _pxToRem(4)\n  });\n\n  const actionIconClassName = mergeStyles({\n    cursor: 'pointer'\n  });\n\n  const progressIndicatorStyles: IStyleFunctionOrObject<IProgressIndicatorStyleProps, IProgressIndicatorStyles> = {\n    itemProgress: {\n      padding: `${_pxToRem(progressBarThicknessPx - 1)} 0`, // item progress height won't apply without an explicit padding\n      // To make the progress indicator border curve along the bottom of file card.\n      borderRadius: `0 0 ${theme.effects.roundedCorner4} ${theme.effects.roundedCorner4}`\n    },\n    progressBar: {\n      height: _pxToRem(progressBarThicknessPx)\n    }\n  };\n\n  return (\n    <div data-is-focusable={true}>\n      <Announcer announcementString={announcerString} ariaLive={'polite'} />\n      <Stack\n        className={containerClassName}\n        onClick={() => {\n          props.actionHandler?.();\n        }}\n      >\n        <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\" className={fileInfoWrapperClassName}>\n          <Stack>\n            {/* We are not using <ChatCompositeIcon /> here as we currently do not support customizing these filetype icons. */}\n            <Icon\n              data-ui-id={'filetype-icon'}\n              {...getFileTypeIconProps({\n                extension: fileExtension,\n                size: 24,\n                imageFileType: 'svg'\n              })}\n            />\n          </Stack>\n          <Stack className={fileNameContainerClassName}>\n            <Text className={fileNameTextClassName}>{fileName}</Text>\n          </Stack>\n          <Stack verticalAlign=\"center\" className={actionIconClassName}>\n            {actionIcon && actionIcon}\n          </Stack>\n        </Stack>\n        {showProgressIndicator && <ProgressIndicator percentComplete={progress} styles={progressIndicatorStyles} />}\n      </Stack>\n    </div>\n  );\n};\n\"../../../acs-ui-common/src\""]}
+{"version":3,"file":"FileCard.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/FileCard.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport {\n  // eslint-disable-next-line no-restricted-imports\n  Icon,\n  IProgressIndicatorStyleProps,\n  IProgressIndicatorStyles,\n  IStyleFunctionOrObject,\n  mergeStyles,\n  ProgressIndicator,\n  Stack,\n  Text,\n  useTheme\n} from '@fluentui/react';\nimport { getFileTypeIconProps } from '@fluentui/react-file-type-icons';\nimport React from 'react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { Announcer } from './Announcer';\nimport { useEffect, useState } from 'react';\nimport { _FileUploadCardsStrings } from './FileUploadCards';\nimport { useLocaleFileCardStringsTrampoline } from './utils/common';\n\n/**\n * @internal\n * _FileCard Component Props.\n */\nexport interface _FileCardProps {\n  /**\n   * File name.\n   */\n  fileName: string;\n  /**\n   * Extension of the file used for rendering the file icon.\n   */\n  fileExtension: string;\n  /**\n   * File upload progress percentage between 0 and 1.\n   * File transfer progress indicator is only shown when the value is greater than 0 and less than 1.\n   */\n  progress?: number;\n  /**\n   * Icon to display for actions like download, upload, etc. along the file name.\n   */\n  actionIcon?: JSX.Element;\n  /**\n   * Function that runs when actionIcon is clicked\n   */\n  actionHandler?: () => void;\n  /**\n   * Optional arialabel strings for file cards\n   */\n  strings?: _FileUploadCardsStrings;\n}\n\n/**\n * @internal\n * A component for displaying a file card with file icon and progress bar.\n */\nexport const _FileCard = (props: _FileCardProps): JSX.Element => {\n  const { fileName, fileExtension, progress, actionIcon } = props;\n  const theme = useTheme();\n  const [announcerString, setAnnouncerString] = useState<string | undefined>(undefined);\n  const localeStrings = useLocaleFileCardStringsTrampoline();\n  const uploadStartedString = props.strings?.uploading ?? localeStrings.uploading;\n  const uploadCompletedString = props.strings?.uploadCompleted ?? localeStrings.uploadCompleted;\n\n  const showProgressIndicator = progress !== undefined && progress > 0 && progress < 1;\n\n  useEffect(() => {\n    if (showProgressIndicator) {\n      setAnnouncerString(`${uploadStartedString} ${fileName}`);\n    } else if (progress === 1) {\n      setAnnouncerString(`${fileName} ${uploadCompletedString}`);\n    } else {\n      setAnnouncerString(undefined);\n    }\n  }, [progress, showProgressIndicator, fileName, uploadStartedString, uploadCompletedString]);\n\n  const progressBarThicknessPx = 4;\n\n  const containerClassName = mergeStyles({\n    width: '12rem',\n    background: theme.palette.neutralLighter,\n    borderRadius: theme.effects.roundedCorner4,\n    border: `${_pxToRem(1)} solid ${theme.palette.neutralQuaternary}`,\n    cursor: 'pointer'\n  });\n\n  const fileInfoWrapperClassName = mergeStyles({\n    padding: _pxToRem(12),\n    // To make space for the progress indicator.\n    paddingBottom: showProgressIndicator ? _pxToRem(12 - progressBarThicknessPx * 2) : _pxToRem(12)\n  });\n\n  const fileNameContainerClassName = mergeStyles({\n    paddingLeft: _pxToRem(4),\n    minWidth: '75%',\n    maxWidth: '75%'\n  });\n\n  const fileNameTextClassName = mergeStyles({\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    lineHeight: 'normal',\n    whiteSpace: 'nowrap',\n    paddingRight: _pxToRem(4)\n  });\n\n  const actionIconClassName = mergeStyles({\n    cursor: 'pointer'\n  });\n\n  const progressIndicatorStyles: IStyleFunctionOrObject<IProgressIndicatorStyleProps, IProgressIndicatorStyles> = {\n    itemProgress: {\n      padding: `${_pxToRem(progressBarThicknessPx - 1)} 0`, // item progress height won't apply without an explicit padding\n      // To make the progress indicator border curve along the bottom of file card.\n      borderRadius: `0 0 ${theme.effects.roundedCorner4} ${theme.effects.roundedCorner4}`\n    },\n    progressBar: {\n      height: _pxToRem(progressBarThicknessPx)\n    }\n  };\n\n  return (\n    <div data-is-focusable={true}>\n      <Announcer announcementString={announcerString} ariaLive={'polite'} />\n      <Stack\n        className={containerClassName}\n        onClick={() => {\n          props.actionHandler?.();\n        }}\n      >\n        <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\" className={fileInfoWrapperClassName}>\n          <Stack>\n            {/* We are not using <ChatCompositeIcon /> here as we currently do not support customizing these filetype icons. */}\n            <Icon\n              data-ui-id={'filetype-icon'}\n              iconName={\n                getFileTypeIconProps({\n                  extension: fileExtension,\n                  size: 24,\n                  imageFileType: 'svg'\n                }).iconName\n              }\n            />\n          </Stack>\n          <Stack className={fileNameContainerClassName}>\n            <Text className={fileNameTextClassName}>{fileName}</Text>\n          </Stack>\n          <Stack verticalAlign=\"center\" className={actionIconClassName}>\n            {actionIcon && actionIcon}\n          </Stack>\n        </Stack>\n        {showProgressIndicator && <ProgressIndicator percentComplete={progress} styles={progressIndicatorStyles} />}\n      </Stack>\n    </div>\n  );\n};\n\"../../../acs-ui-common/src\""]}

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

@@ -5,6 +5,7 @@ import React from 'react';
  */
 export interface _FileCardGroupProps {
     children: React.ReactNode;
+    ariaLabel?: string;
 }
 /**
  * @internal

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

@@ -26,10 +26,10 @@ const fileCardGroupClassName = mergeStyles({
  * Renders the children equally spaced in multiple rows.
  */
 export const _FileCardGroup = (props) => {
-    const { children } = props;
+    const { children, ariaLabel } = props;
     if (!children) {
         return React.createElement(React.Fragment, null);
     }
-    return (React.createElement(Stack, { horizontal: true, className: fileCardGroupClassName }, children));
+    return (React.createElement(Stack, { horizontal: true, className: fileCardGroupClassName, "aria-label": ariaLabel }, children));
 };
 //# sourceMappingURL=FileCardGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FileCardGroup.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/FileCardGroup.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,mCAAgC;AACnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B;;;;GAIG;AACH,MAAM,sBAAsB,GAAG,WAAW,CAAC;IACzC,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE;QACP,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;KACpB;IACD;;OAEG;IACH,yBAAyB,EAAE;QACzB,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;KACxB;CACF,CAAC,CAAC;AAEH;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAe,EAAE;IACxE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE3B,IAAI,CAAC,QAAQ,EAAE;QACb,OAAO,yCAAK,CAAC;KACd;IAED,OAAO,CACL,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,sBAAsB,IAChD,QAAQ,CACH,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React from 'react';\n\n/**\n * @internal\n * Props for `_FileCardGroup` component.\n */\nexport interface _FileCardGroupProps {\n  children: React.ReactNode;\n}\n\n/**\n * Note: If we use stack tokens.childrenGap, when child elements are wrapped and moved to the next line,\n * an extra margin is added to the left of each line.\n * This is a workaround to avoid this issue.\n */\nconst fileCardGroupClassName = mergeStyles({\n  flexFlow: 'row wrap',\n  '& > *': {\n    margin: _pxToRem(2)\n  },\n  /**\n   * margin for children is overriden by parent stack, so adding left margin for each child\n   */\n  '& > *:not(:first-child)': {\n    marginLeft: _pxToRem(2)\n  }\n});\n\n/**\n * @internal\n * Used with `_FileCard` component where `_FileCard` components are passed as children.\n * Renders the children equally spaced in multiple rows.\n */\nexport const _FileCardGroup = (props: _FileCardGroupProps): JSX.Element => {\n  const { children } = props;\n\n  if (!children) {\n    return <></>;\n  }\n\n  return (\n    <Stack horizontal className={fileCardGroupClassName}>\n      {children}\n    </Stack>\n  );\n};\n\"../../../acs-ui-common/src\""]}
+{"version":3,"file":"FileCardGroup.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/FileCardGroup.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,mCAAgC;AACnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B;;;;GAIG;AAEH,MAAM,sBAAsB,GAAG,WAAW,CAAC;IACzC,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE;QACP,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;KACpB;IACD;;OAEG;IACH,yBAAyB,EAAE;QACzB,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;KACxB;CACF,CAAC,CAAC;AAEH;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAe,EAAE;IACxE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IACtC,IAAI,CAAC,QAAQ,EAAE;QACb,OAAO,yCAAK,CAAC;KACd;IAED,OAAO,CACL,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,sBAAsB,gBAAc,SAAS,IACvE,QAAQ,CACH,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React from 'react';\n\n/**\n * @internal\n * Props for `_FileCardGroup` component.\n */\nexport interface _FileCardGroupProps {\n  children: React.ReactNode;\n  ariaLabel?: string;\n}\n\n/**\n * Note: If we use stack tokens.childrenGap, when child elements are wrapped and moved to the next line,\n * an extra margin is added to the left of each line.\n * This is a workaround to avoid this issue.\n */\n\nconst fileCardGroupClassName = mergeStyles({\n  flexFlow: 'row wrap',\n  '& > *': {\n    margin: _pxToRem(2)\n  },\n  /**\n   * margin for children is overriden by parent stack, so adding left margin for each child\n   */\n  '& > *:not(:first-child)': {\n    marginLeft: _pxToRem(2)\n  }\n});\n\n/**\n * @internal\n * Used with `_FileCard` component where `_FileCard` components are passed as children.\n * Renders the children equally spaced in multiple rows.\n */\nexport const _FileCardGroup = (props: _FileCardGroupProps): JSX.Element => {\n  const { children, ariaLabel } = props;\n  if (!children) {\n    return <></>;\n  }\n\n  return (\n    <Stack horizontal className={fileCardGroupClassName} aria-label={ariaLabel}>\n      {children}\n    </Stack>\n  );\n};\n\"../../../acs-ui-common/src\""]}

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

@@ -2,7 +2,7 @@
 /**
  * @beta
  */
-export declare type FileMetadataAttachmentType = 'fileSharing' | /* @conditional-compile-remove(teams-inline-images) */ 'teamsInlineImage' | 'unknown';
+export declare type FileMetadataAttachmentType = 'fileSharing' | /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ 'teamsInlineImage' | 'unknown';
 /**
  * Meta Data containing information about the uploaded file.
  * @beta
@@ -40,6 +40,7 @@ export interface AttachmentDownloadResult {
 export interface _FileDownloadCardsStrings {
     /** Aria label to notify user when focus is on file download button. */
     downloadFile: string;
+    fileCardGroupMessage: string;
 }
 /**
  * @beta

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

@@ -17,6 +17,7 @@ import { useLocale } from '../localization';
 import { _FileCard } from './FileCard';
 import { _FileCardGroup } from './FileCardGroup';
 import { iconButtonClassName } from './styles/IconButton.styles';
+import { _formatString } from "../../../acs-ui-common/src";
 const fileDownloadCardsStyle = {
     marginTop: '0.25rem'
 };
@@ -25,16 +26,25 @@ const actionIconStyle = { height: '1rem' };
  * @internal
  */
 export const _FileDownloadCards = (props) => {
-    var _a;
+    var _a, _b;
     const { userId, fileMetadata } = props;
     const [showSpinner, setShowSpinner] = useState(false);
     const localeStrings = useLocaleStringsTrampoline();
     const downloadFileButtonString = useMemo(() => () => {
-        var _a, _b, _c, _d;
+        var _a, _b;
         return (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.downloadFile) !== null && _b !== void 0 ? _b : localeStrings.downloadFile;
-        // Return download button without aria label
-        return (_d = (_c = props.strings) === null || _c === void 0 ? void 0 : _c.downloadFile) !== null && _d !== void 0 ? _d : '';
     }, [(_a = props.strings) === null || _a === void 0 ? void 0 : _a.downloadFile, localeStrings.downloadFile]);
+    const fileCardGroupDescription = useMemo(() => () => {
+        var _a, _b;
+        const fileGroupLocaleString = (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.fileCardGroupMessage) !== null && _b !== void 0 ? _b : localeStrings.fileCardGroupMessage;
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        return _formatString(fileGroupLocaleString, {
+            fileCount: `${fileMetadata.filter((file) => file.attachmentType === 'fileSharing').length}`
+        });
+        return _formatString(fileGroupLocaleString, {
+            fileCount: `${fileMetadata.length}`
+        });
+    }, [(_b = props.strings) === null || _b === void 0 ? void 0 : _b.fileCardGroupMessage, localeStrings.fileCardGroupMessage, fileMetadata]);
     const fileDownloadHandler = useCallback((userId, file) => __awaiter(void 0, void 0, void 0, function* () {
         if (!props.downloadHandler) {
             window.open(file.url, '_blank', 'noopener,noreferrer');
@@ -56,17 +66,22 @@ export const _FileDownloadCards = (props) => {
             }
         }
     }), [props]);
-    // Its safe to assume that if the first item in the fileMetadata is not a fileSharing type we don't want to display the FileDownloadCard.
-    // Since you can't have both fileSharing and teamsInlineImage in the same message.
     if (!fileMetadata ||
         fileMetadata.length === 0 ||
-        /* @conditional-compile-remove(teams-inline-images) */ fileMetadata[0].attachmentType !== 'fileSharing') {
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ !fileMetadata.some((attachment) => attachment.attachmentType === 'fileSharing')) {
         return React.createElement(React.Fragment, null);
     }
     return (React.createElement("div", { style: fileDownloadCardsStyle, "data-ui-id": "file-download-card-group" },
-        React.createElement(_FileCardGroup, null, fileMetadata &&
-            fileMetadata.map((file) => (React.createElement(_FileCard, { fileName: file.name, key: file.name, fileExtension: file.extension, actionIcon: showSpinner ? (React.createElement(Spinner, { size: SpinnerSize.medium, "aria-live": 'polite', role: 'status' })) : (React.createElement(IconButton, { className: iconButtonClassName, ariaLabel: downloadFileButtonString() },
-                    React.createElement(DownloadIconTrampoline, null))), actionHandler: () => fileDownloadHandler(userId, file) }))))));
+        React.createElement(_FileCardGroup, { ariaLabel: fileCardGroupDescription() }, fileMetadata &&
+            fileMetadata
+                .filter((attachment) => {
+                /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+                return attachment.attachmentType === 'fileSharing';
+                return true;
+            })
+                .map((file) => (React.createElement(_FileCard, { fileName: file.name, key: file.name, fileExtension: file.extension, actionIcon: showSpinner ? (React.createElement(Spinner, { size: SpinnerSize.medium, "aria-live": 'polite', role: 'status' })) : true &&
+                    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ !file.previewUrl ? (React.createElement(IconButton, { className: iconButtonClassName, ariaLabel: downloadFileButtonString() },
+                    React.createElement(DownloadIconTrampoline, null))) : undefined, actionHandler: () => fileDownloadHandler(userId, file) }))))));
 };
 /**
  * @private
@@ -78,8 +93,8 @@ const DownloadIconTrampoline = () => {
     return React.createElement(Icon, { iconName: "EditBoxCancel", style: actionIconStyle });
 };
 const useLocaleStringsTrampoline = () => {
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)*/
     return useLocale().strings.messageThread;
-    return { downloadFile: '' };
+    return { downloadFile: '', fileCardGroupMessage: '' };
 };
 //# sourceMappingURL=FileDownloadCards.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FileDownloadCards.js","sourceRoot":"","sources":["../../../../../../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';\n\n/* @conditional-compile-remove(teams-inline-images) */\n/**\n * @beta\n */\nexport type FileMetadataAttachmentType =\n  | 'fileSharing'\n  | /* @conditional-compile-remove(teams-inline-images) */ 'teamsInlineImage'\n  | 'unknown';\n\n/**\n * Meta Data containing information about the uploaded file.\n * @beta\n */\nexport interface FileMetadata {\n  /* @conditional-compile-remove(teams-inline-images) */\n  /*\n   * Attachment type of the file.\n   * Possible values {@link FileDownloadHandler}.\n   */\n  attachmentType: FileMetadataAttachmentType;\n  /* @conditional-compile-remove(teams-inline-images) */\n  /*\n   * Unique ID of the file.\n   */\n  id: string;\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  /* @conditional-compile-remove(teams-inline-images) */\n  /*\n   * Preview URL for the file.\n   * Used in the message bubble for inline images.\n   */\n  previewUrl?: string;\n}\n\n/* @conditional-compile-remove(teams-inline-images) */\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}\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}\n\nconst fileDownloadCardsStyle = {\n  marginTop: '0.25rem'\n};\n\nconst actionIconStyle = { height: '1rem' };\n\n/**\n * @internal\n */\nexport const _FileDownloadCards = (props: _FileDownloadCards): JSX.Element => {\n  const { userId, fileMetadata } = props;\n  const [showSpinner, setShowSpinner] = useState(false);\n  const localeStrings = useLocaleStringsTrampoline();\n\n  const downloadFileButtonString = useMemo(\n    () => () => {\n      return props.strings?.downloadFile ?? localeStrings.downloadFile;\n      // Return download button without aria label\n      return props.strings?.downloadFile ?? '';\n    },\n    [props.strings?.downloadFile, localeStrings.downloadFile]\n  );\n\n  const fileDownloadHandler = useCallback(\n    async (userId, file) => {\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    },\n    [props]\n  );\n  // Its safe to assume that if the first item in the fileMetadata is not a fileSharing type we don't want to display the FileDownloadCard.\n  // Since you can't have both fileSharing and teamsInlineImage in the same message.\n  if (\n    !fileMetadata ||\n    fileMetadata.length === 0 ||\n    /* @conditional-compile-remove(teams-inline-images) */ fileMetadata[0].attachmentType !== 'fileSharing'\n  ) {\n    return <></>;\n  }\n\n  return (\n    <div style={fileDownloadCardsStyle} data-ui-id=\"file-download-card-group\">\n      <_FileCardGroup>\n        {fileMetadata &&\n          fileMetadata.map((file) => (\n            <_FileCard\n              fileName={file.name}\n              key={file.name}\n              fileExtension={file.extension}\n              actionIcon={\n                showSpinner ? (\n                  <Spinner size={SpinnerSize.medium} aria-live={'polite'} role={'status'} />\n                ) : (\n                  <IconButton className={iconButtonClassName} ariaLabel={downloadFileButtonString()}>\n                    <DownloadIconTrampoline />\n                  </IconButton>\n                )\n              }\n              actionHandler={() => fileDownloadHandler(userId, file)}\n            />\n          ))}\n      </_FileCardGroup>\n    </div>\n  );\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};\n\nconst useLocaleStringsTrampoline = (): _FileDownloadCardsStrings => {\n  /* @conditional-compile-remove(file-sharing) */\n  return useLocale().strings.messageThread;\n  return { downloadFile: '' };\n};\n"]}
+{"version":3,"file":"FileDownloadCards.js","sourceRoot":"","sources":["../../../../../../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 =\n  | 'fileSharing'\n  | /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ 'teamsInlineImage'\n  | 'unknown';\n\n/**\n * Meta Data containing information about the uploaded file.\n * @beta\n */\nexport interface FileMetadata {\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: FileMetadataAttachmentType;\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  /*\n   * Unique ID of the file.\n   */\n  id: string;\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  /* @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/* @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}\n\nconst fileDownloadCardsStyle = {\n  marginTop: '0.25rem'\n};\n\nconst actionIconStyle = { height: '1rem' };\n\n/**\n * @internal\n */\nexport const _FileDownloadCards = (props: _FileDownloadCards): JSX.Element => {\n  const { userId, fileMetadata } = props;\n  const [showSpinner, setShowSpinner] = useState(false);\n  const localeStrings = useLocaleStringsTrampoline();\n\n  const downloadFileButtonString = useMemo(\n    () => () => {\n      return props.strings?.downloadFile ?? localeStrings.downloadFile;\n    },\n    [props.strings?.downloadFile, localeStrings.downloadFile]\n  );\n\n  const fileCardGroupDescription = useMemo(\n    () => () => {\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((file) => file.attachmentType === 'fileSharing').length}`\n      });\n      return _formatString(fileGroupLocaleString, {\n        fileCount: `${fileMetadata.length}`\n      });\n    },\n    [props.strings?.fileCardGroupMessage, localeStrings.fileCardGroupMessage, fileMetadata]\n  );\n\n  const fileDownloadHandler = useCallback(\n    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    },\n    [props]\n  );\n  if (\n    !fileMetadata ||\n    fileMetadata.length === 0 ||\n    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ !fileMetadata.some(\n      (attachment) => attachment.attachmentType === 'fileSharing'\n    )\n  ) {\n    return <></>;\n  }\n\n  return (\n    <div style={fileDownloadCardsStyle} data-ui-id=\"file-download-card-group\">\n      <_FileCardGroup ariaLabel={fileCardGroupDescription()}>\n        {fileMetadata &&\n          fileMetadata\n            .filter((attachment) => {\n              /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n              return attachment.attachmentType === 'fileSharing';\n              return true;\n            })\n            .map((file) => (\n              <_FileCard\n                fileName={file.name}\n                key={file.name}\n                fileExtension={file.extension}\n                actionIcon={\n                  showSpinner ? (\n                    <Spinner size={SpinnerSize.medium} aria-live={'polite'} role={'status'} />\n                  ) : true &&\n                    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ !file.previewUrl ? (\n                    <IconButton className={iconButtonClassName} ariaLabel={downloadFileButtonString()}>\n                      <DownloadIconTrampoline />\n                    </IconButton>\n                  ) : undefined\n                }\n                actionHandler={() => fileDownloadHandler(userId, file)}\n              />\n            ))}\n      </_FileCardGroup>\n    </div>\n  );\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};\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 { downloadFile: '', fileCardGroupMessage: '' };\n};\n\"../../../acs-ui-common/src\""]}

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

@@ -17,10 +17,8 @@ export const _FileUploadCards = (props) => {
     const files = props.activeFileUploads;
     const localeStrings = useLocaleFileCardStringsTrampoline();
     const removeFileButtonString = useMemo(() => () => {
-        var _a, _b, _c, _d;
+        var _a, _b;
         return (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.removeFile) !== null && _b !== void 0 ? _b : localeStrings.removeFile;
-        // Return download button without aria label
-        return (_d = (_c = props.strings) === null || _c === void 0 ? void 0 : _c.removeFile) !== null && _d !== void 0 ? _d : '';
     }, [(_a = props.strings) === null || _a === void 0 ? void 0 : _a.removeFile, localeStrings.removeFile]);
     if (!files || files.length === 0) {
         return React.createElement(React.Fragment, null);

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

@@ -1 +1 @@
-{"version":3,"file":"FileUploadCards.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/FileUploadCards.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,kCAAkC,EAAE,MAAM,gBAAgB,CAAC;AAoCpE,MAAM,eAAe,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;AAE3C;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAA2B,EAAe,EAAE;;IAC3E,MAAM,KAAK,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAEtC,MAAM,aAAa,GAAG,kCAAkC,EAAE,CAAC;IAE3D,MAAM,sBAAsB,GAAG,OAAO,CACpC,GAAG,EAAE,CAAC,GAAG,EAAE;;QACT,OAAO,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,UAAU,mCAAI,aAAa,CAAC,UAAU,CAAC;QAC7D,4CAA4C;QAC5C,OAAO,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,UAAU,mCAAI,EAAE,CAAC;IACzC,CAAC,EACD,CAAC,MAAA,KAAK,CAAC,OAAO,0CAAE,UAAU,EAAE,aAAa,CAAC,UAAU,CAAC,CACtD,CAAC;IAEF,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QAChC,OAAO,yCAAK,CAAC;KACd;IAED,OAAO,CACL,oBAAC,cAAc,QACZ,KAAK;QACJ,KAAK;aACF,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;aAC7B,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACb,oBAAC,SAAS,IACR,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,aAAa,EAAE,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,EACvC,UAAU,EACR,oBAAC,UAAU,IAAC,SAAS,EAAE,mBAAmB,EAAE,SAAS,EAAE,sBAAsB,EAAE;gBAC7E,oBAAC,IAAI,IAAC,QAAQ,EAAC,kBAAkB,EAAC,KAAK,EAAE,eAAe,GAAI,CACjD,EAEf,aAAa,EAAE,GAAG,EAAE;gBAClB,KAAK,CAAC,kBAAkB,IAAI,KAAK,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YAChE,CAAC,EACD,OAAO,EAAE,KAAK,CAAC,OAAO,GACtB,CACH,CAAC,CACS,CAClB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { Icon, IconButton } from '@fluentui/react';\nimport React from 'react';\nimport { ActiveFileUpload } from './SendBox';\nimport { _FileCard } from './FileCard';\nimport { _FileCardGroup } from './FileCardGroup';\nimport { extension } from './utils';\nimport { iconButtonClassName } from './styles/IconButton.styles';\nimport { useMemo } from 'react';\nimport { useLocaleFileCardStringsTrampoline } from './utils/common';\n\n/**\n * Strings of _FileUploadCards that can be overridden.\n *\n * @internal\n */\nexport interface _FileUploadCardsStrings {\n  /** Aria label to notify user when focus is on cancel file upload button. */\n  removeFile: string;\n  /** Aria label to notify user file uploading starts. */\n  uploading: string;\n  /** Aria label to notify user file is uploaded. */\n  uploadCompleted: string;\n}\n\n/**\n * @internal\n */\nexport interface FileUploadCardsProps {\n  /**\n   * Optional array of active file uploads where each object has attibutes\n   * of a file upload like name, progress, errormessage etc.\n   */\n  activeFileUploads?: ActiveFileUpload[];\n  /**\n   * Optional callback to remove the file upload before sending by clicking on\n   * cancel icon.\n   */\n  onCancelFileUpload?: (fileId: string) => void;\n  /**\n   * Optional arialabel strings for file upload cards\n   */\n  strings?: _FileUploadCardsStrings;\n}\n\nconst actionIconStyle = { height: '1rem' };\n\n/**\n * @internal\n */\nexport const _FileUploadCards = (props: FileUploadCardsProps): JSX.Element => {\n  const files = props.activeFileUploads;\n\n  const localeStrings = useLocaleFileCardStringsTrampoline();\n\n  const removeFileButtonString = useMemo(\n    () => () => {\n      return props.strings?.removeFile ?? localeStrings.removeFile;\n      // Return download button without aria label\n      return props.strings?.removeFile ?? '';\n    },\n    [props.strings?.removeFile, localeStrings.removeFile]\n  );\n\n  if (!files || files.length === 0) {\n    return <></>;\n  }\n\n  return (\n    <_FileCardGroup>\n      {files &&\n        files\n          .filter((file) => !file.error)\n          .map((file) => (\n            <_FileCard\n              fileName={file.filename}\n              progress={file.progress}\n              key={file.id}\n              fileExtension={extension(file.filename)}\n              actionIcon={\n                <IconButton className={iconButtonClassName} ariaLabel={removeFileButtonString()}>\n                  <Icon iconName=\"CancelFileUpload\" style={actionIconStyle} />\n                </IconButton>\n              }\n              actionHandler={() => {\n                props.onCancelFileUpload && props.onCancelFileUpload(file.id);\n              }}\n              strings={props.strings}\n            />\n          ))}\n    </_FileCardGroup>\n  );\n};\n"]}
+{"version":3,"file":"FileUploadCards.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/FileUploadCards.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,kCAAkC,EAAE,MAAM,gBAAgB,CAAC;AAoCpE,MAAM,eAAe,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;AAE3C;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAA2B,EAAe,EAAE;;IAC3E,MAAM,KAAK,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAEtC,MAAM,aAAa,GAAG,kCAAkC,EAAE,CAAC;IAE3D,MAAM,sBAAsB,GAAG,OAAO,CACpC,GAAG,EAAE,CAAC,GAAG,EAAE;;QACT,OAAO,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,UAAU,mCAAI,aAAa,CAAC,UAAU,CAAC;IAC/D,CAAC,EACD,CAAC,MAAA,KAAK,CAAC,OAAO,0CAAE,UAAU,EAAE,aAAa,CAAC,UAAU,CAAC,CACtD,CAAC;IAEF,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QAChC,OAAO,yCAAK,CAAC;KACd;IAED,OAAO,CACL,oBAAC,cAAc,QACZ,KAAK;QACJ,KAAK;aACF,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;aAC7B,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACb,oBAAC,SAAS,IACR,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,aAAa,EAAE,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,EACvC,UAAU,EACR,oBAAC,UAAU,IAAC,SAAS,EAAE,mBAAmB,EAAE,SAAS,EAAE,sBAAsB,EAAE;gBAC7E,oBAAC,IAAI,IAAC,QAAQ,EAAC,kBAAkB,EAAC,KAAK,EAAE,eAAe,GAAI,CACjD,EAEf,aAAa,EAAE,GAAG,EAAE;gBAClB,KAAK,CAAC,kBAAkB,IAAI,KAAK,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YAChE,CAAC,EACD,OAAO,EAAE,KAAK,CAAC,OAAO,GACtB,CACH,CAAC,CACS,CAClB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { Icon, IconButton } from '@fluentui/react';\nimport React from 'react';\nimport { ActiveFileUpload } from './SendBox';\nimport { _FileCard } from './FileCard';\nimport { _FileCardGroup } from './FileCardGroup';\nimport { extension } from './utils';\nimport { iconButtonClassName } from './styles/IconButton.styles';\nimport { useMemo } from 'react';\nimport { useLocaleFileCardStringsTrampoline } from './utils/common';\n\n/**\n * Strings of _FileUploadCards that can be overridden.\n *\n * @internal\n */\nexport interface _FileUploadCardsStrings {\n  /** Aria label to notify user when focus is on cancel file upload button. */\n  removeFile: string;\n  /** Aria label to notify user file uploading starts. */\n  uploading: string;\n  /** Aria label to notify user file is uploaded. */\n  uploadCompleted: string;\n}\n\n/**\n * @internal\n */\nexport interface FileUploadCardsProps {\n  /**\n   * Optional array of active file uploads where each object has attibutes\n   * of a file upload like name, progress, errormessage etc.\n   */\n  activeFileUploads?: ActiveFileUpload[];\n  /**\n   * Optional callback to remove the file upload before sending by clicking on\n   * cancel icon.\n   */\n  onCancelFileUpload?: (fileId: string) => void;\n  /**\n   * Optional arialabel strings for file upload cards\n   */\n  strings?: _FileUploadCardsStrings;\n}\n\nconst actionIconStyle = { height: '1rem' };\n\n/**\n * @internal\n */\nexport const _FileUploadCards = (props: FileUploadCardsProps): JSX.Element => {\n  const files = props.activeFileUploads;\n\n  const localeStrings = useLocaleFileCardStringsTrampoline();\n\n  const removeFileButtonString = useMemo(\n    () => () => {\n      return props.strings?.removeFile ?? localeStrings.removeFile;\n    },\n    [props.strings?.removeFile, localeStrings.removeFile]\n  );\n\n  if (!files || files.length === 0) {\n    return <></>;\n  }\n\n  return (\n    <_FileCardGroup>\n      {files &&\n        files\n          .filter((file) => !file.error)\n          .map((file) => (\n            <_FileCard\n              fileName={file.filename}\n              progress={file.progress}\n              key={file.id}\n              fileExtension={extension(file.filename)}\n              actionIcon={\n                <IconButton className={iconButtonClassName} ariaLabel={removeFileButtonString()}>\n                  <Icon iconName=\"CancelFileUpload\" style={actionIconStyle} />\n                </IconButton>\n              }\n              actionHandler={() => {\n                props.onCancelFileUpload && props.onCancelFileUpload(file.id);\n              }}\n              strings={props.strings}\n            />\n          ))}\n    </_FileCardGroup>\n  );\n};\n"]}