@azure/communication-react 1.18.0-alpha-202406150014 → 1.18.0-alpha-202406191739

package/dist/dist-esm/chat-component-bindings/src/handlers/createHandlers.js.map

@@ -1 +1 @@
-{"version":3,"file":"createHandlers.js","sourceRoot":"","sources":["../../../../../../chat-component-bindings/src/handlers/createHandlers.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { PagedAsyncIterableIterator } from '@azure/core-paging';\nimport { ReactElement } from 'react';\nimport { Common, fromFlatCommunicationIdentifier } from '@internal/acs-ui-common';\nimport { StatefulChatClient } from '@internal/chat-stateful-client';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { ChatAttachment } from '@azure/communication-chat';\nimport { ChatMessage, ChatMessageReadReceipt, ChatThreadClient, SendMessageOptions } from '@azure/communication-chat';\nimport memoizeOne from 'memoize-one';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { MessageOptions } from '@internal/acs-ui-common';\n\n/**\n * Object containing all the handlers required for chat components.\n *\n * Chat related components from this package are able to pick out relevant handlers from this object.\n * See {@link useHandlers} and {@link usePropsFor}.\n *\n * @public\n */\nexport type ChatHandlers = {\n  onSendMessage: (\n    content: string,\n    options?: SendMessageOptions | /* @conditional-compile-remove(file-sharing-acs) */ MessageOptions\n  ) => Promise<void>;\n  onMessageSeen: (chatMessageId: string) => Promise<void>;\n  onTyping: () => Promise<void>;\n  onRemoveParticipant: (userId: string) => Promise<void>;\n  updateThreadTopicName: (topicName: string) => Promise<void>;\n  onLoadPreviousChatMessages: (messagesToLoad: number) => Promise<boolean>;\n  onUpdateMessage: (\n    messageId: string,\n    content: string,\n    /* @conditional-compile-remove(file-sharing-acs) */\n    options?: MessageOptions\n  ) => Promise<void>;\n  onDeleteMessage: (messageId: string) => Promise<void>;\n};\n\n/**\n * Create the default implementation of {@link ChatHandlers}.\n *\n * Useful when implementing a custom component that utilizes the providers\n * exported from this library.\n *\n * Returned object is memoized to avoid rerenders when used as props for React Components.\n *\n * @public\n */\nexport const createDefaultChatHandlers = memoizeOne(\n  (chatClient: StatefulChatClient, chatThreadClient: ChatThreadClient): ChatHandlers => {\n    let messageIterator: PagedAsyncIterableIterator<ChatMessage> | undefined = undefined;\n    let readReceiptIterator: PagedAsyncIterableIterator<ChatMessageReadReceipt> | undefined = undefined;\n    return {\n      // due to a bug in babel, we can't use arrow function here\n      // affecting conditional-compile-remove(attachment-upload)\n      onSendMessage: async function (\n        content: string,\n        options?: SendMessageOptions | /* @conditional-compile-remove(file-sharing-acs) */ MessageOptions\n      ) {\n        const sendMessageRequest = {\n          content,\n          senderDisplayName: chatClient.getState().displayName\n        };\n        /* @conditional-compile-remove(file-sharing-acs) */\n        if (\n          options &&\n          'attachments' in options &&\n          options.attachments &&\n          options.attachments[0] &&\n          !(options.attachments[0] as ChatAttachment).attachmentType\n        ) {\n          const chatSDKOptions = {\n            metadata: {\n              ...options?.metadata,\n              fileSharingMetadata: JSON.stringify(options?.attachments)\n            }\n          };\n          await chatThreadClient.sendMessage(sendMessageRequest, chatSDKOptions);\n          return;\n        }\n        await chatThreadClient.sendMessage(sendMessageRequest, options as SendMessageOptions);\n      },\n      // due to a bug in babel, we can't use arrow function here\n      // affecting conditional-compile-remove(attachment-upload)\n      onUpdateMessage: async function (\n        messageId: string,\n        content: string,\n        /* @conditional-compile-remove(file-sharing-acs) */\n        options?: MessageOptions\n      ) {\n        const updateMessageOptions = {\n          content,\n          /* @conditional-compile-remove(file-sharing-acs) */\n          metadata: {\n            ...options?.metadata,\n            fileSharingMetadata: JSON.stringify(options?.attachments)\n          }\n        };\n        await chatThreadClient.updateMessage(messageId, updateMessageOptions);\n      },\n      onDeleteMessage: async (messageId: string) => {\n        await chatThreadClient.deleteMessage(messageId);\n      },\n      // This handler is designed for chatThread to consume\n      onMessageSeen: async (chatMessageId: string) => {\n        await chatThreadClient.sendReadReceipt({ chatMessageId });\n      },\n      onTyping: async () => {\n        await chatThreadClient.sendTypingNotification();\n      },\n      onRemoveParticipant: async (userId: string) => {\n        await chatThreadClient.removeParticipant(fromFlatCommunicationIdentifier(userId));\n      },\n      updateThreadTopicName: async (topicName: string) => {\n        await chatThreadClient.updateTopic(topicName);\n      },\n      onLoadPreviousChatMessages: async (messagesToLoad: number) => {\n        if (messageIterator === undefined) {\n          // Lazy definition so that errors in the method call are reported correctly.\n          // Also allows recovery via retries in case of transient errors.\n          messageIterator = chatThreadClient.listMessages({ maxPageSize: 50 });\n        }\n        if (readReceiptIterator === undefined) {\n          readReceiptIterator = chatThreadClient.listReadReceipts();\n        }\n        // get the earliest message time\n        let remainingMessagesToGet = messagesToLoad;\n        let isAllChatMessagesLoaded = false;\n        let earliestTime = Number.MAX_SAFE_INTEGER;\n        while (remainingMessagesToGet >= 1) {\n          const message = await messageIterator.next();\n          if (message?.value?.id) {\n            if (parseInt(message.value.id) < earliestTime) {\n              earliestTime = parseInt(message.value.id);\n            }\n          }\n\n          if (message.value?.type && message.value.type === 'text') {\n            remainingMessagesToGet--;\n          }\n\n          // We have traversed all messages in this thread\n          if (message.done) {\n            isAllChatMessagesLoaded = true;\n            break;\n          }\n        }\n        // keep fetching read receipts until read receipt time < earlist message time\n        let readReceipt = await readReceiptIterator.next();\n        while (!readReceipt.done && parseInt(readReceipt?.value?.chatMessageId) >= earliestTime) {\n          readReceipt = await readReceiptIterator.next();\n        }\n\n        return isAllChatMessagesLoaded;\n      }\n    };\n  }\n);\n\n/**\n * Create a set of default handlers for given component.\n *\n * Returned object is memoized (with reference to the arguments) to avoid\n * renders when used as props for React Components.\n *\n * @public\n */\nexport const createDefaultChatHandlersForComponent = <Props>(\n  chatClient: StatefulChatClient,\n  chatThreadClient: ChatThreadClient,\n  _: (props: Props) => ReactElement | null\n): Common<ChatHandlers, Props> => {\n  return createDefaultChatHandlers(chatClient, chatThreadClient);\n};\n"]}
+{"version":3,"file":"createHandlers.js","sourceRoot":"","sources":["../../../../../../chat-component-bindings/src/handlers/createHandlers.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { PagedAsyncIterableIterator } from '@azure/core-paging';\nimport { ReactElement } from 'react';\nimport { Common, fromFlatCommunicationIdentifier } from '@internal/acs-ui-common';\nimport { StatefulChatClient } from '@internal/chat-stateful-client';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { ChatAttachment } from '@azure/communication-chat';\nimport { ChatMessage, ChatMessageReadReceipt, ChatThreadClient, SendMessageOptions } from '@azure/communication-chat';\nimport memoizeOne from 'memoize-one';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { MessageOptions } from '@internal/acs-ui-common';\n\n/**\n * Object containing all the handlers required for chat components.\n *\n * Chat related components from this package are able to pick out relevant handlers from this object.\n * See {@link useHandlers} and {@link usePropsFor}.\n *\n * @public\n */\nexport type ChatHandlers = {\n  onSendMessage: (\n    content: string,\n    options?: SendMessageOptions | /* @conditional-compile-remove(file-sharing-acs) */ MessageOptions\n  ) => Promise<void>;\n  onMessageSeen: (chatMessageId: string) => Promise<void>;\n  onTyping: () => Promise<void>;\n  onRemoveParticipant: (userId: string) => Promise<void>;\n  updateThreadTopicName: (topicName: string) => Promise<void>;\n  onLoadPreviousChatMessages: (messagesToLoad: number) => Promise<boolean>;\n  onUpdateMessage: (\n    messageId: string,\n    content: string,\n    /* @conditional-compile-remove(file-sharing-acs) */\n    options?: MessageOptions\n  ) => Promise<void>;\n  onDeleteMessage: (messageId: string) => Promise<void>;\n};\n\n/**\n * Create the default implementation of {@link ChatHandlers}.\n *\n * Useful when implementing a custom component that utilizes the providers\n * exported from this library.\n *\n * Returned object is memoized to avoid rerenders when used as props for React Components.\n *\n * @public\n */\nexport const createDefaultChatHandlers = memoizeOne(\n  (chatClient: StatefulChatClient, chatThreadClient: ChatThreadClient): ChatHandlers => {\n    let messageIterator: PagedAsyncIterableIterator<ChatMessage> | undefined = undefined;\n    let readReceiptIterator: PagedAsyncIterableIterator<ChatMessageReadReceipt> | undefined = undefined;\n    return {\n      // due to a bug in babel, we can't use arrow function here\n      // affecting conditional-compile-remove(attachment-upload)\n      onSendMessage: async function (\n        content: string,\n        options?: SendMessageOptions | /* @conditional-compile-remove(file-sharing-acs) */ MessageOptions\n      ) {\n        const sendMessageRequest = {\n          content,\n          senderDisplayName: chatClient.getState().displayName\n        };\n        /* @conditional-compile-remove(file-sharing-acs) */\n        if (\n          options &&\n          'attachments' in options &&\n          options.attachments &&\n          options.attachments[0] &&\n          !(options.attachments[0] as ChatAttachment).attachmentType\n        ) {\n          const chatSDKOptions = {\n            metadata: {\n              ...options?.metadata,\n              fileSharingMetadata: JSON.stringify(options?.attachments)\n            },\n            type: options.type\n          };\n          await chatThreadClient.sendMessage(sendMessageRequest, chatSDKOptions);\n          return;\n        }\n        await chatThreadClient.sendMessage(sendMessageRequest, options as SendMessageOptions);\n      },\n      // due to a bug in babel, we can't use arrow function here\n      // affecting conditional-compile-remove(attachment-upload)\n      onUpdateMessage: async function (\n        messageId: string,\n        content: string,\n        /* @conditional-compile-remove(file-sharing-acs) */\n        options?: MessageOptions\n      ) {\n        const updateMessageOptions = {\n          content,\n          /* @conditional-compile-remove(file-sharing-acs) */\n          metadata: {\n            ...options?.metadata,\n            fileSharingMetadata: JSON.stringify(options?.attachments)\n          }\n        };\n        await chatThreadClient.updateMessage(messageId, updateMessageOptions);\n      },\n      onDeleteMessage: async (messageId: string) => {\n        await chatThreadClient.deleteMessage(messageId);\n      },\n      // This handler is designed for chatThread to consume\n      onMessageSeen: async (chatMessageId: string) => {\n        await chatThreadClient.sendReadReceipt({ chatMessageId });\n      },\n      onTyping: async () => {\n        await chatThreadClient.sendTypingNotification();\n      },\n      onRemoveParticipant: async (userId: string) => {\n        await chatThreadClient.removeParticipant(fromFlatCommunicationIdentifier(userId));\n      },\n      updateThreadTopicName: async (topicName: string) => {\n        await chatThreadClient.updateTopic(topicName);\n      },\n      onLoadPreviousChatMessages: async (messagesToLoad: number) => {\n        if (messageIterator === undefined) {\n          // Lazy definition so that errors in the method call are reported correctly.\n          // Also allows recovery via retries in case of transient errors.\n          messageIterator = chatThreadClient.listMessages({ maxPageSize: 50 });\n        }\n        if (readReceiptIterator === undefined) {\n          readReceiptIterator = chatThreadClient.listReadReceipts();\n        }\n        // get the earliest message time\n        let remainingMessagesToGet = messagesToLoad;\n        let isAllChatMessagesLoaded = false;\n        let earliestTime = Number.MAX_SAFE_INTEGER;\n        while (remainingMessagesToGet >= 1) {\n          const message = await messageIterator.next();\n          if (message?.value?.id) {\n            if (parseInt(message.value.id) < earliestTime) {\n              earliestTime = parseInt(message.value.id);\n            }\n          }\n\n          if (message.value?.type && message.value.type === 'text') {\n            remainingMessagesToGet--;\n          }\n\n          // We have traversed all messages in this thread\n          if (message.done) {\n            isAllChatMessagesLoaded = true;\n            break;\n          }\n        }\n        // keep fetching read receipts until read receipt time < earlist message time\n        let readReceipt = await readReceiptIterator.next();\n        while (!readReceipt.done && parseInt(readReceipt?.value?.chatMessageId) >= earliestTime) {\n          readReceipt = await readReceiptIterator.next();\n        }\n\n        return isAllChatMessagesLoaded;\n      }\n    };\n  }\n);\n\n/**\n * Create a set of default handlers for given component.\n *\n * Returned object is memoized (with reference to the arguments) to avoid\n * renders when used as props for React Components.\n *\n * @public\n */\nexport const createDefaultChatHandlersForComponent = <Props>(\n  chatClient: StatefulChatClient,\n  chatThreadClient: ChatThreadClient,\n  _: (props: Props) => ReactElement | null\n): Common<ChatHandlers, Props> => {\n  return createDefaultChatHandlers(chatClient, chatThreadClient);\n};\n"]}

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

@@ -66,7 +66,8 @@ export const _AttachmentCard = (props) => {
                             gapSpace: 0,
                             target: '#attachment-' + attachment.id
                         } },
-                        React.createElement(Text, { className: attachmentCardStyles.title, title: attachment.name }, attachment.name))), action: MappedMenuItems(menuActions, Object.assign(Object.assign({}, attachment), { url: (_e = attachment.url) !== null && _e !== void 0 ? _e : '' }), onActionHandlerFailed) })),
+                        React.createElement("div", { className: attachmentCardStyles.fileNameLabel },
+                            React.createElement(Text, { className: attachmentCardStyles.title, "aria-label": attachment.name }, attachment.name)))), action: React.createElement("div", { className: attachmentCardStyles.focusState }, MappedMenuItems(menuActions, Object.assign(Object.assign({}, attachment), { url: (_e = attachment.url) !== null && _e !== void 0 ? _e : '' }), onActionHandlerFailed)) })),
         isUploadInProgress ? (React.createElement(CardFooter, null,
             React.createElement(ProgressBar, { thickness: "medium", value: Math.max(progress !== null && progress !== void 0 ? progress : 0, ATTACHMENT_CARD_MIN_PROGRESS), shape: "rounded" }))) : (React.createElement(React.Fragment, null, " "))));
 };
@@ -76,7 +77,7 @@ const MappedMenuItems = (menuActions, attachment, handleOnClickError) => {
         return React.createElement(React.Fragment, null);
     }
     return menuActions.length === 1 ? (React.createElement(TooltipHost, { content: menuActions[0].name },
-        React.createElement(ToolbarButton, { "aria-label": menuActions[0].name, icon: menuActions[0].icon, onClick: () => {
+        React.createElement(ToolbarButton, { "aria-label": menuActions[0].name, role: "button", icon: menuActions[0].icon, onClick: () => {
                 try {
                     menuActions[0].onClick(attachment);
                 }
@@ -87,9 +88,9 @@ const MappedMenuItems = (menuActions, attachment, handleOnClickError) => {
         React.createElement(Menu, null,
             React.createElement(TooltipHost, { content: localeStrings.attachmentMoreMenu },
                 React.createElement(MenuTrigger, null,
-                    React.createElement(ToolbarButton, { icon: React.createElement(Icon, { iconName: "AttachmentMoreMenu", "aria-label": localeStrings.attachmentMoreMenu }) }))),
+                    React.createElement(ToolbarButton, { "aria-label": localeStrings.attachmentMoreMenu, role: "button", icon: React.createElement(Icon, { iconName: "AttachmentMoreMenu" }) }))),
             React.createElement(MenuPopover, null,
-                React.createElement(MenuList, null, menuActions.map((menuItem, index) => (React.createElement(MenuItem, { key: index, icon: menuItem.icon, onClick: () => __awaiter(void 0, void 0, void 0, function* () {
+                React.createElement(MenuList, null, menuActions.map((menuItem, index) => (React.createElement(MenuItem, { "aria-label": menuItem.name, key: index, icon: menuItem.icon, onClick: () => __awaiter(void 0, void 0, void 0, function* () {
                         try {
                             yield menuItem.onClick(attachment);
                         }

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

@@ -1 +1 @@
-{"version":3,"file":"AttachmentCard.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Attachment/AttachmentCard.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, TooltipHost } 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  mergeClasses\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 } from 'react';\nimport { _AttachmentUploadCardsStrings } from './AttachmentUploadCards';\nimport { useLocaleAttachmentCardStringsTrampoline } from '../utils/common';\nimport { AttachmentMenuAction } from '../../types/Attachment';\nimport { AttachmentMetadata, AttachmentMetadataInProgress } from '@internal/acs-ui-common';\nimport {\n  useAttachmentCardStyles,\n  attachmentNameContainerClassName,\n  ATTACHMENT_CARD_MIN_PROGRESS\n} from '../styles/AttachmentCard.styles';\n\n/**\n * @internal\n * AttachmentCard Component Props.\n */\nexport interface _AttachmentCardProps {\n  /**\n   * Attachment details including name, extension, url, etc.\n   */\n  attachment: AttachmentMetadata | AttachmentMetadataInProgress;\n  /**\n   * An array of menu actions to be displayed in the attachment card.\n   */\n  menuActions: AttachmentMenuAction[];\n  /**\n   * Optional aria label strings for attachment upload cards\n   */\n  strings?: _AttachmentUploadCardsStrings;\n  /**\n   * Optional callback that runs if menu bar action onclick throws.\n   */\n  onActionHandlerFailed?: (errMsg: string) => void;\n  /**\n   * Optional flag to enable self resizing of the attachment card.\n   */\n  selfResizing?: boolean;\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 { attachment, menuActions, onActionHandlerFailed, selfResizing } = props;\n  const attachmentCardStyles = useAttachmentCardStyles();\n\n  const progress = useMemo(() => {\n    return 'progress' in attachment ? attachment.progress : undefined;\n  }, [attachment]);\n\n  const isUploadInProgress = 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  useEffect(() => {\n    if (isUploadInProgress) {\n      setAnnouncerString(`${uploadStartedString} ${attachment.name}`);\n    } else if (progress === 1) {\n      setAnnouncerString(`${attachment.name} ${uploadCompletedString}`);\n    } else {\n      setAnnouncerString(undefined);\n    }\n  }, [progress, isUploadInProgress, attachment.name, uploadStartedString, uploadCompletedString]);\n\n  const extension = useMemo((): string => {\n    const re = /(?:\\.([^.]+))?$/;\n    const match = re.exec(attachment.name);\n    return match && match[1] ? match[1] : '';\n  }, [attachment]);\n  return (\n    <div data-is-focusable={true}>\n      <Announcer announcementString={announcerString} ariaLive={'polite'} />\n      <Card\n        className={mergeClasses(\n          attachmentCardStyles.root,\n          selfResizing ? attachmentCardStyles.dynamicWidth : attachmentCardStyles.staticWidth\n        )}\n        size=\"small\"\n        role=\"listitem\"\n        appearance=\"filled-alternative\"\n        aria-label={attachment.name}\n        data-testid={'attachment-card'}\n      >\n        <CardHeader\n          className={attachmentCardStyles.content}\n          image={\n            <div className={attachmentCardStyles.fileIcon}>\n              <Icon\n                data-ui-id={'attachmenttype-icon'}\n                iconName={\n                  getFileTypeIconProps({\n                    extension: extension,\n                    size: 24,\n                    imageFileType: 'svg'\n                  }).iconName\n                }\n              />\n            </div>\n          }\n          header={\n            <div className={attachmentNameContainerClassName} id={'attachment-' + attachment.id}>\n              <TooltipHost\n                content={attachment.name}\n                calloutProps={{\n                  gapSpace: 0,\n                  target: '#attachment-' + attachment.id\n                }}\n              >\n                <Text className={attachmentCardStyles.title} title={attachment.name}>\n                  {attachment.name}\n                </Text>\n              </TooltipHost>\n            </div>\n          }\n          action={MappedMenuItems(\n            menuActions,\n            {\n              ...attachment,\n              url: attachment.url ?? ''\n            },\n            onActionHandlerFailed\n          )}\n        />\n      </Card>\n      {isUploadInProgress ? (\n        <CardFooter>\n          <ProgressBar\n            thickness=\"medium\"\n            value={Math.max(progress ?? 0, ATTACHMENT_CARD_MIN_PROGRESS)}\n            shape=\"rounded\"\n          />\n        </CardFooter>\n      ) : (\n        <> </>\n      )}\n    </div>\n  );\n};\n\nconst MappedMenuItems = (\n  menuActions: AttachmentMenuAction[],\n  attachment: AttachmentMetadata,\n  handleOnClickError?: (errMsg: string) => void\n): JSX.Element => {\n  const localeStrings = useLocaleAttachmentCardStringsTrampoline();\n\n  if (menuActions.length === 0) {\n    return <></>;\n  }\n  return menuActions.length === 1 ? (\n    <TooltipHost content={menuActions[0].name}>\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    </TooltipHost>\n  ) : (\n    <Toolbar>\n      <Menu>\n        <TooltipHost content={localeStrings.attachmentMoreMenu}>\n          <MenuTrigger>\n            <ToolbarButton\n              icon={<Icon iconName=\"AttachmentMoreMenu\" aria-label={localeStrings.attachmentMoreMenu} />}\n            />\n          </MenuTrigger>\n        </TooltipHost>\n        <MenuPopover>\n          <MenuList>\n            {menuActions.map((menuItem, index) => (\n              <MenuItem\n                key={index}\n                icon={menuItem.icon}\n                onClick={async () => {\n                  try {\n                    await 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"]}
+{"version":3,"file":"AttachmentCard.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Attachment/AttachmentCard.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, TooltipHost } 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  mergeClasses\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 } from 'react';\nimport { _AttachmentUploadCardsStrings } from './AttachmentUploadCards';\nimport { useLocaleAttachmentCardStringsTrampoline } from '../utils/common';\nimport { AttachmentMenuAction } from '../../types/Attachment';\nimport { AttachmentMetadata, AttachmentMetadataInProgress } from '@internal/acs-ui-common';\nimport {\n  useAttachmentCardStyles,\n  attachmentNameContainerClassName,\n  ATTACHMENT_CARD_MIN_PROGRESS\n} from '../styles/AttachmentCard.styles';\n\n/**\n * @internal\n * AttachmentCard Component Props.\n */\nexport interface _AttachmentCardProps {\n  /**\n   * Attachment details including name, extension, url, etc.\n   */\n  attachment: AttachmentMetadata | AttachmentMetadataInProgress;\n  /**\n   * An array of menu actions to be displayed in the attachment card.\n   */\n  menuActions: AttachmentMenuAction[];\n  /**\n   * Optional aria label strings for attachment upload cards\n   */\n  strings?: _AttachmentUploadCardsStrings;\n  /**\n   * Optional callback that runs if menu bar action onclick throws.\n   */\n  onActionHandlerFailed?: (errMsg: string) => void;\n  /**\n   * Optional flag to enable self resizing of the attachment card.\n   */\n  selfResizing?: boolean;\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 { attachment, menuActions, onActionHandlerFailed, selfResizing } = props;\n  const attachmentCardStyles = useAttachmentCardStyles();\n\n  const progress = useMemo(() => {\n    return 'progress' in attachment ? attachment.progress : undefined;\n  }, [attachment]);\n\n  const isUploadInProgress = 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  useEffect(() => {\n    if (isUploadInProgress) {\n      setAnnouncerString(`${uploadStartedString} ${attachment.name}`);\n    } else if (progress === 1) {\n      setAnnouncerString(`${attachment.name} ${uploadCompletedString}`);\n    } else {\n      setAnnouncerString(undefined);\n    }\n  }, [progress, isUploadInProgress, attachment.name, uploadStartedString, uploadCompletedString]);\n\n  const extension = useMemo((): string => {\n    const re = /(?:\\.([^.]+))?$/;\n    const match = re.exec(attachment.name);\n    return match && match[1] ? match[1] : '';\n  }, [attachment]);\n  return (\n    <div data-is-focusable={true}>\n      <Announcer announcementString={announcerString} ariaLive={'polite'} />\n      <Card\n        className={mergeClasses(\n          attachmentCardStyles.root,\n          selfResizing ? attachmentCardStyles.dynamicWidth : attachmentCardStyles.staticWidth\n        )}\n        size=\"small\"\n        role=\"listitem\"\n        appearance=\"filled-alternative\"\n        aria-label={attachment.name}\n        data-testid={'attachment-card'}\n      >\n        <CardHeader\n          className={attachmentCardStyles.content}\n          image={\n            <div className={attachmentCardStyles.fileIcon}>\n              <Icon\n                data-ui-id={'attachmenttype-icon'}\n                iconName={\n                  getFileTypeIconProps({\n                    extension: extension,\n                    size: 24,\n                    imageFileType: 'svg'\n                  }).iconName\n                }\n              />\n            </div>\n          }\n          header={\n            <div className={attachmentNameContainerClassName} id={'attachment-' + attachment.id}>\n              <TooltipHost\n                content={attachment.name}\n                calloutProps={{\n                  gapSpace: 0,\n                  target: '#attachment-' + attachment.id\n                }}\n              >\n                <div className={attachmentCardStyles.fileNameLabel}>\n                  <Text className={attachmentCardStyles.title} aria-label={attachment.name}>\n                    {attachment.name}\n                  </Text>\n                </div>\n              </TooltipHost>\n            </div>\n          }\n          action={\n            <div className={attachmentCardStyles.focusState}>\n              {MappedMenuItems(\n                menuActions,\n                {\n                  ...attachment,\n                  url: attachment.url ?? ''\n                },\n                onActionHandlerFailed\n              )}\n            </div>\n          }\n        />\n      </Card>\n      {isUploadInProgress ? (\n        <CardFooter>\n          <ProgressBar\n            thickness=\"medium\"\n            value={Math.max(progress ?? 0, ATTACHMENT_CARD_MIN_PROGRESS)}\n            shape=\"rounded\"\n          />\n        </CardFooter>\n      ) : (\n        <> </>\n      )}\n    </div>\n  );\n};\n\nconst MappedMenuItems = (\n  menuActions: AttachmentMenuAction[],\n  attachment: AttachmentMetadata,\n  handleOnClickError?: (errMsg: string) => void\n): JSX.Element => {\n  const localeStrings = useLocaleAttachmentCardStringsTrampoline();\n\n  if (menuActions.length === 0) {\n    return <></>;\n  }\n  return menuActions.length === 1 ? (\n    <TooltipHost content={menuActions[0].name}>\n      <ToolbarButton\n        aria-label={menuActions[0].name}\n        role=\"button\"\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    </TooltipHost>\n  ) : (\n    <Toolbar>\n      <Menu>\n        <TooltipHost content={localeStrings.attachmentMoreMenu}>\n          <MenuTrigger>\n            <ToolbarButton\n              aria-label={localeStrings.attachmentMoreMenu}\n              role=\"button\"\n              icon={<Icon iconName=\"AttachmentMoreMenu\" />}\n            />\n          </MenuTrigger>\n        </TooltipHost>\n        <MenuPopover>\n          <MenuList>\n            {menuActions.map((menuItem, index) => (\n              <MenuItem\n                aria-label={menuItem.name}\n                key={index}\n                icon={menuItem.icon}\n                onClick={async () => {\n                  try {\n                    await 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/Attachment/AttachmentCardGroup.d.ts

@@ -21,6 +21,7 @@ export interface _AttachmentCardGroupProps {
     children: React.ReactNode;
     ariaLabel?: string;
     attachmentGroupLayout?: _AttachmentCardGroupLayout;
+    disabled?: boolean;
 }
 /**
  * @internal

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

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 import { mergeStyles, Stack } from '@fluentui/react';
 import React from 'react';
-import { attachmentCardBaseStyles, attachmentCardFlexLayout, attachmentCardGirdLayout } from '../styles/AttachmentCardGroup.styles';
+import { attachmentCardBaseStyles, attachmentCardFlexLayout, attachmentCardGirdLayout, attachmentGroupDisabled } from '../styles/AttachmentCardGroup.styles';
 /**
  * @internal
  * Props for `_AttachmentCardGroup` component.
@@ -24,10 +24,10 @@ export var _AttachmentCardGroupLayout;
  * Renders the children equally spaced in multiple rows.
  */
 export const _AttachmentCardGroup = (props) => {
-    const { children, ariaLabel, attachmentGroupLayout } = props;
+    const { children, ariaLabel, attachmentGroupLayout, disabled } = props;
     if (!children) {
         return React.createElement(React.Fragment, null);
     }
-    return (React.createElement(Stack, { horizontal: true, className: mergeStyles(attachmentCardBaseStyles, attachmentGroupLayout === _AttachmentCardGroupLayout.Grid ? attachmentCardGirdLayout : attachmentCardFlexLayout), "aria-label": ariaLabel }, children));
+    return (React.createElement(Stack, { horizontal: true, className: mergeStyles(disabled && attachmentGroupDisabled, attachmentCardBaseStyles, attachmentGroupLayout === _AttachmentCardGroupLayout.Grid ? attachmentCardGirdLayout : attachmentCardFlexLayout), "aria-label": ariaLabel, role: "list" }, children));
 };
 //# sourceMappingURL=AttachmentCardGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AttachmentCardGroup.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Attachment/AttachmentCardGroup.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAErD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACL,wBAAwB,EACxB,wBAAwB,EACxB,wBAAwB,EACzB,MAAM,sCAAsC,CAAC;AAE9C;;;GAGG;AACH,MAAM,CAAN,IAAY,0BASX;AATD,WAAY,0BAA0B;IACpC;;OAEG;IACH,2CAAa,CAAA;IACb;;OAEG;IACH,2CAAa,CAAA;AACf,CAAC,EATW,0BAA0B,KAA1B,0BAA0B,QASrC;AAYD;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAe,EAAE;IACpF,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,qBAAqB,EAAE,GAAG,KAAK,CAAC;IAC7D,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,yCAAK,CAAC;IACf,CAAC;IACD,OAAO,CACL,oBAAC,KAAK,IACJ,UAAU,QACV,SAAS,EAAE,WAAW,CACpB,wBAAwB,EACxB,qBAAqB,KAAK,0BAA0B,CAAC,IAAI,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,wBAAwB,CAChH,gBACW,SAAS,IAEpB,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';\nimport { _ATTACHMENT_CARD_MARGIN_IN_PX, _ATTACHMENT_CARD_WIDTH_IN_REM } from '../styles/AttachmentCard.styles';\nimport {\n  attachmentCardBaseStyles,\n  attachmentCardFlexLayout,\n  attachmentCardGirdLayout\n} from '../styles/AttachmentCardGroup.styles';\n\n/**\n * @internal\n * Props for `_AttachmentCardGroup` component.\n */\nexport enum _AttachmentCardGroupLayout {\n  /**\n   * Children are rendered in a grid layout with self resizing.\n   */\n  Grid = 'grid',\n  /**\n   * Children are rendered in a flex layout with no resizing.\n   */\n  Flex = 'flex'\n}\n\n/**\n * @internal\n * Props for `_AttachmentCardGroup` component.\n */\nexport interface _AttachmentCardGroupProps {\n  children: React.ReactNode;\n  ariaLabel?: string;\n  attachmentGroupLayout?: _AttachmentCardGroupLayout;\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, attachmentGroupLayout } = props;\n  if (!children) {\n    return <></>;\n  }\n  return (\n    <Stack\n      horizontal\n      className={mergeStyles(\n        attachmentCardBaseStyles,\n        attachmentGroupLayout === _AttachmentCardGroupLayout.Grid ? attachmentCardGirdLayout : attachmentCardFlexLayout\n      )}\n      aria-label={ariaLabel}\n    >\n      {children}\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"AttachmentCardGroup.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Attachment/AttachmentCardGroup.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAErD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACL,wBAAwB,EACxB,wBAAwB,EACxB,wBAAwB,EACxB,uBAAuB,EACxB,MAAM,sCAAsC,CAAC;AAE9C;;;GAGG;AACH,MAAM,CAAN,IAAY,0BASX;AATD,WAAY,0BAA0B;IACpC;;OAEG;IACH,2CAAa,CAAA;IACb;;OAEG;IACH,2CAAa,CAAA;AACf,CAAC,EATW,0BAA0B,KAA1B,0BAA0B,QASrC;AAaD;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAe,EAAE;IACpF,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,qBAAqB,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACvE,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,yCAAK,CAAC;IACf,CAAC;IACD,OAAO,CACL,oBAAC,KAAK,IACJ,UAAU,QACV,SAAS,EAAE,WAAW,CACpB,QAAQ,IAAI,uBAAuB,EACnC,wBAAwB,EACxB,qBAAqB,KAAK,0BAA0B,CAAC,IAAI,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,wBAAwB,CAChH,gBACW,SAAS,EACrB,IAAI,EAAC,MAAM,IAEV,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';\nimport { _ATTACHMENT_CARD_MARGIN_IN_PX, _ATTACHMENT_CARD_WIDTH_IN_REM } from '../styles/AttachmentCard.styles';\nimport {\n  attachmentCardBaseStyles,\n  attachmentCardFlexLayout,\n  attachmentCardGirdLayout,\n  attachmentGroupDisabled\n} from '../styles/AttachmentCardGroup.styles';\n\n/**\n * @internal\n * Props for `_AttachmentCardGroup` component.\n */\nexport enum _AttachmentCardGroupLayout {\n  /**\n   * Children are rendered in a grid layout with self resizing.\n   */\n  Grid = 'grid',\n  /**\n   * Children are rendered in a flex layout with no resizing.\n   */\n  Flex = 'flex'\n}\n\n/**\n * @internal\n * Props for `_AttachmentCardGroup` component.\n */\nexport interface _AttachmentCardGroupProps {\n  children: React.ReactNode;\n  ariaLabel?: string;\n  attachmentGroupLayout?: _AttachmentCardGroupLayout;\n  disabled?: boolean;\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, attachmentGroupLayout, disabled } = props;\n  if (!children) {\n    return <></>;\n  }\n  return (\n    <Stack\n      horizontal\n      className={mergeStyles(\n        disabled && attachmentGroupDisabled,\n        attachmentCardBaseStyles,\n        attachmentGroupLayout === _AttachmentCardGroupLayout.Grid ? attachmentCardGirdLayout : attachmentCardFlexLayout\n      )}\n      aria-label={ariaLabel}\n      role=\"list\"\n    >\n      {children}\n    </Stack>\n  );\n};\n"]}

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

@@ -7,15 +7,12 @@ import { useMemo } from 'react';
 import { useLocale } from '../../localization';
 import { _AttachmentCard } from './AttachmentCard';
 import { _AttachmentCardGroup, _AttachmentCardGroupLayout } from './AttachmentCardGroup';
-/* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */
-import { getAttachmentCountLiveMessage } from '../ChatMessage/ChatMessageContent';
 import { mergeClasses } from '@griffel/react';
 import { useAttachmentCardGroupStyles } from '../styles/AttachmentCardGroup.styles';
 /**
  * @internal
  */
 export const _AttachmentDownloadCards = (props) => {
-    var _a;
     const { attachments, message } = props;
     const localeStrings = useLocaleStringsTrampoline();
     const attachmentCardGroupStyles = useAttachmentCardGroupStyles();
@@ -34,12 +31,6 @@ export const _AttachmentDownloadCards = (props) => {
             return defaultMenuActions;
         }
     }, []);
-    const attachmentCardGroupDescription = useMemo(() => () => {
-        var _a, _b;
-        /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */
-        return getAttachmentCountLiveMessage(attachments !== null && attachments !== void 0 ? attachments : [], (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.attachmentCardGroupMessage) !== null && _b !== void 0 ? _b : localeStrings.attachmentCardGroupMessage);
-        return '';
-    }, [(_a = props.strings) === null || _a === void 0 ? void 0 : _a.attachmentCardGroupMessage, localeStrings.attachmentCardGroupMessage, attachments]);
     const hasMultipleAttachments = useMemo(() => {
         var _a, _b;
         return ((_b = (_a = props.attachments) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 1;
@@ -50,7 +41,7 @@ export const _AttachmentDownloadCards = (props) => {
     return (React.createElement("div", { className: mergeClasses(attachmentCardGroupStyles.root, hasMultipleAttachments
             ? attachmentCardGroupStyles.multipleAttachments
             : attachmentCardGroupStyles.singleAttachment), "data-ui-id": "attachment-download-card-group" },
-        React.createElement(_AttachmentCardGroup, { ariaLabel: attachmentCardGroupDescription(), attachmentGroupLayout: _AttachmentCardGroupLayout.Grid }, attachments &&
+        React.createElement(_AttachmentCardGroup, { attachmentGroupLayout: _AttachmentCardGroupLayout.Grid }, attachments &&
             attachments.map((attachment) => (React.createElement(_AttachmentCard, { attachment: attachment, key: attachment.id, menuActions: getMenuActions(attachment, localeStrings, message, props.actionsForAttachment), onActionHandlerFailed: props.onActionHandlerFailed, selfResizing: hasMultipleAttachments }))))));
 };
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"AttachmentDownloadCards.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Attachment/AttachmentDownloadCards.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon } from '@fluentui/react';\nimport React, { useCallback } from 'react';\nimport { useMemo } from 'react';\n/* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */\nimport { useLocale } from '../../localization';\nimport { _AttachmentCard } from './AttachmentCard';\nimport { _AttachmentCardGroup, _AttachmentCardGroupLayout } from './AttachmentCardGroup';\n/* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */\nimport { getAttachmentCountLiveMessage } from '../ChatMessage/ChatMessageContent';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { AttachmentMenuAction } from '../../types/Attachment';\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { ChatMessage } from '../../types';\nimport { mergeClasses } from '@griffel/react';\nimport { _ATTACHMENT_CARD_WIDTH_IN_REM } from '../styles/AttachmentCard.styles';\nimport { useAttachmentCardGroupStyles } from '../styles/AttachmentCardGroup.styles';\n\n/**\n * Represents the type of attachment\n * @public\n */\nexport type ChatAttachmentType =\n  | 'unknown'\n  | 'image'\n  | /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */ 'file';\n\n/**\n * Strings of _AttachmentDownloadCards that can be overridden.\n *\n * @internal\n */\nexport interface _AttachmentDownloadCardsStrings {\n  /* @conditional-compile-remove(file-sharing-acs) */\n  /** Aria label to notify user when focus is on attachment download button. */\n  downloadAttachment: string;\n  /** Aria label to notify user when focus is on attachment open button. */\n  openAttachment: string;\n  attachmentCardGroupMessage: string;\n}\n\n/**\n * @internal\n */\nexport interface _AttachmentDownloadCardsProps {\n  /**\n   * A chat message metadata that includes attachment metadata\n   */\n  attachments?: AttachmentMetadata[];\n  /**\n   * A chat message metadata that includes attachment metadata\n   */\n  message?: ChatMessage;\n  /**\n   * Optional callback to handle attachment download\n   */\n  actionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[];\n  /**\n   * Optional callback that runs if downloadHandler returns an error.\n   */\n  onActionHandlerFailed?: (errMsg: string) => void;\n  /**\n   * Optional aria label strings for attachment download cards\n   */\n  strings?: _AttachmentDownloadCardsStrings;\n}\n\n/**\n * @internal\n */\nexport const _AttachmentDownloadCards = (props: _AttachmentDownloadCardsProps): JSX.Element => {\n  const { attachments, message } = props;\n  const localeStrings = useLocaleStringsTrampoline();\n  const attachmentCardGroupStyles = useAttachmentCardGroupStyles();\n\n  const getMenuActions = useCallback(\n    (\n      attachment: AttachmentMetadata,\n      localeStrings: _AttachmentDownloadCardsStrings,\n      message?: ChatMessage,\n      action?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[]\n    ): AttachmentMenuAction[] => {\n      const defaultMenuActions = getDefaultMenuActions(localeStrings, message);\n      try {\n        const actions = action?.(attachment, message);\n        if (actions && actions.length > 0) {\n          return actions;\n        } else {\n          return defaultMenuActions;\n        }\n      } catch (error) {\n        return defaultMenuActions;\n      }\n    },\n    []\n  );\n\n  const attachmentCardGroupDescription = useMemo(\n    () => () => {\n      /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */\n      return getAttachmentCountLiveMessage(\n        attachments ?? [],\n        props.strings?.attachmentCardGroupMessage ?? localeStrings.attachmentCardGroupMessage\n      );\n      return '';\n    },\n    [props.strings?.attachmentCardGroupMessage, localeStrings.attachmentCardGroupMessage, attachments]\n  );\n\n  const hasMultipleAttachments = useMemo(() => {\n    return (props.attachments?.length ?? 0) > 1;\n  }, [props.attachments]);\n\n  if (!attachments || attachments.length === 0 || !attachments) {\n    return <></>;\n  }\n\n  return (\n    <div\n      className={mergeClasses(\n        attachmentCardGroupStyles.root,\n        hasMultipleAttachments\n          ? attachmentCardGroupStyles.multipleAttachments\n          : attachmentCardGroupStyles.singleAttachment\n      )}\n      data-ui-id=\"attachment-download-card-group\"\n    >\n      <_AttachmentCardGroup\n        ariaLabel={attachmentCardGroupDescription()}\n        attachmentGroupLayout={_AttachmentCardGroupLayout.Grid}\n      >\n        {attachments &&\n          attachments.map((attachment) => (\n            <_AttachmentCard\n              attachment={attachment}\n              key={attachment.id}\n              menuActions={getMenuActions(attachment, localeStrings, message, props.actionsForAttachment)}\n              onActionHandlerFailed={props.onActionHandlerFailed}\n              selfResizing={hasMultipleAttachments}\n            />\n          ))}\n      </_AttachmentCardGroup>\n    </div>\n  );\n};\n\n/**\n * @private\n */\nconst useLocaleStringsTrampoline = (): _AttachmentDownloadCardsStrings => {\n  /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */\n  return useLocale().strings.messageThread;\n  return {\n    /* @conditional-compile-remove(file-sharing-acs) */\n    downloadAttachment: '',\n    openAttachment: '',\n    attachmentCardGroupMessage: ''\n  };\n};\n\n/**\n * @private\n */\nconst getDefaultMenuActions = (\n  locale: _AttachmentDownloadCardsStrings,\n  chatMessage?: ChatMessage\n): AttachmentMenuAction[] => {\n  let actionName = locale.openAttachment;\n  // if message is sent by a Teams user, we need to use a different icon (\"open\")\n  if (chatMessage?.senderId?.includes('8:orgid:')) {\n    return [\n      {\n        name: actionName,\n        icon: <Icon iconName=\"OpenAttachment\" />,\n        onClick: defaultOnClickHandler\n      }\n    ];\n  }\n  // otherwise, use the default icon (\"download\")\n  /* @conditional-compile-remove(file-sharing-acs) */\n  actionName = locale.downloadAttachment;\n  return [\n    {\n      ...defaultAttachmentMenuAction,\n      name: actionName\n    }\n  ];\n};\n\n/**\n *\n * The default action handler for downloading attachments. This handler will open the attachment's URL in a new tab.\n */\nconst defaultOnClickHandler = (attachment: AttachmentMetadata): Promise<void> => {\n  return new Promise<void>((resolve) => {\n    window.open((attachment as AttachmentMetadata).url, '_blank', 'noopener,noreferrer');\n    resolve();\n  });\n};\n\n/**\n * @beta\n *\n * The default menu action for downloading attachments. This action will open the attachment's URL in a new tab.\n */\nexport const defaultAttachmentMenuAction: AttachmentMenuAction = {\n  /**\n   *\n   * name is used for aria-label only when there's one button. For multiple buttons, it's used as a label.\n   * by default it's an unlocalized string when this is used as a imported constant,\n   * but you can overwrite it with your own localized string.\n   *\n   * i.e. defaultAttachmentMenuAction.name = localize('Download');\n   *\n   * when no action is provided, the UI library will overwrite this name\n   * with a localized string this string when it's used in the UI.\n   */\n  name: 'Download',\n  // this is the icon shown on the right of the attachment card\n  icon: <Icon iconName=\"DownloadAttachment\" data-ui-id=\"attachment-download-card-download-icon\" />,\n  // this is the action that runs when the icon is clicked\n  onClick: defaultOnClickHandler\n};\n"]}
+{"version":3,"file":"AttachmentDownloadCards.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Attachment/AttachmentDownloadCards.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon } from '@fluentui/react';\nimport React, { useCallback } from 'react';\nimport { useMemo } from 'react';\n/* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */\nimport { useLocale } from '../../localization';\nimport { _AttachmentCard } from './AttachmentCard';\nimport { _AttachmentCardGroup, _AttachmentCardGroupLayout } from './AttachmentCardGroup';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { AttachmentMenuAction } from '../../types/Attachment';\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { ChatMessage } from '../../types';\nimport { mergeClasses } from '@griffel/react';\nimport { _ATTACHMENT_CARD_WIDTH_IN_REM } from '../styles/AttachmentCard.styles';\nimport { useAttachmentCardGroupStyles } from '../styles/AttachmentCardGroup.styles';\n\n/**\n * Represents the type of attachment\n * @public\n */\nexport type ChatAttachmentType =\n  | 'unknown'\n  | 'image'\n  | /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */ 'file';\n\n/**\n * Strings of _AttachmentDownloadCards that can be overridden.\n *\n * @internal\n */\nexport interface _AttachmentDownloadCardsStrings {\n  /* @conditional-compile-remove(file-sharing-acs) */\n  /** Aria label to notify user when focus is on attachment download button. */\n  downloadAttachment: string;\n  /** Aria label to notify user when focus is on attachment open button. */\n  openAttachment: string;\n  attachmentCardGroupMessage: string;\n}\n\n/**\n * @internal\n */\nexport interface _AttachmentDownloadCardsProps {\n  /**\n   * A chat message metadata that includes attachment metadata\n   */\n  attachments?: AttachmentMetadata[];\n  /**\n   * A chat message metadata that includes attachment metadata\n   */\n  message?: ChatMessage;\n  /**\n   * Optional callback to handle attachment download\n   */\n  actionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[];\n  /**\n   * Optional callback that runs if downloadHandler returns an error.\n   */\n  onActionHandlerFailed?: (errMsg: string) => void;\n  /**\n   * Optional aria label strings for attachment download cards\n   */\n  strings?: _AttachmentDownloadCardsStrings;\n}\n\n/**\n * @internal\n */\nexport const _AttachmentDownloadCards = (props: _AttachmentDownloadCardsProps): JSX.Element => {\n  const { attachments, message } = props;\n  const localeStrings = useLocaleStringsTrampoline();\n  const attachmentCardGroupStyles = useAttachmentCardGroupStyles();\n\n  const getMenuActions = useCallback(\n    (\n      attachment: AttachmentMetadata,\n      localeStrings: _AttachmentDownloadCardsStrings,\n      message?: ChatMessage,\n      action?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[]\n    ): AttachmentMenuAction[] => {\n      const defaultMenuActions = getDefaultMenuActions(localeStrings, message);\n      try {\n        const actions = action?.(attachment, message);\n        if (actions && actions.length > 0) {\n          return actions;\n        } else {\n          return defaultMenuActions;\n        }\n      } catch (error) {\n        return defaultMenuActions;\n      }\n    },\n    []\n  );\n\n  const hasMultipleAttachments = useMemo(() => {\n    return (props.attachments?.length ?? 0) > 1;\n  }, [props.attachments]);\n\n  if (!attachments || attachments.length === 0 || !attachments) {\n    return <></>;\n  }\n\n  return (\n    <div\n      className={mergeClasses(\n        attachmentCardGroupStyles.root,\n        hasMultipleAttachments\n          ? attachmentCardGroupStyles.multipleAttachments\n          : attachmentCardGroupStyles.singleAttachment\n      )}\n      data-ui-id=\"attachment-download-card-group\"\n    >\n      <_AttachmentCardGroup attachmentGroupLayout={_AttachmentCardGroupLayout.Grid}>\n        {attachments &&\n          attachments.map((attachment) => (\n            <_AttachmentCard\n              attachment={attachment}\n              key={attachment.id}\n              menuActions={getMenuActions(attachment, localeStrings, message, props.actionsForAttachment)}\n              onActionHandlerFailed={props.onActionHandlerFailed}\n              selfResizing={hasMultipleAttachments}\n            />\n          ))}\n      </_AttachmentCardGroup>\n    </div>\n  );\n};\n\n/**\n * @private\n */\nconst useLocaleStringsTrampoline = (): _AttachmentDownloadCardsStrings => {\n  /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */\n  return useLocale().strings.messageThread;\n  return {\n    /* @conditional-compile-remove(file-sharing-acs) */\n    downloadAttachment: '',\n    openAttachment: '',\n    attachmentCardGroupMessage: ''\n  };\n};\n\n/**\n * @private\n */\nconst getDefaultMenuActions = (\n  locale: _AttachmentDownloadCardsStrings,\n  chatMessage?: ChatMessage\n): AttachmentMenuAction[] => {\n  let actionName = locale.openAttachment;\n  // if message is sent by a Teams user, we need to use a different icon (\"open\")\n  if (chatMessage?.senderId?.includes('8:orgid:')) {\n    return [\n      {\n        name: actionName,\n        icon: <Icon iconName=\"OpenAttachment\" />,\n        onClick: defaultOnClickHandler\n      }\n    ];\n  }\n  // otherwise, use the default icon (\"download\")\n  /* @conditional-compile-remove(file-sharing-acs) */\n  actionName = locale.downloadAttachment;\n  return [\n    {\n      ...defaultAttachmentMenuAction,\n      name: actionName\n    }\n  ];\n};\n\n/**\n *\n * The default action handler for downloading attachments. This handler will open the attachment's URL in a new tab.\n */\nconst defaultOnClickHandler = (attachment: AttachmentMetadata): Promise<void> => {\n  return new Promise<void>((resolve) => {\n    window.open((attachment as AttachmentMetadata).url, '_blank', 'noopener,noreferrer');\n    resolve();\n  });\n};\n\n/**\n * @beta\n *\n * The default menu action for downloading attachments. This action will open the attachment's URL in a new tab.\n */\nexport const defaultAttachmentMenuAction: AttachmentMenuAction = {\n  /**\n   *\n   * name is used for aria-label only when there's one button. For multiple buttons, it's used as a label.\n   * by default it's an unlocalized string when this is used as a imported constant,\n   * but you can overwrite it with your own localized string.\n   *\n   * i.e. defaultAttachmentMenuAction.name = localize('Download');\n   *\n   * when no action is provided, the UI library will overwrite this name\n   * with a localized string this string when it's used in the UI.\n   */\n  name: 'Download',\n  // this is the icon shown on the right of the attachment card\n  icon: <Icon iconName=\"DownloadAttachment\" data-ui-id=\"attachment-download-card-download-icon\" />,\n  // this is the action that runs when the icon is clicked\n  onClick: defaultOnClickHandler\n};\n"]}

package/dist/dist-esm/react-components/src/components/Attachment/AttachmentUploadCards.d.ts

@@ -32,6 +32,10 @@ export interface AttachmentUploadCardsProps {
      * Optional arialabel strings for attachment upload cards
      */
     strings?: _AttachmentUploadCardsStrings;
+    /**
+     * Optional flag to disable attachment cards.
+     */
+    disabled?: boolean;
 }
 /**
  * @internal

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

@@ -20,29 +20,26 @@ export const _AttachmentUploadCards = (props) => {
     if (!attachments || attachments.length === 0) {
         return React.createElement(React.Fragment, null);
     }
-    return (React.createElement(_AttachmentCardGroup, { attachmentGroupLayout: _AttachmentCardGroupLayout.Flex }, attachments &&
+    return (React.createElement(_AttachmentCardGroup, { attachmentGroupLayout: _AttachmentCardGroupLayout.Flex, disabled: props.disabled }, attachments &&
         attachments
             .filter((attachment) => !attachment.error)
-            .map((attachment) => {
-            var _a, _b;
-            return (React.createElement(_AttachmentCard, { attachment: attachment, key: attachment.id, menuActions: [
-                    {
-                        name: (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.removeAttachment) !== null && _b !== void 0 ? _b : 'Remove',
-                        icon: (React.createElement("div", { "aria-label": removeAttachmentButtonString(), "data-testid": "attachment-upload-card-remove" },
-                            React.createElement(Icon, { iconName: "CancelAttachmentUpload", className: mergeStyles(actionIconStyle) }))),
-                        onClick: (attachment) => {
-                            return new Promise((resolve, reject) => {
-                                try {
-                                    props.onCancelAttachmentUpload && props.onCancelAttachmentUpload(attachment.id);
-                                    resolve();
-                                }
-                                catch (e) {
-                                    reject(e.message);
-                                }
-                            });
-                        }
+            .map((attachment) => (React.createElement(_AttachmentCard, { attachment: attachment, key: attachment.id, menuActions: [
+                {
+                    name: removeAttachmentButtonString(),
+                    icon: (React.createElement("div", { "data-testid": "attachment-upload-card-remove" },
+                        React.createElement(Icon, { iconName: "CancelAttachmentUpload", className: mergeStyles(actionIconStyle) }))),
+                    onClick: (attachment) => {
+                        return new Promise((resolve, reject) => {
+                            try {
+                                props.onCancelAttachmentUpload && props.onCancelAttachmentUpload(attachment.id);
+                                resolve();
+                            }
+                            catch (e) {
+                                reject(e.message);
+                            }
+                        });
                     }
-                ], strings: props.strings }));
-        })));
+                }
+            ], strings: props.strings })))));
 };
 //# sourceMappingURL=AttachmentUploadCards.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AttachmentUploadCards.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Attachment/AttachmentUploadCards.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAEzF,OAAO,EAAE,wCAAwC,EAAE,MAAM,iBAAiB,CAAC;AAqC3E,MAAM,eAAe,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;AAE3C;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAiC,EAAe,EAAE;;IACvF,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC;IACtC,MAAM,aAAa,GAAG,wCAAwC,EAAE,CAAC;IACjE,MAAM,4BAA4B,GAAG,OAAO,CAC1C,GAAG,EAAE,CAAC,GAAG,EAAE;;QACT,OAAO,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,gBAAgB,mCAAI,aAAa,CAAC,gBAAgB,CAAC;IAC3E,CAAC,EACD,CAAC,MAAA,KAAK,CAAC,OAAO,0CAAE,gBAAgB,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAClE,CAAC;IAEF,IAAI,CAAC,WAAW,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC7C,OAAO,yCAAK,CAAC;IACf,CAAC;IAED,OAAO,CACL,oBAAC,oBAAoB,IAAC,qBAAqB,EAAE,0BAA0B,CAAC,IAAI,IACzE,WAAW;QACV,WAAW;aACR,MAAM,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC;aACzC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE;;YAAC,OAAA,CACnB,oBAAC,eAAe,IACd,UAAU,EAAE,UAAU,EACtB,GAAG,EAAE,UAAU,CAAC,EAAE,EAClB,WAAW,EAAE;oBACX;wBACE,IAAI,EAAE,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,gBAAgB,mCAAI,QAAQ;wBACjD,IAAI,EAAE,CACJ,2CAAiB,4BAA4B,EAAE,iBAAc,+BAA+B;4BAC1F,oBAAC,IAAI,IAAC,QAAQ,EAAC,wBAAwB,EAAC,SAAS,EAAE,WAAW,CAAC,eAAe,CAAC,GAAI,CAC/E,CACP;wBACD,OAAO,EAAE,CAAC,UAAU,EAAE,EAAE;4BACtB,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;gCACrC,IAAI,CAAC;oCACH,KAAK,CAAC,wBAAwB,IAAI,KAAK,CAAC,wBAAwB,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;oCAChF,OAAO,EAAE,CAAC;gCACZ,CAAC;gCAAC,OAAO,CAAC,EAAE,CAAC;oCACX,MAAM,CAAE,CAAW,CAAC,OAAO,CAAC,CAAC;gCAC/B,CAAC;4BACH,CAAC,CAAC,CAAC;wBACL,CAAC;qBACF;iBACF,EACD,OAAO,EAAE,KAAK,CAAC,OAAO,GACtB,CACH,CAAA;SAAA,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, { useMemo } from 'react';\nimport { _AttachmentCard } from './AttachmentCard';\nimport { _AttachmentCardGroup, _AttachmentCardGroupLayout } from './AttachmentCardGroup';\nimport { AttachmentMetadataInProgress } from '@internal/acs-ui-common';\nimport { useLocaleAttachmentCardStringsTrampoline } from '../utils/common';\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  /** Aria label to notify user more attachment action menu. */\n  attachmentMoreMenu: string;\n}\n\n/**\n * @internal\n */\nexport interface AttachmentUploadCardsProps {\n  /**\n   * Optional array of {@link AttachmentMetadataInProgress}\n   */\n  attachments?: AttachmentMetadataInProgress[];\n  /**\n   * Optional callback to remove the attachment upload before sending by clicking on\n   * cancel icon.\n   */\n  onCancelAttachmentUpload?: (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: AttachmentUploadCardsProps): JSX.Element => {\n  const attachments = props.attachments;\n  const localeStrings = useLocaleAttachmentCardStringsTrampoline();\n  const removeAttachmentButtonString = useMemo(\n    () => () => {\n      return props.strings?.removeAttachment ?? localeStrings.removeAttachment;\n    },\n    [props.strings?.removeAttachment, localeStrings.removeAttachment]\n  );\n\n  if (!attachments || attachments.length === 0) {\n    return <></>;\n  }\n\n  return (\n    <_AttachmentCardGroup attachmentGroupLayout={_AttachmentCardGroupLayout.Flex}>\n      {attachments &&\n        attachments\n          .filter((attachment) => !attachment.error)\n          .map((attachment) => (\n            <_AttachmentCard\n              attachment={attachment}\n              key={attachment.id}\n              menuActions={[\n                {\n                  name: props.strings?.removeAttachment ?? 'Remove',\n                  icon: (\n                    <div aria-label={removeAttachmentButtonString()} data-testid=\"attachment-upload-card-remove\">\n                      <Icon iconName=\"CancelAttachmentUpload\" className={mergeStyles(actionIconStyle)} />\n                    </div>\n                  ),\n                  onClick: (attachment) => {\n                    return new Promise((resolve, reject) => {\n                      try {\n                        props.onCancelAttachmentUpload && props.onCancelAttachmentUpload(attachment.id);\n                        resolve();\n                      } catch (e) {\n                        reject((e as Error).message);\n                      }\n                    });\n                  }\n                }\n              ]}\n              strings={props.strings}\n            />\n          ))}\n    </_AttachmentCardGroup>\n  );\n};\n"]}
+{"version":3,"file":"AttachmentUploadCards.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Attachment/AttachmentUploadCards.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAEzF,OAAO,EAAE,wCAAwC,EAAE,MAAM,iBAAiB,CAAC;AAyC3E,MAAM,eAAe,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;AAE3C;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAiC,EAAe,EAAE;;IACvF,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC;IACtC,MAAM,aAAa,GAAG,wCAAwC,EAAE,CAAC;IACjE,MAAM,4BAA4B,GAAG,OAAO,CAC1C,GAAG,EAAE,CAAC,GAAG,EAAE;;QACT,OAAO,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,gBAAgB,mCAAI,aAAa,CAAC,gBAAgB,CAAC;IAC3E,CAAC,EACD,CAAC,MAAA,KAAK,CAAC,OAAO,0CAAE,gBAAgB,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAClE,CAAC;IAEF,IAAI,CAAC,WAAW,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC7C,OAAO,yCAAK,CAAC;IACf,CAAC;IAED,OAAO,CACL,oBAAC,oBAAoB,IAAC,qBAAqB,EAAE,0BAA0B,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,IACnG,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,UAAU,EAAE,UAAU,EACtB,GAAG,EAAE,UAAU,CAAC,EAAE,EAClB,WAAW,EAAE;gBACX;oBACE,IAAI,EAAE,4BAA4B,EAAE;oBACpC,IAAI,EAAE,CACJ,4CAAiB,+BAA+B;wBAC9C,oBAAC,IAAI,IAAC,QAAQ,EAAC,wBAAwB,EAAC,SAAS,EAAE,WAAW,CAAC,eAAe,CAAC,GAAI,CAC/E,CACP;oBACD,OAAO,EAAE,CAAC,UAAU,EAAE,EAAE;wBACtB,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;4BACrC,IAAI,CAAC;gCACH,KAAK,CAAC,wBAAwB,IAAI,KAAK,CAAC,wBAAwB,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;gCAChF,OAAO,EAAE,CAAC;4BACZ,CAAC;4BAAC,OAAO,CAAC,EAAE,CAAC;gCACX,MAAM,CAAE,CAAW,CAAC,OAAO,CAAC,CAAC;4BAC/B,CAAC;wBACH,CAAC,CAAC,CAAC;oBACL,CAAC;iBACF;aACF,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, { useMemo } from 'react';\nimport { _AttachmentCard } from './AttachmentCard';\nimport { _AttachmentCardGroup, _AttachmentCardGroupLayout } from './AttachmentCardGroup';\nimport { AttachmentMetadataInProgress } from '@internal/acs-ui-common';\nimport { useLocaleAttachmentCardStringsTrampoline } from '../utils/common';\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  /** Aria label to notify user more attachment action menu. */\n  attachmentMoreMenu: string;\n}\n\n/**\n * @internal\n */\nexport interface AttachmentUploadCardsProps {\n  /**\n   * Optional array of {@link AttachmentMetadataInProgress}\n   */\n  attachments?: AttachmentMetadataInProgress[];\n  /**\n   * Optional callback to remove the attachment upload before sending by clicking on\n   * cancel icon.\n   */\n  onCancelAttachmentUpload?: (attachmentId: string) => void;\n  /**\n   * Optional arialabel strings for attachment upload cards\n   */\n  strings?: _AttachmentUploadCardsStrings;\n  /**\n   * Optional flag to disable attachment cards.\n   */\n  disabled?: boolean;\n}\n\nconst actionIconStyle = { height: '1rem' };\n\n/**\n * @internal\n */\nexport const _AttachmentUploadCards = (props: AttachmentUploadCardsProps): JSX.Element => {\n  const attachments = props.attachments;\n  const localeStrings = useLocaleAttachmentCardStringsTrampoline();\n  const removeAttachmentButtonString = useMemo(\n    () => () => {\n      return props.strings?.removeAttachment ?? localeStrings.removeAttachment;\n    },\n    [props.strings?.removeAttachment, localeStrings.removeAttachment]\n  );\n\n  if (!attachments || attachments.length === 0) {\n    return <></>;\n  }\n\n  return (\n    <_AttachmentCardGroup attachmentGroupLayout={_AttachmentCardGroupLayout.Flex} disabled={props.disabled}>\n      {attachments &&\n        attachments\n          .filter((attachment) => !attachment.error)\n          .map((attachment) => (\n            <_AttachmentCard\n              attachment={attachment}\n              key={attachment.id}\n              menuActions={[\n                {\n                  name: removeAttachmentButtonString(),\n                  icon: (\n                    <div data-testid=\"attachment-upload-card-remove\">\n                      <Icon iconName=\"CancelAttachmentUpload\" className={mergeStyles(actionIconStyle)} />\n                    </div>\n                  ),\n                  onClick: (attachment) => {\n                    return new Promise((resolve, reject) => {\n                      try {\n                        props.onCancelAttachmentUpload && props.onCancelAttachmentUpload(attachment.id);\n                        resolve();\n                      } catch (e) {\n                        reject((e as Error).message);\n                      }\n                    });\n                  }\n                }\n              ]}\n              strings={props.strings}\n            />\n          ))}\n    </_AttachmentCardGroup>\n  );\n};\n"]}

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

@@ -34,7 +34,7 @@ export const ErrorBar = (props) => {
             setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors));
     }, [props.activeErrorMessages, dismissedErrors, trackDismissedErrorsInternally]);
     const toShow = errorsToShow(props.activeErrorMessages, dismissedErrors, props.ignorePremountErrors ? mountTimestamp.current : undefined);
-    return (React.createElement(Stack, { "data-ui-id": "error-bar-stack" }, toShow.map((error) => (React.createElement(MessageBar, Object.assign({}, props, { styles: {
+    return (React.createElement(Stack, { "data-ui-id": "notifications-stack" }, toShow.map((error) => (React.createElement(MessageBar, Object.assign({}, props, { styles: {
             innerText: {
                 alignSelf: 'center'
             },

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

@@ -1 +1 @@
-{"version":3,"file":"ErrorBar.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ErrorBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAoB,UAAU,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAEL,YAAY,EACZ,+BAA+B,EAC/B,YAAY,EACZ,mBAAmB,EACnB,cAAc,EACf,MAAM,SAAS,CAAC;AAqPjB;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAe,EAAE;;IAC5D,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC;IACnD,MAAM,OAAO,GAAG,MAAA,KAAK,CAAC,OAAO,mCAAI,aAAa,CAAC;IAE/C,MAAM,8BAA8B,GAAG,CAAC,KAAK,CAAC,cAAc,CAAC;IAE7D,sDAAsD;IACtD,yDAAyD;IACzD,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;IAEpD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAmB,EAAE,CAAC,CAAC;IAE7E,mGAAmG;IACnG,4EAA4E;IAC5E,SAAS,CAAC,GAAG,EAAE;QACb,8BAA8B;YAC5B,kBAAkB,CAAC,+BAA+B,CAAC,KAAK,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC,CAAC;IACpG,CAAC,EAAE,CAAC,KAAK,CAAC,mBAAmB,EAAE,eAAe,EAAE,8BAA8B,CAAC,CAAC,CAAC;IAEjF,MAAM,MAAM,GAAG,YAAY,CACzB,KAAK,CAAC,mBAAmB,EACzB,eAAe,EACf,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAChE,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,kBAAY,iBAAiB,IAChC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,oBAAC,UAAU,oBACL,KAAK,IACT,MAAM,EAAE;YACN,SAAS,EAAE;gBACT,SAAS,EAAE,QAAQ;aACpB;YACD,IAAI,EAAE;gBACJ,MAAM,EAAE,CAAC;aACV;YACD,OAAO,EAAE;gBACP,UAAU,EAAE,SAAS;aACtB;YACD,SAAS,EAAE;gBACT,MAAM,EAAE,CAAC;gBACT,UAAU,EAAE,QAAQ;aACrB;SACF,EACD,GAAG,EAAE,KAAK,CAAC,IAAI,EACf,cAAc,EAAE,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,EAC1C,mBAAmB,EAAE,mBAAmB,CAAC,KAAK,CAAC,IAAI,CAAC,EACpD,SAAS,EAAE,GAAG,EAAE;;YACd,OAAA,8BAA8B;gBAC5B,CAAC,CAAC,kBAAkB,CAAC,YAAY,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC;gBAC1D,CAAC,CAAC,MAAA,KAAK,CAAC,cAAc,sDAAG,KAAK,CAAC,CAAA;SAAA,EAEnC,sBAAsB,EAAE,GAAG,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,OAAO,CAAC,sBAAsB,EAAE,EACnF,gBAAgB,EAAE,EAAE,QAAQ,EAAE,eAAe,EAAE,KAE9C,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CACT,CACd,CAAC,CACI,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport { IMessageBarProps, MessageBar, Stack } from '@fluentui/react';\nimport { useLocale } from '../localization';\nimport {\n  DismissedError,\n  dismissError,\n  dropDismissalsForInactiveErrors,\n  errorsToShow,\n  messageBarIconProps,\n  messageBarType\n} from './utils';\n\n/**\n * Props for {@link ErrorBar}.\n *\n * In addition to the following, {@link ErrorBar} forwards all\n * {@link @fluentui/react#IMessageBarProps} to the underlying {@link @fluentui/react#MessageBar}.\n *\n * @public\n */\nexport interface ErrorBarProps extends IMessageBarProps {\n  /**\n   * Strings shown on the UI on errors.\n   */\n  strings?: ErrorBarStrings;\n\n  /**\n   * Currently active errors.\n   */\n  activeErrorMessages: ActiveErrorMessage[];\n\n  /**\n   * If set, errors with {@link ActiveErrorMessage.timestamp} older than the time this component is mounted\n   * are not shown.\n   *\n   * This is useful when using the {@link ErrorBar} with a stateful client that handles more than one call\n   * or chat thread. Set this prop to ignore errors from previous call or chat.\n   *\n   * @defaultValue false\n   */\n  ignorePremountErrors?: boolean;\n\n  /**\n   * Callback called when the dismiss button is triggered.\n   * Use this to control errors shown when they dismissed by the user.\n   */\n  onDismissError?: (dismissedError: ActiveErrorMessage) => void;\n}\n\n/**\n * All strings that may be shown on the UI in the {@link ErrorBar}.\n *\n * @public\n */\nexport interface ErrorBarStrings {\n  /**\n   * Unable to reach Chat service.\n   *\n   * This can mean:\n   *   - Incorrect Azure Communication Services endpoint was provided.\n   *   - User's network connection is down.\n   */\n  unableToReachChatService: string;\n\n  /**\n   * User does not have access to the Chat service.\n   * This usually means that either the Azure Communication Services endpiont or the token provided are incorrect.\n   */\n  accessDenied: string;\n\n  /**\n   * User is no longer on the thread.\n   *\n   * See also: {@link ErrorBarStrings.sendMessageNotInChatThread} for a more specific error.\n   */\n  userNotInChatThread: string;\n\n  /**\n   * Sending message failed because user is no longer on the thread.\n   */\n  sendMessageNotInChatThread: string;\n\n  /**\n   * A generic message when sending message fails.\n   * Prefer more specific error strings when possible.\n   */\n  sendMessageGeneric: string;\n\n  /**\n   * A generic message when starting video fails.\n   */\n  startVideoGeneric: string;\n\n  /**\n   * A generic message when starting video fails.\n   */\n  stopVideoGeneric: string;\n\n  /**\n   * A generic message when muting microphone fails.\n   */\n  muteGeneric: string;\n\n  /**\n   * A generic message when unmuting microphone fails.\n   */\n  unmuteGeneric: string;\n\n  /**\n   * A generic message when starting screenshare fails.\n   */\n  startScreenShareGeneric: string;\n\n  /**\n   * A generic message when stopping screenshare fails.\n   */\n  stopScreenShareGeneric: string;\n\n  /**\n   * Message shown when poor network quality is detected during a call.\n   */\n  callNetworkQualityLow: string;\n\n  /**\n   * Message shown on failure to detect audio output devices.\n   */\n  callNoSpeakerFound: string;\n\n  /**\n   * Message shown on failure to detect audio input devices.\n   */\n  callNoMicrophoneFound: string;\n\n  /**\n   * Message shown when microphone can be enumerated but access is blocked by the system.\n   */\n  callMicrophoneAccessDenied: string;\n\n  /**\n   * Message shown when microphone can be enumerated but access is blocked by the system, for safari browsers\n   */\n  callMicrophoneAccessDeniedSafari: string;\n\n  /**\n   * Message shown when microphone is muted by the system (not by local or remote participants)\n   */\n  callMicrophoneMutedBySystem: string;\n\n  /**\n   * Message shown when microphone is unmuted by the system (not by local or remote participants).\n   * This typically occurs if the system recovers from an unexpected mute.\n   */\n  callMicrophoneUnmutedBySystem: string;\n\n  /**\n   * Mac OS specific message shown when microphone can be enumerated but access is\n   * blocked by the system.\n   */\n  callMacOsMicrophoneAccessDenied: string;\n\n  /**\n   * Message shown when poor network causes local video stream to be frozen.\n   */\n  callLocalVideoFreeze: string;\n\n  /**\n   * Message shown when camera can be enumerated but access is blocked by the system.\n   */\n  callCameraAccessDenied: string;\n\n  /**\n   * Message shown when camera can be enumerated but access is blocked by the system, for safari browsers\n   */\n  callCameraAccessDeniedSafari: string;\n\n  /**\n   * Message shown when local video fails to start because camera is already in use by\n   * another applciation.\n   */\n  callCameraAlreadyInUse: string;\n\n  /**\n   * Message shown when local video is stopped by the system (not by local or remote participants)\n   */\n  callVideoStoppedBySystem: string;\n\n  /**\n   * Message shown when local video was recovered by the system (not by the local participant)\n   */\n  callVideoRecoveredBySystem: string;\n\n  /**\n   * Mac OS specific message shown when system denies access to camera.\n   */\n  callMacOsCameraAccessDenied: string;\n\n  /**\n   * Mac OS specific message shown when system denies sharing local screen on a call.\n   */\n  callMacOsScreenShareAccessDenied: string;\n  /**\n   * Dimiss errorbar button aria label read by screen reader accessibility tools\n   */\n  dismissButtonAriaLabel?: string;\n\n  /**\n   * An error message when joining a call fails.\n   */\n  failedToJoinCallGeneric?: string;\n\n  /**\n   * An error message when joining a call fails specifically due to an invalid meeting link.\n   */\n  failedToJoinCallInvalidMeetingLink?: string;\n  /**\n   * Error bar string letting you know remote participants see a frozen stream for you.\n   */\n  cameraFrozenForRemoteParticipants?: string;\n\n  /**\n   * Unable to start effect\n   */\n  unableToStartVideoEffect?: string;\n  /**\n   * An error message when starting spotlight while max participants are spotlighted\n   */\n  startSpotlightWhileMaxParticipantsAreSpotlighted: string;\n}\n\n/**\n * All errors that can be shown in the {@link ErrorBar}.\n *\n * @public\n */\nexport type ErrorType = keyof ErrorBarStrings;\n\n/**\n * Active error messages to be shown via {@link ErrorBar}.\n *\n * @public\n */\nexport interface ActiveErrorMessage {\n  /**\n   * Type of error that is active.\n   */\n  type: ErrorType;\n  /**\n   * The latest timestamp when this error was observed.\n   *\n   * When available, this is used to track errors that have already been seen and dismissed\n   * by the user.\n   */\n  timestamp?: Date;\n}\n\n/**\n * A component to show error messages on the UI.\n * All strings that can be shown are accepted as the {@link ErrorBarProps.strings} so that they can be localized.\n * Active errors are selected by {@link ErrorBarProps.activeErrorMessages}.\n *\n * This component internally tracks dismissed by the user.\n *   * Errors that have an associated timestamp: The error is shown on the UI again if it occurs after being dismissed.\n *   * Errors that do not have a timestamp: The error is dismissed until it disappears from the props.\n *         If the error recurs, it is shown in the UI.\n *\n * Uses {@link @fluentui/react#MessageBar} UI element.\n *\n * @public\n */\nexport const ErrorBar = (props: ErrorBarProps): JSX.Element => {\n  const localeStrings = useLocale().strings.errorBar;\n  const strings = props.strings ?? localeStrings;\n\n  const trackDismissedErrorsInternally = !props.onDismissError;\n\n  // Timestamp for when this comopnent is first mounted.\n  // Never updated through the lifecycle of this component.\n  const mountTimestamp = useRef(new Date(Date.now()));\n\n  const [dismissedErrors, setDismissedErrors] = useState<DismissedError[]>([]);\n\n  // dropDismissalsForInactiveErrors only returns a new object if `dismissedErrors` actually changes.\n  // Without this behaviour, this `useEffect` block would cause a render loop.\n  useEffect(() => {\n    trackDismissedErrorsInternally &&\n      setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors));\n  }, [props.activeErrorMessages, dismissedErrors, trackDismissedErrorsInternally]);\n\n  const toShow = errorsToShow(\n    props.activeErrorMessages,\n    dismissedErrors,\n    props.ignorePremountErrors ? mountTimestamp.current : undefined\n  );\n\n  return (\n    <Stack data-ui-id=\"error-bar-stack\">\n      {toShow.map((error) => (\n        <MessageBar\n          {...props}\n          styles={{\n            innerText: {\n              alignSelf: 'center'\n            },\n            icon: {\n              height: 0\n            },\n            content: {\n              lineHeight: 'inherit'\n            },\n            dismissal: {\n              height: 0,\n              paddingTop: '0.8rem'\n            }\n          }}\n          key={error.type}\n          messageBarType={messageBarType(error.type)}\n          messageBarIconProps={messageBarIconProps(error.type)}\n          onDismiss={() =>\n            trackDismissedErrorsInternally\n              ? setDismissedErrors(dismissError(dismissedErrors, error))\n              : props.onDismissError?.(error)\n          }\n          dismissButtonAriaLabel={`${strings[error.type]}, ${strings.dismissButtonAriaLabel}`}\n          dismissIconProps={{ iconName: 'ErrorBarClear' }}\n        >\n          {strings[error.type]}\n        </MessageBar>\n      ))}\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"ErrorBar.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ErrorBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAoB,UAAU,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAEL,YAAY,EACZ,+BAA+B,EAC/B,YAAY,EACZ,mBAAmB,EACnB,cAAc,EACf,MAAM,SAAS,CAAC;AAqPjB;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAe,EAAE;;IAC5D,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC;IACnD,MAAM,OAAO,GAAG,MAAA,KAAK,CAAC,OAAO,mCAAI,aAAa,CAAC;IAE/C,MAAM,8BAA8B,GAAG,CAAC,KAAK,CAAC,cAAc,CAAC;IAE7D,sDAAsD;IACtD,yDAAyD;IACzD,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;IAEpD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAmB,EAAE,CAAC,CAAC;IAE7E,mGAAmG;IACnG,4EAA4E;IAC5E,SAAS,CAAC,GAAG,EAAE;QACb,8BAA8B;YAC5B,kBAAkB,CAAC,+BAA+B,CAAC,KAAK,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC,CAAC;IACpG,CAAC,EAAE,CAAC,KAAK,CAAC,mBAAmB,EAAE,eAAe,EAAE,8BAA8B,CAAC,CAAC,CAAC;IAEjF,MAAM,MAAM,GAAG,YAAY,CACzB,KAAK,CAAC,mBAAmB,EACzB,eAAe,EACf,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAChE,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,kBAAY,qBAAqB,IACpC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,oBAAC,UAAU,oBACL,KAAK,IACT,MAAM,EAAE;YACN,SAAS,EAAE;gBACT,SAAS,EAAE,QAAQ;aACpB;YACD,IAAI,EAAE;gBACJ,MAAM,EAAE,CAAC;aACV;YACD,OAAO,EAAE;gBACP,UAAU,EAAE,SAAS;aACtB;YACD,SAAS,EAAE;gBACT,MAAM,EAAE,CAAC;gBACT,UAAU,EAAE,QAAQ;aACrB;SACF,EACD,GAAG,EAAE,KAAK,CAAC,IAAI,EACf,cAAc,EAAE,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,EAC1C,mBAAmB,EAAE,mBAAmB,CAAC,KAAK,CAAC,IAAI,CAAC,EACpD,SAAS,EAAE,GAAG,EAAE;;YACd,OAAA,8BAA8B;gBAC5B,CAAC,CAAC,kBAAkB,CAAC,YAAY,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC;gBAC1D,CAAC,CAAC,MAAA,KAAK,CAAC,cAAc,sDAAG,KAAK,CAAC,CAAA;SAAA,EAEnC,sBAAsB,EAAE,GAAG,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,OAAO,CAAC,sBAAsB,EAAE,EACnF,gBAAgB,EAAE,EAAE,QAAQ,EAAE,eAAe,EAAE,KAE9C,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CACT,CACd,CAAC,CACI,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport { IMessageBarProps, MessageBar, Stack } from '@fluentui/react';\nimport { useLocale } from '../localization';\nimport {\n  DismissedError,\n  dismissError,\n  dropDismissalsForInactiveErrors,\n  errorsToShow,\n  messageBarIconProps,\n  messageBarType\n} from './utils';\n\n/**\n * Props for {@link ErrorBar}.\n *\n * In addition to the following, {@link ErrorBar} forwards all\n * {@link @fluentui/react#IMessageBarProps} to the underlying {@link @fluentui/react#MessageBar}.\n *\n * @public\n */\nexport interface ErrorBarProps extends IMessageBarProps {\n  /**\n   * Strings shown on the UI on errors.\n   */\n  strings?: ErrorBarStrings;\n\n  /**\n   * Currently active errors.\n   */\n  activeErrorMessages: ActiveErrorMessage[];\n\n  /**\n   * If set, errors with {@link ActiveErrorMessage.timestamp} older than the time this component is mounted\n   * are not shown.\n   *\n   * This is useful when using the {@link ErrorBar} with a stateful client that handles more than one call\n   * or chat thread. Set this prop to ignore errors from previous call or chat.\n   *\n   * @defaultValue false\n   */\n  ignorePremountErrors?: boolean;\n\n  /**\n   * Callback called when the dismiss button is triggered.\n   * Use this to control errors shown when they dismissed by the user.\n   */\n  onDismissError?: (dismissedError: ActiveErrorMessage) => void;\n}\n\n/**\n * All strings that may be shown on the UI in the {@link ErrorBar}.\n *\n * @public\n */\nexport interface ErrorBarStrings {\n  /**\n   * Unable to reach Chat service.\n   *\n   * This can mean:\n   *   - Incorrect Azure Communication Services endpoint was provided.\n   *   - User's network connection is down.\n   */\n  unableToReachChatService: string;\n\n  /**\n   * User does not have access to the Chat service.\n   * This usually means that either the Azure Communication Services endpiont or the token provided are incorrect.\n   */\n  accessDenied: string;\n\n  /**\n   * User is no longer on the thread.\n   *\n   * See also: {@link ErrorBarStrings.sendMessageNotInChatThread} for a more specific error.\n   */\n  userNotInChatThread: string;\n\n  /**\n   * Sending message failed because user is no longer on the thread.\n   */\n  sendMessageNotInChatThread: string;\n\n  /**\n   * A generic message when sending message fails.\n   * Prefer more specific error strings when possible.\n   */\n  sendMessageGeneric: string;\n\n  /**\n   * A generic message when starting video fails.\n   */\n  startVideoGeneric: string;\n\n  /**\n   * A generic message when starting video fails.\n   */\n  stopVideoGeneric: string;\n\n  /**\n   * A generic message when muting microphone fails.\n   */\n  muteGeneric: string;\n\n  /**\n   * A generic message when unmuting microphone fails.\n   */\n  unmuteGeneric: string;\n\n  /**\n   * A generic message when starting screenshare fails.\n   */\n  startScreenShareGeneric: string;\n\n  /**\n   * A generic message when stopping screenshare fails.\n   */\n  stopScreenShareGeneric: string;\n\n  /**\n   * Message shown when poor network quality is detected during a call.\n   */\n  callNetworkQualityLow: string;\n\n  /**\n   * Message shown on failure to detect audio output devices.\n   */\n  callNoSpeakerFound: string;\n\n  /**\n   * Message shown on failure to detect audio input devices.\n   */\n  callNoMicrophoneFound: string;\n\n  /**\n   * Message shown when microphone can be enumerated but access is blocked by the system.\n   */\n  callMicrophoneAccessDenied: string;\n\n  /**\n   * Message shown when microphone can be enumerated but access is blocked by the system, for safari browsers\n   */\n  callMicrophoneAccessDeniedSafari: string;\n\n  /**\n   * Message shown when microphone is muted by the system (not by local or remote participants)\n   */\n  callMicrophoneMutedBySystem: string;\n\n  /**\n   * Message shown when microphone is unmuted by the system (not by local or remote participants).\n   * This typically occurs if the system recovers from an unexpected mute.\n   */\n  callMicrophoneUnmutedBySystem: string;\n\n  /**\n   * Mac OS specific message shown when microphone can be enumerated but access is\n   * blocked by the system.\n   */\n  callMacOsMicrophoneAccessDenied: string;\n\n  /**\n   * Message shown when poor network causes local video stream to be frozen.\n   */\n  callLocalVideoFreeze: string;\n\n  /**\n   * Message shown when camera can be enumerated but access is blocked by the system.\n   */\n  callCameraAccessDenied: string;\n\n  /**\n   * Message shown when camera can be enumerated but access is blocked by the system, for safari browsers\n   */\n  callCameraAccessDeniedSafari: string;\n\n  /**\n   * Message shown when local video fails to start because camera is already in use by\n   * another applciation.\n   */\n  callCameraAlreadyInUse: string;\n\n  /**\n   * Message shown when local video is stopped by the system (not by local or remote participants)\n   */\n  callVideoStoppedBySystem: string;\n\n  /**\n   * Message shown when local video was recovered by the system (not by the local participant)\n   */\n  callVideoRecoveredBySystem: string;\n\n  /**\n   * Mac OS specific message shown when system denies access to camera.\n   */\n  callMacOsCameraAccessDenied: string;\n\n  /**\n   * Mac OS specific message shown when system denies sharing local screen on a call.\n   */\n  callMacOsScreenShareAccessDenied: string;\n  /**\n   * Dimiss errorbar button aria label read by screen reader accessibility tools\n   */\n  dismissButtonAriaLabel?: string;\n\n  /**\n   * An error message when joining a call fails.\n   */\n  failedToJoinCallGeneric?: string;\n\n  /**\n   * An error message when joining a call fails specifically due to an invalid meeting link.\n   */\n  failedToJoinCallInvalidMeetingLink?: string;\n  /**\n   * Error bar string letting you know remote participants see a frozen stream for you.\n   */\n  cameraFrozenForRemoteParticipants?: string;\n\n  /**\n   * Unable to start effect\n   */\n  unableToStartVideoEffect?: string;\n  /**\n   * An error message when starting spotlight while max participants are spotlighted\n   */\n  startSpotlightWhileMaxParticipantsAreSpotlighted: string;\n}\n\n/**\n * All errors that can be shown in the {@link ErrorBar}.\n *\n * @public\n */\nexport type ErrorType = keyof ErrorBarStrings;\n\n/**\n * Active error messages to be shown via {@link ErrorBar}.\n *\n * @public\n */\nexport interface ActiveErrorMessage {\n  /**\n   * Type of error that is active.\n   */\n  type: ErrorType;\n  /**\n   * The latest timestamp when this error was observed.\n   *\n   * When available, this is used to track errors that have already been seen and dismissed\n   * by the user.\n   */\n  timestamp?: Date;\n}\n\n/**\n * A component to show error messages on the UI.\n * All strings that can be shown are accepted as the {@link ErrorBarProps.strings} so that they can be localized.\n * Active errors are selected by {@link ErrorBarProps.activeErrorMessages}.\n *\n * This component internally tracks dismissed by the user.\n *   * Errors that have an associated timestamp: The error is shown on the UI again if it occurs after being dismissed.\n *   * Errors that do not have a timestamp: The error is dismissed until it disappears from the props.\n *         If the error recurs, it is shown in the UI.\n *\n * Uses {@link @fluentui/react#MessageBar} UI element.\n *\n * @public\n */\nexport const ErrorBar = (props: ErrorBarProps): JSX.Element => {\n  const localeStrings = useLocale().strings.errorBar;\n  const strings = props.strings ?? localeStrings;\n\n  const trackDismissedErrorsInternally = !props.onDismissError;\n\n  // Timestamp for when this comopnent is first mounted.\n  // Never updated through the lifecycle of this component.\n  const mountTimestamp = useRef(new Date(Date.now()));\n\n  const [dismissedErrors, setDismissedErrors] = useState<DismissedError[]>([]);\n\n  // dropDismissalsForInactiveErrors only returns a new object if `dismissedErrors` actually changes.\n  // Without this behaviour, this `useEffect` block would cause a render loop.\n  useEffect(() => {\n    trackDismissedErrorsInternally &&\n      setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors));\n  }, [props.activeErrorMessages, dismissedErrors, trackDismissedErrorsInternally]);\n\n  const toShow = errorsToShow(\n    props.activeErrorMessages,\n    dismissedErrors,\n    props.ignorePremountErrors ? mountTimestamp.current : undefined\n  );\n\n  return (\n    <Stack data-ui-id=\"notifications-stack\">\n      {toShow.map((error) => (\n        <MessageBar\n          {...props}\n          styles={{\n            innerText: {\n              alignSelf: 'center'\n            },\n            icon: {\n              height: 0\n            },\n            content: {\n              lineHeight: 'inherit'\n            },\n            dismissal: {\n              height: 0,\n              paddingTop: '0.8rem'\n            }\n          }}\n          key={error.type}\n          messageBarType={messageBarType(error.type)}\n          messageBarIconProps={messageBarIconProps(error.type)}\n          onDismiss={() =>\n            trackDismissedErrorsInternally\n              ? setDismissedErrors(dismissError(dismissedErrors, error))\n              : props.onDismissError?.(error)\n          }\n          dismissButtonAriaLabel={`${strings[error.type]}, ${strings.dismissButtonAriaLabel}`}\n          dismissIconProps={{ iconName: 'ErrorBarClear' }}\n        >\n          {strings[error.type]}\n        </MessageBar>\n      ))}\n    </Stack>\n  );\n};\n"]}

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

@@ -18,6 +18,22 @@ export interface NotificationsProps {
      * @defaultValue 2
      */
     maxNotificationsToShow?: number;
+    /**
+     * Callback called when the dismiss button is triggered.
+     * Use this to control notifications shown when they dismissed by the user.
+     * Note this onDismiss function will affect all notifications in the same stack
+     */
+    onDismissNotification?: (dismissedNotifications: ActiveNotification) => void;
+    /**
+     * If set, notifications with {@link ActiveNotification.timestamp} older than the time this component is mounted
+     * are not shown.
+     *
+     * This is useful when using the {@link Notifications} with a stateful client that handles more than one call
+     * or chat thread. Set this prop to ignore notifications from previous call or chat.
+     *
+     * @defaultValue false
+     */
+    ignorePremountNotifications?: boolean;
 }
 /**
  * All strings that may be shown on the UI in the {@link Notifications}.
@@ -25,34 +41,6 @@ export interface NotificationsProps {
  * @beta
  */
 export interface NotificationsStrings {
-    /**
-     * Unable to reach Chat service.
-     *
-     * This can mean:
-     *   - Incorrect Azure Communication Services endpoint was provided.
-     *   - User's network connection is down.
-     */
-    unableToReachChatService: NotificationBarStrings;
-    /**
-     * User does not have access to the Chat service.
-     * This usually means that either the Azure Communication Services endpiont or the token provided are incorrect.
-     */
-    accessDenied: NotificationBarStrings;
-    /**
-     * User is no longer on the thread.
-     *
-     * See also: {@link NotificationsStrings.sendMessageNotInChatThread} for a more specific error.
-     */
-    userNotInChatThread: NotificationBarStrings;
-    /**
-     * Sending message failed because user is no longer on the thread.
-     */
-    sendMessageNotInChatThread: NotificationBarStrings;
-    /**
-     * A generic message when sending message fails.
-     * Prefer more specific error strings when possible.
-     */
-    sendMessageGeneric: NotificationBarStrings;
     /**
      * A generic message when starting video fails.
      */
@@ -201,6 +189,13 @@ export interface ActiveNotification {
      * If set, notification will automatically dismiss after 5 seconds
      */
     autoDismiss?: boolean;
+    /**
+     * The latest timestamp when this notification was observed.
+     *
+     * When available, this is used to track notifications that have already been seen and dismissed
+     * by the user.
+     */
+    timestamp?: Date;
 }
 /**
  * A component to show notifications on the UI.

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

@@ -1,10 +1,10 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Stack } from '@fluentui/react';
 /* @conditional-compile-remove(notifications) */
 import { useLocale } from '../localization';
-import { NotificationIconProps } from './utils';
+import { NotificationIconProps, dismissNotification, dropDismissalsForInactiveNotifications, notificationsToShow } from './utils';
 import { NotificationBar } from './NotificationBar';
 /**
  * A component to show notifications on the UI.
@@ -25,18 +25,28 @@ export const Notifications = (props) => {
     const localeStrings = useLocale().strings.notifications;
     const strings = (_a = props.strings) !== null && _a !== void 0 ? _a : localeStrings;
     const maxNotificationsToShow = (_b = props.maxNotificationsToShow) !== null && _b !== void 0 ? _b : 2;
-    const [activeNotifications, setActiveNotifications] = useState(props.activeNotifications);
+    const trackDismissedNotificationsInternally = !props.onDismissNotification;
+    // Timestamp for when this comopnent is first mounted.
+    // Never updated through the lifecycle of this component.
+    const mountTimestamp = useRef(new Date(Date.now()));
+    const [dismissedNotifications, setDismissedNotifications] = useState([]);
+    // dropDismissalsForInactiveNotifications only returns a new object if `dismissedErrors` actually changes.
+    // Without this behaviour, this `useEffect` block would cause a render loop.
     useEffect(() => {
-        setActiveNotifications(props.activeNotifications);
-    }, [props.activeNotifications]);
+        trackDismissedNotificationsInternally &&
+            setDismissedNotifications(dropDismissalsForInactiveNotifications(props.activeNotifications, dismissedNotifications));
+    }, [props.activeNotifications, dismissedNotifications, trackDismissedNotificationsInternally]);
+    const activeNotifications = notificationsToShow(props.activeNotifications, dismissedNotifications, props.ignorePremountNotifications ? mountTimestamp.current : undefined);
     return (React.createElement(Stack, { "data-ui-id": "notifications-stack", style: {
             width: 'fit-content'
         } }, activeNotifications.map((notification, index) => {
         if (index < maxNotificationsToShow) {
             return (React.createElement("div", { key: index, style: { marginBottom: `${index === maxNotificationsToShow - 1 ? 0 : '0.25rem'}` } },
                 React.createElement(NotificationBar, { notificationBarStrings: strings ? strings[notification.type] : undefined, notificationBarIconProps: NotificationIconProps(notification.type), onClickPrimaryButton: () => { var _a; return (_a = notification.onClickPrimaryButton) === null || _a === void 0 ? void 0 : _a.call(notification); }, onClickSecondaryButton: () => { var _a; return (_a = notification.onClickSecondaryButton) === null || _a === void 0 ? void 0 : _a.call(notification); }, onDismiss: () => {
-                        activeNotifications.splice(index, 1);
-                        setActiveNotifications([...activeNotifications]);
+                        var _a;
+                        trackDismissedNotificationsInternally
+                            ? setDismissedNotifications(dismissNotification(dismissedNotifications, notification))
+                            : (_a = props.onDismissNotification) === null || _a === void 0 ? void 0 : _a.call(props, notification);
                         notification.onDismiss && notification.onDismiss();
                     }, showStackedEffect: index === maxNotificationsToShow - 1 && activeNotifications.length > maxNotificationsToShow, autoDismiss: notification.autoDismiss })));
         }