@azure/communication-react 1.21.0-beta.1 → 1.22.0-alpha-202411160017

package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/FluentChatMyMessageComponent.js

@@ -17,25 +17,78 @@ import { getFluentUIAttachedValue } from '../../utils/ChatMessageComponentUtils'
  * @private
  */
 export const FluentChatMyMessageComponent = (props) => {
-    const { message, styles, shouldOverlapAvatarAndMessage, onRenderMessage, onRenderAvatar, showMessageStatus, onRenderMessageStatus, participantCount, readCount, onActionButtonClick, onDisplayDateTimeString, inlineImageOptions, mentionOptions, userId, defaultStatusRenderer, statusToRender, actionsForAttachment, onRenderAttachmentDownloads, isRichTextEditorEnabled, onPaste, inlineImagesWithProgress, onRemoveInlineImage, onInsertInlineImage } = props;
+    const { message, styles, shouldOverlapAvatarAndMessage, onRenderMessage, onRenderAvatar, showMessageStatus, onRenderMessageStatus, participantCount, readCount, onActionButtonClick, 
+    /* @conditional-compile-remove(date-time-customization) */
+    onDisplayDateTimeString, inlineImageOptions, 
+    /* @conditional-compile-remove(mention) */
+    mentionOptions, userId, defaultStatusRenderer, statusToRender, actionsForAttachment, onRenderAttachmentDownloads, 
+    /* @conditional-compile-remove(rich-text-editor) */
+    isRichTextEditorEnabled, 
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+    onPaste, 
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+    inlineImagesWithProgress, 
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+    onRemoveInlineImage, 
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+    onInsertInlineImage } = props;
     const chatMessageRenderStyles = useChatMessageRenderStyles();
     // 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' || messageProps.message.messageType === 'blocked') {
-            return React.createElement(ChatMyMessageComponent, Object.assign({}, messageProps, { onRenderAttachmentDownloads: onRenderAttachmentDownloads, strings: messageProps.strings, message: messageProps.message, userId: userId, remoteParticipantsCount: participantCount ? participantCount - 1 : 0, shouldOverlapAvatarAndMessage: shouldOverlapAvatarAndMessage, onRenderAvatar: onRenderAvatar, showMessageStatus: showMessageStatus, messageStatus: messageProps.message.status, onActionButtonClick: onActionButtonClick, onDisplayDateTimeString: onDisplayDateTimeString, inlineImageOptions: inlineImageOptions, mentionOptions: mentionOptions, actionsForAttachment: actionsForAttachment, isRichTextEditorEnabled: isRichTextEditorEnabled, onPaste: onPaste, onRemoveInlineImage: onRemoveInlineImage, onInsertInlineImage: onInsertInlineImage, inlineImagesWithProgress: inlineImagesWithProgress }));
+        if (messageProps.message.messageType === 'chat' ||
+            /* @conditional-compile-remove(data-loss-prevention) */ messageProps.message.messageType === 'blocked') {
+            return (React.createElement(ChatMyMessageComponent, Object.assign({}, messageProps, { onRenderAttachmentDownloads: onRenderAttachmentDownloads, strings: messageProps.strings, message: messageProps.message, userId: userId, remoteParticipantsCount: participantCount ? participantCount - 1 : 0, shouldOverlapAvatarAndMessage: shouldOverlapAvatarAndMessage, onRenderAvatar: onRenderAvatar, showMessageStatus: showMessageStatus, messageStatus: messageProps.message.status, onActionButtonClick: onActionButtonClick, 
+                /* @conditional-compile-remove(date-time-customization) */
+                onDisplayDateTimeString: onDisplayDateTimeString, inlineImageOptions: inlineImageOptions, 
+                /* @conditional-compile-remove(mention) */
+                mentionOptions: mentionOptions, actionsForAttachment: actionsForAttachment, 
+                /* @conditional-compile-remove(rich-text-editor) */
+                isRichTextEditorEnabled: isRichTextEditorEnabled, 
+                /* @conditional-compile-remove(rich-text-editor-image-upload) */
+                onPaste: onPaste, 
+                /* @conditional-compile-remove(rich-text-editor-image-upload) */
+                onRemoveInlineImage: onRemoveInlineImage, 
+                /* @conditional-compile-remove(rich-text-editor-image-upload) */
+                onInsertInlineImage: onInsertInlineImage, 
+                /* @conditional-compile-remove(rich-text-editor-image-upload) */
+                inlineImagesWithProgress: inlineImagesWithProgress })));
         }
         return React.createElement(React.Fragment, null);
-    }, [onActionButtonClick, onRenderAvatar, participantCount, shouldOverlapAvatarAndMessage, showMessageStatus, userId, onDisplayDateTimeString, inlineImageOptions, mentionOptions, onRenderAttachmentDownloads, actionsForAttachment,
+    }, [
+        onActionButtonClick,
+        onRenderAvatar,
+        participantCount,
+        shouldOverlapAvatarAndMessage,
+        showMessageStatus,
+        userId,
+        /* @conditional-compile-remove(date-time-customization) */
+        onDisplayDateTimeString,
+        inlineImageOptions,
+        /* @conditional-compile-remove(mention) */
+        mentionOptions,
+        onRenderAttachmentDownloads,
+        actionsForAttachment,
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        new Date().toDateString(), isRichTextEditorEnabled, onPaste, onRemoveInlineImage, onInsertInlineImage, inlineImagesWithProgress]);
+        new Date().toDateString(),
+        /* @conditional-compile-remove(rich-text-editor) */
+        isRichTextEditorEnabled,
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        onPaste,
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        onRemoveInlineImage,
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        onInsertInlineImage,
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        inlineImagesWithProgress
+    ]);
     const messageRenderer = useCallback((messageProps) => {
-        return onRenderMessage === undefined ? defaultChatMessageRenderer(Object.assign({}, messageProps)) : onRenderMessage(messageProps, defaultChatMessageRenderer);
+        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) });
+        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 attached = useMemo(() => {
         return getFluentUIAttachedValue(message.attached);
@@ -44,7 +97,9 @@ export const FluentChatMyMessageComponent = (props) => {
         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) : {},
+            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]);
@@ -55,14 +110,24 @@ export const FluentChatMyMessageComponent = (props) => {
     }, [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]);
+        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
+    ]);
     // 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.
-    return React.createElement(FluentChatMyMessage, { attached: attached, root: myMessageRootProps, body: myMessageBodyProps, statusIcon: myMessageStatusIcon }, messageRenderer(Object.assign({}, props)));
+    return (React.createElement(FluentChatMyMessage, { attached: attached, root: myMessageRootProps, body: myMessageBodyProps, statusIcon: myMessageStatusIcon }, messageRenderer(Object.assign({}, props))));
 };
 //# sourceMappingURL=FluentChatMyMessageComponent.js.map

package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/FluentChatMyMessageComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"FluentChatMyMessageComponent.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/ChatMessage/MyMessageComponents/FluentChatMyMessageComponent.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAIpD,OAAO,EAAE,oBAAoB,EAAE,0BAA0B,EAAE,MAAM,mCAAmC,CAAC;AACrG,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,aAAa,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACpF,OAAO,EAAE,wBAAwB,EAAE,MAAM,uCAAuC,CAAC;AAGjF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,KAA6C,EAAe,EAAE;IACzG,MAAM,EACJ,OAAO,EACP,MAAM,EACN,6BAA6B,EAC7B,eAAe,EACf,cAAc,EACd,iBAAiB,EACjB,qBAAqB,EACrB,gBAAgB,EAChB,SAAS,EACT,mBAAmB,EACnB,uBAAuB,EACvB,kBAAkB,EAClB,cAAc,EACd,MAAM,EACN,qBAAqB,EACrB,cAAc,EACd,oBAAoB,EACpB,2BAA2B,EAC3B,uBAAuB,EACvB,OAAO,EACP,wBAAwB,EACxB,mBAAmB,EACnB,mBAAmB,EACpB,GAAG,KAAK,CAAC;IACV,MAAM,uBAAuB,GAAG,0BAA0B,EAAE,CAAC;IAE7D,sGAAsG;IACtG,qFAAqF;IACrF,MAAM,0BAA0B,GAAG,WAAW,CAAC,CAAC,YAA0B,EAAE,EAAE;QAC5E,IAAI,YAAY,CAAC,OAAO,CAAC,WAAW,KAAK,MAAM,IAAI,YAAY,CAAC,OAAO,CAAC,WAAW,KAAK,SAAS,EAAE,CAAC;YAClG,OAAO,oBAAC,sBAAsB,oBAAK,YAAY,IAAE,2BAA2B,EAAE,2BAA2B,EAAE,OAAO,EAAE,YAAY,CAAC,OAAO,EAAE,OAAO,EAAE,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,uBAAuB,EAAE,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,6BAA6B,EAAE,6BAA6B,EAAE,cAAc,EAAE,cAAc,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,aAAa,EAAE,YAAY,CAAC,OAAO,CAAC,MAAM,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,cAAc,EAAE,cAAc,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,OAAO,EAAE,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,wBAAwB,IAAI,CAAC;QACh1B,CAAC;QACD,OAAO,yCAAK,CAAC;IACf,CAAC,EAAE,CAAC,mBAAmB,EAAE,cAAc,EAAE,gBAAgB,EAAE,6BAA6B,EAAE,iBAAiB,EAAE,MAAM,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,cAAc,EAAE,2BAA2B,EAAE,oBAAoB;QACnO,uDAAuD;QACvD,IAAI,IAAI,EAAE,CAAC,YAAY,EAAE,EAAE,uBAAuB,EAAE,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,wBAAwB,CAAC,CAAC,CAAC;IAClI,MAAM,eAAe,GAAG,WAAW,CAAC,CAAC,YAA0B,EAAE,EAAE;QACjE,OAAO,eAAe,KAAK,SAAS,CAAC,CAAC,CAAC,0BAA0B,mBAC5D,YAAY,EACf,CAAC,CAAC,CAAC,eAAe,CAAC,YAAY,EAAE,0BAA0B,CAAC,CAAC;IACjE,CAAC,EAAE,CAAC,0BAA0B,EAAE,eAAe,CAAC,CAAC,CAAC;IAClD,MAAM,qBAAqB,GAAG,WAAW,CAAC,CAAC,qBAAqH,EAAE,qBAAkJ,EAAE,iBAA2B,EAAE,gBAAyB,EAAE,SAAkB,EAAE,EAAE;QAClY,OAAO,iBAAiB,IAAI,cAAc,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,CAAC;YACzF,MAAM,EAAE,OAAO,CAAC,MAAM;SACvB,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,OAAO,EAAE,gBAAgB,aAAhB,gBAAgB,cAAhB,gBAAgB,GAAI,CAAC,EAAE,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAE,WAAW,CAAC,oBAAoB,CAAC,GAAI,CAAC;IACrJ,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC;IAC9B,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,OAAO,wBAAwB,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IACpD,CAAC,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC;IACvB,MAAM,kBAAkB,GAAG,OAAO,CAAC,GAAG,EAAE;QACtC,OAAO;YACL,uGAAuG;YACvG,SAAS,EAAE,YAAY,CAAC,uBAAuB,CAAC,aAAa,EAAE,uBAAuB,CAAC,UAAU,EAAE,WAAW,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,0BAA0B,CAAC,CAAC;YACnJ,KAAK,EAAE,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,0BAA0B,MAAK,SAAS,CAAC,CAAC,CAAC,sBAAsB,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,0BAA0B,CAAC,CAAC,CAAC,CAAC,EAAE;YACzH,IAAI,EAAE,MAAM;SACb,CAAC;IACJ,CAAC,EAAE,CAAC,uBAAuB,CAAC,UAAU,EAAE,uBAAuB,CAAC,aAAa,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,0BAA0B,CAAC,CAAC,CAAC;IACpH,MAAM,kBAAkB,GAAG,OAAO,CAAC,GAAG,EAAE;QACtC,OAAO;YACL,SAAS,EAAE,YAAY,CAAC,uBAAuB,CAAC,UAAU,EAAE,uBAAuB,CAAC,aAAa,CAAC;SACnG,CAAC;IACJ,CAAC,EAAE,CAAC,uBAAuB,CAAC,UAAU,EAAE,uBAAuB,CAAC,aAAa,CAAC,CAAC,CAAC;IAChF,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE;;QACvC,OAAO,6BAAK,SAAS,EAAE,WAAW,CAAC;gBACjC,WAAW,EAAE,SAAS;aACvB,EAAE,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,sBAAsB,EAAC,CAAC,CAAC,MAAM,CAAC,sBAAsB,CAAC,MAAA,OAAO,CAAC,IAAI,mCAAI,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,IACzF,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,qBAAqB,CAAC,qBAAqB,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAC7I,CAAC;IACX,CAAC,EAAE,CAAC,qBAAqB,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,MAAM,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,CAAC,CAAC,CAAC;IAEhK,8EAA8E;IAC9E,uFAAuF;IACvF,iFAAiF;IACjF,2EAA2E;IAC3E,OAAO,oBAAC,mBAAmB,IAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,kBAAkB,EAAE,IAAI,EAAE,kBAAkB,EAAE,UAAU,EAAE,mBAAmB,IAC9H,eAAe,mBACb,KAAK,EACR,CACoB,CAAC;AAC3B,CAAC,CAAC","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 { BlockedMessage } from '../../../types';\nimport { noMessageStatusStyle, useChatMessageRenderStyles } from '../../styles/MessageThread.styles';\nimport { mergeStyles } from '@fluentui/react';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { createStyleFromV8Style } from '../../styles/v8StyleShim';\nimport { MessageStatusIndicatorProps } from '../../MessageStatusIndicator';\nimport { ChatMyMessageComponent } from './ChatMyMessageComponent';\nimport { ChatMyMessage as FluentChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { getFluentUIAttachedValue } from '../../utils/ChatMessageComponentUtils';\nimport type { FluentChatMessageComponentWrapperProps } from '../MessageComponents/FluentChatMessageComponent';\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 FluentChatMyMessageComponent = (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    onDisplayDateTimeString,\n    inlineImageOptions,\n    mentionOptions,\n    userId,\n    defaultStatusRenderer,\n    statusToRender,\n    actionsForAttachment,\n    onRenderAttachmentDownloads,\n    isRichTextEditorEnabled,\n    onPaste,\n    inlineImagesWithProgress,\n    onRemoveInlineImage,\n    onInsertInlineImage\n  } = props;\n  const chatMessageRenderStyles = useChatMessageRenderStyles();\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' || messageProps.message.messageType === 'blocked') {\n      return <ChatMyMessageComponent {...messageProps} onRenderAttachmentDownloads={onRenderAttachmentDownloads} strings={messageProps.strings} message={messageProps.message} userId={userId} remoteParticipantsCount={participantCount ? participantCount - 1 : 0} shouldOverlapAvatarAndMessage={shouldOverlapAvatarAndMessage} onRenderAvatar={onRenderAvatar} showMessageStatus={showMessageStatus} messageStatus={messageProps.message.status} onActionButtonClick={onActionButtonClick} onDisplayDateTimeString={onDisplayDateTimeString} inlineImageOptions={inlineImageOptions} mentionOptions={mentionOptions} actionsForAttachment={actionsForAttachment} isRichTextEditorEnabled={isRichTextEditorEnabled} onPaste={onPaste} onRemoveInlineImage={onRemoveInlineImage} onInsertInlineImage={onInsertInlineImage} inlineImagesWithProgress={inlineImagesWithProgress} />;\n    }\n    return <></>;\n  }, [onActionButtonClick, onRenderAvatar, participantCount, shouldOverlapAvatarAndMessage, showMessageStatus, userId, onDisplayDateTimeString, inlineImageOptions, mentionOptions, onRenderAttachmentDownloads, actionsForAttachment,\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  new Date().toDateString(), isRichTextEditorEnabled, onPaste, onRemoveInlineImage, onInsertInlineImage, inlineImagesWithProgress]);\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 | BlockedMessage, 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 attached = useMemo(() => {\n    return getFluentUIAttachedValue(message.attached);\n  }, [message.attached]);\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    };\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\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  return <FluentChatMyMessage attached={attached} root={myMessageRootProps} body={myMessageBodyProps} statusIcon={myMessageStatusIcon}>\n      {messageRenderer({\n      ...props\n    })}\n    </FluentChatMyMessage>;\n};"]}
+{"version":3,"file":"FluentChatMyMessageComponent.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MyMessageComponents/FluentChatMyMessageComponent.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';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../../types';\nimport { noMessageStatusStyle, useChatMessageRenderStyles } from '../../styles/MessageThread.styles';\nimport { mergeStyles } from '@fluentui/react';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { createStyleFromV8Style } from '../../styles/v8StyleShim';\nimport { MessageStatusIndicatorProps } from '../../MessageStatusIndicator';\nimport { ChatMyMessageComponent } from './ChatMyMessageComponent';\nimport { ChatMyMessage as FluentChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { getFluentUIAttachedValue } from '../../utils/ChatMessageComponentUtils';\nimport type { FluentChatMessageComponentWrapperProps } from '../MessageComponents/FluentChatMessageComponent';\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 FluentChatMyMessageComponent = (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    /* @conditional-compile-remove(date-time-customization) */\n    onDisplayDateTimeString,\n    inlineImageOptions,\n    /* @conditional-compile-remove(mention) */\n    mentionOptions,\n    userId,\n    defaultStatusRenderer,\n    statusToRender,\n    actionsForAttachment,\n    onRenderAttachmentDownloads,\n    /* @conditional-compile-remove(rich-text-editor) */\n    isRichTextEditorEnabled,\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    onPaste,\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    inlineImagesWithProgress,\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    onRemoveInlineImage,\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    onInsertInlineImage\n  } = props;\n  const chatMessageRenderStyles = useChatMessageRenderStyles();\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(\n    (messageProps: MessageProps) => {\n      if (\n        messageProps.message.messageType === 'chat' ||\n        /* @conditional-compile-remove(data-loss-prevention) */ messageProps.message.messageType === 'blocked'\n      ) {\n        return (\n          <ChatMyMessageComponent\n            {...messageProps}\n            onRenderAttachmentDownloads={onRenderAttachmentDownloads}\n            strings={messageProps.strings}\n            message={messageProps.message}\n            userId={userId}\n            remoteParticipantsCount={participantCount ? participantCount - 1 : 0}\n            shouldOverlapAvatarAndMessage={shouldOverlapAvatarAndMessage}\n            onRenderAvatar={onRenderAvatar}\n            showMessageStatus={showMessageStatus}\n            messageStatus={messageProps.message.status}\n            onActionButtonClick={onActionButtonClick}\n            /* @conditional-compile-remove(date-time-customization) */\n            onDisplayDateTimeString={onDisplayDateTimeString}\n            inlineImageOptions={inlineImageOptions}\n            /* @conditional-compile-remove(mention) */\n            mentionOptions={mentionOptions}\n            actionsForAttachment={actionsForAttachment}\n            /* @conditional-compile-remove(rich-text-editor) */\n            isRichTextEditorEnabled={isRichTextEditorEnabled}\n            /* @conditional-compile-remove(rich-text-editor-image-upload) */\n            onPaste={onPaste}\n            /* @conditional-compile-remove(rich-text-editor-image-upload) */\n            onRemoveInlineImage={onRemoveInlineImage}\n            /* @conditional-compile-remove(rich-text-editor-image-upload) */\n            onInsertInlineImage={onInsertInlineImage}\n            /* @conditional-compile-remove(rich-text-editor-image-upload) */\n            inlineImagesWithProgress={inlineImagesWithProgress}\n          />\n        );\n      }\n      return <></>;\n    },\n    [\n      onActionButtonClick,\n      onRenderAvatar,\n      participantCount,\n      shouldOverlapAvatarAndMessage,\n      showMessageStatus,\n      userId,\n      /* @conditional-compile-remove(date-time-customization) */\n      onDisplayDateTimeString,\n      inlineImageOptions,\n      /* @conditional-compile-remove(mention) */\n      mentionOptions,\n      onRenderAttachmentDownloads,\n      actionsForAttachment,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      new Date().toDateString(),\n      /* @conditional-compile-remove(rich-text-editor) */\n      isRichTextEditorEnabled,\n      /* @conditional-compile-remove(rich-text-editor-image-upload) */\n      onPaste,\n      /* @conditional-compile-remove(rich-text-editor-image-upload) */\n      onRemoveInlineImage,\n      /* @conditional-compile-remove(rich-text-editor-image-upload) */\n      onInsertInlineImage,\n      /* @conditional-compile-remove(rich-text-editor-image-upload) */\n      inlineImagesWithProgress\n    ]\n  );\n\n  const messageRenderer = useCallback(\n    (messageProps: MessageProps) => {\n      return onRenderMessage === undefined\n        ? defaultChatMessageRenderer({ ...messageProps })\n        : onRenderMessage(messageProps, defaultChatMessageRenderer);\n    },\n    [defaultChatMessageRenderer, onRenderMessage]\n  );\n\n  const messageStatusRenderer = useCallback(\n    (\n      onRenderMessageStatus:\n        | ((messageStatusIndicatorProps: MessageStatusIndicatorProps) => JSX.Element | null)\n        | undefined,\n      defaultStatusRenderer: (\n        message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage,\n        participantCount: number,\n        readCount: number,\n        status?: MessageStatus\n      ) => JSX.Element,\n      showMessageStatus?: boolean,\n      participantCount?: number,\n      readCount?: number\n    ) => {\n      return showMessageStatus && statusToRender ? (\n        onRenderMessageStatus ? (\n          onRenderMessageStatus({ status: message.status })\n        ) : (\n          defaultStatusRenderer(message, participantCount ?? 0, readCount ?? 0, message.status)\n        )\n      ) : (\n        <div className={mergeStyles(noMessageStatusStyle)} />\n      );\n    },\n    [message, statusToRender]\n  );\n\n  const attached = useMemo(() => {\n    return getFluentUIAttachedValue(message.attached);\n  }, [message.attached]);\n\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(\n        chatMessageRenderStyles.rootMyMessage,\n        chatMessageRenderStyles.rootCommon,\n        mergeStyles(styles?.myChatItemMessageContainer)\n      ),\n      style:\n        styles?.myChatItemMessageContainer !== undefined\n          ? createStyleFromV8Style(styles?.myChatItemMessageContainer)\n          : {},\n      role: 'none'\n    };\n  }, [chatMessageRenderStyles.rootCommon, chatMessageRenderStyles.rootMyMessage, styles?.myChatItemMessageContainer]);\n\n  const myMessageBodyProps = useMemo(() => {\n    return {\n      className: mergeClasses(chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage)\n    };\n  }, [chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage]);\n\n  const myMessageStatusIcon = useMemo(() => {\n    return (\n      <div\n        className={mergeStyles(\n          { paddingLeft: '0.25rem' },\n          styles?.messageStatusContainer ? styles.messageStatusContainer(message.mine ?? false) : ''\n        )}\n      >\n        {message.status\n          ? messageStatusRenderer(\n              onRenderMessageStatus,\n              defaultStatusRenderer,\n              showMessageStatus,\n              participantCount,\n              readCount\n            )\n          : undefined}\n      </div>\n    );\n  }, [\n    defaultStatusRenderer,\n    message.mine,\n    message.status,\n    messageStatusRenderer,\n    onRenderMessageStatus,\n    participantCount,\n    readCount,\n    showMessageStatus,\n    styles\n  ]);\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  return (\n    <FluentChatMyMessage\n      attached={attached}\n      root={myMessageRootProps}\n      body={myMessageBodyProps}\n      statusIcon={myMessageStatusIcon}\n    >\n      {messageRenderer({ ...props })}\n    </FluentChatMyMessage>\n  );\n};\n"]}

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

@@ -7,52 +7,52 @@ export function BannerMessage(props) {
     const { variant, strings } = props;
     switch (variant) {
         case 'TRANSCRIPTION_STOPPED_STILL_RECORDING':
-            return React.createElement(React.Fragment, null,
+            return (React.createElement(React.Fragment, null,
                 React.createElement("b", null, strings.complianceBannerTranscriptionStopped),
                 ` ${strings.complianceBannerNowOnlyRecording}`,
-                React.createElement(PrivacyPolicy, { linkText: strings.privacyPolicy }));
+                React.createElement(PrivacyPolicy, { linkText: strings.privacyPolicy })));
         case 'RECORDING_STOPPED_STILL_TRANSCRIBING':
-            return React.createElement(React.Fragment, null,
+            return (React.createElement(React.Fragment, null,
                 React.createElement("b", null, strings.complianceBannerRecordingStopped),
                 ` ${strings.complianceBannerNowOnlyTranscription}`,
-                React.createElement(PrivacyPolicy, { linkText: strings.privacyPolicy }));
+                React.createElement(PrivacyPolicy, { linkText: strings.privacyPolicy })));
         case 'RECORDING_AND_TRANSCRIPTION_STOPPED':
-            return React.createElement(React.Fragment, null,
+            return (React.createElement(React.Fragment, null,
                 React.createElement("b", null, strings.complianceBannerRecordingAndTranscriptionSaved),
                 ` ${strings.complianceBannerRecordingAndTranscriptionStopped}`,
-                React.createElement(LearnMore, { linkText: strings.learnMore }));
+                React.createElement(LearnMore, { linkText: strings.learnMore })));
         case 'RECORDING_AND_TRANSCRIPTION_STARTED':
-            return React.createElement(React.Fragment, null,
+            return (React.createElement(React.Fragment, null,
                 React.createElement("b", null, strings.complianceBannerRecordingAndTranscriptionStarted),
                 ` ${strings.complianceBannerTranscriptionConsent}`,
-                React.createElement(PrivacyPolicy, { linkText: strings.privacyPolicy }));
+                React.createElement(PrivacyPolicy, { linkText: strings.privacyPolicy })));
         case 'TRANSCRIPTION_STARTED':
-            return React.createElement(React.Fragment, null,
+            return (React.createElement(React.Fragment, null,
                 React.createElement("b", null, strings.complianceBannerTranscriptionStarted),
                 ` ${strings.complianceBannerTranscriptionConsent}`,
-                React.createElement(PrivacyPolicy, { linkText: strings.privacyPolicy }));
+                React.createElement(PrivacyPolicy, { linkText: strings.privacyPolicy })));
         case 'RECORDING_STOPPED':
-            return React.createElement(React.Fragment, null,
+            return (React.createElement(React.Fragment, null,
                 React.createElement("b", null, strings.complianceBannerRecordingSaving),
                 ` ${strings.complianceBannerRecordingStopped}`,
-                React.createElement(LearnMore, { linkText: strings.learnMore }));
+                React.createElement(LearnMore, { linkText: strings.learnMore })));
         case 'RECORDING_STARTED':
-            return React.createElement(React.Fragment, null,
+            return (React.createElement(React.Fragment, null,
                 React.createElement("b", null, strings.complianceBannerRecordingStarted),
                 ` ${strings.complianceBannerTranscriptionConsent}`,
-                React.createElement(PrivacyPolicy, { linkText: strings.privacyPolicy }));
+                React.createElement(PrivacyPolicy, { linkText: strings.privacyPolicy })));
         case 'TRANSCRIPTION_STOPPED':
-            return React.createElement(React.Fragment, null,
+            return (React.createElement(React.Fragment, null,
                 React.createElement("b", null, strings.complianceBannerTranscriptionSaving),
                 ` ${strings.complianceBannerTranscriptionStopped}`,
-                React.createElement(LearnMore, { linkText: strings.learnMore }));
+                React.createElement(LearnMore, { linkText: strings.learnMore })));
     }
     return React.createElement(React.Fragment, null);
 }
 function PrivacyPolicy(props) {
-    return React.createElement(Link, { href: "https://privacy.microsoft.com/privacystatement#mainnoticetoendusersmodule", target: "_blank", underline: true }, props.linkText);
+    return (React.createElement(Link, { href: "https://privacy.microsoft.com/privacystatement#mainnoticetoendusersmodule", target: "_blank", underline: true }, props.linkText));
 }
 function LearnMore(props) {
-    return React.createElement(Link, { href: "https://support.microsoft.com/office/record-a-meeting-in-teams-34dfbe7f-b07d-4a27-b4c6-de62f1348c24", target: "_blank", underline: true }, props.linkText);
+    return (React.createElement(Link, { href: "https://support.microsoft.com/office/record-a-meeting-in-teams-34dfbe7f-b07d-4a27-b4c6-de62f1348c24", target: "_blank", underline: true }, props.linkText));
 }
 //# sourceMappingURL=BannerMessage.js.map

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

@@ -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,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}"]}
+{"version":3,"file":"BannerMessage.js","sourceRoot":"","sources":["../../../../../../../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,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IACnC,QAAQ,OAAO,EAAE,CAAC;QAChB,KAAK,uCAAuC;YAC1C,OAAO,CACL;gBACE,+BAAI,OAAO,CAAC,oCAAoC,CAAK;gBACpD,IAAI,OAAO,CAAC,gCAAgC,EAAE;gBAC/C,oBAAC,aAAa,IAAC,QAAQ,EAAE,OAAO,CAAC,aAAa,GAAI,CACjD,CACJ,CAAC;QACJ,KAAK,sCAAsC;YACzC,OAAO,CACL;gBACE,+BAAI,OAAO,CAAC,gCAAgC,CAAK;gBAChD,IAAI,OAAO,CAAC,oCAAoC,EAAE;gBACnD,oBAAC,aAAa,IAAC,QAAQ,EAAE,OAAO,CAAC,aAAa,GAAI,CACjD,CACJ,CAAC;QACJ,KAAK,qCAAqC;YACxC,OAAO,CACL;gBACE,+BAAI,OAAO,CAAC,8CAA8C,CAAK;gBAC9D,IAAI,OAAO,CAAC,gDAAgD,EAAE;gBAC/D,oBAAC,SAAS,IAAC,QAAQ,EAAE,OAAO,CAAC,SAAS,GAAI,CACzC,CACJ,CAAC;QACJ,KAAK,qCAAqC;YACxC,OAAO,CACL;gBACE,+BAAI,OAAO,CAAC,gDAAgD,CAAK;gBAChE,IAAI,OAAO,CAAC,oCAAoC,EAAE;gBACnD,oBAAC,aAAa,IAAC,QAAQ,EAAE,OAAO,CAAC,aAAa,GAAI,CACjD,CACJ,CAAC;QACJ,KAAK,uBAAuB;YAC1B,OAAO,CACL;gBACE,+BAAI,OAAO,CAAC,oCAAoC,CAAK;gBACpD,IAAI,OAAO,CAAC,oCAAoC,EAAE;gBACnD,oBAAC,aAAa,IAAC,QAAQ,EAAE,OAAO,CAAC,aAAa,GAAI,CACjD,CACJ,CAAC;QACJ,KAAK,mBAAmB;YACtB,OAAO,CACL;gBACE,+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,CACJ,CAAC;QACJ,KAAK,mBAAmB;YACtB,OAAO,CACL;gBACE,+BAAI,OAAO,CAAC,gCAAgC,CAAK;gBAChD,IAAI,OAAO,CAAC,oCAAoC,EAAE;gBACnD,oBAAC,aAAa,IAAC,QAAQ,EAAE,OAAO,CAAC,aAAa,GAAI,CACjD,CACJ,CAAC;QACJ,KAAK,uBAAuB;YAC1B,OAAO,CACL;gBACE,+BAAI,OAAO,CAAC,mCAAmC,CAAK;gBACnD,IAAI,OAAO,CAAC,oCAAoC,EAAE;gBACnD,oBAAC,SAAS,IAAC,QAAQ,EAAE,OAAO,CAAC,SAAS,GAAI,CACzC,CACJ,CAAC;IACN,CAAC;IACD,OAAO,yCAAK,CAAC;AACf,CAAC;AAED,SAAS,aAAa,CAAC,KAA2B;IAChD,OAAO,CACL,oBAAC,IAAI,IAAC,IAAI,EAAC,2EAA2E,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,UAC7G,KAAK,CAAC,QAAQ,CACV,CACR,CAAC;AACJ,CAAC;AAED,SAAS,SAAS,CAAC,KAA2B;IAC5C,OAAO,CACL,oBAAC,IAAI,IACH,IAAI,EAAC,qGAAqG,EAC1G,MAAM,EAAC,QAAQ,EACf,SAAS,UAER,KAAK,CAAC,QAAQ,CACV,CACR,CAAC;AACJ,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 { variant, strings } = props;\n  switch (variant) {\n    case 'TRANSCRIPTION_STOPPED_STILL_RECORDING':\n      return (\n        <>\n          <b>{strings.complianceBannerTranscriptionStopped}</b>\n          {` ${strings.complianceBannerNowOnlyRecording}`}\n          <PrivacyPolicy linkText={strings.privacyPolicy} />\n        </>\n      );\n    case 'RECORDING_STOPPED_STILL_TRANSCRIBING':\n      return (\n        <>\n          <b>{strings.complianceBannerRecordingStopped}</b>\n          {` ${strings.complianceBannerNowOnlyTranscription}`}\n          <PrivacyPolicy linkText={strings.privacyPolicy} />\n        </>\n      );\n    case 'RECORDING_AND_TRANSCRIPTION_STOPPED':\n      return (\n        <>\n          <b>{strings.complianceBannerRecordingAndTranscriptionSaved}</b>\n          {` ${strings.complianceBannerRecordingAndTranscriptionStopped}`}\n          <LearnMore linkText={strings.learnMore} />\n        </>\n      );\n    case 'RECORDING_AND_TRANSCRIPTION_STARTED':\n      return (\n        <>\n          <b>{strings.complianceBannerRecordingAndTranscriptionStarted}</b>\n          {` ${strings.complianceBannerTranscriptionConsent}`}\n          <PrivacyPolicy linkText={strings.privacyPolicy} />\n        </>\n      );\n    case 'TRANSCRIPTION_STARTED':\n      return (\n        <>\n          <b>{strings.complianceBannerTranscriptionStarted}</b>\n          {` ${strings.complianceBannerTranscriptionConsent}`}\n          <PrivacyPolicy linkText={strings.privacyPolicy} />\n        </>\n      );\n    case 'RECORDING_STOPPED':\n      return (\n        <>\n          <b>{strings.complianceBannerRecordingSaving}</b>\n          {` ${strings.complianceBannerRecordingStopped}`}\n          <LearnMore linkText={strings.learnMore} />\n        </>\n      );\n    case 'RECORDING_STARTED':\n      return (\n        <>\n          <b>{strings.complianceBannerRecordingStarted}</b>\n          {` ${strings.complianceBannerTranscriptionConsent}`}\n          <PrivacyPolicy linkText={strings.privacyPolicy} />\n        </>\n      );\n    case 'TRANSCRIPTION_STOPPED':\n      return (\n        <>\n          <b>{strings.complianceBannerTranscriptionSaving}</b>\n          {` ${strings.complianceBannerTranscriptionStopped}`}\n          <LearnMore linkText={strings.learnMore} />\n        </>\n      );\n  }\n  return <></>;\n}\n\nfunction PrivacyPolicy(props: { linkText: string }): JSX.Element {\n  return (\n    <Link href=\"https://privacy.microsoft.com/privacystatement#mainnoticetoendusersmodule\" target=\"_blank\" underline>\n      {props.linkText}\n    </Link>\n  );\n}\n\nfunction LearnMore(props: { linkText: string }): JSX.Element {\n  return (\n    <Link\n      href=\"https://support.microsoft.com/office/record-a-meeting-in-teams-34dfbe7f-b07d-4a27-b4c6-de62f1348c24\"\n      target=\"_blank\"\n      underline\n    >\n      {props.linkText}\n    </Link>\n  );\n}\n"]}

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

@@ -26,7 +26,8 @@ export const _ComplianceBanner = (props) => {
     });
     // Only update cached props and variant if there is _some_ change in the latest props.
     // This ensures that state machine is only updated if there is an actual change in the props.
-    const shouldUpdateCached = props.callRecordState !== cachedProps.current.latestBooleanState.callRecordState || props.callTranscribeState !== cachedProps.current.latestBooleanState.callTranscribeState;
+    const shouldUpdateCached = props.callRecordState !== cachedProps.current.latestBooleanState.callRecordState ||
+        props.callTranscribeState !== cachedProps.current.latestBooleanState.callTranscribeState;
     // The following three operations must be performed in this exact order:
     // [1]: Update cached state to transition the state machine.
     if (shouldUpdateCached) {
@@ -42,12 +43,14 @@ export const _ComplianceBanner = (props) => {
     // [2]: Compute the variant, using the transitioned state machine.
     const variant = computeVariant(cachedProps.current.latestStringState.callRecordState, cachedProps.current.latestStringState.callTranscribeState);
     // [3]: Transition the state machine again to deal with some end-states.
-    if (shouldUpdateCached && cachedProps.current.latestStringState.callRecordState === 'stopped' && cachedProps.current.latestStringState.callTranscribeState === 'stopped') {
+    if (shouldUpdateCached &&
+        cachedProps.current.latestStringState.callRecordState === 'stopped' &&
+        cachedProps.current.latestStringState.callTranscribeState === 'stopped') {
         // When both states are stopped, after displaying message "RECORDING_AND_TRANSCRIPTION_STOPPED", change both states to off (going back to the default state).
         cachedProps.current.latestStringState.callRecordState = 'off';
         cachedProps.current.latestStringState.callTranscribeState = 'off';
     }
-    return React.createElement(DelayedUpdateBanner, { variant: {
+    return (React.createElement(DelayedUpdateBanner, { variant: {
             variant,
             lastUpdated: cachedProps.current.lastUpdated
         }, strings: props.strings, onDismiss: () => {
@@ -57,7 +60,7 @@ export const _ComplianceBanner = (props) => {
             if (cachedProps.current.latestStringState.callTranscribeState === 'stopped') {
                 cachedProps.current.latestStringState.callTranscribeState = 'off';
             }
-        } });
+        } }));
 };
 function determineStates(previous, current) {
     // if current state is on, then return on

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

@@ -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,CAAC;QACvB,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;IACJ,CAAC;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,CAAC;QACzK,6JAA6J;QAC7J,WAAW,CAAC,OAAO,CAAC,iBAAiB,CAAC,eAAe,GAAG,KAAK,CAAC;QAC9D,WAAW,CAAC,OAAO,CAAC,iBAAiB,CAAC,mBAAmB,GAAG,KAAK,CAAC;IACpE,CAAC;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,CAAC;gBACxE,WAAW,CAAC,OAAO,CAAC,iBAAiB,CAAC,eAAe,GAAG,KAAK,CAAC;YAChE,CAAC;YACD,IAAI,WAAW,CAAC,OAAO,CAAC,iBAAiB,CAAC,mBAAmB,KAAK,SAAS,EAAE,CAAC;gBAC5E,WAAW,CAAC,OAAO,CAAC,iBAAiB,CAAC,mBAAmB,GAAG,KAAK,CAAC;YACpE,CAAC;QACH,CAAC,GAAI,CAAC;AACR,CAAC,CAAC;AACF,SAAS,eAAe,CAAC,QAAyB,EAAE,OAA4B;IAC9E,yCAAyC;IACzC,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,IAAI,CAAC;IACd,CAAC;IACD,0BAA0B;SACrB,CAAC;QACJ,+EAA+E;QAC/E,IAAI,QAAQ,KAAK,IAAI,EAAE,CAAC;YACtB,OAAO,SAAS,CAAC;QACnB,CAAC;QACD,4CAA4C;aACvC,CAAC;YACJ,OAAO,QAAQ,CAAC;QAClB,CAAC;IACH,CAAC;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}"]}
+{"version":3,"file":"ComplianceBanner.js","sourceRoot":"","sources":["../../../../../../../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,GACtB,KAAK,CAAC,eAAe,KAAK,WAAW,CAAC,OAAO,CAAC,kBAAkB,CAAC,eAAe;QAChF,KAAK,CAAC,mBAAmB,KAAK,WAAW,CAAC,OAAO,CAAC,kBAAkB,CAAC,mBAAmB,CAAC;IAE3F,wEAAwE;IAExE,4DAA4D;IAC5D,IAAI,kBAAkB,EAAE,CAAC;QACvB,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,CAClC,WAAW,CAAC,OAAO,CAAC,iBAAiB,CAAC,mBAAmB,EACzD,KAAK,CAAC,mBAAmB,CAC1B;aACF;YACD,WAAW,EAAE,IAAI,CAAC,GAAG,EAAE;SACxB,CAAC;IACJ,CAAC;IAED,kEAAkE;IAClE,MAAM,OAAO,GAAG,cAAc,CAC5B,WAAW,CAAC,OAAO,CAAC,iBAAiB,CAAC,eAAe,EACrD,WAAW,CAAC,OAAO,CAAC,iBAAiB,CAAC,mBAAmB,CAC1D,CAAC;IAEF,wEAAwE;IACxE,IACE,kBAAkB;QAClB,WAAW,CAAC,OAAO,CAAC,iBAAiB,CAAC,eAAe,KAAK,SAAS;QACnE,WAAW,CAAC,OAAO,CAAC,iBAAiB,CAAC,mBAAmB,KAAK,SAAS,EACvE,CAAC;QACD,6JAA6J;QAC7J,WAAW,CAAC,OAAO,CAAC,iBAAiB,CAAC,eAAe,GAAG,KAAK,CAAC;QAC9D,WAAW,CAAC,OAAO,CAAC,iBAAiB,CAAC,mBAAmB,GAAG,KAAK,CAAC;IACpE,CAAC;IAED,OAAO,CACL,oBAAC,mBAAmB,IAClB,OAAO,EAAE;YACP,OAAO;YACP,WAAW,EAAE,WAAW,CAAC,OAAO,CAAC,WAAW;SAC7C,EACD,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,SAAS,EAAE,GAAG,EAAE;YACd,IAAI,WAAW,CAAC,OAAO,CAAC,iBAAiB,CAAC,eAAe,KAAK,SAAS,EAAE,CAAC;gBACxE,WAAW,CAAC,OAAO,CAAC,iBAAiB,CAAC,eAAe,GAAG,KAAK,CAAC;YAChE,CAAC;YACD,IAAI,WAAW,CAAC,OAAO,CAAC,iBAAiB,CAAC,mBAAmB,KAAK,SAAS,EAAE,CAAC;gBAC5E,WAAW,CAAC,OAAO,CAAC,iBAAiB,CAAC,mBAAmB,GAAG,KAAK,CAAC;YACpE,CAAC;QACH,CAAC,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,eAAe,CAAC,QAAyB,EAAE,OAA4B;IAC9E,yCAAyC;IACzC,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,IAAI,CAAC;IACd,CAAC;IACD,0BAA0B;SACrB,CAAC;QACJ,+EAA+E;QAC/E,IAAI,QAAQ,KAAK,IAAI,EAAE,CAAC;YACtB,OAAO,SAAS,CAAC;QACnB,CAAC;QACD,4CAA4C;aACvC,CAAC;YACJ,OAAO,QAAQ,CAAC;QAClB,CAAC;IACH,CAAC;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 =\n    props.callRecordState !== cachedProps.current.latestBooleanState.callRecordState ||\n    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(\n          cachedProps.current.latestStringState.callTranscribeState,\n          props.callTranscribeState\n        )\n      },\n      lastUpdated: Date.now()\n    };\n  }\n\n  // [2]: Compute the variant, using the transitioned state machine.\n  const variant = computeVariant(\n    cachedProps.current.latestStringState.callRecordState,\n    cachedProps.current.latestStringState.callTranscribeState\n  );\n\n  // [3]: Transition the state machine again to deal with some end-states.\n  if (\n    shouldUpdateCached &&\n    cachedProps.current.latestStringState.callRecordState === 'stopped' &&\n    cachedProps.current.latestStringState.callTranscribeState === 'stopped'\n  ) {\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\n  return (\n    <DelayedUpdateBanner\n      variant={{\n        variant,\n        lastUpdated: cachedProps.current.lastUpdated\n      }}\n      strings={props.strings}\n      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    />\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}\n"]}

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

@@ -53,7 +53,7 @@ export function DelayedUpdateBanner(props) {
     if (visible.variant === 'NO_STATE') {
         return React.createElement(React.Fragment, null);
     }
-    return React.createElement(MessageBar, { messageBarType: MessageBarType.warning, onDismiss: () => {
+    return (React.createElement(MessageBar, { messageBarType: MessageBarType.warning, onDismiss: () => {
             // when closing the banner, change variant to nostate and change stopped state to off state.
             // Reason: on banner close, going back to the default state.
             setVisible({
@@ -62,6 +62,6 @@ export function DelayedUpdateBanner(props) {
             });
             props.onDismiss();
         }, dismissButtonAriaLabel: props.strings.close },
-        React.createElement(BannerMessage, { variant: visible.variant, strings: props.strings }));
+        React.createElement(BannerMessage, { variant: visible.variant, strings: props.strings })));
 }
 //# sourceMappingURL=DelayedUpdateBanner.js.map

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

@@ -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,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}"]}
+{"version":3,"file":"DelayedUpdateBanner.js","sourceRoot":"","sources":["../../../../../../../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;AAIhD,MAAM,yBAAyB,GAAG,IAAI,CAAC;AASvC;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,mBAAmB,CAAC,KAInC;IACC,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC;IAEnE,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;IAE/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;QAED,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;IAED,IAAI,OAAO,CAAC,OAAO,KAAK,UAAU,EAAE,CAAC;QACnC,OAAO,yCAAK,CAAC;IACf,CAAC;IAED,OAAO,CACL,oBAAC,UAAU,IACT,cAAc,EAAE,cAAc,CAAC,OAAO,EACtC,SAAS,EAAE,GAAG,EAAE;YACd,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,EACD,sBAAsB,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAE3C,oBAAC,aAAa,IAAC,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI,CACxD,CACd,CAAC;AACJ,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';\n\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 { variant, lastUpdated: variantLastUpdated } = 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\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\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\n  if (visible.variant === 'NO_STATE') {\n    return <></>;\n  }\n\n  return (\n    <MessageBar\n      messageBarType={MessageBarType.warning}\n      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      }}\n      dismissButtonAriaLabel={props.strings.close}\n    >\n      <BannerMessage variant={visible.variant} strings={props.strings} />\n    </MessageBar>\n  );\n}\n"]}

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

@@ -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,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';"]}
+{"version":3,"file":"Utils.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ComplianceBanner/Utils.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAOlC;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,eAAgC,EAChC,mBAAoC,EACX,EAAE;IAC3B,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 = (\n  callRecordState: ComplianceState,\n  callTranscribeState: ComplianceState\n): 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 =\n  | 'NO_STATE'\n  | 'TRANSCRIPTION_STOPPED_STILL_RECORDING'\n  | 'RECORDING_STOPPED_STILL_TRANSCRIBING'\n  | 'RECORDING_AND_TRANSCRIPTION_STOPPED'\n  | 'RECORDING_AND_TRANSCRIPTION_STARTED'\n  | 'TRANSCRIPTION_STARTED'\n  | 'RECORDING_STOPPED'\n  | 'RECORDING_STARTED'\n  | 'TRANSCRIPTION_STOPPED';\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ComplianceBanner/index.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nexport { _ComplianceBanner } from './ComplianceBanner';\nexport type { _ComplianceBannerProps, _ComplianceBannerStrings } from './types';"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ComplianceBanner/index.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nexport { _ComplianceBanner } from './ComplianceBanner';\nexport type { _ComplianceBannerProps, _ComplianceBannerStrings } from './types';\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ComplianceBanner/types.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/**\n * Subset of `CallCompositeStrings` needed by the ComplianceBanner component.\n * @internal\n */\nexport interface _ComplianceBannerStrings {\n  close: string;\n  complianceBannerNowOnlyRecording: string;\n  complianceBannerNowOnlyTranscription: string;\n  complianceBannerRecordingAndTranscriptionSaved: string;\n  complianceBannerRecordingAndTranscriptionStarted: string;\n  complianceBannerRecordingAndTranscriptionStopped: string;\n  complianceBannerRecordingSaving: string;\n  complianceBannerRecordingStarted: string;\n  complianceBannerRecordingStopped: string;\n  complianceBannerTranscriptionConsent: string;\n  complianceBannerTranscriptionSaving: string;\n  complianceBannerTranscriptionStarted: string;\n  complianceBannerTranscriptionStopped: string;\n  learnMore: string;\n  privacyPolicy: string;\n}\n\n/**\n * @internal\n */\nexport type _ComplianceBannerProps = {\n  callTranscribeState?: boolean;\n  callRecordState?: boolean;\n  strings: _ComplianceBannerStrings;\n};"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ComplianceBanner/types.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/**\n * Subset of `CallCompositeStrings` needed by the ComplianceBanner component.\n * @internal\n */\nexport interface _ComplianceBannerStrings {\n  close: string;\n  complianceBannerNowOnlyRecording: string;\n  complianceBannerNowOnlyTranscription: string;\n  complianceBannerRecordingAndTranscriptionSaved: string;\n  complianceBannerRecordingAndTranscriptionStarted: string;\n  complianceBannerRecordingAndTranscriptionStopped: string;\n  complianceBannerRecordingSaving: string;\n  complianceBannerRecordingStarted: string;\n  complianceBannerRecordingStopped: string;\n  complianceBannerTranscriptionConsent: string;\n  complianceBannerTranscriptionSaving: string;\n  complianceBannerTranscriptionStarted: string;\n  complianceBannerTranscriptionStopped: string;\n  learnMore: string;\n  privacyPolicy: string;\n}\n\n/**\n * @internal\n */\nexport type _ComplianceBannerProps = {\n  callTranscribeState?: boolean;\n  callRecordState?: boolean;\n  strings: _ComplianceBannerStrings;\n};\n"]}

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

@@ -5,11 +5,7 @@ import React, { useMemo } from 'react';
 import { controlBarStyles } from './styles/ControlBar.styles';
 import { useTheme } from '../theming';
 import { isDarkThemed } from '../theming/themeUtils';
-const mainDivStyle = {
-    position: 'relative',
-    height: '100%',
-    width: '100%'
-};
+const mainDivStyle = { position: 'relative', height: '100%', width: '100%' };
 /**
  * A container for various buttons for call controls.
  *
@@ -27,18 +23,18 @@ export const ControlBar = (props) => {
         const backgroundStyle = {
             background: isDarkThemed(theme) && (layout === null || layout === void 0 ? void 0 : layout.startsWith('floating')) ? theme.palette.neutralQuaternaryAlt : theme.palette.white
         };
-        const borderAndBoxShadowStyle = (layout === null || layout === void 0 ? void 0 : layout.startsWith('floating')) ? {
-            boxShadow: theme.effects.elevation16,
-            borderRadius: theme.effects.roundedCorner6
-        } : {};
+        const borderAndBoxShadowStyle = (layout === null || layout === void 0 ? void 0 : layout.startsWith('floating'))
+            ? {
+                boxShadow: theme.effects.elevation16,
+                borderRadius: theme.effects.roundedCorner6
+            }
+            : {};
         // if rtl is true and layout is either floatingTop or floatingBottom then we need to override the transform-style property
         // to translate 50% to right instead of the left
-        const transformOverrideStyle = theme.rtl && (layout === 'floatingTop' || layout === 'floatingBottom') ? {
-            transform: 'translateX(50%)'
-        } : {};
+        const transformOverrideStyle = theme.rtl && (layout === 'floatingTop' || layout === 'floatingBottom') ? { transform: 'translateX(50%)' } : {};
         return mergeStyles(controlBarStyle, backgroundStyle, borderAndBoxShadowStyle, transformOverrideStyle, styles === null || styles === void 0 ? void 0 : styles.root);
     }, [layout, styles === null || styles === void 0 ? void 0 : styles.root, theme]);
-    return React.createElement("div", { className: mergeStyles(mainDivStyle) },
-        React.createElement(Stack, { className: controlBarClassName }, props.children));
+    return (React.createElement("div", { className: mergeStyles(mainDivStyle) },
+        React.createElement(Stack, { className: controlBarClassName }, props.children)));
 };
 //# sourceMappingURL=ControlBar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ControlBar.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ControlBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,MAAM,YAAY,GAAW;IAC3B,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;CACd,CAAC;AAmCF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAe,EAAE;IAChE,MAAM,EACJ,MAAM,EACN,MAAM,EACP,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE;QACvC,MAAM,eAAe,GAAG,gBAAgB,CAAC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,YAAY,CAAC,CAAC;QACjE,iIAAiI;QACjI,MAAM,eAAe,GAAG;YACtB,UAAU,EAAE,YAAY,CAAC,KAAK,CAAC,KAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,CAAC,UAAU,CAAC,CAAA,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK;SAC7H,CAAC;QACF,MAAM,uBAAuB,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,CAAC,UAAU,CAAC,EAAC,CAAC,CAAC;YAC/D,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,WAAW;YACpC,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;SAC3C,CAAC,CAAC,CAAC,EAAE,CAAC;QACP,0HAA0H;QAC1H,gDAAgD;QAChD,MAAM,sBAAsB,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC,MAAM,KAAK,aAAa,IAAI,MAAM,KAAK,gBAAgB,CAAC,CAAC,CAAC,CAAC;YACtG,SAAS,EAAE,iBAAiB;SAC7B,CAAC,CAAC,CAAC,EAAE,CAAC;QACP,OAAO,WAAW,CAAC,eAAe,EAAE,eAAe,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,CAAC;IACtH,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;IAClC,OAAO,6BAAK,SAAS,EAAE,WAAW,CAAC,YAAY,CAAC;QAC5C,oBAAC,KAAK,IAAC,SAAS,EAAE,mBAAmB,IAAG,KAAK,CAAC,QAAQ,CAAS,CAC3D,CAAC;AACX,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, mergeStyles, Stack } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { BaseCustomStyles } from '../types';\nimport { controlBarStyles } from './styles/ControlBar.styles';\nimport { useTheme } from '../theming';\nimport { isDarkThemed } from '../theming/themeUtils';\nconst mainDivStyle: IStyle = {\n  position: 'relative',\n  height: '100%',\n  width: '100%'\n};\n\n/**\n * Present layouts for the {@link ControlBar}.\n *\n * @public\n */\nexport type ControlBarLayout = 'horizontal' | 'vertical' | 'dockedTop' | 'dockedBottom' | 'dockedLeft' | 'dockedRight' | 'floatingTop' | 'floatingBottom' | 'floatingLeft' | 'floatingRight';\n\n/**\n * Props for {@link ControlBar}.\n *\n * @public\n */\nexport interface ControlBarProps {\n  /** React Child components. */\n  children?: React.ReactNode;\n  /**\n   * Allows users to pass an object containing custom CSS styles.\n   * @Example\n   * ```\n   * <ControlBar styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: BaseCustomStyles;\n  /**\n   * Changes the layout of the control bar.\n   * Available layouts are `horizontal`, `vertical`, `dockedTop`, `dockedBottom`,\n   * `dockedLeft`, `dockedRight`, `floatingTop`, `floatingBottom`, `floatingLeft`,\n   * `floatingRight`\n   * Defaults to a `horizontal` layout.\n   */\n  layout?: ControlBarLayout;\n}\n\n/**\n * A container for various buttons for call controls.\n *\n * Use with various call control buttons in this library, e.g., {@link CameraButton}, or your own instances of\n * {@link ControlBarButton} directly.\n *\n * @public\n */\nexport const ControlBar = (props: ControlBarProps): JSX.Element => {\n  const {\n    styles,\n    layout\n  } = props;\n  const theme = useTheme();\n  const controlBarClassName = useMemo(() => {\n    const controlBarStyle = controlBarStyles[layout ?? 'horizontal'];\n    // if theme is dark and layout is floating then use palette.neutralQuaternaryAlt as background, otherwise use theme.palette.white\n    const backgroundStyle = {\n      background: isDarkThemed(theme) && layout?.startsWith('floating') ? theme.palette.neutralQuaternaryAlt : theme.palette.white\n    };\n    const borderAndBoxShadowStyle = layout?.startsWith('floating') ? {\n      boxShadow: theme.effects.elevation16,\n      borderRadius: theme.effects.roundedCorner6\n    } : {};\n    // if rtl is true and layout is either floatingTop or floatingBottom then we need to override the transform-style property\n    // to translate 50% to right instead of the left\n    const transformOverrideStyle = theme.rtl && (layout === 'floatingTop' || layout === 'floatingBottom') ? {\n      transform: 'translateX(50%)'\n    } : {};\n    return mergeStyles(controlBarStyle, backgroundStyle, borderAndBoxShadowStyle, transformOverrideStyle, styles?.root);\n  }, [layout, styles?.root, theme]);\n  return <div className={mergeStyles(mainDivStyle)}>\n      <Stack className={controlBarClassName}>{props.children}</Stack>\n    </div>;\n};"]}
+{"version":3,"file":"ControlBar.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ControlBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,MAAM,YAAY,GAAW,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AA6CrF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAe,EAAE;IAChE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACjC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE;QACvC,MAAM,eAAe,GAAG,gBAAgB,CAAC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,YAAY,CAAC,CAAC;QACjE,iIAAiI;QACjI,MAAM,eAAe,GAAG;YACtB,UAAU,EACR,YAAY,CAAC,KAAK,CAAC,KAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,CAAC,UAAU,CAAC,CAAA,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK;SACnH,CAAC;QACF,MAAM,uBAAuB,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,CAAC,UAAU,CAAC;YAC5D,CAAC,CAAC;gBACE,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,WAAW;gBACpC,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;aAC3C;YACH,CAAC,CAAC,EAAE,CAAC;QACP,0HAA0H;QAC1H,gDAAgD;QAChD,MAAM,sBAAsB,GAC1B,KAAK,CAAC,GAAG,IAAI,CAAC,MAAM,KAAK,aAAa,IAAI,MAAM,KAAK,gBAAgB,CAAC,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACjH,OAAO,WAAW,CAAC,eAAe,EAAE,eAAe,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,CAAC;IACtH,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;IAClC,OAAO,CACL,6BAAK,SAAS,EAAE,WAAW,CAAC,YAAY,CAAC;QACvC,oBAAC,KAAK,IAAC,SAAS,EAAE,mBAAmB,IAAG,KAAK,CAAC,QAAQ,CAAS,CAC3D,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, mergeStyles, Stack } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { BaseCustomStyles } from '../types';\nimport { controlBarStyles } from './styles/ControlBar.styles';\nimport { useTheme } from '../theming';\nimport { isDarkThemed } from '../theming/themeUtils';\n\nconst mainDivStyle: IStyle = { position: 'relative', height: '100%', width: '100%' };\n\n/**\n * Present layouts for the {@link ControlBar}.\n *\n * @public\n */\nexport type ControlBarLayout =\n  | 'horizontal'\n  | 'vertical'\n  | 'dockedTop'\n  | 'dockedBottom'\n  | 'dockedLeft'\n  | 'dockedRight'\n  | 'floatingTop'\n  | 'floatingBottom'\n  | 'floatingLeft'\n  | 'floatingRight';\n\n/**\n * Props for {@link ControlBar}.\n *\n * @public\n */\nexport interface ControlBarProps {\n  /** React Child components. */\n  children?: React.ReactNode;\n  /**\n   * Allows users to pass an object containing custom CSS styles.\n   * @Example\n   * ```\n   * <ControlBar styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: BaseCustomStyles;\n  /**\n   * Changes the layout of the control bar.\n   * Available layouts are `horizontal`, `vertical`, `dockedTop`, `dockedBottom`,\n   * `dockedLeft`, `dockedRight`, `floatingTop`, `floatingBottom`, `floatingLeft`,\n   * `floatingRight`\n   * Defaults to a `horizontal` layout.\n   */\n  layout?: ControlBarLayout;\n}\n\n/**\n * A container for various buttons for call controls.\n *\n * Use with various call control buttons in this library, e.g., {@link CameraButton}, or your own instances of\n * {@link ControlBarButton} directly.\n *\n * @public\n */\nexport const ControlBar = (props: ControlBarProps): JSX.Element => {\n  const { styles, layout } = props;\n  const theme = useTheme();\n  const controlBarClassName = useMemo(() => {\n    const controlBarStyle = controlBarStyles[layout ?? 'horizontal'];\n    // if theme is dark and layout is floating then use palette.neutralQuaternaryAlt as background, otherwise use theme.palette.white\n    const backgroundStyle = {\n      background:\n        isDarkThemed(theme) && layout?.startsWith('floating') ? theme.palette.neutralQuaternaryAlt : theme.palette.white\n    };\n    const borderAndBoxShadowStyle = layout?.startsWith('floating')\n      ? {\n          boxShadow: theme.effects.elevation16,\n          borderRadius: theme.effects.roundedCorner6\n        }\n      : {};\n    // if rtl is true and layout is either floatingTop or floatingBottom then we need to override the transform-style property\n    // to translate 50% to right instead of the left\n    const transformOverrideStyle =\n      theme.rtl && (layout === 'floatingTop' || layout === 'floatingBottom') ? { transform: 'translateX(50%)' } : {};\n    return mergeStyles(controlBarStyle, backgroundStyle, borderAndBoxShadowStyle, transformOverrideStyle, styles?.root);\n  }, [layout, styles?.root, theme]);\n  return (\n    <div className={mergeStyles(mainDivStyle)}>\n      <Stack className={controlBarClassName}>{props.children}</Stack>\n    </div>\n  );\n};\n"]}

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

@@ -5,7 +5,13 @@ import { DefaultButton, concatStyleSets, KeyCodes } from '@fluentui/react';
 import { controlButtonStyles } from './styles/ControlBar.styles';
 import { ControlButtonTooltip } from './ControlButtonTooltip';
 const DefaultRenderIcon = (props) => {
-    return (props === null || props === void 0 ? void 0 : props.checked) ? (props === null || props === void 0 ? void 0 : props.onRenderOnIcon) ? props === null || props === void 0 ? void 0 : props.onRenderOnIcon() : null : (props === null || props === void 0 ? void 0 : props.onRenderOffIcon) ? props === null || props === void 0 ? void 0 : props.onRenderOffIcon() : null;
+    return (props === null || props === void 0 ? void 0 : props.checked)
+        ? (props === null || props === void 0 ? void 0 : props.onRenderOnIcon)
+            ? props === null || props === void 0 ? void 0 : props.onRenderOnIcon()
+            : null
+        : (props === null || props === void 0 ? void 0 : props.onRenderOffIcon)
+            ? props === null || props === void 0 ? void 0 : props.onRenderOffIcon()
+            : null;
 };
 /**
  * Default button styled for the {@link ControlBar}.
@@ -18,9 +24,13 @@ export const ControlBarButton = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
     const componentStyles = concatStyleSets(controlButtonStyles, (_a = props.styles) !== null && _a !== void 0 ? _a : {});
     const labelText = (_d = (_b = props === null || props === void 0 ? void 0 : props.text) !== null && _b !== void 0 ? _b : (_c = props === null || props === void 0 ? void 0 : props.strings) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : ((props === null || props === void 0 ? void 0 : props.checked) ? (_e = props === null || props === void 0 ? void 0 : props.strings) === null || _e === void 0 ? void 0 : _e.onLabel : (_f = props === null || props === void 0 ? void 0 : props.strings) === null || _f === void 0 ? void 0 : _f.offLabel);
-    const tooltipContent = (_h = (_g = props === null || props === void 0 ? void 0 : props.strings) === null || _g === void 0 ? void 0 : _g.tooltipContent) !== null && _h !== void 0 ? _h : ((props === null || props === void 0 ? void 0 : props.disabled) ? (_j = props === null || props === void 0 ? void 0 : props.strings) === null || _j === void 0 ? void 0 : _j.tooltipDisabledContent : (props === null || props === void 0 ? void 0 : props.checked) ? (_k = props === null || props === void 0 ? void 0 : props.strings) === null || _k === void 0 ? void 0 : _k.tooltipOnContent : (_l = props === null || props === void 0 ? void 0 : props.strings) === null || _l === void 0 ? void 0 : _l.tooltipOffContent);
+    const tooltipContent = (_h = (_g = props === null || props === void 0 ? void 0 : props.strings) === null || _g === void 0 ? void 0 : _g.tooltipContent) !== null && _h !== void 0 ? _h : ((props === null || props === void 0 ? void 0 : props.disabled)
+        ? (_j = props === null || props === void 0 ? void 0 : props.strings) === null || _j === void 0 ? void 0 : _j.tooltipDisabledContent
+        : (props === null || props === void 0 ? void 0 : props.checked)
+            ? (_k = props === null || props === void 0 ? void 0 : props.strings) === null || _k === void 0 ? void 0 : _k.tooltipOnContent
+            : (_l = props === null || props === void 0 ? void 0 : props.strings) === null || _l === void 0 ? void 0 : _l.tooltipOffContent);
     const tooltipId = ((_m = props.tooltipId) !== null && _m !== void 0 ? _m : props.labelKey) ? props.labelKey + '-tooltip' : undefined;
-    return React.createElement(ControlButtonTooltip, { hidden: props.disableTooltip, content: tooltipContent, id: tooltipId },
-        React.createElement(DefaultButton, Object.assign({}, props, { styles: componentStyles, onRenderText: props.showLabel && props.onRenderText ? props.onRenderText : undefined, onRenderIcon: (_o = props.onRenderIcon) !== null && _o !== void 0 ? _o : DefaultRenderIcon, ariaLabel: (_r = (_q = (_p = props.splitButtonAriaLabel) !== null && _p !== void 0 ? _p : props.ariaLabel) !== null && _q !== void 0 ? _q : labelText) !== null && _r !== void 0 ? _r : tooltipContent, allowDisabledFocus: (_s = props.allowDisabledFocus) !== null && _s !== void 0 ? _s : true, menuTriggerKeyCode: KeyCodes.down, text: undefined }), props.showLabel ? labelText : React.createElement(React.Fragment, null)));
+    return (React.createElement(ControlButtonTooltip, { hidden: props.disableTooltip, content: tooltipContent, id: tooltipId },
+        React.createElement(DefaultButton, Object.assign({}, props, { styles: componentStyles, onRenderText: props.showLabel && props.onRenderText ? props.onRenderText : undefined, onRenderIcon: (_o = props.onRenderIcon) !== null && _o !== void 0 ? _o : DefaultRenderIcon, ariaLabel: (_r = (_q = (_p = props.splitButtonAriaLabel) !== null && _p !== void 0 ? _p : props.ariaLabel) !== null && _q !== void 0 ? _q : labelText) !== null && _r !== void 0 ? _r : tooltipContent, allowDisabledFocus: (_s = props.allowDisabledFocus) !== null && _s !== void 0 ? _s : true, menuTriggerKeyCode: KeyCodes.down, text: undefined }), props.showLabel ? labelText : React.createElement(React.Fragment, null))));
 };
 //# sourceMappingURL=ControlBarButton.js.map