npm - @azure/communication-react - Versions diffs - 1.11.0-beta.1 → 1.11.0 - Mend

@azure/communication-react 1.11.0-beta.1 → 1.11.0

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 (832) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatMessageContent.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ChatMessage/ChatMessageContent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) /\nimport { useEffect } from 'react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { Parser, ProcessNodeDefinitions, IsValidNodeDefinitions, ProcessingInstructionType } from 'html-to-react';\nimport Linkify from 'react-linkify';\nimport { ChatMessage } from '../../types/ChatMessage';\n/ @conditional-compile-remove(data-loss-prevention) /\nimport { BlockedMessage } from '../../types/ChatMessage';\nimport { Link } from '@fluentui/react';\n/ @conditional-compile-remove(mention) /\nimport { MentionDisplayOptions, Mention } from '../MentionPopover';\n\n/ @conditional-compile-remove(data-loss-prevention) /\nimport { FontIcon, Stack } from '@fluentui/react';\nimport { MessageThreadStrings } from '../MessageThread';\n/ @conditional-compile-remove(teams-inline-images-and-file-sharing) /\nimport { FileMetadata } from '../FileDownloadCards';\nimport LiveMessage from '../Announcer/LiveMessage';\n/ @conditional-compile-remove(mention) /\nimport { defaultOnMentionRender } from './MentionRenderer';\nimport DOMPurify from 'dompurify';\ntype ChatMessageContentProps = {\n message: ChatMessage;\n strings: MessageThreadStrings;\n / @conditional-compile-remove(mention) /\n mentionDisplayOptions?: MentionDisplayOptions;\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n attachmentsMap?: Record<string, string>;\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n onFetchAttachment?: (attachments: FileMetadata[], messageId: string) => Promise<void>;\n / @conditional-compile-remove(image-gallery) /\n onInlineImageClicked?: (attachmentId: string) => void;\n};\n\n/ @conditional-compile-remove(data-loss-prevention) /\ntype BlockedMessageContentProps = {\n message: BlockedMessage;\n strings: MessageThreadStrings;\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};\nconst MessageContentWithLiveAria = (props: MessageContentWithLiveAriaProps): JSX.Element => {\n return <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};\nconst MessageContentAsRichTextHTML = (props: ChatMessageContentProps): JSX.Element => {\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n useEffect(() => {\n const attachments = props.message.attachedFilesMetadata?.filter(fileMetadata => {\n return fileMetadata.attachmentType === 'inlineImage';\n });\n if (props.attachmentsMap && attachments) {\n attachments.forEach(fileMetadata => {\n if (props.onFetchAttachment && props.attachmentsMap && props.attachmentsMap[fileMetadata.id] === undefined) {\n props.onFetchAttachment([fileMetadata], props.message.messageId);\n return;\n }\n });\n }\n }, [props]);\n return <MessageContentWithLiveAria message={props.message} liveMessage={generateLiveMessage(props)} ariaLabel={messageContentAriaText(props)} content={processHtmlToReact(props)} />;\n};\nconst MessageContentAsText = (props: ChatMessageContentProps): JSX.Element => {\n return <MessageContentWithLiveAria message={props.message} liveMessage={generateLiveMessage(props)} ariaLabel={messageContentAriaText(props)} content={<Linkify componentDecorator={(decoratedHref: string, decoratedText: string, key: number) => {\n return <Link target=\"_blank\" href={decoratedHref} key={key}>\n {decoratedText}\n </Link>;\n }}>\n {props.message.content}\n </Linkify>} />;\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 = props.message.warningText === undefined ? props.strings.blockedWarningText : props.message.warningText;\n const blockedMessageLink = props.message.link;\n const blockedMessageLinkText = blockedMessageLink ? props.message.linkText ?? props.strings.blockedWarningLinkText : '';\n const liveAuthor = props.message.mine \|\| props.message.senderDisplayName === undefined ? '' : props.message.senderDisplayName;\n const liveBlockedWarningText = `${liveAuthor} ${blockedMessage} ${blockedMessageLinkText}`;\n return <MessageContentWithLiveAria message={props.message} liveMessage={liveBlockedWarningText} ariaLabel={liveBlockedWarningText} content={<Stack horizontal wrap>\n {Icon}\n {blockedMessage && <p>{blockedMessage}</p>}\n {blockedMessageLink && <Link target={'_blank'} href={blockedMessageLink}>\n {blockedMessageLinkText}\n </Link>}\n </Stack>} />;\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};\nconst generateLiveMessage = (props: ChatMessageContentProps): string => {\n const liveAuthor = _formatString(props.strings.liveAuthorIntro, {\n author: `${props.message.senderDisplayName}`\n });\n return `${props.message.editedOn ? props.strings.editedTag : ''} ${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content \|\| '')} `;\n};\nconst messageContentAriaText = (props: ChatMessageContentProps): string \| undefined => {\n // Strip all html tags from the content for aria.\n\n return props.message.content ? props.message.mine ? _formatString(props.strings.messageContentMineAriaText, {\n message: DOMPurify.sanitize(props.message.content, {\n ALLOWED_TAGS: []\n })\n }) : _formatString(props.strings.messageContentAriaText, {\n author: `${props.message.senderDisplayName}`,\n message: DOMPurify.sanitize(props.message.content, {\n ALLOWED_TAGS: []\n })\n }) : undefined;\n};\nconst processNodeDefinitions = ProcessNodeDefinitions();\nconst htmlToReactParser = Parser();\n\n/ @conditional-compile-remove(teams-inline-images-and-file-sharing) /\nconst processInlineImage = (props: ChatMessageContentProps): ProcessingInstructionType => ({\n // Custom <img> processing\n shouldProcessNode: (node): boolean => {\n function isImageNode(file: FileMetadata): boolean {\n return file.attachmentType === 'inlineImage' && file.id === node.attribs.id;\n }\n\n // Process img node with id in attachments list\n return node.name && node.name === 'img' && node.attribs && node.attribs.id && props.message.attachedFilesMetadata?.find(isImageNode);\n },\n processNode: (node, children, index): JSX.Element => {\n node.attribs = {\n ...node.attribs,\n 'aria-label': node.attribs.name\n };\n // logic to check id in map/list\n if (props.attachmentsMap && node.attribs.id in props.attachmentsMap) {\n node.attribs = {\n ...node.attribs,\n src: props.attachmentsMap[node.attribs.id]\n };\n }\n / @conditional-compile-remove(image-gallery) /\n const handleOnClick = (): void => {\n props.onInlineImageClicked && props.onInlineImageClicked(node.attribs.id);\n };\n / @conditional-compile-remove(image-gallery) /\n return <span data-ui-id={node.attribs.id} onClick={handleOnClick} tabIndex={0} role=\"button\" style={{\n cursor: 'pointer'\n }} onKeyDown={e => {\n if (e.key === 'Enter') {\n handleOnClick();\n }\n }}>\n {processNodeDefinitions.processDefaultNode(node, children, index)}\n </span>;\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 {\n id\n } = 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});\nconst processHtmlToReact = (props: ChatMessageContentProps): JSX.Element => {\n const steps: ProcessingInstructionType[] = [/ @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n processInlineImage(props), / @conditional-compile-remove(mention) */\n processMention(props), {\n // Process everything else in the default way\n shouldProcessNode: IsValidNodeDefinitions.alwaysValid,\n processNode: processNodeDefinitions.processDefaultNode\n }];\n return htmlToReactParser.parseWithInstructions(props.message.content ?? '', IsValidNodeDefinitions.alwaysValid, steps);\n};\"../../../../acs-ui-common/src\""]}
1	+ {"version":3,"file":"ChatMessageContent.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/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 { _formatString } from '@internal/acs-ui-common';\nimport { Parser, ProcessNodeDefinitions, IsValidNodeDefinitions, ProcessingInstructionType } from 'html-to-react';\nimport Linkify from 'react-linkify';\nimport { ChatMessage } from '../../types/ChatMessage';\nimport { Link } from '@fluentui/react';\nimport { MessageThreadStrings } from '../MessageThread';\nimport LiveMessage from '../Announcer/LiveMessage';\nimport DOMPurify from 'dompurify';\ntype ChatMessageContentProps = {\n message: ChatMessage;\n strings: MessageThreadStrings;\n};\ntype MessageContentWithLiveAriaProps = {\n message: ChatMessage;\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};\nconst MessageContentWithLiveAria = (props: MessageContentWithLiveAriaProps): JSX.Element => {\n return <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};\nconst MessageContentAsRichTextHTML = (props: ChatMessageContentProps): JSX.Element => {\n const {} = props;\n return <MessageContentWithLiveAria message={props.message} liveMessage={generateLiveMessage(props)} ariaLabel={messageContentAriaText(props)} content={processHtmlToReact(props)} />;\n};\nconst MessageContentAsText = (props: ChatMessageContentProps): JSX.Element => {\n return <MessageContentWithLiveAria message={props.message} liveMessage={generateLiveMessage(props)} ariaLabel={messageContentAriaText(props)} content={<Linkify componentDecorator={(decoratedHref: string, decoratedText: string, key: number) => {\n return <Link target=\"_blank\" href={decoratedHref} key={key}>\n {decoratedText}\n </Link>;\n }}>\n {props.message.content}\n </Linkify>} />;\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};\nconst generateLiveMessage = (props: ChatMessageContentProps): string => {\n const liveAuthor = _formatString(props.strings.liveAuthorIntro, {\n author: `${props.message.senderDisplayName}`\n });\n return `${props.message.editedOn ? props.strings.editedTag : ''} ${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content \|\| '')} `;\n};\nconst messageContentAriaText = (props: ChatMessageContentProps): string \| undefined => {\n // Strip all html tags from the content for aria.\n\n return props.message.content ? props.message.mine ? _formatString(props.strings.messageContentMineAriaText, {\n message: DOMPurify.sanitize(props.message.content, {\n ALLOWED_TAGS: []\n })\n }) : _formatString(props.strings.messageContentAriaText, {\n author: `${props.message.senderDisplayName}`,\n message: DOMPurify.sanitize(props.message.content, {\n ALLOWED_TAGS: []\n })\n }) : undefined;\n};\nconst processNodeDefinitions = ProcessNodeDefinitions();\nconst htmlToReactParser = Parser();\nconst processHtmlToReact = (props: ChatMessageContentProps): JSX.Element => {\n const steps: ProcessingInstructionType[] = [{\n // Process everything else in the default way\n shouldProcessNode: IsValidNodeDefinitions.alwaysValid,\n processNode: processNodeDefinitions.processDefaultNode\n }];\n return htmlToReactParser.parseWithInstructions(props.message.content ?? '', IsValidNodeDefinitions.alwaysValid, steps);\n};"]}

package/dist/dist-esm/react-components/src/components/ChatMessage/DefaultSystemMessage.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { MessageRenderer } from '../MessageThread';
+/**
+ * @private
+ */
+export declare const DefaultSystemMessage: MessageRenderer;
+//# sourceMappingURL=DefaultSystemMessage.d.ts.map

package/dist/dist-esm/react-components/src/components/ChatMessage/DefaultSystemMessage.js ADDED Viewed

@@ -0,0 +1,34 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React from 'react';
+import { SystemMessage as SystemMessageComponent } from './../SystemMessage';
+import { useLocale } from '../../localization/LocalizationProvider';
+/**
+ * @private
+ */
+export const DefaultSystemMessage = (props) => {
+    var _a;
+    const message = props.message;
+    switch (message.messageType) {
+        case 'system':
+            switch (message.systemMessageType) {
+                case 'content':
+                    return React.createElement(SystemMessageComponent, { iconName: (message.iconName ? message.iconName : ''), content: (_a = message.content) !== null && _a !== void 0 ? _a : '', containerStyle: props === null || props === void 0 ? void 0 : props.messageContainerStyle });
+                case 'participantAdded':
+                case 'participantRemoved':
+                    return React.createElement(ParticipantSystemMessageComponent, { message: message, style: props.messageContainerStyle, defaultName: props.strings.noDisplayNameSub });
+            }
+    }
+    return React.createElement(React.Fragment, null);
+};
+const ParticipantSystemMessageComponent = ({ message, style, defaultName }) => {
+    const { strings } = useLocale();
+    const participantsStr = generateParticipantsStr(message.participants, defaultName);
+    const messageSuffix = message.systemMessageType === 'participantAdded' ? strings.messageThread.participantJoined : strings.messageThread.participantLeft;
+    if (participantsStr !== '') {
+        return React.createElement(SystemMessageComponent, { iconName: (message.iconName ? message.iconName : ''), content: `${participantsStr} ${messageSuffix}`, containerStyle: style });
+    }
+    return React.createElement(React.Fragment, null);
+};
+const generateParticipantsStr = (participants, defaultName) => participants.map(participant => `${!participant.displayName || participant.displayName === '' ? defaultName : participant.displayName}`).join(', ');
+//# sourceMappingURL=DefaultSystemMessage.js.map

package/dist/dist-esm/react-components/src/components/ChatMessage/DefaultSystemMessage.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DefaultSystemMessage.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ChatMessage/DefaultSystemMessage.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,aAAa,IAAI,sBAAsB,EAA0B,MAAM,oBAAoB,CAAC;AACrG,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAEpE;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAoB,CAAC,KAAmB,EAAE,EAAE;;IAC3E,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;IAC9B,QAAQ,OAAO,CAAC,WAAW,EAAE,CAAC;QAC5B,KAAK,QAAQ;YACX,QAAQ,OAAO,CAAC,iBAAiB,EAAE,CAAC;gBAClC,KAAK,SAAS;oBACZ,OAAO,oBAAC,sBAAsB,IAAC,QAAQ,EAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAA4B,EAAE,OAAO,EAAE,MAAA,OAAO,CAAC,OAAO,mCAAI,EAAE,EAAE,cAAc,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,qBAAqB,GAAI,CAAC;gBACpM,KAAK,kBAAkB,CAAC;gBACxB,KAAK,oBAAoB;oBACvB,OAAO,oBAAC,iCAAiC,IAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,qBAAqB,EAAE,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB,GAAI,CAAC;YACpJ,CAAC;IACL,CAAC;IACD,OAAO,yCAAK,CAAC;AACf,CAAC,CAAC;AACF,MAAM,iCAAiC,GAAG,CAAC,EACzC,OAAO,EACP,KAAK,EACL,WAAW,EAKZ,EAAe,EAAE;IAChB,MAAM,EACJ,OAAO,EACR,GAAG,SAAS,EAAE,CAAC;IAChB,MAAM,eAAe,GAAG,uBAAuB,CAAC,OAAO,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IACnF,MAAM,aAAa,GAAG,OAAO,CAAC,iBAAiB,KAAK,kBAAkB,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,eAAe,CAAC;IACzJ,IAAI,eAAe,KAAK,EAAE,EAAE,CAAC;QAC3B,OAAO,oBAAC,sBAAsB,IAAC,QAAQ,EAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAA4B,EAAE,OAAO,EAAE,GAAG,eAAe,IAAI,aAAa,EAAE,EAAE,cAAc,EAAE,KAAK,GAAI,CAAC;IAC7L,CAAC;IACD,OAAO,yCAAK,CAAC;AACf,CAAC,CAAC;AACF,MAAM,uBAAuB,GAAG,CAAC,YAAwC,EAAE,WAAmB,EAAU,EAAE,CAAC,YAAY,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,WAAW,CAAC,WAAW,IAAI,WAAW,CAAC,WAAW,KAAK,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _formatString } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { MessageProps, MessageRenderer, _ChatMessageProps } from '../MessageThread';\nimport { CommunicationParticipant, ComponentSlotStyle, ParticipantAddedSystemMessage, ParticipantRemovedSystemMessage } from '../../types';\nimport { SystemMessage as SystemMessageComponent, SystemMessageIconTypes } from './../SystemMessage';\nimport { useLocale } from '../../localization/LocalizationProvider';\n\n/**\n * @private\n */\nexport const DefaultSystemMessage: MessageRenderer = (props: MessageProps) => {\n const message = props.message;\n switch (message.messageType) {\n case 'system':\n switch (message.systemMessageType) {\n case 'content':\n return <SystemMessageComponent iconName={((message.iconName ? message.iconName : '') as SystemMessageIconTypes)} content={message.content ?? ''} containerStyle={props?.messageContainerStyle} />;\n case 'participantAdded':\n case 'participantRemoved':\n return <ParticipantSystemMessageComponent message={message} style={props.messageContainerStyle} defaultName={props.strings.noDisplayNameSub} />;\n }\n }\n return <></>;\n};\nconst ParticipantSystemMessageComponent = ({\n message,\n style,\n defaultName\n}: {\n message: ParticipantAddedSystemMessage | ParticipantRemovedSystemMessage;\n style?: ComponentSlotStyle;\n defaultName: string;\n}): JSX.Element => {\n const {\n strings\n } = useLocale();\n const participantsStr = generateParticipantsStr(message.participants, defaultName);\n const messageSuffix = message.systemMessageType === 'participantAdded' ? strings.messageThread.participantJoined : strings.messageThread.participantLeft;\n if (participantsStr !== '') {\n return <SystemMessageComponent iconName={((message.iconName ? message.iconName : '') as SystemMessageIconTypes)} content={`${participantsStr} ${messageSuffix}`} containerStyle={style} />;\n }\n return <></>;\n};\nconst generateParticipantsStr = (participants: CommunicationParticipant[], defaultName: string): string => participants.map(participant => `${!participant.displayName || participant.displayName === '' ? defaultName : participant.displayName}`).join(', ');"]}

package/dist/dist-esm/react-components/src/components/ChatMessage/FluentChatMessageComponentWrapper.d.ts ADDED Viewed

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { ChatMessage } from '../../types';
+import { ChatMessageComponentWrapperProps } from './ChatMessageComponentWrapper';
+/**
+ * Props for {@link FluentChatMessageComponentWrapper}
+ *
+ * @private
+ */
+type FluentChatMessageComponentWrapperProps = ChatMessageComponentWrapperProps & {
+    message: ChatMessage;
+};
+/**
+ * The component for rendering a chat message using Fluent UI components
+ * and handling default and custom renderers.
+ * This component handles rendering for chat message body, avatar and message status.
+ * The chat message body, avatar and message status should be shown for both default and custom renderers.
+ *
+ * @private
+ */
+export declare const FluentChatMessageComponentWrapper: (props: FluentChatMessageComponentWrapperProps) => JSX.Element;
+export {};
+//# sourceMappingURL=FluentChatMessageComponentWrapper.d.ts.map

package/dist/dist-esm/react-components/src/components/ChatMessage/FluentChatMessageComponentWrapper.js ADDED Viewed

@@ -0,0 +1,110 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React, { useCallback, useMemo } from 'react';
+import { gutterWithAvatar, gutterWithHiddenAvatar, noMessageStatusStyle, useChatMessageRenderStyles } from '../styles/MessageThread.styles';
+import { PersonaSize, mergeStyles, Persona } from '@fluentui/react';
+import { mergeClasses } from '@fluentui/react-components';
+import { createStyleFromV8Style } from '../styles/v8StyleShim';
+import { ChatMessageComponent } from './ChatMessageComponent';
+import { ChatMessage as FluentChatMessage, ChatMyMessage as FluentChatMyMessage } from '@fluentui-contrib/react-chat';
+/**
+ * The component for rendering a chat message using Fluent UI components
+ * and handling default and custom renderers.
+ * This component handles rendering for chat message body, avatar and message status.
+ * The chat message body, avatar and message status should be shown for both default and custom renderers.
+ *
+ * @private
+ */
+export const FluentChatMessageComponentWrapper = (props) => {
+    const { message, styles, shouldOverlapAvatarAndMessage, onRenderMessage, onRenderAvatar, showMessageStatus, onRenderMessageStatus, participantCount, readCount, onActionButtonClick, userId, defaultStatusRenderer, statusToRender } = props;
+    const chatMessageRenderStyles = useChatMessageRenderStyles();
+    const onRenderFileDownloadsMemo = useMemo(() => {
+        return undefined;
+    }, []);
+    // To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp
+    // needs to be regenerated), the dependency on "new Date().toDateString()"" is added.
+    const defaultChatMessageRenderer = useCallback((messageProps) => {
+        if (messageProps.message.messageType === 'chat') {
+            return React.createElement(ChatMessageComponent, Object.assign({}, messageProps, { message: messageProps.message, userId: userId, remoteParticipantsCount: participantCount ? participantCount - 1 : 0, shouldOverlapAvatarAndMessage: shouldOverlapAvatarAndMessage, onRenderAvatar: onRenderAvatar, showMessageStatus: showMessageStatus, messageStatus: messageProps.message.status, onActionButtonClick: onActionButtonClick }));
+        }
+        return React.createElement(React.Fragment, null);
+    }, [onActionButtonClick, onRenderAvatar, onRenderFileDownloadsMemo, participantCount, shouldOverlapAvatarAndMessage, showMessageStatus, userId,
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        new Date().toDateString()]);
+    const messageRenderer = useCallback((messageProps) => {
+        return onRenderMessage === undefined ? defaultChatMessageRenderer(Object.assign({}, messageProps)) : onRenderMessage(messageProps, defaultChatMessageRenderer);
+    }, [defaultChatMessageRenderer, onRenderMessage]);
+    const messageStatusRenderer = useCallback((onRenderMessageStatus, defaultStatusRenderer, showMessageStatus, participantCount, readCount) => {
+        return showMessageStatus && statusToRender ? onRenderMessageStatus ? onRenderMessageStatus({
+            status: message.status
+        }) : defaultStatusRenderer(message, participantCount !== null && participantCount !== void 0 ? participantCount : 0, readCount !== null && readCount !== void 0 ? readCount : 0, message.status) : React.createElement("div", { className: mergeStyles(noMessageStatusStyle) });
+    }, [message, statusToRender]);
+    const shouldShowAvatar = useMemo(() => {
+        return message.attached === 'top' || message.attached === false;
+    }, [message.attached]);
+    const attached = useMemo(() => {
+        return shouldShowAvatar ? 'top' : 'center';
+    }, [shouldShowAvatar]);
+    const myMessageRootProps = useMemo(() => {
+        return {
+            // myChatItemMessageContainer used in className and style prop as style prop can't handle CSS selectors
+            className: mergeClasses(chatMessageRenderStyles.rootMyMessage, chatMessageRenderStyles.rootCommon, mergeStyles(styles === null || styles === void 0 ? void 0 : styles.myChatItemMessageContainer)),
+            style: (styles === null || styles === void 0 ? void 0 : styles.myChatItemMessageContainer) !== undefined ? createStyleFromV8Style(styles === null || styles === void 0 ? void 0 : styles.myChatItemMessageContainer) : {},
+            role: 'none'
+        };
+    }, [chatMessageRenderStyles.rootCommon, chatMessageRenderStyles.rootMyMessage, styles === null || styles === void 0 ? void 0 : styles.myChatItemMessageContainer]);
+    const myMessageBodyProps = useMemo(() => {
+        return {
+            className: mergeClasses(chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage),
+            // make body not focusable to remove repetitions from narrators.
+            // inner components are already focusable
+            tabIndex: -1,
+            role: 'none'
+        };
+    }, [chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage]);
+    const myMessageStatusIcon = useMemo(() => {
+        var _a;
+        return React.createElement("div", { className: mergeStyles({
+                paddingLeft: '0.25rem'
+            }, (styles === null || styles === void 0 ? void 0 : styles.messageStatusContainer) ? styles.messageStatusContainer((_a = message.mine) !== null && _a !== void 0 ? _a : false) : '') }, message.status ? messageStatusRenderer(onRenderMessageStatus, defaultStatusRenderer, showMessageStatus, participantCount, readCount) : undefined);
+    }, [defaultStatusRenderer, message.mine, message.status, messageStatusRenderer, onRenderMessageStatus, participantCount, readCount, showMessageStatus, styles]);
+    const messageRootProps = useMemo(() => {
+        return {
+            className: mergeClasses(chatMessageRenderStyles.rootMessage, chatMessageRenderStyles.rootCommon)
+        };
+    }, [chatMessageRenderStyles.rootCommon, chatMessageRenderStyles.rootMessage]);
+    const messageBodyProps = useMemo(() => {
+        return {
+            // chatItemMessageContainer used in className and style prop as style prop can't handle CSS selectors
+            className: mergeClasses(chatMessageRenderStyles.bodyCommon, !shouldShowAvatar ? chatMessageRenderStyles.bodyWithoutAvatar : chatMessageRenderStyles.bodyWithAvatar, shouldOverlapAvatarAndMessage ? chatMessageRenderStyles.avatarOverlap : chatMessageRenderStyles.avatarNoOverlap, mergeStyles(styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer)),
+            style: (styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer) !== undefined ? createStyleFromV8Style(styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer) : {},
+            // make body not focusable to remove repetitions from narrators.
+            // inner components are already focusable
+            tabIndex: -1,
+            role: 'none'
+        };
+    }, [chatMessageRenderStyles.avatarNoOverlap, chatMessageRenderStyles.avatarOverlap, chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyWithAvatar, chatMessageRenderStyles.bodyWithoutAvatar, shouldOverlapAvatarAndMessage, shouldShowAvatar, styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer]);
+    const avatar = useMemo(() => {
+        const chatAvatarStyle = shouldShowAvatar ? gutterWithAvatar : gutterWithHiddenAvatar;
+        const personaOptions = {
+            hidePersonaDetails: true,
+            size: PersonaSize.size32,
+            text: message.senderDisplayName,
+            showOverflowTooltip: false
+        };
+        return React.createElement("div", { className: mergeStyles(chatAvatarStyle) }, onRenderAvatar ? onRenderAvatar === null || onRenderAvatar === void 0 ? void 0 : onRenderAvatar(message.senderId, personaOptions) : React.createElement(Persona, Object.assign({}, personaOptions)));
+    }, [message.senderDisplayName, message.senderId, onRenderAvatar, shouldShowAvatar]);
+    // Fluent UI message components are used here as for default message renderer,
+    // timestamp and author name should be shown but they aren't shown for custom renderer.
+    // More investigations are needed to check if this can be simplified with states.
+    // Status and avatar should be shown for both custom and default renderers.
+    if (message.mine === true) {
+        return React.createElement("div", null,
+            React.createElement(FluentChatMyMessage, { attached: attached, root: myMessageRootProps, body: myMessageBodyProps, statusIcon: myMessageStatusIcon }, messageRenderer(Object.assign({}, props))));
+    }
+    else {
+        return React.createElement("div", null,
+            React.createElement(FluentChatMessage, { attached: attached, root: messageRootProps, body: messageBodyProps, avatar: avatar }, messageRenderer(Object.assign({}, props))));
+    }
+};
+//# sourceMappingURL=FluentChatMessageComponentWrapper.js.map

package/dist/dist-esm/react-components/src/components/ChatMessage/FluentChatMessageComponentWrapper.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FluentChatMessageComponentWrapper.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ChatMessage/FluentChatMessageComponentWrapper.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageStatus, _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useMemo } from 'react';\nimport { MessageProps, _ChatMessageProps } from '../MessageThread';\nimport { ChatMessage } from '../../types';\nimport { gutterWithAvatar, gutterWithHiddenAvatar, noMessageStatusStyle, useChatMessageRenderStyles } from '../styles/MessageThread.styles';\nimport { IPersona, PersonaSize, mergeStyles, Persona } from '@fluentui/react';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { createStyleFromV8Style } from '../styles/v8StyleShim';\nimport { MessageStatusIndicatorProps } from '../MessageStatusIndicator';\nimport { ChatMessageComponentWrapperProps } from './ChatMessageComponentWrapper';\nimport { ChatMessageComponent } from './ChatMessageComponent';\nimport { ChatMessage as FluentChatMessage, ChatMyMessage as FluentChatMyMessage } from '@fluentui-contrib/react-chat';\n\n/**\n * Props for {@link FluentChatMessageComponentWrapper}\n *\n * @private\n */\ntype FluentChatMessageComponentWrapperProps = ChatMessageComponentWrapperProps & {\n message: ChatMessage;\n};\n\n/**\n * The component for rendering a chat message using Fluent UI components\n * and handling default and custom renderers.\n * This component handles rendering for chat message body, avatar and message status.\n * The chat message body, avatar and message status should be shown for both default and custom renderers.\n *\n * @private\n */\nexport const FluentChatMessageComponentWrapper = (props: FluentChatMessageComponentWrapperProps): JSX.Element => {\n const {\n message,\n styles,\n shouldOverlapAvatarAndMessage,\n onRenderMessage,\n onRenderAvatar,\n showMessageStatus,\n onRenderMessageStatus,\n participantCount,\n readCount,\n onActionButtonClick,\n userId,\n defaultStatusRenderer,\n statusToRender\n } = props;\n const chatMessageRenderStyles = useChatMessageRenderStyles();\n const onRenderFileDownloadsMemo = useMemo(() => {\n return undefined;\n }, []);\n\n // To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp\n // needs to be regenerated), the dependency on \"new Date().toDateString()\"\" is added.\n const defaultChatMessageRenderer = useCallback((messageProps: MessageProps) => {\n if (messageProps.message.messageType === 'chat') {\n return <ChatMessageComponent {...messageProps} message={messageProps.message} userId={userId} remoteParticipantsCount={participantCount ? participantCount - 1 : 0} shouldOverlapAvatarAndMessage={shouldOverlapAvatarAndMessage} onRenderAvatar={onRenderAvatar} showMessageStatus={showMessageStatus} messageStatus={messageProps.message.status} onActionButtonClick={onActionButtonClick} />;\n }\n return <></>;\n }, [onActionButtonClick, onRenderAvatar, onRenderFileDownloadsMemo, participantCount, shouldOverlapAvatarAndMessage, showMessageStatus, userId,\n // eslint-disable-next-line react-hooks/exhaustive-deps\n new Date().toDateString()]);\n const messageRenderer = useCallback((messageProps: MessageProps) => {\n return onRenderMessage === undefined ? defaultChatMessageRenderer({\n ...messageProps\n }) : onRenderMessage(messageProps, defaultChatMessageRenderer);\n }, [defaultChatMessageRenderer, onRenderMessage]);\n const messageStatusRenderer = useCallback((onRenderMessageStatus: ((messageStatusIndicatorProps: MessageStatusIndicatorProps) => JSX.Element | null) | undefined, defaultStatusRenderer: (message: ChatMessage, participantCount: number, readCount: number, status?: MessageStatus) => JSX.Element, showMessageStatus?: boolean, participantCount?: number, readCount?: number) => {\n return showMessageStatus && statusToRender ? onRenderMessageStatus ? onRenderMessageStatus({\n status: message.status\n }) : defaultStatusRenderer(message, participantCount ?? 0, readCount ?? 0, message.status) : <div className={mergeStyles(noMessageStatusStyle)} />;\n }, [message, statusToRender]);\n const shouldShowAvatar = useMemo(() => {\n return message.attached === 'top' || message.attached === false;\n }, [message.attached]);\n const attached = useMemo(() => {\n return shouldShowAvatar ? 'top' : 'center';\n }, [shouldShowAvatar]);\n const myMessageRootProps = useMemo(() => {\n return {\n // myChatItemMessageContainer used in className and style prop as style prop can't handle CSS selectors\n className: mergeClasses(chatMessageRenderStyles.rootMyMessage, chatMessageRenderStyles.rootCommon, mergeStyles(styles?.myChatItemMessageContainer)),\n style: styles?.myChatItemMessageContainer !== undefined ? createStyleFromV8Style(styles?.myChatItemMessageContainer) : {},\n role: 'none'\n };\n }, [chatMessageRenderStyles.rootCommon, chatMessageRenderStyles.rootMyMessage, styles?.myChatItemMessageContainer]);\n const myMessageBodyProps = useMemo(() => {\n return {\n className: mergeClasses(chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage),\n // make body not focusable to remove repetitions from narrators.\n // inner components are already focusable\n tabIndex: -1,\n role: 'none'\n };\n }, [chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage]);\n const myMessageStatusIcon = useMemo(() => {\n return <div className={mergeStyles({\n paddingLeft: '0.25rem'\n }, styles?.messageStatusContainer ? styles.messageStatusContainer(message.mine ?? false) : '')}>\n {message.status ? messageStatusRenderer(onRenderMessageStatus, defaultStatusRenderer, showMessageStatus, participantCount, readCount) : undefined}\n </div>;\n }, [defaultStatusRenderer, message.mine, message.status, messageStatusRenderer, onRenderMessageStatus, participantCount, readCount, showMessageStatus, styles]);\n const messageRootProps = useMemo(() => {\n return {\n className: mergeClasses(chatMessageRenderStyles.rootMessage, chatMessageRenderStyles.rootCommon)\n };\n }, [chatMessageRenderStyles.rootCommon, chatMessageRenderStyles.rootMessage]);\n const messageBodyProps = useMemo(() => {\n return {\n // chatItemMessageContainer used in className and style prop as style prop can't handle CSS selectors\n className: mergeClasses(chatMessageRenderStyles.bodyCommon, !shouldShowAvatar ? chatMessageRenderStyles.bodyWithoutAvatar : chatMessageRenderStyles.bodyWithAvatar, shouldOverlapAvatarAndMessage ? chatMessageRenderStyles.avatarOverlap : chatMessageRenderStyles.avatarNoOverlap, mergeStyles(styles?.chatItemMessageContainer)),\n style: styles?.chatItemMessageContainer !== undefined ? createStyleFromV8Style(styles?.chatItemMessageContainer) : {},\n // make body not focusable to remove repetitions from narrators.\n // inner components are already focusable\n tabIndex: -1,\n role: 'none'\n };\n }, [chatMessageRenderStyles.avatarNoOverlap, chatMessageRenderStyles.avatarOverlap, chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyWithAvatar, chatMessageRenderStyles.bodyWithoutAvatar, shouldOverlapAvatarAndMessage, shouldShowAvatar, styles?.chatItemMessageContainer]);\n const avatar = useMemo(() => {\n const chatAvatarStyle = shouldShowAvatar ? gutterWithAvatar : gutterWithHiddenAvatar;\n const personaOptions: IPersona = {\n hidePersonaDetails: true,\n size: PersonaSize.size32,\n text: message.senderDisplayName,\n showOverflowTooltip: false\n };\n return <div className={mergeStyles(chatAvatarStyle)}>\n {onRenderAvatar ? onRenderAvatar?.(message.senderId, personaOptions) : <Persona {...personaOptions} />}\n </div>;\n }, [message.senderDisplayName, message.senderId, onRenderAvatar, shouldShowAvatar]);\n\n // Fluent UI message components are used here as for default message renderer,\n // timestamp and author name should be shown but they aren't shown for custom renderer.\n // More investigations are needed to check if this can be simplified with states.\n // Status and avatar should be shown for both custom and default renderers.\n if (message.mine === true) {\n return <div>\n <FluentChatMyMessage attached={attached} root={myMessageRootProps} body={myMessageBodyProps} statusIcon={myMessageStatusIcon}>\n {messageRenderer({\n ...props\n })}\n </FluentChatMyMessage>\n </div>;\n } else {\n return <div>\n <FluentChatMessage attached={attached} root={messageRootProps} body={messageBodyProps} avatar={avatar}>\n {messageRenderer({\n ...props\n })}\n </FluentChatMessage>\n </div>;\n }\n};"]}

package/dist/dist-esm/react-components/src/components/ComplianceBanner/BannerMessage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BannerMessage.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ComplianceBanner/BannerMessage.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAe;AACf,MAAM,UAAU,aAAa,CAAC,KAG7B;IACC,MAAM,EACJ,OAAO,EACP,OAAO,EACR,GAAG,KAAK,CAAC;IACV,QAAQ,OAAO,EAAE;~~QACf~~,KAAK,uCAAuC;YAC1C,OAAO;gBACH,+BAAI,OAAO,CAAC,oCAAoC,CAAK;gBACpD,IAAI,OAAO,CAAC,gCAAgC,EAAE;gBAC/C,oBAAC,aAAa,IAAC,QAAQ,EAAE,OAAO,CAAC,aAAa,GAAI,CACjD,CAAC;QACR,KAAK,sCAAsC;YACzC,OAAO;gBACH,+BAAI,OAAO,CAAC,gCAAgC,CAAK;gBAChD,IAAI,OAAO,CAAC,oCAAoC,EAAE;gBACnD,oBAAC,aAAa,IAAC,QAAQ,EAAE,OAAO,CAAC,aAAa,GAAI,CACjD,CAAC;QACR,KAAK,qCAAqC;YACxC,OAAO;gBACH,+BAAI,OAAO,CAAC,8CAA8C,CAAK;gBAC9D,IAAI,OAAO,CAAC,gDAAgD,EAAE;gBAC/D,oBAAC,SAAS,IAAC,QAAQ,EAAE,OAAO,CAAC,SAAS,GAAI,CACzC,CAAC;QACR,KAAK,qCAAqC;YACxC,OAAO;gBACH,+BAAI,OAAO,CAAC,gDAAgD,CAAK;gBAChE,IAAI,OAAO,CAAC,oCAAoC,EAAE;gBACnD,oBAAC,aAAa,IAAC,QAAQ,EAAE,OAAO,CAAC,aAAa,GAAI,CACjD,CAAC;QACR,KAAK,uBAAuB;YAC1B,OAAO;gBACH,+BAAI,OAAO,CAAC,oCAAoC,CAAK;gBACpD,IAAI,OAAO,CAAC,oCAAoC,EAAE;gBACnD,oBAAC,aAAa,IAAC,QAAQ,EAAE,OAAO,CAAC,aAAa,GAAI,CACjD,CAAC;QACR,KAAK,mBAAmB;YACtB,OAAO;gBACH,+BAAI,OAAO,CAAC,+BAA+B,CAAK;gBAC/C,IAAI,OAAO,CAAC,gCAAgC,EAAE;gBAC/C,oBAAC,SAAS,IAAC,QAAQ,EAAE,OAAO,CAAC,SAAS,GAAI,CACzC,CAAC;QACR,KAAK,mBAAmB;YACtB,OAAO;gBACH,+BAAI,OAAO,CAAC,gCAAgC,CAAK;gBAChD,IAAI,OAAO,CAAC,oCAAoC,EAAE;gBACnD,oBAAC,aAAa,IAAC,QAAQ,EAAE,OAAO,CAAC,aAAa,GAAI,CACjD,CAAC;QACR,KAAK,uBAAuB;YAC1B,OAAO;gBACH,+BAAI,OAAO,CAAC,mCAAmC,CAAK;gBACnD,IAAI,OAAO,CAAC,oCAAoC,EAAE;gBACnD,oBAAC,SAAS,IAAC,QAAQ,EAAE,OAAO,CAAC,SAAS,GAAI,CACzC,CAAC;~~KACT~~;IACD,OAAO,yCAAK,CAAC;AACf,CAAC;AACD,SAAS,aAAa,CAAC,KAEtB;IACC,OAAO,oBAAC,IAAI,IAAC,IAAI,EAAC,2EAA2E,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,UAClH,KAAK,CAAC,QAAQ,CACV,CAAC;AACZ,CAAC;AACD,SAAS,SAAS,CAAC,KAElB;IACC,OAAO,oBAAC,IAAI,IAAC,IAAI,EAAC,qGAAqG,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,UAC5I,KAAK,CAAC,QAAQ,CACV,CAAC;AACZ,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Link } from '@fluentui/react';\nimport React from 'react';\nimport { _ComplianceBannerStrings } from './types';\nimport { ComplianceBannerVariant } from './Utils';\n\n/** @private */\nexport function BannerMessage(props: {\n variant: ComplianceBannerVariant;\n strings: _ComplianceBannerStrings;\n}): JSX.Element {\n const {\n variant,\n strings\n } = props;\n switch (variant) {\n case 'TRANSCRIPTION_STOPPED_STILL_RECORDING':\n return <>\n <b>{strings.complianceBannerTranscriptionStopped}</b>\n {` ${strings.complianceBannerNowOnlyRecording}`}\n <PrivacyPolicy linkText={strings.privacyPolicy} />\n </>;\n case 'RECORDING_STOPPED_STILL_TRANSCRIBING':\n return <>\n <b>{strings.complianceBannerRecordingStopped}</b>\n {` ${strings.complianceBannerNowOnlyTranscription}`}\n <PrivacyPolicy linkText={strings.privacyPolicy} />\n </>;\n case 'RECORDING_AND_TRANSCRIPTION_STOPPED':\n return <>\n <b>{strings.complianceBannerRecordingAndTranscriptionSaved}</b>\n {` ${strings.complianceBannerRecordingAndTranscriptionStopped}`}\n <LearnMore linkText={strings.learnMore} />\n </>;\n case 'RECORDING_AND_TRANSCRIPTION_STARTED':\n return <>\n <b>{strings.complianceBannerRecordingAndTranscriptionStarted}</b>\n {` ${strings.complianceBannerTranscriptionConsent}`}\n <PrivacyPolicy linkText={strings.privacyPolicy} />\n </>;\n case 'TRANSCRIPTION_STARTED':\n return <>\n <b>{strings.complianceBannerTranscriptionStarted}</b>\n {` ${strings.complianceBannerTranscriptionConsent}`}\n <PrivacyPolicy linkText={strings.privacyPolicy} />\n </>;\n case 'RECORDING_STOPPED':\n return <>\n <b>{strings.complianceBannerRecordingSaving}</b>\n {` ${strings.complianceBannerRecordingStopped}`}\n <LearnMore linkText={strings.learnMore} />\n </>;\n case 'RECORDING_STARTED':\n return <>\n <b>{strings.complianceBannerRecordingStarted}</b>\n {` ${strings.complianceBannerTranscriptionConsent}`}\n <PrivacyPolicy linkText={strings.privacyPolicy} />\n </>;\n case 'TRANSCRIPTION_STOPPED':\n return <>\n <b>{strings.complianceBannerTranscriptionSaving}</b>\n {` ${strings.complianceBannerTranscriptionStopped}`}\n <LearnMore linkText={strings.learnMore} />\n </>;\n }\n return <></>;\n}\nfunction PrivacyPolicy(props: {\n linkText: string;\n}): JSX.Element {\n return <Link href=\"https://privacy.microsoft.com/privacystatement#mainnoticetoendusersmodule\" target=\"_blank\" underline>\n {props.linkText}\n </Link>;\n}\nfunction LearnMore(props: {\n linkText: string;\n}): JSX.Element {\n return <Link href=\"https://support.microsoft.com/office/record-a-meeting-in-teams-34dfbe7f-b07d-4a27-b4c6-de62f1348c24\" target=\"_blank\" underline>\n {props.linkText}\n </Link>;\n}"]}
1	+ {"version":3,"file":"BannerMessage.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ComplianceBanner/BannerMessage.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAe;AACf,MAAM,UAAU,aAAa,CAAC,KAG7B;IACC,MAAM,EACJ,OAAO,EACP,OAAO,EACR,GAAG,KAAK,CAAC;IACV,QAAQ,OAAO,EAAE,CAAC;QAChB,KAAK,uCAAuC;YAC1C,OAAO;gBACH,+BAAI,OAAO,CAAC,oCAAoC,CAAK;gBACpD,IAAI,OAAO,CAAC,gCAAgC,EAAE;gBAC/C,oBAAC,aAAa,IAAC,QAAQ,EAAE,OAAO,CAAC,aAAa,GAAI,CACjD,CAAC;QACR,KAAK,sCAAsC;YACzC,OAAO;gBACH,+BAAI,OAAO,CAAC,gCAAgC,CAAK;gBAChD,IAAI,OAAO,CAAC,oCAAoC,EAAE;gBACnD,oBAAC,aAAa,IAAC,QAAQ,EAAE,OAAO,CAAC,aAAa,GAAI,CACjD,CAAC;QACR,KAAK,qCAAqC;YACxC,OAAO;gBACH,+BAAI,OAAO,CAAC,8CAA8C,CAAK;gBAC9D,IAAI,OAAO,CAAC,gDAAgD,EAAE;gBAC/D,oBAAC,SAAS,IAAC,QAAQ,EAAE,OAAO,CAAC,SAAS,GAAI,CACzC,CAAC;QACR,KAAK,qCAAqC;YACxC,OAAO;gBACH,+BAAI,OAAO,CAAC,gDAAgD,CAAK;gBAChE,IAAI,OAAO,CAAC,oCAAoC,EAAE;gBACnD,oBAAC,aAAa,IAAC,QAAQ,EAAE,OAAO,CAAC,aAAa,GAAI,CACjD,CAAC;QACR,KAAK,uBAAuB;YAC1B,OAAO;gBACH,+BAAI,OAAO,CAAC,oCAAoC,CAAK;gBACpD,IAAI,OAAO,CAAC,oCAAoC,EAAE;gBACnD,oBAAC,aAAa,IAAC,QAAQ,EAAE,OAAO,CAAC,aAAa,GAAI,CACjD,CAAC;QACR,KAAK,mBAAmB;YACtB,OAAO;gBACH,+BAAI,OAAO,CAAC,+BAA+B,CAAK;gBAC/C,IAAI,OAAO,CAAC,gCAAgC,EAAE;gBAC/C,oBAAC,SAAS,IAAC,QAAQ,EAAE,OAAO,CAAC,SAAS,GAAI,CACzC,CAAC;QACR,KAAK,mBAAmB;YACtB,OAAO;gBACH,+BAAI,OAAO,CAAC,gCAAgC,CAAK;gBAChD,IAAI,OAAO,CAAC,oCAAoC,EAAE;gBACnD,oBAAC,aAAa,IAAC,QAAQ,EAAE,OAAO,CAAC,aAAa,GAAI,CACjD,CAAC;QACR,KAAK,uBAAuB;YAC1B,OAAO;gBACH,+BAAI,OAAO,CAAC,mCAAmC,CAAK;gBACnD,IAAI,OAAO,CAAC,oCAAoC,EAAE;gBACnD,oBAAC,SAAS,IAAC,QAAQ,EAAE,OAAO,CAAC,SAAS,GAAI,CACzC,CAAC;IACV,CAAC;IACD,OAAO,yCAAK,CAAC;AACf,CAAC;AACD,SAAS,aAAa,CAAC,KAEtB;IACC,OAAO,oBAAC,IAAI,IAAC,IAAI,EAAC,2EAA2E,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,UAClH,KAAK,CAAC,QAAQ,CACV,CAAC;AACZ,CAAC;AACD,SAAS,SAAS,CAAC,KAElB;IACC,OAAO,oBAAC,IAAI,IAAC,IAAI,EAAC,qGAAqG,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,UAC5I,KAAK,CAAC,QAAQ,CACV,CAAC;AACZ,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Link } from '@fluentui/react';\nimport React from 'react';\nimport { _ComplianceBannerStrings } from './types';\nimport { ComplianceBannerVariant } from './Utils';\n\n/** @private */\nexport function BannerMessage(props: {\n variant: ComplianceBannerVariant;\n strings: _ComplianceBannerStrings;\n}): JSX.Element {\n const {\n variant,\n strings\n } = props;\n switch (variant) {\n case 'TRANSCRIPTION_STOPPED_STILL_RECORDING':\n return <>\n <b>{strings.complianceBannerTranscriptionStopped}</b>\n {` ${strings.complianceBannerNowOnlyRecording}`}\n <PrivacyPolicy linkText={strings.privacyPolicy} />\n </>;\n case 'RECORDING_STOPPED_STILL_TRANSCRIBING':\n return <>\n <b>{strings.complianceBannerRecordingStopped}</b>\n {` ${strings.complianceBannerNowOnlyTranscription}`}\n <PrivacyPolicy linkText={strings.privacyPolicy} />\n </>;\n case 'RECORDING_AND_TRANSCRIPTION_STOPPED':\n return <>\n <b>{strings.complianceBannerRecordingAndTranscriptionSaved}</b>\n {` ${strings.complianceBannerRecordingAndTranscriptionStopped}`}\n <LearnMore linkText={strings.learnMore} />\n </>;\n case 'RECORDING_AND_TRANSCRIPTION_STARTED':\n return <>\n <b>{strings.complianceBannerRecordingAndTranscriptionStarted}</b>\n {` ${strings.complianceBannerTranscriptionConsent}`}\n <PrivacyPolicy linkText={strings.privacyPolicy} />\n </>;\n case 'TRANSCRIPTION_STARTED':\n return <>\n <b>{strings.complianceBannerTranscriptionStarted}</b>\n {` ${strings.complianceBannerTranscriptionConsent}`}\n <PrivacyPolicy linkText={strings.privacyPolicy} />\n </>;\n case 'RECORDING_STOPPED':\n return <>\n <b>{strings.complianceBannerRecordingSaving}</b>\n {` ${strings.complianceBannerRecordingStopped}`}\n <LearnMore linkText={strings.learnMore} />\n </>;\n case 'RECORDING_STARTED':\n return <>\n <b>{strings.complianceBannerRecordingStarted}</b>\n {` ${strings.complianceBannerTranscriptionConsent}`}\n <PrivacyPolicy linkText={strings.privacyPolicy} />\n </>;\n case 'TRANSCRIPTION_STOPPED':\n return <>\n <b>{strings.complianceBannerTranscriptionSaving}</b>\n {` ${strings.complianceBannerTranscriptionStopped}`}\n <LearnMore linkText={strings.learnMore} />\n </>;\n }\n return <></>;\n}\nfunction PrivacyPolicy(props: {\n linkText: string;\n}): JSX.Element {\n return <Link href=\"https://privacy.microsoft.com/privacystatement#mainnoticetoendusersmodule\" target=\"_blank\" underline>\n {props.linkText}\n </Link>;\n}\nfunction LearnMore(props: {\n linkText: string;\n}): JSX.Element {\n return <Link href=\"https://support.microsoft.com/office/record-a-meeting-in-teams-34dfbe7f-b07d-4a27-b4c6-de62f1348c24\" target=\"_blank\" underline>\n {props.linkText}\n </Link>;\n}"]}

package/dist/dist-esm/react-components/src/components/ComplianceBanner/ComplianceBanner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComplianceBanner.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ComplianceBanner/ComplianceBanner.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAmB,cAAc,EAAE,MAAM,SAAS,CAAC;AAE1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAkB5D;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;IAC9E,MAAM,WAAW,GAAG,MAAM,CAA8B;QACtD,kBAAkB,EAAE;YAClB,mBAAmB,EAAE,KAAK;YAC1B,eAAe,EAAE,KAAK;SACvB;QACD,iBAAiB,EAAE;YACjB,mBAAmB,EAAE,KAAK;YAC1B,eAAe,EAAE,KAAK;SACvB;QACD,WAAW,EAAE,IAAI,CAAC,GAAG,EAAE;KACxB,CAAC,CAAC;IAEH,sFAAsF;IACtF,6FAA6F;IAC7F,MAAM,kBAAkB,GAAG,KAAK,CAAC,eAAe,KAAK,WAAW,CAAC,OAAO,CAAC,kBAAkB,CAAC,eAAe,IAAI,KAAK,CAAC,mBAAmB,KAAK,WAAW,CAAC,OAAO,CAAC,kBAAkB,CAAC,mBAAmB,CAAC;IAExM,wEAAwE;IAExE,4DAA4D;IAC5D,IAAI,kBAAkB,EAAE;~~QACtB~~,WAAW,CAAC,OAAO,GAAG;YACpB,kBAAkB,EAAE,KAAK;YACzB,iBAAiB,EAAE;gBACjB,eAAe,EAAE,eAAe,CAAC,WAAW,CAAC,OAAO,CAAC,iBAAiB,CAAC,eAAe,EAAE,KAAK,CAAC,eAAe,CAAC;gBAC9G,mBAAmB,EAAE,eAAe,CAAC,WAAW,CAAC,OAAO,CAAC,iBAAiB,CAAC,mBAAmB,EAAE,KAAK,CAAC,mBAAmB,CAAC;aAC3H;YACD,WAAW,EAAE,IAAI,CAAC,GAAG,EAAE;SACxB,CAAC;~~KACH~~;IAED,kEAAkE;IAClE,MAAM,OAAO,GAAG,cAAc,CAAC,WAAW,CAAC,OAAO,CAAC,iBAAiB,CAAC,eAAe,EAAE,WAAW,CAAC,OAAO,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;IAEjJ,wEAAwE;IACxE,IAAI,kBAAkB,IAAI,WAAW,CAAC,OAAO,CAAC,iBAAiB,CAAC,eAAe,KAAK,SAAS,IAAI,WAAW,CAAC,OAAO,CAAC,iBAAiB,CAAC,mBAAmB,KAAK,SAAS,EAAE;~~QACxK~~,6JAA6J;QAC7J,WAAW,CAAC,OAAO,CAAC,iBAAiB,CAAC,eAAe,GAAG,KAAK,CAAC;QAC9D,WAAW,CAAC,OAAO,CAAC,iBAAiB,CAAC,mBAAmB,GAAG,KAAK,CAAC;~~KACnE~~;IACD,OAAO,oBAAC,mBAAmB,IAAC,OAAO,EAAE;YACnC,OAAO;YACP,WAAW,EAAE,WAAW,CAAC,OAAO,CAAC,WAAW;SAC7C,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE;YACzC,IAAI,WAAW,CAAC,OAAO,CAAC,iBAAiB,CAAC,eAAe,KAAK,SAAS,EAAE;~~gBACvE~~,WAAW,CAAC,OAAO,CAAC,iBAAiB,CAAC,eAAe,GAAG,KAAK,CAAC;~~aAC/D~~;YACD,IAAI,WAAW,CAAC,OAAO,CAAC,iBAAiB,CAAC,mBAAmB,KAAK,SAAS,EAAE;~~gBAC3E~~,WAAW,CAAC,OAAO,CAAC,iBAAiB,CAAC,mBAAmB,GAAG,KAAK,CAAC;~~aACnE~~;QACH,CAAC,GAAI,CAAC;AACR,CAAC,CAAC;AACF,SAAS,eAAe,CAAC,QAAyB,EAAE,OAA4B;IAC9E,yCAAyC;IACzC,IAAI,OAAO,EAAE;~~QACX~~,OAAO,IAAI,CAAC;~~KACb~~;IACD,0BAA0B;SACrB;~~QACH~~,+EAA+E;QAC/E,IAAI,QAAQ,KAAK,IAAI,EAAE;~~YACrB~~,OAAO,SAAS,CAAC;~~SAClB~~;QACD,4CAA4C;aACvC;~~YACH~~,OAAO,QAAQ,CAAC;~~SACjB~~;~~KACF~~;AACH,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useRef } from 'react';\nimport { ComplianceState, computeVariant } from './Utils';\nimport { _ComplianceBannerProps } from './types';\nimport { DelayedUpdateBanner } from './DelayedUpdateBanner';\n\n// latestBooleanState so we can compare with props.callRecordState and props.callTranscribeState easily\n// latestStringState is on, off, stopped state generated by function determineStates using previous and current state values, this is used for computeVariants later\ntype CachedComplianceBannerProps = {\n latestBooleanState: {\n callTranscribeState?: boolean;\n callRecordState?: boolean;\n };\n latestStringState: {\n callTranscribeState: ComplianceState;\n callRecordState: ComplianceState;\n };\n // Timestamp for the last time cached state was updated.\n // Represented as milliseconds since epoch (i.e., the value returned by Date.now()).\n lastUpdated: number;\n};\n\n/*\n A component that displays banners to notify the user when call recording and\n * transcription is enabled or disabled in a call.\n \n This component implements a state machine that tracks the changes to call\n * recording and transcription state and shows the corresponding message.\n \n @internal\n */\nexport const _ComplianceBanner = (props: _ComplianceBannerProps): JSX.Element => {\n const cachedProps = useRef<CachedComplianceBannerProps>({\n latestBooleanState: {\n callTranscribeState: false,\n callRecordState: false\n },\n latestStringState: {\n callTranscribeState: 'off',\n callRecordState: 'off'\n },\n lastUpdated: Date.now()\n });\n\n // Only update cached props and variant if there is _some_ change in the latest props.\n // This ensures that state machine is only updated if there is an actual change in the props.\n const shouldUpdateCached = props.callRecordState !== cachedProps.current.latestBooleanState.callRecordState \|\| props.callTranscribeState !== cachedProps.current.latestBooleanState.callTranscribeState;\n\n // The following three operations must be performed in this exact order:\n\n // [1]: Update cached state to transition the state machine.\n if (shouldUpdateCached) {\n cachedProps.current = {\n latestBooleanState: props,\n latestStringState: {\n callRecordState: determineStates(cachedProps.current.latestStringState.callRecordState, props.callRecordState),\n callTranscribeState: determineStates(cachedProps.current.latestStringState.callTranscribeState, props.callTranscribeState)\n },\n lastUpdated: Date.now()\n };\n }\n\n // [2]: Compute the variant, using the transitioned state machine.\n const variant = computeVariant(cachedProps.current.latestStringState.callRecordState, cachedProps.current.latestStringState.callTranscribeState);\n\n // [3]: Transition the state machine again to deal with some end-states.\n if (shouldUpdateCached && cachedProps.current.latestStringState.callRecordState === 'stopped' && cachedProps.current.latestStringState.callTranscribeState === 'stopped') {\n // When both states are stopped, after displaying message \"RECORDING_AND_TRANSCRIPTION_STOPPED\", change both states to off (going back to the default state).\n cachedProps.current.latestStringState.callRecordState = 'off';\n cachedProps.current.latestStringState.callTranscribeState = 'off';\n }\n return <DelayedUpdateBanner variant={{\n variant,\n lastUpdated: cachedProps.current.lastUpdated\n }} strings={props.strings} onDismiss={() => {\n if (cachedProps.current.latestStringState.callRecordState === 'stopped') {\n cachedProps.current.latestStringState.callRecordState = 'off';\n }\n if (cachedProps.current.latestStringState.callTranscribeState === 'stopped') {\n cachedProps.current.latestStringState.callTranscribeState = 'off';\n }\n }} />;\n};\nfunction determineStates(previous: ComplianceState, current: boolean \| undefined): ComplianceState {\n // if current state is on, then return on\n if (current) {\n return 'on';\n }\n // if current state is off\n else {\n // if previous state is on and current state is off, return stopped (on -> off)\n if (previous === 'on') {\n return 'stopped';\n }\n // otherwise remain previous state unchanged\n else {\n return previous;\n }\n }\n}"]}
1	+ {"version":3,"file":"ComplianceBanner.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ComplianceBanner/ComplianceBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useRef } from 'react';\nimport { ComplianceState, computeVariant } from './Utils';\nimport { _ComplianceBannerProps } from './types';\nimport { DelayedUpdateBanner } from './DelayedUpdateBanner';\n\n// latestBooleanState so we can compare with props.callRecordState and props.callTranscribeState easily\n// latestStringState is on, off, stopped state generated by function determineStates using previous and current state values, this is used for computeVariants later\ntype CachedComplianceBannerProps = {\n latestBooleanState: {\n callTranscribeState?: boolean;\n callRecordState?: boolean;\n };\n latestStringState: {\n callTranscribeState: ComplianceState;\n callRecordState: ComplianceState;\n };\n // Timestamp for the last time cached state was updated.\n // Represented as milliseconds since epoch (i.e., the value returned by Date.now()).\n lastUpdated: number;\n};\n\n/*\n A component that displays banners to notify the user when call recording and\n * transcription is enabled or disabled in a call.\n \n This component implements a state machine that tracks the changes to call\n * recording and transcription state and shows the corresponding message.\n \n @internal\n */\nexport const _ComplianceBanner = (props: _ComplianceBannerProps): JSX.Element => {\n const cachedProps = useRef<CachedComplianceBannerProps>({\n latestBooleanState: {\n callTranscribeState: false,\n callRecordState: false\n },\n latestStringState: {\n callTranscribeState: 'off',\n callRecordState: 'off'\n },\n lastUpdated: Date.now()\n });\n\n // Only update cached props and variant if there is _some_ change in the latest props.\n // This ensures that state machine is only updated if there is an actual change in the props.\n const shouldUpdateCached = props.callRecordState !== cachedProps.current.latestBooleanState.callRecordState \|\| props.callTranscribeState !== cachedProps.current.latestBooleanState.callTranscribeState;\n\n // The following three operations must be performed in this exact order:\n\n // [1]: Update cached state to transition the state machine.\n if (shouldUpdateCached) {\n cachedProps.current = {\n latestBooleanState: props,\n latestStringState: {\n callRecordState: determineStates(cachedProps.current.latestStringState.callRecordState, props.callRecordState),\n callTranscribeState: determineStates(cachedProps.current.latestStringState.callTranscribeState, props.callTranscribeState)\n },\n lastUpdated: Date.now()\n };\n }\n\n // [2]: Compute the variant, using the transitioned state machine.\n const variant = computeVariant(cachedProps.current.latestStringState.callRecordState, cachedProps.current.latestStringState.callTranscribeState);\n\n // [3]: Transition the state machine again to deal with some end-states.\n if (shouldUpdateCached && cachedProps.current.latestStringState.callRecordState === 'stopped' && cachedProps.current.latestStringState.callTranscribeState === 'stopped') {\n // When both states are stopped, after displaying message \"RECORDING_AND_TRANSCRIPTION_STOPPED\", change both states to off (going back to the default state).\n cachedProps.current.latestStringState.callRecordState = 'off';\n cachedProps.current.latestStringState.callTranscribeState = 'off';\n }\n return <DelayedUpdateBanner variant={{\n variant,\n lastUpdated: cachedProps.current.lastUpdated\n }} strings={props.strings} onDismiss={() => {\n if (cachedProps.current.latestStringState.callRecordState === 'stopped') {\n cachedProps.current.latestStringState.callRecordState = 'off';\n }\n if (cachedProps.current.latestStringState.callTranscribeState === 'stopped') {\n cachedProps.current.latestStringState.callTranscribeState = 'off';\n }\n }} />;\n};\nfunction determineStates(previous: ComplianceState, current: boolean \| undefined): ComplianceState {\n // if current state is on, then return on\n if (current) {\n return 'on';\n }\n // if current state is off\n else {\n // if previous state is on and current state is off, return stopped (on -> off)\n if (previous === 'on') {\n return 'stopped';\n }\n // otherwise remain previous state unchanged\n else {\n return previous;\n }\n }\n}"]}

package/dist/dist-esm/react-components/src/components/ComplianceBanner/DelayedUpdateBanner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DelayedUpdateBanner.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ComplianceBanner/DelayedUpdateBanner.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,MAAM,yBAAyB,GAAG,IAAI,CAAC;AASvC;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,mBAAmB,CAAC,KAInC;IACC,MAAM,EACJ,OAAO,EACP,WAAW,EAAE,kBAAkB,EAChC,GAAG,KAAK,CAAC,OAAO,CAAC;IAElB,0DAA0D;IAC1D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAqB;QACzD,OAAO;QACP,WAAW,EAAE,IAAI,CAAC,GAAG,EAAE;KACxB,CAAC,CAAC;IACH,MAAM,mBAAmB,GAAG,MAAM,CAAuC,IAAI,CAAC,CAAC;IAC/E,IAAI,OAAO,KAAK,OAAO,CAAC,OAAO,IAAI,kBAAkB,GAAG,OAAO,CAAC,WAAW,EAAE;~~QAC3E~~,gCAAgC;QAChC,4DAA4D;QAC5D,IAAI,mBAAmB,CAAC,OAAO,EAAE;~~YAC/B~~,YAAY,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC;~~SAC3C~~;QACD,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QACvB,MAAM,gBAAgB,GAAG,yBAAyB,GAAG,CAAC,GAAG,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;QACjF,IAAI,OAAO,KAAK,UAAU,IAAI,gBAAgB,IAAI,CAAC,EAAE;~~YACnD~~,UAAU,CAAC;gBACT,OAAO;gBACP,WAAW,EAAE,GAAG;aACjB,CAAC,CAAC;~~SACJ~~;aAAM;~~YACL~~,mBAAmB,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC5C,mFAAmF;gBACnF,oDAAoD;gBACpD,UAAU,CAAC;oBACT,OAAO;oBACP,WAAW,EAAE,IAAI,CAAC,GAAG,EAAE;iBACxB,CAAC,CAAC;YACL,CAAC,EAAE,gBAAgB,CAAC,CAAC;~~SACtB~~;~~KACF~~;IACD,IAAI,OAAO,CAAC,OAAO,KAAK,UAAU,EAAE;~~QAClC~~,OAAO,yCAAK,CAAC;~~KACd~~;IACD,OAAO,oBAAC,UAAU,IAAC,cAAc,EAAE,cAAc,CAAC,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE;YACzE,4FAA4F;YAC5F,4DAA4D;YAC5D,UAAU,CAAC;gBACT,OAAO,EAAE,UAAU;gBACnB,WAAW,EAAE,IAAI,CAAC,GAAG,EAAE;aACxB,CAAC,CAAC;YACH,KAAK,CAAC,SAAS,EAAE,CAAC;QACpB,CAAC,EAAE,sBAAsB,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAC1C,oBAAC,aAAa,IAAC,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI,CACxD,CAAC;AAClB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageBar, MessageBarType } from '@fluentui/react';\nimport React, { useRef, useState } from 'react';\nimport { BannerMessage } from './BannerMessage';\nimport { _ComplianceBannerStrings } from './types';\nimport { ComplianceBannerVariant } from './Utils';\nconst BANNER_OVERWRITE_DELAY_MS = 3000;\n\n/** @private /\nexport interface TimestampedVariant {\n variant: ComplianceBannerVariant;\n // Milliseconds since epoch (i.e., return value of Date.now()).\n lastUpdated: number;\n}\n\n/\n Shows a {@link BannerMessage} in a {@link MessageBar} tracking `variant` internally.\n \n This component delays and combines frequent updates to `variant` such that:\n * - Updates that happen within {@link BANNER_OVERWRITE_DELAY_MS} are delayed.\n * - Once {@link BANNER_OVERWRITE_DELAY_MS} has passed since the last update, the _latest_ pending update is shown.\n \n This ensures that there is enough time for the user to see a banner message before it is overwritten.\n * In case of multiple delayed messages, the user always sees the final message as it reflects the final state\n * of recording and transcription.\n \n @private\n */\nexport function DelayedUpdateBanner(props: {\n variant: TimestampedVariant;\n onDismiss: () => void;\n strings: _ComplianceBannerStrings;\n}): JSX.Element {\n const {\n variant,\n lastUpdated: variantLastUpdated\n } = props.variant;\n\n // Tracks the variant that is currently visible in the UI.\n const [visible, setVisible] = useState<TimestampedVariant>({\n variant,\n lastUpdated: Date.now()\n });\n const pendingUpdateHandle = useRef<ReturnType<typeof setTimeout> \| null>(null);\n if (variant !== visible.variant && variantLastUpdated > visible.lastUpdated) {\n // Always clear pending updates.\n // We'll either update now, or schedule an update for later.\n if (pendingUpdateHandle.current) {\n clearTimeout(pendingUpdateHandle.current);\n }\n const now = Date.now();\n const timeToNextUpdate = BANNER_OVERWRITE_DELAY_MS - (now - visible.lastUpdated);\n if (variant === 'NO_STATE' \|\| timeToNextUpdate <= 0) {\n setVisible({\n variant,\n lastUpdated: now\n });\n } else {\n pendingUpdateHandle.current = setTimeout(() => {\n // Set the actual update time, not the computed time when the update should happen.\n // The actual update might be later than we planned.\n setVisible({\n variant,\n lastUpdated: Date.now()\n });\n }, timeToNextUpdate);\n }\n }\n if (visible.variant === 'NO_STATE') {\n return <></>;\n }\n return <MessageBar messageBarType={MessageBarType.warning} onDismiss={() => {\n // when closing the banner, change variant to nostate and change stopped state to off state.\n // Reason: on banner close, going back to the default state.\n setVisible({\n variant: 'NO_STATE',\n lastUpdated: Date.now()\n });\n props.onDismiss();\n }} dismissButtonAriaLabel={props.strings.close}>\n <BannerMessage variant={visible.variant} strings={props.strings} />\n </MessageBar>;\n}"]}
1	+ {"version":3,"file":"DelayedUpdateBanner.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ComplianceBanner/DelayedUpdateBanner.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,MAAM,yBAAyB,GAAG,IAAI,CAAC;AASvC;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,mBAAmB,CAAC,KAInC;IACC,MAAM,EACJ,OAAO,EACP,WAAW,EAAE,kBAAkB,EAChC,GAAG,KAAK,CAAC,OAAO,CAAC;IAElB,0DAA0D;IAC1D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAqB;QACzD,OAAO;QACP,WAAW,EAAE,IAAI,CAAC,GAAG,EAAE;KACxB,CAAC,CAAC;IACH,MAAM,mBAAmB,GAAG,MAAM,CAAuC,IAAI,CAAC,CAAC;IAC/E,IAAI,OAAO,KAAK,OAAO,CAAC,OAAO,IAAI,kBAAkB,GAAG,OAAO,CAAC,WAAW,EAAE,CAAC;QAC5E,gCAAgC;QAChC,4DAA4D;QAC5D,IAAI,mBAAmB,CAAC,OAAO,EAAE,CAAC;YAChC,YAAY,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC;QAC5C,CAAC;QACD,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QACvB,MAAM,gBAAgB,GAAG,yBAAyB,GAAG,CAAC,GAAG,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;QACjF,IAAI,OAAO,KAAK,UAAU,IAAI,gBAAgB,IAAI,CAAC,EAAE,CAAC;YACpD,UAAU,CAAC;gBACT,OAAO;gBACP,WAAW,EAAE,GAAG;aACjB,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,mBAAmB,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC5C,mFAAmF;gBACnF,oDAAoD;gBACpD,UAAU,CAAC;oBACT,OAAO;oBACP,WAAW,EAAE,IAAI,CAAC,GAAG,EAAE;iBACxB,CAAC,CAAC;YACL,CAAC,EAAE,gBAAgB,CAAC,CAAC;QACvB,CAAC;IACH,CAAC;IACD,IAAI,OAAO,CAAC,OAAO,KAAK,UAAU,EAAE,CAAC;QACnC,OAAO,yCAAK,CAAC;IACf,CAAC;IACD,OAAO,oBAAC,UAAU,IAAC,cAAc,EAAE,cAAc,CAAC,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE;YACzE,4FAA4F;YAC5F,4DAA4D;YAC5D,UAAU,CAAC;gBACT,OAAO,EAAE,UAAU;gBACnB,WAAW,EAAE,IAAI,CAAC,GAAG,EAAE;aACxB,CAAC,CAAC;YACH,KAAK,CAAC,SAAS,EAAE,CAAC;QACpB,CAAC,EAAE,sBAAsB,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAC1C,oBAAC,aAAa,IAAC,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI,CACxD,CAAC;AAClB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageBar, MessageBarType } from '@fluentui/react';\nimport React, { useRef, useState } from 'react';\nimport { BannerMessage } from './BannerMessage';\nimport { _ComplianceBannerStrings } from './types';\nimport { ComplianceBannerVariant } from './Utils';\nconst BANNER_OVERWRITE_DELAY_MS = 3000;\n\n/** @private /\nexport interface TimestampedVariant {\n variant: ComplianceBannerVariant;\n // Milliseconds since epoch (i.e., return value of Date.now()).\n lastUpdated: number;\n}\n\n/\n Shows a {@link BannerMessage} in a {@link MessageBar} tracking `variant` internally.\n \n This component delays and combines frequent updates to `variant` such that:\n * - Updates that happen within {@link BANNER_OVERWRITE_DELAY_MS} are delayed.\n * - Once {@link BANNER_OVERWRITE_DELAY_MS} has passed since the last update, the _latest_ pending update is shown.\n \n This ensures that there is enough time for the user to see a banner message before it is overwritten.\n * In case of multiple delayed messages, the user always sees the final message as it reflects the final state\n * of recording and transcription.\n \n @private\n */\nexport function DelayedUpdateBanner(props: {\n variant: TimestampedVariant;\n onDismiss: () => void;\n strings: _ComplianceBannerStrings;\n}): JSX.Element {\n const {\n variant,\n lastUpdated: variantLastUpdated\n } = props.variant;\n\n // Tracks the variant that is currently visible in the UI.\n const [visible, setVisible] = useState<TimestampedVariant>({\n variant,\n lastUpdated: Date.now()\n });\n const pendingUpdateHandle = useRef<ReturnType<typeof setTimeout> \| null>(null);\n if (variant !== visible.variant && variantLastUpdated > visible.lastUpdated) {\n // Always clear pending updates.\n // We'll either update now, or schedule an update for later.\n if (pendingUpdateHandle.current) {\n clearTimeout(pendingUpdateHandle.current);\n }\n const now = Date.now();\n const timeToNextUpdate = BANNER_OVERWRITE_DELAY_MS - (now - visible.lastUpdated);\n if (variant === 'NO_STATE' \|\| timeToNextUpdate <= 0) {\n setVisible({\n variant,\n lastUpdated: now\n });\n } else {\n pendingUpdateHandle.current = setTimeout(() => {\n // Set the actual update time, not the computed time when the update should happen.\n // The actual update might be later than we planned.\n setVisible({\n variant,\n lastUpdated: Date.now()\n });\n }, timeToNextUpdate);\n }\n }\n if (visible.variant === 'NO_STATE') {\n return <></>;\n }\n return <MessageBar messageBarType={MessageBarType.warning} onDismiss={() => {\n // when closing the banner, change variant to nostate and change stopped state to off state.\n // Reason: on banner close, going back to the default state.\n setVisible({\n variant: 'NO_STATE',\n lastUpdated: Date.now()\n });\n props.onDismiss();\n }} dismissButtonAriaLabel={props.strings.close}>\n <BannerMessage variant={visible.variant} strings={props.strings} />\n </MessageBar>;\n}"]}

package/dist/dist-esm/react-components/src/components/ComplianceBanner/Utils.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 /**
  * @private
  */
-export declare type ComplianceState = 'on' | 'off' | 'stopped';
+export type ComplianceState = 'on' | 'off' | 'stopped';
 /**
  * Return different conditions based on the current and previous state of recording and transcribing
  *
@@ -16,5 +16,5 @@ export declare const computeVariant: (callRecordState: ComplianceState, callTran
 /**
  * @private
  */
-export declare type ComplianceBannerVariant = 'NO_STATE' | 'TRANSCRIPTION_STOPPED_STILL_RECORDING' | 'RECORDING_STOPPED_STILL_TRANSCRIBING' | 'RECORDING_AND_TRANSCRIPTION_STOPPED' | 'RECORDING_AND_TRANSCRIPTION_STARTED' | 'TRANSCRIPTION_STARTED' | 'RECORDING_STOPPED' | 'RECORDING_STARTED' | 'TRANSCRIPTION_STOPPED';
+export type ComplianceBannerVariant = 'NO_STATE' | 'TRANSCRIPTION_STOPPED_STILL_RECORDING' | 'RECORDING_STOPPED_STILL_TRANSCRIBING' | 'RECORDING_AND_TRANSCRIPTION_STOPPED' | 'RECORDING_AND_TRANSCRIPTION_STARTED' | 'TRANSCRIPTION_STARTED' | 'RECORDING_STOPPED' | 'RECORDING_STARTED' | 'TRANSCRIPTION_STOPPED';
 //# sourceMappingURL=Utils.d.ts.map

package/dist/dist-esm/react-components/src/components/ComplianceBanner/Utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Utils.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ComplianceBanner/Utils.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAOlC;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,eAAgC,EAAE,mBAAoC,EAA2B,EAAE;IAChI,IAAI,eAAe,KAAK,IAAI,IAAI,mBAAmB,KAAK,IAAI,EAAE;~~QAC5D~~,OAAO,qCAAqC,CAAC;~~KAC9C~~;SAAM,IAAI,eAAe,KAAK,IAAI,IAAI,mBAAmB,KAAK,KAAK,EAAE;~~QACpE~~,OAAO,mBAAmB,CAAC;~~KAC5B~~;SAAM,IAAI,eAAe,KAAK,KAAK,IAAI,mBAAmB,KAAK,IAAI,EAAE;~~QACpE~~,OAAO,uBAAuB,CAAC;~~KAChC~~;SAAM,IAAI,eAAe,KAAK,IAAI,IAAI,mBAAmB,KAAK,SAAS,EAAE;~~QACxE~~,OAAO,uCAAuC,CAAC;~~KAChD~~;SAAM,IAAI,eAAe,KAAK,SAAS,IAAI,mBAAmB,KAAK,IAAI,EAAE;~~QACxE~~,OAAO,sCAAsC,CAAC;~~KAC/C~~;SAAM,IAAI,eAAe,KAAK,KAAK,IAAI,mBAAmB,KAAK,SAAS,EAAE;~~QACzE~~,OAAO,uBAAuB,CAAC;~~KAChC~~;SAAM,IAAI,eAAe,KAAK,SAAS,IAAI,mBAAmB,KAAK,KAAK,EAAE;~~QACzE~~,OAAO,mBAAmB,CAAC;~~KAC5B~~;SAAM,IAAI,eAAe,KAAK,SAAS,IAAI,mBAAmB,KAAK,SAAS,EAAE;~~QAC7E~~,OAAO,qCAAqC,CAAC;~~KAC9C~~;SAAM;~~QACL~~,OAAO,UAAU,CAAC;~~KACnB~~;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/*\n @private\n /\nexport type ComplianceState = 'on' \| 'off' \| 'stopped';\n\n/\n Return different conditions based on the current and previous state of recording and transcribing\n \n @param callRecordState - The current call record state: on, off, stopped\n * @param callTranscribeState - The current call transcribe state: on, off, stopped\n \n @remarks - The stopped state means: previously on but currently off\n \n @private\n /\nexport const computeVariant = (callRecordState: ComplianceState, callTranscribeState: ComplianceState): ComplianceBannerVariant => {\n if (callRecordState === 'on' && callTranscribeState === 'on') {\n return 'RECORDING_AND_TRANSCRIPTION_STARTED';\n } else if (callRecordState === 'on' && callTranscribeState === 'off') {\n return 'RECORDING_STARTED';\n } else if (callRecordState === 'off' && callTranscribeState === 'on') {\n return 'TRANSCRIPTION_STARTED';\n } else if (callRecordState === 'on' && callTranscribeState === 'stopped') {\n return 'TRANSCRIPTION_STOPPED_STILL_RECORDING';\n } else if (callRecordState === 'stopped' && callTranscribeState === 'on') {\n return 'RECORDING_STOPPED_STILL_TRANSCRIBING';\n } else if (callRecordState === 'off' && callTranscribeState === 'stopped') {\n return 'TRANSCRIPTION_STOPPED';\n } else if (callRecordState === 'stopped' && callTranscribeState === 'off') {\n return 'RECORDING_STOPPED';\n } else if (callRecordState === 'stopped' && callTranscribeState === 'stopped') {\n return 'RECORDING_AND_TRANSCRIPTION_STOPPED';\n } else {\n return 'NO_STATE';\n }\n};\n\n/\n @private\n */\nexport type ComplianceBannerVariant = 'NO_STATE' \| 'TRANSCRIPTION_STOPPED_STILL_RECORDING' \| 'RECORDING_STOPPED_STILL_TRANSCRIBING' \| 'RECORDING_AND_TRANSCRIPTION_STOPPED' \| 'RECORDING_AND_TRANSCRIPTION_STARTED' \| 'TRANSCRIPTION_STARTED' \| 'RECORDING_STOPPED' \| 'RECORDING_STARTED' \| 'TRANSCRIPTION_STOPPED';"]}
1	+ {"version":3,"file":"Utils.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ComplianceBanner/Utils.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAOlC;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,eAAgC,EAAE,mBAAoC,EAA2B,EAAE;IAChI,IAAI,eAAe,KAAK,IAAI,IAAI,mBAAmB,KAAK,IAAI,EAAE,CAAC;QAC7D,OAAO,qCAAqC,CAAC;IAC/C,CAAC;SAAM,IAAI,eAAe,KAAK,IAAI,IAAI,mBAAmB,KAAK,KAAK,EAAE,CAAC;QACrE,OAAO,mBAAmB,CAAC;IAC7B,CAAC;SAAM,IAAI,eAAe,KAAK,KAAK,IAAI,mBAAmB,KAAK,IAAI,EAAE,CAAC;QACrE,OAAO,uBAAuB,CAAC;IACjC,CAAC;SAAM,IAAI,eAAe,KAAK,IAAI,IAAI,mBAAmB,KAAK,SAAS,EAAE,CAAC;QACzE,OAAO,uCAAuC,CAAC;IACjD,CAAC;SAAM,IAAI,eAAe,KAAK,SAAS,IAAI,mBAAmB,KAAK,IAAI,EAAE,CAAC;QACzE,OAAO,sCAAsC,CAAC;IAChD,CAAC;SAAM,IAAI,eAAe,KAAK,KAAK,IAAI,mBAAmB,KAAK,SAAS,EAAE,CAAC;QAC1E,OAAO,uBAAuB,CAAC;IACjC,CAAC;SAAM,IAAI,eAAe,KAAK,SAAS,IAAI,mBAAmB,KAAK,KAAK,EAAE,CAAC;QAC1E,OAAO,mBAAmB,CAAC;IAC7B,CAAC;SAAM,IAAI,eAAe,KAAK,SAAS,IAAI,mBAAmB,KAAK,SAAS,EAAE,CAAC;QAC9E,OAAO,qCAAqC,CAAC;IAC/C,CAAC;SAAM,CAAC;QACN,OAAO,UAAU,CAAC;IACpB,CAAC;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/*\n @private\n /\nexport type ComplianceState = 'on' \| 'off' \| 'stopped';\n\n/\n Return different conditions based on the current and previous state of recording and transcribing\n \n @param callRecordState - The current call record state: on, off, stopped\n * @param callTranscribeState - The current call transcribe state: on, off, stopped\n \n @remarks - The stopped state means: previously on but currently off\n \n @private\n /\nexport const computeVariant = (callRecordState: ComplianceState, callTranscribeState: ComplianceState): ComplianceBannerVariant => {\n if (callRecordState === 'on' && callTranscribeState === 'on') {\n return 'RECORDING_AND_TRANSCRIPTION_STARTED';\n } else if (callRecordState === 'on' && callTranscribeState === 'off') {\n return 'RECORDING_STARTED';\n } else if (callRecordState === 'off' && callTranscribeState === 'on') {\n return 'TRANSCRIPTION_STARTED';\n } else if (callRecordState === 'on' && callTranscribeState === 'stopped') {\n return 'TRANSCRIPTION_STOPPED_STILL_RECORDING';\n } else if (callRecordState === 'stopped' && callTranscribeState === 'on') {\n return 'RECORDING_STOPPED_STILL_TRANSCRIBING';\n } else if (callRecordState === 'off' && callTranscribeState === 'stopped') {\n return 'TRANSCRIPTION_STOPPED';\n } else if (callRecordState === 'stopped' && callTranscribeState === 'off') {\n return 'RECORDING_STOPPED';\n } else if (callRecordState === 'stopped' && callTranscribeState === 'stopped') {\n return 'RECORDING_AND_TRANSCRIPTION_STOPPED';\n } else {\n return 'NO_STATE';\n }\n};\n\n/\n @private\n */\nexport type ComplianceBannerVariant = 'NO_STATE' \| 'TRANSCRIPTION_STOPPED_STILL_RECORDING' \| 'RECORDING_STOPPED_STILL_TRANSCRIBING' \| 'RECORDING_AND_TRANSCRIPTION_STOPPED' \| 'RECORDING_AND_TRANSCRIPTION_STARTED' \| 'TRANSCRIPTION_STARTED' \| 'RECORDING_STOPPED' \| 'RECORDING_STARTED' \| 'TRANSCRIPTION_STOPPED';"]}

package/dist/dist-esm/react-components/src/components/ComplianceBanner/types.d.ts CHANGED Viewed

@@ -22,7 +22,7 @@ export interface _ComplianceBannerStrings {
 /**
  * @internal
  */
-export declare type _ComplianceBannerProps = {
+export type _ComplianceBannerProps = {
     callTranscribeState?: boolean;
     callRecordState?: boolean;
     strings: _ComplianceBannerStrings;

package/dist/dist-esm/react-components/src/components/ControlBar.d.ts CHANGED Viewed

@@ -5,7 +5,7 @@ import { BaseCustomStyles } from '../types';
  *
  * @public
  */
-export declare type ControlBarLayout = 'horizontal' | 'vertical' | 'dockedTop' | 'dockedBottom' | 'dockedLeft' | 'dockedRight' | 'floatingTop' | 'floatingBottom' | 'floatingLeft' | 'floatingRight';
+export type ControlBarLayout = 'horizontal' | 'vertical' | 'dockedTop' | 'dockedBottom' | 'dockedLeft' | 'dockedRight' | 'floatingTop' | 'floatingBottom' | 'floatingLeft' | 'floatingRight';
 /**
  * Props for {@link ControlBar}.
  *

package/dist/dist-esm/react-components/src/components/ControlBarButton.d.ts CHANGED Viewed

@@ -40,7 +40,7 @@ export interface ControlBarButtonStrings {
  *
  * @public
  */
-export declare type ControlBarButtonStyles = IButtonStyles;
+export type ControlBarButtonStyles = IButtonStyles;
 /**
  * Props for {@link ControlBarButton}.
  *

package/dist/dist-esm/react-components/src/components/ControlButtonTooltip.js CHANGED Viewed

@@ -26,9 +26,8 @@ export const ControlButtonTooltip = (props) => {
             padding: '0.5rem'
         }
     };
-    // Place callout with no gap between it and the button.
     const calloutProps = {
-        gapSpace: 0,
+        gapSpace: 4,
         styles: calloutStyle,
         backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''
     };

package/dist/dist-esm/react-components/src/components/ControlButtonTooltip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ControlButtonTooltip.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ControlButtonTooltip.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAgE,cAAc,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACtI,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,wDAAwD;AACxD,uFAAuF;AACvF,yHAAyH;AACzH,MAAM,UAAU,GAAgC;IAC9C,IAAI,EAAE;QACJ,OAAO,EAAE,cAAc;KACxB;CACF,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAwB,EAAe,EAAE;IAC5E,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,YAAY,GAAmC;QACnD,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC;SACX;QACD,WAAW,EAAE;YACX,OAAO,EAAE,QAAQ;SAClB;KACF,CAAC;~~IAEF~~,~~uDAAuD;IACvD,~~MAAM,YAAY,GAAG;QACnB,QAAQ,EAAE,CAAC;QACX,MAAM,EAAE,YAAY;QACpB,eAAe,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;KACzE,CAAC;IACF,OAAO,oBAAC,WAAW,oBAAK,KAAK,kBAAc,KAAK,CAAC,EAAE,EAAE,YAAY,kCAC5D,YAAY,GACZ,KAAK,CAAC,YAAY,GACpB,MAAM,EAAE,cAAc,CAAC,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,KAC9C,KAAK,CAAC,QAAQ,CACH,CAAC;AACnB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { TooltipHost, ITooltipHostStyles, ITooltipHostProps, ICalloutContentStyles, mergeStyleSets, useTheme } from '@fluentui/react';\nimport { isDarkThemed } from '../theming/themeUtils';\n\n// The TooltipHost root uses display: inline by default.\n// To prevent sizing issues or tooltip positioning issues, we override to inline-block.\n// For more details see \"Icon Button with Tooltip\" on https://developer.microsoft.com/en-us/fluentui#/controls/web/button\nconst hostStyles: Partial<ITooltipHostStyles> = {\n root: {\n display: 'inline-block'\n }\n};\n\n/*\n Tooltip that should wrap control bar buttons.\n \n @private\n */\nexport const ControlButtonTooltip = (props: ITooltipHostProps): JSX.Element => {\n const theme = useTheme();\n const calloutStyle: Partial<ICalloutContentStyles> = {\n root: {\n padding: 0\n },\n calloutMain: {\n padding: '0.5rem'\n }\n };\n\n ~~// Place callout with no gap between it and the button.\n~~ const calloutProps = {\n gapSpace: 0,\n styles: calloutStyle,\n backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n };\n return <TooltipHost {...props} data-ui-id={props.id} calloutProps={{\n ...calloutProps,\n ...props.calloutProps\n }} styles={mergeStyleSets(hostStyles, props.styles)}>\n {props.children}\n </TooltipHost>;\n};"]}
1	+ {"version":3,"file":"ControlButtonTooltip.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ControlButtonTooltip.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAgE,cAAc,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACtI,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,wDAAwD;AACxD,uFAAuF;AACvF,yHAAyH;AACzH,MAAM,UAAU,GAAgC;IAC9C,IAAI,EAAE;QACJ,OAAO,EAAE,cAAc;KACxB;CACF,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAwB,EAAe,EAAE;IAC5E,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,YAAY,GAAmC;QACnD,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC;SACX;QACD,WAAW,EAAE;YACX,OAAO,EAAE,QAAQ;SAClB;KACF,CAAC;IACF,MAAM,YAAY,GAAG;QACnB,QAAQ,EAAE,CAAC;QACX,MAAM,EAAE,YAAY;QACpB,eAAe,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;KACzE,CAAC;IACF,OAAO,oBAAC,WAAW,oBAAK,KAAK,kBAAc,KAAK,CAAC,EAAE,EAAE,YAAY,kCAC5D,YAAY,GACZ,KAAK,CAAC,YAAY,GACpB,MAAM,EAAE,cAAc,CAAC,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,KAC9C,KAAK,CAAC,QAAQ,CACH,CAAC;AACnB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { TooltipHost, ITooltipHostStyles, ITooltipHostProps, ICalloutContentStyles, mergeStyleSets, useTheme } from '@fluentui/react';\nimport { isDarkThemed } from '../theming/themeUtils';\n\n// The TooltipHost root uses display: inline by default.\n// To prevent sizing issues or tooltip positioning issues, we override to inline-block.\n// For more details see \"Icon Button with Tooltip\" on https://developer.microsoft.com/en-us/fluentui#/controls/web/button\nconst hostStyles: Partial<ITooltipHostStyles> = {\n root: {\n display: 'inline-block'\n }\n};\n\n/*\n Tooltip that should wrap control bar buttons.\n \n @private\n */\nexport const ControlButtonTooltip = (props: ITooltipHostProps): JSX.Element => {\n const theme = useTheme();\n const calloutStyle: Partial<ICalloutContentStyles> = {\n root: {\n padding: 0\n },\n calloutMain: {\n padding: '0.5rem'\n }\n };\n const calloutProps = {\n gapSpace: 4,\n styles: calloutStyle,\n backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n };\n return <TooltipHost {...props} data-ui-id={props.id} calloutProps={{\n ...calloutProps,\n ...props.calloutProps\n }} styles={mergeStyleSets(hostStyles, props.styles)}>\n {props.children}\n </TooltipHost>;\n};"]}

package/dist/dist-esm/react-components/src/components/DevicePermissions/DevicePermissionDropdown.d.ts CHANGED Viewed

@@ -68,7 +68,7 @@ export declare const _DevicePermissionDropdown: (props: _DevicePermissionDropdow
  *
  * @internal
  */
-export declare type _PermissionConstraints = {
+export type _PermissionConstraints = {
     audio: boolean;
     video: boolean;
 };

package/dist/dist-esm/react-components/src/components/DevicePermissions/DevicePermissionDropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DevicePermissionDropdown.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/DevicePermissions/DevicePermissionDropdown.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,QAAQ,EAAoC,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC1F,OAAO,KAAK,MAAM,OAAO,CAAC;AA8D1B;;;;GAIG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;IAC9F,MAAM,EACJ,IAAI,EACJ,mBAAmB,EACnB,OAAO,EACP,SAAS,EACT,OAAO,EACP,OAAO,EACP,MAAM,EACP,GAAG,KAAK,CAAC;IACV,MAAM,mBAAmB,GAAG,GAAgB,EAAE;QAC5C,OAAO,oBAAC,KAAK,IAAC,UAAU,QAAC,aAAa,EAAC,QAAQ;YAC1C,IAAI;YACL,oBAAC,IAAI,QAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,CAAQ,CACjC,CAAC;IACb,CAAC,CAAC;IACF,MAAM,iBAAiB,GAAG,GAAgB,EAAE;QAC1C,OAAO,oBAAC,IAAI,QAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,mBAAmB,CAAQ,CAAC;IACrD,CAAC,CAAC;IACF,OAAO,oBAAC,QAAQ,kBAAa,qBAAqB,EAAE,WAAW,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,EAAE,KAAK,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,OAAO,EAAE,GAAG,EAAE;YAC9M,IAAI,mBAAmB,EAAE;~~gBACvB~~,mBAAmB,CAAC,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI;oBAC/B,KAAK,EAAE,IAAI;oBACX,KAAK,EAAE,IAAI;iBACZ,CAAC,CAAC;~~aACJ~~;YACD,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,CAAC;QACd,CAAC,EAAE,OAAO,EAAE,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,EAAE,EAAE,MAAM,EAAE,MAAM,GAAI,CAAC;AAChD,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Dropdown, IDropdownOption, IDropdownStyles, Stack, Text } from '@fluentui/react';\nimport React from 'react';\n\n/*\n Strings of {@link DevicePermissionDropdown} that can be overridden.\n \n @internal\n /\nexport interface _DevicePermissionDropdownStrings {\n /\n dropdown label\n /\n\n label?: string;\n /\n dropdown placeholder\n /\n placeHolderText: string;\n /* string for action button /\n actionButtonContent?: string;\n}\n\n/\n Props for {@link _DevicePermissionDropdown}.\n \n @internal\n /\nexport interface _DevicePermissionDropdownProps {\n /\n icon shown in dropdown placeholder\n /\n icon?: JSX.Element;\n /\n Dropdown content\n /\n options?: IDropdownOption[];\n /\n Ask for permissions of devices.\n \n @remarks\n * Browser permission window will pop up if permissions are not granted yet\n \n @param constrain - Define constraints for accessing local devices {@link @azure/communication-calling#PermissionConstraints }\n /\n askDevicePermission?(constrain: _PermissionConstraints): Promise<void>;\n /\n Optional callback when component is clicked\n /\n onClick?: () => void;\n /\n Define constraints for accessing local devices {@link @azure/communication-calling#PermissionConstraints }\n /\n constrain?: _PermissionConstraints;\n /\n Strings for devicepermissiondropdown\n /\n strings?: _DevicePermissionDropdownStrings;\n /\n Styles for devicepermissiondropdown\n /\n styles?: Partial<IDropdownStyles>;\n}\n\n/\n A dropdown to trigger device permission prompt\n \n @internal\n /\nexport const _DevicePermissionDropdown = (props: _DevicePermissionDropdownProps): JSX.Element => {\n const {\n icon,\n askDevicePermission,\n onClick,\n constrain,\n strings,\n options,\n styles\n } = props;\n const onRenderPlaceholder = (): JSX.Element => {\n return <Stack horizontal verticalAlign=\"center\">\n {icon}\n <Text>{strings?.placeHolderText}</Text>\n </Stack>;\n };\n const onRenderCaretDown = (): JSX.Element => {\n return <Text>{strings?.actionButtonContent}</Text>;\n };\n return <Dropdown data-ui-id={'permission-dropdown'} placeholder={strings?.placeHolderText} label={strings?.label} onRenderPlaceholder={onRenderPlaceholder} onRenderCaretDown={onRenderCaretDown} onClick={() => {\n if (askDevicePermission) {\n askDevicePermission(constrain ?? {\n video: true,\n audio: true\n });\n }\n onClick?.();\n }} options={options ?? []} styles={styles} />;\n};\n\n/\n Define constraints for accessing local devices {@link @azure/communication-calling#PermissionConstraints }\n \n @internal\n */\nexport type _PermissionConstraints = {\n audio: boolean;\n video: boolean;\n};"]}
1	+ {"version":3,"file":"DevicePermissionDropdown.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/DevicePermissions/DevicePermissionDropdown.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,QAAQ,EAAoC,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC1F,OAAO,KAAK,MAAM,OAAO,CAAC;AA8D1B;;;;GAIG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;IAC9F,MAAM,EACJ,IAAI,EACJ,mBAAmB,EACnB,OAAO,EACP,SAAS,EACT,OAAO,EACP,OAAO,EACP,MAAM,EACP,GAAG,KAAK,CAAC;IACV,MAAM,mBAAmB,GAAG,GAAgB,EAAE;QAC5C,OAAO,oBAAC,KAAK,IAAC,UAAU,QAAC,aAAa,EAAC,QAAQ;YAC1C,IAAI;YACL,oBAAC,IAAI,QAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,CAAQ,CACjC,CAAC;IACb,CAAC,CAAC;IACF,MAAM,iBAAiB,GAAG,GAAgB,EAAE;QAC1C,OAAO,oBAAC,IAAI,QAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,mBAAmB,CAAQ,CAAC;IACrD,CAAC,CAAC;IACF,OAAO,oBAAC,QAAQ,kBAAa,qBAAqB,EAAE,WAAW,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,EAAE,KAAK,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,OAAO,EAAE,GAAG,EAAE;YAC9M,IAAI,mBAAmB,EAAE,CAAC;gBACxB,mBAAmB,CAAC,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI;oBAC/B,KAAK,EAAE,IAAI;oBACX,KAAK,EAAE,IAAI;iBACZ,CAAC,CAAC;YACL,CAAC;YACD,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,CAAC;QACd,CAAC,EAAE,OAAO,EAAE,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,EAAE,EAAE,MAAM,EAAE,MAAM,GAAI,CAAC;AAChD,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Dropdown, IDropdownOption, IDropdownStyles, Stack, Text } from '@fluentui/react';\nimport React from 'react';\n\n/*\n Strings of {@link DevicePermissionDropdown} that can be overridden.\n \n @internal\n /\nexport interface _DevicePermissionDropdownStrings {\n /\n dropdown label\n /\n\n label?: string;\n /\n dropdown placeholder\n /\n placeHolderText: string;\n /* string for action button /\n actionButtonContent?: string;\n}\n\n/\n Props for {@link _DevicePermissionDropdown}.\n \n @internal\n /\nexport interface _DevicePermissionDropdownProps {\n /\n icon shown in dropdown placeholder\n /\n icon?: JSX.Element;\n /\n Dropdown content\n /\n options?: IDropdownOption[];\n /\n Ask for permissions of devices.\n \n @remarks\n * Browser permission window will pop up if permissions are not granted yet\n \n @param constrain - Define constraints for accessing local devices {@link @azure/communication-calling#PermissionConstraints }\n /\n askDevicePermission?(constrain: _PermissionConstraints): Promise<void>;\n /\n Optional callback when component is clicked\n /\n onClick?: () => void;\n /\n Define constraints for accessing local devices {@link @azure/communication-calling#PermissionConstraints }\n /\n constrain?: _PermissionConstraints;\n /\n Strings for devicepermissiondropdown\n /\n strings?: _DevicePermissionDropdownStrings;\n /\n Styles for devicepermissiondropdown\n /\n styles?: Partial<IDropdownStyles>;\n}\n\n/\n A dropdown to trigger device permission prompt\n \n @internal\n /\nexport const _DevicePermissionDropdown = (props: _DevicePermissionDropdownProps): JSX.Element => {\n const {\n icon,\n askDevicePermission,\n onClick,\n constrain,\n strings,\n options,\n styles\n } = props;\n const onRenderPlaceholder = (): JSX.Element => {\n return <Stack horizontal verticalAlign=\"center\">\n {icon}\n <Text>{strings?.placeHolderText}</Text>\n </Stack>;\n };\n const onRenderCaretDown = (): JSX.Element => {\n return <Text>{strings?.actionButtonContent}</Text>;\n };\n return <Dropdown data-ui-id={'permission-dropdown'} placeholder={strings?.placeHolderText} label={strings?.label} onRenderPlaceholder={onRenderPlaceholder} onRenderCaretDown={onRenderCaretDown} onClick={() => {\n if (askDevicePermission) {\n askDevicePermission(constrain ?? {\n video: true,\n audio: true\n });\n }\n onClick?.();\n }} options={options ?? []} styles={styles} />;\n};\n\n/\n Define constraints for accessing local devices {@link @azure/communication-calling#PermissionConstraints }\n \n @internal\n */\nexport type _PermissionConstraints = {\n audio: boolean;\n video: boolean;\n};"]}

package/dist/dist-esm/react-components/src/components/DevicesButton.d.ts CHANGED Viewed

@@ -207,7 +207,7 @@ export interface DeviceMenuStyles extends IContextualMenuStyles {
  *
  * @internal
  */
-export declare const generateDefaultDeviceMenuProps: (props: DeviceMenuProps, strings: DeviceMenuStrings, primaryActionItem?: IContextualMenuItem | undefined, isSelectCamAllowed?: boolean, isSelectMicAllowed?: boolean) => {
+export declare const generateDefaultDeviceMenuProps: (props: DeviceMenuProps, strings: DeviceMenuStrings, primaryActionItem?: IContextualMenuItem, isSelectCamAllowed?: boolean, isSelectMicAllowed?: boolean) => {
     items: IContextualMenuItem[];
 } | undefined;
 /**