@azure/communication-react 1.11.1-alpha-202401090013 → 1.11.1-alpha-202401100012

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/dist/communication-react.d.ts +32 -7
  2. package/dist/dist-cjs/communication-react/index.js +19 -46
  3. package/dist/dist-cjs/communication-react/index.js.map +1 -1
  4. package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js +1 -1
  5. package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map +1 -1
  6. package/dist/dist-esm/chat-stateful-client/src/index.d.ts +2 -1
  7. package/dist/dist-esm/chat-stateful-client/src/index.js +1 -0
  8. package/dist/dist-esm/chat-stateful-client/src/index.js.map +1 -1
  9. package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageContent.js.map +1 -1
  10. package/dist/dist-esm/react-components/src/components/Dialpad/Dialpad.d.ts +32 -7
  11. package/dist/dist-esm/react-components/src/components/Dialpad/Dialpad.js +11 -31
  12. package/dist/dist-esm/react-components/src/components/Dialpad/Dialpad.js.map +1 -1
  13. package/dist/dist-esm/react-components/src/components/FileDownloadCards.js.map +1 -1
  14. package/dist/dist-esm/react-components/src/components/styles/v8StyleShim.d.ts +2 -2
  15. package/dist/dist-esm/react-components/src/components/styles/v8StyleShim.js.map +1 -1
  16. package/dist/dist-esm/react-components/src/theming/generateTheme.js +5 -1
  17. package/dist/dist-esm/react-components/src/theming/generateTheme.js.map +1 -1
  18. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/ChatButton/NotificationIcon.js +1 -1
  19. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/ChatButton/NotificationIcon.js.map +1 -1
  20. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/ChatButton/useUnreadMessagesTracker.js.map +1 -1
  21. package/dist/dist-esm/react-composites/src/composites/ChatComposite/ChatScreen.js.map +1 -1
  22. package/dist/dist-esm/react-composites/src/composites/ChatComposite/adapter/AzureCommunicationChatAdapter.js +7 -16
  23. package/dist/dist-esm/react-composites/src/composites/ChatComposite/adapter/AzureCommunicationChatAdapter.js.map +1 -1
  24. package/dist/dist-esm/react-composites/src/composites/common/BaseComposite.js.map +1 -1
  25. package/package.json +2 -2
package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js CHANGED
@@ -2,5 +2,5 @@
2
2
  // Copyright (c) Microsoft Corporation.
3
3
  // Licensed under the MIT License.
4
4
  // GENERATED FILE. DO NOT EDIT MANUALLY.
5
- module.exports = '1.11.1-alpha-202401090013';
5
+ module.exports = '1.11.1-alpha-202401100012';
6
6
  //# sourceMappingURL=telemetryVersion.js.map
package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.11.1-alpha-202401090013';\n"]}
1
+ {"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.11.1-alpha-202401100012';\n"]}
package/dist/dist-esm/chat-stateful-client/src/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  export { createStatefulChatClient, _createStatefulChatClientInner, _createStatefulChatClientWithDeps } from './StatefulChatClient';
2
2
  export type { StatefulChatClient, StatefulChatClientArgs, StatefulChatClientOptions } from './StatefulChatClient';
3
3
  export type { ChatMessageWithStatus } from './types/ChatMessageWithStatus';
4
- export type { ChatClientState, ChatError, ChatErrors, ChatThreadClientState, ChatThreadProperties, ChatErrorTarget } from './ChatClientState';
4
+ export { ChatError } from './ChatClientState';
5
+ export type { ChatClientState, ChatErrors, ChatThreadClientState, ChatThreadProperties, ChatErrorTarget } from './ChatClientState';
5
6
  //# sourceMappingURL=index.d.ts.map
package/dist/dist-esm/chat-stateful-client/src/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  // Copyright (c) Microsoft Corporation.
2
2
  // Licensed under the MIT License.
3
3
  export { createStatefulChatClient, _createStatefulChatClientInner, _createStatefulChatClientWithDeps } from './StatefulChatClient';
4
+ export { ChatError } from './ChatClientState';
4
5
  //# sourceMappingURL=index.js.map
package/dist/dist-esm/chat-stateful-client/src/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../chat-stateful-client/src/index.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EACL,wBAAwB,EACxB,8BAA8B,EAC9B,iCAAiC,EAClC,MAAM,sBAAsB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nexport {\n createStatefulChatClient,\n _createStatefulChatClientInner,\n _createStatefulChatClientWithDeps\n} from './StatefulChatClient';\n\nexport type { StatefulChatClient, StatefulChatClientArgs, StatefulChatClientOptions } from './StatefulChatClient';\nexport type { ChatMessageWithStatus } from './types/ChatMessageWithStatus';\nexport type {\n ChatClientState,\n ChatError,\n ChatErrors,\n ChatThreadClientState,\n ChatThreadProperties,\n ChatErrorTarget\n} from './ChatClientState';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../chat-stateful-client/src/index.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EACL,wBAAwB,EACxB,8BAA8B,EAC9B,iCAAiC,EAClC,MAAM,sBAAsB,CAAC;AAI9B,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nexport {\n createStatefulChatClient,\n _createStatefulChatClientInner,\n _createStatefulChatClientWithDeps\n} from './StatefulChatClient';\n\nexport type { StatefulChatClient, StatefulChatClientArgs, StatefulChatClientOptions } from './StatefulChatClient';\nexport type { ChatMessageWithStatus } from './types/ChatMessageWithStatus';\nexport { ChatError } from './ChatClientState';\nexport type {\n ChatClientState,\n ChatErrors,\n ChatThreadClientState,\n ChatThreadProperties,\n ChatErrorTarget\n} from './ChatClientState';\n"]}
package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageContent.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ChatMessageContent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageContent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { useEffect } from 'react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { Parser, ProcessNodeDefinitions, IsValidNodeDefinitions, ProcessingInstructionType } from 'html-to-react';\n\nimport Linkify from 'react-linkify';\nimport { ChatMessage } from '../../types/ChatMessage';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../types/ChatMessage';\nimport { Link } from '@fluentui/react';\n/* @conditional-compile-remove(mention) */\nimport { MentionDisplayOptions, Mention } from '../MentionPopover';\n\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { FontIcon, Stack } from '@fluentui/react';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { AttachmentMetadata, InlineImageMetadata } from '../FileDownloadCards';\nimport LiveMessage from '../Announcer/LiveMessage';\n/* @conditional-compile-remove(mention) */\nimport { defaultOnMentionRender } from './MentionRenderer';\nimport DOMPurify from 'dompurify';\n\ntype ChatMessageContentProps = {\n message: ChatMessage;\n strings: MessageThreadStrings;\n /* @conditional-compile-remove(mention) */\n mentionDisplayOptions?: MentionDisplayOptions;\n attachmentsMap?: Record<string, string>;\n onFetchAttachments?: (attachments: AttachmentMetadata[], messageId: string) => Promise<void>;\n onInlineImageClicked?: (attachmentId: string) => void;\n};\n\n/* @conditional-compile-remove(data-loss-prevention) */\ntype BlockedMessageContentProps = {\n message: BlockedMessage;\n strings: MessageThreadStrings;\n};\n\ntype MessageContentWithLiveAriaProps = {\n message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;\n liveMessage: string;\n ariaLabel?: string;\n content: JSX.Element;\n};\n\n/** @private */\nexport const ChatMessageContent = (props: ChatMessageContentProps): JSX.Element => {\n switch (props.message.contentType) {\n case 'text':\n return MessageContentAsText(props);\n case 'html':\n return MessageContentAsRichTextHTML(props);\n case 'richtext/html':\n return MessageContentAsRichTextHTML(props);\n default:\n console.warn('unknown message content type');\n return <></>;\n }\n};\n\nconst MessageContentWithLiveAria = (props: MessageContentWithLiveAriaProps): JSX.Element => {\n return (\n <div data-ui-status={props.message.status} role=\"text\" aria-label={props.ariaLabel}>\n <LiveMessage message={props.liveMessage} ariaLive=\"polite\" />\n {props.content}\n </div>\n );\n};\n\nconst MessageContentAsRichTextHTML = (props: ChatMessageContentProps): JSX.Element => {\n const { message, attachmentsMap, onFetchAttachments } = props;\n useEffect(() => {\n if (!attachmentsMap || !onFetchAttachments) {\n return;\n }\n const attachments = message.inlineImages?.filter((inlinedImages) => {\n return attachmentsMap[inlinedImages.id] === undefined;\n });\n if (attachments && attachments.length > 0) {\n onFetchAttachments(attachments, message.messageId);\n }\n }, [message.inlineImages, message.messageId, onFetchAttachments, attachmentsMap]);\n\n return (\n <MessageContentWithLiveAria\n message={props.message}\n liveMessage={generateLiveMessage(props)}\n ariaLabel={messageContentAriaText(props)}\n content={processHtmlToReact(props)}\n />\n );\n};\n\nconst MessageContentAsText = (props: ChatMessageContentProps): JSX.Element => {\n return (\n <MessageContentWithLiveAria\n message={props.message}\n liveMessage={generateLiveMessage(props)}\n ariaLabel={messageContentAriaText(props)}\n content={\n <Linkify\n componentDecorator={(decoratedHref: string, decoratedText: string, key: number) => {\n return (\n <Link target=\"_blank\" href={decoratedHref} key={key}>\n {decoratedText}\n </Link>\n );\n }}\n >\n {props.message.content}\n </Linkify>\n }\n />\n );\n};\n\n/* @conditional-compile-remove(data-loss-prevention) */\n/**\n * @private\n */\nexport const BlockedMessageContent = (props: BlockedMessageContentProps): JSX.Element => {\n const Icon: JSX.Element = <FontIcon iconName={'DataLossPreventionProhibited'} />;\n const blockedMessage =\n props.message.warningText === undefined ? props.strings.blockedWarningText : props.message.warningText;\n const blockedMessageLink = props.message.link;\n const blockedMessageLinkText = blockedMessageLink\n ? props.message.linkText ?? props.strings.blockedWarningLinkText\n : '';\n\n const liveAuthor =\n props.message.mine || props.message.senderDisplayName === undefined ? '' : props.message.senderDisplayName;\n const liveBlockedWarningText = `${liveAuthor} ${blockedMessage} ${blockedMessageLinkText}`;\n return (\n <MessageContentWithLiveAria\n message={props.message}\n liveMessage={liveBlockedWarningText}\n ariaLabel={liveBlockedWarningText}\n content={\n <Stack horizontal wrap>\n {Icon}\n {blockedMessage && <p>{blockedMessage}</p>}\n {blockedMessageLink && (\n <Link target={'_blank'} href={blockedMessageLink}>\n {blockedMessageLinkText}\n </Link>\n )}\n </Stack>\n }\n />\n );\n};\n\n// https://stackoverflow.com/questions/28899298/extract-the-text-out-of-html-string-using-javascript\nconst extractContent = (s: string): string => {\n const span = document.createElement('span');\n span.innerHTML = s;\n return span.textContent || span.innerText;\n};\n\nconst generateLiveMessage = (props: ChatMessageContentProps): string => {\n const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });\n\n return `${props.message.editedOn ? props.strings.editedTag : ''} ${\n props.message.mine ? '' : liveAuthor\n } ${extractContent(props.message.content || '')} `;\n};\n\nconst messageContentAriaText = (props: ChatMessageContentProps): string | undefined => {\n // Strip all html tags from the content for aria.\n\n return props.message.content\n ? props.message.mine\n ? _formatString(props.strings.messageContentMineAriaText, {\n message: DOMPurify.sanitize(props.message.content, { ALLOWED_TAGS: [] })\n })\n : _formatString(props.strings.messageContentAriaText, {\n author: `${props.message.senderDisplayName}`,\n message: DOMPurify.sanitize(props.message.content, { ALLOWED_TAGS: [] })\n })\n : undefined;\n};\n\nconst processNodeDefinitions = ProcessNodeDefinitions();\nconst htmlToReactParser = Parser();\n\nconst processInlineImage = (props: ChatMessageContentProps): ProcessingInstructionType => ({\n // Custom <img> processing\n shouldProcessNode: (node): boolean => {\n function matchingImageNode(imageMetadata: InlineImageMetadata): boolean {\n return imageMetadata.id === node.attribs.id;\n }\n\n // Process img node with id in attachments list\n return (\n node.name &&\n node.name === 'img' &&\n node.attribs &&\n node.attribs.id &&\n props.message.inlineImages?.find(matchingImageNode)\n );\n },\n processNode: (node, children, index): JSX.Element => {\n node.attribs = { ...node.attribs, 'aria-label': node.attribs.name };\n // logic to check id in map/list\n if (props.attachmentsMap && node.attribs.id in props.attachmentsMap) {\n node.attribs = { ...node.attribs, src: props.attachmentsMap[node.attribs.id] };\n }\n const handleOnClick = (): void => {\n props.onInlineImageClicked && props.onInlineImageClicked(node.attribs.id);\n };\n\n return (\n <span\n data-ui-id={node.attribs.id}\n onClick={handleOnClick}\n tabIndex={0}\n role=\"button\"\n style={{\n cursor: 'pointer'\n }}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n handleOnClick();\n }\n }}\n >\n {processNodeDefinitions.processDefaultNode(node, children, index)}\n </span>\n );\n return processNodeDefinitions.processDefaultNode(node, children, index);\n }\n});\n\n/* @conditional-compile-remove(mention) */\nconst processMention = (props: ChatMessageContentProps): ProcessingInstructionType => ({\n shouldProcessNode: (node) => {\n if (props.mentionDisplayOptions?.onRenderMention) {\n // Override the handling of the <msft-mention> tag in the HTML if there's a custom renderer\n return node.name === 'msft-mention';\n }\n return false;\n },\n processNode: (node) => {\n if (props.mentionDisplayOptions?.onRenderMention) {\n const { id } = node.attribs;\n const mention: Mention = {\n id: id,\n displayText: node.children[0]?.data ?? ''\n };\n return props.mentionDisplayOptions.onRenderMention(mention, defaultOnMentionRender);\n }\n return processNodeDefinitions.processDefaultNode;\n }\n});\n\nconst processHtmlToReact = (props: ChatMessageContentProps): JSX.Element => {\n const steps: ProcessingInstructionType[] = [\n processInlineImage(props),\n /* @conditional-compile-remove(mention) */\n processMention(props),\n {\n // Process everything else in the default way\n shouldProcessNode: IsValidNodeDefinitions.alwaysValid,\n processNode: processNodeDefinitions.processDefaultNode\n }\n ];\n\n return htmlToReactParser.parseWithInstructions(\n props.message.content ?? '',\n IsValidNodeDefinitions.alwaysValid,\n steps\n );\n};\n"]}
1
+ {"version":3,"file":"ChatMessageContent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageContent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { useEffect } from 'react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { Parser, ProcessNodeDefinitions, IsValidNodeDefinitions } from 'html-to-react';\n\nimport Linkify from 'react-linkify';\nimport { ChatMessage } from '../../types/ChatMessage';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../types/ChatMessage';\nimport { Link } from '@fluentui/react';\n/* @conditional-compile-remove(mention) */\nimport { MentionDisplayOptions, Mention } from '../MentionPopover';\n\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { FontIcon, Stack } from '@fluentui/react';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { AttachmentMetadata, InlineImageMetadata } from '../FileDownloadCards';\nimport LiveMessage from '../Announcer/LiveMessage';\n/* @conditional-compile-remove(mention) */\nimport { defaultOnMentionRender } from './MentionRenderer';\nimport DOMPurify from 'dompurify';\n\ntype ChatMessageContentProps = {\n message: ChatMessage;\n strings: MessageThreadStrings;\n /* @conditional-compile-remove(mention) */\n mentionDisplayOptions?: MentionDisplayOptions;\n attachmentsMap?: Record<string, string>;\n onFetchAttachments?: (attachments: AttachmentMetadata[], messageId: string) => Promise<void>;\n onInlineImageClicked?: (attachmentId: string) => void;\n};\n\n/* @conditional-compile-remove(data-loss-prevention) */\ntype BlockedMessageContentProps = {\n message: BlockedMessage;\n strings: MessageThreadStrings;\n};\n\n// Missing from html-to-react.\ntype ProcessingInstructionType = {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n shouldProcessNode: (node: any) => boolean;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n processNode: (node: any, children: any, index: number) => unknown;\n};\n\ntype MessageContentWithLiveAriaProps = {\n message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;\n liveMessage: string;\n ariaLabel?: string;\n content: JSX.Element;\n};\n\n/** @private */\nexport const ChatMessageContent = (props: ChatMessageContentProps): JSX.Element => {\n switch (props.message.contentType) {\n case 'text':\n return MessageContentAsText(props);\n case 'html':\n return MessageContentAsRichTextHTML(props);\n case 'richtext/html':\n return MessageContentAsRichTextHTML(props);\n default:\n console.warn('unknown message content type');\n return <></>;\n }\n};\n\nconst MessageContentWithLiveAria = (props: MessageContentWithLiveAriaProps): JSX.Element => {\n return (\n <div data-ui-status={props.message.status} role=\"text\" aria-label={props.ariaLabel}>\n <LiveMessage message={props.liveMessage} ariaLive=\"polite\" />\n {props.content}\n </div>\n );\n};\n\nconst MessageContentAsRichTextHTML = (props: ChatMessageContentProps): JSX.Element => {\n const { message, attachmentsMap, onFetchAttachments } = props;\n useEffect(() => {\n if (!attachmentsMap || !onFetchAttachments) {\n return;\n }\n const attachments = message.inlineImages?.filter((inlinedImages) => {\n return attachmentsMap[inlinedImages.id] === undefined;\n });\n if (attachments && attachments.length > 0) {\n onFetchAttachments(attachments, message.messageId);\n }\n }, [message.inlineImages, message.messageId, onFetchAttachments, attachmentsMap]);\n\n return (\n <MessageContentWithLiveAria\n message={props.message}\n liveMessage={generateLiveMessage(props)}\n ariaLabel={messageContentAriaText(props)}\n content={processHtmlToReact(props)}\n />\n );\n};\n\nconst MessageContentAsText = (props: ChatMessageContentProps): JSX.Element => {\n return (\n <MessageContentWithLiveAria\n message={props.message}\n liveMessage={generateLiveMessage(props)}\n ariaLabel={messageContentAriaText(props)}\n content={\n <Linkify\n componentDecorator={(decoratedHref: string, decoratedText: string, key: number) => {\n return (\n <Link target=\"_blank\" href={decoratedHref} key={key}>\n {decoratedText}\n </Link>\n );\n }}\n >\n {props.message.content}\n </Linkify>\n }\n />\n );\n};\n\n/* @conditional-compile-remove(data-loss-prevention) */\n/**\n * @private\n */\nexport const BlockedMessageContent = (props: BlockedMessageContentProps): JSX.Element => {\n const Icon: JSX.Element = <FontIcon iconName={'DataLossPreventionProhibited'} />;\n const blockedMessage =\n props.message.warningText === undefined ? props.strings.blockedWarningText : props.message.warningText;\n const blockedMessageLink = props.message.link;\n const blockedMessageLinkText = blockedMessageLink\n ? props.message.linkText ?? props.strings.blockedWarningLinkText\n : '';\n\n const liveAuthor =\n props.message.mine || props.message.senderDisplayName === undefined ? '' : props.message.senderDisplayName;\n const liveBlockedWarningText = `${liveAuthor} ${blockedMessage} ${blockedMessageLinkText}`;\n return (\n <MessageContentWithLiveAria\n message={props.message}\n liveMessage={liveBlockedWarningText}\n ariaLabel={liveBlockedWarningText}\n content={\n <Stack horizontal wrap>\n {Icon}\n {blockedMessage && <p>{blockedMessage}</p>}\n {blockedMessageLink && (\n <Link target={'_blank'} href={blockedMessageLink}>\n {blockedMessageLinkText}\n </Link>\n )}\n </Stack>\n }\n />\n );\n};\n\n// https://stackoverflow.com/questions/28899298/extract-the-text-out-of-html-string-using-javascript\nconst extractContent = (s: string): string => {\n const span = document.createElement('span');\n span.innerHTML = s;\n return span.textContent || span.innerText;\n};\n\nconst generateLiveMessage = (props: ChatMessageContentProps): string => {\n const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });\n\n return `${props.message.editedOn ? props.strings.editedTag : ''} ${\n props.message.mine ? '' : liveAuthor\n } ${extractContent(props.message.content || '')} `;\n};\n\nconst messageContentAriaText = (props: ChatMessageContentProps): string | undefined => {\n // Strip all html tags from the content for aria.\n\n return props.message.content\n ? props.message.mine\n ? _formatString(props.strings.messageContentMineAriaText, {\n message: DOMPurify.sanitize(props.message.content, { ALLOWED_TAGS: [] })\n })\n : _formatString(props.strings.messageContentAriaText, {\n author: `${props.message.senderDisplayName}`,\n message: DOMPurify.sanitize(props.message.content, { ALLOWED_TAGS: [] })\n })\n : undefined;\n};\n\nconst processNodeDefinitions = ProcessNodeDefinitions();\nconst htmlToReactParser = Parser();\n\nconst processInlineImage = (props: ChatMessageContentProps): ProcessingInstructionType => ({\n // Custom <img> processing\n shouldProcessNode: (node): boolean => {\n function matchingImageNode(imageMetadata: InlineImageMetadata): boolean {\n return imageMetadata.id === node.attribs.id;\n }\n\n // Process img node with id in attachments list\n return (\n node.name &&\n node.name === 'img' &&\n node.attribs &&\n node.attribs.id &&\n props.message.inlineImages?.find(matchingImageNode)\n );\n },\n processNode: (node, children, index): JSX.Element => {\n node.attribs = { ...node.attribs, 'aria-label': node.attribs.name };\n // logic to check id in map/list\n if (props.attachmentsMap && node.attribs.id in props.attachmentsMap) {\n node.attribs = { ...node.attribs, src: props.attachmentsMap[node.attribs.id] };\n }\n const handleOnClick = (): void => {\n props.onInlineImageClicked && props.onInlineImageClicked(node.attribs.id);\n };\n\n return (\n <span\n data-ui-id={node.attribs.id}\n onClick={handleOnClick}\n tabIndex={0}\n role=\"button\"\n style={{\n cursor: 'pointer'\n }}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n handleOnClick();\n }\n }}\n >\n {processNodeDefinitions.processDefaultNode(node, children, index)}\n </span>\n );\n return processNodeDefinitions.processDefaultNode(node, children, index);\n }\n});\n\n/* @conditional-compile-remove(mention) */\nconst processMention = (props: ChatMessageContentProps): ProcessingInstructionType => ({\n shouldProcessNode: (node) => {\n if (props.mentionDisplayOptions?.onRenderMention) {\n // Override the handling of the <msft-mention> tag in the HTML if there's a custom renderer\n return node.name === 'msft-mention';\n }\n return false;\n },\n processNode: (node) => {\n if (props.mentionDisplayOptions?.onRenderMention) {\n const { id } = node.attribs;\n const mention: Mention = {\n id: id,\n displayText: node.children[0]?.data ?? ''\n };\n return props.mentionDisplayOptions.onRenderMention(mention, defaultOnMentionRender);\n }\n return processNodeDefinitions.processDefaultNode;\n }\n});\n\nconst processHtmlToReact = (props: ChatMessageContentProps): JSX.Element => {\n const steps: ProcessingInstructionType[] = [\n processInlineImage(props),\n /* @conditional-compile-remove(mention) */\n processMention(props),\n {\n // Process everything else in the default way\n shouldProcessNode: IsValidNodeDefinitions.alwaysValid,\n processNode: processNodeDefinitions.processDefaultNode\n }\n ];\n\n return htmlToReactParser.parseWithInstructions(\n props.message.content ?? '',\n IsValidNodeDefinitions.alwaysValid,\n steps\n );\n};\n"]}
package/dist/dist-esm/react-components/src/components/Dialpad/Dialpad.d.ts CHANGED
@@ -35,21 +35,46 @@ export type DtmfTone = 'A' | 'B' | 'C' | 'D' | 'Flash' | 'Num0' | 'Num1' | 'Num2
35
35
  */
36
36
  export interface DialpadProps {
37
37
  strings?: DialpadStrings;
38
- /** function to send dtmf tones on button click */
38
+ /**
39
+ * function to send dtmf tones on button click
40
+ */
39
41
  onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;
40
- /** Callback for dialpad button behavior*/
42
+ /**
43
+ * Callback for dialpad button behavior
44
+ */
41
45
  onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;
42
- /** set dialpad textfield content */
46
+ /**
47
+ * set dialpad textfield content
48
+ */
43
49
  textFieldValue?: string;
44
- /** on change function for text field, provides an unformatted plain text*/
50
+ /**
51
+ * on change function for text field, provides an unformatted plain text
52
+ */
45
53
  onChange?: (input: string) => void;
46
- /** boolean input to determine when to show/hide delete button, default true */
54
+ /**
55
+ * flag to determine when to show/hide delete button, default true
56
+ */
47
57
  showDeleteButton?: boolean;
48
- /** boolean input to determine if dialpad is in mobile view, default false */
58
+ /**
59
+ * flag to determine if dialpad is in mobile view, default false
60
+ */
49
61
  isMobile?: boolean;
62
+ /**
63
+ * Styles for customizing the dialpad component
64
+ */
50
65
  styles?: DialpadStyles;
51
- /** Disables DTMF sounds when dialpad buttons are pressed. the actual tones are still sent to the call. */
66
+ /**
67
+ * Disables DTMF sounds when dialpad buttons are pressed. the actual
68
+ * tones are still sent to the call.
69
+ */
52
70
  disableDtmfPlayback?: boolean;
71
+ /**
72
+ * Enable the ability to edit the number in the text box.
73
+ * This mode is for when dailing someone to call to that the user can edit the number before calling if needed.
74
+ * @default false
75
+ *
76
+ */
77
+ enableInputEditing?: boolean;
53
78
  }
54
79
  /**
55
80
  * A component to allow users to enter phone number through clicking on dialpad/using keyboard
package/dist/dist-esm/react-components/src/components/Dialpad/Dialpad.js CHANGED
@@ -10,7 +10,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
10
10
  });
11
11
  };
12
12
  import React, { useEffect } from 'react';
13
- /* @conditional-compile-remove(dtmf-dialer) */
14
13
  import { useRef } from 'react';
15
14
  import { IconButton } from '@fluentui/react';
16
15
  import { concatStyleSets, DefaultButton, FocusZone, mergeStyles, Stack, Text, TextField, useTheme } from '@fluentui/react';
@@ -20,7 +19,6 @@ import { useLocale } from '../../localization';
20
19
  import { buttonStyles, containerStyles, iconButtonStyles, digitStyles, letterStyles, textFieldStyles } from '../styles/Dialpad.styles';
21
20
  import { formatPhoneNumber } from '../utils/formatPhoneNumber';
22
21
  import useLongPress from '../utils/useLongPress';
23
- /* @conditional-compile-remove(dtmf-dialer) */
24
22
  import { dtmfFrequencies, Tone } from './DTMFToneGenerator';
25
23
  const dialPadButtonsDefault = [
26
24
  [{ digit: '1' }, { digit: '2', letter: 'ABC' }, { digit: '3', letter: 'DEF' }],
@@ -53,12 +51,8 @@ const DtmfTones = [
53
51
  const DialpadButton = (props) => {
54
52
  var _a, _b, _c, _d;
55
53
  const theme = useTheme();
56
- const { digit, index, onClick, onLongPress, isMobile = false,
57
- /* @conditional-compile-remove(dtmf-dialer) */ dtmfToneAudioContext,
58
- /* @conditional-compile-remove(dtmf-dialer) */ disableDtmfPlayback } = props;
59
- /* @conditional-compile-remove(dtmf-dialer) */
54
+ const { digit, index, onClick, onLongPress, isMobile = false, dtmfToneAudioContext, disableDtmfPlayback } = props;
60
55
  const [buttonPressed, setButtonPressed] = useState(false);
61
- /* @conditional-compile-remove(dtmf-dialer) */
62
56
  const dtmfToneSound = useRef(new Tone(dtmfToneAudioContext, dtmfFrequencies[digit].f1, dtmfFrequencies[digit].f2));
63
57
  const useLongPressProps = React.useMemo(() => ({
64
58
  onClick: () => __awaiter(void 0, void 0, void 0, function* () {
@@ -71,7 +65,6 @@ const DialpadButton = (props) => {
71
65
  }), [digit, index, isMobile, onClick, onLongPress]);
72
66
  const longPressHandlers = useLongPress(useLongPressProps);
73
67
  return (React.createElement(DefaultButton, Object.assign({ "data-test-id": `dialpad-button-${props.index}`, styles: concatStyleSets(buttonStyles(theme), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.button) }, longPressHandlers, { onKeyDown: (e) => {
74
- /* @conditional-compile-remove(dtmf-dialer) */
75
68
  if ((e.key === 'Enter' || e.key === ' ') && !buttonPressed) {
76
69
  if (!disableDtmfPlayback) {
77
70
  dtmfToneSound.current.play();
@@ -82,7 +75,6 @@ const DialpadButton = (props) => {
82
75
  }
83
76
  longPressHandlers.onKeyDown();
84
77
  }, onKeyUp: (e) => {
85
- /* @conditional-compile-remove(dtmf-dialer) */
86
78
  if ((e.key === 'Enter' || e.key === ' ') && buttonPressed) {
87
79
  dtmfToneSound.current.stop();
88
80
  longPressHandlers.onKeyUp();
@@ -90,26 +82,21 @@ const DialpadButton = (props) => {
90
82
  }
91
83
  longPressHandlers.onKeyUp();
92
84
  }, onMouseDown: () => {
93
- /* @conditional-compile-remove(dtmf-dialer) */
94
85
  if (!disableDtmfPlayback) {
95
86
  dtmfToneSound.current.play();
96
87
  }
97
88
  longPressHandlers.onMouseDown();
98
89
  }, onMouseUp: () => {
99
- /* @conditional-compile-remove(dtmf-dialer) */
100
90
  dtmfToneSound.current.stop();
101
91
  longPressHandlers.onMouseUp();
102
92
  }, onMouseLeave: () => {
103
- /* @conditional-compile-remove(dtmf-dialer) */
104
93
  dtmfToneSound.current.stop();
105
94
  }, onTouchStart: () => {
106
- /* @conditional-compile-remove(dtmf-dialer) */
107
95
  if (!disableDtmfPlayback) {
108
96
  dtmfToneSound.current.play();
109
97
  }
110
98
  longPressHandlers.onTouchStart();
111
99
  }, onTouchEnd: () => {
112
- /* @conditional-compile-remove(dtmf-dialer) */
113
100
  dtmfToneSound.current.stop();
114
101
  longPressHandlers.onTouchEnd();
115
102
  } }),
@@ -120,9 +107,8 @@ const DialpadButton = (props) => {
120
107
  const DialpadContainer = (props) => {
121
108
  var _a, _b;
122
109
  const theme = useTheme();
123
- const { onSendDtmfTone, onClickDialpadButton, textFieldValue, onChange, showDeleteButton = true, isMobile = false } = props;
110
+ const { onSendDtmfTone, onClickDialpadButton, textFieldValue, onChange, showDeleteButton = true, isMobile = false, disableDtmfPlayback, enableInputEditing } = props;
124
111
  const [plainTextValue, setPlainTextValue] = useState(textFieldValue !== null && textFieldValue !== void 0 ? textFieldValue : '');
125
- /* @conditional-compile-remove(dtmf-dialer) */
126
112
  const dtmfToneAudioContext = useRef(new AudioContext());
127
113
  useEffect(() => {
128
114
  if (onChange) {
@@ -166,18 +152,16 @@ const DialpadContainer = (props) => {
166
152
  setText(modifiedInput);
167
153
  };
168
154
  return (React.createElement("div", { className: mergeStyles(containerStyles(theme), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root), "data-test-id": "dialpadContainer", "data-ui-id": "dialpadContainer" },
169
- React.createElement(TextField, { styles: concatStyleSets(textFieldStyles(theme), (_b = props.styles) === null || _b === void 0 ? void 0 : _b.textField), value: textFieldValue ? textFieldValue : formatPhoneNumber(plainTextValue),
155
+ React.createElement(TextField, { styles: concatStyleSets(textFieldStyles(theme), (_b = props.styles) === null || _b === void 0 ? void 0 : _b.textField), value: textFieldValue ? textFieldValue : enableInputEditing ? formatPhoneNumber(plainTextValue) : plainTextValue,
170
156
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
171
157
  onChange: (e) => {
172
- setText(e.target.value);
173
- },
174
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
175
- onClick: (e) => {
176
- const input = e.target;
177
- const end = input.value.length;
178
- // Move focus to end of input field
179
- input.setSelectionRange(end, end);
180
- input.focus();
158
+ if (enableInputEditing) {
159
+ setText(e.target.value);
160
+ }
161
+ }, onClick: (e) => {
162
+ if (!enableInputEditing) {
163
+ e.preventDefault();
164
+ }
181
165
  }, placeholder: props.strings.placeholderText, "data-test-id": "dialpad-input", onRenderSuffix: () => {
182
166
  var _a;
183
167
  return (React.createElement(React.Fragment, null, showDeleteButton && plainTextValue.length !== 0 && (React.createElement(IconButton, { ariaLabel: props.strings.deleteButtonAriaLabel, onClick: deleteNumbers, styles: concatStyleSets(iconButtonStyles(theme), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.deleteIcon), iconProps: { iconName: 'DialpadBackspace' } }))));
@@ -201,11 +185,7 @@ const DialpadContainer = (props) => {
201
185
  then use this index to locate the corresponding dtmf tones
202
186
  DtmfTones[index]
203
187
  */
204
- index: columnIndex + rowIndex * rows.length, digit: button.digit, letter: button.letter, styles: props.styles, onClick: onClickDialpad, onLongPress: onLongPressDialpad, isMobile: isMobile,
205
- /* @conditional-compile-remove(dtmf-dialer) */
206
- dtmfToneAudioContext: dtmfToneAudioContext.current,
207
- /* @conditional-compile-remove(dtmf-dialer) */
208
- disableDtmfPlayback: props.disableDtmfPlayback })))));
188
+ index: columnIndex + rowIndex * rows.length, digit: button.digit, letter: button.letter, styles: props.styles, onClick: onClickDialpad, onLongPress: onLongPressDialpad, isMobile: isMobile, dtmfToneAudioContext: dtmfToneAudioContext.current, disableDtmfPlayback: disableDtmfPlayback })))));
209
189
  }))));
210
190
  };
211
191
  /**
package/dist/dist-esm/react-components/src/components/Dialpad/Dialpad.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Dialpad.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Dialpad/Dialpad.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect } from 'react';\n/* @conditional-compile-remove(dtmf-dialer) */\nimport { useRef } from 'react';\nimport { IStyle, IButtonStyles, ITextFieldStyles } from '@fluentui/react';\n\nimport { IconButton } from '@fluentui/react';\nimport {\n concatStyleSets,\n DefaultButton,\n FocusZone,\n mergeStyles,\n Stack,\n Text,\n TextField,\n useTheme\n} from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useState } from 'react';\n/* @conditional-compile-remove(dialpad) */\nimport { useLocale } from '../../localization';\nimport {\n buttonStyles,\n containerStyles,\n iconButtonStyles,\n digitStyles,\n letterStyles,\n textFieldStyles\n} from '../styles/Dialpad.styles';\nimport { formatPhoneNumber } from '../utils/formatPhoneNumber';\nimport useLongPress from '../utils/useLongPress';\n/* @conditional-compile-remove(dtmf-dialer) */\nimport { dtmfFrequencies, Tone } from './DTMFToneGenerator';\n\n/**\n * Strings of {@link Dialpad} that can be overridden.\n *\n * @beta\n */\nexport interface DialpadStrings {\n placeholderText: string;\n deleteButtonAriaLabel?: string;\n}\n\n/**\n * Styles for {@link Dialpad} component.\n *\n * @beta\n */\nexport interface DialpadStyles {\n root?: IStyle;\n button?: IButtonStyles;\n textField?: Partial<ITextFieldStyles>;\n digit?: IStyle;\n letter?: IStyle;\n deleteIcon?: IButtonStyles;\n}\n\n/**\n * DTMF tone for PSTN calls.\n *\n * @beta\n */\nexport type DtmfTone =\n | 'A'\n | 'B'\n | 'C'\n | 'D'\n | 'Flash'\n | 'Num0'\n | 'Num1'\n | 'Num2'\n | 'Num3'\n | 'Num4'\n | 'Num5'\n | 'Num6'\n | 'Num7'\n | 'Num8'\n | 'Num9'\n | 'Pound'\n | 'Star';\n\n/**\n * Props for {@link Dialpad} component.\n *\n * @beta\n */\nexport interface DialpadProps {\n strings?: DialpadStrings;\n /** function to send dtmf tones on button click */\n onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n /** Callback for dialpad button behavior*/\n onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n /** set dialpad textfield content */\n textFieldValue?: string;\n /** on change function for text field, provides an unformatted plain text*/\n onChange?: (input: string) => void;\n /** boolean input to determine when to show/hide delete button, default true */\n showDeleteButton?: boolean;\n /** boolean input to determine if dialpad is in mobile view, default false */\n isMobile?: boolean;\n styles?: DialpadStyles;\n /* @conditional-compile-remove(dtmf-dialer) */\n /** Disables DTMF sounds when dialpad buttons are pressed. the actual tones are still sent to the call. */\n disableDtmfPlayback?: boolean;\n}\n\ntype DialpadButtonContent = {\n /** Number displayed on each dialpad button */\n digit: string;\n /** Letters displayed on each dialpad button */\n letter?: string;\n};\n\nconst dialPadButtonsDefault: DialpadButtonContent[][] = [\n [{ digit: '1' }, { digit: '2', letter: 'ABC' }, { digit: '3', letter: 'DEF' }],\n [\n { digit: '4', letter: 'GHI' },\n { digit: '5', letter: 'JKL' },\n { digit: '6', letter: 'MNO' }\n ],\n [\n { digit: '7', letter: 'PQRS' },\n { digit: '8', letter: 'TUV' },\n { digit: '9', letter: 'WXYZ' }\n ],\n [{ digit: '*' }, { digit: '0', letter: '+' }, { digit: '#' }]\n];\n\nconst DtmfTones: DtmfTone[] = [\n 'Num1',\n 'Num2',\n 'Num3',\n 'Num4',\n 'Num5',\n 'Num6',\n 'Num7',\n 'Num8',\n 'Num9',\n 'Star',\n 'Num0',\n 'Pound'\n];\n\nconst DialpadButton = (props: {\n digit: string;\n letter?: string;\n styles?: DialpadStyles;\n index: number;\n onClick: (input: string, index: number) => void;\n onLongPress: (input: string, index: number) => void;\n isMobile?: boolean;\n /* @conditional-compile-remove(dtmf-dialer) */\n dtmfToneAudioContext: AudioContext;\n /* @conditional-compile-remove(dtmf-dialer) */\n disableDtmfPlayback?: boolean;\n}): JSX.Element => {\n const theme = useTheme();\n\n const {\n digit,\n index,\n onClick,\n onLongPress,\n isMobile = false,\n /* @conditional-compile-remove(dtmf-dialer) */ dtmfToneAudioContext,\n /* @conditional-compile-remove(dtmf-dialer) */ disableDtmfPlayback\n } = props;\n /* @conditional-compile-remove(dtmf-dialer) */\n const [buttonPressed, setButtonPressed] = useState(false);\n\n /* @conditional-compile-remove(dtmf-dialer) */\n const dtmfToneSound = useRef<Tone>(\n new Tone(dtmfToneAudioContext, dtmfFrequencies[digit].f1, dtmfFrequencies[digit].f2)\n );\n\n const useLongPressProps = React.useMemo(\n () => ({\n onClick: async () => {\n onClick(digit, index);\n },\n onLongPress: async () => {\n onLongPress(digit, index);\n },\n touchEventsOnly: isMobile\n }),\n [digit, index, isMobile, onClick, onLongPress]\n );\n\n const longPressHandlers = useLongPress(useLongPressProps);\n\n return (\n <DefaultButton\n data-test-id={`dialpad-button-${props.index}`}\n styles={concatStyleSets(buttonStyles(theme), props.styles?.button)}\n {...longPressHandlers}\n onKeyDown={(e) => {\n /* @conditional-compile-remove(dtmf-dialer) */\n if ((e.key === 'Enter' || e.key === ' ') && !buttonPressed) {\n if (!disableDtmfPlayback) {\n dtmfToneSound.current.play();\n }\n longPressHandlers.onKeyDown();\n setButtonPressed(true);\n return;\n }\n longPressHandlers.onKeyDown();\n }}\n onKeyUp={(e) => {\n /* @conditional-compile-remove(dtmf-dialer) */\n if ((e.key === 'Enter' || e.key === ' ') && buttonPressed) {\n dtmfToneSound.current.stop();\n longPressHandlers.onKeyUp();\n setButtonPressed(false);\n }\n longPressHandlers.onKeyUp();\n }}\n onMouseDown={() => {\n /* @conditional-compile-remove(dtmf-dialer) */\n if (!disableDtmfPlayback) {\n dtmfToneSound.current.play();\n }\n longPressHandlers.onMouseDown();\n }}\n onMouseUp={() => {\n /* @conditional-compile-remove(dtmf-dialer) */\n dtmfToneSound.current.stop();\n longPressHandlers.onMouseUp();\n }}\n onMouseLeave={() => {\n /* @conditional-compile-remove(dtmf-dialer) */\n dtmfToneSound.current.stop();\n }}\n onTouchStart={() => {\n /* @conditional-compile-remove(dtmf-dialer) */\n if (!disableDtmfPlayback) {\n dtmfToneSound.current.play();\n }\n longPressHandlers.onTouchStart();\n }}\n onTouchEnd={() => {\n /* @conditional-compile-remove(dtmf-dialer) */\n dtmfToneSound.current.stop();\n longPressHandlers.onTouchEnd();\n }}\n >\n <Stack>\n <Text className={mergeStyles(digitStyles(theme), props.styles?.digit)}>{props.digit}</Text>\n\n <Text className={mergeStyles(letterStyles(theme), props.styles?.letter)}>{props.letter ?? ' '}</Text>\n </Stack>\n </DefaultButton>\n );\n};\n\nconst DialpadContainer = (props: {\n strings: DialpadStrings;\n onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n /** Callback for dialpad button behavior */\n onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n /** Pass in custom content to dialpad textfield */\n textFieldValue?: string;\n /** on change function for text field, provides an unformatted plain text */\n onChange?: (input: string) => void;\n /** boolean input to determine when to show/hide delete button, default true */\n showDeleteButton?: boolean;\n /** boolean input to determine if dialpad is in mobile view, default false */\n isMobile?: boolean;\n styles?: DialpadStyles;\n /* @conditional-compile-remove(dtmf-dialer) */\n disableDtmfPlayback?: boolean;\n}): JSX.Element => {\n const theme = useTheme();\n\n const {\n onSendDtmfTone,\n onClickDialpadButton,\n textFieldValue,\n onChange,\n showDeleteButton = true,\n isMobile = false\n } = props;\n\n const [plainTextValue, setPlainTextValue] = useState(textFieldValue ?? '');\n /* @conditional-compile-remove(dtmf-dialer) */\n const dtmfToneAudioContext = useRef(new AudioContext());\n\n useEffect(() => {\n if (onChange) {\n onChange(plainTextValue);\n }\n }, [plainTextValue, onChange]);\n\n useEffect(() => {\n setText(textFieldValue ?? '');\n }, [textFieldValue]);\n\n const onClickDialpad = (input: string, index: number): void => {\n setText(plainTextValue + input);\n if (onSendDtmfTone) {\n onSendDtmfTone(DtmfTones[index]);\n }\n if (onClickDialpadButton) {\n onClickDialpadButton(input, index);\n }\n };\n\n const onLongPressDialpad = (input: string, index: number): void => {\n if (input === '0' && index === 10) {\n setText(plainTextValue + '+');\n } else {\n setText(plainTextValue + input);\n }\n if (onSendDtmfTone) {\n onSendDtmfTone(DtmfTones[index]);\n }\n if (onClickDialpadButton) {\n onClickDialpadButton(input, index);\n }\n };\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const setText = (input: string): void => {\n // remove non-valid characters from input: letters,special characters excluding +, *,#\n const plainInput = sanitizeInput(input);\n setPlainTextValue(plainInput);\n };\n\n const deleteNumbers = (): void => {\n const modifiedInput = plainTextValue.substring(0, plainTextValue.length - 1);\n setText(modifiedInput);\n };\n\n return (\n <div\n className={mergeStyles(containerStyles(theme), props.styles?.root)}\n data-test-id=\"dialpadContainer\"\n data-ui-id=\"dialpadContainer\"\n >\n <TextField\n styles={concatStyleSets(textFieldStyles(theme), props.styles?.textField)}\n value={textFieldValue ? textFieldValue : formatPhoneNumber(plainTextValue)}\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onChange={(e: any) => {\n setText(e.target.value);\n }}\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onClick={(e: any) => {\n const input = e.target;\n const end = input.value.length;\n\n // Move focus to end of input field\n input.setSelectionRange(end, end);\n input.focus();\n }}\n placeholder={props.strings.placeholderText}\n data-test-id=\"dialpad-input\"\n onRenderSuffix={(): JSX.Element => (\n <>\n {showDeleteButton && plainTextValue.length !== 0 && (\n <IconButton\n ariaLabel={props.strings.deleteButtonAriaLabel}\n onClick={deleteNumbers}\n styles={concatStyleSets(iconButtonStyles(theme), props.styles?.deleteIcon)}\n iconProps={{ iconName: 'DialpadBackspace' }}\n />\n )}\n </>\n )}\n />\n <FocusZone>\n {dialPadButtonsDefault.map((rows, rowIndex) => {\n return (\n <Stack horizontal key={`row_${rowIndex}`} horizontalAlign=\"stretch\">\n {rows.map((button, columnIndex) => (\n <DialpadButton\n key={`button_${columnIndex}`}\n /* row index = 0\n columnIndex: (0,1,2) => (0,1,2)\n row index = 1\n columnIndex: (0,1,2)=> (3,4,5)\n row index = 2\n columnIndex: (0,1,2)=> (6,7,8)\n row index = 3\n columnIndex: (0,1,2)=> (9,10,11)\n columnIndex + rowIndex*rows.length calculates the corresponding index for each button\n dialpad index:\n 0 1 2\n 3 4 5\n 6 7 8\n 9 10 11\n then use this index to locate the corresponding dtmf tones\n DtmfTones[index]\n */\n index={columnIndex + rowIndex * rows.length}\n digit={button.digit}\n letter={button.letter}\n styles={props.styles}\n onClick={onClickDialpad}\n onLongPress={onLongPressDialpad}\n isMobile={isMobile}\n /* @conditional-compile-remove(dtmf-dialer) */\n dtmfToneAudioContext={dtmfToneAudioContext.current}\n /* @conditional-compile-remove(dtmf-dialer) */\n disableDtmfPlayback={props.disableDtmfPlayback}\n />\n ))}\n </Stack>\n );\n })}\n </FocusZone>\n </div>\n );\n};\n\n/**\n * A component to allow users to enter phone number through clicking on dialpad/using keyboard\n * It will return empty component for stable builds\n *\n * @beta\n */\nexport const Dialpad = (props: DialpadProps): JSX.Element => {\n /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */\n const localeStrings = useLocale().strings.dialpad;\n\n const dialpadLocaleStringsTrampoline = (): DialpadStrings => {\n /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */\n return localeStrings;\n // Even though the component strings type doesn't have `DialpadStrings` in stable build,\n // the string values exist. So unsafe cast for stable build.\n return '' as unknown as DialpadStrings;\n };\n const strings = { ...dialpadLocaleStringsTrampoline(), ...props.strings };\n return <DialpadContainer strings={strings} {...props} />;\n};\n\nconst sanitizeInput = (input: string): string => {\n // remove non-valid characters from input: letters,special characters excluding +, *,#\n return input.replace(/[^\\d*#+]/g, '');\n};\n"]}
1
+ {"version":3,"file":"Dialpad.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Dialpad/Dialpad.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect } from 'react';\n\nimport { useRef } from 'react';\nimport { IStyle, IButtonStyles, ITextFieldStyles } from '@fluentui/react';\n\nimport { IconButton } from '@fluentui/react';\nimport {\n concatStyleSets,\n DefaultButton,\n FocusZone,\n mergeStyles,\n Stack,\n Text,\n TextField,\n useTheme\n} from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useState } from 'react';\n/* @conditional-compile-remove(dialpad) */\nimport { useLocale } from '../../localization';\nimport {\n buttonStyles,\n containerStyles,\n iconButtonStyles,\n digitStyles,\n letterStyles,\n textFieldStyles\n} from '../styles/Dialpad.styles';\nimport { formatPhoneNumber } from '../utils/formatPhoneNumber';\nimport useLongPress from '../utils/useLongPress';\n\nimport { dtmfFrequencies, Tone } from './DTMFToneGenerator';\n\n/**\n * Strings of {@link Dialpad} that can be overridden.\n *\n * @beta\n */\nexport interface DialpadStrings {\n placeholderText: string;\n deleteButtonAriaLabel?: string;\n}\n\n/**\n * Styles for {@link Dialpad} component.\n *\n * @beta\n */\nexport interface DialpadStyles {\n root?: IStyle;\n button?: IButtonStyles;\n textField?: Partial<ITextFieldStyles>;\n digit?: IStyle;\n letter?: IStyle;\n deleteIcon?: IButtonStyles;\n}\n\n/**\n * DTMF tone for PSTN calls.\n *\n * @beta\n */\nexport type DtmfTone =\n | 'A'\n | 'B'\n | 'C'\n | 'D'\n | 'Flash'\n | 'Num0'\n | 'Num1'\n | 'Num2'\n | 'Num3'\n | 'Num4'\n | 'Num5'\n | 'Num6'\n | 'Num7'\n | 'Num8'\n | 'Num9'\n | 'Pound'\n | 'Star';\n\n/**\n * Props for {@link Dialpad} component.\n *\n * @beta\n */\nexport interface DialpadProps {\n strings?: DialpadStrings;\n /**\n * function to send dtmf tones on button click\n */\n onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n /**\n * Callback for dialpad button behavior\n */\n onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n /**\n * set dialpad textfield content\n */\n textFieldValue?: string;\n /**\n * on change function for text field, provides an unformatted plain text\n */\n onChange?: (input: string) => void;\n /**\n * flag to determine when to show/hide delete button, default true\n */\n showDeleteButton?: boolean;\n /**\n * flag to determine if dialpad is in mobile view, default false\n */\n isMobile?: boolean;\n /**\n * Styles for customizing the dialpad component\n */\n styles?: DialpadStyles;\n /**\n * Disables DTMF sounds when dialpad buttons are pressed. the actual\n * tones are still sent to the call.\n */\n disableDtmfPlayback?: boolean;\n /**\n * Enable the ability to edit the number in the text box.\n * This mode is for when dailing someone to call to that the user can edit the number before calling if needed.\n * @default false\n *\n */\n enableInputEditing?: boolean;\n}\n\ntype DialpadButtonContent = {\n /** Number displayed on each dialpad button */\n digit: string;\n /** Letters displayed on each dialpad button */\n letter?: string;\n};\n\nconst dialPadButtonsDefault: DialpadButtonContent[][] = [\n [{ digit: '1' }, { digit: '2', letter: 'ABC' }, { digit: '3', letter: 'DEF' }],\n [\n { digit: '4', letter: 'GHI' },\n { digit: '5', letter: 'JKL' },\n { digit: '6', letter: 'MNO' }\n ],\n [\n { digit: '7', letter: 'PQRS' },\n { digit: '8', letter: 'TUV' },\n { digit: '9', letter: 'WXYZ' }\n ],\n [{ digit: '*' }, { digit: '0', letter: '+' }, { digit: '#' }]\n];\n\nconst DtmfTones: DtmfTone[] = [\n 'Num1',\n 'Num2',\n 'Num3',\n 'Num4',\n 'Num5',\n 'Num6',\n 'Num7',\n 'Num8',\n 'Num9',\n 'Star',\n 'Num0',\n 'Pound'\n];\n\nconst DialpadButton = (props: {\n digit: string;\n letter?: string;\n styles?: DialpadStyles;\n index: number;\n onClick: (input: string, index: number) => void;\n onLongPress: (input: string, index: number) => void;\n isMobile?: boolean;\n dtmfToneAudioContext: AudioContext;\n disableDtmfPlayback?: boolean;\n}): JSX.Element => {\n const theme = useTheme();\n\n const { digit, index, onClick, onLongPress, isMobile = false, dtmfToneAudioContext, disableDtmfPlayback } = props;\n const [buttonPressed, setButtonPressed] = useState(false);\n\n const dtmfToneSound = useRef<Tone>(\n new Tone(dtmfToneAudioContext, dtmfFrequencies[digit].f1, dtmfFrequencies[digit].f2)\n );\n\n const useLongPressProps = React.useMemo(\n () => ({\n onClick: async () => {\n onClick(digit, index);\n },\n onLongPress: async () => {\n onLongPress(digit, index);\n },\n touchEventsOnly: isMobile\n }),\n [digit, index, isMobile, onClick, onLongPress]\n );\n\n const longPressHandlers = useLongPress(useLongPressProps);\n\n return (\n <DefaultButton\n data-test-id={`dialpad-button-${props.index}`}\n styles={concatStyleSets(buttonStyles(theme), props.styles?.button)}\n {...longPressHandlers}\n onKeyDown={(e) => {\n if ((e.key === 'Enter' || e.key === ' ') && !buttonPressed) {\n if (!disableDtmfPlayback) {\n dtmfToneSound.current.play();\n }\n longPressHandlers.onKeyDown();\n setButtonPressed(true);\n return;\n }\n longPressHandlers.onKeyDown();\n }}\n onKeyUp={(e) => {\n if ((e.key === 'Enter' || e.key === ' ') && buttonPressed) {\n dtmfToneSound.current.stop();\n longPressHandlers.onKeyUp();\n setButtonPressed(false);\n }\n longPressHandlers.onKeyUp();\n }}\n onMouseDown={() => {\n if (!disableDtmfPlayback) {\n dtmfToneSound.current.play();\n }\n longPressHandlers.onMouseDown();\n }}\n onMouseUp={() => {\n dtmfToneSound.current.stop();\n longPressHandlers.onMouseUp();\n }}\n onMouseLeave={() => {\n dtmfToneSound.current.stop();\n }}\n onTouchStart={() => {\n if (!disableDtmfPlayback) {\n dtmfToneSound.current.play();\n }\n longPressHandlers.onTouchStart();\n }}\n onTouchEnd={() => {\n dtmfToneSound.current.stop();\n longPressHandlers.onTouchEnd();\n }}\n >\n <Stack>\n <Text className={mergeStyles(digitStyles(theme), props.styles?.digit)}>{props.digit}</Text>\n\n <Text className={mergeStyles(letterStyles(theme), props.styles?.letter)}>{props.letter ?? ' '}</Text>\n </Stack>\n </DefaultButton>\n );\n};\n\nconst DialpadContainer = (props: {\n strings: DialpadStrings;\n onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n /** Callback for dialpad button behavior */\n onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n /** Pass in custom content to dialpad textfield */\n textFieldValue?: string;\n /** on change function for text field, provides an unformatted plain text */\n onChange?: (input: string) => void;\n /** boolean input to determine when to show/hide delete button, default true */\n showDeleteButton?: boolean;\n /** boolean input to determine if dialpad is in mobile view, default false */\n isMobile?: boolean;\n styles?: DialpadStyles;\n\n disableDtmfPlayback?: boolean;\n\n enableInputEditing?: boolean;\n}): JSX.Element => {\n const theme = useTheme();\n\n const {\n onSendDtmfTone,\n onClickDialpadButton,\n textFieldValue,\n onChange,\n showDeleteButton = true,\n isMobile = false,\n\n disableDtmfPlayback,\n\n enableInputEditing\n } = props;\n\n const [plainTextValue, setPlainTextValue] = useState(textFieldValue ?? '');\n\n const dtmfToneAudioContext = useRef(new AudioContext());\n\n useEffect(() => {\n if (onChange) {\n onChange(plainTextValue);\n }\n }, [plainTextValue, onChange]);\n\n useEffect(() => {\n setText(textFieldValue ?? '');\n }, [textFieldValue]);\n\n const onClickDialpad = (input: string, index: number): void => {\n setText(plainTextValue + input);\n if (onSendDtmfTone) {\n onSendDtmfTone(DtmfTones[index]);\n }\n if (onClickDialpadButton) {\n onClickDialpadButton(input, index);\n }\n };\n\n const onLongPressDialpad = (input: string, index: number): void => {\n if (input === '0' && index === 10) {\n setText(plainTextValue + '+');\n } else {\n setText(plainTextValue + input);\n }\n if (onSendDtmfTone) {\n onSendDtmfTone(DtmfTones[index]);\n }\n if (onClickDialpadButton) {\n onClickDialpadButton(input, index);\n }\n };\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const setText = (input: string): void => {\n // remove non-valid characters from input: letters,special characters excluding +, *,#\n const plainInput = sanitizeInput(input);\n setPlainTextValue(plainInput);\n };\n\n const deleteNumbers = (): void => {\n const modifiedInput = plainTextValue.substring(0, plainTextValue.length - 1);\n setText(modifiedInput);\n };\n\n return (\n <div\n className={mergeStyles(containerStyles(theme), props.styles?.root)}\n data-test-id=\"dialpadContainer\"\n data-ui-id=\"dialpadContainer\"\n >\n <TextField\n styles={concatStyleSets(textFieldStyles(theme), props.styles?.textField)}\n value={\n textFieldValue ? textFieldValue : enableInputEditing ? formatPhoneNumber(plainTextValue) : plainTextValue\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onChange={(e: any) => {\n if (enableInputEditing) {\n setText(e.target.value);\n }\n }}\n onClick={(e) => {\n if (!enableInputEditing) {\n e.preventDefault();\n }\n }}\n placeholder={props.strings.placeholderText}\n data-test-id=\"dialpad-input\"\n onRenderSuffix={(): JSX.Element => (\n <>\n {showDeleteButton && plainTextValue.length !== 0 && (\n <IconButton\n ariaLabel={props.strings.deleteButtonAriaLabel}\n onClick={deleteNumbers}\n styles={concatStyleSets(iconButtonStyles(theme), props.styles?.deleteIcon)}\n iconProps={{ iconName: 'DialpadBackspace' }}\n />\n )}\n </>\n )}\n />\n <FocusZone>\n {dialPadButtonsDefault.map((rows, rowIndex) => {\n return (\n <Stack horizontal key={`row_${rowIndex}`} horizontalAlign=\"stretch\">\n {rows.map((button, columnIndex) => (\n <DialpadButton\n key={`button_${columnIndex}`}\n /* row index = 0\n columnIndex: (0,1,2) => (0,1,2)\n row index = 1\n columnIndex: (0,1,2)=> (3,4,5)\n row index = 2\n columnIndex: (0,1,2)=> (6,7,8)\n row index = 3\n columnIndex: (0,1,2)=> (9,10,11)\n columnIndex + rowIndex*rows.length calculates the corresponding index for each button\n dialpad index:\n 0 1 2\n 3 4 5\n 6 7 8\n 9 10 11\n then use this index to locate the corresponding dtmf tones\n DtmfTones[index]\n */\n index={columnIndex + rowIndex * rows.length}\n digit={button.digit}\n letter={button.letter}\n styles={props.styles}\n onClick={onClickDialpad}\n onLongPress={onLongPressDialpad}\n isMobile={isMobile}\n dtmfToneAudioContext={dtmfToneAudioContext.current}\n disableDtmfPlayback={disableDtmfPlayback}\n />\n ))}\n </Stack>\n );\n })}\n </FocusZone>\n </div>\n );\n};\n\n/**\n * A component to allow users to enter phone number through clicking on dialpad/using keyboard\n * It will return empty component for stable builds\n *\n * @beta\n */\nexport const Dialpad = (props: DialpadProps): JSX.Element => {\n /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */\n const localeStrings = useLocale().strings.dialpad;\n\n const dialpadLocaleStringsTrampoline = (): DialpadStrings => {\n /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */\n return localeStrings;\n // Even though the component strings type doesn't have `DialpadStrings` in stable build,\n // the string values exist. So unsafe cast for stable build.\n return '' as unknown as DialpadStrings;\n };\n const strings = { ...dialpadLocaleStringsTrampoline(), ...props.strings };\n return <DialpadContainer strings={strings} {...props} />;\n};\n\nconst sanitizeInput = (input: string): string => {\n // remove non-valid characters from input: letters,special characters excluding +, *,#\n return input.replace(/[^\\d*#+]/g, '');\n};\n"]}
package/dist/dist-esm/react-components/src/components/FileDownloadCards.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FileDownloadCards.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/FileDownloadCards.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtF,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,+CAA+C;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,mCAAgC;AAwKxD,MAAM,sBAAsB,GAAG;IAC7B,SAAS,EAAE,SAAS;CACrB,CAAC;AAEF,MAAM,eAAe,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;AAE3C;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAe,EAAE;;IAChF,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IACvC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,aAAa,GAAG,0BAA0B,EAAE,CAAC;IAEnD,MAAM,wBAAwB,GAAG,OAAO,CACtC,GAAG,EAAE,CAAC,GAAG,EAAE;;QACT,OAAO,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,YAAY,mCAAI,aAAa,CAAC,YAAY,CAAC;IACnE,CAAC,EACD,CAAC,MAAA,KAAK,CAAC,OAAO,0CAAE,YAAY,EAAE,aAAa,CAAC,YAAY,CAAC,CAC1D,CAAC;IAEF,MAAM,uBAAuB,GAAG,WAAW,CAAC,CAAC,UAA8B,EAAW,EAAE;QACtF,+CAA+C;QAC/C,OAAO,UAAU,CAAC,cAAc,KAAK,MAAM,CAAC;QAC5C,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,kBAAkB,GAAG,WAAW,CAAC,CAAC,UAA8B,EAAW,EAAE;;QACjF,+CAA+C;QAC/C,OAAO,UAAU,CAAC,cAAc,KAAK,MAAM,IAAI,CAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,mBAAmB,MAAK,MAAM,CAAC;QAClG,OAAO,IAAI,CAAC;IACd,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,+CAA+C;IAC/C,MAAM,wBAAwB,GAAG,OAAO,CACtC,GAAG,EAAE,CAAC,GAAG,EAAE;;QACT,MAAM,qBAAqB,GAAG,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,oBAAoB,mCAAI,aAAa,CAAC,oBAAoB,CAAC;QACxG,+CAA+C;QAC/C,OAAO,aAAa,CAAC,qBAAqB,EAAE;YAC1C,SAAS,EAAE,GAAG,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,MAAM,CAAC,uBAAuB,EAAE,MAAM,mCAAI,CAAC,EAAE;SAC1E,CAAC,CAAC;QACH,OAAO,aAAa,CAAC,qBAAqB,EAAE;YAC1C,SAAS,EAAE,GAAG,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,MAAM,mCAAI,CAAC,EAAE;SAC1C,CAAC,CAAC;IACL,CAAC,EACD,CAAC,MAAA,KAAK,CAAC,OAAO,0CAAE,oBAAoB,EAAE,aAAa,CAAC,oBAAoB,EAAE,YAAY,EAAE,uBAAuB,CAAC,CACjH,CAAC;IAEF,MAAM,mBAAmB,GAAG,WAAW,CACrC,CAAO,MAAM,EAAE,IAAwB,EAAE,EAAE;QACzC,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,CAAC;YAC3B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,QAAQ,EAAE,qBAAqB,CAAC,CAAC;QACzD,CAAC;aAAM,CAAC;YACN,cAAc,CAAC,IAAI,CAAC,CAAC;YACrB,IAAI,CAAC;gBACH,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,eAAe,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;gBAC3D,cAAc,CAAC,KAAK,CAAC,CAAC;gBACtB,IAAI,QAAQ,YAAY,GAAG,EAAE,CAAC;oBAC5B,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAE,qBAAqB,CAAC,CAAC;gBACpE,CAAC;qBAAM,CAAC;oBACN,KAAK,CAAC,sBAAsB,IAAI,KAAK,CAAC,sBAAsB,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;gBACtF,CAAC;YACH,CAAC;oBAAS,CAAC;gBACT,cAAc,CAAC,KAAK,CAAC,CAAC;YACxB,CAAC;QACH,CAAC;IACH,CAAC,CAAA,EACD,CAAC,KAAK,CAAC,CACR,CAAC;IACF,IAAI,CAAC,YAAY,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,uBAAuB,CAAC,EAAE,CAAC;QAC9F,OAAO,yCAAK,CAAC;IACf,CAAC;IAED,OAAO,CACL,6BAAK,KAAK,EAAE,sBAAsB,gBAAa,0BAA0B;QACvE,oBAAC,cAAc,CAAC,+CAA+C,IAAC,SAAS,EAAE,wBAAwB,EAAE,IAClG,YAAY;YACX,YAAY;iBACT,MAAM,CAAC,CAAC,UAAU,EAAE,EAAE;gBACrB,+CAA+C;gBAC/C,OAAO,uBAAuB,CAAC,UAAU,CAAC,CAAC;gBAC3C,OAAO,IAAI,CAAC;YACd,CAAC,CAAC;iBACD,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAA+B,CAAC;iBAC9C,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACb,oBAAC,WAAW,IAAC,OAAO,EAAE,wBAAwB,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,IAAI;gBAC9D,oBAAC,SAAS,IACR,QAAQ,EAAE,IAAI,CAAC,IAAI,EACnB,GAAG,EAAE,IAAI,CAAC,IAAI,EACd,aAAa,EAAE,IAAI,CAAC,SAAS,EAC7B,UAAU,EACR,WAAW,CAAC,CAAC,CAAC,CACZ,oBAAC,OAAO,IAAC,IAAI,EAAE,WAAW,CAAC,MAAM,eAAa,QAAQ,EAAE,IAAI,EAAE,QAAQ,GAAI,CAC3E,CAAC,CAAC,CAAC,IAAI,IAAI,kBAAkB,CAAC,IAAqC,CAAC,CAAC,CAAC,CAAC,CACtE,oBAAC,UAAU,IAAC,SAAS,EAAE,mBAAmB,EAAE,SAAS,EAAE,wBAAwB,EAAE;wBAC/E,oBAAC,sBAAsB,OAAG,CACf,CACd,CAAC,CAAC,CAAC,SAAS,EAEf,aAAa,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,MAAM,EAAE,IAAqC,CAAC,GACvF,CACU,CACf,CAAC,CACS,CACb,CACP,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,sBAAsB,GAAG,GAAgB,EAAE;IAC/C,4CAA4C;IAC5C,OAAO,oBAAC,IAAI,kBAAY,kCAAkC,EAAC,QAAQ,EAAC,cAAc,EAAC,KAAK,EAAE,eAAe,GAAI,CAAC;IAC9G,+DAA+D;IAC/D,OAAO,oBAAC,IAAI,IAAC,QAAQ,EAAC,eAAe,EAAC,KAAK,EAAE,eAAe,GAAI,CAAC;AACnE,CAAC,CAAC;AAEF,MAAM,0BAA0B,GAAG,GAA8B,EAAE;IACjE,+CAA+C;IAC/C,OAAO,SAAS,EAAE,CAAC,OAAO,CAAC,aAAa,CAAC;IACzC,OAAO,EAAE,YAAY,EAAE,EAAE,EAAE,oBAAoB,EAAE,EAAE,EAAE,CAAC;AACxD,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, IconButton, Spinner, SpinnerSize, TooltipHost } from '@fluentui/react';\nimport React, { useCallback, useState } from 'react';\nimport { useMemo } from 'react';\n/* @conditional-compile-remove(file-sharing) */\nimport { useLocale } from '../localization';\nimport { _FileCard } from './FileCard';\nimport { _FileCardGroup } from './FileCardGroup';\nimport { iconButtonClassName } from './styles/IconButton.styles';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/**\n * Represents the type of attachment\n * @public\n */\nexport type ChatAttachmentType = 'inlineImage' | /* @conditional-compile-remove(file-sharing) */ 'file' | 'unknown';\n\n/**\n * Metadata containing basic information about the uploaded file.\n *\n * @beta\n */\nexport interface FileMetadata {\n attachmentType: 'file';\n /**\n * Extension hint, useful for rendering a specific icon.\n * An unknown or empty extension will be rendered as a generic icon.\n * Example: `pdf`\n */\n extension: string;\n /**\n * Unique ID of the file.\n */\n id: string;\n /**\n * File name to be displayed.\n */\n name: string;\n /**\n * Download URL for the file.\n */\n url: string;\n /*\n * Optional dictionary of meta data associated with the file.\n */\n payload?: Record<string, string>;\n}\n\n/**\n * Metadata for rendering images inline with a message.\n * This does not include images attached as files.\n * @public\n */\nexport interface InlineImageMetadata {\n /*\n * Type of the attachment\n */\n attachmentType: 'inlineImage';\n /**\n * Unique ID of the attachment.\n */\n id: string;\n /*\n * Preview URL for low resolution version.\n */\n previewUrl?: string;\n /**\n * Download URL for the full resolution version.\n */\n url: string;\n}\n\n/**\n * Metadata containing information about the uploaded file.\n * @public\n */\nexport type AttachmentMetadata = InlineImageMetadata | /* @conditional-compile-remove(file-sharing) */ FileMetadata;\n\n/**\n * Metadata of the attachment object returned by the ACS SDK.\n * @public\n */\nexport interface AttachmentDownloadResult {\n /**\n * Unique ID of the attachment.\n */\n attachmentId: string;\n /**\n * Blob URL for the attachment.\n */\n blobUrl: string;\n}\n\n/**\n * Strings of _FileDownloadCards that can be overridden.\n *\n * @internal\n */\nexport interface _FileDownloadCardsStrings {\n /** Aria label to notify user when focus is on file download button. */\n downloadFile: string;\n fileCardGroupMessage: string;\n}\n\n/**\n * @beta\n * A file download error returned via a {@link FileDownloadHandler}.\n * This error message is used to render an error message in the UI.\n */\nexport interface FileDownloadError {\n /** The error message to display in the UI */\n errorMessage: string;\n}\n\n/**\n * @beta\n *\n * A callback function for handling file downloads.\n * The function needs to return a promise that resolves to a file download URL.\n * If the promise is rejected, the {@link Error.message} will be used to display an error message to the user.\n *\n * @example\n * ```ts\n * const fileDownloadHandler: FileDownloadHandler = async (userId, fileData) => {\n * if (isUnauthorizedUser(userId)) {\n * return { errorMessage: 'You don’t have permission to download this file.' };\n * } else {\n * return new URL(fileData.url);\n * }\n * }\n *\n * const App = () => (\n * <ChatComposite\n * ...\n * fileSharing={{\n * fileDownloadHandler: fileDownloadHandler\n * }}\n * />\n * )\n *\n * ```\n * @param userId - The user ID of the user downloading the file.\n * @param fileMetadata - The {@link AttachmentMetadata} containing file `url`, `extension` and `name`.\n */\nexport type FileDownloadHandler = (\n userId: string,\n fileMetadata: AttachmentMetadata\n) => Promise<URL | FileDownloadError>;\n\n/**\n * @internal\n */\nexport interface _FileDownloadCardsProps {\n /**\n * User id of the local participant\n */\n userId: string;\n /**\n * A chat message metadata that includes file metadata\n */\n fileMetadata?: AttachmentMetadata[];\n /**\n * A function of type {@link FileDownloadHandler} for handling file downloads.\n * If the function is not specified, the file's `url` will be opened in a new tab to\n * initiate the download.\n */\n downloadHandler?: FileDownloadHandler;\n /**\n * Optional callback that runs if downloadHandler returns {@link FileDownloadError}.\n */\n onDownloadErrorMessage?: (errMsg: string) => void;\n /**\n * Optional aria label strings for file download cards\n */\n strings?: _FileDownloadCardsStrings;\n}\n\nconst fileDownloadCardsStyle = {\n marginTop: '0.25rem'\n};\n\nconst actionIconStyle = { height: '1rem' };\n\n/**\n * @internal\n */\nexport const _FileDownloadCards = (props: _FileDownloadCardsProps): JSX.Element => {\n const { userId, fileMetadata } = props;\n const [showSpinner, setShowSpinner] = useState(false);\n const localeStrings = useLocaleStringsTrampoline();\n\n const downloadFileButtonString = useMemo(\n () => () => {\n return props.strings?.downloadFile ?? localeStrings.downloadFile;\n },\n [props.strings?.downloadFile, localeStrings.downloadFile]\n );\n\n const isFileSharingAttachment = useCallback((attachment: AttachmentMetadata): boolean => {\n /* @conditional-compile-remove(file-sharing) */\n return attachment.attachmentType === 'file';\n return false;\n }, []);\n\n const isShowDownloadIcon = useCallback((attachment: AttachmentMetadata): boolean => {\n /* @conditional-compile-remove(file-sharing) */\n return attachment.attachmentType === 'file' && attachment.payload?.teamsFileAttachment !== 'true';\n return true;\n }, []);\n\n /* @conditional-compile-remove(file-sharing) */\n const fileCardGroupDescription = useMemo(\n () => () => {\n const fileGroupLocaleString = props.strings?.fileCardGroupMessage ?? localeStrings.fileCardGroupMessage;\n /* @conditional-compile-remove(file-sharing) */\n return _formatString(fileGroupLocaleString, {\n fileCount: `${fileMetadata?.filter(isFileSharingAttachment).length ?? 0}`\n });\n return _formatString(fileGroupLocaleString, {\n fileCount: `${fileMetadata?.length ?? 0}`\n });\n },\n [props.strings?.fileCardGroupMessage, localeStrings.fileCardGroupMessage, fileMetadata, isFileSharingAttachment]\n );\n\n const fileDownloadHandler = useCallback(\n async (userId, file: AttachmentMetadata) => {\n if (!props.downloadHandler) {\n window.open(file.url, '_blank', 'noopener,noreferrer');\n } else {\n setShowSpinner(true);\n try {\n const response = await props.downloadHandler(userId, file);\n setShowSpinner(false);\n if (response instanceof URL) {\n window.open(response.toString(), '_blank', 'noopener,noreferrer');\n } else {\n props.onDownloadErrorMessage && props.onDownloadErrorMessage(response.errorMessage);\n }\n } finally {\n setShowSpinner(false);\n }\n }\n },\n [props]\n );\n if (!fileMetadata || fileMetadata.length === 0 || !fileMetadata.some(isFileSharingAttachment)) {\n return <></>;\n }\n\n return (\n <div style={fileDownloadCardsStyle} data-ui-id=\"file-download-card-group\">\n <_FileCardGroup /* @conditional-compile-remove(file-sharing) */ ariaLabel={fileCardGroupDescription()}>\n {fileMetadata &&\n fileMetadata\n .filter((attachment) => {\n /* @conditional-compile-remove(file-sharing) */\n return isFileSharingAttachment(attachment);\n return true;\n })\n .map((file) => file as unknown as FileMetadata)\n .map((file) => (\n <TooltipHost content={downloadFileButtonString()} key={file.name}>\n <_FileCard\n fileName={file.name}\n key={file.name}\n fileExtension={file.extension}\n actionIcon={\n showSpinner ? (\n <Spinner size={SpinnerSize.medium} aria-live={'polite'} role={'status'} />\n ) : true && isShowDownloadIcon(file as unknown as AttachmentMetadata) ? (\n <IconButton className={iconButtonClassName} ariaLabel={downloadFileButtonString()}>\n <DownloadIconTrampoline />\n </IconButton>\n ) : undefined\n }\n actionHandler={() => fileDownloadHandler(userId, file as unknown as AttachmentMetadata)}\n />\n </TooltipHost>\n ))}\n </_FileCardGroup>\n </div>\n );\n};\n\n/**\n * @private\n */\nconst DownloadIconTrampoline = (): JSX.Element => {\n // @conditional-compile-remove(file-sharing)\n return <Icon data-ui-id=\"file-download-card-download-icon\" iconName=\"DownloadFile\" style={actionIconStyle} />;\n // Return _some_ available icon, as the real icon is beta-only.\n return <Icon iconName=\"EditBoxCancel\" style={actionIconStyle} />;\n};\n\nconst useLocaleStringsTrampoline = (): _FileDownloadCardsStrings => {\n /* @conditional-compile-remove(file-sharing) */\n return useLocale().strings.messageThread;\n return { downloadFile: '', fileCardGroupMessage: '' };\n};\n"]}
1
+ {"version":3,"file":"FileDownloadCards.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/FileDownloadCards.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, IconButton, Spinner, SpinnerSize, TooltipHost } from '@fluentui/react';\nimport React, { useCallback, useState } from 'react';\nimport { useMemo } from 'react';\n/* @conditional-compile-remove(file-sharing) */\nimport { useLocale } from '../localization';\nimport { _FileCard } from './FileCard';\nimport { _FileCardGroup } from './FileCardGroup';\nimport { iconButtonClassName } from './styles/IconButton.styles';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/**\n * Represents the type of attachment\n * @public\n */\nexport type ChatAttachmentType = 'inlineImage' | /* @conditional-compile-remove(file-sharing) */ 'file' | 'unknown';\n\n/**\n * Metadata containing basic information about the uploaded file.\n *\n * @beta\n */\nexport interface FileMetadata {\n attachmentType: 'file';\n /**\n * Extension hint, useful for rendering a specific icon.\n * An unknown or empty extension will be rendered as a generic icon.\n * Example: `pdf`\n */\n extension: string;\n /**\n * Unique ID of the file.\n */\n id: string;\n /**\n * File name to be displayed.\n */\n name: string;\n /**\n * Download URL for the file.\n */\n url: string;\n /*\n * Optional dictionary of meta data associated with the file.\n */\n payload?: Record<string, string>;\n}\n\n/**\n * Metadata for rendering images inline with a message.\n * This does not include images attached as files.\n * @public\n */\nexport interface InlineImageMetadata {\n /*\n * Type of the attachment\n */\n attachmentType: 'inlineImage';\n /**\n * Unique ID of the attachment.\n */\n id: string;\n /*\n * Preview URL for low resolution version.\n */\n previewUrl?: string;\n /**\n * Download URL for the full resolution version.\n */\n url: string;\n}\n\n/**\n * Metadata containing information about the uploaded file.\n * @public\n */\nexport type AttachmentMetadata = InlineImageMetadata | /* @conditional-compile-remove(file-sharing) */ FileMetadata;\n\n/**\n * Metadata of the attachment object returned by the ACS SDK.\n * @public\n */\nexport interface AttachmentDownloadResult {\n /**\n * Unique ID of the attachment.\n */\n attachmentId: string;\n /**\n * Blob URL for the attachment.\n */\n blobUrl: string;\n}\n\n/**\n * Strings of _FileDownloadCards that can be overridden.\n *\n * @internal\n */\nexport interface _FileDownloadCardsStrings {\n /** Aria label to notify user when focus is on file download button. */\n downloadFile: string;\n fileCardGroupMessage: string;\n}\n\n/**\n * @beta\n * A file download error returned via a {@link FileDownloadHandler}.\n * This error message is used to render an error message in the UI.\n */\nexport interface FileDownloadError {\n /** The error message to display in the UI */\n errorMessage: string;\n}\n\n/**\n * @beta\n *\n * A callback function for handling file downloads.\n * The function needs to return a promise that resolves to a file download URL.\n * If the promise is rejected, the {@link Error.message} will be used to display an error message to the user.\n *\n * @example\n * ```ts\n * const fileDownloadHandler: FileDownloadHandler = async (userId, fileData) => {\n * if (isUnauthorizedUser(userId)) {\n * return { errorMessage: 'You don’t have permission to download this file.' };\n * } else {\n * return new URL(fileData.url);\n * }\n * }\n *\n * const App = () => (\n * <ChatComposite\n * ...\n * fileSharing={{\n * fileDownloadHandler: fileDownloadHandler\n * }}\n * />\n * )\n *\n * ```\n * @param userId - The user ID of the user downloading the file.\n * @param fileMetadata - The {@link AttachmentMetadata} containing file `url`, `extension` and `name`.\n */\nexport type FileDownloadHandler = (\n userId: string,\n fileMetadata: AttachmentMetadata\n) => Promise<URL | FileDownloadError>;\n\n/**\n * @internal\n */\nexport interface _FileDownloadCardsProps {\n /**\n * User id of the local participant\n */\n userId: string;\n /**\n * A chat message metadata that includes file metadata\n */\n fileMetadata?: AttachmentMetadata[];\n /**\n * A function of type {@link FileDownloadHandler} for handling file downloads.\n * If the function is not specified, the file's `url` will be opened in a new tab to\n * initiate the download.\n */\n downloadHandler?: FileDownloadHandler;\n /**\n * Optional callback that runs if downloadHandler returns {@link FileDownloadError}.\n */\n onDownloadErrorMessage?: (errMsg: string) => void;\n /**\n * Optional aria label strings for file download cards\n */\n strings?: _FileDownloadCardsStrings;\n}\n\nconst fileDownloadCardsStyle = {\n marginTop: '0.25rem'\n};\n\nconst actionIconStyle = { height: '1rem' };\n\n/**\n * @internal\n */\nexport const _FileDownloadCards = (props: _FileDownloadCardsProps): JSX.Element => {\n const { userId, fileMetadata } = props;\n const [showSpinner, setShowSpinner] = useState(false);\n const localeStrings = useLocaleStringsTrampoline();\n\n const downloadFileButtonString = useMemo(\n () => () => {\n return props.strings?.downloadFile ?? localeStrings.downloadFile;\n },\n [props.strings?.downloadFile, localeStrings.downloadFile]\n );\n\n const isFileSharingAttachment = useCallback((attachment: AttachmentMetadata): boolean => {\n /* @conditional-compile-remove(file-sharing) */\n return attachment.attachmentType === 'file';\n return false;\n }, []);\n\n const isShowDownloadIcon = useCallback((attachment: AttachmentMetadata): boolean => {\n /* @conditional-compile-remove(file-sharing) */\n return attachment.attachmentType === 'file' && attachment.payload?.teamsFileAttachment !== 'true';\n return true;\n }, []);\n\n /* @conditional-compile-remove(file-sharing) */\n const fileCardGroupDescription = useMemo(\n () => () => {\n const fileGroupLocaleString = props.strings?.fileCardGroupMessage ?? localeStrings.fileCardGroupMessage;\n /* @conditional-compile-remove(file-sharing) */\n return _formatString(fileGroupLocaleString, {\n fileCount: `${fileMetadata?.filter(isFileSharingAttachment).length ?? 0}`\n });\n return _formatString(fileGroupLocaleString, {\n fileCount: `${fileMetadata?.length ?? 0}`\n });\n },\n [props.strings?.fileCardGroupMessage, localeStrings.fileCardGroupMessage, fileMetadata, isFileSharingAttachment]\n );\n\n const fileDownloadHandler = useCallback(\n async (userId: string, file: AttachmentMetadata) => {\n if (!props.downloadHandler) {\n window.open(file.url, '_blank', 'noopener,noreferrer');\n } else {\n setShowSpinner(true);\n try {\n const response = await props.downloadHandler(userId, file);\n setShowSpinner(false);\n if (response instanceof URL) {\n window.open(response.toString(), '_blank', 'noopener,noreferrer');\n } else {\n props.onDownloadErrorMessage && props.onDownloadErrorMessage(response.errorMessage);\n }\n } finally {\n setShowSpinner(false);\n }\n }\n },\n [props]\n );\n if (!fileMetadata || fileMetadata.length === 0 || !fileMetadata.some(isFileSharingAttachment)) {\n return <></>;\n }\n\n return (\n <div style={fileDownloadCardsStyle} data-ui-id=\"file-download-card-group\">\n <_FileCardGroup /* @conditional-compile-remove(file-sharing) */ ariaLabel={fileCardGroupDescription()}>\n {fileMetadata &&\n fileMetadata\n .filter((attachment) => {\n /* @conditional-compile-remove(file-sharing) */\n return isFileSharingAttachment(attachment);\n return true;\n })\n .map((file) => file as unknown as FileMetadata)\n .map((file) => (\n <TooltipHost content={downloadFileButtonString()} key={file.name}>\n <_FileCard\n fileName={file.name}\n key={file.name}\n fileExtension={file.extension}\n actionIcon={\n showSpinner ? (\n <Spinner size={SpinnerSize.medium} aria-live={'polite'} role={'status'} />\n ) : true && isShowDownloadIcon(file as unknown as AttachmentMetadata) ? (\n <IconButton className={iconButtonClassName} ariaLabel={downloadFileButtonString()}>\n <DownloadIconTrampoline />\n </IconButton>\n ) : undefined\n }\n actionHandler={() => fileDownloadHandler(userId, file as unknown as AttachmentMetadata)}\n />\n </TooltipHost>\n ))}\n </_FileCardGroup>\n </div>\n );\n};\n\n/**\n * @private\n */\nconst DownloadIconTrampoline = (): JSX.Element => {\n // @conditional-compile-remove(file-sharing)\n return <Icon data-ui-id=\"file-download-card-download-icon\" iconName=\"DownloadFile\" style={actionIconStyle} />;\n // Return _some_ available icon, as the real icon is beta-only.\n return <Icon iconName=\"EditBoxCancel\" style={actionIconStyle} />;\n};\n\nconst useLocaleStringsTrampoline = (): _FileDownloadCardsStrings => {\n /* @conditional-compile-remove(file-sharing) */\n return useLocale().strings.messageThread;\n return { downloadFile: '', fileCardGroupMessage: '' };\n};\n"]}
package/dist/dist-esm/react-components/src/components/styles/v8StyleShim.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- import { IStyle } from '@fluentui/react';
2
+ import { IRawStyle } from '@fluentui/react';
3
3
  import { ComponentSlotStyle } from '../../types';
4
4
  /**
5
5
  * Function to create a React.CSSProperties object from a v8 style object.
@@ -8,5 +8,5 @@ import { ComponentSlotStyle } from '../../types';
8
8
  *
9
9
  * @private
10
10
  */
11
- export declare function createStyleFromV8Style(v8Style: IStyle | ComponentSlotStyle): React.CSSProperties | undefined;
11
+ export declare function createStyleFromV8Style(v8Style: IRawStyle | ComponentSlotStyle | undefined): React.CSSProperties | undefined;
12
12
  //# sourceMappingURL=v8StyleShim.d.ts.map
package/dist/dist-esm/react-components/src/components/styles/v8StyleShim.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"v8StyleShim.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/v8StyleShim.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAKlC;;;;;;GAMG;AACH,MAAM,UAAU,sBAAsB,CAAC,OAAoC;IACzE,MAAM,MAAM,GAAG,EAAE,CAAC;IAClB,IAAI,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,IAAI,IAAI,OAAO,OAAO,KAAK,SAAS,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE,CAAC;QAC7G,OAAO,SAAS,CAAC;IACnB,CAAC;SAAM,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE,CAAC;QACvC,4BAA4B;QAC5B,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE,CAAC;YAC7B,IAAI,OAAO,OAAO,CAAC,MAAM,CAAC,KAAK,QAAQ,EAAE,CAAC;gBACxC,yCAAyC;gBACzC,MAAM,QAAQ,GAAG,IAAI,CAAC;gBACtB,IAAI,MAAM,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;oBAChC,mFAAmF;oBACnF,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,WAAW,GAAG,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;oBACvG,MAAM,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;gBACtC,CAAC;qBAAM,CAAC;oBACN,MAAM,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;gBACnC,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,MAAM,CAAC,MAAM,CAAC,GAAG,sBAAsB,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;YAC3D,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,MAAM,CAAC;AAChB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle } from '@fluentui/react';\nimport { ComponentSlotStyle } from '../../types';\n\n/**\n * Function to create a React.CSSProperties object from a v8 style object.\n * This function is still not ideal\n * as v8Style can use pseudo-class selectors that style objects can't process correctly.\n *\n * @private\n */\nexport function createStyleFromV8Style(v8Style: IStyle | ComponentSlotStyle): React.CSSProperties | undefined {\n const result = {};\n if (v8Style === undefined || v8Style === null || typeof v8Style === 'boolean' || typeof v8Style === 'string') {\n return undefined;\n } else if (typeof v8Style === 'object') {\n // v8Style is a style object\n for (const record in v8Style) {\n if (typeof v8Style[record] === 'string') {\n // v8Style[record] is just a simple style\n const msSuffix = 'MS';\n if (record.startsWith(msSuffix)) {\n // React.CSSProperties uses camelCase for MS properties but v8Style uses PascalCase\n const newRecord = record.substring(0, msSuffix.length).toLowerCase + record.substring(msSuffix.length);\n result[newRecord] = v8Style[record];\n } else {\n result[record] = v8Style[record];\n }\n } else {\n result[record] = createStyleFromV8Style(v8Style[record]);\n }\n }\n }\n\n return result;\n}\n"]}
1
+ {"version":3,"file":"v8StyleShim.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/v8StyleShim.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAKlC;;;;;;GAMG;AACH,MAAM,UAAU,sBAAsB,CACpC,OAAmD;IAEnD,MAAM,MAAM,GAAuD,EAAE,CAAC;IACtE,IAAI,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,IAAI,IAAI,OAAO,OAAO,KAAK,SAAS,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE,CAAC;QAC7G,OAAO,SAAS,CAAC;IACnB,CAAC;SAAM,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE,CAAC;QACvC,4BAA4B;QAC5B,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE,CAAC;YAC7B,IAAI,OAAO,OAAO,CAAC,MAAM,CAAC,KAAK,QAAQ,EAAE,CAAC;gBACxC,yCAAyC;gBACzC,MAAM,QAAQ,GAAG,IAAI,CAAC;gBACtB,IAAI,MAAM,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;oBAChC,mFAAmF;oBACnF,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,WAAW,GAAG,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;oBACvG,MAAM,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;gBACtC,CAAC;qBAAM,CAAC;oBACN,MAAM,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;gBACnC,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,MAAM,CAAC,MAAM,CAAC,GAAG,sBAAsB,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;YAC3D,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,MAAM,CAAC;AAChB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IRawStyle } from '@fluentui/react';\nimport { ComponentSlotStyle } from '../../types';\n\n/**\n * Function to create a React.CSSProperties object from a v8 style object.\n * This function is still not ideal\n * as v8Style can use pseudo-class selectors that style objects can't process correctly.\n *\n * @private\n */\nexport function createStyleFromV8Style(\n v8Style: IRawStyle | ComponentSlotStyle | undefined\n): React.CSSProperties | undefined {\n const result: { [key: string]: React.CSSProperties | undefined } = {};\n if (v8Style === undefined || v8Style === null || typeof v8Style === 'boolean' || typeof v8Style === 'string') {\n return undefined;\n } else if (typeof v8Style === 'object') {\n // v8Style is a style object\n for (const record in v8Style) {\n if (typeof v8Style[record] === 'string') {\n // v8Style[record] is just a simple style\n const msSuffix = 'MS';\n if (record.startsWith(msSuffix)) {\n // React.CSSProperties uses camelCase for MS properties but v8Style uses PascalCase\n const newRecord = record.substring(0, msSuffix.length).toLowerCase + record.substring(msSuffix.length);\n result[newRecord] = v8Style[record];\n } else {\n result[record] = v8Style[record];\n }\n } else {\n result[record] = createStyleFromV8Style(v8Style[record]);\n }\n }\n }\n\n return result;\n}\n"]}
package/dist/dist-esm/react-components/src/theming/generateTheme.js CHANGED
@@ -52,7 +52,11 @@ const getForegroundColors = (isDark) => {
52
52
  const baseTheme = isDark ? darkTheme : lightTheme;
53
53
  return foregroundColorKeys.reduce((acc, key) => {
54
54
  var _a;
55
- acc[key] = (_a = baseTheme.palette) === null || _a === void 0 ? void 0 : _a[key];
55
+ const k = key;
56
+ const val = (_a = baseTheme.palette) === null || _a === void 0 ? void 0 : _a[k];
57
+ if (val !== undefined) {
58
+ acc[k] = val;
59
+ }
56
60
  return acc;
57
61
  }, {});
58
62
  };
package/dist/dist-esm/react-components/src/theming/generateTheme.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"generateTheme.js","sourceRoot":"","sources":["../../../../../../react-components/src/theming/generateTheme.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EACL,SAAS,EAET,cAAc,EACd,WAAW,EACX,kBAAkB,EAClB,yBAAyB,EAC1B,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEjD;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,WAAmB,EAAE,OAAyB,EAAU,EAAE;IACvF,MAAM,MAAM,GAAG,OAAO,KAAK,MAAM,CAAC;IAElC,MAAM,YAAY,GAAG,kBAAkB,CAAC,WAAW,CAAC,CAAC;IACrD,IAAI,CAAC,YAAY,EAAE,CAAC;QAClB,MAAM,IAAI,KAAK,CAAC,kCAAkC,WAAW,EAAE,CAAC,CAAC;IACnE,CAAC;IACD,MAAM,eAAe,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAC3E,IAAI,CAAC,eAAe,EAAE,CAAC;QACrB,MAAM,IAAI,KAAK,CAAC,qCAAqC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC;IACzF,CAAC;IAED,kGAAkG;IAClG,qKAAqK;IACrK,MAAM,UAAU,GAAG,yBAAyB,EAAE,CAAC;IAC/C,cAAc,CAAC,WAAW,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;IAC/C,cAAc,CAAC,OAAO,CAAC,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,YAAY,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IACxG,cAAc,CAAC,OAAO,CAAC,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,EAAE,eAAe,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IAE9G,8JAA8J;IAC9J,6HAA6H;IAC7H,yKAAyK;IACzK,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,MAAM,CAAC,CAAC;IAErD,MAAM,WAAW,GAEb,cAAc,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;IAE9C,MAAM,cAAc,GAAG,WAAW,eAC7B;QACD,OAAO,kCACF,WAAW,GACX,gBAAgB,CACpB;KACF,IACD,UAAU,EAAE,MAAM,IAClB,CAAC;IAEH,OAAO,cAAc,CAAC;AACxB,CAAC,CAAC;AAEF,MAAM,mBAAmB,GAAG,CAAC,MAAe,EAA0B,EAAE;IACtE,MAAM,mBAAmB,GAAG;QAC1B,mBAAmB;QACnB,gBAAgB;QAChB,cAAc;QACd,sBAAsB;QACtB,mBAAmB;QACnB,oBAAoB;QACpB,iBAAiB;QACjB,qBAAqB;QACrB,kBAAkB;QAClB,mBAAmB;QACnB,gBAAgB;QAChB,aAAa;QACb,OAAO;KACR,CAAC;IACF,MAAM,SAAS,GAAG,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC;IAClD,OAAO,mBAAmB,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE;;QAC7C,GAAG,CAAC,GAAG,CAAC,GAAG,MAAA,SAAS,CAAC,OAAO,0CAAG,GAAG,CAAC,CAAC;QACpC,OAAO,GAAG,CAAC;IACb,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n BaseSlots,\n ITheme,\n ThemeGenerator,\n createTheme,\n getColorFromString,\n themeRulesStandardCreator\n} from '@fluentui/react';\nimport { darkTheme, lightTheme } from './themes';\n\n/**\n * Generate a v8 theme from a given accent color and dark/light variant.\n *\n * @internal\n */\nexport const _generateTheme = (accentColor: string, variant: 'light' | 'dark'): ITheme => {\n const isDark = variant === 'dark';\n\n const primaryColor = getColorFromString(accentColor);\n if (!primaryColor) {\n throw new Error(`Could not parse primary color: ${accentColor}`);\n }\n const backgroundColor = getColorFromString(isDark ? '#252423' : '#ffffff');\n if (!backgroundColor) {\n throw new Error(`Could not parse background color: ${isDark ? '#252423' : '#ffffff'}`);\n }\n\n // Generate theme from base colors. This API is mostly undocumented and used internally by Fluent.\n // For usage, see: https://github.com/microsoft/fluentui/blob/88efc19c9513db18cb5b7c63fa0f47ba496755a2/packages/react/src/components/ThemeGenerator/ThemeGenerator.ts\n const themeRules = themeRulesStandardCreator();\n ThemeGenerator.insureSlots(themeRules, isDark);\n ThemeGenerator.setSlot(themeRules[BaseSlots[BaseSlots.primaryColor]], primaryColor, isDark, true, true);\n ThemeGenerator.setSlot(themeRules[BaseSlots[BaseSlots.backgroundColor]], backgroundColor, isDark, true, true);\n\n // There is a bug in fluentv8 theme generator that causes the foregroundColor to be generated incorrectly: https://github.com/microsoft/fluentui/issues/29853.\n // Ideally we could do: ThemeGenerator.setSlot(themeRules[BaseSlots[foregroundColor]], colors.textColor, isDark, true, true);\n // Until this fluent bug is fixed, use manually calculated foreground colors (this result is the same as the result of the color calcuation the above line would return).\n const foregroundColors = getForegroundColors(isDark);\n\n const themeAsJson: {\n [key: string]: string;\n } = ThemeGenerator.getThemeAsJson(themeRules);\n\n const generatedTheme = createTheme({\n ...{\n palette: {\n ...themeAsJson,\n ...foregroundColors\n }\n },\n isInverted: isDark\n });\n\n return generatedTheme;\n};\n\nconst getForegroundColors = (isDark: boolean): Record<string, string> => {\n const foregroundColorKeys = [\n 'neutralLighterAlt',\n 'neutralLighter',\n 'neutralLight',\n 'neutralQuaternaryAlt',\n 'neutralQuaternary',\n 'neutralTertiaryAlt',\n 'neutralTertiary',\n 'neutralSecondaryAlt',\n 'neutralSecondary',\n 'neutralPrimaryAlt',\n 'neutralPrimary',\n 'neutralDark',\n 'black'\n ];\n const baseTheme = isDark ? darkTheme : lightTheme;\n return foregroundColorKeys.reduce((acc, key) => {\n acc[key] = baseTheme.palette?.[key];\n return acc;\n }, {});\n};\n"]}
1
+ {"version":3,"file":"generateTheme.js","sourceRoot":"","sources":["../../../../../../react-components/src/theming/generateTheme.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EACL,SAAS,EAGT,cAAc,EACd,WAAW,EACX,kBAAkB,EAClB,yBAAyB,EAC1B,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEjD;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,WAAmB,EAAE,OAAyB,EAAU,EAAE;IACvF,MAAM,MAAM,GAAG,OAAO,KAAK,MAAM,CAAC;IAElC,MAAM,YAAY,GAAG,kBAAkB,CAAC,WAAW,CAAC,CAAC;IACrD,IAAI,CAAC,YAAY,EAAE,CAAC;QAClB,MAAM,IAAI,KAAK,CAAC,kCAAkC,WAAW,EAAE,CAAC,CAAC;IACnE,CAAC;IACD,MAAM,eAAe,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAC3E,IAAI,CAAC,eAAe,EAAE,CAAC;QACrB,MAAM,IAAI,KAAK,CAAC,qCAAqC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC;IACzF,CAAC;IAED,kGAAkG;IAClG,qKAAqK;IACrK,MAAM,UAAU,GAAG,yBAAyB,EAAE,CAAC;IAC/C,cAAc,CAAC,WAAW,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;IAC/C,cAAc,CAAC,OAAO,CAAC,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,YAAY,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IACxG,cAAc,CAAC,OAAO,CAAC,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,EAAE,eAAe,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IAE9G,8JAA8J;IAC9J,6HAA6H;IAC7H,yKAAyK;IACzK,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,MAAM,CAAC,CAAC;IAErD,MAAM,WAAW,GAEb,cAAc,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;IAE9C,MAAM,cAAc,GAAG,WAAW,eAC7B;QACD,OAAO,kCACF,WAAW,GACX,gBAAgB,CACpB;KACF,IACD,UAAU,EAAE,MAAM,IAClB,CAAC;IAEH,OAAO,cAAc,CAAC;AACxB,CAAC,CAAC;AAEF,MAAM,mBAAmB,GAAG,CAAC,MAAe,EAA0B,EAAE;IACtE,MAAM,mBAAmB,GAAG;QAC1B,mBAAmB;QACnB,gBAAgB;QAChB,cAAc;QACd,sBAAsB;QACtB,mBAAmB;QACnB,oBAAoB;QACpB,iBAAiB;QACjB,qBAAqB;QACrB,kBAAkB;QAClB,mBAAmB;QACnB,gBAAgB;QAChB,aAAa;QACb,OAAO;KACR,CAAC;IACF,MAAM,SAAS,GAAG,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC;IAClD,OAAO,mBAAmB,CAAC,MAAM,CAAC,CAAC,GAA2B,EAAE,GAAG,EAAE,EAAE;;QACrE,MAAM,CAAC,GAAG,GAAqB,CAAC;QAChC,MAAM,GAAG,GAAG,MAAA,SAAS,CAAC,OAAO,0CAAG,CAAC,CAAC,CAAC;QACnC,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;YACtB,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC;QACf,CAAC;QACD,OAAO,GAAG,CAAC;IACb,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n BaseSlots,\n IPalette,\n ITheme,\n ThemeGenerator,\n createTheme,\n getColorFromString,\n themeRulesStandardCreator\n} from '@fluentui/react';\nimport { darkTheme, lightTheme } from './themes';\n\n/**\n * Generate a v8 theme from a given accent color and dark/light variant.\n *\n * @internal\n */\nexport const _generateTheme = (accentColor: string, variant: 'light' | 'dark'): ITheme => {\n const isDark = variant === 'dark';\n\n const primaryColor = getColorFromString(accentColor);\n if (!primaryColor) {\n throw new Error(`Could not parse primary color: ${accentColor}`);\n }\n const backgroundColor = getColorFromString(isDark ? '#252423' : '#ffffff');\n if (!backgroundColor) {\n throw new Error(`Could not parse background color: ${isDark ? '#252423' : '#ffffff'}`);\n }\n\n // Generate theme from base colors. This API is mostly undocumented and used internally by Fluent.\n // For usage, see: https://github.com/microsoft/fluentui/blob/88efc19c9513db18cb5b7c63fa0f47ba496755a2/packages/react/src/components/ThemeGenerator/ThemeGenerator.ts\n const themeRules = themeRulesStandardCreator();\n ThemeGenerator.insureSlots(themeRules, isDark);\n ThemeGenerator.setSlot(themeRules[BaseSlots[BaseSlots.primaryColor]], primaryColor, isDark, true, true);\n ThemeGenerator.setSlot(themeRules[BaseSlots[BaseSlots.backgroundColor]], backgroundColor, isDark, true, true);\n\n // There is a bug in fluentv8 theme generator that causes the foregroundColor to be generated incorrectly: https://github.com/microsoft/fluentui/issues/29853.\n // Ideally we could do: ThemeGenerator.setSlot(themeRules[BaseSlots[foregroundColor]], colors.textColor, isDark, true, true);\n // Until this fluent bug is fixed, use manually calculated foreground colors (this result is the same as the result of the color calcuation the above line would return).\n const foregroundColors = getForegroundColors(isDark);\n\n const themeAsJson: {\n [key: string]: string;\n } = ThemeGenerator.getThemeAsJson(themeRules);\n\n const generatedTheme = createTheme({\n ...{\n palette: {\n ...themeAsJson,\n ...foregroundColors\n }\n },\n isInverted: isDark\n });\n\n return generatedTheme;\n};\n\nconst getForegroundColors = (isDark: boolean): Record<string, string> => {\n const foregroundColorKeys = [\n 'neutralLighterAlt',\n 'neutralLighter',\n 'neutralLight',\n 'neutralQuaternaryAlt',\n 'neutralQuaternary',\n 'neutralTertiaryAlt',\n 'neutralTertiary',\n 'neutralSecondaryAlt',\n 'neutralSecondary',\n 'neutralPrimaryAlt',\n 'neutralPrimary',\n 'neutralDark',\n 'black'\n ];\n const baseTheme = isDark ? darkTheme : lightTheme;\n return foregroundColorKeys.reduce((acc: Record<string, string>, key) => {\n const k = key as keyof IPalette;\n const val = baseTheme.palette?.[k];\n if (val !== undefined) {\n acc[k] = val;\n }\n return acc;\n }, {});\n};\n"]}
package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/ChatButton/NotificationIcon.js CHANGED
@@ -14,7 +14,7 @@ export const NotificationIcon = (props) => {
14
14
  }
15
15
  else {
16
16
  const textNumberOfMessages = numberOfMessages < 9 ? numberOfMessages : '9+';
17
- return (React.createElement(Text, { role: 'status', "aria-label": textNumberOfMessages + label, styles: notificationTextStyles(theme) }, textNumberOfMessages));
17
+ return (React.createElement(Text, { role: 'status', "aria-label": textNumberOfMessages + (label !== null && label !== void 0 ? label : ''), styles: notificationTextStyles(theme) }, textNumberOfMessages));
18
18
  }
19
19
  };
20
20
  return (React.createElement(Stack, { "data-ui-id": "call-with-chat-composite-chat-button-unread-icon", horizontalAlign: "center", verticalAlign: "center", styles: notificationIconContainerStyles(theme) },
package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/ChatButton/NotificationIcon.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NotificationIcon.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallWithChatComposite/ChatButton/NotificationIcon.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAqC,eAAe,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAS5G;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAe,EAAE;IAC5E,MAAM,EAAE,iBAAiB,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAC3C,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,YAAY,GAAG,CAAC,gBAAgB,EAAe,EAAE;QACrD,IAAI,gBAAgB,GAAG,CAAC,EAAE,CAAC;YACzB,OAAO,yCAAK,CAAC;QACf,CAAC;aAAM,CAAC;YACN,MAAM,oBAAoB,GAAG,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC;YAC5E,OAAO,CACL,oBAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,gBAAc,oBAAoB,GAAG,KAAK,EAAE,MAAM,EAAE,sBAAsB,CAAC,KAAK,CAAC,IAClG,oBAAoB,CAChB,CACR,CAAC;QACJ,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,kBACO,kDAAkD,EAC7D,eAAe,EAAC,QAAQ,EACxB,aAAa,EAAC,QAAQ,EACtB,MAAM,EAAE,+BAA+B,CAAC,KAAK,CAAC;QAE9C,oBAAC,KAAK,QAAE,YAAY,CAAC,iBAAiB,CAAC,CAAS,CAC1C,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,0BAA0B,GAAG,KAAK,CAAC;AACzC,MAAM,mBAAmB,GAAG,CAAC,CAAC;AAE9B,MAAM,+BAA+B,GAAG,eAAe,CACrD,CAAC,KAAa,EAAe,EAAE,CAAC,CAAC;IAC/B,IAAI,EAAE;QACJ,YAAY,EAAE,GAAG,mBAAmB,KAAK,EAAE,qDAAqD;QAChG,MAAM,EAAE,GAAG,mBAAmB,KAAK;QACnC,QAAQ,EAAE,GAAG,mBAAmB,KAAK,EAAE,sIAAsI;QAC7K,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;QACtC,MAAM,EAAE,uBAAuB,EAAE,gCAAgC;QACjE,OAAO,EAAE,GAAG,0BAA0B,KAAK;QAE3C,kEAAkE;QAClE,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,IAAI,GAAG,GAAG,0BAA0B,GAAG,CAAC,KAAK;QAClD,IAAI,EAAE,GAAG,GAAG,GAAG,0BAA0B,GAAG,CAAC,KAAK;KACnD;CACF,CAAC,CACH,CAAC;AAEF,MAAM,sBAAsB,GAAG,eAAe,CAC5C,CAAC,KAAa,EAAgB,EAAE,CAAC,CAAC;IAChC,IAAI,EAAE;QACJ,KAAK,EAAE,OAAO;QACd,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;KACtC;CACF,CAAC,CACH,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { IIconStyles, IStackStyles, ITheme, memoizeFunction, Stack, useTheme, Text } from '@fluentui/react';\n\n/**\n * @private\n */\nexport type NotificationIconProps = {\n chatMessagesCount: number;\n label?: string;\n};\n/**\n * @private\n */\nexport const NotificationIcon = (props: NotificationIconProps): JSX.Element => {\n const { chatMessagesCount, label } = props;\n const theme = useTheme();\n const renderNumber = (numberOfMessages): JSX.Element => {\n if (numberOfMessages < 1) {\n return <></>;\n } else {\n const textNumberOfMessages = numberOfMessages < 9 ? numberOfMessages : '9+';\n return (\n <Text role={'status'} aria-label={textNumberOfMessages + label} styles={notificationTextStyles(theme)}>\n {textNumberOfMessages}\n </Text>\n );\n }\n };\n\n return (\n <Stack\n data-ui-id=\"call-with-chat-composite-chat-button-unread-icon\"\n horizontalAlign=\"center\"\n verticalAlign=\"center\"\n styles={notificationIconContainerStyles(theme)}\n >\n <Stack>{renderNumber(chatMessagesCount)}</Stack>\n </Stack>\n );\n};\n\nconst notificationIconPaddingREM = 0.225;\nconst notificationSizeREM = 1;\n\nconst notificationIconContainerStyles = memoizeFunction(\n (theme: ITheme): IIconStyles => ({\n root: {\n borderRadius: `${notificationSizeREM}rem`, // Create a css circle. This should match the height.\n height: `${notificationSizeREM}rem`,\n minWidth: `${notificationSizeREM}rem`, // use min-width over width as we want to extend the width of the notification icon when contents is more than one character (e.g. 9+)\n background: theme.palette.themePrimary,\n border: `0.0625rem solid white`, // border should always be white\n padding: `${notificationIconPaddingREM}rem`,\n\n // positioning to place the badge within the button appropriately.\n position: 'absolute',\n top: `-${0.5 - notificationIconPaddingREM / 2}rem`,\n left: `${0.5 + notificationIconPaddingREM / 2}rem`\n }\n })\n);\n\nconst notificationTextStyles = memoizeFunction(\n (theme: ITheme): IStackStyles => ({\n root: {\n color: 'white',\n fontSize: theme.fonts.xSmall.fontSize\n }\n })\n);\n"]}
1
+ {"version":3,"file":"NotificationIcon.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallWithChatComposite/ChatButton/NotificationIcon.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAqC,eAAe,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAS5G;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAe,EAAE;IAC5E,MAAM,EAAE,iBAAiB,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAC3C,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,YAAY,GAAG,CAAC,gBAAwB,EAAe,EAAE;QAC7D,IAAI,gBAAgB,GAAG,CAAC,EAAE,CAAC;YACzB,OAAO,yCAAK,CAAC;QACf,CAAC;aAAM,CAAC;YACN,MAAM,oBAAoB,GAAG,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC;YAC5E,OAAO,CACL,oBAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,gBAAc,oBAAoB,GAAG,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,CAAC,EAAE,MAAM,EAAE,sBAAsB,CAAC,KAAK,CAAC,IAC1G,oBAAoB,CAChB,CACR,CAAC;QACJ,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,kBACO,kDAAkD,EAC7D,eAAe,EAAC,QAAQ,EACxB,aAAa,EAAC,QAAQ,EACtB,MAAM,EAAE,+BAA+B,CAAC,KAAK,CAAC;QAE9C,oBAAC,KAAK,QAAE,YAAY,CAAC,iBAAiB,CAAC,CAAS,CAC1C,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,0BAA0B,GAAG,KAAK,CAAC;AACzC,MAAM,mBAAmB,GAAG,CAAC,CAAC;AAE9B,MAAM,+BAA+B,GAAG,eAAe,CACrD,CAAC,KAAa,EAAe,EAAE,CAAC,CAAC;IAC/B,IAAI,EAAE;QACJ,YAAY,EAAE,GAAG,mBAAmB,KAAK,EAAE,qDAAqD;QAChG,MAAM,EAAE,GAAG,mBAAmB,KAAK;QACnC,QAAQ,EAAE,GAAG,mBAAmB,KAAK,EAAE,sIAAsI;QAC7K,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;QACtC,MAAM,EAAE,uBAAuB,EAAE,gCAAgC;QACjE,OAAO,EAAE,GAAG,0BAA0B,KAAK;QAE3C,kEAAkE;QAClE,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,IAAI,GAAG,GAAG,0BAA0B,GAAG,CAAC,KAAK;QAClD,IAAI,EAAE,GAAG,GAAG,GAAG,0BAA0B,GAAG,CAAC,KAAK;KACnD;CACF,CAAC,CACH,CAAC;AAEF,MAAM,sBAAsB,GAAG,eAAe,CAC5C,CAAC,KAAa,EAAgB,EAAE,CAAC,CAAC;IAChC,IAAI,EAAE;QACJ,KAAK,EAAE,OAAO;QACd,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;KACtC;CACF,CAAC,CACH,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { IIconStyles, IStackStyles, ITheme, memoizeFunction, Stack, useTheme, Text } from '@fluentui/react';\n\n/**\n * @private\n */\nexport type NotificationIconProps = {\n chatMessagesCount: number;\n label?: string;\n};\n/**\n * @private\n */\nexport const NotificationIcon = (props: NotificationIconProps): JSX.Element => {\n const { chatMessagesCount, label } = props;\n const theme = useTheme();\n const renderNumber = (numberOfMessages: number): JSX.Element => {\n if (numberOfMessages < 1) {\n return <></>;\n } else {\n const textNumberOfMessages = numberOfMessages < 9 ? numberOfMessages : '9+';\n return (\n <Text role={'status'} aria-label={textNumberOfMessages + (label ?? '')} styles={notificationTextStyles(theme)}>\n {textNumberOfMessages}\n </Text>\n );\n }\n };\n\n return (\n <Stack\n data-ui-id=\"call-with-chat-composite-chat-button-unread-icon\"\n horizontalAlign=\"center\"\n verticalAlign=\"center\"\n styles={notificationIconContainerStyles(theme)}\n >\n <Stack>{renderNumber(chatMessagesCount)}</Stack>\n </Stack>\n );\n};\n\nconst notificationIconPaddingREM = 0.225;\nconst notificationSizeREM = 1;\n\nconst notificationIconContainerStyles = memoizeFunction(\n (theme: ITheme): IIconStyles => ({\n root: {\n borderRadius: `${notificationSizeREM}rem`, // Create a css circle. This should match the height.\n height: `${notificationSizeREM}rem`,\n minWidth: `${notificationSizeREM}rem`, // use min-width over width as we want to extend the width of the notification icon when contents is more than one character (e.g. 9+)\n background: theme.palette.themePrimary,\n border: `0.0625rem solid white`, // border should always be white\n padding: `${notificationIconPaddingREM}rem`,\n\n // positioning to place the badge within the button appropriately.\n position: 'absolute',\n top: `-${0.5 - notificationIconPaddingREM / 2}rem`,\n left: `${0.5 + notificationIconPaddingREM / 2}rem`\n }\n })\n);\n\nconst notificationTextStyles = memoizeFunction(\n (theme: ITheme): IStackStyles => ({\n root: {\n color: 'white',\n fontSize: theme.fonts.xSmall.fontSize\n }\n })\n);\n"]}