@azure/communication-react 1.14.1-alpha-202403210013 → 1.14.1-alpha-202403270012

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

@@ -0,0 +1,108 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { 
+// eslint-disable-next-line no-restricted-imports
+Icon } from '@fluentui/react';
+import { Card, CardHeader, Text, Menu, MenuTrigger, ToolbarButton, MenuPopover, MenuItem, MenuList, Toolbar, CardFooter, ProgressBar } from '@fluentui/react-components';
+import { getFileTypeIconProps } from '@fluentui/react-file-type-icons';
+import React from 'react';
+import { Announcer } from './Announcer';
+import { useEffect, useState, useMemo, useCallback } from 'react';
+import { useLocaleAttachmentCardStringsTrampoline } from './utils/common';
+import { MoreHorizontal24Filled } from '@fluentui/react-icons';
+import { useAttachmentCardStyles, fileNameContainerClassName } from './styles/AttachmentCard.styles';
+/**
+ * @internal
+ * A component for displaying an attachment card with attachment icon and progress bar.
+ *
+ * `_AttachmentCard` internally uses the `Card` component from `@fluentui/react-components`. You can checkout the details about these components [here](https://react.fluentui.dev/?path=/docs/components-card).
+ */
+export const _AttachmentCard = (props) => {
+    var _a, _b, _c, _d;
+    const { attachmentName, attachmentExtension, progress, actionIcon, actionHandler } = props;
+    const attachmentCardStyles = useAttachmentCardStyles();
+    // default/placeholder before actual code implemented
+    const menuActions = useMemo(() => {
+        return [
+            {
+                name: actionIcon && (actionIcon === null || actionIcon === void 0 ? void 0 : actionIcon.props.ariaLabel),
+                icon: actionIcon !== null && actionIcon !== void 0 ? actionIcon : React.createElement(React.Fragment, null),
+                onClick: (attachment) => {
+                    if (attachment) {
+                        actionHandler === null || actionHandler === void 0 ? void 0 : actionHandler();
+                    }
+                }
+            }
+        ];
+    }, [actionIcon, actionHandler]);
+    // placeholder before refactoring the props
+    const attachment = useMemo(() => {
+        return {
+            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+            id: 'attachmentId',
+            extension: attachmentExtension,
+            name: attachmentName,
+            url: 'https://localhost' // placeholder not used
+        };
+    }, [attachmentExtension, attachmentName]);
+    // placeholder before refactoring the props
+    const onDownloadErrorMessage = useCallback((errorMessage) => {
+        console.log(errorMessage);
+    }, []);
+    const isUploadComplete = useMemo(() => {
+        return progress !== undefined && progress > 0 && progress < 1;
+    }, [progress]);
+    const [announcerString, setAnnouncerString] = useState(undefined);
+    const localeStrings = useLocaleAttachmentCardStringsTrampoline();
+    const uploadStartedString = (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.uploading) !== null && _b !== void 0 ? _b : localeStrings.uploading;
+    const uploadCompletedString = (_d = (_c = props.strings) === null || _c === void 0 ? void 0 : _c.uploadCompleted) !== null && _d !== void 0 ? _d : localeStrings.uploadCompleted;
+    const showProgressIndicator = progress !== undefined && progress > 0 && progress < 1;
+    useEffect(() => {
+        if (showProgressIndicator) {
+            setAnnouncerString(`${uploadStartedString} ${attachmentName}`);
+        }
+        else if (progress === 1) {
+            setAnnouncerString(`${attachmentName} ${uploadCompletedString}`);
+        }
+        else {
+            setAnnouncerString(undefined);
+        }
+    }, [progress, showProgressIndicator, attachmentName, uploadStartedString, uploadCompletedString]);
+    return (React.createElement("div", { "data-is-focusable": true },
+        React.createElement(Announcer, { announcementString: announcerString, ariaLive: 'polite' }),
+        React.createElement(Card, { className: attachmentCardStyles.root, size: "small", role: "listitem" },
+            React.createElement(CardHeader, { image: React.createElement(Icon, { "data-ui-id": 'filetype-icon', iconName: getFileTypeIconProps({
+                        extension: attachmentExtension,
+                        size: 24,
+                        imageFileType: 'svg'
+                    }).iconName }), header: React.createElement("div", { className: fileNameContainerClassName },
+                    React.createElement(Text, { title: attachmentName }, attachmentName)), action: getMenuItems(menuActions, attachment, onDownloadErrorMessage) })),
+        isUploadComplete ? (React.createElement(CardFooter, null,
+            React.createElement(ProgressBar, { thickness: "medium", value: progress, shape: "rounded" }))) : (React.createElement(React.Fragment, null, " "))));
+};
+const getMenuItems = (menuActions, attachment, handleOnClickError) => {
+    if (menuActions.length === 0) {
+        return React.createElement(React.Fragment, null);
+    }
+    return menuActions.length === 1 ? (React.createElement(ToolbarButton, { "aria-label": menuActions[0].name, icon: menuActions[0].icon, onClick: () => {
+            try {
+                menuActions[0].onClick(attachment);
+            }
+            catch (e) {
+                handleOnClickError === null || handleOnClickError === void 0 ? void 0 : handleOnClickError(e.message);
+            }
+        } })) : (React.createElement(Toolbar, null,
+        React.createElement(Menu, null,
+            React.createElement(MenuTrigger, null,
+                React.createElement(ToolbarButton, { "aria-label": "More", icon: React.createElement(MoreHorizontal24Filled, null) })),
+            React.createElement(MenuPopover, null,
+                React.createElement(MenuList, null, menuActions.map((menuItem, index) => (React.createElement(MenuItem, { key: index, icon: menuItem.icon, onClick: () => {
+                        try {
+                            menuItem.onClick(attachment);
+                        }
+                        catch (e) {
+                            handleOnClickError === null || handleOnClickError === void 0 ? void 0 : handleOnClickError(e.message);
+                        }
+                    } }, menuItem.name))))))));
+};
+//# sourceMappingURL=AttachmentCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AttachmentCard.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/AttachmentCard.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  // eslint-disable-next-line no-restricted-imports\n  Icon\n} from '@fluentui/react';\nimport {\n  Card,\n  CardHeader,\n  Text,\n  Menu,\n  MenuTrigger,\n  ToolbarButton,\n  MenuPopover,\n  MenuItem,\n  MenuList,\n  Toolbar,\n  CardFooter,\n  ProgressBar\n} from '@fluentui/react-components';\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, useMemo, useCallback } from 'react';\nimport { _AttachmentUploadCardsStrings } from './AttachmentUploadCards';\nimport { useLocaleAttachmentCardStringsTrampoline } from './utils/common';\nimport { AttachmentMetadata, AttachmentMenuAction } from '../types/Attachment';\nimport { MoreHorizontal24Filled } from '@fluentui/react-icons';\nimport { useAttachmentCardStyles, fileNameContainerClassName } from './styles/AttachmentCard.styles';\n\n/**\n * @internal\n * _AttachmentCard Component Props.\n */\nexport interface _AttachmentCardProps {\n  /**\n   * Attachment name.\n   */\n  attachmentName: string;\n  /**\n   * Extension of the attachment used for rendering the attachment icon.\n   */\n  attachmentExtension: string;\n  /**\n   * Attachment upload progress percentage between 0 and 1.\n   * Attachment 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 attachment 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 attachment cards\n   */\n  strings?: _AttachmentUploadCardsStrings;\n}\n\n/**\n * @internal\n * A component for displaying an attachment card with attachment icon and progress bar.\n *\n * `_AttachmentCard` internally uses the `Card` component from `@fluentui/react-components`. You can checkout the details about these components [here](https://react.fluentui.dev/?path=/docs/components-card).\n */\nexport const _AttachmentCard = (props: _AttachmentCardProps): JSX.Element => {\n  const { attachmentName, attachmentExtension, progress, actionIcon, actionHandler } = props;\n  const attachmentCardStyles = useAttachmentCardStyles();\n\n  // default/placeholder before actual code implemented\n  const menuActions = useMemo(() => {\n    return [\n      {\n        name: actionIcon && actionIcon?.props.ariaLabel,\n        icon: actionIcon ?? <></>,\n        onClick: (attachment: AttachmentMetadata) => {\n          if (attachment) {\n            actionHandler?.();\n          }\n        }\n      }\n    ];\n  }, [actionIcon, actionHandler]);\n\n  // placeholder before refactoring the props\n  const attachment = useMemo(() => {\n    return {\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      id: 'attachmentId',\n      extension: attachmentExtension,\n      name: attachmentName,\n      url: 'https://localhost' // placeholder not used\n    };\n  }, [attachmentExtension, attachmentName]);\n\n  // placeholder before refactoring the props\n  const onDownloadErrorMessage = useCallback((errorMessage: string): void => {\n    console.log(errorMessage);\n  }, []);\n\n  const isUploadComplete = useMemo(() => {\n    return progress !== undefined && progress > 0 && progress < 1;\n  }, [progress]);\n\n  const [announcerString, setAnnouncerString] = useState<string | undefined>(undefined);\n  const localeStrings = useLocaleAttachmentCardStringsTrampoline();\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} ${attachmentName}`);\n    } else if (progress === 1) {\n      setAnnouncerString(`${attachmentName} ${uploadCompletedString}`);\n    } else {\n      setAnnouncerString(undefined);\n    }\n  }, [progress, showProgressIndicator, attachmentName, uploadStartedString, uploadCompletedString]);\n\n  return (\n    <div data-is-focusable={true}>\n      <Announcer announcementString={announcerString} ariaLive={'polite'} />\n      <Card className={attachmentCardStyles.root} size=\"small\" role=\"listitem\">\n        <CardHeader\n          image={\n            <Icon\n              data-ui-id={'filetype-icon'}\n              iconName={\n                getFileTypeIconProps({\n                  extension: attachmentExtension,\n                  size: 24,\n                  imageFileType: 'svg'\n                }).iconName\n              }\n            />\n          }\n          header={\n            <div className={fileNameContainerClassName}>\n              <Text title={attachmentName}>{attachmentName}</Text>\n            </div>\n          }\n          action={getMenuItems(menuActions, attachment, onDownloadErrorMessage)}\n        />\n      </Card>\n      {isUploadComplete ? (\n        <CardFooter>\n          <ProgressBar thickness=\"medium\" value={progress} shape=\"rounded\" />\n        </CardFooter>\n      ) : (\n        <> </>\n      )}\n    </div>\n  );\n};\n\nconst getMenuItems = (\n  menuActions: AttachmentMenuAction[],\n  attachment: AttachmentMetadata,\n  handleOnClickError?: (errMsg: string) => void\n): JSX.Element => {\n  if (menuActions.length === 0) {\n    return <></>;\n  }\n  return menuActions.length === 1 ? (\n    <ToolbarButton\n      aria-label={menuActions[0].name}\n      icon={menuActions[0].icon}\n      onClick={() => {\n        try {\n          menuActions[0].onClick(attachment);\n        } catch (e) {\n          handleOnClickError?.((e as Error).message);\n        }\n      }}\n    />\n  ) : (\n    <Toolbar>\n      <Menu>\n        <MenuTrigger>\n          <ToolbarButton aria-label=\"More\" icon={<MoreHorizontal24Filled />} />\n        </MenuTrigger>\n        <MenuPopover>\n          <MenuList>\n            {menuActions.map((menuItem, index) => (\n              <MenuItem\n                key={index}\n                icon={menuItem.icon}\n                onClick={() => {\n                  try {\n                    menuItem.onClick(attachment);\n                  } catch (e) {\n                    handleOnClickError?.((e as Error).message);\n                  }\n                }}\n              >\n                {menuItem.name}\n              </MenuItem>\n            ))}\n          </MenuList>\n        </MenuPopover>\n      </Menu>\n    </Toolbar>\n  );\n};\n"]}

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

@@ -0,0 +1,16 @@
+import React from 'react';
+/**
+ * @internal
+ * Props for `_AttachmentCardGroup` component.
+ */
+export interface _AttachmentCardGroupProps {
+    children: React.ReactNode;
+    ariaLabel?: string;
+}
+/**
+ * @internal
+ * Used with `_AttachmentCard` component where `_AttachmentCard` components are passed as children.
+ * Renders the children equally spaced in multiple rows.
+ */
+export declare const _AttachmentCardGroup: (props: _AttachmentCardGroupProps) => JSX.Element;
+//# sourceMappingURL=AttachmentCardGroup.d.ts.map

package/dist/dist-esm/react-components/src/components/{FileCardGroup.js → AttachmentCardGroup.js}

@@ -8,7 +8,7 @@ import React from 'react';
  * an extra margin is added to the left of each line.
  * This is a workaround to avoid this issue.
  */
-const fileCardGroupClassName = mergeStyles({
+const attachmentCardGroupClassName = mergeStyles({
     flexFlow: 'row wrap',
     '& > *': {
         margin: _pxToRem(2)
@@ -22,14 +22,14 @@ const fileCardGroupClassName = mergeStyles({
 });
 /**
  * @internal
- * Used with `_FileCard` component where `_FileCard` components are passed as children.
+ * Used with `_AttachmentCard` component where `_AttachmentCard` components are passed as children.
  * Renders the children equally spaced in multiple rows.
  */
-export const _FileCardGroup = (props) => {
+export const _AttachmentCardGroup = (props) => {
     const { children, ariaLabel } = props;
     if (!children) {
         return React.createElement(React.Fragment, null);
     }
-    return (React.createElement(Stack, { horizontal: true, className: fileCardGroupClassName, "aria-label": ariaLabel }, children));
+    return (React.createElement(Stack, { horizontal: true, className: attachmentCardGroupClassName, "aria-label": ariaLabel }, children));
 };
-//# sourceMappingURL=FileCardGroup.js.map
+//# sourceMappingURL=AttachmentCardGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AttachmentCardGroup.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/AttachmentCardGroup.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,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,4BAA4B,GAAG,WAAW,CAAC;IAC/C,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,oBAAoB,GAAG,CAAC,KAAgC,EAAe,EAAE;IACpF,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IACtC,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,yCAAK,CAAC;IACf,CAAC;IAED,OAAO,CACL,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,4BAA4B,gBAAc,SAAS,IAC7E,QAAQ,CACH,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React from 'react';\n\n/**\n * @internal\n * Props for `_AttachmentCardGroup` component.\n */\nexport interface _AttachmentCardGroupProps {\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 attachmentCardGroupClassName = 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 `_AttachmentCard` component where `_AttachmentCard` components are passed as children.\n * Renders the children equally spaced in multiple rows.\n */\nexport const _AttachmentCardGroup = (props: _AttachmentCardGroupProps): JSX.Element => {\n  const { children, ariaLabel } = props;\n  if (!children) {\n    return <></>;\n  }\n\n  return (\n    <Stack horizontal className={attachmentCardGroupClassName} aria-label={ariaLabel}>\n      {children}\n    </Stack>\n  );\n};\n"]}

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

@@ -0,0 +1,49 @@
+/// <reference types="react" />
+import { AttachmentMetadata, FileDownloadHandler } from '../types/Attachment';
+/**
+ * Represents the type of attachment
+ * @public
+ */
+export type ChatAttachmentType = 'unknown' | 'image' | /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ 'file';
+/**
+ * Strings of _AttachmentDownloadCards that can be overridden.
+ *
+ * @internal
+ */
+export interface _AttachmentDownloadCardsStrings {
+    /** Aria label to notify user when focus is on attachment download button. */
+    downloadAttachment: string;
+    attachmentCardGroupMessage: string;
+}
+/**
+ * @internal
+ */
+export interface _AttachmentDownloadCardsProps {
+    /**
+     * User id of the local participant
+     */
+    userId: string;
+    /**
+     * A chat message metadata that includes file metadata
+     */
+    fileMetadata?: AttachmentMetadata[];
+    /**
+     * A function of type {@link FileDownloadHandler} for handling attachment downloads.
+     * If the function is not specified, the attachment's `url` will be opened in a new tab to
+     * initiate the download.
+     */
+    downloadHandler?: FileDownloadHandler;
+    /**
+     * Optional callback that runs if downloadHandler returns {@link FileDownloadError}.
+     */
+    onDownloadErrorMessage?: (errMsg: string) => void;
+    /**
+     * Optional aria label strings for attachment download cards
+     */
+    strings?: _AttachmentDownloadCardsStrings;
+}
+/**
+ * @internal
+ */
+export declare const _AttachmentDownloadCards: (props: _AttachmentDownloadCardsProps) => JSX.Element;
+//# sourceMappingURL=AttachmentDownloadCards.d.ts.map

package/dist/dist-esm/react-components/src/components/{FileDownloadCards.js → AttachmentDownloadCards.js}

@@ -9,48 +9,50 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { Icon, IconButton, Spinner, SpinnerSize, TooltipHost } from '@fluentui/react';
+import { Icon, Spinner, SpinnerSize, TooltipHost } from '@fluentui/react';
 import React, { useCallback, useState } from 'react';
 import { useMemo } from 'react';
-/* @conditional-compile-remove(file-sharing) */
+/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
 import { useLocale } from '../localization';
-import { _FileCard } from './FileCard';
-import { _FileCardGroup } from './FileCardGroup';
-import { iconButtonClassName } from './styles/IconButton.styles';
+import { _AttachmentCard } from './AttachmentCard';
+import { _AttachmentCardGroup } from './AttachmentCardGroup';
 import { _formatString } from "../../../acs-ui-common/src";
-const fileDownloadCardsStyle = {
+import { Open20Regular } from '@fluentui/react-icons';
+/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+import { ArrowDownload20Regular } from '@fluentui/react-icons';
+const attachmentDownloadCardsStyle = {
     marginTop: '0.25rem'
 };
 const actionIconStyle = { height: '1rem' };
 /**
  * @internal
  */
-export const _FileDownloadCards = (props) => {
+export const _AttachmentDownloadCards = (props) => {
     var _a, _b;
     const { userId, fileMetadata } = props;
     const [showSpinner, setShowSpinner] = useState(false);
     const localeStrings = useLocaleStringsTrampoline();
-    const downloadFileButtonString = useMemo(() => () => {
+    const downloadAttachmentButtonString = useMemo(() => () => {
         var _a, _b;
-        return (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.downloadFile) !== null && _b !== void 0 ? _b : localeStrings.downloadFile;
-    }, [(_a = props.strings) === null || _a === void 0 ? void 0 : _a.downloadFile, localeStrings.downloadFile]);
+        return (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.downloadAttachment) !== null && _b !== void 0 ? _b : localeStrings.downloadAttachment;
+    }, [(_a = props.strings) === null || _a === void 0 ? void 0 : _a.downloadAttachment, localeStrings.downloadAttachment]);
     const isShowDownloadIcon = useCallback((attachment) => {
         var _a;
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         return ((_a = attachment.payload) === null || _a === void 0 ? void 0 : _a.teamsFileAttachment) !== 'true';
         return true;
     }, []);
-    const fileCardGroupDescription = useMemo(() => () => {
+    const attachmentCardGroupDescription = 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;
-        /* @conditional-compile-remove(file-sharing) */
+        const fileGroupLocaleString = (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.attachmentCardGroupMessage) !== null && _b !== void 0 ? _b : localeStrings.attachmentCardGroupMessage;
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         return _formatString(fileGroupLocaleString, {
-            fileCount: `${(_c = fileMetadata === null || fileMetadata === void 0 ? void 0 : fileMetadata.length) !== null && _c !== void 0 ? _c : 0}`
+            attachmentCount: `${(_c = fileMetadata === null || fileMetadata === void 0 ? void 0 : fileMetadata.length) !== null && _c !== void 0 ? _c : 0}`
         });
         return _formatString(fileGroupLocaleString, {
-            fileCount: `${(_d = fileMetadata === null || fileMetadata === void 0 ? void 0 : fileMetadata.length) !== null && _d !== void 0 ? _d : 0}`
+            attachmentCount: `${(_d = fileMetadata === null || fileMetadata === void 0 ? void 0 : fileMetadata.length) !== null && _d !== void 0 ? _d : 0}`
         });
-    }, [(_b = props.strings) === null || _b === void 0 ? void 0 : _b.fileCardGroupMessage, localeStrings.fileCardGroupMessage, fileMetadata]);
+    }, [(_b = props.strings) === null || _b === void 0 ? void 0 : _b.attachmentCardGroupMessage, localeStrings.attachmentCardGroupMessage, fileMetadata]);
     const fileDownloadHandler = useCallback((userId, file) => __awaiter(void 0, void 0, void 0, function* () {
         if (!props.downloadHandler) {
             window.open(file.url, '_blank', 'noopener,noreferrer');
@@ -75,24 +77,23 @@ export const _FileDownloadCards = (props) => {
     if (!fileMetadata || fileMetadata.length === 0 || !fileMetadata) {
         return React.createElement(React.Fragment, null);
     }
-    return (React.createElement("div", { style: fileDownloadCardsStyle, "data-ui-id": "file-download-card-group" },
-        React.createElement(_FileCardGroup, { ariaLabel: fileCardGroupDescription() }, fileMetadata &&
-            fileMetadata.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(DownloadIconTrampoline, null))) : undefined, actionHandler: () => fileDownloadHandler(userId, file) })))))));
+    return (React.createElement("div", { style: attachmentDownloadCardsStyle, "data-ui-id": "file-download-card-group" },
+        React.createElement(_AttachmentCardGroup, { ariaLabel: attachmentCardGroupDescription() }, fileMetadata &&
+            fileMetadata.map((attachment) => (React.createElement(TooltipHost, { content: downloadAttachmentButtonString(), key: attachment.name },
+                React.createElement(_AttachmentCard, { attachmentName: attachment.name, key: attachment.name, attachmentExtension: attachment.extension, actionIcon: showSpinner ? (React.createElement(Spinner, { size: SpinnerSize.medium, "aria-live": 'polite', role: 'status' })) : true && isShowDownloadIcon(attachment) ? (React.createElement(DownloadIconTrampoline, null)) : (React.createElement(Open20Regular, null)), actionHandler: () => fileDownloadHandler(userId, attachment) })))))));
 };
 /**
  * @private
  */
 const DownloadIconTrampoline = () => {
-    // @conditional-compile-remove(file-sharing)
-    return React.createElement(Icon, { "data-ui-id": "file-download-card-download-icon", iconName: "DownloadFile", style: actionIconStyle });
+    // @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload)
+    return React.createElement(ArrowDownload20Regular, { "data-ui-id": 'file-download-card-download-icon' });
     // Return _some_ available icon, as the real icon is beta-only.
     return React.createElement(Icon, { iconName: "EditBoxCancel", style: actionIconStyle });
 };
 const useLocaleStringsTrampoline = () => {
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     return useLocale().strings.messageThread;
-    return { downloadFile: '', fileCardGroupMessage: '' };
+    return { downloadAttachment: '', attachmentCardGroupMessage: '' };
 };
-//# sourceMappingURL=FileDownloadCards.js.map
+//# sourceMappingURL=AttachmentDownloadCards.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AttachmentDownloadCards.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/AttachmentDownloadCards.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, Spinner, SpinnerSize, TooltipHost } from '@fluentui/react';\nimport React, { useCallback, useState } from 'react';\nimport { useMemo } from 'react';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { useLocale } from '../localization';\nimport { _AttachmentCard } from './AttachmentCard';\nimport { _AttachmentCardGroup } from './AttachmentCardGroup';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { AttachmentMetadata, FileDownloadHandler } from '../types/Attachment';\nimport { Open20Regular } from '@fluentui/react-icons';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { ArrowDownload20Regular } from '@fluentui/react-icons';\n\n/**\n * Represents the type of attachment\n * @public\n */\nexport type ChatAttachmentType =\n  | 'unknown'\n  | 'image'\n  | /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ 'file';\n\n/**\n * Strings of _AttachmentDownloadCards that can be overridden.\n *\n * @internal\n */\nexport interface _AttachmentDownloadCardsStrings {\n  /** Aria label to notify user when focus is on attachment download button. */\n  downloadAttachment: string;\n  attachmentCardGroupMessage: string;\n}\n\n/**\n * @internal\n */\nexport interface _AttachmentDownloadCardsProps {\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 attachment downloads.\n   * If the function is not specified, the attachment'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 attachment download cards\n   */\n  strings?: _AttachmentDownloadCardsStrings;\n}\n\nconst attachmentDownloadCardsStyle = {\n  marginTop: '0.25rem'\n};\n\nconst actionIconStyle = { height: '1rem' };\n\n/**\n * @internal\n */\nexport const _AttachmentDownloadCards = (props: _AttachmentDownloadCardsProps): JSX.Element => {\n  const { userId, fileMetadata } = props;\n  const [showSpinner, setShowSpinner] = useState(false);\n  const localeStrings = useLocaleStringsTrampoline();\n\n  const downloadAttachmentButtonString = useMemo(\n    () => () => {\n      return props.strings?.downloadAttachment ?? localeStrings.downloadAttachment;\n    },\n    [props.strings?.downloadAttachment, localeStrings.downloadAttachment]\n  );\n\n  const isShowDownloadIcon = useCallback((attachment: AttachmentMetadata): boolean => {\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    return attachment.payload?.teamsFileAttachment !== 'true';\n    return true;\n  }, []);\n\n  const attachmentCardGroupDescription = useMemo(\n    () => () => {\n      const fileGroupLocaleString =\n        props.strings?.attachmentCardGroupMessage ?? localeStrings.attachmentCardGroupMessage;\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      return _formatString(fileGroupLocaleString, {\n        attachmentCount: `${fileMetadata?.length ?? 0}`\n      });\n      return _formatString(fileGroupLocaleString, {\n        attachmentCount: `${fileMetadata?.length ?? 0}`\n      });\n    },\n    [props.strings?.attachmentCardGroupMessage, localeStrings.attachmentCardGroupMessage, fileMetadata]\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) {\n    return <></>;\n  }\n\n  return (\n    <div style={attachmentDownloadCardsStyle} data-ui-id=\"file-download-card-group\">\n      <_AttachmentCardGroup ariaLabel={attachmentCardGroupDescription()}>\n        {fileMetadata &&\n          fileMetadata.map((attachment) => (\n            <TooltipHost content={downloadAttachmentButtonString()} key={attachment.name}>\n              <_AttachmentCard\n                attachmentName={attachment.name}\n                key={attachment.name}\n                attachmentExtension={attachment.extension}\n                actionIcon={\n                  showSpinner ? (\n                    <Spinner size={SpinnerSize.medium} aria-live={'polite'} role={'status'} />\n                  ) : true && isShowDownloadIcon(attachment) ? (\n                    <DownloadIconTrampoline />\n                  ) : (\n                    <Open20Regular />\n                  )\n                }\n                actionHandler={() => fileDownloadHandler(userId, attachment)}\n              />\n            </TooltipHost>\n          ))}\n      </_AttachmentCardGroup>\n    </div>\n  );\n};\n\n/**\n * @private\n */\nconst DownloadIconTrampoline = (): JSX.Element => {\n  // @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload)\n  return <ArrowDownload20Regular data-ui-id={'file-download-card-download-icon'} />;\n  // Return _some_ available icon, as the real icon is beta-only.\n  return <Icon iconName=\"EditBoxCancel\" style={actionIconStyle} />;\n};\n\nconst useLocaleStringsTrampoline = (): _AttachmentDownloadCardsStrings => {\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  return useLocale().strings.messageThread;\n  return { downloadAttachment: '', attachmentCardGroupMessage: '' };\n};\n"]}

package/dist/dist-esm/react-components/src/components/{FileUploadCards.d.ts → AttachmentUploadCards.d.ts}

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { SendBoxErrorBarError } from './SendBoxErrorBar';
 /**
- * Attributes required for SendBox to show file uploads like name, progress etc.
+ * Attributes required for SendBox to show attachment uploads like name, progress etc.
  * @beta
  */
 export interface ActiveFileUpload {
@@ -32,16 +32,16 @@ export interface ActiveFileUpload {
     uploadComplete?: boolean;
 }
 /**
- * Strings of _FileUploadCards that can be overridden.
+ * Strings of _AttachmentUploadCards that can be overridden.
  *
  * @internal
  */
-export interface _FileUploadCardsStrings {
-    /** Aria label to notify user when focus is on cancel file upload button. */
-    removeFile: string;
-    /** Aria label to notify user file uploading starts. */
+export interface _AttachmentUploadCardsStrings {
+    /** Aria label to notify user when focus is on cancel attachment upload button. */
+    removeAttachment: string;
+    /** Aria label to notify user attachment uploading starts. */
     uploading: string;
-    /** Aria label to notify user file is uploaded. */
+    /** Aria label to notify user attachment is uploaded. */
     uploadCompleted: string;
 }
 /**
@@ -49,22 +49,22 @@ export interface _FileUploadCardsStrings {
  */
 export interface FileUploadCardsProps {
     /**
-     * Optional array of active file uploads where each object has attibutes
-     * of a file upload like name, progress, errormessage etc.
+     * Optional array of active attachment uploads where each object has attibutes
+     * of a attachment upload like name, progress, errormessage etc.
      */
     activeFileUploads?: ActiveFileUpload[];
     /**
-     * Optional callback to remove the file upload before sending by clicking on
+     * Optional callback to remove the attachment upload before sending by clicking on
      * cancel icon.
      */
-    onCancelFileUpload?: (fileId: string) => void;
+    onCancelFileUpload?: (attachmentId: string) => void;
     /**
-     * Optional arialabel strings for file upload cards
+     * Optional arialabel strings for attachment upload cards
      */
-    strings?: _FileUploadCardsStrings;
+    strings?: _AttachmentUploadCardsStrings;
 }
 /**
  * @internal
  */
-export declare const _FileUploadCards: (props: FileUploadCardsProps) => JSX.Element;
-//# sourceMappingURL=FileUploadCards.d.ts.map
+export declare const _AttachmentUploadCards: (props: FileUploadCardsProps) => JSX.Element;
+//# sourceMappingURL=AttachmentUploadCards.d.ts.map

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

@@ -0,0 +1,24 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { Icon, mergeStyles } from '@fluentui/react';
+import React from 'react';
+import { _AttachmentCard } from './AttachmentCard';
+import { _AttachmentCardGroup } from './AttachmentCardGroup';
+import { extension } from './utils';
+const actionIconStyle = { height: '1rem' };
+/**
+ * @internal
+ */
+export const _AttachmentUploadCards = (props) => {
+    const attachments = props.activeFileUploads;
+    if (!attachments || attachments.length === 0) {
+        return React.createElement(React.Fragment, null);
+    }
+    return (React.createElement(_AttachmentCardGroup, null, attachments &&
+        attachments
+            .filter((attachment) => !attachment.error)
+            .map((attachment) => (React.createElement(_AttachmentCard, { attachmentName: attachment.filename, progress: attachment.progress, key: attachment.id, attachmentExtension: extension(attachment.filename), actionIcon: React.createElement(Icon, { iconName: "CancelFileUpload", className: mergeStyles(actionIconStyle) }), actionHandler: () => {
+                props.onCancelFileUpload && props.onCancelFileUpload(attachment.id);
+            }, strings: props.strings })))));
+};
+//# sourceMappingURL=AttachmentUploadCards.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AttachmentUploadCards.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/AttachmentUploadCards.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAyEpC,MAAM,eAAe,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;AAE3C;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAA2B,EAAe,EAAE;IACjF,MAAM,WAAW,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAE5C,IAAI,CAAC,WAAW,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC7C,OAAO,yCAAK,CAAC;IACf,CAAC;IAED,OAAO,CACL,oBAAC,oBAAoB,QAClB,WAAW;QACV,WAAW;aACR,MAAM,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC;aACzC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CACnB,oBAAC,eAAe,IACd,cAAc,EAAE,UAAU,CAAC,QAAQ,EACnC,QAAQ,EAAE,UAAU,CAAC,QAAQ,EAC7B,GAAG,EAAE,UAAU,CAAC,EAAE,EAClB,mBAAmB,EAAE,SAAS,CAAC,UAAU,CAAC,QAAQ,CAAC,EACnD,UAAU,EAAE,oBAAC,IAAI,IAAC,QAAQ,EAAC,kBAAkB,EAAC,SAAS,EAAE,WAAW,CAAC,eAAe,CAAC,GAAI,EACzF,aAAa,EAAE,GAAG,EAAE;gBAClB,KAAK,CAAC,kBAAkB,IAAI,KAAK,CAAC,kBAAkB,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;YACtE,CAAC,EACD,OAAO,EAAE,KAAK,CAAC,OAAO,GACtB,CACH,CAAC,CACe,CACxB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, mergeStyles } from '@fluentui/react';\nimport React from 'react';\nimport { _AttachmentCard } from './AttachmentCard';\nimport { _AttachmentCardGroup } from './AttachmentCardGroup';\nimport { extension } from './utils';\nimport { SendBoxErrorBarError } from './SendBoxErrorBar';\n\n/**\n * Attributes required for SendBox to show attachment uploads like name, progress etc.\n * @beta\n */\nexport interface ActiveFileUpload {\n  /**\n   * Unique identifier for the file upload.\n   */\n  id: string;\n\n  /**\n   * File name to be rendered for uploaded file.\n   */\n  filename: string;\n\n  /**\n   * A number between 0 and 1 indicating the progress of the upload.\n   * This is unrelated to the `uploadComplete` property.\n   * It is only used to show the progress of the upload.\n   * Progress of 1 doesn't mark the upload as complete, set the `uploadComplete`\n   * property to true to mark the upload as complete.\n   */\n  progress: number;\n\n  /**\n   * Error to be displayed to the user if the upload fails.\n   */\n  error?: SendBoxErrorBarError;\n\n  /**\n   * `true` means that the upload is completed.\n   * This is independent of the upload `progress`.\n   */\n  uploadComplete?: boolean;\n}\n\n/**\n * Strings of _AttachmentUploadCards that can be overridden.\n *\n * @internal\n */\nexport interface _AttachmentUploadCardsStrings {\n  /** Aria label to notify user when focus is on cancel attachment upload button. */\n  removeAttachment: string;\n  /** Aria label to notify user attachment uploading starts. */\n  uploading: string;\n  /** Aria label to notify user attachment is uploaded. */\n  uploadCompleted: string;\n}\n\n/**\n * @internal\n */\nexport interface FileUploadCardsProps {\n  /**\n   * Optional array of active attachment uploads where each object has attibutes\n   * of a attachment upload like name, progress, errormessage etc.\n   */\n  activeFileUploads?: ActiveFileUpload[];\n  /**\n   * Optional callback to remove the attachment upload before sending by clicking on\n   * cancel icon.\n   */\n  onCancelFileUpload?: (attachmentId: string) => void;\n  /**\n   * Optional arialabel strings for attachment upload cards\n   */\n  strings?: _AttachmentUploadCardsStrings;\n}\n\nconst actionIconStyle = { height: '1rem' };\n\n/**\n * @internal\n */\nexport const _AttachmentUploadCards = (props: FileUploadCardsProps): JSX.Element => {\n  const attachments = props.activeFileUploads;\n\n  if (!attachments || attachments.length === 0) {\n    return <></>;\n  }\n\n  return (\n    <_AttachmentCardGroup>\n      {attachments &&\n        attachments\n          .filter((attachment) => !attachment.error)\n          .map((attachment) => (\n            <_AttachmentCard\n              attachmentName={attachment.filename}\n              progress={attachment.progress}\n              key={attachment.id}\n              attachmentExtension={extension(attachment.filename)}\n              actionIcon={<Icon iconName=\"CancelFileUpload\" className={mergeStyles(actionIconStyle)} />}\n              actionHandler={() => {\n                props.onCancelFileUpload && props.onCancelFileUpload(attachment.id);\n              }}\n              strings={props.strings}\n            />\n          ))}\n    </_AttachmentCardGroup>\n  );\n};\n"]}

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

@@ -72,7 +72,6 @@ export const CameraButton = (props) => {
         }
     }), [onSelectCamera]);
     const splitButtonMenuItems = [];
-    /* @conditional-compile-remove(video-background-effects) */
     if (props.onClickVideoEffects) {
         splitButtonMenuItems.push({
             key: 'effects',

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

@@ -1 +1 @@
-{"version":3,"file":"CameraButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CameraButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useState, useMemo } from 'react';\nimport { useLocale } from '../localization';\nimport { VideoStreamOptions } from '../types';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n\nimport {\n  ContextualMenuItemType,\n  IButtonProps,\n  IContextualMenuItem,\n  IContextualMenuItemStyles,\n  IContextualMenuStyles\n} from '@fluentui/react';\nimport { ControlBarButtonStyles } from './ControlBarButton';\nimport { OptionsDevice, generateDefaultDeviceMenuProps } from './DevicesButton';\nimport { Announcer } from './Announcer';\n\nconst defaultLocalVideoViewOptions = {\n  scalingMode: 'Crop',\n  isMirrored: true\n} as VideoStreamOptions;\n\n/**\n * Strings of CameraButton that can be overridden.\n *\n * @public\n */\nexport interface CameraButtonStrings {\n  /** Label when button is on. */\n  onLabel: string;\n  /** Label when button is off. */\n  offLabel: string;\n  /** Tooltip content when the button is disabled. */\n  tooltipDisabledContent?: string;\n  /** Tooltip content when the button is on. */\n  tooltipOnContent?: string;\n  /** Tooltip content when the button is off. */\n  tooltipOffContent?: string;\n  /** Tooltip content when the button is disabled due to video loading. */\n  tooltipVideoLoadingContent?: string;\n  /**\n   * Title of camera menu\n   */\n  cameraMenuTitle: string;\n  /**\n   * Tooltip of camera menu\n   */\n  cameraMenuTooltip: string;\n  /**\n   * description of camera button split button role\n   */\n  cameraButtonSplitRoleDescription?: string;\n  /**\n   * Camera split button aria label for when button is enabled.\n   */\n  onSplitButtonAriaLabel?: string;\n  /**\n   * Camera split button aria label for when button is disabled.\n   */\n  offSplitButtonAriaLabel?: string;\n  /**\n   * Camera action turned on string for announcer\n   */\n  cameraActionTurnedOnAnnouncement?: string;\n  /**\n   * Camera action turned off string for announcer\n   */\n  cameraActionTurnedOffAnnouncement?: string;\n  /**\n   * Primary action for when the camera is turned off\n   */\n  offSplitButtonPrimaryActionCamera?: string;\n  /**\n   * Primary action for when the camera is on\n   */\n  onSplitButtonPrimaryActionCamera?: string;\n  /**\n   * Title for primary action section of split button\n   */\n  cameraPrimaryActionSplitButtonTitle?: string;\n  /* @conditional-compile-remove(video-background-effects) */\n  /**\n   * Title for video effects menu item\n   */\n  videoEffectsMenuItemTitle?: string;\n}\n\n/**\n * Styles for {@link CameraButton}\n *\n * @public\n */\nexport interface CameraButtonStyles extends ControlBarButtonStyles {\n  /**\n   * Styles for the {@link CameraButton} menu.\n   */\n  menuStyles?: Partial<CameraButtonContextualMenuStyles>;\n}\n\n/**\n * Styles for the {@link CameraButton} menu.\n *\n * @public\n */\nexport interface CameraButtonContextualMenuStyles extends IContextualMenuStyles {\n  /**\n   * Styles for the items inside the {@link CameraButton} button menu.\n   */\n  menuItemStyles?: IContextualMenuItemStyles;\n}\n/**\n * Props for {@link CameraButton} component.\n *\n * @public\n */\nexport interface CameraButtonProps extends ControlBarButtonProps {\n  /**\n   * Utility property for using this component with `communication react eventHandlers`.\n   * Maps directly to the `onClick` property.\n   */\n  onToggleCamera?: (options?: VideoStreamOptions) => Promise<void>;\n\n  /**\n   * Options for rendering local video view.\n   */\n  localVideoViewOptions?: VideoStreamOptions;\n  /**\n   * Available cameras for selection\n   */\n  cameras?: OptionsDevice[];\n  /**\n   * Camera that is shown as currently selected\n   */\n  selectedCamera?: OptionsDevice;\n  /**\n   * Callback when a camera is selected\n   */\n  onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Whether to use a {@link SplitButton} with a {@link IContextualMenu} for device selection.\n   *\n   * default: false\n   */\n  enableDeviceSelectionMenu?: boolean;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<CameraButtonStrings>;\n  /**\n   * Styles for {@link CameraButton} and the device selection flyout.\n   */\n  styles?: Partial<CameraButtonStyles>;\n  /* @conditional-compile-remove(video-background-effects) */\n  /**\n   * Callback when a effects is clicked\n   */\n  onClickVideoEffects?: (showVideoEffects: boolean) => void;\n}\n\n/**\n * A button to turn camera on / off.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const CameraButton = (props: CameraButtonProps): JSX.Element => {\n  const { localVideoViewOptions, onToggleCamera, onSelectCamera } = props;\n  const [waitForCamera, setWaitForCamera] = useState(false);\n  const localeStrings = useLocale().strings.cameraButton;\n  const strings = { ...localeStrings, ...props.strings };\n  const [announcerString, setAnnouncerString] = useState<string | undefined>(undefined);\n\n  const disabled = props.disabled || waitForCamera;\n\n  const onRenderCameraOnIcon = (): JSX.Element => (\n    <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonCameraOn\" />\n  );\n  const onRenderCameraOffIcon = (): JSX.Element => (\n    <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonCameraOff\" />\n  );\n  if (waitForCamera && strings.tooltipVideoLoadingContent) {\n    strings.tooltipDisabledContent = strings.tooltipVideoLoadingContent;\n  }\n\n  const cameraOn = props.checked;\n  const splitButtonAriaString = cameraOn ? strings.onSplitButtonAriaLabel : strings.offSplitButtonAriaLabel;\n\n  const toggleAnnouncerString = useCallback(\n    (isCameraOn: boolean) => {\n      setAnnouncerString(\n        !isCameraOn ? strings.cameraActionTurnedOffAnnouncement : strings.cameraActionTurnedOnAnnouncement\n      );\n    },\n    [strings.cameraActionTurnedOffAnnouncement, strings.cameraActionTurnedOnAnnouncement]\n  );\n\n  const onToggleClick = useCallback(async () => {\n    // Throttle click on camera, need to await onToggleCamera then allow another click\n    if (onToggleCamera) {\n      setWaitForCamera(true);\n      try {\n        await onToggleCamera(localVideoViewOptions ?? defaultLocalVideoViewOptions);\n        // allows for the setting of narrator strings triggering the announcer when camera is turned on or off.\n        toggleAnnouncerString(!cameraOn);\n      } finally {\n        setWaitForCamera(false);\n      }\n    }\n  }, [cameraOn, localVideoViewOptions, onToggleCamera, toggleAnnouncerString]);\n\n  const onChangeCameraClick = useCallback(\n    async (device: OptionsDevice) => {\n      // Throttle changing camera to prevent too many callbacks\n      if (onSelectCamera) {\n        setWaitForCamera(true);\n        try {\n          await onSelectCamera(device);\n        } finally {\n          setWaitForCamera(false);\n        }\n      }\n    },\n    [onSelectCamera]\n  );\n\n  const splitButtonMenuItems: IContextualMenuItem[] = [];\n  /* @conditional-compile-remove(video-background-effects) */\n  if (props.onClickVideoEffects) {\n    splitButtonMenuItems.push({\n      key: 'effects',\n      'data-ui-id': 'camera-split-button-video-effects',\n      text: strings.videoEffectsMenuItemTitle,\n      iconProps: { iconName: 'ControlButtonVideoEffectsOption', styles: { root: { lineHeight: 0 } } },\n      onClick: () => {\n        if (props.onClickVideoEffects) {\n          props.onClickVideoEffects(true);\n        }\n      }\n    });\n  }\n\n  splitButtonMenuItems.push({\n    key: 'cameraPrimaryAction',\n    text: props.checked ? strings.onSplitButtonPrimaryActionCamera : strings.offSplitButtonPrimaryActionCamera,\n    onClick: () => {\n      onToggleClick();\n    },\n    iconProps: {\n      iconName: props.checked ? 'SplitButtonPrimaryActionCameraOn' : 'SplitButtonPrimaryActionCameraOff',\n      styles: { root: { lineHeight: 0 } }\n    }\n  });\n\n  const splitButtonPrimaryAction: IContextualMenuItem = {\n    key: 'primaryAction',\n    title: 'toggle camera',\n    itemType: ContextualMenuItemType.Section,\n    sectionProps: {\n      topDivider: true,\n      items: splitButtonMenuItems\n    }\n  };\n\n  const splitButtonMenuProps: IButtonProps = useMemo(\n    () => ({\n      ...props.splitButtonMenuProps,\n      className: 'camera-split-button'\n    }),\n    [props.splitButtonMenuProps]\n  );\n\n  return (\n    <>\n      <Announcer announcementString={announcerString} ariaLive={'polite'} />\n      <ControlBarButton\n        {...props}\n        disabled={disabled}\n        onClick={onToggleCamera ? onToggleClick : props.onClick}\n        onRenderOnIcon={props.onRenderOnIcon ?? onRenderCameraOnIcon}\n        onRenderOffIcon={props.onRenderOffIcon ?? onRenderCameraOffIcon}\n        strings={strings}\n        labelKey={props.labelKey ?? 'cameraButtonLabel'}\n        menuProps={\n          props.menuProps ??\n          (props.enableDeviceSelectionMenu\n            ? generateDefaultDeviceMenuProps(\n                { ...props, onSelectCamera: onChangeCameraClick, styles: props.styles?.menuStyles },\n                strings,\n                splitButtonPrimaryAction\n              )\n            : undefined)\n        }\n        menuIconProps={props.menuIconProps ?? !props.enableDeviceSelectionMenu ? { hidden: true } : undefined}\n        split={props.split ?? props.enableDeviceSelectionMenu}\n        aria-roledescription={props.enableDeviceSelectionMenu ? strings.cameraButtonSplitRoleDescription : undefined}\n        splitButtonAriaLabel={props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined}\n        splitButtonMenuProps={splitButtonMenuProps}\n      />\n    </>\n  );\n};\n"]}
+{"version":3,"file":"CameraButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CameraButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useState, useMemo } from 'react';\nimport { useLocale } from '../localization';\nimport { VideoStreamOptions } from '../types';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n\nimport {\n  ContextualMenuItemType,\n  IButtonProps,\n  IContextualMenuItem,\n  IContextualMenuItemStyles,\n  IContextualMenuStyles\n} from '@fluentui/react';\nimport { ControlBarButtonStyles } from './ControlBarButton';\nimport { OptionsDevice, generateDefaultDeviceMenuProps } from './DevicesButton';\nimport { Announcer } from './Announcer';\n\nconst defaultLocalVideoViewOptions = {\n  scalingMode: 'Crop',\n  isMirrored: true\n} as VideoStreamOptions;\n\n/**\n * Strings of CameraButton that can be overridden.\n *\n * @public\n */\nexport interface CameraButtonStrings {\n  /** Label when button is on. */\n  onLabel: string;\n  /** Label when button is off. */\n  offLabel: string;\n  /** Tooltip content when the button is disabled. */\n  tooltipDisabledContent?: string;\n  /** Tooltip content when the button is on. */\n  tooltipOnContent?: string;\n  /** Tooltip content when the button is off. */\n  tooltipOffContent?: string;\n  /** Tooltip content when the button is disabled due to video loading. */\n  tooltipVideoLoadingContent?: string;\n  /**\n   * Title of camera menu\n   */\n  cameraMenuTitle: string;\n  /**\n   * Tooltip of camera menu\n   */\n  cameraMenuTooltip: string;\n  /**\n   * description of camera button split button role\n   */\n  cameraButtonSplitRoleDescription?: string;\n  /**\n   * Camera split button aria label for when button is enabled.\n   */\n  onSplitButtonAriaLabel?: string;\n  /**\n   * Camera split button aria label for when button is disabled.\n   */\n  offSplitButtonAriaLabel?: string;\n  /**\n   * Camera action turned on string for announcer\n   */\n  cameraActionTurnedOnAnnouncement?: string;\n  /**\n   * Camera action turned off string for announcer\n   */\n  cameraActionTurnedOffAnnouncement?: string;\n  /**\n   * Primary action for when the camera is turned off\n   */\n  offSplitButtonPrimaryActionCamera?: string;\n  /**\n   * Primary action for when the camera is on\n   */\n  onSplitButtonPrimaryActionCamera?: string;\n  /**\n   * Title for primary action section of split button\n   */\n  cameraPrimaryActionSplitButtonTitle?: string;\n\n  /**\n   * Title for video effects menu item\n   */\n  videoEffectsMenuItemTitle?: string;\n}\n\n/**\n * Styles for {@link CameraButton}\n *\n * @public\n */\nexport interface CameraButtonStyles extends ControlBarButtonStyles {\n  /**\n   * Styles for the {@link CameraButton} menu.\n   */\n  menuStyles?: Partial<CameraButtonContextualMenuStyles>;\n}\n\n/**\n * Styles for the {@link CameraButton} menu.\n *\n * @public\n */\nexport interface CameraButtonContextualMenuStyles extends IContextualMenuStyles {\n  /**\n   * Styles for the items inside the {@link CameraButton} button menu.\n   */\n  menuItemStyles?: IContextualMenuItemStyles;\n}\n/**\n * Props for {@link CameraButton} component.\n *\n * @public\n */\nexport interface CameraButtonProps extends ControlBarButtonProps {\n  /**\n   * Utility property for using this component with `communication react eventHandlers`.\n   * Maps directly to the `onClick` property.\n   */\n  onToggleCamera?: (options?: VideoStreamOptions) => Promise<void>;\n\n  /**\n   * Options for rendering local video view.\n   */\n  localVideoViewOptions?: VideoStreamOptions;\n  /**\n   * Available cameras for selection\n   */\n  cameras?: OptionsDevice[];\n  /**\n   * Camera that is shown as currently selected\n   */\n  selectedCamera?: OptionsDevice;\n  /**\n   * Callback when a camera is selected\n   */\n  onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Whether to use a {@link SplitButton} with a {@link IContextualMenu} for device selection.\n   *\n   * default: false\n   */\n  enableDeviceSelectionMenu?: boolean;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<CameraButtonStrings>;\n  /**\n   * Styles for {@link CameraButton} and the device selection flyout.\n   */\n  styles?: Partial<CameraButtonStyles>;\n\n  /**\n   * Callback when a effects is clicked\n   */\n  onClickVideoEffects?: (showVideoEffects: boolean) => void;\n}\n\n/**\n * A button to turn camera on / off.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const CameraButton = (props: CameraButtonProps): JSX.Element => {\n  const { localVideoViewOptions, onToggleCamera, onSelectCamera } = props;\n  const [waitForCamera, setWaitForCamera] = useState(false);\n  const localeStrings = useLocale().strings.cameraButton;\n  const strings = { ...localeStrings, ...props.strings };\n  const [announcerString, setAnnouncerString] = useState<string | undefined>(undefined);\n\n  const disabled = props.disabled || waitForCamera;\n\n  const onRenderCameraOnIcon = (): JSX.Element => (\n    <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonCameraOn\" />\n  );\n  const onRenderCameraOffIcon = (): JSX.Element => (\n    <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonCameraOff\" />\n  );\n  if (waitForCamera && strings.tooltipVideoLoadingContent) {\n    strings.tooltipDisabledContent = strings.tooltipVideoLoadingContent;\n  }\n\n  const cameraOn = props.checked;\n  const splitButtonAriaString = cameraOn ? strings.onSplitButtonAriaLabel : strings.offSplitButtonAriaLabel;\n\n  const toggleAnnouncerString = useCallback(\n    (isCameraOn: boolean) => {\n      setAnnouncerString(\n        !isCameraOn ? strings.cameraActionTurnedOffAnnouncement : strings.cameraActionTurnedOnAnnouncement\n      );\n    },\n    [strings.cameraActionTurnedOffAnnouncement, strings.cameraActionTurnedOnAnnouncement]\n  );\n\n  const onToggleClick = useCallback(async () => {\n    // Throttle click on camera, need to await onToggleCamera then allow another click\n    if (onToggleCamera) {\n      setWaitForCamera(true);\n      try {\n        await onToggleCamera(localVideoViewOptions ?? defaultLocalVideoViewOptions);\n        // allows for the setting of narrator strings triggering the announcer when camera is turned on or off.\n        toggleAnnouncerString(!cameraOn);\n      } finally {\n        setWaitForCamera(false);\n      }\n    }\n  }, [cameraOn, localVideoViewOptions, onToggleCamera, toggleAnnouncerString]);\n\n  const onChangeCameraClick = useCallback(\n    async (device: OptionsDevice) => {\n      // Throttle changing camera to prevent too many callbacks\n      if (onSelectCamera) {\n        setWaitForCamera(true);\n        try {\n          await onSelectCamera(device);\n        } finally {\n          setWaitForCamera(false);\n        }\n      }\n    },\n    [onSelectCamera]\n  );\n\n  const splitButtonMenuItems: IContextualMenuItem[] = [];\n\n  if (props.onClickVideoEffects) {\n    splitButtonMenuItems.push({\n      key: 'effects',\n      'data-ui-id': 'camera-split-button-video-effects',\n      text: strings.videoEffectsMenuItemTitle,\n      iconProps: { iconName: 'ControlButtonVideoEffectsOption', styles: { root: { lineHeight: 0 } } },\n      onClick: () => {\n        if (props.onClickVideoEffects) {\n          props.onClickVideoEffects(true);\n        }\n      }\n    });\n  }\n\n  splitButtonMenuItems.push({\n    key: 'cameraPrimaryAction',\n    text: props.checked ? strings.onSplitButtonPrimaryActionCamera : strings.offSplitButtonPrimaryActionCamera,\n    onClick: () => {\n      onToggleClick();\n    },\n    iconProps: {\n      iconName: props.checked ? 'SplitButtonPrimaryActionCameraOn' : 'SplitButtonPrimaryActionCameraOff',\n      styles: { root: { lineHeight: 0 } }\n    }\n  });\n\n  const splitButtonPrimaryAction: IContextualMenuItem = {\n    key: 'primaryAction',\n    title: 'toggle camera',\n    itemType: ContextualMenuItemType.Section,\n    sectionProps: {\n      topDivider: true,\n      items: splitButtonMenuItems\n    }\n  };\n\n  const splitButtonMenuProps: IButtonProps = useMemo(\n    () => ({\n      ...props.splitButtonMenuProps,\n      className: 'camera-split-button'\n    }),\n    [props.splitButtonMenuProps]\n  );\n\n  return (\n    <>\n      <Announcer announcementString={announcerString} ariaLive={'polite'} />\n      <ControlBarButton\n        {...props}\n        disabled={disabled}\n        onClick={onToggleCamera ? onToggleClick : props.onClick}\n        onRenderOnIcon={props.onRenderOnIcon ?? onRenderCameraOnIcon}\n        onRenderOffIcon={props.onRenderOffIcon ?? onRenderCameraOffIcon}\n        strings={strings}\n        labelKey={props.labelKey ?? 'cameraButtonLabel'}\n        menuProps={\n          props.menuProps ??\n          (props.enableDeviceSelectionMenu\n            ? generateDefaultDeviceMenuProps(\n                { ...props, onSelectCamera: onChangeCameraClick, styles: props.styles?.menuStyles },\n                strings,\n                splitButtonPrimaryAction\n              )\n            : undefined)\n        }\n        menuIconProps={props.menuIconProps ?? !props.enableDeviceSelectionMenu ? { hidden: true } : undefined}\n        split={props.split ?? props.enableDeviceSelectionMenu}\n        aria-roledescription={props.enableDeviceSelectionMenu ? strings.cameraButtonSplitRoleDescription : undefined}\n        splitButtonAriaLabel={props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined}\n        splitButtonMenuProps={splitButtonMenuProps}\n      />\n    </>\n  );\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Caption.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/Caption.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAY,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC9E,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EACL,gBAAgB,EAChB,iCAAiC,EACjC,oBAAoB,EACpB,6BAA6B,EAC7B,aAAa,EACd,MAAM,yBAAyB,CAAC;AAgBjC;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAe,EAAE;IAC5D,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAEnE,MAAM,cAAc,GAAa;QAC/B,kBAAkB,EAAE,IAAI;QACxB,IAAI,EAAE,WAAW,CAAC,MAAM;QACxB,IAAI,EAAE,WAAW;QACjB,mBAAmB,EAAE,KAAK;QAC1B,uBAAuB,EAAE,IAAI;QAC7B,iBAAiB,EAAE,OAAO;QAC1B,MAAM,EAAE;YACN,IAAI,EAAE;gBACJ,MAAM,EAAE,SAAS;aAClB;SACF;KACF,CAAC;IAEF,MAAM,QAAQ,GAAG,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,oBAAC,OAAO,oBAAK,cAAc,EAAI,CAAC;IAEjH,OAAO,CACL,oBAAC,KAAK,IAAC,UAAU,QAAC,aAAa,EAAC,OAAO,EAAC,eAAe,EAAC,OAAO;QAC7D,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,aAAa,IAAG,QAAQ,CAAc;QAE7D,oBAAC,KAAK,IAAC,aAAa,EAAC,OAAO,EAAC,SAAS,EAAE,iCAAiC;YACvE,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,6BAA6B;gBAClD,oBAAC,IAAI,IAAC,SAAS,EAAE,oBAAoB,IAAG,WAAW,CAAQ,CAChD;YACb,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,gBAAgB,EAAE,GAAG,EAAC,MAAM,IAChD,WAAW,CACD,CACP,CACF,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IPersona, Persona, Stack, PersonaSize, Text } from '@fluentui/react';\nimport React from 'react';\nimport { _FileUploadCardsStrings } from './FileUploadCards';\nimport { OnRenderAvatarCallback } from '../types';\nimport {\n  captionClassName,\n  captionsContentContainerClassName,\n  displayNameClassName,\n  displayNameContainerClassName,\n  iconClassName\n} from './styles/Captions.style';\nimport { _CaptionsInfo } from './CaptionsBanner';\n\n/**\n * @internal\n * Props for a single line of caption.\n */\nexport interface _CaptionProps extends _CaptionsInfo {\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n}\n\n/**\n * @internal\n * A component for displaying a single line of caption\n */\nexport const _Caption = (props: _CaptionProps): JSX.Element => {\n  const { displayName, userId, captionText, onRenderAvatar } = props;\n\n  const personaOptions: IPersona = {\n    hidePersonaDetails: true,\n    size: PersonaSize.size32,\n    text: displayName,\n    showOverflowTooltip: false,\n    imageShouldStartVisible: true,\n    initialsTextColor: 'white',\n    styles: {\n      root: {\n        margin: '0.25rem'\n      }\n    }\n  };\n\n  const userIcon = onRenderAvatar ? onRenderAvatar(userId ?? '', personaOptions) : <Persona {...personaOptions} />;\n\n  return (\n    <Stack horizontal verticalAlign=\"start\" horizontalAlign=\"start\">\n      <Stack.Item className={iconClassName}>{userIcon}</Stack.Item>\n\n      <Stack verticalAlign=\"start\" className={captionsContentContainerClassName}>\n        <Stack.Item className={displayNameContainerClassName}>\n          <Text className={displayNameClassName}>{displayName}</Text>\n        </Stack.Item>\n        <Stack.Item className={captionClassName} dir=\"auto\">\n          {captionText}\n        </Stack.Item>\n      </Stack>\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"Caption.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/Caption.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAY,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC9E,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EACL,gBAAgB,EAChB,iCAAiC,EACjC,oBAAoB,EACpB,6BAA6B,EAC7B,aAAa,EACd,MAAM,yBAAyB,CAAC;AAgBjC;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAe,EAAE;IAC5D,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAEnE,MAAM,cAAc,GAAa;QAC/B,kBAAkB,EAAE,IAAI;QACxB,IAAI,EAAE,WAAW,CAAC,MAAM;QACxB,IAAI,EAAE,WAAW;QACjB,mBAAmB,EAAE,KAAK;QAC1B,uBAAuB,EAAE,IAAI;QAC7B,iBAAiB,EAAE,OAAO;QAC1B,MAAM,EAAE;YACN,IAAI,EAAE;gBACJ,MAAM,EAAE,SAAS;aAClB;SACF;KACF,CAAC;IAEF,MAAM,QAAQ,GAAG,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,oBAAC,OAAO,oBAAK,cAAc,EAAI,CAAC;IAEjH,OAAO,CACL,oBAAC,KAAK,IAAC,UAAU,QAAC,aAAa,EAAC,OAAO,EAAC,eAAe,EAAC,OAAO;QAC7D,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,aAAa,IAAG,QAAQ,CAAc;QAE7D,oBAAC,KAAK,IAAC,aAAa,EAAC,OAAO,EAAC,SAAS,EAAE,iCAAiC;YACvE,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,6BAA6B;gBAClD,oBAAC,IAAI,IAAC,SAAS,EAAE,oBAAoB,IAAG,WAAW,CAAQ,CAChD;YACb,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,gBAAgB,EAAE,GAAG,EAAC,MAAM,IAChD,WAAW,CACD,CACP,CACF,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IPersona, Persona, Stack, PersonaSize, Text } from '@fluentui/react';\nimport React from 'react';\nimport { _AttachmentUploadCardsStrings } from './AttachmentUploadCards';\nimport { OnRenderAvatarCallback } from '../types';\nimport {\n  captionClassName,\n  captionsContentContainerClassName,\n  displayNameClassName,\n  displayNameContainerClassName,\n  iconClassName\n} from './styles/Captions.style';\nimport { _CaptionsInfo } from './CaptionsBanner';\n\n/**\n * @internal\n * Props for a single line of caption.\n */\nexport interface _CaptionProps extends _CaptionsInfo {\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n}\n\n/**\n * @internal\n * A component for displaying a single line of caption\n */\nexport const _Caption = (props: _CaptionProps): JSX.Element => {\n  const { displayName, userId, captionText, onRenderAvatar } = props;\n\n  const personaOptions: IPersona = {\n    hidePersonaDetails: true,\n    size: PersonaSize.size32,\n    text: displayName,\n    showOverflowTooltip: false,\n    imageShouldStartVisible: true,\n    initialsTextColor: 'white',\n    styles: {\n      root: {\n        margin: '0.25rem'\n      }\n    }\n  };\n\n  const userIcon = onRenderAvatar ? onRenderAvatar(userId ?? '', personaOptions) : <Persona {...personaOptions} />;\n\n  return (\n    <Stack horizontal verticalAlign=\"start\" horizontalAlign=\"start\">\n      <Stack.Item className={iconClassName}>{userIcon}</Stack.Item>\n\n      <Stack verticalAlign=\"start\" className={captionsContentContainerClassName}>\n        <Stack.Item className={displayNameContainerClassName}>\n          <Text className={displayNameClassName}>{displayName}</Text>\n        </Stack.Item>\n        <Stack.Item className={captionClassName} dir=\"auto\">\n          {captionText}\n        </Stack.Item>\n      </Stack>\n    </Stack>\n  );\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"CaptionsBanner.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CaptionsBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { Stack, FocusZone, Spinner } from '@fluentui/react';\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\nimport { _FileUploadCardsStrings } from './FileUploadCards';\nimport { _Caption } from './Caption';\nimport {\n  captionContainerClassName,\n  captionsBannerClassName,\n  captionsContainerClassName,\n  loadingBannerStyles\n} from './styles/Captions.style';\nimport { OnRenderAvatarCallback } from '../types';\n\n/**\n * @internal\n * information required for each line of caption\n */\nexport type _CaptionsInfo = {\n  id: string;\n  displayName: string;\n  captionText: string;\n  userId?: string;\n};\n\n/**\n * @internal\n * strings for captions banner\n */\nexport interface _CaptionsBannerStrings {\n  captionsBannerSpinnerText?: string;\n}\n\n/**\n * @internal\n * _CaptionsBanner Component Props.\n */\nexport interface _CaptionsBannerProps {\n  captions: _CaptionsInfo[];\n  isCaptionsOn?: boolean;\n  startCaptionsInProgress?: boolean;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  strings?: _CaptionsBannerStrings;\n  /**\n   * Optional form factor for the component.\n   * @defaultValue 'default'\n   */\n  formFactor?: 'default' | 'compact';\n}\n\n/**\n * @internal\n * A component for displaying a CaptionsBanner with user icon, displayName and captions text.\n */\nexport const _CaptionsBanner = (props: _CaptionsBannerProps): JSX.Element => {\n  const { captions, isCaptionsOn, startCaptionsInProgress, onRenderAvatar, strings, formFactor = 'default' } = props;\n  const captionsScrollDivRef = useRef<HTMLDivElement>(null);\n  const [isAtBottomOfScroll, setIsAtBottomOfScroll] = useState<boolean>(true);\n\n  const scrollToBottom = (): void => {\n    if (captionsScrollDivRef.current) {\n      captionsScrollDivRef.current.scrollTop = captionsScrollDivRef.current.scrollHeight;\n    }\n  };\n\n  const handleScrollToTheBottom = useCallback((): void => {\n    if (!captionsScrollDivRef.current) {\n      return;\n    }\n    const atBottom =\n      Math.ceil(captionsScrollDivRef.current.scrollTop) >=\n      captionsScrollDivRef.current.scrollHeight - captionsScrollDivRef.current.clientHeight;\n\n    setIsAtBottomOfScroll(atBottom);\n  }, []);\n\n  useEffect(() => {\n    const captionsScrollDiv = captionsScrollDivRef.current;\n    captionsScrollDiv?.addEventListener('scroll', handleScrollToTheBottom);\n\n    return () => {\n      captionsScrollDiv?.removeEventListener('scroll', handleScrollToTheBottom);\n    };\n  }, [handleScrollToTheBottom, isCaptionsOn]);\n\n  useEffect(() => {\n    // only auto scroll to bottom is already is at bottom of scroll before new caption comes in\n    if (isAtBottomOfScroll) {\n      scrollToBottom();\n    }\n  }, [captions, isAtBottomOfScroll]);\n\n  return (\n    <>\n      {startCaptionsInProgress && (\n        <FocusZone as=\"ul\" className={captionsContainerClassName}>\n          {isCaptionsOn && (\n            <div ref={captionsScrollDivRef} className={captionsBannerClassName(formFactor)}>\n              {captions.map((caption) => {\n                return (\n                  <div key={caption.id} className={captionContainerClassName} data-is-focusable={true}>\n                    <_Caption {...caption} onRenderAvatar={onRenderAvatar} />\n                  </div>\n                );\n              })}\n            </div>\n          )}\n          {!isCaptionsOn && (\n            <Stack verticalAlign=\"center\" styles={loadingBannerStyles(formFactor)} data-is-focusable={true}>\n              <Spinner label={strings?.captionsBannerSpinnerText} ariaLive=\"assertive\" labelPosition=\"right\" />\n            </Stack>\n          )}\n        </FocusZone>\n      )}\n    </>\n  );\n};\n"]}
+{"version":3,"file":"CaptionsBanner.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CaptionsBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { Stack, FocusZone, Spinner } from '@fluentui/react';\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\nimport { _AttachmentUploadCardsStrings } from './AttachmentUploadCards';\nimport { _Caption } from './Caption';\nimport {\n  captionContainerClassName,\n  captionsBannerClassName,\n  captionsContainerClassName,\n  loadingBannerStyles\n} from './styles/Captions.style';\nimport { OnRenderAvatarCallback } from '../types';\n\n/**\n * @internal\n * information required for each line of caption\n */\nexport type _CaptionsInfo = {\n  id: string;\n  displayName: string;\n  captionText: string;\n  userId?: string;\n};\n\n/**\n * @internal\n * strings for captions banner\n */\nexport interface _CaptionsBannerStrings {\n  captionsBannerSpinnerText?: string;\n}\n\n/**\n * @internal\n * _CaptionsBanner Component Props.\n */\nexport interface _CaptionsBannerProps {\n  captions: _CaptionsInfo[];\n  isCaptionsOn?: boolean;\n  startCaptionsInProgress?: boolean;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  strings?: _CaptionsBannerStrings;\n  /**\n   * Optional form factor for the component.\n   * @defaultValue 'default'\n   */\n  formFactor?: 'default' | 'compact';\n}\n\n/**\n * @internal\n * A component for displaying a CaptionsBanner with user icon, displayName and captions text.\n */\nexport const _CaptionsBanner = (props: _CaptionsBannerProps): JSX.Element => {\n  const { captions, isCaptionsOn, startCaptionsInProgress, onRenderAvatar, strings, formFactor = 'default' } = props;\n  const captionsScrollDivRef = useRef<HTMLDivElement>(null);\n  const [isAtBottomOfScroll, setIsAtBottomOfScroll] = useState<boolean>(true);\n\n  const scrollToBottom = (): void => {\n    if (captionsScrollDivRef.current) {\n      captionsScrollDivRef.current.scrollTop = captionsScrollDivRef.current.scrollHeight;\n    }\n  };\n\n  const handleScrollToTheBottom = useCallback((): void => {\n    if (!captionsScrollDivRef.current) {\n      return;\n    }\n    const atBottom =\n      Math.ceil(captionsScrollDivRef.current.scrollTop) >=\n      captionsScrollDivRef.current.scrollHeight - captionsScrollDivRef.current.clientHeight;\n\n    setIsAtBottomOfScroll(atBottom);\n  }, []);\n\n  useEffect(() => {\n    const captionsScrollDiv = captionsScrollDivRef.current;\n    captionsScrollDiv?.addEventListener('scroll', handleScrollToTheBottom);\n\n    return () => {\n      captionsScrollDiv?.removeEventListener('scroll', handleScrollToTheBottom);\n    };\n  }, [handleScrollToTheBottom, isCaptionsOn]);\n\n  useEffect(() => {\n    // only auto scroll to bottom is already is at bottom of scroll before new caption comes in\n    if (isAtBottomOfScroll) {\n      scrollToBottom();\n    }\n  }, [captions, isAtBottomOfScroll]);\n\n  return (\n    <>\n      {startCaptionsInProgress && (\n        <FocusZone as=\"ul\" className={captionsContainerClassName}>\n          {isCaptionsOn && (\n            <div ref={captionsScrollDivRef} className={captionsBannerClassName(formFactor)}>\n              {captions.map((caption) => {\n                return (\n                  <div key={caption.id} className={captionContainerClassName} data-is-focusable={true}>\n                    <_Caption {...caption} onRenderAvatar={onRenderAvatar} />\n                  </div>\n                );\n              })}\n            </div>\n          )}\n          {!isCaptionsOn && (\n            <Stack verticalAlign=\"center\" styles={loadingBannerStyles(formFactor)} data-is-focusable={true}>\n              <Spinner label={strings?.captionsBannerSpinnerText} ariaLive=\"assertive\" labelPosition=\"right\" />\n            </Stack>\n          )}\n        </FocusZone>\n      )}\n    </>\n  );\n};\n"]}