@azure/communication-react 1.11.1-alpha-202401140014 → 1.11.1-alpha-202401170012

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

@@ -39,13 +39,13 @@ export const _FileDownloadCards = (props) => {
         return attachment.attachmentType === 'file';
         return false;
     }, []);
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
     const isShowDownloadIcon = useCallback((attachment) => {
         var _a;
         /* @conditional-compile-remove(file-sharing) */
         return attachment.attachmentType === 'file' && ((_a = attachment.payload) === null || _a === void 0 ? void 0 : _a.teamsFileAttachment) !== 'true';
         return true;
     }, []);
-    /* @conditional-compile-remove(file-sharing) */
     const fileCardGroupDescription = useMemo(() => () => {
         var _a, _b, _c, _d;
         const fileGroupLocaleString = (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.fileCardGroupMessage) !== null && _b !== void 0 ? _b : localeStrings.fileCardGroupMessage;
@@ -78,11 +78,13 @@ export const _FileDownloadCards = (props) => {
             }
         }
     }), [props]);
-    if (!fileMetadata || fileMetadata.length === 0 || !fileMetadata.some(isFileSharingAttachment)) {
+    if (!fileMetadata ||
+        fileMetadata.length === 0 ||
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ !fileMetadata.some(isFileSharingAttachment)) {
         return React.createElement(React.Fragment, null);
     }
     return (React.createElement("div", { style: fileDownloadCardsStyle, "data-ui-id": "file-download-card-group" },
-        React.createElement(_FileCardGroup /* @conditional-compile-remove(file-sharing) */, { ariaLabel: fileCardGroupDescription() }, fileMetadata &&
+        React.createElement(_FileCardGroup, { ariaLabel: fileCardGroupDescription() }, fileMetadata &&
             fileMetadata
                 .filter((attachment) => {
                 /* @conditional-compile-remove(file-sharing) */
@@ -91,7 +93,8 @@ export const _FileDownloadCards = (props) => {
             })
                 .map((file) => file)
                 .map((file) => (React.createElement(TooltipHost, { content: downloadFileButtonString(), key: file.name },
-                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 && isShowDownloadIcon(file) ? (React.createElement(IconButton, { className: iconButtonClassName, ariaLabel: downloadFileButtonString() },
+                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) */ isShowDownloadIcon(file) ? (React.createElement(IconButton, { className: iconButtonClassName, ariaLabel: downloadFileButtonString() },
                         React.createElement(DownloadIconTrampoline, null))) : undefined, actionHandler: () => fileDownloadHandler(userId, file) })))))));
 };
 /**
@@ -104,7 +107,7 @@ 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: '', fileCardGroupMessage: '' };
 };

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.\n\nimport { Icon, IconButton, Spinner, SpinnerSize, TooltipHost } 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/**\n * Represents the type of attachment\n * @public\n */\nexport type ChatAttachmentType = 'inlineImage' | /* @conditional-compile-remove(file-sharing) */ 'file' | 'unknown';\n\n/**\n * Metadata containing basic information about the uploaded file.\n *\n * @beta\n */\nexport interface FileMetadata {\n  attachmentType: 'file';\n  /**\n   * Extension hint, useful for rendering a specific icon.\n   * An unknown or empty extension will be rendered as a generic icon.\n   * Example: `pdf`\n   */\n  extension: string;\n  /**\n   * Unique ID of the file.\n   */\n  id: string;\n  /**\n   * File name to be displayed.\n   */\n  name: string;\n  /**\n   * Download URL for the file.\n   */\n  url: string;\n  /*\n   * Optional dictionary of meta data associated with the file.\n   */\n  payload?: Record<string, string>;\n}\n\n/**\n * Metadata for rendering images inline with a message.\n * This does not include images attached as files.\n * @public\n */\nexport interface InlineImageMetadata {\n  /*\n   * Type of the attachment\n   */\n  attachmentType: 'inlineImage';\n  /**\n   * Unique ID of the attachment.\n   */\n  id: string;\n  /*\n   * Preview URL for low resolution version.\n   */\n  previewUrl?: string;\n  /**\n   * Download URL for the full resolution version.\n   */\n  url: string;\n}\n\n/**\n * Metadata containing information about the uploaded file.\n * @public\n */\nexport type AttachmentMetadata = InlineImageMetadata | /* @conditional-compile-remove(file-sharing) */ FileMetadata;\n\n/**\n * Metadata of the attachment object returned by the ACS SDK.\n * @public\n */\nexport interface AttachmentDownloadResult {\n  /**\n   * Unique ID of the attachment.\n   */\n  attachmentId: string;\n  /**\n   * Blob URL for the attachment.\n   */\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 AttachmentMetadata} containing file `url`, `extension` and `name`.\n */\nexport type FileDownloadHandler = (\n  userId: string,\n  fileMetadata: AttachmentMetadata\n) => Promise<URL | FileDownloadError>;\n\n/**\n * @internal\n */\nexport interface _FileDownloadCardsProps {\n  /**\n   * User id of the local participant\n   */\n  userId: string;\n  /**\n   * A chat message metadata that includes file metadata\n   */\n  fileMetadata?: AttachmentMetadata[];\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 aria label 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: _FileDownloadCardsProps): 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 isFileSharingAttachment = useCallback((attachment: AttachmentMetadata): boolean => {\n    /* @conditional-compile-remove(file-sharing) */\n    return attachment.attachmentType === 'file';\n    return false;\n  }, []);\n\n  const isShowDownloadIcon = useCallback((attachment: AttachmentMetadata): boolean => {\n    /* @conditional-compile-remove(file-sharing) */\n    return attachment.attachmentType === 'file' && attachment.payload?.teamsFileAttachment !== 'true';\n    return true;\n  }, []);\n\n  /* @conditional-compile-remove(file-sharing) */\n  const fileCardGroupDescription = useMemo(\n    () => () => {\n      const fileGroupLocaleString = props.strings?.fileCardGroupMessage ?? localeStrings.fileCardGroupMessage;\n      /* @conditional-compile-remove(file-sharing) */\n      return _formatString(fileGroupLocaleString, {\n        fileCount: `${fileMetadata?.filter(isFileSharingAttachment).length ?? 0}`\n      });\n      return _formatString(fileGroupLocaleString, {\n        fileCount: `${fileMetadata?.length ?? 0}`\n      });\n    },\n    [props.strings?.fileCardGroupMessage, localeStrings.fileCardGroupMessage, fileMetadata, isFileSharingAttachment]\n  );\n\n  const fileDownloadHandler = useCallback(\n    async (userId: string, file: AttachmentMetadata) => {\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 (!fileMetadata || fileMetadata.length === 0 || !fileMetadata.some(isFileSharingAttachment)) {\n    return <></>;\n  }\n\n  return (\n    <div style={fileDownloadCardsStyle} data-ui-id=\"file-download-card-group\">\n      <_FileCardGroup /* @conditional-compile-remove(file-sharing) */ ariaLabel={fileCardGroupDescription()}>\n        {fileMetadata &&\n          fileMetadata\n            .filter((attachment) => {\n              /* @conditional-compile-remove(file-sharing) */\n              return isFileSharingAttachment(attachment);\n              return true;\n            })\n            .map((file) => file as unknown as FileMetadata)\n            .map((file) => (\n              <TooltipHost content={downloadFileButtonString()} key={file.name}>\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 && isShowDownloadIcon(file as unknown as AttachmentMetadata) ? (\n                      <IconButton className={iconButtonClassName} ariaLabel={downloadFileButtonString()}>\n                        <DownloadIconTrampoline />\n                      </IconButton>\n                    ) : undefined\n                  }\n                  actionHandler={() => fileDownloadHandler(userId, file as unknown as AttachmentMetadata)}\n                />\n              </TooltipHost>\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: '', fileCardGroupMessage: '' };\n};\n"]}
+{"version":3,"file":"FileDownloadCards.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/FileDownloadCards.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtF,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,+CAA+C;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,mCAAgC;AAmLxD,MAAM,sBAAsB,GAAG;IAC7B,SAAS,EAAE,SAAS;CACrB,CAAC;AAEF,MAAM,eAAe,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;AAE3C;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAe,EAAE;;IAChF,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IACvC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,aAAa,GAAG,0BAA0B,EAAE,CAAC;IAEnD,MAAM,wBAAwB,GAAG,OAAO,CACtC,GAAG,EAAE,CAAC,GAAG,EAAE;;QACT,OAAO,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,YAAY,mCAAI,aAAa,CAAC,YAAY,CAAC;IACnE,CAAC,EACD,CAAC,MAAA,KAAK,CAAC,OAAO,0CAAE,YAAY,EAAE,aAAa,CAAC,YAAY,CAAC,CAC1D,CAAC;IAEF,MAAM,uBAAuB,GAAG,WAAW,CAAC,CAAC,UAA8B,EAAW,EAAE;QACtF,+CAA+C;QAC/C,OAAO,UAAU,CAAC,cAAc,KAAK,MAAM,CAAC;QAC5C,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,uEAAuE;IACvE,MAAM,kBAAkB,GAAG,WAAW,CAAC,CAAC,UAA8B,EAAW,EAAE;;QACjF,+CAA+C;QAC/C,OAAO,UAAU,CAAC,cAAc,KAAK,MAAM,IAAI,CAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,mBAAmB,MAAK,MAAM,CAAC;QAClG,OAAO,IAAI,CAAC;IACd,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,wBAAwB,GAAG,OAAO,CACtC,GAAG,EAAE,CAAC,GAAG,EAAE;;QACT,MAAM,qBAAqB,GAAG,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,oBAAoB,mCAAI,aAAa,CAAC,oBAAoB,CAAC;QACxG,+CAA+C;QAC/C,OAAO,aAAa,CAAC,qBAAqB,EAAE;YAC1C,SAAS,EAAE,GAAG,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,MAAM,CAAC,uBAAuB,EAAE,MAAM,mCAAI,CAAC,EAAE;SAC1E,CAAC,CAAC;QACH,OAAO,aAAa,CAAC,qBAAqB,EAAE;YAC1C,SAAS,EAAE,GAAG,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,MAAM,mCAAI,CAAC,EAAE;SAC1C,CAAC,CAAC;IACL,CAAC,EACD,CAAC,MAAA,KAAK,CAAC,OAAO,0CAAE,oBAAoB,EAAE,aAAa,CAAC,oBAAoB,EAAE,YAAY,EAAE,uBAAuB,CAAC,CACjH,CAAC;IAEF,MAAM,mBAAmB,GAAG,WAAW,CACrC,CAAO,MAAc,EAAE,IAAwB,EAAE,EAAE;QACjD,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,CAAC;YAC3B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,QAAQ,EAAE,qBAAqB,CAAC,CAAC;QACzD,CAAC;aAAM,CAAC;YACN,cAAc,CAAC,IAAI,CAAC,CAAC;YACrB,IAAI,CAAC;gBACH,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,eAAe,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;gBAC3D,cAAc,CAAC,KAAK,CAAC,CAAC;gBACtB,IAAI,QAAQ,YAAY,GAAG,EAAE,CAAC;oBAC5B,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAE,qBAAqB,CAAC,CAAC;gBACpE,CAAC;qBAAM,CAAC;oBACN,KAAK,CAAC,sBAAsB,IAAI,KAAK,CAAC,sBAAsB,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;gBACtF,CAAC;YACH,CAAC;oBAAS,CAAC;gBACT,cAAc,CAAC,KAAK,CAAC,CAAC;YACxB,CAAC;QACH,CAAC;IACH,CAAC,CAAA,EACD,CAAC,KAAK,CAAC,CACR,CAAC;IACF,IACE,CAAC,YAAY;QACb,YAAY,CAAC,MAAM,KAAK,CAAC;QACzB,uEAAuE,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,uBAAuB,CAAC,EACnH,CAAC;QACD,OAAO,yCAAK,CAAC;IACf,CAAC;IAED,OAAO,CACL,6BAAK,KAAK,EAAE,sBAAsB,gBAAa,0BAA0B;QACvE,oBAAC,cAAc,IAAC,SAAS,EAAE,wBAAwB,EAAE,IAClD,YAAY;YACX,YAAY;iBACT,MAAM,CAAC,CAAC,UAAU,EAAE,EAAE;gBACrB,+CAA+C;gBAC/C,OAAO,uBAAuB,CAAC,UAAU,CAAC,CAAC;gBAC3C,OAAO,IAAI,CAAC;YACd,CAAC,CAAC;iBACD,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAA+B,CAAC;iBAC9C,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACb,oBAAC,WAAW,IAAC,OAAO,EAAE,wBAAwB,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,IAAI;gBAC9D,oBAAC,SAAS,IACR,QAAQ,EAAE,IAAI,CAAC,IAAI,EACnB,GAAG,EAAE,IAAI,CAAC,IAAI,EACd,aAAa,EAAE,IAAI,CAAC,SAAS,EAC7B,UAAU,EACR,WAAW,CAAC,CAAC,CAAC,CACZ,oBAAC,OAAO,IAAC,IAAI,EAAE,WAAW,CAAC,MAAM,eAAa,QAAQ,EAAE,IAAI,EAAE,QAAQ,GAAI,CAC3E,CAAC,CAAC,CAAC,IAAI;wBACN,uEAAuE,CAAC,kBAAkB,CACxF,IAAqC,CACtC,CAAC,CAAC,CAAC,CACJ,oBAAC,UAAU,IAAC,SAAS,EAAE,mBAAmB,EAAE,SAAS,EAAE,wBAAwB,EAAE;wBAC/E,oBAAC,sBAAsB,OAAG,CACf,CACd,CAAC,CAAC,CAAC,SAAS,EAEf,aAAa,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,MAAM,EAAE,IAAqC,CAAC,GACvF,CACU,CACf,CAAC,CACS,CACb,CACP,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,sBAAsB,GAAG,GAAgB,EAAE;IAC/C,4CAA4C;IAC5C,OAAO,oBAAC,IAAI,kBAAY,kCAAkC,EAAC,QAAQ,EAAC,cAAc,EAAC,KAAK,EAAE,eAAe,GAAI,CAAC;IAC9G,+DAA+D;IAC/D,OAAO,oBAAC,IAAI,IAAC,QAAQ,EAAC,eAAe,EAAC,KAAK,EAAE,eAAe,GAAI,CAAC;AACnE,CAAC,CAAC;AAEF,MAAM,0BAA0B,GAAG,GAA8B,EAAE;IACjE,gHAAgH;IAChH,OAAO,SAAS,EAAE,CAAC,OAAO,CAAC,aAAa,CAAC;IACzC,OAAO,EAAE,YAAY,EAAE,EAAE,EAAE,oBAAoB,EAAE,EAAE,EAAE,CAAC;AACxD,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, IconButton, Spinner, SpinnerSize, TooltipHost } 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(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n/**\n * Represents the type of attachment\n * @beta\n */\nexport type ChatAttachmentType =\n  | 'unknown'\n  | /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ 'inlineImage'\n  | /* @conditional-compile-remove(file-sharing) */ 'file';\n\n/**\n * Metadata containing basic information about the uploaded file.\n *\n * @beta\n */\nexport interface FileMetadata {\n  /* @conditional-compile-remove(file-sharing) */\n  attachmentType: 'file';\n  /**\n   * Extension hint, useful for rendering a specific icon.\n   * An unknown or empty extension will be rendered as a generic icon.\n   * Example: `pdf`\n   */\n  extension: string;\n  /**\n   * Unique ID of the file.\n   */\n  /* @conditional-compile-remove(file-sharing) */\n  id: string;\n  /**\n   * File name to be displayed.\n   */\n  name: string;\n  /**\n   * Download URL for the file.\n   */\n  url: string;\n  /* @conditional-compile-remove(file-sharing) */\n  /*\n   * Optional dictionary of meta data associated with the file.\n   */\n  payload?: Record<string, string>;\n}\n\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n/**\n * Metadata for rendering images inline with a message.\n * This does not include images attached as files.\n * @beta\n */\nexport interface InlineImageMetadata {\n  /*\n   * Type of the attachment\n   */\n  attachmentType: 'inlineImage';\n  /**\n   * Unique ID of the attachment.\n   */\n  id: string;\n  /*\n   * Preview URL for low resolution version.\n   */\n  previewUrl?: string;\n  /**\n   * Download URL for the full resolution version.\n   */\n  url: string;\n}\n\n/**\n * Metadata containing information about the uploaded file.\n * @beta\n */\nexport type AttachmentMetadata =\n  | FileMetadata\n  | /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ InlineImageMetadata;\n\n/* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n/**\n * Metadata of the attachment object returned by the ACS SDK.\n * @beta\n */\nexport interface AttachmentDownloadResult {\n  /**\n   * Unique ID of the attachment.\n   */\n  attachmentId: string;\n  /**\n   * Blob URL for the attachment.\n   */\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 AttachmentMetadata} containing file `url`, `extension` and `name`.\n */\nexport type FileDownloadHandler = (\n  userId: string,\n  fileMetadata: AttachmentMetadata\n) => Promise<URL | FileDownloadError>;\n\n/**\n * @internal\n */\nexport interface _FileDownloadCardsProps {\n  /**\n   * User id of the local participant\n   */\n  userId: string;\n  /**\n   * A chat message metadata that includes file metadata\n   */\n  fileMetadata?: AttachmentMetadata[];\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 aria label 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: _FileDownloadCardsProps): 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 isFileSharingAttachment = useCallback((attachment: AttachmentMetadata): boolean => {\n    /* @conditional-compile-remove(file-sharing) */\n    return attachment.attachmentType === 'file';\n    return false;\n  }, []);\n\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  const isShowDownloadIcon = useCallback((attachment: AttachmentMetadata): boolean => {\n    /* @conditional-compile-remove(file-sharing) */\n    return attachment.attachmentType === 'file' && attachment.payload?.teamsFileAttachment !== 'true';\n    return true;\n  }, []);\n\n  const fileCardGroupDescription = useMemo(\n    () => () => {\n      const fileGroupLocaleString = props.strings?.fileCardGroupMessage ?? localeStrings.fileCardGroupMessage;\n      /* @conditional-compile-remove(file-sharing) */\n      return _formatString(fileGroupLocaleString, {\n        fileCount: `${fileMetadata?.filter(isFileSharingAttachment).length ?? 0}`\n      });\n      return _formatString(fileGroupLocaleString, {\n        fileCount: `${fileMetadata?.length ?? 0}`\n      });\n    },\n    [props.strings?.fileCardGroupMessage, localeStrings.fileCardGroupMessage, fileMetadata, isFileSharingAttachment]\n  );\n\n  const fileDownloadHandler = useCallback(\n    async (userId: string, file: AttachmentMetadata) => {\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(isFileSharingAttachment)\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(file-sharing) */\n              return isFileSharingAttachment(attachment);\n              return true;\n            })\n            .map((file) => file as unknown as FileMetadata)\n            .map((file) => (\n              <TooltipHost content={downloadFileButtonString()} key={file.name}>\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) */ isShowDownloadIcon(\n                        file as unknown as AttachmentMetadata\n                      ) ? (\n                      <IconButton className={iconButtonClassName} ariaLabel={downloadFileButtonString()}>\n                        <DownloadIconTrampoline />\n                      </IconButton>\n                    ) : undefined\n                  }\n                  actionHandler={() => fileDownloadHandler(userId, file as unknown as AttachmentMetadata)}\n                />\n              </TooltipHost>\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"]}

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

@@ -2,7 +2,7 @@ import { SyntheticEvent } from 'react';
 /**
  * Props for {@link ImageGallery}.
  *
- * @public
+ * @beta
  */
 export interface ImageGalleryImageProps {
     /** Image Url used to display the image in a large scale. */
@@ -19,7 +19,7 @@ export interface ImageGalleryImageProps {
 /**
  * Props for {@link ImageGallery}.
  *
- * @public
+ * @beta
  */
 export interface ImageGalleryProps {
     /**
@@ -50,7 +50,7 @@ export interface ImageGalleryProps {
 /**
  * Strings of {@link ImageGallery} that can be overridden.
  *
- * @public
+ * @beta
  */
 export interface ImageGalleryStrings {
     /**
@@ -65,7 +65,7 @@ export interface ImageGalleryStrings {
 /**
  * Component to render a fullscreen modal for a selected image.
  *
- * @public
+ * @beta
  */
 export declare const ImageGallery: (props: ImageGalleryProps) => JSX.Element;
 //# sourceMappingURL=ImageGallery.d.ts.map

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

@@ -1,18 +1,25 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
+/* @conditional-compile-remove(image-gallery) */
 import { DefaultButton, Icon, IconButton, Modal, Stack, mergeStyles } from '@fluentui/react';
+/* @conditional-compile-remove(image-gallery) */
 import React, { useState } from 'react';
+/* @conditional-compile-remove(image-gallery) */
 import { bodyContainer, brokenImageStyle, cancelIcon, closeButtonStyles, controlBarContainerStyle, downloadButtonStyle, downloadIcon, downloadIconStyle, focusTrapZoneStyle, headerStyle, normalImageStyle, overlayStyles, scrollableContentStyle, smallDownloadButtonContainerStyle, titleBarContainerStyle, titleStyle } from './styles/ImageGallery.style';
+/* @conditional-compile-remove(image-gallery) */
 import { useTheme } from '../theming/FluentThemeProvider';
+/* @conditional-compile-remove(image-gallery) */
 import { useLocale } from '../localization';
+/* @conditional-compile-remove(image-gallery) */
 /**
  * Component to render a fullscreen modal for a selected image.
  *
- * @public
+ * @beta
  */
 export const ImageGallery = (props) => {
     const { isOpen, images, onImageDownloadButtonClicked, onDismiss, onError, startIndex = 0 } = props;
     const theme = useTheme();
+    /* @conditional-compile-remove(image-gallery) */
     const localeStrings = useLocale().strings.imageGallery;
     const [isImageLoaded, setIsImageLoaded] = useState(true);
     const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(theme);
@@ -23,9 +30,13 @@ export const ImageGallery = (props) => {
                 image.titleIcon,
                 React.createElement(Stack.Item, { className: mergeStyles(titleStyle(theme)), "aria-label": image === null || image === void 0 ? void 0 : image.title }, image === null || image === void 0 ? void 0 : image.title)),
             React.createElement(Stack, { className: mergeStyles(controlBarContainerStyle) },
-                React.createElement(DefaultButton, { className: mergeStyles(downloadButtonStyle(theme)), text: localeStrings.downloadButtonLabel, onClick: () => onImageDownloadButtonClicked((image === null || image === void 0 ? void 0 : image.imageUrl) || '', (image === null || image === void 0 ? void 0 : image.downloadFilename) || 'image'), onRenderIcon: () => React.createElement(Icon, { iconName: downloadIcon.iconName, className: mergeStyles(downloadIconStyle) }), "aria-live": 'polite', "aria-label": localeStrings.downloadButtonLabel }),
+                React.createElement(DefaultButton, { className: mergeStyles(downloadButtonStyle(theme)), 
+                    /* @conditional-compile-remove(image-gallery) */
+                    text: localeStrings.downloadButtonLabel, onClick: () => onImageDownloadButtonClicked((image === null || image === void 0 ? void 0 : image.imageUrl) || '', (image === null || image === void 0 ? void 0 : image.downloadFilename) || 'image'), onRenderIcon: () => React.createElement(Icon, { iconName: downloadIcon.iconName, className: mergeStyles(downloadIconStyle) }), "aria-live": 'polite', "aria-label": localeStrings.downloadButtonLabel }),
                 React.createElement(IconButton, { iconProps: downloadIcon, className: mergeStyles(smallDownloadButtonContainerStyle(theme)), onClick: () => onImageDownloadButtonClicked(image === null || image === void 0 ? void 0 : image.imageUrl, image === null || image === void 0 ? void 0 : image.downloadFilename), "aria-label": localeStrings.downloadButtonLabel, "aria-live": 'polite' }),
-                React.createElement(IconButton, { iconProps: cancelIcon, className: mergeStyles(closeButtonStyles(theme)), onClick: onDismiss, ariaLabel: localeStrings.dismissButtonAriaLabel, "aria-live": 'polite' }))));
+                React.createElement(IconButton, { iconProps: cancelIcon, className: mergeStyles(closeButtonStyles(theme)), onClick: onDismiss, 
+                    /* @conditional-compile-remove(image-gallery) */
+                    ariaLabel: localeStrings.dismissButtonAriaLabel, "aria-live": 'polite' }))));
     };
     const renderBodyWithLightDismiss = () => {
         return (React.createElement(Stack, { className: mergeStyles(bodyContainer), onClick: () => props.onDismiss() }, images.length > startIndex && (React.createElement("img", { src: image === null || image === void 0 ? void 0 : image.imageUrl, className: mergeStyles(imageStyle), alt: (image === null || image === void 0 ? void 0 : image.altText) || 'image', "aria-label": 'image-gallery-main-image', "aria-live": 'polite', onError: (event) => {

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

@@ -1 +1 @@
-{"version":3,"file":"ImageGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ImageGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, Icon, IconButton, Modal, Stack, mergeStyles } from '@fluentui/react';\nimport React, { SyntheticEvent, useState } from 'react';\n\nimport {\n  bodyContainer,\n  brokenImageStyle,\n  cancelIcon,\n  closeButtonStyles,\n  controlBarContainerStyle,\n  downloadButtonStyle,\n  downloadIcon,\n  downloadIconStyle,\n  focusTrapZoneStyle,\n  headerStyle,\n  normalImageStyle,\n  overlayStyles,\n  scrollableContentStyle,\n  smallDownloadButtonContainerStyle,\n  titleBarContainerStyle,\n  titleStyle\n} from './styles/ImageGallery.style';\nimport { useTheme } from '../theming/FluentThemeProvider';\nimport { useLocale } from '../localization';\nimport { ChatTheme } from '../theming';\n/**\n * Props for {@link ImageGallery}.\n *\n * @public\n */\nexport interface ImageGalleryImageProps {\n  /** Image Url used to display the image in a large scale. */\n  imageUrl: string;\n  /** String used as a file name when downloading this image to user's local device. */\n  downloadFilename: string;\n  /** Optional string used as a alt text for the image. @default 'image' */\n  altText?: string;\n  /** Optional string used as the title of the image and displayed on the top left corner of the ImageGallery. */\n  title?: string;\n  /** Optional JSX element used as a title icon and displayed to the left of the title element. */\n  titleIcon?: JSX.Element;\n}\n\n/**\n * Props for {@link ImageGallery}.\n *\n * @public\n */\nexport interface ImageGalleryProps {\n  /**\n   * Boolean that controls whether the modal is displayed.\n   */\n  isOpen: boolean;\n  /**\n   * Array of images used to populate the ImageGallery\n   */\n  images: Array<ImageGalleryImageProps>;\n  /**\n   * Callback to invoke when the ImageGallery modal is dismissed\n   */\n  onDismiss: () => void;\n  /**\n   * Callback called when the download button is clicked.\n   */\n  onImageDownloadButtonClicked: (imageUrl: string, downloadFilename: string) => void;\n  /**\n   * Callback called when there's an error loading the image.\n   */\n  onError?: (event: SyntheticEvent<HTMLImageElement, Event>) => void;\n  /**\n   * Indicating which index of the images array to start with.\n   */\n  startIndex?: number;\n}\n\n/**\n * Strings of {@link ImageGallery} that can be overridden.\n *\n * @public\n */\nexport interface ImageGalleryStrings {\n  /**\n   * Download button label for ImageGallery\n   */\n  downloadButtonLabel: string;\n  /**\n   * Dismiss button aria label for ImageGallery\n   */\n  dismissButtonAriaLabel: string;\n}\n\n/**\n * Component to render a fullscreen modal for a selected image.\n *\n * @public\n */\nexport const ImageGallery = (props: ImageGalleryProps): JSX.Element => {\n  const { isOpen, images, onImageDownloadButtonClicked, onDismiss, onError, startIndex = 0 } = props;\n  const theme = useTheme() as unknown as ChatTheme;\n\n  const localeStrings = useLocale().strings.imageGallery;\n\n  const [isImageLoaded, setIsImageLoaded] = useState<boolean>(true);\n\n  const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(theme);\n\n  const image = images[startIndex];\n  const renderHeaderBar = (): JSX.Element => {\n    return (\n      <Stack className={mergeStyles(headerStyle)}>\n        <Stack className={mergeStyles(titleBarContainerStyle)}>\n          {image?.titleIcon}\n          <Stack.Item className={mergeStyles(titleStyle(theme))} aria-label={image?.title}>\n            {image?.title}\n          </Stack.Item>\n        </Stack>\n        <Stack className={mergeStyles(controlBarContainerStyle)}>\n          <DefaultButton\n            className={mergeStyles(downloadButtonStyle(theme))}\n            text={localeStrings.downloadButtonLabel}\n            onClick={() => onImageDownloadButtonClicked(image?.imageUrl || '', image?.downloadFilename || 'image')}\n            onRenderIcon={() => <Icon iconName={downloadIcon.iconName} className={mergeStyles(downloadIconStyle)} />}\n            aria-live={'polite'}\n            aria-label={localeStrings.downloadButtonLabel}\n          />\n          <IconButton\n            iconProps={downloadIcon}\n            className={mergeStyles(smallDownloadButtonContainerStyle(theme))}\n            onClick={() => onImageDownloadButtonClicked(image?.imageUrl, image?.downloadFilename)}\n            aria-label={localeStrings.downloadButtonLabel}\n            aria-live={'polite'}\n          />\n          <IconButton\n            iconProps={cancelIcon}\n            className={mergeStyles(closeButtonStyles(theme))}\n            onClick={onDismiss}\n            ariaLabel={localeStrings.dismissButtonAriaLabel}\n            aria-live={'polite'}\n          />\n        </Stack>\n      </Stack>\n    );\n  };\n\n  const renderBodyWithLightDismiss = (): JSX.Element => {\n    return (\n      <Stack className={mergeStyles(bodyContainer)} onClick={() => props.onDismiss()}>\n        {images.length > startIndex && (\n          <img\n            src={image?.imageUrl}\n            className={mergeStyles(imageStyle)}\n            alt={image?.altText || 'image'}\n            aria-label={'image-gallery-main-image'}\n            aria-live={'polite'}\n            onError={(event) => {\n              setIsImageLoaded(false);\n              onError && onError(event);\n            }}\n            onClick={(event) => event.stopPropagation()}\n            onDoubleClick={(event) => {\n              event.persist();\n            }}\n          />\n        )}\n      </Stack>\n    );\n  };\n\n  return (\n    <Modal\n      titleAriaId={image?.title}\n      isOpen={isOpen}\n      onDismiss={onDismiss}\n      overlay={{ styles: { ...overlayStyles(theme) } }}\n      styles={{ main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }}\n      isDarkOverlay={true}\n    >\n      {renderHeaderBar()}\n      {renderBodyWithLightDismiss()}\n    </Modal>\n  );\n};\n"]}
+{"version":3,"file":"ImageGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ImageGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,gDAAgD;AAChD,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC7F,gDAAgD;AAChD,OAAO,KAAK,EAAE,EAAkB,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxD,gDAAgD;AAChD,OAAO,EACL,aAAa,EACb,gBAAgB,EAChB,UAAU,EACV,iBAAiB,EACjB,wBAAwB,EACxB,mBAAmB,EACnB,YAAY,EACZ,iBAAiB,EACjB,kBAAkB,EAClB,WAAW,EACX,gBAAgB,EAChB,aAAa,EACb,sBAAsB,EACtB,iCAAiC,EACjC,sBAAsB,EACtB,UAAU,EACX,MAAM,6BAA6B,CAAC;AACrC,gDAAgD;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,gDAAgD;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAoE5C,gDAAgD;AAChD;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAe,EAAE;IACpE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,4BAA4B,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC;IACnG,MAAM,KAAK,GAAG,QAAQ,EAA0B,CAAC;IAEjD,gDAAgD;IAChD,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC;IAEvD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAU,IAAI,CAAC,CAAC;IAElE,MAAM,UAAU,GAAG,aAAa,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAE9E,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IACjC,MAAM,eAAe,GAAG,GAAgB,EAAE;QACxC,OAAO,CACL,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,WAAW,CAAC;YACxC,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,sBAAsB,CAAC,IAClD,KAAK,aAAL,KAAK;gBAAL,KAAK,CAAE,SAAS;gBACjB,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,gBAAc,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,IAC5E,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CACF,CACP;YACR,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,wBAAwB,CAAC;gBACrD,oBAAC,aAAa,IACZ,SAAS,EAAE,WAAW,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC;oBAClD,gDAAgD;oBAChD,IAAI,EAAE,aAAa,CAAC,mBAAmB,EACvC,OAAO,EAAE,GAAG,EAAE,CAAC,4BAA4B,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,KAAI,EAAE,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,gBAAgB,KAAI,OAAO,CAAC,EACtG,YAAY,EAAE,GAAG,EAAE,CAAC,oBAAC,IAAI,IAAC,QAAQ,EAAE,YAAY,CAAC,QAAQ,EAAE,SAAS,EAAE,WAAW,CAAC,iBAAiB,CAAC,GAAI,eAC7F,QAAQ,gBAEP,aAAa,CAAC,mBAAmB,GAC7C;gBACF,oBAAC,UAAU,IACT,SAAS,EAAE,YAAY,EACvB,SAAS,EAAE,WAAW,CAAC,iCAAiC,CAAC,KAAK,CAAC,CAAC,EAChE,OAAO,EAAE,GAAG,EAAE,CAAC,4BAA4B,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,gBAAgB,CAAC,gBAEzE,aAAa,CAAC,mBAAmB,eAClC,QAAQ,GACnB;gBACF,oBAAC,UAAU,IACT,SAAS,EAAE,UAAU,EACrB,SAAS,EAAE,WAAW,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,EAChD,OAAO,EAAE,SAAS;oBAClB,gDAAgD;oBAChD,SAAS,EAAE,aAAa,CAAC,sBAAsB,eACpC,QAAQ,GACnB,CACI,CACF,CACT,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,0BAA0B,GAAG,GAAgB,EAAE;QACnD,OAAO,CACL,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,EAAE,IAC3E,MAAM,CAAC,MAAM,GAAG,UAAU,IAAI,CAC7B,6BACE,GAAG,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,EACpB,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,EAClC,GAAG,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,KAAI,OAAO,gBAClB,0BAA0B,eAC3B,QAAQ,EACnB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;gBACjB,gBAAgB,CAAC,KAAK,CAAC,CAAC;gBACxB,OAAO,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC;YAC5B,CAAC,EACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe,EAAE,EAC3C,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE;gBACvB,KAAK,CAAC,OAAO,EAAE,CAAC;YAClB,CAAC,GACD,CACH,CACK,CACT,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,IACJ,WAAW,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,EACzB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,EAAE,MAAM,oBAAO,aAAa,CAAC,KAAK,CAAC,CAAE,EAAE,EAChD,MAAM,EAAE,EAAE,IAAI,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,EAC/E,aAAa,EAAE,IAAI;QAElB,eAAe,EAAE;QACjB,0BAA0B,EAAE,CACvB,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(image-gallery) */\nimport { DefaultButton, Icon, IconButton, Modal, Stack, mergeStyles } from '@fluentui/react';\n/* @conditional-compile-remove(image-gallery) */\nimport React, { SyntheticEvent, useState } from 'react';\n/* @conditional-compile-remove(image-gallery) */\nimport {\n  bodyContainer,\n  brokenImageStyle,\n  cancelIcon,\n  closeButtonStyles,\n  controlBarContainerStyle,\n  downloadButtonStyle,\n  downloadIcon,\n  downloadIconStyle,\n  focusTrapZoneStyle,\n  headerStyle,\n  normalImageStyle,\n  overlayStyles,\n  scrollableContentStyle,\n  smallDownloadButtonContainerStyle,\n  titleBarContainerStyle,\n  titleStyle\n} from './styles/ImageGallery.style';\n/* @conditional-compile-remove(image-gallery) */\nimport { useTheme } from '../theming/FluentThemeProvider';\n/* @conditional-compile-remove(image-gallery) */\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(image-gallery) */\nimport { ChatTheme } from '../theming';\n/**\n * Props for {@link ImageGallery}.\n *\n * @beta\n */\nexport interface ImageGalleryImageProps {\n  /** Image Url used to display the image in a large scale. */\n  imageUrl: string;\n  /** String used as a file name when downloading this image to user's local device. */\n  downloadFilename: string;\n  /** Optional string used as a alt text for the image. @default 'image' */\n  altText?: string;\n  /** Optional string used as the title of the image and displayed on the top left corner of the ImageGallery. */\n  title?: string;\n  /** Optional JSX element used as a title icon and displayed to the left of the title element. */\n  titleIcon?: JSX.Element;\n}\n/* @conditional-compile-remove(image-gallery) */\n/**\n * Props for {@link ImageGallery}.\n *\n * @beta\n */\nexport interface ImageGalleryProps {\n  /**\n   * Boolean that controls whether the modal is displayed.\n   */\n  isOpen: boolean;\n  /**\n   * Array of images used to populate the ImageGallery\n   */\n  images: Array<ImageGalleryImageProps>;\n  /**\n   * Callback to invoke when the ImageGallery modal is dismissed\n   */\n  onDismiss: () => void;\n  /**\n   * Callback called when the download button is clicked.\n   */\n  onImageDownloadButtonClicked: (imageUrl: string, downloadFilename: string) => void;\n  /**\n   * Callback called when there's an error loading the image.\n   */\n  onError?: (event: SyntheticEvent<HTMLImageElement, Event>) => void;\n  /**\n   * Indicating which index of the images array to start with.\n   */\n  startIndex?: number;\n}\n/* @conditional-compile-remove(image-gallery) */\n/**\n * Strings of {@link ImageGallery} that can be overridden.\n *\n * @beta\n */\nexport interface ImageGalleryStrings {\n  /**\n   * Download button label for ImageGallery\n   */\n  downloadButtonLabel: string;\n  /**\n   * Dismiss button aria label for ImageGallery\n   */\n  dismissButtonAriaLabel: string;\n}\n/* @conditional-compile-remove(image-gallery) */\n/**\n * Component to render a fullscreen modal for a selected image.\n *\n * @beta\n */\nexport const ImageGallery = (props: ImageGalleryProps): JSX.Element => {\n  const { isOpen, images, onImageDownloadButtonClicked, onDismiss, onError, startIndex = 0 } = props;\n  const theme = useTheme() as unknown as ChatTheme;\n\n  /* @conditional-compile-remove(image-gallery) */\n  const localeStrings = useLocale().strings.imageGallery;\n\n  const [isImageLoaded, setIsImageLoaded] = useState<boolean>(true);\n\n  const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(theme);\n\n  const image = images[startIndex];\n  const renderHeaderBar = (): JSX.Element => {\n    return (\n      <Stack className={mergeStyles(headerStyle)}>\n        <Stack className={mergeStyles(titleBarContainerStyle)}>\n          {image?.titleIcon}\n          <Stack.Item className={mergeStyles(titleStyle(theme))} aria-label={image?.title}>\n            {image?.title}\n          </Stack.Item>\n        </Stack>\n        <Stack className={mergeStyles(controlBarContainerStyle)}>\n          <DefaultButton\n            className={mergeStyles(downloadButtonStyle(theme))}\n            /* @conditional-compile-remove(image-gallery) */\n            text={localeStrings.downloadButtonLabel}\n            onClick={() => onImageDownloadButtonClicked(image?.imageUrl || '', image?.downloadFilename || 'image')}\n            onRenderIcon={() => <Icon iconName={downloadIcon.iconName} className={mergeStyles(downloadIconStyle)} />}\n            aria-live={'polite'}\n            /* @conditional-compile-remove(image-gallery) */\n            aria-label={localeStrings.downloadButtonLabel}\n          />\n          <IconButton\n            iconProps={downloadIcon}\n            className={mergeStyles(smallDownloadButtonContainerStyle(theme))}\n            onClick={() => onImageDownloadButtonClicked(image?.imageUrl, image?.downloadFilename)}\n            /* @conditional-compile-remove(image-gallery) */\n            aria-label={localeStrings.downloadButtonLabel}\n            aria-live={'polite'}\n          />\n          <IconButton\n            iconProps={cancelIcon}\n            className={mergeStyles(closeButtonStyles(theme))}\n            onClick={onDismiss}\n            /* @conditional-compile-remove(image-gallery) */\n            ariaLabel={localeStrings.dismissButtonAriaLabel}\n            aria-live={'polite'}\n          />\n        </Stack>\n      </Stack>\n    );\n  };\n\n  const renderBodyWithLightDismiss = (): JSX.Element => {\n    return (\n      <Stack className={mergeStyles(bodyContainer)} onClick={() => props.onDismiss()}>\n        {images.length > startIndex && (\n          <img\n            src={image?.imageUrl}\n            className={mergeStyles(imageStyle)}\n            alt={image?.altText || 'image'}\n            aria-label={'image-gallery-main-image'}\n            aria-live={'polite'}\n            onError={(event) => {\n              setIsImageLoaded(false);\n              onError && onError(event);\n            }}\n            onClick={(event) => event.stopPropagation()}\n            onDoubleClick={(event) => {\n              event.persist();\n            }}\n          />\n        )}\n      </Stack>\n    );\n  };\n\n  return (\n    <Modal\n      titleAriaId={image?.title}\n      isOpen={isOpen}\n      onDismiss={onDismiss}\n      overlay={{ styles: { ...overlayStyles(theme) } }}\n      styles={{ main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }}\n      isDarkOverlay={true}\n    >\n      {renderHeaderBar()}\n      {renderBodyWithLightDismiss()}\n    </Modal>\n  );\n};\n"]}

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

@@ -238,7 +238,7 @@ export type MessageThreadProps = {
     /**
      * Optional callback to retrieve the inline image in a message.
      * @param attachment - AttachmentMetadata object we want to render
-     * @public
+     * @beta
      */
     onFetchAttachments?: (attachments: AttachmentMetadata[]) => Promise<AttachmentDownloadResult[]>;
     /**
@@ -301,7 +301,7 @@ export type MessageThreadProps = {
     mentionOptions?: MentionOptions;
     /**
      * Optional callback called when an inline image is clicked.
-     * @public
+     * @beta
      */
     onInlineImageClicked?: (attachmentId: string, messageId: string) => Promise<void>;
 };

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

@@ -161,9 +161,13 @@ export const MessageThreadWrapper = (props) => {
     var _a;
     const { messages: newMessages, userId, participantCount, readReceiptsBySenderId, styles, disableJumpToNewMessageButton = false, showMessageDate = false, showMessageStatus = false, numberOfChatMessagesToReload = 5, onMessageSeen, onRenderMessageStatus, onRenderAvatar, onLoadPreviousChatMessages, onRenderJumpToNewMessageButton, onRenderMessage, onUpdateMessage, onCancelEditMessage, onDeleteMessage, onSendMessage, 
     /* @conditional-compile-remove(date-time-customization) */
-    onDisplayDateTimeString, onFetchAttachments, 
+    onDisplayDateTimeString, 
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    onFetchAttachments, 
     /* @conditional-compile-remove(mention) */
-    mentionOptions, onInlineImageClicked, 
+    mentionOptions, 
+    /* @conditional-compile-remove(image-gallery) */
+    onInlineImageClicked, 
     /* @conditional-compile-remove(file-sharing) */
     onRenderFileDownloads } = props;
     // We need this state to wait for one tick and scroll to bottom after messages have been initialized.
@@ -180,7 +184,9 @@ export const MessageThreadWrapper = (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((attachments, messageId) => __awaiter(void 0, void 0, void 0, function* () {
         if (!onFetchAttachments || attachments.length === 0) {
             return;
@@ -497,7 +503,13 @@ export const MessageThreadWrapper = (props) => {
                     className: mergeClasses(classes.root, mergeStyles(styles === null || styles === void 0 ? void 0 : styles.chatContainer)), ref: chatScrollDivRef, style: Object.assign({}, createStyleFromV8Style(styles === null || styles === void 0 ? void 0 : styles.chatContainer)) }, messagesToDisplay.map((message) => {
                     return (React.createElement(MemoChatMessageComponentWrapper, Object.assign({}, message, { userId: userId, key: message.key, styles: styles, shouldOverlapAvatarAndMessage: isNarrow, strings: strings, onRenderAvatar: onRenderAvatar, onRenderMessage: onRenderMessage, onRenderMessageStatus: onRenderMessageStatus, defaultStatusRenderer: defaultStatusRenderer, onActionButtonClick: onActionButtonClickMemo, readCount: readCountForHoveredIndicator, participantCount: participantCount, 
                         /* @conditional-compile-remove(file-sharing) */
-                        fileDownloadHandler: props.fileDownloadHandler, onFetchInlineAttachment: onFetchInlineAttachment, inlineAttachments: inlineAttachments, onInlineImageClicked: onInlineImageClicked, 
+                        fileDownloadHandler: props.fileDownloadHandler, 
+                        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+                        onFetchInlineAttachment: onFetchInlineAttachment, 
+                        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+                        inlineAttachments: inlineAttachments, 
+                        /* @conditional-compile-remove(image-gallery) */
+                        onInlineImageClicked: onInlineImageClicked, 
                         /* @conditional-compile-remove(date-time-customization) */
                         onDisplayDateTimeString: onDisplayDateTimeString, 
                         /* @conditional-compile-remove(mention) */